From 110416d68bbcdd8e8d080d0517435aa9f6278e7e Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Sat, 25 Apr 2026 21:37:13 +0200
Subject: [PATCH] feat(persons): add PersonTypeSelector segmented control
 component

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../lib/components/PersonTypeSelector.svelte  | 48 +++++++++++++++++++
 1 file changed, 48 insertions(+)
 create mode 100644 frontend/src/lib/components/PersonTypeSelector.svelte

diff --git a/frontend/src/lib/components/PersonTypeSelector.svelte b/frontend/src/lib/components/PersonTypeSelector.svelte
new file mode 100644
index 00000000..05efe33f
--- /dev/null
+++ b/frontend/src/lib/components/PersonTypeSelector.svelte
@@ -0,0 +1,48 @@
+<script lang="ts">
+import { untrack } from 'svelte';
+import { radioGroupNav } from '$lib/actions/radioGroupNav';
+import { m } from '$lib/paraglide/messages.js';
+
+const TYPES = ['PERSON', 'INSTITUTION', 'GROUP', 'UNKNOWN'] as const;
+type PersonType = (typeof TYPES)[number];
+
+let { value = 'PERSON', name = 'personType' }: { value?: string; name?: string } = $props();
+
+let selected = $state<PersonType>(
+	untrack(() => (TYPES.includes(value as PersonType) ? (value as PersonType) : 'PERSON'))
+);
+
+const labels: Record<PersonType, () => string> = {
+	PERSON: m.person_type_PERSON,
+	INSTITUTION: m.person_type_INSTITUTION,
+	GROUP: m.person_type_GROUP,
+	UNKNOWN: m.person_type_UNKNOWN
+};
+
+function select(type: PersonType) {
+	selected = type;
+}
+</script>
+
+<div role="radiogroup" class="grid grid-cols-2 gap-2 sm:grid-cols-4" use:radioGroupNav>
+	{#each TYPES as type (type)}
+		<button
+			type="button"
+			role="radio"
+			aria-checked={selected === type}
+			tabindex={selected === type ? 0 : -1}
+			onclick={() => select(type)}
+			class="min-h-[48px] cursor-pointer rounded-sm border px-3 py-2 text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:outline-none {selected === type
+				? 'border-brand-navy bg-brand-navy text-white'
+				: 'border-brand-sand bg-white text-brand-navy hover:border-brand-navy/50'}"
+		>
+			{labels[type]()}
+		</button>
+	{/each}
+</div>
+
+<input type="hidden" name={name} value={selected} />
+
+<div class="sr-only" aria-live="polite">
+	{m.a11y_type_changed({ type: labels[selected]() })}
+</div>