feat: replace slide-to-logout with avatar + name + logout button in header

Removes the drag-to-logout widget in favour of a clean inline layout:
- Desktop: avatar (links to /me), artist name, and a logout icon button
- Mobile flyout: user card with avatar, name, email, and logout button

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

packages/frontend/src/lib/components/header/header.svelte

@@ -6,7 +6,8 @@
   import { logout } from "$lib/services";
   import { goto } from "$app/navigation";
   import { getAssetUrl } from "$lib/api";
-  import LogoutButton from "../logout-button/logout-button.svelte";
+  import { Avatar, AvatarFallback, AvatarImage } from "$lib/components/ui/avatar";
+  import { getUserInitials } from "$lib/utils";
   import Separator from "../ui/separator/separator.svelte";
   import BurgerMenuButton from "../burger-menu-button/burger-menu-button.svelte";
   import Logo from "../logo/logo.svelte";
@@ -125,15 +126,32 @@
 
             <Separator orientation="vertical" class="mx-1 h-6 bg-border/50" />
 
-            <LogoutButton
+            <a href="/me" class="flex items-center gap-2 px-1 hover:opacity-80 transition-opacity">
-              user={{
+              <Avatar class="h-7 w-7 ring-2 ring-primary/20">
-                name:
+                <AvatarImage
-                  authStatus.user!.artist_name || authStatus.user!.email.split("@")[0] || "User",
+                  src={getAssetUrl(authStatus.user!.avatar, "mini")!}
-                avatar: getAssetUrl(authStatus.user!.avatar, "mini")!,
+                  alt={authStatus.user!.artist_name || authStatus.user!.email}
-                email: authStatus.user!.email,
+                />
-              }}
+                <AvatarFallback
-              onLogout={handleLogout}
+                  class="bg-gradient-to-br from-primary to-accent text-primary-foreground text-xs font-semibold"
-            />
+                >
+                  {getUserInitials(authStatus.user!.artist_name || authStatus.user!.email)}
+                </AvatarFallback>
+              </Avatar>
+              <span class="text-sm font-medium text-foreground/90 max-w-24 truncate">
+                {authStatus.user!.artist_name || authStatus.user!.email.split("@")[0]}
+              </span>
+            </a>
+
+            <Button
+              variant="ghost"
+              size="icon"
+              class="h-8 w-8 rounded-full text-foreground hover:text-destructive hover:bg-destructive/10"
+              onclick={handleLogout}
+              title={$_("header.logout")}
+            >
+              <span class="icon-[ri--logout-circle-r-line] h-4 w-4"></span>
+            </Button>
           </div>
         </div>
       {:else}
@@ -178,17 +196,36 @@
   </div>
 
   <div class="flex-1 py-6 px-5 space-y-6">
-    <!-- User logout slider -->
+    <!-- User card -->
     {#if authStatus.authenticated}
-      <LogoutButton
+      <div class="flex items-center gap-3 rounded-xl border border-border/40 bg-card/50 px-4 py-3">
-        user={{
+        <Avatar class="h-10 w-10 ring-2 ring-primary/20 shrink-0">
-          name: authStatus.user!.artist_name || authStatus.user!.email.split("@")[0] || "User",
+          <AvatarImage
-          avatar: getAssetUrl(authStatus.user!.avatar, "mini")!,
+            src={getAssetUrl(authStatus.user!.avatar, "mini")!}
-          email: authStatus.user!.email,
+            alt={authStatus.user!.artist_name || authStatus.user!.email}
-        }}
+          />
-        onLogout={handleLogout}
+          <AvatarFallback
-        class="w-full"
+            class="bg-gradient-to-br from-primary to-accent text-primary-foreground text-sm font-semibold"
-      />
+          >
+            {getUserInitials(authStatus.user!.artist_name || authStatus.user!.email)}
+          </AvatarFallback>
+        </Avatar>
+        <div class="flex flex-col min-w-0 flex-1">
+          <span class="text-sm font-semibold text-foreground truncate">
+            {authStatus.user!.artist_name || authStatus.user!.email.split("@")[0]}
+          </span>
+          <span class="text-xs text-muted-foreground truncate">{authStatus.user!.email}</span>
+        </div>
+        <Button
+          variant="ghost"
+          size="icon"
+          class="h-8 w-8 rounded-full text-muted-foreground hover:text-destructive hover:bg-destructive/10 shrink-0"
+          onclick={handleLogout}
+          title={$_("header.logout")}
+        >
+          <span class="icon-[ri--logout-circle-r-line] h-4 w-4"></span>
+        </Button>
+      </div>
     {/if}
 
     <!-- Navigation -->