feat(web): top-bar centered nav + Library tab page (replace sidebar)
test-web / test (push) Successful in 32s

Operator 2026-06-01: "navigation layout and library sections are
what I'd like to have implemented as it seems better than our
current navbar solution. I think I'd like to have these nav options
moved into the top bar centered."

Top-bar restructure:
- Centered nav (replaces the 192dp left sidebar): Home / Library /
  Discover, with icons + labels. Labels collapse below sm breakpoint
  so the bar stays icon-only on small viewports.
- Right side (search input + user dropdown) unchanged.
- Hamburger button + MobileNavDrawer + the mobileNav store all
  removed - the centered nav lives at all viewport sizes.

Library page restructure (mirrors Android LibraryScreen):
- New routes/library/+layout.svelte renders a tab bar across the
  five Library sub-pages: Artists / Albums / Liked / History /
  Playlists. Active tab gets an accent underline + onSurface text.
- routes/library/+page.server.ts redirects bare /library to
  /library/artists (Android default tab).
- /playlists (list) moved to /library/playlists; old URL gets a 308
  redirect (routes/playlists/+page.server.ts) so existing bookmarks
  land on the new location. /playlists/[id] (detail) is unchanged -
  matches the server API URL shape.

Deleted: Shell's sidebar markup, MobileNavDrawer.{svelte,test.ts},
the mobileNav store, the old routes/playlists/+page.svelte. Shell
test rewritten to assert the new 3-item centered nav; playlists
test moved next to its new +page.svelte and its test-utils import
path updated.
This commit is contained in:
2026-06-01 10:07:02 -04:00
parent 9dc707f1c8
commit 6e6fbc7856
10 changed files with 124 additions and 296 deletions
-22
View File
@@ -1,22 +0,0 @@
// Open/close state for the off-canvas mobile navigation drawer.
// Mounted once from Shell.svelte; toggled by the hamburger button.
let _open = $state(false);
export const mobileNav = {
get value(): boolean {
return _open;
}
};
export function openMobileNav(): void {
_open = true;
}
export function closeMobileNav(): void {
_open = false;
}
export function toggleMobileNav(): void {
_open = !_open;
}