# Expandable Metadata Header

The document topbar gains a labeled toggle button (“Details ▼”) that opens a full-width metadata drawer below the main row. This replaces the bottom panel’s Metadata tab in transcribe mode, keeping all interactive elements (person links, conversation links, tag filters) accessible without consuming permanent viewport space.

Familienarchiv
Final spec
2026-04-04 · @leonievoss
Why a labeled toggle, not just a chevron

User interviews include family members aged 60+. A bare 12–16px chevron icon is easy to miss or misinterpret as decorative. A labeled button — “Details ▼” — is self-explanatory, provides a larger click target (min 44×28px), and follows the progressive disclosure pattern: key facts (title, date, person chips) are always visible in the topbar; the toggle reveals the full metadata only when needed.

What lives where
Always visible in topbar

- Document title (truncated)
- Date (compact format)
- Sender & receiver chips (abbreviated)
- Action buttons (Edit, Annotate, Download)
- “Details” toggle button

Revealed in drawer

- Full date (long format)
- Creation location (e.g. “Breslau”)
- Archive location (e.g. “Ordner A3, Schublade 2”)
- Tags (clickable → filter documents)
- Full person cards with avatar, name, alias
- Person detail links (/persons/{id})
- Conversation links (/korrespondenz?...)

### Desktop — collapsed (default)

S1
The topbar looks identical to today except for the “Details” button between the person chips and the action buttons. The split view gets the full remaining viewport.
Desktop · 1040px · collapsed
←
Brief von Heinrich an Martha, 14. Mai 1943
HR
Heinrich R.
→
MR
Martha R.
Details ▼
✎ Transkribieren
Annotieren
Liebe Martha,
1
2
3
3 Blöcke
✓ Gespeichert
1
Anrede ✓
Liebe Martha,
2
Hauptteil
ich schreibe Dir heute aus dem Lazarett in Breslau...
3
Familie
noch leer
Block 2 aktiv

### Desktop — expanded

S2
Clicking “Details” slides open a full-width drawer below the topbar. Three-column grid: details (date, location, archive), persons (sender & receiver cards with conversation links), and tags. The drawer pushes content down — it is part of the document flow, not an overlay. No clipping, no z-index issues.
Desktop · 1040px · expanded
←
Brief von Heinrich an Martha, 14. Mai 1943
HR
Heinrich R.
→
MR
Martha R.
Details ▼
✎ Transkribieren
Annotieren
Details
📅
14. Mai 1943
Datum
📍
Breslau
Entstehungsort
📁
Ordner A3, Schublade 2
Archivstandort
Personen
Absender
HR
Heinrich Raddatz
Opa Heinrich
💬
Empfänger
MR
Martha Raddatz
Oma Martha
💬
Schlagwörter
Feldpost
2. Weltkrieg
Lazarett
Breslau
Liebe Martha,
1
Anrede
Liebe Martha,
2
Hauptteil
ich schreibe Dir heute...
Block 2 aktiv

### Mobile — collapsed

S3
On mobile, the topbar shows the title, a compact “Details” toggle, and the transcribe mode pill. Person chips are hidden (shown in drawer instead). The toggle provides a 44px tap target.
Mobile · 320px · collapsed
14:23••• WiFi 🔋
← Brief von Heinrich, 14.05.1943
Details ▼
Transkr.
Liebe Martha,
1
Anrede ✓
Liebe Martha,
2
Hauptteil
ich schreibe Dir heute aus dem Lazarett in Breslau...
3
Familie
noch leer

### Mobile — expanded

S4
The drawer opens as a single-column stack below the topbar. Person cards are full-width with 44px minimum touch targets. Conversation links are always visible (no hover-reveal on touch). Tags wrap naturally. The PDF strip and transcript blocks are pushed down.
Mobile · 320px · expanded
14:23••• WiFi 🔋
← Brief von Heinrich, 14.05.1943
Details ▼
Transkr.
Datum
14. Mai 1943
Ort
Breslau
Archivstandort
Ordner A3, Schublade 2
Absender
HR
Heinrich Raddatz
Opa Heinrich
💬
Empfänger
MR
Martha Raddatz
Oma Martha
💬
Schlagwörter
Feldpost
2. Weltkrieg
Lazarett
Breslau
1
Anrede
Liebe Martha,
2
Hauptteil
ich schreibe Dir heute...

