From 1f1b7aeab5a9af4383e472a6cb4b3f0a082dcc89 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Fri, 24 Apr 2026 17:40:33 +0200
Subject: [PATCH] feat(bulk-upload): add FileSwitcherStrip component

Horizontal chip strip for switching between files in a bulk upload session.
Supports keyboard navigation (arrow keys cycle within the strip), error state
chips, and onSelect/onRemove callbacks.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../document/FileSwitcherStrip.svelte         | 91 +++++++++++++++++
 .../document/FileSwitcherStrip.svelte.spec.ts | 97 +++++++++++++++++++
 2 files changed, 188 insertions(+)
 create mode 100644 frontend/src/lib/components/document/FileSwitcherStrip.svelte
 create mode 100644 frontend/src/lib/components/document/FileSwitcherStrip.svelte.spec.ts

diff --git a/frontend/src/lib/components/document/FileSwitcherStrip.svelte b/frontend/src/lib/components/document/FileSwitcherStrip.svelte
new file mode 100644
index 00000000..e7badb4d
--- /dev/null
+++ b/frontend/src/lib/components/document/FileSwitcherStrip.svelte
@@ -0,0 +1,91 @@
+<script lang="ts">
+export interface FileEntry {
+	id: string;
+	file: File;
+	title: string;
+	status: 'idle' | 'error';
+}
+
+let {
+	files,
+	activeId,
+	onSelect,
+	onRemove
+}: {
+	files: FileEntry[];
+	activeId: string;
+	onSelect: (id: string) => void;
+	onRemove: (id: string) => void;
+} = $props();
+
+let ulEl = $state<HTMLUListElement | null>(null);
+
+$effect(() => {
+	if (!ulEl) return;
+	const node = ulEl;
+
+	function handleKeyDown(event: KeyboardEvent) {
+		const buttons = Array.from(node.querySelectorAll<HTMLElement>('[role="button"]'));
+		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>
+
+<ul
+	bind:this={ulEl}
+	data-testid="file-switcher-strip"
+	aria-live="polite"
+	role="list"
+	class="flex flex-row gap-2 overflow-x-auto px-1 py-2"
+>
+	{#each files as entry (entry.id)}
+		<li role="listitem" class="inline-flex items-center gap-0.5">
+			<button
+				type="button"
+				role="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-sm border px-3 py-1.5 text-xs font-medium transition-colors',
+					entry.id === activeId
+						? 'border-brand-mint bg-brand-mint/10 font-bold text-brand-navy'
+						: 'border-brand-sand bg-white text-brand-navy',
+					entry.status === 'error'
+						? 'border-dashed border-red-300 bg-red-50 text-red-700'
+						: ''
+				].join(' ')}
+				>{entry.title}</button
+			>
+			<button
+				type="button"
+				aria-label="Entfernen"
+				data-remove-id={entry.id}
+				onclick={() => onRemove(entry.id)}
+				class="ml-1 text-xs text-gray-400 hover:text-brand-navy"
+			>
+				×
+			</button>
+		</li>
+	{/each}
+</ul>
diff --git a/frontend/src/lib/components/document/FileSwitcherStrip.svelte.spec.ts b/frontend/src/lib/components/document/FileSwitcherStrip.svelte.spec.ts
new file mode 100644
index 00000000..86968e24
--- /dev/null
+++ b/frontend/src/lib/components/document/FileSwitcherStrip.svelte.spec.ts
@@ -0,0 +1,97 @@
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import { cleanup, render } from 'vitest-browser-svelte';
+import { page, userEvent } from 'vitest/browser';
+import FileSwitcherStrip from './FileSwitcherStrip.svelte';
+
+afterEach(cleanup);
+
+export interface FileEntry {
+	id: string;
+	file: File;
+	title: string;
+	status: 'idle' | 'error';
+}
+
+function makeFiles(n: number): FileEntry[] {
+	return Array.from({ length: n }, (_, i) => ({
+		id: `id-${i}`,
+		file: new File([''], `file${i}.pdf`),
+		title: `File ${i}`,
+		status: 'idle' as const
+	}));
+}
+
+describe('FileSwitcherStrip', () => {
+	it('renders N chips for N files', async () => {
+		const files = makeFiles(4);
+		render(FileSwitcherStrip, {
+			files,
+			activeId: files[0].id,
+			onSelect: vi.fn(),
+			onRemove: vi.fn()
+		});
+		const chips = page.getByRole('listitem');
+		await expect.element(chips.nth(0)).toBeInTheDocument();
+		await expect.element(chips.nth(3)).toBeInTheDocument();
+	});
+
+	it('active chip has aria-current="true"', async () => {
+		const files = makeFiles(3);
+		const { container } = render(FileSwitcherStrip, {
+			files,
+			activeId: files[1].id,
+			onSelect: vi.fn(),
+			onRemove: vi.fn()
+		});
+		const activeBtn = container.querySelector('[aria-current="true"]');
+		expect(activeBtn).not.toBeNull();
+		expect(activeBtn?.textContent).toContain('File 1');
+	});
+
+	it('clicking a chip fires onSelect with its id', async () => {
+		const files = makeFiles(3);
+		const onSelect = vi.fn();
+		const { container } = render(FileSwitcherStrip, {
+			files,
+			activeId: files[0].id,
+			onSelect,
+			onRemove: vi.fn()
+		});
+		const chip = container.querySelector('[data-chip-id="id-2"]') as HTMLElement;
+		expect(chip).not.toBeNull();
+		chip.click();
+		expect(onSelect).toHaveBeenCalledWith('id-2');
+	});
+
+	it('error chip has aria-label containing warning indicator', async () => {
+		const files: FileEntry[] = [
+			{ id: 'e1', file: new File([''], 'bad.pdf'), title: 'Bad file', status: 'error' }
+		];
+		const { container } = render(FileSwitcherStrip, {
+			files,
+			activeId: 'e1',
+			onSelect: vi.fn(),
+			onRemove: vi.fn()
+		});
+		const errBtn = container.querySelector('[data-status="error"]');
+		expect(errBtn).not.toBeNull();
+	});
+
+	it('ArrowRight moves focus to next chip without leaving strip', async () => {
+		const files = makeFiles(3);
+		const { container } = render(FileSwitcherStrip, {
+			files,
+			activeId: files[0].id,
+			onSelect: vi.fn(),
+			onRemove: vi.fn()
+		});
+		const firstBtn = container.querySelectorAll('[role="button"]')[0] as HTMLElement;
+		firstBtn.focus();
+		await userEvent.keyboard('{ArrowRight}');
+		const focused = document.activeElement;
+		expect(focused).not.toBe(firstBtn);
+		// The new focused element should still be inside the strip
+		const strip = container.querySelector('[data-testid="file-switcher-strip"]');
+		expect(strip?.contains(focused)).toBe(true);
+	});
+});