fix(frontend): clear svelte-check a11y and reactivity warnings

- TagBadge: derive color/style so they track a changing tag prop.
- FilterBar: seed tokens from the value prop via untrack (the effect keeps
  it in sync), silencing state_referenced_locally.
- FileCard: give the interactive card role="button".
- admin user toggles: add aria-labels to the switch buttons.

svelte-check is now clean (0 errors, 0 warnings).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

frontend/src/lib/components/file/FileCard.svelte

@@ -138,6 +138,8 @@
 	class:focused
 	use:lazyload
 	data-file-index={index}
+	role="button"
+	tabindex="-1"
 	onpointerdown={onPointerDown}
 	onpointermove={onPointerMoveInternal}
 	onpointerup={() => {

frontend/src/lib/components/file/FilterBar.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { untrack } from 'svelte';
 	import type { Tag } from '$lib/api/types';
 	import { fetchAllTags } from '$lib/api/tags';
 	import { buildDslFilter, parseDslFilter, tokenLabel } from '$lib/utils/dsl';
@@ -16,7 +17,9 @@
 
 	let tags = $state<Tag[]>([]);
 	let search = $state('');
-	let tokens = $state<string[]>(parseDslFilter(value));
+	// Seed from the prop once; the $effect below keeps it in sync afterwards, so
+	// read it untracked to avoid the state-referenced-locally warning.
+	let tokens = $state<string[]>(untrack(() => parseDslFilter(value)));
 	let tagNames = $derived(
 		new Map(tags.filter((t) => t.id && t.name).map((t) => [t.id as string, t.name as string]))
 	);

frontend/src/lib/components/tag/TagBadge.svelte

@@ -13,8 +13,8 @@
 
 	let { tag, onclick, size = 'md', focused = false, index }: Props = $props();
 
-	const color = tag.color ?? tag.category_color;
-	const style = color ? `background-color: #${color}` : '';
+	let color = $derived(tag.color ?? tag.category_color);
+	let style = $derived(color ? `background-color: #${color}` : '');
 </script>
 
 {#if onclick}