dtourolle
ad48d89dfe
Formatting was configured but never enforced: `bun run format:check` reported 199 unformatted files and ran in no workflow and in no git hook, so .prettierrc (printWidth 100, trailing commas) described an intention rather than the tree. This is the one-time sweep that makes the check gateable. Whitespace and token-reflow only -- no behavioural change: `bun run check` reports 0 errors and all 1053 frontend tests pass before and after. Kept out of every other commit on purpose. A 199-file diff mixed with real changes is unreviewable, and the next commit turns format:check into a hard CI gate so this cannot silently accumulate again.
78 lines
2.6 KiB
Svelte
78 lines
2.6 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" && group.id !== "people"}
|
|
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>
|