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

feat(topbar): add expandable metadata drawer with Details toggle (#175)

Browse Source 
- DocumentMetadataDrawer: 3-column grid (≥1024px), single-column mobile
  Shows document date, location, status, person cards, tag chips
  Person names link to /persons/{id}, tags link to filtered search
  Empty states for missing persons/tags, receiver cap with expand button
- DocumentTopBar: "Details" toggle button with animated SVG chevron
  44×44px tap target, aria-expanded, Svelte slide transition
  Semantic color tokens for dark mode compatibility
- Remove DocumentBottomPanel from document detail page
  Bottom panel replaced by topbar drawer for metadata access
  Simplify +page.server.ts (remove comments loading)
  Update page.server.spec.ts for new load signature

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-04-05 11:22:38 +02:00
parent 234f83c40b
commit 5211e0b9f7
6 changed files with 197 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files

146
frontend/src/lib/components/DocumentMetadataDrawer.svelte Normal file
View File

@@ -0,0 +1,146 @@
<script lang="ts">
import { m } from '$lib/paraglide/messages.js';
import { formatDate } from '$lib/utils/date';
import { formatDocumentStatus } from '$lib/utils/documentStatusLabel';
import { personAvatarColor } from '$lib/utils/personFormat';
type Person = { id: string; firstName: string; lastName: string };
type Tag = { id: string; name: string };
type Props = {
documentDate: string | null;
location: string | null;
status: string;
sender: Person | null;
receivers: Person[];
tags: Tag[];
};
let { documentDate, location, status, sender, receivers, tags }: Props = $props();
const VISIBLE_RECEIVER_LIMIT = 5;
const formattedDate = $derived(documentDate ? formatDate(documentDate) : '—');
const displayLocation = $derived(location ?? '—');
const statusLabel = $derived(formatDocumentStatus(status));
const visibleReceivers = $derived(receivers.slice(0, VISIBLE_RECEIVER_LIMIT));
const hiddenReceiverCount = $derived(Math.max(0, receivers.length - VISIBLE_RECEIVER_LIMIT));
const hasPersons = $derived(sender !== null || receivers.length > 0);
const hasTags = $derived(tags.length > 0);
let showAllReceivers = $state(false);
const displayedReceivers = $derived(showAllReceivers ? receivers : visibleReceivers);
function getInitials(person: Person): string {
return `${person.firstName.charAt(0)}${person.lastName.charAt(0)}`.toUpperCase();
}
function getFullName(person: Person): string {
return `${person.firstName} ${person.lastName}`;
}
</script>
{#snippet personCard(person: Person)}
<a
href="/persons/{person.id}"
class="group flex items-center gap-2.5 rounded px-2 py-1.5 transition-colors hover:bg-muted"
>
<span
class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-xs font-bold text-white"
style="background-color: {personAvatarColor(person.id)}"
aria-hidden="true"
>
{getInitials(person)}
</span>
<span class="font-serif text-sm text-ink">{getFullName(person)}</span>
</a>
{/snippet}
<div class="border-b border-line p-6">
<div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
<!-- Column 1: Details -->
<div>
<h2 class="mb-4 font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
{m.doc_details_section_details()}
</h2>
<dl class="space-y-3 font-serif text-sm">
<div>
<dt class="font-sans text-xs font-medium text-ink-3">{m.doc_details_field_date()}</dt>
<dd class="text-ink">{formattedDate}</dd>
</div>
<div>
<dt class="font-sans text-xs font-medium text-ink-3">{m.form_label_location()}</dt>
<dd class="text-ink">{displayLocation}</dd>
</div>
<div>
<dt class="font-sans text-xs font-medium text-ink-3">{m.doc_details_field_status()}</dt>
<dd class="text-ink">{statusLabel}</dd>
</div>
</dl>
</div>
<!-- Column 2: Personen -->
<div>
<h2 class="mb-4 font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
{m.doc_details_section_persons()}
</h2>
{#if hasPersons}
<div class="space-y-3">
{#if sender}
<div>
<p class="mb-1 font-sans text-xs font-medium text-ink-3">
{m.doc_details_field_sender()}
</p>
{@render personCard(sender)}
</div>
{/if}
{#if receivers.length > 0}
<div>
<p class="mb-1 font-sans text-xs font-medium text-ink-3">
{m.doc_details_field_receivers()}
</p>
<div class="space-y-0.5">
{#each displayedReceivers as receiver (receiver.id)}
{@render personCard(receiver)}
{/each}
</div>
{#if hiddenReceiverCount > 0 && !showAllReceivers}
<button
type="button"
onclick={() => (showAllReceivers = true)}
class="mt-1 px-2 font-sans text-xs font-medium text-ink-2 transition-colors hover:text-ink"
>
{m.doc_details_more_receivers({ count: hiddenReceiverCount })}
</button>
{/if}
</div>
{/if}
</div>
{:else}
<p class="font-serif text-sm text-ink-3">{m.doc_details_no_persons()}</p>
{/if}
</div>
<!-- Column 3: Schlagwoerter -->
<div>
<h2 class="mb-4 font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
{m.doc_details_section_tags()}
</h2>
{#if hasTags}
<div class="flex flex-wrap gap-2">
{#each tags as tag (tag.id)}
<a
href="/?tag={encodeURIComponent(tag.name)}"
class="rounded bg-muted px-2 py-0.5 text-xs font-bold tracking-wide text-ink uppercase transition-colors hover:bg-accent"
>
{tag.name}
</a>
{/each}
</div>
{:else}
<p class="font-serif text-sm text-ink-3">{m.doc_details_no_tags()}</p>
{/if}
</div>
</div>
</div>