1b95d9472b
Update empty-state, swap-button, and new-doc-link tests to match redesigned
components. Add new tests for: single-person hint bar visibility, recent-persons
chips from localStorage, corrupt localStorage graceful handling, Row 2
aria-disabled state, and strip letter count in single-person and bilateral modes.
Fix CorrespondenzEmptyState to use {id, name} storage format matching
persistRecentPerson in +page.svelte.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
121 lines
3.4 KiB
Svelte
121 lines
3.4 KiB
Svelte
<script lang="ts">
|
|
import { onMount } from 'svelte';
|
|
import { conv_empty_search_placeholder, conv_empty_recent_label } from '$lib/messages-extra';
|
|
|
|
interface RecentPerson {
|
|
id: string;
|
|
name: string;
|
|
}
|
|
|
|
interface Props {
|
|
onSelectPerson: (id: string) => void;
|
|
}
|
|
|
|
const { onSelectPerson }: Props = $props();
|
|
|
|
let recentPersons = $state<RecentPerson[]>([]);
|
|
|
|
onMount(() => {
|
|
try {
|
|
const raw = localStorage.getItem('korrespondenz_recent_persons');
|
|
if (raw) {
|
|
// Svelte auto-escapes firstName/lastName — do not use {@html} with these values
|
|
recentPersons = JSON.parse(raw) as RecentPerson[];
|
|
}
|
|
} catch {
|
|
recentPersons = [];
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<div class="mx-auto flex max-w-sm flex-col items-center gap-4 py-16 text-center">
|
|
<!-- Icon circle -->
|
|
<div class="rounded-full bg-[#F0EDE6] p-4">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="1.5"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
class="text-[#002850]"
|
|
aria-hidden="true"
|
|
>
|
|
<rect x="2" y="4" width="20" height="16" rx="2" />
|
|
<path d="M2 7l10 7 10-7" />
|
|
</svg>
|
|
</div>
|
|
|
|
<!-- Heading -->
|
|
<h2 class="font-serif text-sm font-black text-[#0D2240]">Korrespondenz durchsuchen</h2>
|
|
|
|
<!-- Subtext -->
|
|
<p class="max-w-[280px] text-xs text-[#888]">
|
|
Wähle eine Person aus dem Archiv um deren Briefe zu sehen — mit oder ohne Korrespondent.
|
|
</p>
|
|
|
|
<!-- Search input placeholder (visual only — clicking focuses Person A typeahead above) -->
|
|
<button
|
|
type="button"
|
|
data-testid="conv-empty-search"
|
|
aria-label={conv_empty_search_placeholder()}
|
|
onclick={() => onSelectPerson('')}
|
|
class="flex h-[28px] w-[260px] items-center rounded-sm border border-[#D1D5DB] bg-[#F9F8F6] px-3 text-xs text-[#AAA] italic transition-colors hover:border-[#002850]"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="12"
|
|
height="12"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
class="mr-1.5 shrink-0"
|
|
aria-hidden="true"
|
|
>
|
|
<circle cx="11" cy="11" r="8" />
|
|
<path d="m21 21-4.35-4.35" />
|
|
</svg>
|
|
Person suchen…
|
|
</button>
|
|
|
|
<!-- Divider -->
|
|
<div class="flex w-full items-center gap-2">
|
|
<div class="flex-1 border-t border-[#E0DDD6]"></div>
|
|
<span class="text-[10px] font-bold tracking-wider text-[#AAA] uppercase">oder</span>
|
|
<div class="flex-1 border-t border-[#E0DDD6]"></div>
|
|
</div>
|
|
|
|
<!-- Recent persons -->
|
|
{#if recentPersons.length > 0}
|
|
<div class="flex w-full flex-col items-center gap-2">
|
|
<span class="text-[10px] font-bold tracking-widest text-[#888] uppercase">
|
|
{conv_empty_recent_label()}
|
|
</span>
|
|
<div class="flex flex-wrap justify-center gap-2">
|
|
{#each recentPersons as person (person.id)}
|
|
<!-- TODO: allow clearing recent history -->
|
|
<button
|
|
type="button"
|
|
onclick={() => onSelectPerson(person.id)}
|
|
class="flex items-center gap-1.5 rounded-full border border-[#D1D5DB] bg-white px-3 py-1.5 text-xs font-bold text-[#333] transition-colors hover:border-[#002850] hover:text-[#002850]"
|
|
>
|
|
<span
|
|
class="flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-[#002850] text-[10px] text-white"
|
|
aria-hidden="true"
|
|
>
|
|
{person.name.charAt(0).toUpperCase()}
|
|
</span>
|
|
{person.name}
|
|
</button>
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
</div>
|