marcel/familienarchiv
1
0
Fork 0
Code Issues 111 Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(ui): remove CorrespondenzEmptyState, replaced by CorrespondenzHero

Browse Source 
Refs: #179

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-04-06 19:50:07 +02:00
parent d5e3de5fe6
commit fbf5e9f178
1 changed files with 0 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

120
frontend/src/routes/briefwechsel/CorrespondenzEmptyState.svelte
View File

@@ -1,120 +0,0 @@
<script lang="ts">
import { onMount } from 'svelte';
import { m } from '$lib/paraglide/messages.js';
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-lg flex-col items-center gap-5 py-12 text-center">
<!-- Icon circle -->
<div class="rounded-full bg-muted p-5">
<svg
xmlns="http://www.w3.org/2000/svg"
width="36"
height="36"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
class="text-primary"
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-xl font-black text-ink">{m.conv_empty_heading()}</h2>
<!-- Subtext -->
<p class="max-w-sm text-base text-ink-3">
{m.conv_empty_text()}
</p>
<!-- Search input placeholder (visual only — clicking focuses Person A typeahead above) -->
<button
type="button"
data-testid="conv-empty-search"
aria-label={m.conv_empty_search_placeholder()}
onclick={() => onSelectPerson('')}
class="flex h-10 w-full max-w-sm items-center rounded border border-line bg-muted px-4 text-sm text-ink-3 italic transition-colors hover:border-primary"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="14"
height="14"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="mr-2 shrink-0"
aria-hidden="true"
>
<circle cx="11" cy="11" r="8" />
<path d="m21 21-4.35-4.35" />
</svg>
{m.conv_empty_search_placeholder()}
</button>
<!-- Recent persons — only shown when localStorage has entries -->
{#if recentPersons.length > 0}
<!-- Divider -->
<div class="flex w-full max-w-sm items-center gap-2">
<div class="flex-1 border-t border-line"></div>
<span class="text-xs font-bold tracking-wider text-ink-3 uppercase">oder</span>
<div class="flex-1 border-t border-line"></div>
</div>
<div class="flex w-full max-w-sm flex-col items-center gap-3">
<span class="text-xs font-bold tracking-widest text-ink-3 uppercase">
{m.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-2 rounded-full border border-line bg-surface px-4 py-2 text-sm font-bold text-ink transition-colors hover:border-primary hover:text-primary"
>
<span
class="flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-primary text-xs text-primary-fg"
aria-hidden="true"
>
{person.name.charAt(0).toUpperCase()}
</span>
{person.name}
</button>
{/each}
</div>
</div>
{/if}
</div>