fix(web): center nav in window + Library link + Search placeholder
test-web / test (push) Failing after 31s

Three operator-reported issues:

- Header was flex with the nav inside a flex-1 span — when the
  right side (search + user menu) grew wider than the left
  (wordmark), the nav's centered position drifted off page-center.
  Switched to grid-cols-3 with justify-self-{start,center,end} so
  the middle column pins to true window-center regardless of side
  widths.
- Library nav link pointed to /library, which 308-redirects via
  +page.server.ts. Operator reported it didn't navigate. Linked the
  nav button directly to /library/artists so SPA navigation skips
  the redirect roundtrip. matchPrefix='/library' keeps isActive
  matching every Library tab.
- SearchInput placeholder was 'Search artists, albums, tracks…' —
  shortened to 'Search' and added a Lucide Search icon inside the
  input on the left. Padding adjusted (pl-7) so the input text
  clears the icon.
This commit is contained in:
2026-06-01 20:58:05 -04:00
parent c0d5d6aebf
commit 27f1cefd55
2 changed files with 41 additions and 19 deletions
+18 -9
View File
@@ -2,6 +2,7 @@
import { page } from '$app/state';
import { goto } from '$app/navigation';
import { untrack } from 'svelte';
import { Search } from 'lucide-svelte';
let value = $state(page.url.searchParams.get('q') ?? '');
let timeout: ReturnType<typeof setTimeout> | null = null;
@@ -51,12 +52,20 @@
}
</script>
<input
type="search"
placeholder="Search artists, albums, tracks…"
aria-label="Search"
bind:value
oninput={onInput}
onkeydown={onKey}
class="w-full max-w-md rounded border border-border bg-surface px-3 py-1 text-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-accent"
/>
<label class="relative block w-full max-w-md">
<Search
size={14}
strokeWidth={1.5}
aria-hidden="true"
class="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 text-text-secondary"
/>
<input
type="search"
placeholder="Search"
aria-label="Search"
bind:value
oninput={onInput}
onkeydown={onKey}
class="w-full rounded border border-border bg-surface pl-7 pr-3 py-1 text-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-accent"
/>
</label>