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>
This commit is contained in:
Marcel
2026-04-08 13:09:16 +02:00
parent a3da5731d0
commit 6ee1ef73c3
3 changed files with 63 additions and 0 deletions

View File

@@ -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>

View File

@@ -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>