From ab3d9f4118796b0eedc6668b9f2d002ccbcfc33e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Mon, 9 Mar 2026 09:50:25 +0100
Subject: [PATCH] feat: show auth icon strip on mobile header, move burger
 outside pill

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../src/lib/components/header/header.svelte   | 68 ++++++++++++-------
 1 file changed, 43 insertions(+), 25 deletions(-)

diff --git a/packages/frontend/src/lib/components/header/header.svelte b/packages/frontend/src/lib/components/header/header.svelte
index 7dc1944..87848d3 100644
--- a/packages/frontend/src/lib/components/header/header.svelte
+++ b/packages/frontend/src/lib/components/header/header.svelte
@@ -60,7 +60,7 @@
       </a>
 
       <!-- Desktop Navigation -->
-      <nav class="hidden w-full lg:flex items-center justify-center gap-8">
+      <nav class="hidden w-full lg:flex items-center justify-center gap-6">
         {#each navLinks as link (link.href)}
           <a
             href={link.href}
@@ -76,14 +76,14 @@
         {/each}
       </nav>
 
-      <!-- Desktop Auth Actions -->
+      <!-- Auth Actions -->
       {#if authStatus.authenticated}
-        <div class="w-full hidden lg:flex items-center justify-end">
+        <div class="w-full flex items-center justify-end">
           <div class="flex items-center gap-2 rounded-full bg-muted/30 p-1">
             <Button
               variant="link"
               size="icon"
-              class={`h-9 w-9 rounded-full p-0 relative text-foreground/80 group ${isActiveLink({ href: "/me" }) ? "text-foreground" : "hover:text-foreground"}`}
+              class={`flex h-9 w-9 rounded-full p-0 relative text-foreground/80 group ${isActiveLink({ href: "/me" }) ? "text-foreground" : "hover:text-foreground"}`}
               href="/me"
               title={$_("header.dashboard")}
             >
@@ -97,7 +97,7 @@
             <Button
               variant="link"
               size="icon"
-              class={`h-9 w-9 rounded-full p-0 relative text-foreground/80 group ${isActiveLink({ href: "/play" }) ? "text-foreground" : "hover:text-foreground"}`}
+              class={`flex h-9 w-9 rounded-full p-0 relative text-foreground/80 group ${isActiveLink({ href: "/play" }) ? "text-foreground" : "hover:text-foreground"}`}
               href="/play"
               title={$_("header.play")}
             >
@@ -112,7 +112,7 @@
               <Button
                 variant="link"
                 size="icon"
-                class={`h-9 w-9 rounded-full p-0 relative text-foreground/80 group ${isActiveLink({ href: "/admin" }) ? "text-foreground" : "hover:text-foreground"}`}
+                class={`flex h-9 w-9 rounded-full p-0 relative text-foreground/80 group ${isActiveLink({ href: "/admin" }) ? "text-foreground" : "hover:text-foreground"}`}
                 href="/admin/users"
                 title="Admin"
               >
@@ -124,7 +124,7 @@
               </Button>
             {/if}
 
-            <Separator orientation="vertical" class="mx-1 h-6 bg-border/50" />
+            <Separator orientation="vertical" class="hidden lg:block mx-1 h-6 bg-border/50" />
 
             <a href="/me" class="flex items-center gap-2 px-1 hover:opacity-80 transition-opacity">
               <Avatar class="h-7 w-7 ring-2 ring-primary/20">
@@ -138,7 +138,7 @@
                   {getUserInitials(authStatus.user!.artist_name || authStatus.user!.email)}
                 </AvatarFallback>
               </Avatar>
-              <span class="text-sm font-medium text-foreground/90 max-w-24 truncate">
+              <span class="hidden lg:inline text-sm font-medium text-foreground/90 max-w-24 truncate">
                 {authStatus.user!.artist_name || authStatus.user!.email.split("@")[0]}
               </span>
             </a>
@@ -146,33 +146,51 @@
             <Button
               variant="link"
               size="icon"
-              class="h-9 w-9 rounded-full p-0 relative text-foreground/80 group hover:text-destructive"
+              class="hidden lg:flex h-9 w-9 rounded-full p-0 relative text-foreground/80 group hover:text-destructive"
               onclick={handleLogout}
               title={$_("header.logout")}
             >
               <span class="icon-[ri--logout-circle-r-line] h-4 w-4"></span>
             </Button>
           </div>
+          <div class="lg:hidden ml-2">
+            <BurgerMenuButton
+              label={$_("header.navigation")}
+              bind:isMobileMenuOpen
+              onclick={() => (isMobileMenuOpen = !isMobileMenuOpen)}
+            />
+          </div>
         </div>
       {:else}
-        <div class="hidden lg:flex w-full items-center justify-end gap-4">
-          <Button variant="outline" class="font-medium" href="/login">{$_("header.login")}</Button>
-          <Button
-            href="/signup"
-            class="bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90 font-medium"
-            >{$_("header.signup")}</Button
-          >
+        <div class="w-full flex items-center justify-end gap-2">
+          <div class="hidden lg:flex gap-4">
+            <Button variant="outline" class="font-medium" href="/login">{$_("header.login")}</Button>
+            <Button
+              href="/signup"
+              class="bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90 font-medium"
+              >{$_("header.signup")}</Button
+            >
+          </div>
+          <div class="flex lg:hidden items-center gap-1 rounded-full bg-muted/30 p-1">
+            <Button
+              variant="link"
+              size="icon"
+              class="h-9 w-9 rounded-full p-0 text-foreground/80 hover:text-foreground"
+              href="/login"
+              title={$_("header.login")}
+            >
+              <span class="icon-[ri--login-circle-line] h-4 w-4"></span>
+            </Button>
+          </div>
+          <div class="lg:hidden ml-2">
+            <BurgerMenuButton
+              label={$_("header.navigation")}
+              bind:isMobileMenuOpen
+              onclick={() => (isMobileMenuOpen = !isMobileMenuOpen)}
+            />
+          </div>
         </div>
       {/if}
-
-      <!-- Burger button — mobile/tablet only -->
-      <div class="lg:hidden ml-auto">
-        <BurgerMenuButton
-          label={$_("header.navigation")}
-          bind:isMobileMenuOpen
-          onclick={() => (isMobileMenuOpen = !isMobileMenuOpen)}
-        />
-      </div>
     </div>
   </div>
 </header>