feat(web): quick-filter on Library tabs (Tier B5)

Add a debounced QuickFilter input at the top of each Library section
to narrow the loaded list without leaving the tab. Server-side
/search remains the route for full-library searches.

- QuickFilter.svelte: 120ms debounced two-way bound input with a
  clear button and Escape-to-clear.
- Artists: filter by name; empty-match copy includes a "Search the
  full library" link to /search/artists.
- Albums: filter by title + artist_name; same fallback link.
- Liked: filters all three sub-sections (artists/albums/tracks);
  sub-section header hides when its filtered length is zero.
- History: filters flatEvents before groupByDay, so day-grouping
  reflects the filter.
- Playlists: filters owned + public by name; owners CTA stays.

Covered by QuickFilter unit tests (debounce + clear + Escape).

web/src/routes/library/albums/+page.svelte

@@ -5,6 +5,7 @@
   import AlphabeticalGrid from '$lib/components/AlphabeticalGrid.svelte';
   import ApiErrorBanner from '$lib/components/ApiErrorBanner.svelte';
   import InfiniteScrollSentinel from '$lib/components/InfiniteScrollSentinel.svelte';
+  import QuickFilter from '$lib/components/QuickFilter.svelte';
   import { useDelayed } from '$lib/utils/useDelayed.svelte';
   import type { AlbumRef } from '$lib/api/types';
 
@@ -13,17 +14,31 @@
   const albums = $derived(query.data?.pages?.flatMap((p) => p.items) ?? []);
   const total = $derived(query.data?.pages?.[0]?.total ?? 0);
   const showSkeleton = useDelayed(() => query.isPending);
+
+  let filter = $state('');
+  const filtered = $derived.by(() => {
+    const q = filter.trim().toLowerCase();
+    if (!q) return albums;
+    return albums.filter(
+      (a) => a.title.toLowerCase().includes(q) || a.artist_name.toLowerCase().includes(q)
+    );
+  });
 </script>
 
 <svelte:head><title>{pageTitle('Library · Albums')}</title></svelte:head>
 
 <div class="space-y-4">
-  <header>
-    <h1 class="font-display text-2xl font-medium text-text-primary">Albums</h1>
-    {#if !query.isPending && !query.isError}
-      <p class="text-sm text-text-secondary">
-        {total} {total === 1 ? 'album' : 'albums'}
-      </p>
+  <header class="flex flex-wrap items-end justify-between gap-3">
+    <div>
+      <h1 class="font-display text-2xl font-medium text-text-primary">Albums</h1>
+      {#if !query.isPending && !query.isError}
+        <p class="text-sm text-text-secondary">
+          {total} {total === 1 ? 'album' : 'albums'}
+        </p>
+      {/if}
+    </div>
+    {#if albums.length > 0}
+      <QuickFilter bind:value={filter} placeholder="Filter albums" />
     {/if}
   </header>
 
@@ -33,9 +48,17 @@
     <p class="text-text-secondary">Loading…</p>
   {:else if !query.isPending && total === 0}
     <p class="text-text-secondary">No albums yet — scan a library folder via the server's config.</p>
+  {:else if filter.trim() && filtered.length === 0}
+    <p class="text-text-secondary">
+      No albums in your loaded library match
+      <span class="font-medium">'{filter.trim()}'</span>.
+      <a href={`/search/albums?q=${encodeURIComponent(filter.trim())}`} class="text-accent hover:underline">
+        Search the full library →
+      </a>
+    </p>
   {:else}
     <AlphabeticalGrid
-      items={albums}
+      items={filtered}
       getKey={(a: AlbumRef) => a.sort_title || a.title}
     >
       {#snippet item(album: AlbumRef)}