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.
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.
/* 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 |
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).
let metadataOpen = $state(false) in DocumentTopBar.svelte.| 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. |
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.
slide transition: {#if metadataOpen}<div transition:slide={{ duration: 200 }}>grid grid-cols-3 gap-4 p-3 sm:p-4 bg-canvas border-t border-linegrid grid-cols-1 gap-3 p-3 bg-canvas border-t border-linemd:grid-cols-3 (768px+).personAvatarColor), full name (font-serif), alias (text-xs text-ink-2).<a href="/persons/{id}">.<a> inside the card, absolute-positioned or flex-end. Links to /korrespondenz?senderId={sender.id}&receiverId={receiver.id}.min-h-[44px] for touch targets. Conversation icon always visible (opacity-100 instead of opacity-0 group-hover:opacity-100).<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".aria-expanded={metadataOpen}, aria-controls="metadata-drawer".id="metadata-drawer", role="region", aria-label="Dokumentmetadaten".aria-label="Korrespondenz zwischen {sender} und {receiver} anzeigen".| 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 |