bvandeusen/minstrel
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases 38 Wiki Activity

feat(web): quick-filter on Library tabs (Tier B5)
test-web / test (push) Successful in 33s
Details

Browse Source 
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).
This commit is contained in:
Bryan Van Deusen
2026-06-01 13:48:05 -04:00
parent fd12a145c8
commit be7be6f617
7 changed files with 299 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/routes/library/albums/+page.svelte
+30 -7
View File
@@ -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)}
web/src/routes/library/artists/+page.svelte
+28 -7
View File
@@ -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 { ArtistRef } from '$lib/api/types';
@@ -13,17 +14,29 @@
const artists = $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 artists;
return artists.filter((a) => a.name.toLowerCase().includes(q));
});
</script>
<svelte:head><title>{pageTitle('Library · Artists')}</title></svelte:head>
<div class="space-y-4">
<header>
<h1 class="font-display text-2xl font-medium text-text-primary">Artists</h1>
{#if !query.isPending && !query.isError}
<p class="text-sm text-text-secondary">
{total} {total === 1 ? 'artist' : 'artists'}
</p>
<header class="flex flex-wrap items-end justify-between gap-3">
<div>
<h1 class="font-display text-2xl font-medium text-text-primary">Artists</h1>
{#if !query.isPending && !query.isError}
<p class="text-sm text-text-secondary">
{total} {total === 1 ? 'artist' : 'artists'}
</p>
{/if}
</div>
{#if artists.length > 0}
<QuickFilter bind:value={filter} placeholder="Filter artists" />
{/if}
</header>
@@ -33,9 +46,17 @@
<p class="text-text-secondary">Loading…</p>
{:else if !query.isPending && total === 0}
<p class="text-text-secondary">No artists yet — scan a library folder via the server's config.</p>
{:else if filter.trim() && filtered.length === 0}
<p class="text-text-secondary">
No artists in your loaded library match
<span class="font-medium">'{filter.trim()}'</span>.
<a href={`/search/artists?q=${encodeURIComponent(filter.trim())}`} class="text-accent hover:underline">
Search the full library →
</a>
</p>
{:else}
<AlphabeticalGrid
items={artists}
items={filtered}
getKey={(a: ArtistRef) => a.sort_name || a.name}
>
{#snippet item(a: ArtistRef)}
web/src/routes/library/history/+page.svelte
+22 -2
View File
@@ -6,18 +6,33 @@
import InfiniteScrollSentinel from '$lib/components/InfiniteScrollSentinel.svelte';
import LibrarySkeleton from '$lib/components/LibrarySkeleton.svelte';
import ApiErrorBanner from '$lib/components/ApiErrorBanner.svelte';
import QuickFilter from '$lib/components/QuickFilter.svelte';
const queryStore = createHistoryQuery();
const query = $derived($queryStore);
const flatEvents = $derived(query.data?.pages?.flatMap((p) => p.events) ?? []);
const grouped = $derived(groupByDay(flatEvents, new Date()));
let filter = $state('');
const filteredEvents = $derived.by(() => {
const q = filter.trim().toLowerCase();
if (!q) return flatEvents;
return flatEvents.filter((e) =>
e.track.title.toLowerCase().includes(q) ||
e.track.artist_name.toLowerCase().includes(q) ||
(e.track.album_title ?? '').toLowerCase().includes(q)
);
});
const grouped = $derived(groupByDay(filteredEvents, new Date()));
</script>
<svelte:head><title>{pageTitle('Library · History')}</title></svelte:head>
<div class="space-y-4">
<header>
<header class="flex flex-wrap items-end justify-between gap-3">
<h1 class="font-display text-2xl font-medium text-text-primary">History</h1>
{#if flatEvents.length > 0}
<QuickFilter bind:value={filter} placeholder="Filter history" />
{/if}
</header>
{#if query.isPending}
@@ -26,6 +41,11 @@
<ApiErrorBanner error={query.error} onRetry={query.refetch} />
{:else if flatEvents.length === 0}
<p class="p-8 text-center text-text-secondary">No listening history yet.</p>
{:else if filter.trim() && filteredEvents.length === 0}
<p class="text-text-secondary">
No history in your loaded events matches
<span class="font-medium">'{filter.trim()}'</span>.
</p>
{:else}
{#each grouped as group (group.label)}
<section>
web/src/routes/library/liked/+page.svelte
+40 -5
View File
@@ -8,6 +8,7 @@
import ArtistCard from '$lib/components/ArtistCard.svelte';
import AlbumCard from '$lib/components/AlbumCard.svelte';
import TrackRow from '$lib/components/TrackRow.svelte';
import QuickFilter from '$lib/components/QuickFilter.svelte';
const artistsStore = $derived(createLikedArtistsInfiniteQuery());
const albumsStore = $derived(createLikedAlbumsInfiniteQuery());
@@ -24,20 +25,49 @@
const artistsTotal = $derived(artistsQuery?.data?.pages?.[0]?.total ?? 0);
const albumsTotal = $derived(albumsQuery?.data?.pages?.[0]?.total ?? 0);
const tracksTotal = $derived(tracksQuery?.data?.pages?.[0]?.total ?? 0);
let filter = $state('');
const q = $derived(filter.trim().toLowerCase());
const fArtists = $derived(q ? artists.filter((a) => a.name.toLowerCase().includes(q)) : artists);
const fAlbums = $derived(q
? albums.filter((a) => a.title.toLowerCase().includes(q) || a.artist_name.toLowerCase().includes(q))
: albums);
const fTracks = $derived(q
? tracks.filter((t) =>
t.title.toLowerCase().includes(q) ||
t.artist_name.toLowerCase().includes(q) ||
(t.album_title ?? '').toLowerCase().includes(q))
: tracks);
const filterMatchesNothing = $derived(
!!q && fArtists.length === 0 && fAlbums.length === 0 && fTracks.length === 0
);
</script>
<svelte:head><title>{pageTitle('Library · Liked')}</title></svelte:head>
<div class="space-y-6">
<h1 class="text-2xl font-semibold">Liked</h1>
<header class="flex flex-wrap items-end justify-between gap-3">
<h1 class="text-2xl font-semibold">Liked</h1>
{#if artists.length + albums.length + tracks.length > 0}
<QuickFilter bind:value={filter} placeholder="Filter liked" />
{/if}
</header>
{#if filterMatchesNothing}
<p class="text-text-secondary">
Nothing in your loaded likes matches
<span class="font-medium">'{filter.trim()}'</span>.
</p>
{/if}
{#if !q || fArtists.length > 0}
<section>
<h2 class="mb-2 text-lg font-semibold">Artists</h2>
{#if artistsTotal === 0}
<p class="text-text-secondary">No liked artists yet.</p>
{:else}
<div class="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
{#each artists as a (a.id)}
{#each fArtists as a (a.id)}
<ArtistCard artist={a} />
{/each}
</div>
@@ -53,14 +83,16 @@
{/if}
{/if}
</section>
{/if}
{#if !q || fAlbums.length > 0}
<section>
<h2 class="mb-2 text-lg font-semibold">Albums</h2>
{#if albumsTotal === 0}
<p class="text-text-secondary">No liked albums yet.</p>
{:else}
<div class="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
{#each albums as al (al.id)}
{#each fAlbums as al (al.id)}
<AlbumCard album={al} />
{/each}
</div>
@@ -76,15 +108,17 @@
{/if}
{/if}
</section>
{/if}
{#if !q || fTracks.length > 0}
<section>
<h2 class="mb-2 text-lg font-semibold">Tracks</h2>
{#if tracksTotal === 0}
<p class="text-text-secondary">No liked tracks yet.</p>
{:else}
<div class="overflow-hidden rounded border border-border">
{#each tracks as t, i (t.id)}
<TrackRow tracks={tracks} index={i} />
{#each fTracks as t, i (t.id)}
<TrackRow tracks={fTracks} index={i} />
{/each}
</div>
{#if tracksQuery?.hasNextPage}
@@ -99,4 +133,5 @@
{/if}
{/if}
</section>
{/if}
</div>
web/src/routes/library/playlists/+page.svelte
+43 -12
View File
@@ -4,6 +4,7 @@
import { Plus } from 'lucide-svelte';
import PlaylistCard from '$lib/components/PlaylistCard.svelte';
import ApiErrorBanner from '$lib/components/ApiErrorBanner.svelte';
import QuickFilter from '$lib/components/QuickFilter.svelte';
import { createPlaylistsQuery, createPlaylist } from '$lib/api/playlists';
import { useQueryClient } from '@tanstack/svelte-query';
import { qk } from '$lib/api/queries';
@@ -12,6 +13,22 @@
const playlistsQuery = $derived($playlistsStore);
const queryClient = useQueryClient();
let filter = $state('');
const fq = $derived(filter.trim().toLowerCase());
const ownedFiltered = $derived(
fq
? (playlistsQuery?.data?.owned ?? []).filter((p) => p.name.toLowerCase().includes(fq))
: (playlistsQuery?.data?.owned ?? [])
);
const publicFiltered = $derived(
fq
? (playlistsQuery?.data?.public ?? []).filter((p) => p.name.toLowerCase().includes(fq))
: (playlistsQuery?.data?.public ?? [])
);
const filterMatchesNothing = $derived(
!!fq && ownedFiltered.length === 0 && publicFiltered.length === 0
);
let creating = $state(false);
let newName = $state('');
let creatingBusy = $state(false);
@@ -48,16 +65,22 @@
<svelte:head><title>{pageTitle('Library · Playlists')}</title></svelte:head>
<div class="space-y-4">
<header class="flex items-center justify-between">
<header class="flex flex-wrap items-center justify-between gap-3">
<h1 class="font-display text-2xl font-medium text-text-primary">Playlists</h1>
<button
type="button"
onclick={() => (creating = true)}
class="inline-flex items-center gap-1 rounded-md bg-action-secondary px-3 py-1.5 text-sm text-action-fg"
>
<Plus size={14} strokeWidth={1} />
New playlist
</button>
<div class="flex items-center gap-3">
{#if playlistsQuery?.data
&& (playlistsQuery.data.owned.length + playlistsQuery.data.public.length) > 0}
<QuickFilter bind:value={filter} placeholder="Filter playlists" />
{/if}
<button
type="button"
onclick={() => (creating = true)}
class="inline-flex items-center gap-1 rounded-md bg-action-secondary px-3 py-1.5 text-sm text-action-fg"
>
<Plus size={14} strokeWidth={1} />
New playlist
</button>
</div>
</header>
{#if creating}
@@ -101,24 +124,32 @@
{:else if playlistsQuery?.isError}
<ApiErrorBanner error={playlistsQuery.error} onRetry={() => playlistsQuery.refetch()} />
{:else if playlistsQuery?.data}
{#if filterMatchesNothing}
<p class="text-sm text-text-muted">
No playlists match <span class="font-medium">'{filter.trim()}'</span>.
</p>
{/if}
{#if !fq || ownedFiltered.length > 0}
<section>
<h2 class="mb-3 text-sm font-medium uppercase tracking-wide text-text-muted">Your playlists</h2>
{#if playlistsQuery.data.owned.length === 0}
<p class="text-sm text-text-muted">No playlists yet. Click "New playlist" to start one.</p>
{:else}
<div class="grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5">
{#each playlistsQuery.data.owned as p (p.id)}
{#each ownedFiltered as p (p.id)}
<PlaylistCard playlist={p} />
{/each}
</div>
{/if}
</section>
{/if}
{#if playlistsQuery.data.public.length > 0}
{#if (!fq && playlistsQuery.data.public.length > 0) || (fq && publicFiltered.length > 0)}
<section>
<h2 class="mb-3 text-sm font-medium uppercase tracking-wide text-text-muted">From other users</h2>
<div class="grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5">
{#each playlistsQuery.data.public as p (p.id)}
{#each publicFiltered as p (p.id)}
<PlaylistCard playlist={p} />
{/each}
</div>