diff --git a/docs/specs/chronik-spec.html b/docs/specs/chronik-spec.html new file mode 100644 index 00000000..2bad3395 --- /dev/null +++ b/docs/specs/chronik-spec.html @@ -0,0 +1,2043 @@ + + + + + +Chronik · Final Design Spec · Familienarchiv + + + +
+ + +
+
+
+

Chronik — Unified Activity + Notifications

+

Replaces /notifications. A single timeline that merges ambient archive activity with personal mentions/replies, scaled from 320 px mobile to 1440 px desktop, light and dark. Designed for a dual audience: senior family members (60 +) who need redundant cues and large touch targets, and millennials (25–42) who expect density and clean typography.

+
+
FINAL
+
+
+
Route / Title
/chronik · Chronik
+
Layout
Stacked, single column · max-w-3xl
+
Activity kinds shown
6 of 8 (no STATUS / METADATA)
+
Rollup window
2 h, same actor + document
+
+
+ +
+ Reading this spec. Mockups are scaled to ~55 % of real pixel values so that multiple viewports fit on one page. Never copy pixel sizes from the mockups — always use the impl-ref tables, which list the real Tailwind class + pixel value. +
+ + +
+
Inhalt
+
    +
  1. 01 Page anatomy default @ 1440px
    2. +
  2. 02 Content states × 3 viewports 11 states · 33 frames
    3. +
  3. 03 Dark mode parity 3 key states
    4. +
  4. 04 Row anatomy close-ups 4 row types
    5. +
  5. 05 Interaction states pills · rows · buttons
    6. +
  6. 06 Accessibility contract WCAG AA/AAA
    7. +
  7. 07 Implementation notes data · routing · rollup
    8. +
+
+ + +
+

01Page Anatomy — Default State at 1440 px

+

+ The page is a single vertical column on all viewports. Below is the reference anatomy at desktop width with every region labeled. All other viewports in Section 2 render the same regions at smaller widths — they never rearrange, only adapt spacing. +

+ +
+
+
+
familienarchiv.de/chronik
+
+ +
+ +
+ DokumentePersonenBriefwechselChronik +
+
+
+
+
← Zurück zur Übersicht
+
+
Chronik
+
Alle gelesen
+
+
+
+
Für dich
+
3 neu
+
+
+
@
+
+
Mama hat dich in Brief Nr. 42 erwähnt
+
"schau mal, das ist Omas Handschrift von 1952"
+
+
14:32
+
✓
+
+
+
@
+
+
Oma hat dich in Brief Nr. 39 erwähnt
+
"Marcel, weißt du noch den Hund auf dem Foto?"
+
+
11:05
+
✓
+
+
+
↩
+
+
Anna hat auf deinen Kommentar in Brief Nr. 41 geantwortet
+
"ja genau, das war 1947 in Hamburg"
+
+
Gestern
+
✓
+
+
+
+
Alle
+
Für dich
+
Hochgeladen
+
Transkription
+
Kommentare
+
+
Heute
+
+
+
AR
+
+
Anna transkribierte 20 Blöcke in Brief Nr. 42 · Hamburg 1947
+
+
14:02–14:32
+
+
+
PR
+
+
Papa lud 3 Dokumente hoch
+
+
11:08
+
+
+
@
+
MR
+
+
Mama erwähnte dich in Brief Nr. 42
+
"schau mal, das ist Omas Handschrift von 1952"
+
+
14:32
+
+
+
Gestern
+
+
+
OR
+
+
Oma kommentierte Brief Nr. 39 · München 1952
+
"das war bei der Hochzeit von Onkel Heinrich, der hatte einen Dackel namens Bello"
+
+
18:47
+
+
+
FB
+
+
Felix hat 5 Blöcke in Brief Nr. 38 überprüft
+
+
15:12
+
+
+
+
+
+
+ +
+
+
A Page header
+
Title "Chronik" in serif (Tinos) · "Alle gelesen" action shown only when unread count > 0.
+
+
+
B Für dich box
+
Unread mentions/replies only. Max height before scroll: 60 vh. Collapses to empty-state card when count = 0.
+
+
+
C Filter pills
+
Radio-group semantics. Five pills, one active at a time. "Für dich" filter is the history view for read+unread mentions.
+
+
+
D Day header
+
Heute / Gestern / Diese Woche / Älter. Rendered as an uppercase eyebrow with a thin trailing rule.
+
+
+
E Timeline row
+
Avatar · actor + verb · optional preview · right-aligned time. ~72 px tall. Rollup shown as a bold count badge.
+
+
+
F For-you lane
+
Read mentions surfaced in the timeline with an accent left border, @ marker, and tinted background — so they remain visually discoverable.
+
+
+
+ +
+
Implementation Reference — Page ShellTailwind 4 · tokens from layout.css
+ + + + + + + + + + + +
ElementClassesRealNote
Page containermx-auto max-w-3xl px-4 py-8 sm:px-6 lg:px-8max 48remSame pattern as /dokumente
Back linkinline-flex items-center gap-2 text-xs font-bold uppercase tracking-widest text-ink-3 hover:text-ink mb-412px / 700Arrow translates on hover
Page titlefont-serif text-2xl font-medium text-ink24px / 500Tinos serif
"Alle gelesen" actiontext-sm font-medium text-ink-2 hover:text-ink min-h-[44px] min-w-[44px] px-314px / 50044×44 touch target
Card container (shared)bg-surface border border-line rounded-sm p-5padding 20pxFür dich, empty, error
Section eyebrowtext-xs font-bold uppercase tracking-widest text-ink-312px / 700 / 0.1emFür dich header, day header
Unread count badgeinline-flex h-5 min-w-5 items-center justify-center rounded-full bg-primary text-primary-fg px-1 text-xs font-bold20px minaria-live polite
+
+
+ + +
+

02Content States × 3 Viewports

+

+ Eleven states covering every combination of content presence and filter selection. Every frame renders the full page (header → Für dich → filters → timeline). Reading order per state: 320 px (mobile S) → 768 px (tablet) → 1440 px (desktop). Look for wrap behavior on filter pills at 320, and row-preview truncation on both mobile sizes. +

