dtourolle
c175378f38
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
76 lines
2.5 KiB
Svelte
76 lines
2.5 KiB
Svelte
<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, scope = "all", onItemClick }: Props = $props();
|
|
|
|
const groups = $derived(composeSearchGroups(results, scope, $searchGroupOrder));
|
|
</script>
|
|
|
|
{#if loading}
|
|
<div class="flex justify-center py-12">
|
|
<div
|
|
class="w-8 h-8 border-2 border-[var(--color-jellyfin)] border-t-transparent rounded-full animate-spin"
|
|
></div>
|
|
</div>
|
|
{: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"/>
|
|
</svg>
|
|
<p>No results found</p>
|
|
</div>
|
|
{:else}
|
|
<div class="space-y-8">
|
|
{#each groups as group (group.id)}
|
|
<div>
|
|
<h2 class="text-2xl font-semibold text-white px-4 mb-3">
|
|
{group.label} ({group.items.length})
|
|
</h2>
|
|
{#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>
|
|
{/each}
|
|
</div>
|
|
{/if}
|
|
|
|
<style>
|
|
.scrollbar-hide::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
.scrollbar-hide {
|
|
scrollbar-width: none;
|
|
-ms-overflow-style: none;
|
|
}
|
|
</style>
|