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.
63 lines
1.8 KiB
Svelte
63 lines
1.8 KiB
Svelte
<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>
|