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:
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user