+ + +
+
01Default · Unreads + Rich Timeline
+
Happy path. 3 unread mentions in the Für dich box; timeline shows recent activity with a rollup (20 Blöcke transkribiert) and a read mention rendered in the for-you lane. "Alle gelesen" action visible in header. Default filter: Alle.
+
+ +
+ 320 px · Mobile + 176 px @ 55% +
+
9:41
+
+
Chronik
+
+
← Übersicht
+
Chronik
Alle gelesen
+
+
Für dich
3 neu
+
@
Mama erwähnte dich
"schau mal, Omas Handschrift…"
14:32
+
@
Oma erwähnte dich
"Marcel, weißt du noch…"
11:05
+
↩
Anna antwortete
"ja genau, 1947 Hamburg"
gest
+
+
+
Alle
Für dich
Hochgeladen
Transkription
Kommentare
+
+
Heute
+
AR
Anna transkribierte 20 Blöcke in Brief 42
14:02–14:32
+
PR
Papa lud 3 Dok. hoch
11:08
+
@
MR
Mama erwähnte dich in Brief 42
"schau mal, das ist Omas…"
14:32
+
Gestern
+
OR
Oma kommentierte Brief 39
"das war bei der Hochzeit…"
18:47
+
+
+
+
+ +
+ 768 px · Tablet + 422 px @ 55% +
+
familienarchiv.de/chronik
+
+
DokumentePersonenChronik
+
+
← Zurück zur Übersicht
+
Chronik
Alle gelesen
+
+
Für dich
3 neu
+
@
Mama hat dich in Brief Nr. 42 erwähnt
"schau mal, das ist Omas Handschrift von 1952"
14:32
✓
+
@
Oma hat dich in Brief Nr. 39 erwähnt
"Marcel, weißt du noch den Hund auf dem Foto?"
11:05
✓
+
↩
Anna hat auf deinen Kommentar in Brief Nr. 41 geantwortet
"ja genau, das war 1947 in Hamburg"
Gestern
✓
+
+
+
Alle
Für dich
Hochgeladen
Transkription
Kommentare
+
+
Heute
+
AR
Anna transkribierte 20 Blöcke in Brief Nr. 42 · Hamburg 1947
14:02–14:32
+
PR
Papa lud 3 Dokumente hoch
11:08
+
@
MR
Mama erwähnte dich in Brief Nr. 42
"schau mal, das ist Omas Handschrift von 1952"
14:32
+
Gestern
+
OR
Oma kommentierte Brief Nr. 39 · München 1952
"das war bei der Hochzeit von Onkel Heinrich, der hatte einen Dackel namens Bello"
18:47
+
FB
Felix hat 5 Blöcke in Brief Nr. 38 überprüft
15:12
+
+
+
+
+ +
+ 1440 px · Desktop + 720 px @ 55% (col) +
+
familienarchiv.de/chronik
+
+
DokumentePersonenBriefwechselChronik
+
+
← Zurück zur Übersicht
+
Chronik
Alle gelesen
+
+
Für dich
3 neu
+
@
Mama hat dich in Brief Nr. 42 erwähnt
"schau mal, das ist Omas Handschrift von 1952"
14:32
✓
+
@
Oma hat dich in Brief Nr. 39 erwähnt
"Marcel, weißt du noch den Hund auf dem Foto?"
11:05
✓
+
↩
Anna hat auf deinen Kommentar in Brief Nr. 41 geantwortet
"ja genau, das war 1947 in Hamburg"
Gestern
✓
+
+
Alle
Für dich
Hochgeladen
Transkription
Kommentare
+
Heute
+
AR
Anna transkribierte 20 Blöcke in Brief Nr. 42 · Hamburg 1947
14:02–14:32
+
PR
Papa lud 3 Dokumente hoch
11:08
+
@
MR
Mama erwähnte dich in Brief Nr. 42
"schau mal, das ist Omas Handschrift von 1952"
14:32
+
Gestern
+
OR
Oma kommentierte Brief Nr. 39 · München 1952
"das war bei der Hochzeit von Onkel Heinrich, der hatte einen Dackel namens Bello"
18:47
+
FB
Felix hat 5 Blöcke in Brief Nr. 38 überprüft
15:12
+
AR
Anna erstellte Annotation auf Brief Nr. 37
10:24
+
Diese Woche
+
PR
Papa kommentierte Brief Nr. 36
"stimmt, das war kurz vor dem Umzug nach Köln"
Mo · 14:22
+
Mehr laden
+
+
+
+
+
+
Beobachtungen im Layout. +
    +
  • 320 px: die fünf Filter-Pills wickeln auf zwei Zeilen — bewusst, weil keine Pill abgeschnitten werden darf. Die letzte Pill muss vollständig sichtbar sein (niemals overflow:hidden auf diesem Row).
    • +
  • 320 px: Für-Dich-Vorschau wird mit Ellipsis einzeilig abgeschnitten. Tap auf Zeile navigiert; Inhalt öffnet sich komplett auf der Zieldokument-Seite.
    • +
  • 768 px & 1440 px: Vorschautexte erlauben Zeilenumbruch, max 2 Zeilen für Timeline-Rows.
    • +
  • Der Dismiss-Button (✓) auf Für-Dich-Zeilen erscheint erst ab 768 px — auf 320 px wird die Zeile selbst tap-bar und markiert beim Öffnen automatisch als gelesen (Swipe-Gesture als v2).
    • +
