feat(web): trim main nav; pair Discover+Requests; move chrome to user menu

The main nav was carrying surfaces that didn't belong on it:

- Search led to an empty page when clicked (you only ever want to land
  there from the global SearchInput typing into /search?q=...). Drop it.
- Requests is downstream of Discover (you discover, then you request).
  Lift both onto a shared horizontal tab strip; keep their URLs so
  bookmarks survive. New DiscoverTabs component used by both pages.
- Settings + Admin are operator chrome, not primary surfaces. Move them
  into the username dropdown alongside Log out, with Admin gated on
  is_admin. Users see Settings + Log out; admins see Settings + Admin
  + Log out.

Final main nav: Home / Artists / Albums / Liked / Discover / Playlists.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-05-01 22:23:56 -04:00
parent 14c1895beb
commit 22ac86f200
6 changed files with 136 additions and 45 deletions
+26 -14
View File
@@ -21,24 +21,17 @@
return page.url.pathname.startsWith(href);
}
// Search reaches /search via the global SearchInput in the header (not the
// nav). Requests is a tab inside Discover. Settings + Admin live in the
// username dropdown — they're per-operator chrome, not primary surfaces.
const navItems = [
{ href: '/', label: 'Home' },
{ href: '/library/artists', label: 'Artists' },
{ href: '/library/albums', label: 'Albums' },
{ href: '/library/liked', label: 'Liked' },
{ href: '/search', label: 'Search' },
{ href: '/discover', label: 'Discover' },
{ href: '/requests', label: 'Requests' },
{ href: '/playlists', label: 'Playlists' },
{ href: '/settings', label: 'Settings' }
{ href: '/playlists', label: 'Playlists' }
];
// Admin link sits between Playlists and Settings, only visible to admins.
const visibleNavItems = $derived(
user.value?.is_admin
? [...navItems.slice(0, -1), { href: '/admin', label: 'Admin' }, navItems[navItems.length - 1]]
: navItems
);
</script>
<svelte:window onclick={() => (menuOpen = false)} onkeydown={(e) => e.key === 'Escape' && (menuOpen = false)} />
@@ -59,15 +52,34 @@
</button>
{#if menuOpen}
<div
class="absolute right-0 mt-1 w-32 rounded border border-border bg-surface shadow"
class="absolute right-0 mt-1 w-40 rounded border border-border bg-surface shadow"
onclick={(e) => e.stopPropagation()}
onkeydown={(e) => e.stopPropagation()}
role="menu"
tabindex="-1"
>
<a
href="/settings"
role="menuitem"
class="block px-3 py-2 text-sm hover:bg-surface-hover"
onclick={() => (menuOpen = false)}
>
Settings
</a>
{#if user.value?.is_admin}
<a
href="/admin"
role="menuitem"
class="block px-3 py-2 text-sm hover:bg-surface-hover"
onclick={() => (menuOpen = false)}
>
Admin
</a>
{/if}
<button
type="button"
class="block w-full px-3 py-2 text-left hover:bg-surface-hover"
role="menuitem"
class="block w-full border-t border-border px-3 py-2 text-left text-sm hover:bg-surface-hover"
onclick={handleLogout}
>
Log out
@@ -79,7 +91,7 @@
<nav class="hidden w-48 border-r border-border bg-surface md:block">
<ul class="p-2">
{#each visibleNavItems as item}
{#each navItems as item}
<li>
<a
href={item.href}