familienarchiv/frontend/src/lib/components/document/FileSwitcherStrip.svelte

<script lang="ts">
import { m } from '$lib/paraglide/messages.js';

export interface FileEntry {
	id: string;
	file: File;
	title: string;
	status: 'idle' | 'error';
	previewUrl: string;
}

let {
	files,
	activeId,
	onSelect,
	onRemove
}: {
	files: FileEntry[];
	activeId: string;
	onSelect: (id: string) => void;
	onRemove: (id: string) => void;
} = $props();

let trackEl = $state<HTMLDivElement | null>(null);
let listEl = $state<HTMLUListElement | null>(null);

function scrollPrev() {
	trackEl?.scrollBy({ left: -120, behavior: 'smooth' });
}
function scrollNext() {
	trackEl?.scrollBy({ left: 120, behavior: 'smooth' });
}

$effect(() => {
	if (!listEl) return;
	const node = listEl;

	function handleKeyDown(event: KeyboardEvent) {
		const buttons = Array.from(node.querySelectorAll<HTMLElement>('[data-chip-id]'));
		if (buttons.length === 0) return;

		const focusedIndex = buttons.indexOf(document.activeElement as HTMLElement);
		if (focusedIndex === -1) return;

		if (event.key === 'ArrowRight' || event.key === 'ArrowDown') {
			event.preventDefault();
			const nextIndex = (focusedIndex + 1) % buttons.length;
			buttons[nextIndex].focus();
		} else if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') {
			event.preventDefault();
			const prevIndex = (focusedIndex - 1 + buttons.length) % buttons.length;
			buttons[prevIndex].focus();
		}
	}

	node.addEventListener('keydown', handleKeyDown);
	return () => node.removeEventListener('keydown', handleKeyDown);
});
</script>

<div
	data-testid="file-switcher-strip"
	class="flex h-11 shrink-0 items-center gap-1 border-t border-line bg-pdf-ctrl px-2"
>
	<button
		type="button"
		aria-label={m.bulk_switcher_prev()}
		onclick={scrollPrev}
		class="flex h-6 w-5 shrink-0 items-center justify-center rounded-sm text-sm text-ink-3 hover:bg-black/10 hover:text-ink focus:outline-none focus-visible:ring-2 focus-visible:ring-accent"
		>‹</button
	>

	<div bind:this={trackEl} class="flex flex-1 gap-1 overflow-x-auto" style="scrollbar-width:none">
		<ul bind:this={listEl} aria-live="polite" role="list" class="flex flex-row gap-1 py-1">
			{#each files as entry, i (entry.id)}
				<li role="listitem" class="inline-flex shrink-0 items-center">
					<button
						type="button"
						tabindex="0"
						aria-current={entry.id === activeId ? 'true' : undefined}
						data-status={entry.status}
						data-chip-id={entry.id}
						onclick={() => onSelect(entry.id)}
						class={[
							'inline-flex cursor-pointer items-center gap-1 rounded-[2px] px-1.5 py-0.5 text-[11px] font-bold transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-accent',
							entry.id === activeId
								? 'bg-accent text-primary'
								: 'bg-black/[0.06] text-ink-2 hover:bg-black/10',
							entry.status === 'error'
								? '!border !border-dashed !border-red-400 !bg-red-50/80 !text-red-700'
								: ''
						].join(' ')}
					>
						<span
							class={[
								'rounded-[2px] px-0.5 text-[9px] font-extrabold opacity-85',
								entry.id === activeId ? 'bg-black/20' : 'bg-black/10'
							].join(' ')}
							>{i + 1}</span
						>
						{entry.title}
					</button>
					<button
						type="button"
						aria-label="Entfernen"
						data-remove-id={entry.id}
						onclick={() => onRemove(entry.id)}
						class="ml-0.5 flex h-[44px] w-[44px] items-center justify-center text-base text-ink-3 hover:text-ink focus:outline-none focus-visible:ring-2 focus-visible:ring-accent"
					>
						×
					</button>
				</li>
			{/each}
		</ul>
	</div>

	<button
		type="button"
		aria-label={m.bulk_switcher_next()}
		onclick={scrollNext}
		class="flex h-6 w-5 shrink-0 items-center justify-center rounded-sm text-sm text-ink-3 hover:bg-black/10 hover:text-ink focus:outline-none focus-visible:ring-2 focus-visible:ring-accent"
		>›</button
	>
</div>