+
+
+ + +
+
02"Für dich" Empty · Inbox Zero + Activity Present
+
All personal mentions have been read. Für dich box collapses to a small reassurance card with a link to the "Für dich" filter (history view). Timeline still renders as normal. "Alle gelesen" action hidden from header.
+
+
+ 320 px · Mobile176 px @ 55% +
+
9:41
+
+
Chronik
+
+
← Übersicht
+
Chronik
+
✓
Keine neuen Erwähnungen
Ältere ansehen →
+
Alle
Für dich
Hochgeladen
Transkription
Kommentare
+
Heute
+
AR
Anna transkribierte 20 Blöcke in Brief 42
14:02
+
PR
Papa lud 3 Dok. hoch
11:08
+
@
MR
Mama erwähnte dich
"schau mal, Omas…"
14:32
+
Gestern
+
OR
Oma kommentierte Brief 39
18:47
+
+
+
+
+
+ 768 px · Tablet422 px @ 55% +
+
familienarchiv.de/chronik
+
+
DokumentePersonenChronik
+
+
← Zurück zur Übersicht
+
Chronik
+
✓
Keine neuen Erwähnungen
Ältere Erwähnungen ansehen →
+
Alle
Für dich
Hochgeladen
Transkription
Kommentare
+
Heute
+
AR
Anna transkribierte 20 Blöcke in Brief Nr. 42 · Hamburg 1947
14:02–14:32
+
PR
Papa lud 3 Dokumente hoch
11:08
+
@
MR
Mama erwähnte dich in Brief Nr. 42
"schau mal, das ist Omas Handschrift von 1952"
14:32
+
Gestern
+
OR
Oma kommentierte Brief Nr. 39
"das war bei der Hochzeit von Onkel Heinrich"
18:47
+
+
+
+
+
+ 1440 px · Desktop720 px @ 55% +
+
familienarchiv.de/chronik
+
+
DokumentePersonenBriefwechselChronik
+
+
← Zurück zur Übersicht
+
Chronik
+
✓
Keine neuen Erwähnungen
Ältere Erwähnungen ansehen →
+
Alle
Für dich
Hochgeladen
Transkription
Kommentare
+
Heute
+
AR
Anna transkribierte 20 Blöcke in Brief Nr. 42 · Hamburg 1947
14:02–14:32
+
PR
Papa lud 3 Dokumente hoch
11:08
+
@
MR
Mama erwähnte dich in Brief Nr. 42
"schau mal, das ist Omas Handschrift von 1952"
14:32
+
Gestern
+
OR
Oma kommentierte Brief Nr. 39 · München 1952
"das war bei der Hochzeit von Onkel Heinrich, der hatte einen Dackel namens Bello"
18:47
+
FB
Felix hat 5 Blöcke in Brief Nr. 38 überprüft
15:12
+
Mehr laden
+
+
+
+
+
+
Warum dieser Zustand wichtig ist. Eine leere Inbox ohne sichtbare Bestätigung wirkt wie ein Fehler ("wo sind meine Nachrichten?"). Die Reassurance-Karte ("✓ Keine neuen Erwähnungen · Ältere ansehen →") ist die Brücke zur Vergangenheit — Nutzer:innen wissen jederzeit, dass ihre gelesenen Erwähnungen über den Filter Für dich erreichbar sind.
+
+ + +
+
03First-Run · No Activity At All
+
Brand-new archive or a user who hasn't been granted any document access yet. Nothing to mention, nothing to activate. Für dich box hidden entirely (not just empty). Filter pills hidden — nothing to filter. Only a warm centered empty state with a clear CTA.
+
+
+ 320 px · Mobile176 px @ 55% +
+
9:41
+
+
Chronik
+
+
← Übersicht
+
Chronik
+
+
📜
+
Noch nichts geschehen
+
Sobald jemand Dokumente hochlädt oder transkribiert, erscheint es hier.
+
Erstes Dokument hochladen
+
+
+
+
+
+
+ 768 px · Tablet422 px @ 55% +
+
familienarchiv.de/chronik
+
+
DokumentePersonenChronik
+
+
← Zurück zur Übersicht
+
Chronik
+
+
📜
+
Noch nichts geschehen
+
Sobald jemand aus der Familie Dokumente hochlädt, transkribiert oder kommentiert, erscheint es hier in der Chronik.
+
Erstes Dokument hochladen
+
+
+
+
+
+
+ 1440 px · Desktop720 px @ 55% +
+
familienarchiv.de/chronik
+
+
DokumentePersonenBriefwechselChronik
+
+
← Zurück zur Übersicht
+
Chronik
+
+
📜
+
Noch nichts geschehen
+
Sobald jemand aus der Familie Dokumente hochlädt, transkribiert oder kommentiert, erscheint es hier in der Chronik — als Zeitstrahl aller Beiträge zum Archiv.
+
Erstes Dokument hochladen
+
+
+
+
+
+
+
Wann erscheint dieser Zustand? Neue Instanz (keine Dokumente im Archiv), oder ein Nutzer, der noch keine Leserechte auf Dokumente hat. Die CTA ist kontextabhängig: mit canWrite=true → "Erstes Dokument hochladen", ohne Schreibrechte → Link zu "/dokumente" ("Archiv durchsuchen").
+
+ + +
+
04Filter · Alle (Baseline)
+
Same content as State 01 (the default landing state when the page opens). Shown again here so the 11-state matrix is complete and so readers can compare filter-active states side-by-side with the baseline. All 6 activity kinds visible, rollups active, for-you lane active on mentions.
+
+
+ 320 px · Mobile176 px @ 55% +
+
9:41
+
+
Chronik
+
+
← Übersicht
+
Chronik
Alle gelesen
+
Für dich
2 neu
@
Mama erwähnte dich
"Omas Handschrift…"
14:32
↩
Anna antwortete
gest
+
Alle
Für dich
Hochgeladen
Transkription
Kommentare
+
Heute
+
AR
Anna transkribierte 20 Blöcke
14:02
+
PR
Papa lud 3 Dok. hoch
11:08
+
FB
Felix überprüfte 5
10:24
+
@
MR
Mama erwähnte dich
14:32
+
+
+
+
+
+ 768 px · Tablet422 px @ 55% +
+
familienarchiv.de/chronik
+
+
DokumentePersonenChronik
+
+
← Zurück zur Übersicht
+
Chronik
Alle gelesen
+
Für dich
2 neu
@
Mama hat dich in Brief Nr. 42 erwähnt
"schau mal, das ist Omas Handschrift"
14:32
✓
↩
Anna hat geantwortet auf Brief Nr. 41
"ja genau, das war 1947 in Hamburg"
Gestern
✓
+
Alle
Für dich
Hochgeladen
Transkription
Kommentare
+
Heute
+
AR
Anna transkribierte 20 Blöcke in Brief Nr. 42
14:02–14:32
+
PR
Papa lud 3 Dokumente hoch
11:08
+
FB
Felix überprüfte 5 Blöcke in Brief Nr. 38
10:24
+
@
MR
Mama erwähnte dich in Brief Nr. 42
"schau mal, das ist Omas Handschrift von 1952"
14:32
+
Gestern
+
OR
Oma kommentierte Brief Nr. 39
"das war bei der Hochzeit…"
18:47
+
+
+
+
+
+ 1440 px · Desktop720 px @ 55% +
+
familienarchiv.de/chronik
+
+
DokumentePersonenBriefwechselChronik
+
+
← Zurück zur Übersicht
+
Chronik
Alle gelesen
+
Für dich
2 neu
@
Mama hat dich in Brief Nr. 42 erwähnt
"schau mal, das ist Omas Handschrift von 1952"
14:32
✓
↩
Anna hat auf deinen Kommentar in Brief Nr. 41 geantwortet
"ja genau, das war 1947 in Hamburg"
Gestern
✓
+
Alle
Für dich
Hochgeladen
Transkription
Kommentare
+
Heute
+
AR
Anna transkribierte 20 Blöcke in Brief Nr. 42 · Hamburg 1947
14:02–14:32
+
PR
Papa lud 3 Dokumente hoch
11:08
+
FB
Felix überprüfte 5 Blöcke in Brief Nr. 38
10:24
+
@
MR
Mama erwähnte dich in Brief Nr. 42
"schau mal, das ist Omas Handschrift von 1952"
14:32
+
Gestern
+
OR
Oma kommentierte Brief Nr. 39 · München 1952
"das war bei der Hochzeit von Onkel Heinrich, der hatte einen Dackel namens Bello"
18:47
+
AR
Anna erstellte Annotation auf Brief Nr. 37
16:03
+
+
+
+
+
+
+ + +
+
05Filter · Für dich (Mention History — Read + Unread)
+
Timeline narrows to only mentions and replies directed at the current user — both read and unread. The Für dich box remains visible above (it still represents unreads only). Every timeline row gets the for-you lane (accent left border + tinted bg + @ marker) because every row is a personal mention/reply. Unread rows additionally show the blue dot prefix.
+
+
+ 320 px · Mobile176 px @ 55% +
+
9:41
+
+
Chronik
+
+
← Übersicht
+
Chronik
Alle gelesen
+
Für dich
2 neu
@
Mama erwähnte dich
14:32
↩
Anna antwortete
gest
+
Alle
Für dich
Hochgeladen
Transkription
Kommentare
+
Heute
+
@
MR
Mama erwähnte dich
"Omas Handschrift…"
14:32
+
Gestern
+
↩
AR
Anna antwortete auf Brief 41
18:47
+
Diese Woche
+
@
OR
Oma erwähnte dich
Di
+
@
PR
Papa erwähnte dich
Mo
+
+
+
+
+
+ 768 px · Tablet422 px @ 55% +
+
/chronik?filter=fuer-dich
+
+
DokumentePersonenChronik
+
+
← Zurück zur Übersicht
+
Chronik
Alle gelesen
+
Für dich
2 neu
@
Mama hat dich in Brief Nr. 42 erwähnt
"schau mal, das ist Omas Handschrift"
14:32
✓
↩
Anna hat geantwortet auf Brief Nr. 41
Gestern
✓
+
Alle
Für dich
Hochgeladen
Transkription
Kommentare
+
Heute
+
@
MR
Mama erwähnte dich in Brief Nr. 42
"schau mal, das ist Omas Handschrift von 1952"
14:32
+
Gestern
+
↩
AR
Anna antwortete auf Brief Nr. 41
"ja genau, das war 1947 in Hamburg"
18:47
+
Diese Woche
+
@
OR
Oma erwähnte dich in Brief Nr. 35
"Marcel, weißt du noch den Hund auf dem Foto?"
Di · 09:41
+
@
PR
Papa erwähnte dich in Brief Nr. 33
Mo · 14:12
+
+
+
+
+
+ 1440 px · Desktop720 px @ 55% +
+
familienarchiv.de/chronik?filter=fuer-dich
+
+
DokumentePersonenBriefwechselChronik
+
+
← Zurück zur Übersicht
+
Chronik
Alle gelesen
+
Für dich
2 neu
@
Mama hat dich in Brief Nr. 42 erwähnt
"schau mal, das ist Omas Handschrift von 1952"
14:32
✓
↩
Anna hat auf deinen Kommentar in Brief Nr. 41 geantwortet
"ja genau, das war 1947 in Hamburg"
Gestern
✓
+
Alle
Für dich
Hochgeladen
Transkription
Kommentare
+
Heute
+
@
MR
Mama erwähnte dich in Brief Nr. 42
"schau mal, das ist Omas Handschrift von 1952"
14:32
+
Gestern
+
↩
AR
Anna antwortete auf deinen Kommentar in Brief Nr. 41
"ja genau, das war 1947 in Hamburg — die Oma hat mir das damals erzählt"
18:47
+
Diese Woche
+
@
OR
Oma erwähnte dich in Brief Nr. 35 · Köln 1961
"Marcel, weißt du noch den Hund auf dem Foto? Das war Rex, er hat immer Briefträger verbellt"
Di · 09:41
+
@
PR
Papa erwähnte dich in Brief Nr. 33
"frag mal Marcel, ob er die Handschrift von Uropa erkennt"
Mo · 14:12
+
Mehr laden
+
+
+
+
+
+
Dieser Filter ist der Schlüssel. Er beantwortet die Frage "Wo ist meine alte Erwähnung hin?", die sonst nach dem Markieren als gelesen aufkommen könnte. Die Für-Dich-Box zeigt nur Ungelesenes; der Filter zeigt die komplette Historie. Darum muss Für dich als Pill immer sichtbar sein — auch wenn die Box leer ist.
+
+ + +
+
06Filter · Hochgeladen (FILE_UPLOADED only)
+
Timeline narrows to uploads. Batch uploads are rolled up (same actor within 2 h). Für dich box remains visible above.
+
+
+ 320 px · Mobile176 px @ 55% +
+
9:41
+
+
Chronik
+
+
← Übersicht
+
Chronik
+
✓
Keine neuen
Ältere →
+
Alle
Für dich
Hochgeladen
Transkription
Kommentare
+
Heute
+
PR
Papa lud 3 Dok. hoch
11:08
+
Gestern
+
AR
Anna lud Brief 41 hoch
16:22
+
Diese Woche
+
PR
Papa lud 12 Fotos hoch
Mo
+
+
+
+
+
+ 768 px · Tablet422 px @ 55% +
+
/chronik?filter=hochgeladen
+
+
DokumentePersonenChronik
+
+
← Zurück zur Übersicht
+
Chronik
+
✓
Keine neuen Erwähnungen
Ältere Erwähnungen ansehen →
+
Alle
Für dich
Hochgeladen
Transkription
Kommentare
+
Heute
+
PR
Papa lud 3 Dokumente hoch
11:08
+
Gestern
+
AR
Anna lud Brief Nr. 41 hoch
16:22
+
Diese Woche
+
PR
Papa lud 12 Fotos hoch
Mo · 10:14–10:38
+
FB
Felix lud Urkunde 1934 hoch
So · 19:02
+
+
+
+
+
+ 1440 px · Desktop720 px @ 55% +
+
familienarchiv.de/chronik?filter=hochgeladen
+
+
DokumentePersonenBriefwechselChronik
+
+
← Zurück zur Übersicht
+
Chronik
+
✓
Keine neuen Erwähnungen
Ältere Erwähnungen ansehen →
+
Alle
Für dich
Hochgeladen
Transkription
Kommentare
+
Heute
+
PR
Papa lud 3 Dokumente hoch
11:08
+
Gestern
+
AR
Anna lud Brief Nr. 41 · Hamburg 1947 hoch
16:22
+
Diese Woche
+
PR
Papa lud 12 Fotos aus dem Album "Umzug Köln" hoch
Mo · 10:14–10:38
+
FB
Felix lud Urkunde 1934 hoch
So · 19:02
+
OR
Oma lud 4 Briefe hoch
Sa · 14:00–14:18
+
Mehr laden
+
+
+
+
+
+
+ + +
+
07Filter · Transkription (TEXT_SAVED + BLOCK_REVIEWED + ANNOTATION_CREATED)
+
Three kinds combined. Rollups dominate: long transcription sessions collapse to "N Blöcke in Dokument X". Verb copy distinguishes the three activities clearly (transkribierte / überprüfte / erstellte Annotation).
+
+
+ 320 px · Mobile176 px @ 55% +
+
9:41
+
+
Chronik
+
+
← Übersicht
+
Chronik
+
✓
Keine neuen
Ältere →
+
Alle
Für dich
Hochgeladen
Transkription
Kommentare
+
Heute
+
AR
Anna transkr. 20 Blöcke
14:02
+
FB
Felix überprüfte 5
10:24
+
Gestern
+
AR
Anna Annotation Brief 37
16:03
+
MR
Mama transkr. 8 Blöcke
11:30
+
+
+
+
+
+ 768 px · Tablet422 px @ 55% +
+
/chronik?filter=transkription
+
+
DokumentePersonenChronik
+
+
← Zurück zur Übersicht
+
Chronik
+
✓
Keine neuen Erwähnungen
Ältere Erwähnungen ansehen →
+
Alle
Für dich
Hochgeladen
Transkription
Kommentare
+
Heute
+
AR
Anna transkribierte 20 Blöcke in Brief Nr. 42
14:02–14:32
+
FB
Felix überprüfte 5 Blöcke in Brief Nr. 38
10:24
+
Gestern
+
AR
Anna erstellte Annotation auf Brief Nr. 37
16:03
+
MR
Mama transkribierte 8 Blöcke in Brief Nr. 36
11:30
+
Diese Woche
+
FB
Felix überprüfte 14 Blöcke in Brief Nr. 34
Di · 16:40
+
+
+
+
+
+ 1440 px · Desktop720 px @ 55% +
+
familienarchiv.de/chronik?filter=transkription
+
+
DokumentePersonenBriefwechselChronik
+
+
← Zurück zur Übersicht
+
Chronik
+
✓
Keine neuen Erwähnungen
Ältere Erwähnungen ansehen →
+
Alle
Für dich
Hochgeladen
Transkription
Kommentare
+
Heute
+
AR
Anna transkribierte 20 Blöcke in Brief Nr. 42 · Hamburg 1947
14:02–14:32
+
FB
Felix überprüfte 5 Blöcke in Brief Nr. 38
10:24
+
Gestern
+
AR
Anna erstellte Annotation auf Seite 2 von Brief Nr. 37
16:03
+
MR
Mama transkribierte 8 Blöcke in Brief Nr. 36 · Köln 1954
11:30–11:58
+
Diese Woche
+
FB
Felix überprüfte 14 Blöcke in Brief Nr. 34
Di · 16:40–17:22
+
AR
Anna transkribierte 6 Blöcke in Brief Nr. 33
Mo · 09:15
+
OR
Oma transkribierte 3 Blöcke in Brief Nr. 32
So · 20:04
+
Mehr laden
+
+
+
+
+
+
Rollup-Regel im Detail. +
    +
  • Gleicher Akteur + gleiches Dokument + gleiche Aktionsart, innerhalb 120 min → ein Row mit Count-Badge und Zeitspanne ("14:02–14:32").
    • +
  • Ein einzelner Block → kein Rollup, normaler Row ("Oma transkribierte Block in Brief 32"). Die Count-Badge erscheint erst ab 2 Events.
    • +
  • COMMENT_ADDED und MENTION_CREATED werden NIE rolled-up — jede Kommunikation bleibt eine eigene Zeile.
    • +
  • Überschreitet das Fenster eine Tagesgrenze, wird es am Tag der Gruppe selbst gerendert (frühestes Event bestimmt das Datum).
    • +
