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

feat(ui): Korrespondenz redesign — compact strip, log cards, single-person mode #164

Merged
marcel merged 32 commits from feat/issue-162-korrespondenz-redesign into main 2026-03-30 21:38:23 +02:00
Conversation 6 Commits 32 Files Changed 56 +22 -22
1 changed files with 22 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 3318b5f1c6 - Show all commits

44
frontend/src/routes/korrespondenz/CorrespondenzEmptyState.svelte
View File

@@ -28,13 +28,13 @@ onMount(() => {
});
</script>
<div class="mx-auto flex max-w-sm flex-col items-center gap-4 py-16 text-center">
<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-4">
<div class="rounded-full bg-muted p-5">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
width="36"
height="36"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
@@ -50,10 +50,10 @@ onMount(() => {
</div>
<!-- Heading -->
<h2 class="font-serif text-sm font-black text-ink">Korrespondenz durchsuchen</h2>
<h2 class="font-serif text-xl font-black text-ink">Korrespondenz durchsuchen</h2>
<!-- Subtext -->
<p class="max-w-[280px] text-xs text-ink-3">
<p class="max-w-sm text-base text-ink-3">
Wähle eine Person aus dem Archiv um deren Briefe zu sehen — mit oder ohne Korrespondent.
</p>
@@ -63,19 +63,19 @@ onMount(() => {
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-line bg-muted px-3 text-xs text-ink-3 italic transition-colors hover:border-primary"
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="12"
height="12"
width="14"
height="14"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="mr-1.5 shrink-0"
class="mr-2 shrink-0"
aria-hidden="true"
>
<circle cx="11" cy="11" r="8" />
@@ -84,17 +84,17 @@ onMount(() => {
Person suchen…
</button>
<!-- Divider -->
<div class="flex w-full items-center gap-2">
<div class="flex-1 border-t border-line"></div>
<span class="text-[10px] font-bold tracking-wider text-ink-3 uppercase">oder</span>
<div class="flex-1 border-t border-line"></div>
</div>
<!-- Recent persons -->
<!-- Recent persons — only shown when localStorage has entries -->
{#if recentPersons.length > 0}
<div class="flex w-full flex-col items-center gap-2">
<span class="text-[10px] font-bold tracking-widest text-ink-3 uppercase">
<!-- 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">
{conv_empty_recent_label()}
</span>
<div class="flex flex-wrap justify-center gap-2">
@@ -103,10 +103,10 @@ onMount(() => {
<button
type="button"
onclick={() => onSelectPerson(person.id)}
class="flex items-center gap-1.5 rounded-full border border-line bg-surface px-3 py-1.5 text-xs font-bold text-ink transition-colors hover:border-primary hover:text-primary"
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-4 w-4 shrink-0 items-center justify-center rounded-full bg-primary text-[10px] text-primary-fg"
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()}