### Non-transcribe mode — standard document view

S5
Outside of transcribe mode, the document detail page uses the same “Details” drawer pattern. No bottom panel. The PDF gets the full remaining viewport. Discussion and transcription are accessible via dedicated buttons (Transkribieren enters split mode, Annotieren enters annotation mode). One consistent pattern everywhere — no mode-dependent UI structure.
Desktop · non-transcribe · collapsed
←
Brief von Heinrich an Martha, 14. Mai 1943
HR
Heinrich R.
→
MR
Martha R.
Details ▼
✎ Transkribieren
Annotieren
✎
⇩
Liebe Martha,

#### Expandable metadata header · Implementation spec

    /* The topbar gains a labeled "Details ▼" toggle button that opens a full-width metadata
     * drawer below the main topbar row.
     *
     * Collapsed (default): topbar looks like today + a "Details ▼" button between
     *   the person chips and the action buttons.
     * Expanded: a new row slides down with a 3-column grid (desktop):
     *   Col 1: date (long format), location, archive location — icon + value + label
     *   Col 2: sender card + receiver cards — clickable, links to /persons/{id}
     *           conversation icon links to /korrespondenz?senderId=X&receiverId=Y
     *   Col 3: tag chips — clickable, link to /?tag=X
     *
     * The drawer PUSHES content down (document flow, not overlay).
     * Background: color-page (sand) to visually separate from white topbar.
     * Animation: Svelte slide transition or max-height + overflow:hidden, 200ms ease.
     *
     * KEY DECISION: "Details ▼" labeled toggle instead of bare chevron icon.
     * Reason: 60+ year old users in user interviews — bare icons are easy to miss.
     * The label makes the interaction self-explanatory and provides a 44×28px min tap target.
     *
     * Mobile: single-column stack, person cards full-width with 44px min-height,
     *   conversation links always visible (no hover-reveal on touch). */

Element | Value | Notes
--- | --- | ---
Toggle button
Label | "Details" + ▼ chevron | i18n key: topbar_details_toggle
Size | min 44×28px tap target, text-xs font-semibold | WCAG 2.5.5 compliant target size
Inactive style | border border-line, text-ink-2, bg-transparent | Subtle, doesn't compete with action buttons
Active style | bg-primary, text-primary-fg, border-primary | Clear open state — matches annotate button pattern
Chevron | ▼ (U+25BC), rotates 180deg when open | CSS transition transform 200ms
Aria | aria-expanded, aria-controls="metadata-drawer" | Button role implicit
Keyboard | Ctrl+M toggles, Escape closes | Ctrl+M matches "M for metadata"
Drawer (expanded)
Layout | grid 3-col desktop (1fr 1fr 1fr), 1-col mobile | bg:color-page, border-top:line, p:12px 16px
Animation | Svelte slide transition, 200ms | Or CSS max-height 0↔auto with overflow:hidden
Push behavior | In document flow, pushes split view down | Not absolute/overlay — no clipping
ID | id="metadata-drawer" | role="region", aria-label="Dokumentmetadaten"
Drawer content — Details column
Date | Long format (14. Mai 1943), icon 📅 | Uses existing formatDate utility
Location | Text, icon 📍 | Only shown if doc.creationLocation exists
Archive | Text, icon 📁 | Only shown if doc.archiveLocation exists
Drawer content — Persons column
Person card | border:line, radius:5px, bg:page, hover:accent-bg | Entire card is a link to /persons/{id}
Card content | 18px avatar + full name + alias | Alias from person.alias field
Conversation icon | 💬 appears on hover (desktop), always visible (mobile) | Links to /korrespondenz?senderId=X&receiverId=Y
Mobile card height | min-height 44px | WCAG touch target compliance
Drawer content — Tags column
Chip | text-[10px]/600, sand bg, uppercase, radius:3px | Click → navigate to /?tag=X
Hover | bg-primary, text-primary-fg | Visual feedback that chips are interactive
Non-transcribe mode
Toggle shown? | Yes — always present in topbar | Consistent UX across all modes
Bottom panel | Removed entirely — all modes | Drawer is the single metadata pattern everywhere