+
+
+ + +
+
08Filter · Kommentare (COMMENT_ADDED + MENTION_CREATED)
+
Conversations only. Each row shows an inline preview (~140 chars of the comment text, italic). Mentions keep the for-you lane; plain comments stay in the neutral lane even when filter is active.
+
+
+ 320 px · Mobile176 px @ 55% +
+
9:41
+
+
Chronik
+
+
← Übersicht
+
Chronik
Alle gelesen
+
Für dich
1 neu
@
Mama erwähnte dich
14:32
+
Alle
Für dich
Hochgeladen
Transkription
Kommentare
+
Heute
+
@
MR
Mama erwähnte dich
"Omas Handschrift…"
14:32
+
OR
Oma kommentierte Brief 39
"bei der Hochzeit…"
18:47
+
PR
Papa kommentierte Brief 36
"vor Umzug Köln…"
12:15
+
+
+
+
+
+ 768 px · Tablet422 px @ 55% +
+
/chronik?filter=kommentare
+
+
DokumentePersonenChronik
+
+
← Zurück zur Übersicht
+
Chronik
Alle gelesen
+
Für dich
1 neu
@
Mama hat dich erwähnt in Brief Nr. 42
"schau mal, das ist Omas Handschrift"
14:32
✓
+
Alle
Für dich
Hochgeladen
Transkription
Kommentare
+
Heute
+
@
MR
Mama erwähnte dich in Brief Nr. 42
"schau mal, das ist Omas Handschrift von 1952"
14:32
+
OR
Oma kommentierte Brief Nr. 39
"das war bei der Hochzeit von Onkel Heinrich"
18:47
+
PR
Papa kommentierte Brief Nr. 36
"stimmt, das war kurz vor dem Umzug nach Köln"
12:15
+
Gestern
+
AR
Anna antwortete in Brief Nr. 41
"ja genau, das war 1947 in Hamburg"
18:12
+
+
+
+
+
+ 1440 px · Desktop720 px @ 55% +
+
familienarchiv.de/chronik?filter=kommentare
+
+
DokumentePersonenBriefwechselChronik
+
+
← Zurück zur Übersicht
+
Chronik
Alle gelesen
+
Für dich
1 neu
@
Mama hat dich in Brief Nr. 42 erwähnt
"schau mal, das ist Omas Handschrift von 1952"
14:32
✓
+
Alle
Für dich
Hochgeladen
Transkription
Kommentare
+
Heute
+
@
MR
Mama erwähnte dich in Brief Nr. 42 · Hamburg 1947
"schau mal, das ist Omas Handschrift von 1952 — ich glaube, das ist der Brief an Tante Elke"
14:32
+
OR
Oma kommentierte Brief Nr. 39 · München 1952
"das war bei der Hochzeit von Onkel Heinrich, der hatte einen Dackel namens Bello und immer zwei Zigaretten in der Brusttasche"
18:47
+
PR
Papa kommentierte Brief Nr. 36
"stimmt, das war kurz vor dem Umzug nach Köln — ich erinnere mich, weil Mama das Foto erst am Abend entwickelt hat"
12:15
+
Gestern
+
AR
Anna antwortete in Brief Nr. 41
"ja genau, das war 1947 in Hamburg. Die Oma hat mir damals erzählt, dass der Dackel dabei war"
18:12
+
Mehr laden
+
+
+
+
+
+
+ + +
+
09Filter Active · No Matching Results
+
Filter is active but no events match (shown here as "Hochgeladen" with no uploads this week). Für dich box unchanged. Pills stay visible — user can switch filters without leaving the page.
+
+
+ 320 px · Mobile176 px @ 55% +
+
9:41
+
+
Chronik
+
+
← Übersicht
+
Chronik
+
✓
Keine neuen
Ältere →
+
Alle
Für dich
Hochgeladen
Transkription
Kommentare
+
∅
Keine Uploads
Noch nichts hochgeladen.
+
+
+
+
+
+ 768 px · Tablet422 px @ 55% +
+
/chronik?filter=hochgeladen
+
+
DokumentePersonenChronik
+
+
← Zurück zur Übersicht
+
Chronik
+
✓
Keine neuen Erwähnungen
Ältere Erwähnungen ansehen →
+
Alle
Für dich
Hochgeladen
Transkription
Kommentare
+
∅
Keine Uploads gefunden
In diesem Zeitraum wurden keine Dokumente hochgeladen. Versuche einen anderen Filter.
+
+
+
+
+
+ 1440 px · Desktop720 px @ 55% +
+
familienarchiv.de/chronik?filter=hochgeladen
+
+
DokumentePersonenBriefwechselChronik
+
+
← Zurück zur Übersicht
+
Chronik
+
✓
Keine neuen Erwähnungen
Ältere Erwähnungen ansehen →
+
Alle
Für dich
Hochgeladen
Transkription
Kommentare
+
∅
Keine Uploads gefunden
In diesem Zeitraum wurden keine Dokumente hochgeladen. Wähle einen anderen Filter oder schau in der vollständigen Chronik nach.
Zu Alle wechseln
+
+
+
+
+
+
+ + +
+
10Loading · Skeleton Placeholders
+
Initial page load and pagination load both use the same skeleton rows. Page header and filter pills render immediately (cheap); Für dich + timeline rows shimmer until the API resolves. prefers-reduced-motion: shimmer animation is disabled, skeleton shows as static blocks.
+
+
+ 320 px · Mobile176 px @ 55% +
+
9:41
+
+
Chronik
+
+
← Übersicht
+
Chronik
+
+
+
+
+
+
Alle
Für dich
Hochgeladen
Transkription
Kommentare
+
Heute
+
+
+
+
+
+
+
+
+ 768 px · Tablet422 px @ 55% +
+
familienarchiv.de/chronik
+
+
DokumentePersonenChronik
+
+
← Zurück zur Übersicht
+
Chronik
+
+
Alle
Für dich
Hochgeladen
Transkription
Kommentare
+
Heute
+
+
+
+
+
+
+
+
+
+ 1440 px · Desktop720 px @ 55% +
+
familienarchiv.de/chronik
+
+
DokumentePersonenBriefwechselChronik
+
+
← Zurück zur Übersicht
+
Chronik
+
+
+
+
+
+
Alle
Für dich
Hochgeladen
Transkription
Kommentare
+
Heute
+
+
+
+
+
+
+
+
+
+
+
+ + +
+
11Error · API Failure with Retry
+
Activity or notifications endpoint returned 5xx or timed out. Page chrome (header, filter pills) still render so the user can retry a filter or leave. Amber warning card with a retry button replaces the timeline body. Never shows raw stack traces — generic German text + optional error code.
+
+
+ 320 px · Mobile176 px @ 55% +
+
9:41
+
+
Chronik
+
+
← Übersicht
+
Chronik
+
Alle
Für dich
Hochgeladen
Transkription
Kommentare
+
⚠
Chronik nicht verfügbar
Bitte erneut versuchen.
Erneut laden
+
+
+
+
+
+ 768 px · Tablet422 px @ 55% +
+
familienarchiv.de/chronik
+
+
DokumentePersonenChronik
+
+
← Zurück zur Übersicht
+
Chronik
+
Alle
Für dich
Hochgeladen
Transkription
Kommentare
+
⚠
Chronik konnte nicht geladen werden
Es gab ein Problem beim Laden. Bitte versuche es in einem Moment erneut.
Erneut laden
+
+
+
+
+
+ 1440 px · Desktop720 px @ 55% +
+
familienarchiv.de/chronik
+
+
DokumentePersonenBriefwechselChronik
+
+
← Zurück zur Übersicht
+
Chronik
+
Alle
Für dich
Hochgeladen
Transkription
Kommentare
+
⚠
Chronik konnte nicht geladen werden
Es gab ein Problem beim Laden der Aktivitäten. Bitte versuche es in einem Moment erneut. Wenn das Problem länger besteht, wende dich an einen Administrator. (Code: CHRONIK_LOAD_FAILED)
Erneut laden
+
+
+
+
+
+
Error-Copy-Regeln. +
    +
  • Keine rohen Backend-Messages. Mapping durch getErrorMessage(code) über Paraglide-Keys.
    • +
  • Fehlercode optional am Ende der Body-Zeile, in Klammern — hilft Support, verschreckt Nutzer nicht.
    • +
  • "Erneut laden" ist eine echte Button-Aktion, kein Reload — sie triggert nur die fehlgeschlagene Query neu.
    • +
