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:
@@ -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}
|
||||
|
||||
Reference in New Issue
Block a user