## Implementation Guide — Expandable Metadata Header

### 1. Scope

Add a labeled “Details” toggle button and a collapsible metadata drawer to `DocumentTopBar.svelte`. This spec covers only the header expansion — the transcription split view, inline comments, and history toolbar are covered in the companion spec (`annotation-transcription-final-spec.html`).

### 2. State

- `let metadataOpen = $state(false)` in `DocumentTopBar.svelte`.
- Toggle on button click. Close on Escape key. Toggle on Ctrl+M.
- State is local — not persisted. Defaults to closed on every page load.

### 3. Component Changes

Component | Change
--- | ---
`DocumentTopBar.svelte` | Add `metadataOpen` state, toggle button, and conditional drawer div. New props needed: `doc.creationLocation`, `doc.archiveLocation`, `doc.tags`, full sender/receiver objects with aliases.
`MetadataDrawer.svelte` (new) | Extracted child component. Receives the doc object. Renders the 3-column grid (desktop) or 1-column stack (mobile). Contains person cards, tag chips, and metadata fields.
`PersonChipRow.svelte` | No change. Still renders the abbreviated chips in the main topbar row.
`DocumentBottomPanel.svelte` | Remove entirely. The metadata drawer replaces the Metadata tab. Transcription, Discussion, and History move to inline UI (see companion transcription spec). No bottom panel in any mode.

### 4. Toggle Button Placement

In the topbar’s flex row, the button goes after the person chips divider and before the action buttons divider:

`← | Title | chips → | Details ▼ | Transkribieren | Annotieren | Edit | Download`

On mobile (<375px), person chips are hidden. The toggle sits after the title, before the transcribe pill.

### 5. Drawer Markup

- Use Svelte `slide` transition: `{#if metadataOpen}<div transition:slide={{ duration: 200 }}>`
- The drawer is a direct child of the topbar wrapper, below the main flex row.
- Desktop: `grid grid-cols-3 gap-4 p-3 sm:p-4 bg-canvas border-t border-line`
- Mobile: `grid grid-cols-1 gap-3 p-3 bg-canvas border-t border-line`
- Breakpoint for 3-col: `md:grid-cols-3` (768px+).

### 6. Person Cards in Drawer

- Each card: avatar (using `personAvatarColor`), full name (font-serif), alias (text-xs text-ink-2).
- Card wraps an `<a href="/persons/{id}">`.
- Conversation icon: separate `<a>` inside the card, absolute-positioned or flex-end. Links to `/korrespondenz?senderId={sender.id}&receiverId={receiver.id}`.
- On mobile: `min-h-[44px]` for touch targets. Conversation icon always visible (`opacity-100` instead of `opacity-0 group-hover:opacity-100`).

### 7. Tag Chips in Drawer

- Each tag: `<a href="/?tag={tag.name}">` with `text-[10px] font-semibold uppercase bg-muted rounded px-2 py-0.5 hover:bg-primary hover:text-primary-fg transition-colors`.
- `aria-label="Dokumente mit Schlagwort {tag.name} filtern"`.

### 8. Accessibility

- Toggle button: `aria-expanded={metadataOpen}`, `aria-controls="metadata-drawer"`.
- Drawer: `id="metadata-drawer"`, `role="region"`, `aria-label="Dokumentmetadaten"`.
- Person cards: accessible name includes full name + “Zur Personenseite”.
- Conversation link: `aria-label="Korrespondenz zwischen {sender} und {receiver} anzeigen"`.
- Tab order: toggle button → drawer contents (when open) → action buttons.
- Escape closes drawer and returns focus to the toggle button.

### 9. i18n Keys

Key | de | en
--- | --- | ---
`topbar_details_toggle` | Details | Details
`topbar_details_date` | Datum | Date
`topbar_details_location` | Entstehungsort | Location
`topbar_details_archive` | Archivstandort | Archive location
`topbar_details_sender` | Absender | Sender
`topbar_details_receivers` | Empfänger | Receivers
`topbar_details_tags` | Schlagwörter | Tags
`topbar_details_conversation` | Korrespondenz anzeigen | View correspondence