+
+
+ +
+
Implementation Reference — Content Statessemantic tokens
+ + + + + + + + + + + + +
ElementClassesRealNote
Unread dot (Für dich)h-2 w-2 rounded-full bg-accent (light) / bg-turquoise (dark)8 pxaria-hidden, redundant cue
For-you lane rowborder-l-[3px] border-accent bg-accent-bg/60 pl-3 rounded-smborder 3 pxNever color-only; keep @ marker
@ marker circleinline-flex items-center justify-center w-5 h-5 rounded-full bg-accent-bg text-ink font-bold20 pxIcon fallback if no name
Count badge (rollup)inline-block bg-primary text-primary-fg text-xs font-bold px-1.5 py-0.5 rounded-sm12 px / 700"20 Blöcke" etc.
Day headerflex items-center gap-3 mt-6 mb-2 · text-xs font-bold uppercase tracking-widest text-ink-3 · after: flex-1 h-px bg-line12 pxHeute / Gestern / Diese Woche / Älter
Empty-state iconw-10 h-10 text-accent opacity-7040 pxScroll icon for first-run, ∅ for filter-no-result, ✓ for inbox zero
Skeleton rowh-[72px] flex items-start gap-3 py-3 + bg-gradient-to-r from-muted via-canvas to-muted animate-shimmer72 pxDisable animation at motion-reduce
Error cardbg-warning/10 border border-warning/40 text-warning rounded-sm p-4 flex gap-3AA 4.8:1Retry button: bg-warning text-warning-fg px-4 py-2
+
+
+ + +
+

