dtourolle/jellytau
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases 39 Wiki Activity

feat(search): context-scoped search with filter chips and group order

Browse Source 
Add a search scope (all/music/shows/movies) resolved from the entry
route and adjustable via filter chips, threaded through the library
store's search() into includeItemTypes. Results group by type in a
user-configurable order, editable from settings.

TRACES: UR-049 | DR-063, DR-064, DR-065; UR-050 | DR-066, DR-067
This commit is contained in:
dtourolle
2026-07-23 20:02:15 +02:00
parent e083b53ee8
commit c175378f38
11 changed files with 1135 additions and 256 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/search/SearchResults.svelte
+31 -110
View File
@@ -1,36 +1,28 @@
<script lang="ts">
// Renders search results as groups, in the user's configured order.
//
// Scope and order are composed as two independent axes (see
// composeSearchGroups): out-of-scope groups drop out, the rest sort by the
// saved order, and empty groups are omitted — the saved order itself is
// never rewritten by scoping.
//
// TRACES: UR-050 | DR-067
import type { MediaItem } from "$lib/api/types";
import MediaCard from "$lib/components/library/MediaCard.svelte";
import TrackList from "$lib/components/library/TrackList.svelte";
import { searchGroupOrder } from "$lib/stores/searchGroupOrder";
import { composeSearchGroups, type SearchScope } from "$lib/utils/searchScope";
interface Props {
results: MediaItem[];
loading?: boolean;
scope?: SearchScope;
onItemClick?: (item: MediaItem) => void;
}
let { results, loading = false, onItemClick }: Props = $props();
let { results, loading = false, scope = "all", onItemClick }: Props = $props();
// Categorize results by type
const categorized = $derived({
music: {
tracks: results.filter((i) => i.type === "Audio"),
albums: results.filter((i) => i.type === "MusicAlbum"),
artists: results.filter((i) => i.type === "MusicArtist"),
},
movies: results.filter((i) => i.type === "Movie"),
tvShows: results.filter((i) => i.type === "Series" || i.type === "Episode"),
});
const hasMusic = $derived(
categorized.music.tracks.length > 0 ||
categorized.music.albums.length > 0 ||
categorized.music.artists.length > 0
);
const hasAnyResults = $derived(
hasMusic || categorized.movies.length > 0 || categorized.tvShows.length > 0
);
const groups = $derived(composeSearchGroups(results, scope, $searchGroupOrder));
</script>
{#if loading}
@@ -39,7 +31,7 @@
class="w-8 h-8 border-2 border-[var(--color-jellyfin)] border-t-transparent rounded-full animate-spin"
></div>
</div>
{:else if !hasAnyResults}
{:else if groups.length === 0}
<div class="text-center py-12 text-gray-400">
<svg class="w-16 h-16 mx-auto mb-4 text-gray-600" fill="currentColor" viewBox="0 0 24 24">
<path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
@@ -48,98 +40,27 @@
</div>
{:else}
<div class="space-y-8">
<!-- Music Section -->
{#if hasMusic}
<div class="space-y-6">
<h2 class="text-2xl font-semibold text-white px-4">Music</h2>
<!-- Tracks Subsection -->
{#if categorized.music.tracks.length > 0}
<div>
<h3 class="text-lg text-gray-300 px-4 mb-3">
Tracks ({categorized.music.tracks.length})
</h3>
<TrackList tracks={categorized.music.tracks} />
</div>
{/if}
<!-- Albums Subsection -->
{#if categorized.music.albums.length > 0}
<div>
<h3 class="text-lg text-gray-300 px-4 mb-3">
Albums ({categorized.music.albums.length})
</h3>
<div class="flex gap-4 overflow-x-auto scrollbar-hide px-4">
{#each categorized.music.albums as item (item.id)}
<MediaCard
{item}
size="medium"
showProgress={true}
onclick={() => onItemClick?.(item)}
/>
{/each}
</div>
</div>
{/if}
<!-- Artists Subsection -->
{#if categorized.music.artists.length > 0}
<div>
<h3 class="text-lg text-gray-300 px-4 mb-3">
Artists ({categorized.music.artists.length})
</h3>
<div class="flex gap-4 overflow-x-auto scrollbar-hide px-4">
{#each categorized.music.artists as item (item.id)}
<MediaCard
{item}
size="medium"
showProgress={false}
onclick={() => onItemClick?.(item)}
/>
{/each}
</div>
</div>
{/if}
</div>
{/if}
<!-- Movies Section -->
{#if categorized.movies.length > 0}
{#each groups as group (group.id)}
<div>
<h2 class="text-2xl font-semibold text-white px-4 mb-3">
Movies ({categorized.movies.length})
{group.label} ({group.items.length})
</h2>
<div class="flex gap-4 overflow-x-auto scrollbar-hide px-4">
{#each categorized.movies as item (item.id)}
<MediaCard
{item}
size="medium"
showProgress={true}
onclick={() => onItemClick?.(item)}
/>
{/each}
</div>
{#if group.id === "songs"}
<TrackList tracks={group.items} />
{:else}
<div class="flex gap-4 overflow-x-auto scrollbar-hide px-4">
{#each group.items as item (item.id)}
<MediaCard
{item}
size="medium"
showProgress={group.id !== "artists"}
onclick={() => onItemClick?.(item)}
/>
{/each}
</div>
{/if}
</div>
{/if}
<!-- TV Shows Section -->
{#if categorized.tvShows.length > 0}
<div>
<h2 class="text-2xl font-semibold text-white px-4 mb-3">
TV Shows ({categorized.tvShows.length})
</h2>
<div class="flex gap-4 overflow-x-auto scrollbar-hide px-4">
{#each categorized.tvShows as item (item.id)}
<MediaCard
{item}
size="medium"
showProgress={true}
onclick={() => onItemClick?.(item)}
/>
{/each}
</div>
</div>
{/if}
{/each}
</div>
{/if}
src/lib/components/search/SearchScopeChips.svelte
+65
View File
@@ -0,0 +1,65 @@
<script lang="ts">
// Scope filter chips shown under the search bar.
//
// The chip row is a *radio group*: exactly one scope is active, so arrow keys
// move between chips and the selected one is the sole tab stop.
//
// TRACES: UR-049 | DR-064
import { SCOPE_LABELS, SEARCH_SCOPES, type SearchScope } from "$lib/utils/searchScope";
interface Props {
scope: SearchScope;
onChange: (scope: SearchScope) => void;
}
let { scope, onChange }: Props = $props();
let chipEls: HTMLButtonElement[] = $state([]);
function select(next: SearchScope) {
if (next === scope) return;
onChange(next);
}
function onKeyDown(event: KeyboardEvent, index: number) {
const delta = event.key === "ArrowRight" ? 1 : event.key === "ArrowLeft" ? -1 : 0;
if (delta === 0) return;
event.preventDefault();
const next = (index + delta + SEARCH_SCOPES.length) % SEARCH_SCOPES.length;
chipEls[next]?.focus();
select(SEARCH_SCOPES[next]);
}
</script>
<div
class="flex gap-2 overflow-x-auto scrollbar-hide"
role="radiogroup"
aria-label="Search scope"
>
{#each SEARCH_SCOPES as s, i (s)}
<button
bind:this={chipEls[i]}
type="button"
role="radio"
aria-checked={scope === s}
tabindex={scope === s ? 0 : -1}
onclick={() => select(s)}
onkeydown={(e) => onKeyDown(e, i)}
class="px-4 py-1.5 rounded-full text-sm whitespace-nowrap transition-colors border {scope === s
? 'bg-[var(--color-jellyfin)] border-[var(--color-jellyfin)] text-white'
: 'bg-[var(--color-surface)] border-gray-700 text-gray-300 hover:text-white hover:border-gray-500'}"
>
{SCOPE_LABELS[s]}
</button>
{/each}
</div>
<style>
.scrollbar-hide::-webkit-scrollbar {
display: none;
}
.scrollbar-hide {
scrollbar-width: none;
-ms-overflow-style: none;
}
</style>