From 6ee1ef73c38607b228ebc3ff675b8626843f4d6f Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Wed, 8 Apr 2026 13:09:16 +0200
Subject: [PATCH] feat(ui): add PersonTypeBadge to person list and detail pages

Show colored badge for non-PERSON types per design spec:
- INSTITUTION: blue with building icon
- GROUP: purple with people icon
- UNKNOWN: amber with question mark icon
- PERSON: no badge (unmarked default)

Badge appears on person cards in list and on detail page.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../src/lib/components/PersonTypeBadge.svelte | 50 +++++++++++++++++++
 frontend/src/routes/persons/+page.svelte      |  5 ++
 .../src/routes/persons/[id]/PersonCard.svelte |  8 +++
 3 files changed, 63 insertions(+)
 create mode 100644 frontend/src/lib/components/PersonTypeBadge.svelte

diff --git a/frontend/src/lib/components/PersonTypeBadge.svelte b/frontend/src/lib/components/PersonTypeBadge.svelte
new file mode 100644
index 00000000..2bfd1a39
--- /dev/null
+++ b/frontend/src/lib/components/PersonTypeBadge.svelte
@@ -0,0 +1,50 @@
+<script lang="ts">
+import * as m from '$lib/paraglide/messages.js';
+
+interface Props {
+	personType: string;
+}
+
+let { personType }: Props = $props();
+</script>
+
+{#if personType === 'INSTITUTION'}
+	<span
+		class="inline-flex items-center gap-1 rounded-full border border-blue-200 bg-blue-50 px-2 py-0.5 text-xs font-medium text-blue-700"
+	>
+		<svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+			<path
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0H5m14 0h2m-2 0v-2M5 21H3m2 0v-2m4-12h2m-2 4h2m4-4h2m-2 4h2"
+			/>
+		</svg>
+		{m.person_type_INSTITUTION()}
+	</span>
+{:else if personType === 'GROUP'}
+	<span
+		class="inline-flex items-center gap-1 rounded-full border border-purple-200 bg-purple-50 px-2 py-0.5 text-xs font-medium text-purple-700"
+	>
+		<svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+			<path
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
+			/>
+		</svg>
+		{m.person_type_GROUP()}
+	</span>
+{:else if personType === 'UNKNOWN'}
+	<span
+		class="inline-flex items-center gap-1 rounded-full border border-amber-200 bg-amber-50 px-2 py-0.5 text-xs font-medium text-amber-700"
+	>
+		<svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+			<path
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01"
+			/>
+		</svg>
+		{m.person_type_UNKNOWN()}
+	</span>
+{/if}
diff --git a/frontend/src/routes/persons/+page.svelte b/frontend/src/routes/persons/+page.svelte
index 9487c82f..9ba5380d 100644
--- a/frontend/src/routes/persons/+page.svelte
+++ b/frontend/src/routes/persons/+page.svelte
@@ -3,6 +3,7 @@ import { goto } from '$app/navigation';
 import { untrack } from 'svelte';
 import { m } from '$lib/paraglide/messages.js';
 import { formatLifeDateRange } from '$lib/utils/personLifeDates';
+import PersonTypeBadge from '$lib/components/PersonTypeBadge.svelte';
 import PersonsStatsBar from './PersonsStatsBar.svelte';
 import PersonsEmptyState from './PersonsEmptyState.svelte';
 
@@ -107,6 +108,10 @@ function handleSearch() {
 							{person.displayName}
 						</p>
 
+						{#if person.personType && person.personType !== 'PERSON'}
+							<PersonTypeBadge personType={person.personType} />
+						{/if}
+
 						<!-- Alias -->
 						{#if person.alias}
 							<p class="font-sans text-xs text-ink-2 italic">„{person.alias}"</p>
diff --git a/frontend/src/routes/persons/[id]/PersonCard.svelte b/frontend/src/routes/persons/[id]/PersonCard.svelte
index 639d58ad..10094d87 100644
--- a/frontend/src/routes/persons/[id]/PersonCard.svelte
+++ b/frontend/src/routes/persons/[id]/PersonCard.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 import { m } from '$lib/paraglide/messages.js';
 import { formatLifeDateRange } from '$lib/utils/personLifeDates';
+import PersonTypeBadge from '$lib/components/PersonTypeBadge.svelte';
 
 let {
 	person,
@@ -11,6 +12,7 @@ let {
 		firstName?: string | null;
 		lastName: string;
 		displayName: string;
+		personType?: string | null;
 		alias?: string | null;
 		birthYear?: number | null;
 		deathYear?: number | null;
@@ -39,6 +41,12 @@ let {
 			{person.displayName}
 		</h1>
 
+		{#if person.personType && person.personType !== 'PERSON'}
+			<div class="mb-1 flex justify-center">
+				<PersonTypeBadge personType={person.personType} />
+			</div>
+		{/if}
+
 		<!-- Alias — centered, italic -->
 		{#if person.alias}
 			<p class="mb-1 text-center font-sans text-sm text-ink-2 italic">„{person.alias}"</p>