03Dark Mode Parity

+

+ Dark mode remaps every semantic token via :root[data-theme='dark']. Contrast ratios re-verified on the dark surface (#011526): brand-mint primary (#a1dcd8) gives 9.2:1 on canvas, turquoise accent (#00c7b1) gives 6.8:1 on canvas. Three key states rendered at 1440 px below to verify the for-you lane, unread dots, and count badges remain visually strong. +

+ +
+ +
+ 1440 · Default · Dark +
+
familienarchiv.de/chronik
+
+
DokumentePersonenChronik
+
+
← Zurück zur Übersicht
+
Chronik
Alle gelesen
+
Für dich
3 neu
+
@
Mama hat dich in Brief Nr. 42 erwähnt
"schau mal, das ist Omas Handschrift"
14:32
✓
+
@
Oma hat dich in Brief Nr. 39 erwähnt
11:05
✓
+
↩
Anna antwortete in Brief Nr. 41
Gestern
✓
+
+
Alle
Für dich
Hochgeladen
Transkription
Kommentare
+
Heute
+
AR
Anna transkribierte 20 Blöcke in Brief Nr. 42
14:02–14:32
+
PR
Papa lud 3 Dokumente hoch
11:08
+
@
MR
Mama erwähnte dich in Brief Nr. 42
"schau mal, das ist Omas Handschrift von 1952"
14:32
+
Gestern
+
OR
Oma kommentierte Brief Nr. 39
"das war bei der Hochzeit von Onkel Heinrich"
18:47
+
+
+
+
+ +
+ 1440 · Inbox Zero · Dark +
+
familienarchiv.de/chronik
+
+
DokumentePersonenChronik
+
+
← Zurück zur Übersicht
+
Chronik
+
✓
Keine neuen Erwähnungen
Ältere Erwähnungen ansehen →
+
Alle
Für dich
Hochgeladen
Transkription
Kommentare
+
Heute
+
AR
Anna transkribierte 20 Blöcke
14:02
+
PR
Papa lud 3 Dok. hoch
11:08
+
@
MR
Mama erwähnte dich
14:32
+
Gestern
+
OR
Oma kommentierte Brief 39
18:47
+
+
+
+
+ +
+ 1440 · Transkription · Dark +
+
/chronik?filter=transkription
+
+
DokumentePersonenChronik
+
+
← Zurück zur Übersicht
+
Chronik
+
✓
Keine neuen Erwähnungen
Ältere ansehen →
+
Alle
Für dich
Hochgeladen
Transkription
Kommentare
+
Heute
+
AR
Anna transkribierte 20 Blöcke in Brief 42
14:02
+
FB
Felix überprüfte 5 Blöcke in Brief 38
10:24
+
Gestern
+
AR
Anna erstellte Annotation auf Brief 37
16:03
+
MR
Mama transkribierte 8 Blöcke
11:30
+
+
+
+
+
+ +
Dark-Mode-Regeln, die aus dem Light-Mode abweichen. +
    +
  • --c-accent wechselt von Mint (#a1dcd8) zu Turquoise (#00c7b1) — auf dunklem Hintergrund ist der Sättigungssprung nötig, damit die For-Dich-Lane sichtbar bleibt (6.8:1 auf Canvas).
    • +
  • --c-primary wird umgekehrt: in Light ist Primary Navy, in Dark ist Primary Mint. Pills, Count-Badges und Buttons invertieren automatisch. Die Active-Pill zeigt daher in Dark einen mint Hintergrund mit navy Text.
    • +
  • Focus-Ring wechselt von Navy zu Mint (9.2:1 auf Canvas) — keine Anpassung im Markup nötig, die Tokens regeln das.
    • +
  • Kein filter: invert(). Jeder Token wird gezielt neu gemappt.
    • +
+
+ +
+
Dark Mode — Contrast Verificationreal tokens from layout.css
+ + + + + + + + + + + +
PairValueRatioWCAG
Body text (ink on surface)#f0efe9 on #01152614.2:1AAA ✓
Secondary text (ink-2 on surface)#9ca3af on #0115267.5:1AAA ✓ (body)
Tertiary text (ink-3 on surface)#8b97a5 on #0115267.1:1AAA ✓ (body)
Primary pill bg vs text#a1dcd8 / #0128519.8:1AAA ✓
Accent bg (for-you lane) on canvasrgba(0,199,177,0.12) effectivedecorativen/a (border is cue)
Turquoise dot on surface#00c7b1 on #0115266.8:1AA ✓
Focus ring on canvas#a1dcd8 on #010e1e9.2:1AAA ✓
+
+
+ + +
+

04Row Anatomy · Close-Ups at ~100% Scale

+

+ Each of the four row types rendered at approximately real pixel sizes (not scaled), with labeled parts. These are the reference renderings developers check against when implementing the ChronikRow.svelte component. +

+ + + + + +
+
Type A · Simple activity row (upload, single annotation)
+
+
PR
+
+
Papa lud Brief Nr. 42 · Hamburg 1947 hoch
+
+
11:08
+
+
+
Type A — Simple RowFILE_UPLOADED, single ANNOTATION_CREATED
+ + + + + + + + +
PartClassesRealNote
Row containerflex items-start gap-3 py-3 border-b border-line56 px minCompact (no preview)
Avatarw-10 h-10 rounded-full flex items-center justify-center text-white font-bold text-sm40 pxColor from actor.color
Text line 1text-[15px] leading-[1.5] text-ink with <strong> on actor15 px / 400+700Document link underlined with accent
Timetext-sm text-ink-3 tabular-nums whitespace-nowrap ml-auto14 pxRight-aligned, min-width 90 px
+
+
+ + +
+
Type B · Rollup row (N Blöcke, Zeitspanne)
+
+
AR
+
+
Anna transkribierte 20 Blöcke in Brief Nr. 42 · Hamburg 1947
+
+
14:02–14:32
+
+
+ Wann erscheint der Badge? Ab 2 Events im Rollup-Fenster. 1 Event → normales Verb ("Anna transkribierte Block in…"). Der Badge zeigt die Gesamtzahl, nie die Blocknummern einzeln. +
+
+
Type B — Rollup Rowsame actor + doc, 2h window
+ + + + + + + +
PartClassesRealNote
Count badgeinline-block bg-primary text-primary-fg text-xs font-bold px-2 py-0.5 rounded-sm mr-1 tracking-tight12 px / 700"20 Blöcke", "3 Dokumente", "5 Fotos"
Time rangetext-sm text-ink-3 tabular-nums whitespace-nowrap14 pxen-dash between times, never hyphen
Verb copym.rollup_text_saved({ count })via ParaglidePlural forms handled by Paraglide
+
+
+ + +
+
Type C · Comment row (with inline preview)
+
+
OR
+
+
Oma kommentierte Brief Nr. 39 · München 1952
+
"das war bei der Hochzeit von Onkel Heinrich, der hatte einen Dackel namens Bello und immer zwei Zigaretten in der Brusttasche — ganz typisch für ihn"
+
+
18:47
+
+
+
Type C — Comment with PreviewCOMMENT_ADDED, never rolled up
+ + + + + + + +
PartClassesRealNote
Preview texttext-[13px] italic leading-relaxed text-ink-2 mt-1 line-clamp-213 px / italicMax 2 lines at ≥640 px; 1 line with ellipsis at <640 px
Preview lengthTruncated server-side to ~140 chars + "…"bodyNever render unbounded comment content
Quote marksLiteral German quotes: "…"U+201E / U+201CWrap the truncated string
+
+
+ + +
+
Type D · For-You lane row (read or unread mention in timeline)
+
+
@
+
MR
+
+
Mama erwähnte dich in Brief Nr. 42 · Hamburg 1947
+
"schau mal, das ist Omas Handschrift von 1952 — ich glaube, das ist der Brief an Tante Elke"
+
+
14:32
+
+
+ Redundante Merkmale für die For-Dich-Lane. +
    +
  • Linker Rand: 3 px brand-mint (light) / turquoise (dark). Nie "nur Farbe" — immer mit @ / ↩ Marker kombiniert.
    • +
  • Hintergrund: bg-accent-bg (~12 % Opazität). Contrast ratio mit Body-Text: 13.9:1 (unverändert, weil Text-Farbe gleich bleibt).
    • +
  • Der @ / ↩ Marker im Kreis ist der primäre ikonografische Hinweis; Screenreader ignorieren ihn (aria-hidden), weil die Textzeile ("erwähnte dich") die gleiche Info semantisch transportiert.
    • +
+
+
+
Type D — For-You Lane RowMENTION_CREATED, COMMENT_ADDED where mentionedUserId = currentUserId
+ + + + + + + +
PartClassesRealNote
Row containerflex items-start gap-3 py-3 border-l-[3px] border-accent bg-accent-bg/60 pl-3 -ml-3 rounded-smborder 3 pxNegative margin compensates pl to keep vertical alignment with other rows
@ markerw-6 h-6 rounded-full bg-accent-bg text-ink flex items-center justify-center font-bold shrink-0 mt-124 pxGlyph: @ for MENTION, ↩ (U+21A9) for REPLY
Unread dot (if unread)absolute top-2 -left-1 w-2 h-2 rounded-full bg-accent8 pxAdds dot next to the @ marker; aria-label "ungelesen"
+
+
+ + +
+
Type D · Dark mode variant
+
+
@
+
MR
+
+
Mama erwähnte dich in Brief Nr. 42 · Hamburg 1947
+
"schau mal, das ist Omas Handschrift von 1952 — ich glaube, das ist der Brief an Tante Elke"
+
+
14:32
+
+
+
+ + +
+

05Interaction States

+

+ Every interactive control at every visible state: default, hover, focus, active (pressed), and where relevant disabled. Pointer-driven states (:hover) and keyboard-driven states (:focus-visible) are shown separately because they MUST render differently — the focus ring only appears for keyboard navigation. +

+ + +

5.1 Filter Pills

+ + +
+
DefaultAlleAlle
+
HoverAlleAlle
+
FocusAlleAlle
+
PressedAlleAlle
+
→ Light · Inactive = gray-sand; Active = navy / white; Hover darkens; Focus ring = 2 px navy with 2 px offset.
+
+
+
DefaultAlleAlle
+
HoverAlleAlle
+
FocusAlleAlle
+
→ Dark · Inactive = muted-navy; Active = mint / navy; Focus ring = 2 px mint (9.2:1 on canvas).
+
+ +
+
Filter Pill Statesrole="radio" within role="radiogroup"
+ + + + + + + + + +
StateClassesRatioNote
Default inactivebg-muted text-ink hover:bg-line px-4 py-2 rounded-full text-sm font-medium min-h-[44px] min-w-[44px] inline-flex items-center44 px minSenior-friendly touch target
Default activebg-primary text-primary-fg hover:bg-primary/9014.5:1 lightUnambiguous when active
Focus visiblefocus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:outline-none2 px ringNever :focus — only keyboard
Pressedactive:translate-y-px active:bg-primary/951 px nudgeConfirms the tap
DisabledNot used — pills never disable; if no events match, filter still selectable and empty-state renders instead.n/aAvoid dead UI
+
+ + +

5.2 Für dich Row · Mark-as-read Button

+ + +
+
Default
@
Mama erwähnte dich in Brief Nr. 42
✓
+
Btn hover
@
Mama erwähnte dich in Brief Nr. 42
✓
+
Btn focus
@
Mama erwähnte dich in Brief Nr. 42
✓
+
Btn pressed
@
Mama erwähnte dich in Brief Nr. 42
✓
+
Post-click (row fades out in ~200ms, then row removed from box; count decrements)
@
Mama erwähnte dich in Brief Nr. 42
✓
+
+ +
+
Dismiss Buttonaria-label="Als gelesen markieren"
+ + + + + + + + + +
StateClassesReal
Defaultw-11 h-11 rounded-sm border border-line bg-surface text-ink-3 flex items-center justify-center44 × 44 px
Hoverhover:bg-muted hover:text-ink hover:border-line-2—
Focusfocus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:outline-none2 px
Activeactive:translate-y-px active:bg-line1 px
After clickRow animates out over 200 ms, aria-live="polite" count badge updates, then DOM element removed200 ms
+
+ + +

5.3 "Alle gelesen" Action Button (page header)

+ +
+
DefaultAlle gelesen
+
HoverAlle gelesen
+
FocusAlle gelesen
+
PressedAlle gelesen
+
HiddenButton is not rendered when unreadCount === 0 (never a disabled state)
+
+ + +

5.4 Timeline Row Interaction

+ +
+
Default
+
AR
Anna transkribierte 20 Blöcke in Brief Nr. 42
14:02
+
Hover (cursor pointer)
+
AR
Anna transkribierte 20 Blöcke in Brief Nr. 42
14:02
+
Focus (keyboard)
+
AR
Anna transkribierte 20 Blöcke in Brief Nr. 42
14:02
+
+ +
+
Timeline Rowrendered as <a href="/documents/{id}"> — entire row is the link
+ + + + + + + + +
StateClassesRealNote
Defaultflex items-start gap-3 p-3 -mx-3 rounded-sm72 px targetNegative margin so hover-bg reaches beyond text
Hoverhover:bg-muted transition-colors—150 ms transition; disabled under motion-reduce
Focusfocus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:outline-none focus-visible:bg-muted2 px ringRing on row, not on inner link text
Click targetWhole row navigates; inner doc link uses pointer-events:none so outer row handles navigation.—Prevents nested-link a11y issues
+
+
+ + +
+

06Accessibility Contract

+

+ The page MUST pass axe-core in both light and dark modes at all three viewports. Below are the explicit rules the implementation is held to. +

+ +
+
+ ✓ Erfüllt in dieser Spec: +
    +
  • Semantische Landmarks: <main>, <nav> für Back-Link und Filter, <section aria-labelledby> für Für-Dich-Box.
    • +
  • Filter-Pills als role="radiogroup" / role="radio" mit aria-checked.
    • +
  • Unread-Count mit aria-live="polite" — Screenreader kündigen Änderungen an.
    • +
  • "Für dich" Empty-State Link hat einen vollen Satz als sichtbaren Text, keine Platzhalter-Alternative.
    • +
  • Alle Icons aria-hidden="true", semantische Info im umgebenden Text.
    • +
  • Minimum 44×44 px Touch-Targets für alle interaktiven Elemente.
    • +
  • Tag-Grenzen als Day-Headers sind visuelle Gruppierungen, keine Landmarks — sie bekommen kein <h2>.
    • +
  • prefers-reduced-motion deaktiviert Shimmer, Hover-Transitions, und 200 ms Row-Fade.
    • +
+
+
+ ⚠ Implementation muss liefern: +
    +
  • axe-playwright Run auf /chronik in Light UND Dark in E2E — beide müssen passen (kein "light-only").
    • +
  • Visual-Regression Snapshots bei 320 / 768 / 1440 px für Default + Inbox-Zero + Für-Dich-Filter.
    • +
  • Tastatur-Navigation: Tab durchläuft Back-Link → "Alle gelesen" → Für-Dich-Rows (jede mit Dismiss-Button als separatem Stop) → Filter-Pills → Timeline-Rows. Reihenfolge in Source-Order.
    • +
  • Screenreader-Test: Der Bell-Unread-Count soll beim Öffnen einer Für-Dich-Zeile durch aria-live die neue Gesamtzahl ansagen ("2 neue Erwähnungen").
    • +
  • Zoom auf 200 %: Pills dürfen nicht aus dem Viewport verschwinden, Day-Headers nicht überlappen.
    • +
+
+
+ +
+
Contrast Ratios · Real Token Valuesmeasured at document surface
+ + + + + + + + + + + + + +
PairValuesLightDark
Body text (ink)ink / surface14.5:1 (AAA)14.2:1 (AAA)
Secondary text (ink-2)ink-2 / surface7.6:1 (AAA)7.5:1 (AAA)
Tertiary text (ink-3)ink-3 / surface4.8:1 (AA)7.1:1 (AAA)
Day headerink-3 / canvas4.6:1 (AA)6.9:1 (AAA)
Active pillprimary-fg / primary14.5:19.8:1
Unread dotaccent / surface1.5:1 (decorative)6.8:1
For-you lane borderaccent / canvas1.5:1 (decorative + border)6.8:1
Focus ringfocus-ring / canvas14:19.2:1
Error card textwarning / warning-bg4.8:1 (AA)4.7:1 (AA)
+
+ +
+ Hinweis zu accent als dekorativer Farbe. Light-mode accent (#a1dcd8) erreicht nur 1.5:1 auf weiß — das ist bewusst. Er darf NICHT für Text stehen. In der For-Dich-Lane ist die Text-Farbe weiter ink (14.5:1); der Accent erscheint nur als 3 px Border und als Hintergrund-Tint. Die Information ist in Ikonografie (@-Marker) und Text-Kopie ("erwähnte dich") redundant codiert. +
+
+ + +
+

07Implementation Notes for Felix

+

+ Design is locked. This section is the bridge to the implementation plan that will be written next. It captures data, routing, and state decisions that affect code structure without dictating the code itself. +

+ +

7.1 Routing

+
+
Route ChangesSvelteKit routing
+ + + + + + + + +
RouteBehaviorNote
/chronikNew page — renders this speci18n slug: de=chronik, en=chronicle, es=cronica (via Paraglide routing)
/chronik?filter=fuer-dichFilter state in query paramValues: fuer-dich, hochgeladen, transkription, kommentare. Missing = Alle.
/notifications301 redirect to /chronikPreserves bookmarks; add in hooks.server.ts
Bell dropdown footer linkChanges target from /notifications → /chronik; label: "Zur Chronik →"No other bell behavior change
+
+ +

7.2 Data

+
+
API Calls from /chronikboth existing; one new endpoint optional
+ + + + + + + + + + +
CallExisting?Returns
GET /api/notifications?read=false&size=20✓ existingFür-dich Box items (unread MENTION + REPLY)
GET /api/dashboard/activity?limit=40✓ existing (currently capped at 20)Timeline items when filter is Alle. Raise server cap to 40 for this page.
GET /api/dashboard/activity?limit=40&kinds=FILE_UPLOADED⊕ new query paramFiltered timeline. Query param: kinds (CSV of AuditKind).
GET /api/notifications?size=40✓ existing"Für dich" filter view (read + unread).
PATCH /api/notifications/{id}/read✓ existingDismiss-button on Für-dich row.
POST /api/notifications/read-all✓ existing"Alle gelesen" action.
+
+ +

7.3 Rollup (backend)

+
+ Rollup logic lives in the backend. +
    +
  • Modify AuditLogQueryRepository.findActivityFeed to group consecutive rows where actor_id, document_id, kind match AND happened_at falls within 120 min of the previous row in the same group.
    • +
  • Result record shape extends ActivityFeedRow with count (int) and happenedAtRange (start..end). For single-event rows, count = 1 and the range is happenedAt..happenedAt.
    • +
  • DTO: extend ActivityFeedItemDTO with count and happenedAtUntil (optional, null for singletons).
    • +
  • Rollup applies to these kinds only: TEXT_SAVED, ANNOTATION_CREATED, BLOCK_REVIEWED, FILE_UPLOADED. COMMENT_ADDED and MENTION_CREATED stream 1:1.
    • +
  • Add kinds query param to GET /api/dashboard/activity. Default: all 6 (FILE_UPLOADED, TEXT_SAVED, BLOCK_REVIEWED, ANNOTATION_CREATED, COMMENT_ADDED, MENTION_CREATED). Never include STATUS_CHANGED or METADATA_UPDATED — they remain audit-only.
    • +
+
+ +

7.4 Frontend Structure

+
+
New Svelte Fileseach unit is one visible region
+ + + + + + + + + + + + +
FileResponsibility
src/routes/chronik/+page.sveltePage shell: back link, title, "Alle gelesen", Für-Dich-Box, pills, timeline. Composes the components below.
src/routes/chronik/+page.server.tsLoad: /api/notifications?read=false + /api/dashboard/activity based on query filter. Actions: mark-all.
src/lib/components/ChronikFuerDichBox.svelteUnread mentions card with empty-state variant. Dismiss-button per row.
src/lib/components/ChronikFilterPills.svelte5 pills, role="radiogroup", navigates via goto.
src/lib/components/ChronikTimeline.svelteDay-grouped timeline, renders a list of ChronikRow.
src/lib/components/ChronikRow.svelteSingle row: 4 types (simple, rollup, comment, for-you). Props: item: ActivityFeedItemDTO, currentUserId.
src/lib/components/ChronikEmptyState.svelteThree variants: first-run, filter-no-result, inbox-zero (Für-dich).
src/lib/components/ChronikErrorCard.svelteWarning card with retry button; accepts onRetry.
+
+ +

7.5 i18n keys (Paraglide)

+
+
New keys in messages/de.json (mirror in en.json, es.json)use existing feed_* keys where possible
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Keyde
chronik_page_titleChronik
chronik_for_you_captionFür dich
chronik_for_you_count{count} neu
chronik_mark_read_ariaAls gelesen markieren
chronik_mark_all_readAlle gelesen
chronik_inbox_zero_titleKeine neuen Erwähnungen
chronik_inbox_zero_linkÄltere Erwähnungen ansehen →
chronik_filter_allAlle
chronik_filter_for_youFür dich
chronik_filter_uploadedHochgeladen
chronik_filter_transcriptionTranskription
chronik_filter_commentsKommentare
chronik_day_todayHeute
chronik_day_yesterdayGestern
chronik_day_this_weekDiese Woche
chronik_day_olderÄlter
chronik_rollup_text_saved{actor} transkribierte {count} Blöcke in {doc}
chronik_rollup_uploaded{actor} lud {count} Dokumente hoch
chronik_rollup_reviewed{actor} überprüfte {count} Blöcke in {doc}
chronik_empty_first_run_titleNoch nichts geschehen
chronik_empty_first_run_bodySobald jemand aus der Familie Dokumente hochlädt, transkribiert oder kommentiert, erscheint es hier.
chronik_empty_filter_titleNichts in dieser Ansicht
chronik_error_titleChronik konnte nicht geladen werden
chronik_error_retryErneut laden
+
+ +

7.6 Dashboard activity feed — fix the wrong link

+
+ Fix for existing bug: DashboardActivityFeed.svelte line ~37 currently links to /documents. Change href="/documents" → href="/chronik" and update feed_show_all label text if desired (e.g., "Zur Chronik" instead of the generic "Alle anzeigen"). +
+
+ + + + +
+ +