v3: search engine, responsive header with compact user menu

src/components/AppHeader.tsx

@@ -4,6 +4,7 @@ import { useAuth } from "../hooks/useAuth.ts";
 import { useWS } from "../hooks/useWS.ts";
 import { DumpCreateModal } from "./DumpCreateModal.tsx";
 import { NotificationBell } from "./NotificationBell.tsx";
+import { UserMenu } from "./UserMenu.tsx";
 
 export function AppHeader(
   { centerSlot, disableNew }: { centerSlot?: ReactNode; disableNew?: boolean },
@@ -28,18 +29,27 @@ export function AppHeader(
           {user
             ? (
               <>
-                <Link
-                  to={`/users/${user.username}`}
-                  className="app-header-user"
-                >
-                  {user.username}
-                </Link>
-                <Link
-                  to={`/users/${user.username}/playlists`}
-                  className="app-header-user"
-                >
-                  Playlists
-                </Link>
+                {/* Full text links — hidden below the compact breakpoint */}
+                <div className="nav-links">
+                  <Link
+                    to={`/users/${user.username}`}
+                    className="app-header-user"
+                  >
+                    {user.username}
+                  </Link>
+                  <Link
+                    to={`/users/${user.username}/playlists`}
+                    className="app-header-user"
+                  >
+                    Playlists
+                  </Link>
+                </div>
+
+                {/* Compact avatar menu — hidden above the compact breakpoint */}
+                <div className="nav-compact">
+                  <UserMenu user={user} />
+                </div>
+
                 <NotificationBell />
                 <button
                   type="button"