5f30807ed0
Spec replaces /notifications with a unified /chronik page that merges ambient archive activity (6 of 8 AuditKinds) and personal mentions/replies. Covers 11 content states across 320/768/1440px viewports, dark mode parity, row anatomy close-ups, interaction states, WCAG contrast verification, and implementation notes (routing, API calls, rollup logic, Svelte component structure, i18n keys). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2044 lines
183 KiB
HTML
2044 lines
183 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Chronik · Final Design Spec · Familienarchiv</title>
|
||
<style>
|
||
/* ═══════════════════════════════════════════════════════════
|
||
CHRONIK — Unified Activity + Notifications Page
|
||
Replaces /notifications. German UI. 11 states × 3 viewports.
|
||
By Leonie Voss (UX/Design). 2026-04-20.
|
||
═══════════════════════════════════════════════════════════ */
|
||
|
||
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
|
||
body{font-family:'Helvetica Neue',Arial,sans-serif;background:#ECEAE4;color:#1A1A1A;line-height:1.5;-webkit-font-smoothing:antialiased}
|
||
.doc{max-width:1400px;margin:0 auto;padding:48px 28px}
|
||
|
||
/* ── Masthead ──────────────────────────────────────────── */
|
||
.mast{background:#012851;border-radius:10px;padding:32px 40px;margin-bottom:40px;color:#fff}
|
||
.mast-top{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:14px}
|
||
.mast h1{font-size:22px;font-weight:900;letter-spacing:-.4px;margin-bottom:6px}
|
||
.mast p{font-size:12px;color:rgba(255,255,255,.55);max-width:760px;line-height:1.7}
|
||
.mast-badge{font-size:9px;font-weight:800;padding:3px 9px;border-radius:20px;text-transform:uppercase;letter-spacing:.8px;flex-shrink:0;margin-top:4px;background:#a1dcd8;color:#012851}
|
||
.decisions{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:18px;border-top:1px solid rgba(255,255,255,.1);padding-top:14px}
|
||
.dec{background:rgba(255,255,255,.06);border-radius:6px;padding:10px 12px}
|
||
.dec-label{font-size:7.5px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:rgba(255,255,255,.4);margin-bottom:5px}
|
||
.dec-value{font-size:10px;font-weight:700;color:#fff;line-height:1.5}
|
||
|
||
/* ── Sections ──────────────────────────────────────────── */
|
||
.sec{margin-bottom:56px}
|
||
.sec+.sec{border-top:2px dashed #C8C4BE;padding-top:48px}
|
||
.sec-h{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:1.2px;color:#666;margin-bottom:20px;display:flex;align-items:center;gap:10px}
|
||
.sec-h::after{content:'';flex:1;height:1px;background:#D8D4CE}
|
||
.sec-num{background:#012851;color:#fff;font-size:9px;font-weight:900;padding:2px 7px;border-radius:10px}
|
||
.sec-intro{font-size:12.5px;color:#555;line-height:1.65;max-width:760px;margin-bottom:24px}
|
||
.sec-sub{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:#888;margin:24px 0 12px;padding-bottom:6px;border-bottom:1px solid #D8D4CE}
|
||
|
||
/* ── Grid layouts ──────────────────────────────────────── */
|
||
.sg{display:grid;gap:16px;align-items:start}
|
||
.sg-2{grid-template-columns:1fr 1fr}
|
||
.sg-3{grid-template-columns:repeat(3,1fr)}
|
||
.sg-vp{grid-template-columns:auto auto 1fr;align-items:flex-start}
|
||
.sb{display:flex;flex-direction:column;gap:8px}
|
||
.sl{font-size:9px;font-weight:800;color:#888;text-transform:uppercase;letter-spacing:1.5px;display:flex;align-items:center;gap:6px}
|
||
.sl-vp{background:#012851;color:#fff;padding:3px 8px;border-radius:3px;align-self:flex-start;font-size:8.5px}
|
||
.sc{font-size:10.5px;color:#666;margin-top:6px;font-style:italic;line-height:1.55}
|
||
|
||
/* ── State/content row ─────────────────────────────────── */
|
||
.state-block{background:#fff;border:1px solid #DDD8CE;border-radius:10px;padding:22px;margin-bottom:20px}
|
||
.state-hdr{display:flex;align-items:baseline;gap:12px;margin-bottom:4px}
|
||
.state-num{background:#012851;color:#fff;font-size:9px;font-weight:900;padding:3px 7px;border-radius:10px;flex-shrink:0}
|
||
.state-title{font-size:14px;font-weight:800;color:#012851}
|
||
.state-desc{font-size:11.5px;color:#555;line-height:1.6;margin-bottom:18px}
|
||
.state-vps{display:grid;gap:20px;grid-template-columns:min-content min-content 1fr;align-items:flex-start}
|
||
.state-vp-col{display:flex;flex-direction:column;gap:6px;align-items:center}
|
||
.vp-tag{font-size:8px;font-weight:800;text-transform:uppercase;letter-spacing:1.2px;color:#fff;background:#012851;padding:3px 8px;border-radius:3px}
|
||
.vp-tag.dark{background:#000}
|
||
.vp-dim{font-size:8px;color:#888;font-family:monospace;margin-top:-2px}
|
||
|
||
/* ════════════════════════════════════════════════════════
|
||
BROWSER CHROME FRAMES
|
||
All mockup content scales proportionally inside these.
|
||
Widths = ~55% of real viewport pixels, so a 320px mobile
|
||
renders at 176px, 768 at 422, 1440 at 792.
|
||
═══════════════════════════════════════════════════════════ */
|
||
.wf{background:#fff;border:2px solid #B8B4AE;border-radius:10px;overflow:hidden;box-shadow:0 4px 18px rgba(0,0,0,.08)}
|
||
.wf-bar{height:22px;background:#E8E4DF;border-bottom:1px solid #C8C4BE;display:flex;align-items:center;padding:0 8px;gap:4px}
|
||
.dot{width:6px;height:6px;border-radius:50%;background:#C8C4BE}
|
||
.dot.r{background:#F87171}.dot.y{background:#FCD34D}.dot.g{background:#4ADE80}
|
||
.urlbar{flex:1;height:10px;background:#D8D4CE;border-radius:3px;margin-left:6px;display:flex;align-items:center;padding:0 5px}
|
||
.urlbar span{font-size:7px;color:#888;font-family:monospace}
|
||
.wf.dark{background:#010e1e;border-color:#0d3358}
|
||
.wf.dark .wf-bar{background:#0d2240;border-bottom-color:#081a30}
|
||
.wf.dark .urlbar{background:#012851}
|
||
.wf.dark .urlbar span{color:#7a8a9a}
|
||
|
||
/* Mobile chrome */
|
||
.wf-m{width:176px;border-radius:14px}
|
||
.wf-m .wf-bar{display:none}
|
||
.wf-m-status{height:13px;background:#012851;display:flex;align-items:center;justify-content:space-between;padding:0 10px;border-top-left-radius:12px;border-top-right-radius:12px}
|
||
.wf-m-status span{font-size:6px;color:#fff;font-weight:700;letter-spacing:.3px}
|
||
.wf-m-status .dots{display:flex;gap:2px}
|
||
.wf-m-status .dots i{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.6)}
|
||
.wf.dark.wf-m .wf-m-status{background:#001020}
|
||
|
||
/* Tablet & desktop chrome widths */
|
||
.wf-t{width:422px}
|
||
.wf-d{width:650px}
|
||
@media (min-width:1280px){.wf-d{width:720px}}
|
||
|
||
/* ════════════════════════════════════════════════════════
|
||
CHRONIK PAGE CONTENT (scaled ~55% of real)
|
||
Real → scaled: 16px→9px, 14px→8px, 72px→40px, 44px→24px
|
||
Colors are LIGHT MODE tokens from layout.css unless .dark
|
||
═══════════════════════════════════════════════════════════ */
|
||
.ch{background:#f0efe9;font-family:'Helvetica Neue',Arial,sans-serif;padding:0;color:#012851}
|
||
.ch.dark{background:#010e1e;color:#f0efe9}
|
||
|
||
/* Global app header bar (just the top strip — not the full nav) */
|
||
.ch-gh{height:18px;background:#012851;display:flex;align-items:center;padding:0 10px;gap:8px;border-bottom:1px solid #a1dcd8}
|
||
.ch-gh-logo{font-size:6px;font-weight:900;color:#fff;letter-spacing:.12em;text-transform:uppercase}
|
||
.ch-gh-nav{display:flex;gap:8px;margin-left:auto}
|
||
.ch-gh-nav span{font-size:5.5px;font-weight:600;color:rgba(255,255,255,.55);letter-spacing:.04em}
|
||
.ch-gh-nav span.on{color:#fff;border-bottom:1px solid #a1dcd8;padding-bottom:1px}
|
||
.ch-gh-bell{width:8px;height:8px;margin-left:4px;position:relative}
|
||
.ch-gh-bell::after{content:'';position:absolute;top:-1px;right:-1px;width:4px;height:4px;background:#a1dcd8;border-radius:50%}
|
||
|
||
/* Page container */
|
||
.ch-wrap{padding:12px 10px 16px;max-width:100%}
|
||
.wf-t .ch-wrap{padding:16px 22px 20px}
|
||
.wf-d .ch-wrap{padding:20px 48px 24px}
|
||
|
||
/* Back link */
|
||
.ch-back{font-size:5.5px;font-weight:800;text-transform:uppercase;letter-spacing:1.2px;color:#6b7280;margin-bottom:8px;display:flex;align-items:center;gap:3px}
|
||
.ch.dark .ch-back{color:#8b97a5}
|
||
|
||
/* Page header: title + action */
|
||
.ch-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;gap:8px}
|
||
.ch-title{font-family:Georgia,'Tinos',serif;font-size:15px;font-weight:500;color:#012851;letter-spacing:-.3px}
|
||
.ch.dark .ch-title{color:#f0efe9}
|
||
.ch-action{font-size:6.5px;font-weight:600;color:#4b5563;padding:3px 6px;border-radius:3px}
|
||
.ch.dark .ch-action{color:#9ca3af}
|
||
.wf-t .ch-action{font-size:8px}
|
||
.wf-d .ch-action{font-size:9px;padding:5px 8px}
|
||
.wf-t .ch-title{font-size:20px}
|
||
.wf-d .ch-title{font-size:24px}
|
||
.wf-t .ch-back{font-size:7px;margin-bottom:10px}
|
||
.wf-d .ch-back{font-size:8px;margin-bottom:14px}
|
||
|
||
/* ── FÜR DICH box ──────────────────────────────────────── */
|
||
.ch-fy{background:#fff;border:1px solid #e4e2d7;border-radius:4px;padding:10px 10px 8px;margin-bottom:12px;box-shadow:0 1px 0 rgba(0,0,0,.02)}
|
||
.ch.dark .ch-fy{background:#011526;border-color:#0d3358}
|
||
.wf-t .ch-fy{padding:14px 16px 12px;margin-bottom:16px}
|
||
.wf-d .ch-fy{padding:18px 22px 14px;margin-bottom:20px}
|
||
.ch-fy-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
|
||
.ch-fy-caption{font-size:6px;font-weight:800;text-transform:uppercase;letter-spacing:1.3px;color:#6b7280}
|
||
.ch.dark .ch-fy-caption{color:#8b97a5}
|
||
.wf-t .ch-fy-caption{font-size:8px}
|
||
.wf-d .ch-fy-caption{font-size:9px;letter-spacing:1.5px}
|
||
.ch-fy-count{font-size:5.5px;font-weight:800;background:#012851;color:#fff;padding:2px 5px;border-radius:8px}
|
||
.ch.dark .ch-fy-count{background:#a1dcd8;color:#012851}
|
||
.wf-t .ch-fy-count{font-size:7.5px;padding:2px 7px}
|
||
.wf-d .ch-fy-count{font-size:9px;padding:3px 9px}
|
||
|
||
/* Für dich row */
|
||
.ch-fy-row{display:flex;align-items:flex-start;gap:5px;padding:5px 0;border-top:1px solid #f1ede3;position:relative}
|
||
.ch.dark .ch-fy-row{border-top-color:#092843}
|
||
.ch-fy-row:first-of-type{border-top:none}
|
||
.wf-t .ch-fy-row{gap:8px;padding:8px 0}
|
||
.wf-d .ch-fy-row{gap:10px;padding:10px 0}
|
||
.ch-fy-dot{width:4px;height:4px;border-radius:50%;background:#00c7b1;flex-shrink:0;margin-top:4px}
|
||
.wf-t .ch-fy-dot{width:5px;height:5px;margin-top:6px}
|
||
.wf-d .ch-fy-dot{width:6px;height:6px;margin-top:8px}
|
||
.ch-fy-ic{width:8px;height:8px;flex-shrink:0;color:#6b7280;margin-top:2px;font-size:7px;display:flex;align-items:center;justify-content:center;font-weight:800}
|
||
.ch.dark .ch-fy-ic{color:#8b97a5}
|
||
.wf-t .ch-fy-ic{width:11px;height:11px;font-size:9px}
|
||
.wf-d .ch-fy-ic{width:13px;height:13px;font-size:11px}
|
||
.ch-fy-body{flex:1;min-width:0}
|
||
.ch-fy-t1{font-size:7px;color:#012851;line-height:1.4}
|
||
.ch.dark .ch-fy-t1{color:#f0efe9}
|
||
.ch-fy-t1 b{font-weight:700}
|
||
.wf-t .ch-fy-t1{font-size:9px}
|
||
.wf-d .ch-fy-t1{font-size:10.5px}
|
||
.ch-fy-prev{font-size:6px;color:#4b5563;font-style:italic;line-height:1.5;margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
||
.ch.dark .ch-fy-prev{color:#9ca3af}
|
||
.wf-t .ch-fy-prev{font-size:8px}
|
||
.wf-d .ch-fy-prev{font-size:9.5px;white-space:normal}
|
||
.ch-fy-time{font-size:5.5px;color:#6b7280;flex-shrink:0;margin-top:2px}
|
||
.ch.dark .ch-fy-time{color:#8b97a5}
|
||
.wf-t .ch-fy-time{font-size:7.5px}
|
||
.wf-d .ch-fy-time{font-size:8.5px}
|
||
.ch-fy-dismiss{width:10px;height:10px;border-radius:3px;border:1px solid #e4e2d7;flex-shrink:0;color:#6b7280;font-size:6px;display:flex;align-items:center;justify-content:center;margin-top:1px}
|
||
.ch.dark .ch-fy-dismiss{border-color:#0d3358;color:#8b97a5}
|
||
.wf-t .ch-fy-dismiss{width:13px;height:13px;font-size:8px}
|
||
.wf-d .ch-fy-dismiss{width:15px;height:15px;font-size:9px}
|
||
|
||
/* Für dich empty/reassurance state */
|
||
.ch-fy-empty{padding:10px 4px;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
|
||
.wf-t .ch-fy-empty{padding:14px 10px;gap:6px}
|
||
.wf-d .ch-fy-empty{padding:18px 14px;gap:8px}
|
||
.ch-fy-empty-ic{width:14px;height:14px;color:#a1dcd8;font-size:12px;display:flex;align-items:center;justify-content:center}
|
||
.ch.dark .ch-fy-empty-ic{color:#00c7b1}
|
||
.wf-t .ch-fy-empty-ic{width:18px;height:18px;font-size:16px}
|
||
.wf-d .ch-fy-empty-ic{width:22px;height:22px;font-size:18px}
|
||
.ch-fy-empty-t{font-size:6.5px;color:#012851;font-weight:600}
|
||
.ch.dark .ch-fy-empty-t{color:#f0efe9}
|
||
.wf-t .ch-fy-empty-t{font-size:9px}
|
||
.wf-d .ch-fy-empty-t{font-size:10.5px}
|
||
.ch-fy-empty-link{font-size:6px;color:#012851;text-decoration:underline;text-decoration-color:#a1dcd8;text-underline-offset:2px}
|
||
.ch.dark .ch-fy-empty-link{color:#a1dcd8;text-decoration-color:#00c7b1}
|
||
.wf-t .ch-fy-empty-link{font-size:8px}
|
||
.wf-d .ch-fy-empty-link{font-size:9.5px}
|
||
|
||
/* ── Filter pills ──────────────────────────────────────── */
|
||
.ch-fp{display:flex;flex-wrap:wrap;gap:3px;margin-bottom:12px}
|
||
.wf-t .ch-fp{gap:5px;margin-bottom:16px}
|
||
.wf-d .ch-fp{gap:6px;margin-bottom:20px}
|
||
.ch-pill{font-size:6px;font-weight:600;padding:3px 7px;border-radius:99px;background:#f5f4ef;color:#012851}
|
||
.ch.dark .ch-pill{background:#011a30;color:#f0efe9}
|
||
.ch-pill.on{background:#012851;color:#fff}
|
||
.ch.dark .ch-pill.on{background:#a1dcd8;color:#012851}
|
||
.wf-t .ch-pill{font-size:8px;padding:5px 10px}
|
||
.wf-d .ch-pill{font-size:9.5px;padding:6px 12px}
|
||
|
||
/* ── Day headers ───────────────────────────────────────── */
|
||
.ch-dh{display:flex;align-items:center;gap:7px;margin:10px 0 4px}
|
||
.wf-t .ch-dh{margin:14px 0 6px}
|
||
.wf-d .ch-dh{margin:18px 0 8px}
|
||
.ch-dh-t{font-size:5.5px;font-weight:800;text-transform:uppercase;letter-spacing:1.5px;color:#6b7280}
|
||
.ch.dark .ch-dh-t{color:#8b97a5}
|
||
.wf-t .ch-dh-t{font-size:7.5px}
|
||
.wf-d .ch-dh-t{font-size:9px}
|
||
.ch-dh::after{content:'';flex:1;height:1px;background:#e4e2d7}
|
||
.ch.dark .ch-dh::after{background:#0d3358}
|
||
|
||
/* ── Timeline rows ─────────────────────────────────────── */
|
||
.ch-tl{display:flex;flex-direction:column}
|
||
.ch-row{display:flex;align-items:flex-start;gap:6px;padding:7px 0;border-bottom:1px solid #f1ede3;position:relative}
|
||
.ch.dark .ch-row{border-bottom-color:#092843}
|
||
.ch-row:last-child{border-bottom:none}
|
||
.wf-t .ch-row{gap:9px;padding:10px 0}
|
||
.wf-d .ch-row{gap:12px;padding:12px 0}
|
||
|
||
/* For-you lane accent */
|
||
.ch-row.mine{background:rgba(161,220,216,.12);border-left:2px solid #a1dcd8;padding-left:5px;margin-left:-5px;border-radius:2px}
|
||
.ch.dark .ch-row.mine{background:rgba(0,199,177,.12);border-left-color:#00c7b1}
|
||
.wf-t .ch-row.mine{padding-left:8px;margin-left:-8px}
|
||
.wf-d .ch-row.mine{padding-left:10px;margin-left:-10px;border-left-width:3px}
|
||
|
||
.ch-av{width:14px;height:14px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:5px;font-weight:800;color:#fff;margin-top:1px}
|
||
.wf-t .ch-av{width:20px;height:20px;font-size:7px;margin-top:2px}
|
||
.wf-d .ch-av{width:24px;height:24px;font-size:8.5px;margin-top:2px}
|
||
.av-anna{background:#a0522d}
|
||
.av-papa{background:#3060b0}
|
||
.av-oma{background:#7a4f9a}
|
||
.av-mama{background:#c0446e}
|
||
.av-felix{background:#5a8a6a}
|
||
.av-unknown{background:#9ca3af}
|
||
|
||
.ch-body{flex:1;min-width:0}
|
||
.ch-row-t1{font-size:7px;color:#012851;line-height:1.4}
|
||
.ch.dark .ch-row-t1{color:#f0efe9}
|
||
.ch-row-t1 b{font-weight:700}
|
||
.ch-row-t1 a{text-decoration:underline;text-decoration-color:#a1dcd8;text-underline-offset:1px}
|
||
.ch.dark .ch-row-t1 a{text-decoration-color:#00c7b1}
|
||
.wf-t .ch-row-t1{font-size:9.5px}
|
||
.wf-d .ch-row-t1{font-size:11px}
|
||
.ch-row-t2{font-size:6px;color:#4b5563;font-style:italic;line-height:1.5;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
||
.ch.dark .ch-row-t2{color:#9ca3af}
|
||
.wf-t .ch-row-t2{font-size:8px}
|
||
.wf-d .ch-row-t2{font-size:10px;white-space:normal;max-width:520px}
|
||
.ch-row-badge{display:inline-block;background:#012851;color:#fff;font-size:5px;font-weight:800;padding:0 3px;border-radius:2px;margin-right:2px;letter-spacing:.3px}
|
||
.ch.dark .ch-row-badge{background:#a1dcd8;color:#012851}
|
||
.wf-t .ch-row-badge{font-size:7px;padding:1px 4px}
|
||
.wf-d .ch-row-badge{font-size:8.5px;padding:1px 5px}
|
||
.ch-time{font-size:5.5px;color:#6b7280;flex-shrink:0;margin-top:2px;text-align:right;min-width:20px}
|
||
.ch.dark .ch-time{color:#8b97a5}
|
||
.wf-t .ch-time{font-size:7.5px;min-width:30px}
|
||
.wf-d .ch-time{font-size:9px;min-width:40px}
|
||
|
||
/* For-you icon marker */
|
||
.ch-mk{flex-shrink:0;width:10px;height:10px;background:rgba(161,220,216,.35);color:#012851;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:6px;font-weight:800;margin-top:2px}
|
||
.ch.dark .ch-mk{background:rgba(0,199,177,.25);color:#a1dcd8}
|
||
.wf-t .ch-mk{width:14px;height:14px;font-size:8px}
|
||
.wf-d .ch-mk{width:16px;height:16px;font-size:10px}
|
||
|
||
/* Load more */
|
||
.ch-loadmore{text-align:center;margin-top:10px;padding:5px;border:1px solid #e4e2d7;border-radius:3px;font-size:6.5px;font-weight:600;color:#4b5563}
|
||
.ch.dark .ch-loadmore{border-color:#0d3358;color:#9ca3af}
|
||
.wf-t .ch-loadmore{margin-top:14px;padding:8px;font-size:9px}
|
||
.wf-d .ch-loadmore{margin-top:18px;padding:11px;font-size:10.5px}
|
||
|
||
/* Skeleton */
|
||
.sk{background:linear-gradient(90deg,#f5f4ef 0%,#eceae4 50%,#f5f4ef 100%);border-radius:2px;animation:shimmer 1.4s infinite}
|
||
.ch.dark .sk{background:linear-gradient(90deg,#011a30 0%,#011526 50%,#011a30 100%)}
|
||
@keyframes shimmer{0%{background-position:-200px 0}100%{background-position:200px 0}}
|
||
.sk-line{height:5px;margin-bottom:3px}
|
||
.wf-t .sk-line{height:7px;margin-bottom:5px}
|
||
.wf-d .sk-line{height:9px;margin-bottom:6px}
|
||
|
||
/* Empty states */
|
||
.ch-empty{padding:30px 10px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px}
|
||
.wf-t .ch-empty{padding:50px 20px;gap:8px}
|
||
.wf-d .ch-empty{padding:70px 40px;gap:10px}
|
||
.ch-empty-ic{width:22px;height:22px;color:#a1dcd8;font-size:18px;display:flex;align-items:center;justify-content:center;opacity:.7}
|
||
.wf-t .ch-empty-ic{width:32px;height:32px;font-size:26px}
|
||
.wf-d .ch-empty-ic{width:44px;height:44px;font-size:36px}
|
||
.ch-empty-t{font-family:Georgia,serif;font-size:8px;color:#012851;font-weight:600;margin-top:4px}
|
||
.ch.dark .ch-empty-t{color:#f0efe9}
|
||
.wf-t .ch-empty-t{font-size:12px}
|
||
.wf-d .ch-empty-t{font-size:16px}
|
||
.ch-empty-b{font-size:6px;color:#4b5563;line-height:1.5;max-width:140px}
|
||
.ch.dark .ch-empty-b{color:#9ca3af}
|
||
.wf-t .ch-empty-b{font-size:8.5px;max-width:220px}
|
||
.wf-d .ch-empty-b{font-size:10px;max-width:320px}
|
||
.ch-empty-cta{margin-top:4px;background:#012851;color:#fff;font-size:6px;font-weight:700;padding:4px 9px;border-radius:3px}
|
||
.ch.dark .ch-empty-cta{background:#a1dcd8;color:#012851}
|
||
.wf-t .ch-empty-cta{font-size:8.5px;padding:6px 12px}
|
||
.wf-d .ch-empty-cta{font-size:10px;padding:8px 16px}
|
||
|
||
/* Error state */
|
||
.ch-err{background:#fdf4e3;border:1px solid #f0ddb3;border-radius:4px;padding:10px;display:flex;gap:6px;align-items:flex-start}
|
||
.ch.dark .ch-err{background:rgba(122,90,10,.15);border-color:rgba(122,90,10,.4)}
|
||
.wf-t .ch-err{padding:14px;gap:10px}
|
||
.wf-d .ch-err{padding:18px;gap:12px}
|
||
.ch-err-ic{font-size:10px;color:#b45309;flex-shrink:0}
|
||
.ch.dark .ch-err-ic{color:#e0c060}
|
||
.wf-t .ch-err-ic{font-size:14px}
|
||
.wf-d .ch-err-ic{font-size:18px}
|
||
.ch-err-body{flex:1}
|
||
.ch-err-t{font-size:7px;font-weight:700;color:#7a5a0a}
|
||
.ch.dark .ch-err-t{color:#e0c060}
|
||
.wf-t .ch-err-t{font-size:9.5px}
|
||
.wf-d .ch-err-t{font-size:11px}
|
||
.ch-err-b{font-size:6px;color:#7a5a0a;line-height:1.5;margin-top:2px;opacity:.85}
|
||
.ch.dark .ch-err-b{color:#e0c060}
|
||
.wf-t .ch-err-b{font-size:8px}
|
||
.wf-d .ch-err-b{font-size:9.5px}
|
||
.ch-err-btn{margin-top:5px;background:#b45309;color:#fff;font-size:5.5px;font-weight:700;padding:3px 6px;border-radius:2px;display:inline-block}
|
||
.wf-t .ch-err-btn{font-size:8px;padding:4px 8px;margin-top:7px}
|
||
.wf-d .ch-err-btn{font-size:9.5px;padding:6px 10px;margin-top:9px}
|
||
|
||
/* ── Annotation callouts ───────────────────────────────── */
|
||
.ann{border-radius:5px;padding:10px 14px;font-size:11px;line-height:1.65;margin-top:16px}
|
||
.ann-info{background:#EFF6FF;border:1px solid #BFDBFE;color:#1E3A5F}
|
||
.ann-warn{background:#FFF7ED;border:1px solid #FDBA74;color:#7C2D12}
|
||
.ann-ok{background:#F0FDF4;border:1px solid #86EFAC;color:#14532D}
|
||
.ann strong{font-weight:800}
|
||
.ann ul{padding-left:17px;display:flex;flex-direction:column;gap:3px;margin-top:5px}
|
||
.ann-pair{display:flex;gap:16px;margin-top:16px}
|
||
.ann-pair .ann{flex:1;margin-top:0}
|
||
|
||
/* ── Disclaimer ────────────────────────────────────────── */
|
||
.spec-disclaimer{background:#FFF8E1;border:1.5px solid #FFC107;border-radius:6px;padding:11px 16px;font-size:11px;color:#6D4C00;margin-bottom:28px;line-height:1.6}
|
||
.spec-disclaimer strong{font-weight:800}
|
||
|
||
/* ── impl-ref ──────────────────────────────────────────── */
|
||
.impl-ref{background:#0d1117;border-radius:7px;margin-top:16px;overflow:hidden;border:1px solid #30363d}
|
||
.impl-ref-hdr{background:#161b22;padding:8px 16px;font-size:9.5px;font-weight:800;color:#f0883e;border-bottom:1px solid #30363d;display:flex;align-items:center;gap:8px;letter-spacing:.4px;text-transform:uppercase}
|
||
.impl-ref-hdr::before{content:'⚙';font-size:12px}
|
||
.impl-ref-hdr span{color:rgba(240,136,62,.55);font-weight:400;margin-left:auto;font-size:9px;text-transform:none;letter-spacing:0}
|
||
.impl-ref table{width:100%;border-collapse:collapse;font-size:10px}
|
||
.impl-ref th{text-align:left;font-size:8px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:#8b949e;padding:7px 14px;border-bottom:1px solid #21262d}
|
||
.impl-ref td{padding:6px 14px;border-bottom:1px solid #161b22;vertical-align:top;line-height:1.5;color:#c9d1d9}
|
||
.impl-ref tr:last-child td{border-bottom:none}
|
||
.impl-ref td:first-child{color:#79c0ff;font-weight:700;white-space:nowrap;width:200px}
|
||
.impl-ref td code{font-family:'SFMono-Regular',Consolas,monospace;font-size:9.5px;background:#161b22;color:#a5d6ff;padding:1px 5px;border-radius:3px}
|
||
.impl-ref .ir-px{color:#7ee787;font-family:monospace;font-size:9.5px}
|
||
|
||
/* ── State labels ──────────────────────────────────────── */
|
||
.st{display:inline-block;font-size:7px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;border-radius:3px;padding:2px 6px;margin-bottom:4px}
|
||
.st-default{background:#E8E4DF;color:#555}
|
||
.st-hover{background:#DBEAFE;color:#1D4ED8}
|
||
.st-focus{background:#EDE9FE;color:#6D28D9}
|
||
.st-active{background:#DCFCE7;color:#166534}
|
||
.st-pressed{background:#FFE4E6;color:#9F1239}
|
||
.st-disabled{background:#F3F4F6;color:#6B7280}
|
||
|
||
/* ── TOC ───────────────────────────────────────────────── */
|
||
.toc{background:#fff;border:1px solid #DDD8CE;border-radius:8px;padding:20px 24px;margin-bottom:40px;columns:2;column-gap:32px}
|
||
.toc-t{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:1.2px;color:#555;margin-bottom:12px;column-span:all}
|
||
.toc ol{list-style:none;padding:0}
|
||
.toc li{font-size:11.5px;color:#333;padding:3px 0;display:flex;gap:8px;break-inside:avoid}
|
||
.toc li b{color:#012851;font-weight:700;min-width:24px}
|
||
.toc li span{color:#888;margin-left:auto;font-size:10px;font-family:monospace}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="doc">
|
||
|
||
<!-- ══════════════════════════════════════════════════════
|
||
MASTHEAD
|
||
════════════════════════════════════════════════════════ -->
|
||
<header class="mast">
|
||
<div class="mast-top">
|
||
<div>
|
||
<h1>Chronik — Unified Activity + Notifications</h1>
|
||
<p>Replaces <code style="background:rgba(255,255,255,.1);padding:1px 5px;border-radius:2px;font-family:monospace">/notifications</code>. 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.</p>
|
||
</div>
|
||
<div class="mast-badge">FINAL</div>
|
||
</div>
|
||
<div class="decisions">
|
||
<div class="dec"><div class="dec-label">Route / Title</div><div class="dec-value">/chronik · Chronik</div></div>
|
||
<div class="dec"><div class="dec-label">Layout</div><div class="dec-value">Stacked, single column · max-w-3xl</div></div>
|
||
<div class="dec"><div class="dec-label">Activity kinds shown</div><div class="dec-value">6 of 8 (no STATUS / METADATA)</div></div>
|
||
<div class="dec"><div class="dec-label">Rollup window</div><div class="dec-value">2 h, same actor + document</div></div>
|
||
</div>
|
||
</header>
|
||
|
||
<div class="spec-disclaimer">
|
||
<strong>Reading this spec.</strong> Mockups are scaled to ~55 % of real pixel values so that multiple viewports fit on one page. <strong>Never copy pixel sizes from the mockups</strong> — always use the <code>impl-ref</code> tables, which list the real Tailwind class + pixel value.
|
||
</div>
|
||
|
||
<!-- ══════════════════════════════════════════════════════
|
||
TABLE OF CONTENTS
|
||
════════════════════════════════════════════════════════ -->
|
||
<div class="toc">
|
||
<div class="toc-t">Inhalt</div>
|
||
<ol>
|
||
<li><b>01</b> Page anatomy <span>default @ 1440px</span></li>
|
||
<li><b>02</b> Content states × 3 viewports <span>11 states · 33 frames</span></li>
|
||
<li><b>03</b> Dark mode parity <span>3 key states</span></li>
|
||
<li><b>04</b> Row anatomy close-ups <span>4 row types</span></li>
|
||
<li><b>05</b> Interaction states <span>pills · rows · buttons</span></li>
|
||
<li><b>06</b> Accessibility contract <span>WCAG AA/AAA</span></li>
|
||
<li><b>07</b> Implementation notes <span>data · routing · rollup</span></li>
|
||
</ol>
|
||
</div>
|
||
|
||
<!-- ══════════════════════════════════════════════════════
|
||
SECTION 1 — PAGE ANATOMY
|
||
════════════════════════════════════════════════════════ -->
|
||
<section class="sec">
|
||
<h2 class="sec-h"><span class="sec-num">01</span>Page Anatomy — Default State at 1440 px</h2>
|
||
<p class="sec-intro">
|
||
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.
|
||
</p>
|
||
|
||
<div style="display:grid;grid-template-columns:1fr 280px;gap:32px;align-items:flex-start">
|
||
<div>
|
||
<div class="wf wf-d">
|
||
<div class="wf-bar"><span class="dot r"></span><span class="dot y"></span><span class="dot g"></span><div class="urlbar"><span>familienarchiv.de/chronik</span></div></div>
|
||
<div class="ch">
|
||
<!-- Global app header (abbreviated) -->
|
||
<div class="ch-gh">
|
||
<div class="ch-gh-logo">Familienarchiv</div>
|
||
<div class="ch-gh-nav">
|
||
<span>Dokumente</span><span>Personen</span><span>Briefwechsel</span><span class="on">Chronik</span>
|
||
</div>
|
||
<div class="ch-gh-bell"></div>
|
||
</div>
|
||
<div class="ch-wrap">
|
||
<div class="ch-back">← Zurück zur Übersicht</div>
|
||
<div class="ch-hdr">
|
||
<div class="ch-title">Chronik</div>
|
||
<div class="ch-action">Alle gelesen</div>
|
||
</div>
|
||
<div class="ch-fy">
|
||
<div class="ch-fy-hdr">
|
||
<div class="ch-fy-caption">Für dich</div>
|
||
<div class="ch-fy-count">3 neu</div>
|
||
</div>
|
||
<div class="ch-fy-row">
|
||
<div class="ch-fy-dot"></div><div class="ch-fy-ic">@</div>
|
||
<div class="ch-fy-body">
|
||
<div class="ch-fy-t1"><b>Mama</b> hat dich in <b>Brief Nr. 42</b> erwähnt</div>
|
||
<div class="ch-fy-prev">"schau mal, das ist Omas Handschrift von 1952"</div>
|
||
</div>
|
||
<div class="ch-fy-time">14:32</div>
|
||
<div class="ch-fy-dismiss">✓</div>
|
||
</div>
|
||
<div class="ch-fy-row">
|
||
<div class="ch-fy-dot"></div><div class="ch-fy-ic">@</div>
|
||
<div class="ch-fy-body">
|
||
<div class="ch-fy-t1"><b>Oma</b> hat dich in <b>Brief Nr. 39</b> erwähnt</div>
|
||
<div class="ch-fy-prev">"Marcel, weißt du noch den Hund auf dem Foto?"</div>
|
||
</div>
|
||
<div class="ch-fy-time">11:05</div>
|
||
<div class="ch-fy-dismiss">✓</div>
|
||
</div>
|
||
<div class="ch-fy-row">
|
||
<div class="ch-fy-dot"></div><div class="ch-fy-ic">↩</div>
|
||
<div class="ch-fy-body">
|
||
<div class="ch-fy-t1"><b>Anna</b> hat auf deinen Kommentar in <b>Brief Nr. 41</b> geantwortet</div>
|
||
<div class="ch-fy-prev">"ja genau, das war 1947 in Hamburg"</div>
|
||
</div>
|
||
<div class="ch-fy-time">Gestern</div>
|
||
<div class="ch-fy-dismiss">✓</div>
|
||
</div>
|
||
</div>
|
||
<div class="ch-fp">
|
||
<div class="ch-pill on">Alle</div>
|
||
<div class="ch-pill">Für dich</div>
|
||
<div class="ch-pill">Hochgeladen</div>
|
||
<div class="ch-pill">Transkription</div>
|
||
<div class="ch-pill">Kommentare</div>
|
||
</div>
|
||
<div class="ch-dh"><div class="ch-dh-t">Heute</div></div>
|
||
<div class="ch-tl">
|
||
<div class="ch-row">
|
||
<div class="ch-av av-anna">AR</div>
|
||
<div class="ch-body">
|
||
<div class="ch-row-t1"><b>Anna</b> transkribierte <span class="ch-row-badge">20 Blöcke</span> in <a>Brief Nr. 42 · Hamburg 1947</a></div>
|
||
</div>
|
||
<div class="ch-time">14:02–14:32</div>
|
||
</div>
|
||
<div class="ch-row">
|
||
<div class="ch-av av-papa">PR</div>
|
||
<div class="ch-body">
|
||
<div class="ch-row-t1"><b>Papa</b> lud <span class="ch-row-badge">3 Dokumente</span> hoch</div>
|
||
</div>
|
||
<div class="ch-time">11:08</div>
|
||
</div>
|
||
<div class="ch-row mine">
|
||
<div class="ch-mk">@</div>
|
||
<div class="ch-av av-mama">MR</div>
|
||
<div class="ch-body">
|
||
<div class="ch-row-t1"><b>Mama</b> erwähnte dich in <a>Brief Nr. 42</a></div>
|
||
<div class="ch-row-t2">"schau mal, das ist Omas Handschrift von 1952"</div>
|
||
</div>
|
||
<div class="ch-time">14:32</div>
|
||
</div>
|
||
</div>
|
||
<div class="ch-dh"><div class="ch-dh-t">Gestern</div></div>
|
||
<div class="ch-tl">
|
||
<div class="ch-row">
|
||
<div class="ch-av av-oma">OR</div>
|
||
<div class="ch-body">
|
||
<div class="ch-row-t1"><b>Oma</b> kommentierte <a>Brief Nr. 39 · München 1952</a></div>
|
||
<div class="ch-row-t2">"das war bei der Hochzeit von Onkel Heinrich, der hatte einen Dackel namens Bello"</div>
|
||
</div>
|
||
<div class="ch-time">18:47</div>
|
||
</div>
|
||
<div class="ch-row">
|
||
<div class="ch-av av-felix">FB</div>
|
||
<div class="ch-body">
|
||
<div class="ch-row-t1"><b>Felix</b> hat <span class="ch-row-badge">5 Blöcke</span> in <a>Brief Nr. 38</a> überprüft</div>
|
||
</div>
|
||
<div class="ch-time">15:12</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Callouts -->
|
||
<div style="display:flex;flex-direction:column;gap:10px;padding-top:18px">
|
||
<div style="background:#fff;border:1px solid #DDD8CE;border-radius:6px;padding:12px 14px">
|
||
<div style="font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:#012851;margin-bottom:4px">A Page header</div>
|
||
<div style="font-size:10.5px;color:#444;line-height:1.55">Title "Chronik" in serif (Tinos) · "Alle gelesen" action shown only when unread count > 0.</div>
|
||
</div>
|
||
<div style="background:#fff;border:1px solid #DDD8CE;border-radius:6px;padding:12px 14px">
|
||
<div style="font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:#012851;margin-bottom:4px">B Für dich box</div>
|
||
<div style="font-size:10.5px;color:#444;line-height:1.55">Unread mentions/replies only. Max height before scroll: 60 vh. Collapses to empty-state card when count = 0.</div>
|
||
</div>
|
||
<div style="background:#fff;border:1px solid #DDD8CE;border-radius:6px;padding:12px 14px">
|
||
<div style="font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:#012851;margin-bottom:4px">C Filter pills</div>
|
||
<div style="font-size:10.5px;color:#444;line-height:1.55">Radio-group semantics. Five pills, one active at a time. "Für dich" filter is the history view for read+unread mentions.</div>
|
||
</div>
|
||
<div style="background:#fff;border:1px solid #DDD8CE;border-radius:6px;padding:12px 14px">
|
||
<div style="font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:#012851;margin-bottom:4px">D Day header</div>
|
||
<div style="font-size:10.5px;color:#444;line-height:1.55">Heute / Gestern / Diese Woche / Älter. Rendered as an uppercase eyebrow with a thin trailing rule.</div>
|
||
</div>
|
||
<div style="background:#fff;border:1px solid #DDD8CE;border-radius:6px;padding:12px 14px">
|
||
<div style="font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:#012851;margin-bottom:4px">E Timeline row</div>
|
||
<div style="font-size:10.5px;color:#444;line-height:1.55">Avatar · actor + verb · optional preview · right-aligned time. ~72 px tall. Rollup shown as a bold count badge.</div>
|
||
</div>
|
||
<div style="background:#fff;border:1px solid #DDD8CE;border-radius:6px;padding:12px 14px">
|
||
<div style="font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:#012851;margin-bottom:4px">F For-you lane</div>
|
||
<div style="font-size:10.5px;color:#444;line-height:1.55">Read mentions surfaced in the timeline with an accent left border, @ marker, and tinted background — so they remain visually discoverable.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="impl-ref">
|
||
<div class="impl-ref-hdr">Implementation Reference — Page Shell<span>Tailwind 4 · tokens from layout.css</span></div>
|
||
<table>
|
||
<thead><tr><th>Element</th><th>Classes</th><th>Real</th><th>Note</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>Page container</td><td><code>mx-auto max-w-3xl px-4 py-8 sm:px-6 lg:px-8</code></td><td class="ir-px">max 48rem</td><td>Same pattern as /dokumente</td></tr>
|
||
<tr><td>Back link</td><td><code>inline-flex items-center gap-2 text-xs font-bold uppercase tracking-widest text-ink-3 hover:text-ink mb-4</code></td><td class="ir-px">12px / 700</td><td>Arrow translates on hover</td></tr>
|
||
<tr><td>Page title</td><td><code>font-serif text-2xl font-medium text-ink</code></td><td class="ir-px">24px / 500</td><td>Tinos serif</td></tr>
|
||
<tr><td>"Alle gelesen" action</td><td><code>text-sm font-medium text-ink-2 hover:text-ink min-h-[44px] min-w-[44px] px-3</code></td><td class="ir-px">14px / 500</td><td>44×44 touch target</td></tr>
|
||
<tr><td>Card container (shared)</td><td><code>bg-surface border border-line rounded-sm p-5</code></td><td class="ir-px">padding 20px</td><td>Für dich, empty, error</td></tr>
|
||
<tr><td>Section eyebrow</td><td><code>text-xs font-bold uppercase tracking-widest text-ink-3</code></td><td class="ir-px">12px / 700 / 0.1em</td><td>Für dich header, day header</td></tr>
|
||
<tr><td>Unread count badge</td><td><code>inline-flex h-5 min-w-5 items-center justify-center rounded-full bg-primary text-primary-fg px-1 text-xs font-bold</code></td><td class="ir-px">20px min</td><td>aria-live polite</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ══════════════════════════════════════════════════════
|
||
SECTION 2 — CONTENT STATES × 3 VIEWPORTS
|
||
Each state rendered at 320 / 768 / 1440.
|
||
════════════════════════════════════════════════════════ -->
|
||
<section class="sec">
|
||
<h2 class="sec-h"><span class="sec-num">02</span>Content States × 3 Viewports</h2>
|
||
<p class="sec-intro">
|
||
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: <b>320 px</b> (mobile S) → <b>768 px</b> (tablet) → <b>1440 px</b> (desktop). Look for wrap behavior on filter pills at 320, and row-preview truncation on both mobile sizes.
|
||
</p>
|
||
|
||
<!-- ════════════════════════════════════════════════════
|
||
STATE 01 · DEFAULT (unreads + rich timeline)
|
||
═══════════════════════════════════════════════════════ -->
|
||
<div class="state-block">
|
||
<div class="state-hdr"><span class="state-num">01</span><span class="state-title">Default · Unreads + Rich Timeline</span></div>
|
||
<div class="state-desc">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.</div>
|
||
<div class="state-vps">
|
||
<!-- 320 -->
|
||
<div class="state-vp-col">
|
||
<span class="vp-tag">320 px · Mobile</span>
|
||
<span class="vp-dim">176 px @ 55%</span>
|
||
<div class="wf wf-m">
|
||
<div class="wf-m-status"><span>9:41</span><div class="dots"><i></i><i></i><i></i></div></div>
|
||
<div class="ch">
|
||
<div class="ch-gh"><div class="ch-gh-logo">FA</div><div class="ch-gh-nav"><span class="on">Chronik</span></div><div class="ch-gh-bell"></div></div>
|
||
<div class="ch-wrap">
|
||
<div class="ch-back">← Übersicht</div>
|
||
<div class="ch-hdr"><div class="ch-title" style="font-size:13px">Chronik</div><div class="ch-action">Alle gelesen</div></div>
|
||
<div class="ch-fy">
|
||
<div class="ch-fy-hdr"><div class="ch-fy-caption">Für dich</div><div class="ch-fy-count">3 neu</div></div>
|
||
<div class="ch-fy-row"><div class="ch-fy-dot"></div><div class="ch-fy-ic">@</div><div class="ch-fy-body"><div class="ch-fy-t1"><b>Mama</b> erwähnte dich</div><div class="ch-fy-prev">"schau mal, Omas Handschrift…"</div></div><div class="ch-fy-time">14:32</div></div>
|
||
<div class="ch-fy-row"><div class="ch-fy-dot"></div><div class="ch-fy-ic">@</div><div class="ch-fy-body"><div class="ch-fy-t1"><b>Oma</b> erwähnte dich</div><div class="ch-fy-prev">"Marcel, weißt du noch…"</div></div><div class="ch-fy-time">11:05</div></div>
|
||
<div class="ch-fy-row"><div class="ch-fy-dot"></div><div class="ch-fy-ic">↩</div><div class="ch-fy-body"><div class="ch-fy-t1"><b>Anna</b> antwortete</div><div class="ch-fy-prev">"ja genau, 1947 Hamburg"</div></div><div class="ch-fy-time">gest</div></div>
|
||
</div>
|
||
<div class="ch-fp">
|
||
<div class="ch-pill on">Alle</div><div class="ch-pill">Für dich</div><div class="ch-pill">Hochgeladen</div><div class="ch-pill">Transkription</div><div class="ch-pill">Kommentare</div>
|
||
</div>
|
||
<div class="ch-dh"><div class="ch-dh-t">Heute</div></div>
|
||
<div class="ch-row"><div class="ch-av av-anna">AR</div><div class="ch-body"><div class="ch-row-t1"><b>Anna</b> transkribierte <span class="ch-row-badge">20 Blöcke</span> in <a>Brief 42</a></div></div><div class="ch-time">14:02–14:32</div></div>
|
||
<div class="ch-row"><div class="ch-av av-papa">PR</div><div class="ch-body"><div class="ch-row-t1"><b>Papa</b> lud <span class="ch-row-badge">3 Dok.</span> hoch</div></div><div class="ch-time">11:08</div></div>
|
||
<div class="ch-row mine"><div class="ch-mk">@</div><div class="ch-av av-mama">MR</div><div class="ch-body"><div class="ch-row-t1"><b>Mama</b> erwähnte dich in <a>Brief 42</a></div><div class="ch-row-t2">"schau mal, das ist Omas…"</div></div><div class="ch-time">14:32</div></div>
|
||
<div class="ch-dh"><div class="ch-dh-t">Gestern</div></div>
|
||
<div class="ch-row"><div class="ch-av av-oma">OR</div><div class="ch-body"><div class="ch-row-t1"><b>Oma</b> kommentierte <a>Brief 39</a></div><div class="ch-row-t2">"das war bei der Hochzeit…"</div></div><div class="ch-time">18:47</div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 768 -->
|
||
<div class="state-vp-col">
|
||
<span class="vp-tag">768 px · Tablet</span>
|
||
<span class="vp-dim">422 px @ 55%</span>
|
||
<div class="wf wf-t">
|
||
<div class="wf-bar"><span class="dot r"></span><span class="dot y"></span><span class="dot g"></span><div class="urlbar"><span>familienarchiv.de/chronik</span></div></div>
|
||
<div class="ch">
|
||
<div class="ch-gh"><div class="ch-gh-logo">Familienarchiv</div><div class="ch-gh-nav"><span>Dokumente</span><span>Personen</span><span class="on">Chronik</span></div><div class="ch-gh-bell"></div></div>
|
||
<div class="ch-wrap">
|
||
<div class="ch-back">← Zurück zur Übersicht</div>
|
||
<div class="ch-hdr"><div class="ch-title">Chronik</div><div class="ch-action">Alle gelesen</div></div>
|
||
<div class="ch-fy">
|
||
<div class="ch-fy-hdr"><div class="ch-fy-caption">Für dich</div><div class="ch-fy-count">3 neu</div></div>
|
||
<div class="ch-fy-row"><div class="ch-fy-dot"></div><div class="ch-fy-ic">@</div><div class="ch-fy-body"><div class="ch-fy-t1"><b>Mama</b> hat dich in <b>Brief Nr. 42</b> erwähnt</div><div class="ch-fy-prev">"schau mal, das ist Omas Handschrift von 1952"</div></div><div class="ch-fy-time">14:32</div><div class="ch-fy-dismiss">✓</div></div>
|
||
<div class="ch-fy-row"><div class="ch-fy-dot"></div><div class="ch-fy-ic">@</div><div class="ch-fy-body"><div class="ch-fy-t1"><b>Oma</b> hat dich in <b>Brief Nr. 39</b> erwähnt</div><div class="ch-fy-prev">"Marcel, weißt du noch den Hund auf dem Foto?"</div></div><div class="ch-fy-time">11:05</div><div class="ch-fy-dismiss">✓</div></div>
|
||
<div class="ch-fy-row"><div class="ch-fy-dot"></div><div class="ch-fy-ic">↩</div><div class="ch-fy-body"><div class="ch-fy-t1"><b>Anna</b> hat auf deinen Kommentar in <b>Brief Nr. 41</b> geantwortet</div><div class="ch-fy-prev">"ja genau, das war 1947 in Hamburg"</div></div><div class="ch-fy-time">Gestern</div><div class="ch-fy-dismiss">✓</div></div>
|
||
</div>
|
||
<div class="ch-fp">
|
||
<div class="ch-pill on">Alle</div><div class="ch-pill">Für dich</div><div class="ch-pill">Hochgeladen</div><div class="ch-pill">Transkription</div><div class="ch-pill">Kommentare</div>
|
||
</div>
|
||
<div class="ch-dh"><div class="ch-dh-t">Heute</div></div>
|
||
<div class="ch-row"><div class="ch-av av-anna">AR</div><div class="ch-body"><div class="ch-row-t1"><b>Anna</b> transkribierte <span class="ch-row-badge">20 Blöcke</span> in <a>Brief Nr. 42 · Hamburg 1947</a></div></div><div class="ch-time">14:02–14:32</div></div>
|
||
<div class="ch-row"><div class="ch-av av-papa">PR</div><div class="ch-body"><div class="ch-row-t1"><b>Papa</b> lud <span class="ch-row-badge">3 Dokumente</span> hoch</div></div><div class="ch-time">11:08</div></div>
|
||
<div class="ch-row mine"><div class="ch-mk">@</div><div class="ch-av av-mama">MR</div><div class="ch-body"><div class="ch-row-t1"><b>Mama</b> erwähnte dich in <a>Brief Nr. 42</a></div><div class="ch-row-t2">"schau mal, das ist Omas Handschrift von 1952"</div></div><div class="ch-time">14:32</div></div>
|
||
<div class="ch-dh"><div class="ch-dh-t">Gestern</div></div>
|
||
<div class="ch-row"><div class="ch-av av-oma">OR</div><div class="ch-body"><div class="ch-row-t1"><b>Oma</b> kommentierte <a>Brief Nr. 39 · München 1952</a></div><div class="ch-row-t2">"das war bei der Hochzeit von Onkel Heinrich, der hatte einen Dackel namens Bello"</div></div><div class="ch-time">18:47</div></div>
|
||
<div class="ch-row"><div class="ch-av av-felix">FB</div><div class="ch-body"><div class="ch-row-t1"><b>Felix</b> hat <span class="ch-row-badge">5 Blöcke</span> in <a>Brief Nr. 38</a> überprüft</div></div><div class="ch-time">15:12</div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 1440 -->
|
||
<div class="state-vp-col">
|
||
<span class="vp-tag">1440 px · Desktop</span>
|
||
<span class="vp-dim">720 px @ 55% (col)</span>
|
||
<div class="wf wf-d">
|
||
<div class="wf-bar"><span class="dot r"></span><span class="dot y"></span><span class="dot g"></span><div class="urlbar"><span>familienarchiv.de/chronik</span></div></div>
|
||
<div class="ch">
|
||
<div class="ch-gh"><div class="ch-gh-logo">Familienarchiv</div><div class="ch-gh-nav"><span>Dokumente</span><span>Personen</span><span>Briefwechsel</span><span class="on">Chronik</span></div><div class="ch-gh-bell"></div></div>
|
||
<div class="ch-wrap">
|
||
<div class="ch-back">← Zurück zur Übersicht</div>
|
||
<div class="ch-hdr"><div class="ch-title">Chronik</div><div class="ch-action">Alle gelesen</div></div>
|
||
<div class="ch-fy">
|
||
<div class="ch-fy-hdr"><div class="ch-fy-caption">Für dich</div><div class="ch-fy-count">3 neu</div></div>
|
||
<div class="ch-fy-row"><div class="ch-fy-dot"></div><div class="ch-fy-ic">@</div><div class="ch-fy-body"><div class="ch-fy-t1"><b>Mama</b> hat dich in <b>Brief Nr. 42</b> erwähnt</div><div class="ch-fy-prev">"schau mal, das ist Omas Handschrift von 1952"</div></div><div class="ch-fy-time">14:32</div><div class="ch-fy-dismiss">✓</div></div>
|
||
<div class="ch-fy-row"><div class="ch-fy-dot"></div><div class="ch-fy-ic">@</div><div class="ch-fy-body"><div class="ch-fy-t1"><b>Oma</b> hat dich in <b>Brief Nr. 39</b> erwähnt</div><div class="ch-fy-prev">"Marcel, weißt du noch den Hund auf dem Foto?"</div></div><div class="ch-fy-time">11:05</div><div class="ch-fy-dismiss">✓</div></div>
|
||
<div class="ch-fy-row"><div class="ch-fy-dot"></div><div class="ch-fy-ic">↩</div><div class="ch-fy-body"><div class="ch-fy-t1"><b>Anna</b> hat auf deinen Kommentar in <b>Brief Nr. 41</b> geantwortet</div><div class="ch-fy-prev">"ja genau, das war 1947 in Hamburg"</div></div><div class="ch-fy-time">Gestern</div><div class="ch-fy-dismiss">✓</div></div>
|
||
</div>
|
||
<div class="ch-fp"><div class="ch-pill on">Alle</div><div class="ch-pill">Für dich</div><div class="ch-pill">Hochgeladen</div><div class="ch-pill">Transkription</div><div class="ch-pill">Kommentare</div></div>
|
||
<div class="ch-dh"><div class="ch-dh-t">Heute</div></div>
|
||
<div class="ch-row"><div class="ch-av av-anna">AR</div><div class="ch-body"><div class="ch-row-t1"><b>Anna</b> transkribierte <span class="ch-row-badge">20 Blöcke</span> in <a>Brief Nr. 42 · Hamburg 1947</a></div></div><div class="ch-time">14:02–14:32</div></div>
|
||
<div class="ch-row"><div class="ch-av av-papa">PR</div><div class="ch-body"><div class="ch-row-t1"><b>Papa</b> lud <span class="ch-row-badge">3 Dokumente</span> hoch</div></div><div class="ch-time">11:08</div></div>
|
||
<div class="ch-row mine"><div class="ch-mk">@</div><div class="ch-av av-mama">MR</div><div class="ch-body"><div class="ch-row-t1"><b>Mama</b> erwähnte dich in <a>Brief Nr. 42</a></div><div class="ch-row-t2">"schau mal, das ist Omas Handschrift von 1952"</div></div><div class="ch-time">14:32</div></div>
|
||
<div class="ch-dh"><div class="ch-dh-t">Gestern</div></div>
|
||
<div class="ch-row"><div class="ch-av av-oma">OR</div><div class="ch-body"><div class="ch-row-t1"><b>Oma</b> kommentierte <a>Brief Nr. 39 · München 1952</a></div><div class="ch-row-t2">"das war bei der Hochzeit von Onkel Heinrich, der hatte einen Dackel namens Bello"</div></div><div class="ch-time">18:47</div></div>
|
||
<div class="ch-row"><div class="ch-av av-felix">FB</div><div class="ch-body"><div class="ch-row-t1"><b>Felix</b> hat <span class="ch-row-badge">5 Blöcke</span> in <a>Brief Nr. 38</a> überprüft</div></div><div class="ch-time">15:12</div></div>
|
||
<div class="ch-row"><div class="ch-av av-anna">AR</div><div class="ch-body"><div class="ch-row-t1"><b>Anna</b> erstellte Annotation auf <a>Brief Nr. 37</a></div></div><div class="ch-time">10:24</div></div>
|
||
<div class="ch-dh"><div class="ch-dh-t">Diese Woche</div></div>
|
||
<div class="ch-row"><div class="ch-av av-papa">PR</div><div class="ch-body"><div class="ch-row-t1"><b>Papa</b> kommentierte <a>Brief Nr. 36</a></div><div class="ch-row-t2">"stimmt, das war kurz vor dem Umzug nach Köln"</div></div><div class="ch-time">Mo · 14:22</div></div>
|
||
<div class="ch-loadmore">Mehr laden</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="ann ann-info"><strong>Beobachtungen im Layout.</strong>
|
||
<ul>
|
||
<li>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 <code>overflow:hidden</code> auf diesem Row).</li>
|
||
<li>320 px: Für-Dich-Vorschau wird mit Ellipsis einzeilig abgeschnitten. Tap auf Zeile navigiert; Inhalt öffnet sich komplett auf der Zieldokument-Seite.</li>
|
||
<li>768 px & 1440 px: Vorschautexte erlauben Zeilenumbruch, max 2 Zeilen für Timeline-Rows.</li>
|
||
<li>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).</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ════════════════════════════════════════════════════
|
||
STATE 02 · FÜR DICH EMPTY (inbox zero)
|
||
═══════════════════════════════════════════════════════ -->
|
||
<div class="state-block">
|
||
<div class="state-hdr"><span class="state-num">02</span><span class="state-title">"Für dich" Empty · Inbox Zero + Activity Present</span></div>
|
||
<div class="state-desc">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.</div>
|
||
<div class="state-vps">
|
||
<div class="state-vp-col">
|
||
<span class="vp-tag">320 px · Mobile</span><span class="vp-dim">176 px @ 55%</span>
|
||
<div class="wf wf-m">
|
||
<div class="wf-m-status"><span>9:41</span><div class="dots"><i></i><i></i><i></i></div></div>
|
||
<div class="ch">
|
||
<div class="ch-gh"><div class="ch-gh-logo">FA</div><div class="ch-gh-nav"><span class="on">Chronik</span></div><div class="ch-gh-bell" style="--bell:0"></div></div>
|
||
<div class="ch-wrap">
|
||
<div class="ch-back">← Übersicht</div>
|
||
<div class="ch-hdr"><div class="ch-title" style="font-size:13px">Chronik</div></div>
|
||
<div class="ch-fy"><div class="ch-fy-empty"><div class="ch-fy-empty-ic">✓</div><div class="ch-fy-empty-t">Keine neuen Erwähnungen</div><div class="ch-fy-empty-link">Ältere ansehen →</div></div></div>
|
||
<div class="ch-fp"><div class="ch-pill on">Alle</div><div class="ch-pill">Für dich</div><div class="ch-pill">Hochgeladen</div><div class="ch-pill">Transkription</div><div class="ch-pill">Kommentare</div></div>
|
||
<div class="ch-dh"><div class="ch-dh-t">Heute</div></div>
|
||
<div class="ch-row"><div class="ch-av av-anna">AR</div><div class="ch-body"><div class="ch-row-t1"><b>Anna</b> transkribierte <span class="ch-row-badge">20 Blöcke</span> in <a>Brief 42</a></div></div><div class="ch-time">14:02</div></div>
|
||
<div class="ch-row"><div class="ch-av av-papa">PR</div><div class="ch-body"><div class="ch-row-t1"><b>Papa</b> lud <span class="ch-row-badge">3 Dok.</span> hoch</div></div><div class="ch-time">11:08</div></div>
|
||
<div class="ch-row mine"><div class="ch-mk">@</div><div class="ch-av av-mama">MR</div><div class="ch-body"><div class="ch-row-t1"><b>Mama</b> erwähnte dich</div><div class="ch-row-t2">"schau mal, Omas…"</div></div><div class="ch-time">14:32</div></div>
|
||
<div class="ch-dh"><div class="ch-dh-t">Gestern</div></div>
|
||
<div class="ch-row"><div class="ch-av av-oma">OR</div><div class="ch-body"><div class="ch-row-t1"><b>Oma</b> kommentierte <a>Brief 39</a></div></div><div class="ch-time">18:47</div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="state-vp-col">
|
||
<span class="vp-tag">768 px · Tablet</span><span class="vp-dim">422 px @ 55%</span>
|
||
<div class="wf wf-t">
|
||
<div class="wf-bar"><span class="dot r"></span><span class="dot y"></span><span class="dot g"></span><div class="urlbar"><span>familienarchiv.de/chronik</span></div></div>
|
||
<div class="ch">
|
||
<div class="ch-gh"><div class="ch-gh-logo">Familienarchiv</div><div class="ch-gh-nav"><span>Dokumente</span><span>Personen</span><span class="on">Chronik</span></div><div class="ch-gh-bell"></div></div>
|
||
<div class="ch-wrap">
|
||
<div class="ch-back">← Zurück zur Übersicht</div>
|
||
<div class="ch-hdr"><div class="ch-title">Chronik</div></div>
|
||
<div class="ch-fy"><div class="ch-fy-empty"><div class="ch-fy-empty-ic">✓</div><div class="ch-fy-empty-t">Keine neuen Erwähnungen</div><div class="ch-fy-empty-link">Ältere Erwähnungen ansehen →</div></div></div>
|
||
<div class="ch-fp"><div class="ch-pill on">Alle</div><div class="ch-pill">Für dich</div><div class="ch-pill">Hochgeladen</div><div class="ch-pill">Transkription</div><div class="ch-pill">Kommentare</div></div>
|
||
<div class="ch-dh"><div class="ch-dh-t">Heute</div></div>
|
||
<div class="ch-row"><div class="ch-av av-anna">AR</div><div class="ch-body"><div class="ch-row-t1"><b>Anna</b> transkribierte <span class="ch-row-badge">20 Blöcke</span> in <a>Brief Nr. 42 · Hamburg 1947</a></div></div><div class="ch-time">14:02–14:32</div></div>
|
||
<div class="ch-row"><div class="ch-av av-papa">PR</div><div class="ch-body"><div class="ch-row-t1"><b>Papa</b> lud <span class="ch-row-badge">3 Dokumente</span> hoch</div></div><div class="ch-time">11:08</div></div>
|
||
<div class="ch-row mine"><div class="ch-mk">@</div><div class="ch-av av-mama">MR</div><div class="ch-body"><div class="ch-row-t1"><b>Mama</b> erwähnte dich in <a>Brief Nr. 42</a></div><div class="ch-row-t2">"schau mal, das ist Omas Handschrift von 1952"</div></div><div class="ch-time">14:32</div></div>
|
||
<div class="ch-dh"><div class="ch-dh-t">Gestern</div></div>
|
||
<div class="ch-row"><div class="ch-av av-oma">OR</div><div class="ch-body"><div class="ch-row-t1"><b>Oma</b> kommentierte <a>Brief Nr. 39</a></div><div class="ch-row-t2">"das war bei der Hochzeit von Onkel Heinrich"</div></div><div class="ch-time">18:47</div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="state-vp-col">
|
||
<span class="vp-tag">1440 px · Desktop</span><span class="vp-dim">720 px @ 55%</span>
|
||
<div class="wf wf-d">
|
||
<div class="wf-bar"><span class="dot r"></span><span class="dot y"></span><span class="dot g"></span><div class="urlbar"><span>familienarchiv.de/chronik</span></div></div>
|
||
<div class="ch">
|
||
<div class="ch-gh"><div class="ch-gh-logo">Familienarchiv</div><div class="ch-gh-nav"><span>Dokumente</span><span>Personen</span><span>Briefwechsel</span><span class="on">Chronik</span></div><div class="ch-gh-bell"></div></div>
|
||
<div class="ch-wrap">
|
||
<div class="ch-back">← Zurück zur Übersicht</div>
|
||
<div class="ch-hdr"><div class="ch-title">Chronik</div></div>
|
||
<div class="ch-fy"><div class="ch-fy-empty"><div class="ch-fy-empty-ic">✓</div><div class="ch-fy-empty-t">Keine neuen Erwähnungen</div><div class="ch-fy-empty-link">Ältere Erwähnungen ansehen →</div></div></div>
|
||
<div class="ch-fp"><div class="ch-pill on">Alle</div><div class="ch-pill">Für dich</div><div class="ch-pill">Hochgeladen</div><div class="ch-pill">Transkription</div><div class="ch-pill">Kommentare</div></div>
|
||
<div class="ch-dh"><div class="ch-dh-t">Heute</div></div>
|
||
<div class="ch-row"><div class="ch-av av-anna">AR</div><div class="ch-body"><div class="ch-row-t1"><b>Anna</b> transkribierte <span class="ch-row-badge">20 Blöcke</span> in <a>Brief Nr. 42 · Hamburg 1947</a></div></div><div class="ch-time">14:02–14:32</div></div>
|
||
<div class="ch-row"><div class="ch-av av-papa">PR</div><div class="ch-body"><div class="ch-row-t1"><b>Papa</b> lud <span class="ch-row-badge">3 Dokumente</span> hoch</div></div><div class="ch-time">11:08</div></div>
|
||
<div class="ch-row mine"><div class="ch-mk">@</div><div class="ch-av av-mama">MR</div><div class="ch-body"><div class="ch-row-t1"><b>Mama</b> erwähnte dich in <a>Brief Nr. 42</a></div><div class="ch-row-t2">"schau mal, das ist Omas Handschrift von 1952"</div></div><div class="ch-time">14:32</div></div>
|
||
<div class="ch-dh"><div class="ch-dh-t">Gestern</div></div>
|
||
<div class="ch-row"><div class="ch-av av-oma">OR</div><div class="ch-body"><div class="ch-row-t1"><b>Oma</b> kommentierte <a>Brief Nr. 39 · München 1952</a></div><div class="ch-row-t2">"das war bei der Hochzeit von Onkel Heinrich, der hatte einen Dackel namens Bello"</div></div><div class="ch-time">18:47</div></div>
|
||
<div class="ch-row"><div class="ch-av av-felix">FB</div><div class="ch-body"><div class="ch-row-t1"><b>Felix</b> hat <span class="ch-row-badge">5 Blöcke</span> in <a>Brief Nr. 38</a> überprüft</div></div><div class="ch-time">15:12</div></div>
|
||
<div class="ch-loadmore">Mehr laden</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="ann ann-ok"><strong>Warum dieser Zustand wichtig ist.</strong> 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 <code>Für dich</code> erreichbar sind.</div>
|
||
</div>
|
||
|
||
<!-- ════════════════════════════════════════════════════
|
||
STATE 03 · FIRST-RUN EMPTY (no activity at all)
|
||
═══════════════════════════════════════════════════════ -->
|
||
<div class="state-block">
|
||
<div class="state-hdr"><span class="state-num">03</span><span class="state-title">First-Run · No Activity At All</span></div>
|
||
<div class="state-desc">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.</div>
|
||
<div class="state-vps">
|
||
<div class="state-vp-col">
|
||
<span class="vp-tag">320 px · Mobile</span><span class="vp-dim">176 px @ 55%</span>
|
||
<div class="wf wf-m">
|
||
<div class="wf-m-status"><span>9:41</span><div class="dots"><i></i><i></i><i></i></div></div>
|
||
<div class="ch">
|
||
<div class="ch-gh"><div class="ch-gh-logo">FA</div><div class="ch-gh-nav"><span class="on">Chronik</span></div><div class="ch-gh-bell"></div></div>
|
||
<div class="ch-wrap">
|
||
<div class="ch-back">← Übersicht</div>
|
||
<div class="ch-hdr"><div class="ch-title" style="font-size:13px">Chronik</div></div>
|
||
<div class="ch-empty">
|
||
<div class="ch-empty-ic">📜</div>
|
||
<div class="ch-empty-t">Noch nichts geschehen</div>
|
||
<div class="ch-empty-b">Sobald jemand Dokumente hochlädt oder transkribiert, erscheint es hier.</div>
|
||
<div class="ch-empty-cta">Erstes Dokument hochladen</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="state-vp-col">
|
||
<span class="vp-tag">768 px · Tablet</span><span class="vp-dim">422 px @ 55%</span>
|
||
<div class="wf wf-t">
|
||
<div class="wf-bar"><span class="dot r"></span><span class="dot y"></span><span class="dot g"></span><div class="urlbar"><span>familienarchiv.de/chronik</span></div></div>
|
||
<div class="ch">
|
||
<div class="ch-gh"><div class="ch-gh-logo">Familienarchiv</div><div class="ch-gh-nav"><span>Dokumente</span><span>Personen</span><span class="on">Chronik</span></div><div class="ch-gh-bell"></div></div>
|
||
<div class="ch-wrap">
|
||
<div class="ch-back">← Zurück zur Übersicht</div>
|
||
<div class="ch-hdr"><div class="ch-title">Chronik</div></div>
|
||
<div class="ch-empty">
|
||
<div class="ch-empty-ic">📜</div>
|
||
<div class="ch-empty-t">Noch nichts geschehen</div>
|
||
<div class="ch-empty-b">Sobald jemand aus der Familie Dokumente hochlädt, transkribiert oder kommentiert, erscheint es hier in der Chronik.</div>
|
||
<div class="ch-empty-cta">Erstes Dokument hochladen</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="state-vp-col">
|
||
<span class="vp-tag">1440 px · Desktop</span><span class="vp-dim">720 px @ 55%</span>
|
||
<div class="wf wf-d">
|
||
<div class="wf-bar"><span class="dot r"></span><span class="dot y"></span><span class="dot g"></span><div class="urlbar"><span>familienarchiv.de/chronik</span></div></div>
|
||
<div class="ch">
|
||
<div class="ch-gh"><div class="ch-gh-logo">Familienarchiv</div><div class="ch-gh-nav"><span>Dokumente</span><span>Personen</span><span>Briefwechsel</span><span class="on">Chronik</span></div><div class="ch-gh-bell"></div></div>
|
||
<div class="ch-wrap">
|
||
<div class="ch-back">← Zurück zur Übersicht</div>
|
||
<div class="ch-hdr"><div class="ch-title">Chronik</div></div>
|
||
<div class="ch-empty">
|
||
<div class="ch-empty-ic">📜</div>
|
||
<div class="ch-empty-t">Noch nichts geschehen</div>
|
||
<div class="ch-empty-b">Sobald jemand aus der Familie Dokumente hochlädt, transkribiert oder kommentiert, erscheint es hier in der Chronik — als Zeitstrahl aller Beiträge zum Archiv.</div>
|
||
<div class="ch-empty-cta">Erstes Dokument hochladen</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="ann ann-info"><strong>Wann erscheint dieser Zustand?</strong> Neue Instanz (keine Dokumente im Archiv), oder ein Nutzer, der noch keine Leserechte auf Dokumente hat. Die CTA ist kontextabhängig: mit <code>canWrite=true</code> → "Erstes Dokument hochladen", ohne Schreibrechte → Link zu "/dokumente" ("Archiv durchsuchen").</div>
|
||
</div>
|
||
|
||
<!-- ════════════════════════════════════════════════════
|
||
STATE 04 · FILTER "ALLE" ACTIVE
|
||
═══════════════════════════════════════════════════════ -->
|
||
<div class="state-block">
|
||
<div class="state-hdr"><span class="state-num">04</span><span class="state-title">Filter · Alle (Baseline)</span></div>
|
||
<div class="state-desc">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.</div>
|
||
<div class="state-vps">
|
||
<div class="state-vp-col">
|
||
<span class="vp-tag">320 px · Mobile</span><span class="vp-dim">176 px @ 55%</span>
|
||
<div class="wf wf-m">
|
||
<div class="wf-m-status"><span>9:41</span><div class="dots"><i></i><i></i><i></i></div></div>
|
||
<div class="ch">
|
||
<div class="ch-gh"><div class="ch-gh-logo">FA</div><div class="ch-gh-nav"><span class="on">Chronik</span></div><div class="ch-gh-bell"></div></div>
|
||
<div class="ch-wrap">
|
||
<div class="ch-back">← Übersicht</div>
|
||
<div class="ch-hdr"><div class="ch-title" style="font-size:13px">Chronik</div><div class="ch-action">Alle gelesen</div></div>
|
||
<div class="ch-fy"><div class="ch-fy-hdr"><div class="ch-fy-caption">Für dich</div><div class="ch-fy-count">2 neu</div></div><div class="ch-fy-row"><div class="ch-fy-dot"></div><div class="ch-fy-ic">@</div><div class="ch-fy-body"><div class="ch-fy-t1"><b>Mama</b> erwähnte dich</div><div class="ch-fy-prev">"Omas Handschrift…"</div></div><div class="ch-fy-time">14:32</div></div><div class="ch-fy-row"><div class="ch-fy-dot"></div><div class="ch-fy-ic">↩</div><div class="ch-fy-body"><div class="ch-fy-t1"><b>Anna</b> antwortete</div></div><div class="ch-fy-time">gest</div></div></div>
|
||
<div class="ch-fp"><div class="ch-pill on">Alle</div><div class="ch-pill">Für dich</div><div class="ch-pill">Hochgeladen</div><div class="ch-pill">Transkription</div><div class="ch-pill">Kommentare</div></div>
|
||
<div class="ch-dh"><div class="ch-dh-t">Heute</div></div>
|
||
<div class="ch-row"><div class="ch-av av-anna">AR</div><div class="ch-body"><div class="ch-row-t1"><b>Anna</b> transkribierte <span class="ch-row-badge">20 Blöcke</span></div></div><div class="ch-time">14:02</div></div>
|
||
<div class="ch-row"><div class="ch-av av-papa">PR</div><div class="ch-body"><div class="ch-row-t1"><b>Papa</b> lud <span class="ch-row-badge">3 Dok.</span> hoch</div></div><div class="ch-time">11:08</div></div>
|
||
<div class="ch-row"><div class="ch-av av-felix">FB</div><div class="ch-body"><div class="ch-row-t1"><b>Felix</b> überprüfte <span class="ch-row-badge">5</span></div></div><div class="ch-time">10:24</div></div>
|
||
<div class="ch-row mine"><div class="ch-mk">@</div><div class="ch-av av-mama">MR</div><div class="ch-body"><div class="ch-row-t1"><b>Mama</b> erwähnte dich</div></div><div class="ch-time">14:32</div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="state-vp-col">
|
||
<span class="vp-tag">768 px · Tablet</span><span class="vp-dim">422 px @ 55%</span>
|
||
<div class="wf wf-t">
|
||
<div class="wf-bar"><span class="dot r"></span><span class="dot y"></span><span class="dot g"></span><div class="urlbar"><span>familienarchiv.de/chronik</span></div></div>
|
||
<div class="ch">
|
||
<div class="ch-gh"><div class="ch-gh-logo">Familienarchiv</div><div class="ch-gh-nav"><span>Dokumente</span><span>Personen</span><span class="on">Chronik</span></div><div class="ch-gh-bell"></div></div>
|
||
<div class="ch-wrap">
|
||
<div class="ch-back">← Zurück zur Übersicht</div>
|
||
<div class="ch-hdr"><div class="ch-title">Chronik</div><div class="ch-action">Alle gelesen</div></div>
|
||
<div class="ch-fy"><div class="ch-fy-hdr"><div class="ch-fy-caption">Für dich</div><div class="ch-fy-count">2 neu</div></div><div class="ch-fy-row"><div class="ch-fy-dot"></div><div class="ch-fy-ic">@</div><div class="ch-fy-body"><div class="ch-fy-t1"><b>Mama</b> hat dich in <b>Brief Nr. 42</b> erwähnt</div><div class="ch-fy-prev">"schau mal, das ist Omas Handschrift"</div></div><div class="ch-fy-time">14:32</div><div class="ch-fy-dismiss">✓</div></div><div class="ch-fy-row"><div class="ch-fy-dot"></div><div class="ch-fy-ic">↩</div><div class="ch-fy-body"><div class="ch-fy-t1"><b>Anna</b> hat geantwortet auf <b>Brief Nr. 41</b></div><div class="ch-fy-prev">"ja genau, das war 1947 in Hamburg"</div></div><div class="ch-fy-time">Gestern</div><div class="ch-fy-dismiss">✓</div></div></div>
|
||
<div class="ch-fp"><div class="ch-pill on">Alle</div><div class="ch-pill">Für dich</div><div class="ch-pill">Hochgeladen</div><div class="ch-pill">Transkription</div><div class="ch-pill">Kommentare</div></div>
|
||
<div class="ch-dh"><div class="ch-dh-t">Heute</div></div>
|
||
<div class="ch-row"><div class="ch-av av-anna">AR</div><div class="ch-body"><div class="ch-row-t1"><b>Anna</b> transkribierte <span class="ch-row-badge">20 Blöcke</span> in <a>Brief Nr. 42</a></div></div><div class="ch-time">14:02–14:32</div></div>
|
||
<div class="ch-row"><div class="ch-av av-papa">PR</div><div class="ch-body"><div class="ch-row-t1"><b>Papa</b> lud <span class="ch-row-badge">3 Dokumente</span> hoch</div></div><div class="ch-time">11:08</div></div>
|
||
<div class="ch-row"><div class="ch-av av-felix">FB</div><div class="ch-body"><div class="ch-row-t1"><b>Felix</b> überprüfte <span class="ch-row-badge">5 Blöcke</span> in <a>Brief Nr. 38</a></div></div><div class="ch-time">10:24</div></div>
|
||
<div class="ch-row mine"><div class="ch-mk">@</div><div class="ch-av av-mama">MR</div><div class="ch-body"><div class="ch-row-t1"><b>Mama</b> erwähnte dich in <a>Brief Nr. 42</a></div><div class="ch-row-t2">"schau mal, das ist Omas Handschrift von 1952"</div></div><div class="ch-time">14:32</div></div>
|
||
<div class="ch-dh"><div class="ch-dh-t">Gestern</div></div>
|
||
<div class="ch-row"><div class="ch-av av-oma">OR</div><div class="ch-body"><div class="ch-row-t1"><b>Oma</b> kommentierte <a>Brief Nr. 39</a></div><div class="ch-row-t2">"das war bei der Hochzeit…"</div></div><div class="ch-time">18:47</div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="state-vp-col">
|
||
<span class="vp-tag">1440 px · Desktop</span><span class="vp-dim">720 px @ 55%</span>
|
||
<div class="wf wf-d">
|
||
<div class="wf-bar"><span class="dot r"></span><span class="dot y"></span><span class="dot g"></span><div class="urlbar"><span>familienarchiv.de/chronik</span></div></div>
|
||
<div class="ch">
|
||
<div class="ch-gh"><div class="ch-gh-logo">Familienarchiv</div><div class="ch-gh-nav"><span>Dokumente</span><span>Personen</span><span>Briefwechsel</span><span class="on">Chronik</span></div><div class="ch-gh-bell"></div></div>
|
||
<div class="ch-wrap">
|
||
<div class="ch-back">← Zurück zur Übersicht</div>
|
||
<div class="ch-hdr"><div class="ch-title">Chronik</div><div class="ch-action">Alle gelesen</div></div>
|
||
<div class="ch-fy"><div class="ch-fy-hdr"><div class="ch-fy-caption">Für dich</div><div class="ch-fy-count">2 neu</div></div><div class="ch-fy-row"><div class="ch-fy-dot"></div><div class="ch-fy-ic">@</div><div class="ch-fy-body"><div class="ch-fy-t1"><b>Mama</b> hat dich in <b>Brief Nr. 42</b> erwähnt</div><div class="ch-fy-prev">"schau mal, das ist Omas Handschrift von 1952"</div></div><div class="ch-fy-time">14:32</div><div class="ch-fy-dismiss">✓</div></div><div class="ch-fy-row"><div class="ch-fy-dot"></div><div class="ch-fy-ic">↩</div><div class="ch-fy-body"><div class="ch-fy-t1"><b>Anna</b> hat auf deinen Kommentar in <b>Brief Nr. 41</b> geantwortet</div><div class="ch-fy-prev">"ja genau, das war 1947 in Hamburg"</div></div><div class="ch-fy-time">Gestern</div><div class="ch-fy-dismiss">✓</div></div></div>
|
||
<div class="ch-fp"><div class="ch-pill on">Alle</div><div class="ch-pill">Für dich</div><div class="ch-pill">Hochgeladen</div><div class="ch-pill">Transkription</div><div class="ch-pill">Kommentare</div></div>
|
||
<div class="ch-dh"><div class="ch-dh-t">Heute</div></div>
|
||
<div class="ch-row"><div class="ch-av av-anna">AR</div><div class="ch-body"><div class="ch-row-t1"><b>Anna</b> transkribierte <span class="ch-row-badge">20 Blöcke</span> in <a>Brief Nr. 42 · Hamburg 1947</a></div></div><div class="ch-time">14:02–14:32</div></div>
|
||
<div class="ch-row"><div class="ch-av av-papa">PR</div><div class="ch-body"><div class="ch-row-t1"><b>Papa</b> lud <span class="ch-row-badge">3 Dokumente</span> hoch</div></div><div class="ch-time">11:08</div></div>
|
||
<div class="ch-row"><div class="ch-av av-felix">FB</div><div class="ch-body"><div class="ch-row-t1"><b>Felix</b> überprüfte <span class="ch-row-badge">5 Blöcke</span> in <a>Brief Nr. 38</a></div></div><div class="ch-time">10:24</div></div>
|
||
<div class="ch-row mine"><div class="ch-mk">@</div><div class="ch-av av-mama">MR</div><div class="ch-body"><div class="ch-row-t1"><b>Mama</b> erwähnte dich in <a>Brief Nr. 42</a></div><div class="ch-row-t2">"schau mal, das ist Omas Handschrift von 1952"</div></div><div class="ch-time">14:32</div></div>
|
||
<div class="ch-dh"><div class="ch-dh-t">Gestern</div></div>
|
||
<div class="ch-row"><div class="ch-av av-oma">OR</div><div class="ch-body"><div class="ch-row-t1"><b>Oma</b> kommentierte <a>Brief Nr. 39 · München 1952</a></div><div class="ch-row-t2">"das war bei der Hochzeit von Onkel Heinrich, der hatte einen Dackel namens Bello"</div></div><div class="ch-time">18:47</div></div>
|
||
<div class="ch-row"><div class="ch-av av-anna">AR</div><div class="ch-body"><div class="ch-row-t1"><b>Anna</b> erstellte Annotation auf <a>Brief Nr. 37</a></div></div><div class="ch-time">16:03</div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ════════════════════════════════════════════════════
|
||
STATE 05 · FILTER "FÜR DICH" ACTIVE (history view)
|
||
═══════════════════════════════════════════════════════ -->
|
||
<div class="state-block">
|
||
<div class="state-hdr"><span class="state-num">05</span><span class="state-title">Filter · Für dich (Mention History — Read + Unread)</span></div>
|
||
<div class="state-desc">Timeline narrows to <em>only</em> mentions and replies directed at the current user — <strong>both read and unread</strong>. 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.</div>
|
||
<div class="state-vps">
|
||
<div class="state-vp-col">
|
||
<span class="vp-tag">320 px · Mobile</span><span class="vp-dim">176 px @ 55%</span>
|
||
<div class="wf wf-m">
|
||
<div class="wf-m-status"><span>9:41</span><div class="dots"><i></i><i></i><i></i></div></div>
|
||
<div class="ch">
|
||
<div class="ch-gh"><div class="ch-gh-logo">FA</div><div class="ch-gh-nav"><span class="on">Chronik</span></div><div class="ch-gh-bell"></div></div>
|
||
<div class="ch-wrap">
|
||
<div class="ch-back">← Übersicht</div>
|
||
<div class="ch-hdr"><div class="ch-title" style="font-size:13px">Chronik</div><div class="ch-action">Alle gelesen</div></div>
|
||
<div class="ch-fy"><div class="ch-fy-hdr"><div class="ch-fy-caption">Für dich</div><div class="ch-fy-count">2 neu</div></div><div class="ch-fy-row"><div class="ch-fy-dot"></div><div class="ch-fy-ic">@</div><div class="ch-fy-body"><div class="ch-fy-t1"><b>Mama</b> erwähnte dich</div></div><div class="ch-fy-time">14:32</div></div><div class="ch-fy-row"><div class="ch-fy-dot"></div><div class="ch-fy-ic">↩</div><div class="ch-fy-body"><div class="ch-fy-t1"><b>Anna</b> antwortete</div></div><div class="ch-fy-time">gest</div></div></div>
|
||
<div class="ch-fp"><div class="ch-pill">Alle</div><div class="ch-pill on">Für dich</div><div class="ch-pill">Hochgeladen</div><div class="ch-pill">Transkription</div><div class="ch-pill">Kommentare</div></div>
|
||
<div class="ch-dh"><div class="ch-dh-t">Heute</div></div>
|
||
<div class="ch-row mine"><div class="ch-mk">@</div><div class="ch-av av-mama">MR</div><div class="ch-body"><div class="ch-row-t1"><b>Mama</b> erwähnte dich</div><div class="ch-row-t2">"Omas Handschrift…"</div></div><div class="ch-time">14:32</div></div>
|
||
<div class="ch-dh"><div class="ch-dh-t">Gestern</div></div>
|
||
<div class="ch-row mine"><div class="ch-mk">↩</div><div class="ch-av av-anna">AR</div><div class="ch-body"><div class="ch-row-t1"><b>Anna</b> antwortete auf <a>Brief 41</a></div></div><div class="ch-time">18:47</div></div>
|
||
<div class="ch-dh"><div class="ch-dh-t">Diese Woche</div></div>
|
||
<div class="ch-row mine"><div class="ch-mk">@</div><div class="ch-av av-oma">OR</div><div class="ch-body"><div class="ch-row-t1"><b>Oma</b> erwähnte dich</div></div><div class="ch-time">Di</div></div>
|
||
<div class="ch-row mine"><div class="ch-mk">@</div><div class="ch-av av-papa">PR</div><div class="ch-body"><div class="ch-row-t1"><b>Papa</b> erwähnte dich</div></div><div class="ch-time">Mo</div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="state-vp-col">
|
||
<span class="vp-tag">768 px · Tablet</span><span class="vp-dim">422 px @ 55%</span>
|
||
<div class="wf wf-t">
|
||
<div class="wf-bar"><span class="dot r"></span><span class="dot y"></span><span class="dot g"></span><div class="urlbar"><span>/chronik?filter=fuer-dich</span></div></div>
|
||
<div class="ch">
|
||
<div class="ch-gh"><div class="ch-gh-logo">Familienarchiv</div><div class="ch-gh-nav"><span>Dokumente</span><span>Personen</span><span class="on">Chronik</span></div><div class="ch-gh-bell"></div></div>
|
||
<div class="ch-wrap">
|
||
<div class="ch-back">← Zurück zur Übersicht</div>
|
||
<div class="ch-hdr"><div class="ch-title">Chronik</div><div class="ch-action">Alle gelesen</div></div>
|
||
<div class="ch-fy"><div class="ch-fy-hdr"><div class="ch-fy-caption">Für dich</div><div class="ch-fy-count">2 neu</div></div><div class="ch-fy-row"><div class="ch-fy-dot"></div><div class="ch-fy-ic">@</div><div class="ch-fy-body"><div class="ch-fy-t1"><b>Mama</b> hat dich in <b>Brief Nr. 42</b> erwähnt</div><div class="ch-fy-prev">"schau mal, das ist Omas Handschrift"</div></div><div class="ch-fy-time">14:32</div><div class="ch-fy-dismiss">✓</div></div><div class="ch-fy-row"><div class="ch-fy-dot"></div><div class="ch-fy-ic">↩</div><div class="ch-fy-body"><div class="ch-fy-t1"><b>Anna</b> hat geantwortet auf <b>Brief Nr. 41</b></div></div><div class="ch-fy-time">Gestern</div><div class="ch-fy-dismiss">✓</div></div></div>
|
||
<div class="ch-fp"><div class="ch-pill">Alle</div><div class="ch-pill on">Für dich</div><div class="ch-pill">Hochgeladen</div><div class="ch-pill">Transkription</div><div class="ch-pill">Kommentare</div></div>
|
||
<div class="ch-dh"><div class="ch-dh-t">Heute</div></div>
|
||
<div class="ch-row mine"><div class="ch-mk">@</div><div class="ch-av av-mama">MR</div><div class="ch-body"><div class="ch-row-t1"><b>Mama</b> erwähnte dich in <a>Brief Nr. 42</a></div><div class="ch-row-t2">"schau mal, das ist Omas Handschrift von 1952"</div></div><div class="ch-time">14:32</div></div>
|
||
<div class="ch-dh"><div class="ch-dh-t">Gestern</div></div>
|
||
<div class="ch-row mine"><div class="ch-mk">↩</div><div class="ch-av av-anna">AR</div><div class="ch-body"><div class="ch-row-t1"><b>Anna</b> antwortete auf <a>Brief Nr. 41</a></div><div class="ch-row-t2">"ja genau, das war 1947 in Hamburg"</div></div><div class="ch-time">18:47</div></div>
|
||
<div class="ch-dh"><div class="ch-dh-t">Diese Woche</div></div>
|
||
<div class="ch-row mine"><div class="ch-mk">@</div><div class="ch-av av-oma">OR</div><div class="ch-body"><div class="ch-row-t1"><b>Oma</b> erwähnte dich in <a>Brief Nr. 35</a></div><div class="ch-row-t2">"Marcel, weißt du noch den Hund auf dem Foto?"</div></div><div class="ch-time">Di · 09:41</div></div>
|
||
<div class="ch-row mine"><div class="ch-mk">@</div><div class="ch-av av-papa">PR</div><div class="ch-body"><div class="ch-row-t1"><b>Papa</b> erwähnte dich in <a>Brief Nr. 33</a></div></div><div class="ch-time">Mo · 14:12</div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="state-vp-col">
|
||
<span class="vp-tag">1440 px · Desktop</span><span class="vp-dim">720 px @ 55%</span>
|
||
<div class="wf wf-d">
|
||
<div class="wf-bar"><span class="dot r"></span><span class="dot y"></span><span class="dot g"></span><div class="urlbar"><span>familienarchiv.de/chronik?filter=fuer-dich</span></div></div>
|
||
<div class="ch">
|
||
<div class="ch-gh"><div class="ch-gh-logo">Familienarchiv</div><div class="ch-gh-nav"><span>Dokumente</span><span>Personen</span><span>Briefwechsel</span><span class="on">Chronik</span></div><div class="ch-gh-bell"></div></div>
|
||
<div class="ch-wrap">
|
||
<div class="ch-back">← Zurück zur Übersicht</div>
|
||
<div class="ch-hdr"><div class="ch-title">Chronik</div><div class="ch-action">Alle gelesen</div></div>
|
||
<div class="ch-fy"><div class="ch-fy-hdr"><div class="ch-fy-caption">Für dich</div><div class="ch-fy-count">2 neu</div></div><div class="ch-fy-row"><div class="ch-fy-dot"></div><div class="ch-fy-ic">@</div><div class="ch-fy-body"><div class="ch-fy-t1"><b>Mama</b> hat dich in <b>Brief Nr. 42</b> erwähnt</div><div class="ch-fy-prev">"schau mal, das ist Omas Handschrift von 1952"</div></div><div class="ch-fy-time">14:32</div><div class="ch-fy-dismiss">✓</div></div><div class="ch-fy-row"><div class="ch-fy-dot"></div><div class="ch-fy-ic">↩</div><div class="ch-fy-body"><div class="ch-fy-t1"><b>Anna</b> hat auf deinen Kommentar in <b>Brief Nr. 41</b> geantwortet</div><div class="ch-fy-prev">"ja genau, das war 1947 in Hamburg"</div></div><div class="ch-fy-time">Gestern</div><div class="ch-fy-dismiss">✓</div></div></div>
|
||
<div class="ch-fp"><div class="ch-pill">Alle</div><div class="ch-pill on">Für dich</div><div class="ch-pill">Hochgeladen</div><div class="ch-pill">Transkription</div><div class="ch-pill">Kommentare</div></div>
|
||
<div class="ch-dh"><div class="ch-dh-t">Heute</div></div>
|
||
<div class="ch-row mine"><div class="ch-mk">@</div><div class="ch-av av-mama">MR</div><div class="ch-body"><div class="ch-row-t1"><b>Mama</b> erwähnte dich in <a>Brief Nr. 42</a></div><div class="ch-row-t2">"schau mal, das ist Omas Handschrift von 1952"</div></div><div class="ch-time">14:32</div></div>
|
||
<div class="ch-dh"><div class="ch-dh-t">Gestern</div></div>
|
||
<div class="ch-row mine"><div class="ch-mk">↩</div><div class="ch-av av-anna">AR</div><div class="ch-body"><div class="ch-row-t1"><b>Anna</b> antwortete auf deinen Kommentar in <a>Brief Nr. 41</a></div><div class="ch-row-t2">"ja genau, das war 1947 in Hamburg — die Oma hat mir das damals erzählt"</div></div><div class="ch-time">18:47</div></div>
|
||
<div class="ch-dh"><div class="ch-dh-t">Diese Woche</div></div>
|
||
<div class="ch-row mine"><div class="ch-mk">@</div><div class="ch-av av-oma">OR</div><div class="ch-body"><div class="ch-row-t1"><b>Oma</b> erwähnte dich in <a>Brief Nr. 35 · Köln 1961</a></div><div class="ch-row-t2">"Marcel, weißt du noch den Hund auf dem Foto? Das war Rex, er hat immer Briefträger verbellt"</div></div><div class="ch-time">Di · 09:41</div></div>
|
||
<div class="ch-row mine"><div class="ch-mk">@</div><div class="ch-av av-papa">PR</div><div class="ch-body"><div class="ch-row-t1"><b>Papa</b> erwähnte dich in <a>Brief Nr. 33</a></div><div class="ch-row-t2">"frag mal Marcel, ob er die Handschrift von Uropa erkennt"</div></div><div class="ch-time">Mo · 14:12</div></div>
|
||
<div class="ch-loadmore">Mehr laden</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="ann ann-info"><strong>Dieser Filter ist der Schlüssel.</strong> 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 <em>Ungelesenes</em>; der Filter zeigt die komplette Historie. Darum muss <code>Für dich</code> als Pill immer sichtbar sein — auch wenn die Box leer ist.</div>
|
||
</div>
|
||
|
||
<!-- ════════════════════════════════════════════════════
|
||
STATE 06 · FILTER "HOCHGELADEN" ACTIVE
|
||
═══════════════════════════════════════════════════════ -->
|
||
<div class="state-block">
|
||
<div class="state-hdr"><span class="state-num">06</span><span class="state-title">Filter · Hochgeladen (FILE_UPLOADED only)</span></div>
|
||
<div class="state-desc">Timeline narrows to uploads. Batch uploads are rolled up (same actor within 2 h). Für dich box remains visible above.</div>
|
||
<div class="state-vps">
|
||
<div class="state-vp-col">
|
||
<span class="vp-tag">320 px · Mobile</span><span class="vp-dim">176 px @ 55%</span>
|
||
<div class="wf wf-m">
|
||
<div class="wf-m-status"><span>9:41</span><div class="dots"><i></i><i></i><i></i></div></div>
|
||
<div class="ch">
|
||
<div class="ch-gh"><div class="ch-gh-logo">FA</div><div class="ch-gh-nav"><span class="on">Chronik</span></div><div class="ch-gh-bell"></div></div>
|
||
<div class="ch-wrap">
|
||
<div class="ch-back">← Übersicht</div>
|
||
<div class="ch-hdr"><div class="ch-title" style="font-size:13px">Chronik</div></div>
|
||
<div class="ch-fy"><div class="ch-fy-empty"><div class="ch-fy-empty-ic">✓</div><div class="ch-fy-empty-t">Keine neuen</div><div class="ch-fy-empty-link">Ältere →</div></div></div>
|
||
<div class="ch-fp"><div class="ch-pill">Alle</div><div class="ch-pill">Für dich</div><div class="ch-pill on">Hochgeladen</div><div class="ch-pill">Transkription</div><div class="ch-pill">Kommentare</div></div>
|
||
<div class="ch-dh"><div class="ch-dh-t">Heute</div></div>
|
||
<div class="ch-row"><div class="ch-av av-papa">PR</div><div class="ch-body"><div class="ch-row-t1"><b>Papa</b> lud <span class="ch-row-badge">3 Dok.</span> hoch</div></div><div class="ch-time">11:08</div></div>
|
||
<div class="ch-dh"><div class="ch-dh-t">Gestern</div></div>
|
||
<div class="ch-row"><div class="ch-av av-anna">AR</div><div class="ch-body"><div class="ch-row-t1"><b>Anna</b> lud Brief 41 hoch</div></div><div class="ch-time">16:22</div></div>
|
||
<div class="ch-dh"><div class="ch-dh-t">Diese Woche</div></div>
|
||
<div class="ch-row"><div class="ch-av av-papa">PR</div><div class="ch-body"><div class="ch-row-t1"><b>Papa</b> lud <span class="ch-row-badge">12 Fotos</span> hoch</div></div><div class="ch-time">Mo</div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="state-vp-col">
|
||
<span class="vp-tag">768 px · Tablet</span><span class="vp-dim">422 px @ 55%</span>
|
||
<div class="wf wf-t">
|
||
<div class="wf-bar"><span class="dot r"></span><span class="dot y"></span><span class="dot g"></span><div class="urlbar"><span>/chronik?filter=hochgeladen</span></div></div>
|
||
<div class="ch">
|
||
<div class="ch-gh"><div class="ch-gh-logo">Familienarchiv</div><div class="ch-gh-nav"><span>Dokumente</span><span>Personen</span><span class="on">Chronik</span></div><div class="ch-gh-bell"></div></div>
|
||
<div class="ch-wrap">
|
||
<div class="ch-back">← Zurück zur Übersicht</div>
|
||
<div class="ch-hdr"><div class="ch-title">Chronik</div></div>
|
||
<div class="ch-fy"><div class="ch-fy-empty"><div class="ch-fy-empty-ic">✓</div><div class="ch-fy-empty-t">Keine neuen Erwähnungen</div><div class="ch-fy-empty-link">Ältere Erwähnungen ansehen →</div></div></div>
|
||
<div class="ch-fp"><div class="ch-pill">Alle</div><div class="ch-pill">Für dich</div><div class="ch-pill on">Hochgeladen</div><div class="ch-pill">Transkription</div><div class="ch-pill">Kommentare</div></div>
|
||
<div class="ch-dh"><div class="ch-dh-t">Heute</div></div>
|
||
<div class="ch-row"><div class="ch-av av-papa">PR</div><div class="ch-body"><div class="ch-row-t1"><b>Papa</b> lud <span class="ch-row-badge">3 Dokumente</span> hoch</div></div><div class="ch-time">11:08</div></div>
|
||
<div class="ch-dh"><div class="ch-dh-t">Gestern</div></div>
|
||
<div class="ch-row"><div class="ch-av av-anna">AR</div><div class="ch-body"><div class="ch-row-t1"><b>Anna</b> lud <a>Brief Nr. 41</a> hoch</div></div><div class="ch-time">16:22</div></div>
|
||
<div class="ch-dh"><div class="ch-dh-t">Diese Woche</div></div>
|
||
<div class="ch-row"><div class="ch-av av-papa">PR</div><div class="ch-body"><div class="ch-row-t1"><b>Papa</b> lud <span class="ch-row-badge">12 Fotos</span> hoch</div></div><div class="ch-time">Mo · 10:14–10:38</div></div>
|
||
<div class="ch-row"><div class="ch-av av-felix">FB</div><div class="ch-body"><div class="ch-row-t1"><b>Felix</b> lud <a>Urkunde 1934</a> hoch</div></div><div class="ch-time">So · 19:02</div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="state-vp-col">
|
||
<span class="vp-tag">1440 px · Desktop</span><span class="vp-dim">720 px @ 55%</span>
|
||
<div class="wf wf-d">
|
||
<div class="wf-bar"><span class="dot r"></span><span class="dot y"></span><span class="dot g"></span><div class="urlbar"><span>familienarchiv.de/chronik?filter=hochgeladen</span></div></div>
|
||
<div class="ch">
|
||
<div class="ch-gh"><div class="ch-gh-logo">Familienarchiv</div><div class="ch-gh-nav"><span>Dokumente</span><span>Personen</span><span>Briefwechsel</span><span class="on">Chronik</span></div><div class="ch-gh-bell"></div></div>
|
||
<div class="ch-wrap">
|
||
<div class="ch-back">← Zurück zur Übersicht</div>
|
||
<div class="ch-hdr"><div class="ch-title">Chronik</div></div>
|
||
<div class="ch-fy"><div class="ch-fy-empty"><div class="ch-fy-empty-ic">✓</div><div class="ch-fy-empty-t">Keine neuen Erwähnungen</div><div class="ch-fy-empty-link">Ältere Erwähnungen ansehen →</div></div></div>
|
||
<div class="ch-fp"><div class="ch-pill">Alle</div><div class="ch-pill">Für dich</div><div class="ch-pill on">Hochgeladen</div><div class="ch-pill">Transkription</div><div class="ch-pill">Kommentare</div></div>
|
||
<div class="ch-dh"><div class="ch-dh-t">Heute</div></div>
|
||
<div class="ch-row"><div class="ch-av av-papa">PR</div><div class="ch-body"><div class="ch-row-t1"><b>Papa</b> lud <span class="ch-row-badge">3 Dokumente</span> hoch</div></div><div class="ch-time">11:08</div></div>
|
||
<div class="ch-dh"><div class="ch-dh-t">Gestern</div></div>
|
||
<div class="ch-row"><div class="ch-av av-anna">AR</div><div class="ch-body"><div class="ch-row-t1"><b>Anna</b> lud <a>Brief Nr. 41 · Hamburg 1947</a> hoch</div></div><div class="ch-time">16:22</div></div>
|
||
<div class="ch-dh"><div class="ch-dh-t">Diese Woche</div></div>
|
||
<div class="ch-row"><div class="ch-av av-papa">PR</div><div class="ch-body"><div class="ch-row-t1"><b>Papa</b> lud <span class="ch-row-badge">12 Fotos</span> aus dem Album "Umzug Köln" hoch</div></div><div class="ch-time">Mo · 10:14–10:38</div></div>
|
||
<div class="ch-row"><div class="ch-av av-felix">FB</div><div class="ch-body"><div class="ch-row-t1"><b>Felix</b> lud <a>Urkunde 1934</a> hoch</div></div><div class="ch-time">So · 19:02</div></div>
|
||
<div class="ch-row"><div class="ch-av av-oma">OR</div><div class="ch-body"><div class="ch-row-t1"><b>Oma</b> lud <span class="ch-row-badge">4 Briefe</span> hoch</div></div><div class="ch-time">Sa · 14:00–14:18</div></div>
|
||
<div class="ch-loadmore">Mehr laden</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ════════════════════════════════════════════════════
|
||
STATE 07 · FILTER "TRANSKRIPTION" ACTIVE
|
||
═══════════════════════════════════════════════════════ -->
|
||
<div class="state-block">
|
||
<div class="state-hdr"><span class="state-num">07</span><span class="state-title">Filter · Transkription (TEXT_SAVED + BLOCK_REVIEWED + ANNOTATION_CREATED)</span></div>
|
||
<div class="state-desc">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).</div>
|
||
<div class="state-vps">
|
||
<div class="state-vp-col">
|
||
<span class="vp-tag">320 px · Mobile</span><span class="vp-dim">176 px @ 55%</span>
|
||
<div class="wf wf-m">
|
||
<div class="wf-m-status"><span>9:41</span><div class="dots"><i></i><i></i><i></i></div></div>
|
||
<div class="ch">
|
||
<div class="ch-gh"><div class="ch-gh-logo">FA</div><div class="ch-gh-nav"><span class="on">Chronik</span></div><div class="ch-gh-bell"></div></div>
|
||
<div class="ch-wrap">
|
||
<div class="ch-back">← Übersicht</div>
|
||
<div class="ch-hdr"><div class="ch-title" style="font-size:13px">Chronik</div></div>
|
||
<div class="ch-fy"><div class="ch-fy-empty"><div class="ch-fy-empty-ic">✓</div><div class="ch-fy-empty-t">Keine neuen</div><div class="ch-fy-empty-link">Ältere →</div></div></div>
|
||
<div class="ch-fp"><div class="ch-pill">Alle</div><div class="ch-pill">Für dich</div><div class="ch-pill">Hochgeladen</div><div class="ch-pill on">Transkription</div><div class="ch-pill">Kommentare</div></div>
|
||
<div class="ch-dh"><div class="ch-dh-t">Heute</div></div>
|
||
<div class="ch-row"><div class="ch-av av-anna">AR</div><div class="ch-body"><div class="ch-row-t1"><b>Anna</b> transkr. <span class="ch-row-badge">20 Blöcke</span></div></div><div class="ch-time">14:02</div></div>
|
||
<div class="ch-row"><div class="ch-av av-felix">FB</div><div class="ch-body"><div class="ch-row-t1"><b>Felix</b> überprüfte <span class="ch-row-badge">5</span></div></div><div class="ch-time">10:24</div></div>
|
||
<div class="ch-dh"><div class="ch-dh-t">Gestern</div></div>
|
||
<div class="ch-row"><div class="ch-av av-anna">AR</div><div class="ch-body"><div class="ch-row-t1"><b>Anna</b> Annotation Brief 37</div></div><div class="ch-time">16:03</div></div>
|
||
<div class="ch-row"><div class="ch-av av-mama">MR</div><div class="ch-body"><div class="ch-row-t1"><b>Mama</b> transkr. <span class="ch-row-badge">8 Blöcke</span></div></div><div class="ch-time">11:30</div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="state-vp-col">
|
||
<span class="vp-tag">768 px · Tablet</span><span class="vp-dim">422 px @ 55%</span>
|
||
<div class="wf wf-t">
|
||
<div class="wf-bar"><span class="dot r"></span><span class="dot y"></span><span class="dot g"></span><div class="urlbar"><span>/chronik?filter=transkription</span></div></div>
|
||
<div class="ch">
|
||
<div class="ch-gh"><div class="ch-gh-logo">Familienarchiv</div><div class="ch-gh-nav"><span>Dokumente</span><span>Personen</span><span class="on">Chronik</span></div><div class="ch-gh-bell"></div></div>
|
||
<div class="ch-wrap">
|
||
<div class="ch-back">← Zurück zur Übersicht</div>
|
||
<div class="ch-hdr"><div class="ch-title">Chronik</div></div>
|
||
<div class="ch-fy"><div class="ch-fy-empty"><div class="ch-fy-empty-ic">✓</div><div class="ch-fy-empty-t">Keine neuen Erwähnungen</div><div class="ch-fy-empty-link">Ältere Erwähnungen ansehen →</div></div></div>
|
||
<div class="ch-fp"><div class="ch-pill">Alle</div><div class="ch-pill">Für dich</div><div class="ch-pill">Hochgeladen</div><div class="ch-pill on">Transkription</div><div class="ch-pill">Kommentare</div></div>
|
||
<div class="ch-dh"><div class="ch-dh-t">Heute</div></div>
|
||
<div class="ch-row"><div class="ch-av av-anna">AR</div><div class="ch-body"><div class="ch-row-t1"><b>Anna</b> transkribierte <span class="ch-row-badge">20 Blöcke</span> in <a>Brief Nr. 42</a></div></div><div class="ch-time">14:02–14:32</div></div>
|
||
<div class="ch-row"><div class="ch-av av-felix">FB</div><div class="ch-body"><div class="ch-row-t1"><b>Felix</b> überprüfte <span class="ch-row-badge">5 Blöcke</span> in <a>Brief Nr. 38</a></div></div><div class="ch-time">10:24</div></div>
|
||
<div class="ch-dh"><div class="ch-dh-t">Gestern</div></div>
|
||
<div class="ch-row"><div class="ch-av av-anna">AR</div><div class="ch-body"><div class="ch-row-t1"><b>Anna</b> erstellte Annotation auf <a>Brief Nr. 37</a></div></div><div class="ch-time">16:03</div></div>
|
||
<div class="ch-row"><div class="ch-av av-mama">MR</div><div class="ch-body"><div class="ch-row-t1"><b>Mama</b> transkribierte <span class="ch-row-badge">8 Blöcke</span> in <a>Brief Nr. 36</a></div></div><div class="ch-time">11:30</div></div>
|
||
<div class="ch-dh"><div class="ch-dh-t">Diese Woche</div></div>
|
||
<div class="ch-row"><div class="ch-av av-felix">FB</div><div class="ch-body"><div class="ch-row-t1"><b>Felix</b> überprüfte <span class="ch-row-badge">14 Blöcke</span> in <a>Brief Nr. 34</a></div></div><div class="ch-time">Di · 16:40</div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="state-vp-col">
|
||
<span class="vp-tag">1440 px · Desktop</span><span class="vp-dim">720 px @ 55%</span>
|
||
<div class="wf wf-d">
|
||
<div class="wf-bar"><span class="dot r"></span><span class="dot y"></span><span class="dot g"></span><div class="urlbar"><span>familienarchiv.de/chronik?filter=transkription</span></div></div>
|
||
<div class="ch">
|
||
<div class="ch-gh"><div class="ch-gh-logo">Familienarchiv</div><div class="ch-gh-nav"><span>Dokumente</span><span>Personen</span><span>Briefwechsel</span><span class="on">Chronik</span></div><div class="ch-gh-bell"></div></div>
|
||
<div class="ch-wrap">
|
||
<div class="ch-back">← Zurück zur Übersicht</div>
|
||
<div class="ch-hdr"><div class="ch-title">Chronik</div></div>
|
||
<div class="ch-fy"><div class="ch-fy-empty"><div class="ch-fy-empty-ic">✓</div><div class="ch-fy-empty-t">Keine neuen Erwähnungen</div><div class="ch-fy-empty-link">Ältere Erwähnungen ansehen →</div></div></div>
|
||
<div class="ch-fp"><div class="ch-pill">Alle</div><div class="ch-pill">Für dich</div><div class="ch-pill">Hochgeladen</div><div class="ch-pill on">Transkription</div><div class="ch-pill">Kommentare</div></div>
|
||
<div class="ch-dh"><div class="ch-dh-t">Heute</div></div>
|
||
<div class="ch-row"><div class="ch-av av-anna">AR</div><div class="ch-body"><div class="ch-row-t1"><b>Anna</b> transkribierte <span class="ch-row-badge">20 Blöcke</span> in <a>Brief Nr. 42 · Hamburg 1947</a></div></div><div class="ch-time">14:02–14:32</div></div>
|
||
<div class="ch-row"><div class="ch-av av-felix">FB</div><div class="ch-body"><div class="ch-row-t1"><b>Felix</b> überprüfte <span class="ch-row-badge">5 Blöcke</span> in <a>Brief Nr. 38</a></div></div><div class="ch-time">10:24</div></div>
|
||
<div class="ch-dh"><div class="ch-dh-t">Gestern</div></div>
|
||
<div class="ch-row"><div class="ch-av av-anna">AR</div><div class="ch-body"><div class="ch-row-t1"><b>Anna</b> erstellte Annotation auf Seite 2 von <a>Brief Nr. 37</a></div></div><div class="ch-time">16:03</div></div>
|
||
<div class="ch-row"><div class="ch-av av-mama">MR</div><div class="ch-body"><div class="ch-row-t1"><b>Mama</b> transkribierte <span class="ch-row-badge">8 Blöcke</span> in <a>Brief Nr. 36 · Köln 1954</a></div></div><div class="ch-time">11:30–11:58</div></div>
|
||
<div class="ch-dh"><div class="ch-dh-t">Diese Woche</div></div>
|
||
<div class="ch-row"><div class="ch-av av-felix">FB</div><div class="ch-body"><div class="ch-row-t1"><b>Felix</b> überprüfte <span class="ch-row-badge">14 Blöcke</span> in <a>Brief Nr. 34</a></div></div><div class="ch-time">Di · 16:40–17:22</div></div>
|
||
<div class="ch-row"><div class="ch-av av-anna">AR</div><div class="ch-body"><div class="ch-row-t1"><b>Anna</b> transkribierte <span class="ch-row-badge">6 Blöcke</span> in <a>Brief Nr. 33</a></div></div><div class="ch-time">Mo · 09:15</div></div>
|
||
<div class="ch-row"><div class="ch-av av-oma">OR</div><div class="ch-body"><div class="ch-row-t1"><b>Oma</b> transkribierte <span class="ch-row-badge">3 Blöcke</span> in <a>Brief Nr. 32</a></div></div><div class="ch-time">So · 20:04</div></div>
|
||
<div class="ch-loadmore">Mehr laden</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="ann ann-warn"><strong>Rollup-Regel im Detail.</strong>
|
||
<ul>
|
||
<li>Gleicher Akteur + gleiches Dokument + gleiche Aktionsart, innerhalb 120 min → ein Row mit Count-Badge und Zeitspanne ("14:02–14:32").</li>
|
||
<li>Ein einzelner Block → kein Rollup, normaler Row ("Oma transkribierte Block in Brief 32"). Die Count-Badge erscheint erst ab 2 Events.</li>
|
||
<li><code>COMMENT_ADDED</code> und <code>MENTION_CREATED</code> werden NIE rolled-up — jede Kommunikation bleibt eine eigene Zeile.</li>
|
||
<li>Überschreitet das Fenster eine Tagesgrenze, wird es am Tag der Gruppe selbst gerendert (frühestes Event bestimmt das Datum).</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ════════════════════════════════════════════════════
|
||
STATE 08 · FILTER "KOMMENTARE" ACTIVE
|
||
═══════════════════════════════════════════════════════ -->
|
||
<div class="state-block">
|
||
<div class="state-hdr"><span class="state-num">08</span><span class="state-title">Filter · Kommentare (COMMENT_ADDED + MENTION_CREATED)</span></div>
|
||
<div class="state-desc">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.</div>
|
||
<div class="state-vps">
|
||
<div class="state-vp-col">
|
||
<span class="vp-tag">320 px · Mobile</span><span class="vp-dim">176 px @ 55%</span>
|
||
<div class="wf wf-m">
|
||
<div class="wf-m-status"><span>9:41</span><div class="dots"><i></i><i></i><i></i></div></div>
|
||
<div class="ch">
|
||
<div class="ch-gh"><div class="ch-gh-logo">FA</div><div class="ch-gh-nav"><span class="on">Chronik</span></div><div class="ch-gh-bell"></div></div>
|
||
<div class="ch-wrap">
|
||
<div class="ch-back">← Übersicht</div>
|
||
<div class="ch-hdr"><div class="ch-title" style="font-size:13px">Chronik</div><div class="ch-action">Alle gelesen</div></div>
|
||
<div class="ch-fy"><div class="ch-fy-hdr"><div class="ch-fy-caption">Für dich</div><div class="ch-fy-count">1 neu</div></div><div class="ch-fy-row"><div class="ch-fy-dot"></div><div class="ch-fy-ic">@</div><div class="ch-fy-body"><div class="ch-fy-t1"><b>Mama</b> erwähnte dich</div></div><div class="ch-fy-time">14:32</div></div></div>
|
||
<div class="ch-fp"><div class="ch-pill">Alle</div><div class="ch-pill">Für dich</div><div class="ch-pill">Hochgeladen</div><div class="ch-pill">Transkription</div><div class="ch-pill on">Kommentare</div></div>
|
||
<div class="ch-dh"><div class="ch-dh-t">Heute</div></div>
|
||
<div class="ch-row mine"><div class="ch-mk">@</div><div class="ch-av av-mama">MR</div><div class="ch-body"><div class="ch-row-t1"><b>Mama</b> erwähnte dich</div><div class="ch-row-t2">"Omas Handschrift…"</div></div><div class="ch-time">14:32</div></div>
|
||
<div class="ch-row"><div class="ch-av av-oma">OR</div><div class="ch-body"><div class="ch-row-t1"><b>Oma</b> kommentierte Brief 39</div><div class="ch-row-t2">"bei der Hochzeit…"</div></div><div class="ch-time">18:47</div></div>
|
||
<div class="ch-row"><div class="ch-av av-papa">PR</div><div class="ch-body"><div class="ch-row-t1"><b>Papa</b> kommentierte Brief 36</div><div class="ch-row-t2">"vor Umzug Köln…"</div></div><div class="ch-time">12:15</div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="state-vp-col">
|
||
<span class="vp-tag">768 px · Tablet</span><span class="vp-dim">422 px @ 55%</span>
|
||
<div class="wf wf-t">
|
||
<div class="wf-bar"><span class="dot r"></span><span class="dot y"></span><span class="dot g"></span><div class="urlbar"><span>/chronik?filter=kommentare</span></div></div>
|
||
<div class="ch">
|
||
<div class="ch-gh"><div class="ch-gh-logo">Familienarchiv</div><div class="ch-gh-nav"><span>Dokumente</span><span>Personen</span><span class="on">Chronik</span></div><div class="ch-gh-bell"></div></div>
|
||
<div class="ch-wrap">
|
||
<div class="ch-back">← Zurück zur Übersicht</div>
|
||
<div class="ch-hdr"><div class="ch-title">Chronik</div><div class="ch-action">Alle gelesen</div></div>
|
||
<div class="ch-fy"><div class="ch-fy-hdr"><div class="ch-fy-caption">Für dich</div><div class="ch-fy-count">1 neu</div></div><div class="ch-fy-row"><div class="ch-fy-dot"></div><div class="ch-fy-ic">@</div><div class="ch-fy-body"><div class="ch-fy-t1"><b>Mama</b> hat dich erwähnt in <b>Brief Nr. 42</b></div><div class="ch-fy-prev">"schau mal, das ist Omas Handschrift"</div></div><div class="ch-fy-time">14:32</div><div class="ch-fy-dismiss">✓</div></div></div>
|
||
<div class="ch-fp"><div class="ch-pill">Alle</div><div class="ch-pill">Für dich</div><div class="ch-pill">Hochgeladen</div><div class="ch-pill">Transkription</div><div class="ch-pill on">Kommentare</div></div>
|
||
<div class="ch-dh"><div class="ch-dh-t">Heute</div></div>
|
||
<div class="ch-row mine"><div class="ch-mk">@</div><div class="ch-av av-mama">MR</div><div class="ch-body"><div class="ch-row-t1"><b>Mama</b> erwähnte dich in <a>Brief Nr. 42</a></div><div class="ch-row-t2">"schau mal, das ist Omas Handschrift von 1952"</div></div><div class="ch-time">14:32</div></div>
|
||
<div class="ch-row"><div class="ch-av av-oma">OR</div><div class="ch-body"><div class="ch-row-t1"><b>Oma</b> kommentierte <a>Brief Nr. 39</a></div><div class="ch-row-t2">"das war bei der Hochzeit von Onkel Heinrich"</div></div><div class="ch-time">18:47</div></div>
|
||
<div class="ch-row"><div class="ch-av av-papa">PR</div><div class="ch-body"><div class="ch-row-t1"><b>Papa</b> kommentierte <a>Brief Nr. 36</a></div><div class="ch-row-t2">"stimmt, das war kurz vor dem Umzug nach Köln"</div></div><div class="ch-time">12:15</div></div>
|
||
<div class="ch-dh"><div class="ch-dh-t">Gestern</div></div>
|
||
<div class="ch-row"><div class="ch-av av-anna">AR</div><div class="ch-body"><div class="ch-row-t1"><b>Anna</b> antwortete in <a>Brief Nr. 41</a></div><div class="ch-row-t2">"ja genau, das war 1947 in Hamburg"</div></div><div class="ch-time">18:12</div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="state-vp-col">
|
||
<span class="vp-tag">1440 px · Desktop</span><span class="vp-dim">720 px @ 55%</span>
|
||
<div class="wf wf-d">
|
||
<div class="wf-bar"><span class="dot r"></span><span class="dot y"></span><span class="dot g"></span><div class="urlbar"><span>familienarchiv.de/chronik?filter=kommentare</span></div></div>
|
||
<div class="ch">
|
||
<div class="ch-gh"><div class="ch-gh-logo">Familienarchiv</div><div class="ch-gh-nav"><span>Dokumente</span><span>Personen</span><span>Briefwechsel</span><span class="on">Chronik</span></div><div class="ch-gh-bell"></div></div>
|
||
<div class="ch-wrap">
|
||
<div class="ch-back">← Zurück zur Übersicht</div>
|
||
<div class="ch-hdr"><div class="ch-title">Chronik</div><div class="ch-action">Alle gelesen</div></div>
|
||
<div class="ch-fy"><div class="ch-fy-hdr"><div class="ch-fy-caption">Für dich</div><div class="ch-fy-count">1 neu</div></div><div class="ch-fy-row"><div class="ch-fy-dot"></div><div class="ch-fy-ic">@</div><div class="ch-fy-body"><div class="ch-fy-t1"><b>Mama</b> hat dich in <b>Brief Nr. 42</b> erwähnt</div><div class="ch-fy-prev">"schau mal, das ist Omas Handschrift von 1952"</div></div><div class="ch-fy-time">14:32</div><div class="ch-fy-dismiss">✓</div></div></div>
|
||
<div class="ch-fp"><div class="ch-pill">Alle</div><div class="ch-pill">Für dich</div><div class="ch-pill">Hochgeladen</div><div class="ch-pill">Transkription</div><div class="ch-pill on">Kommentare</div></div>
|
||
<div class="ch-dh"><div class="ch-dh-t">Heute</div></div>
|
||
<div class="ch-row mine"><div class="ch-mk">@</div><div class="ch-av av-mama">MR</div><div class="ch-body"><div class="ch-row-t1"><b>Mama</b> erwähnte dich in <a>Brief Nr. 42 · Hamburg 1947</a></div><div class="ch-row-t2">"schau mal, das ist Omas Handschrift von 1952 — ich glaube, das ist der Brief an Tante Elke"</div></div><div class="ch-time">14:32</div></div>
|
||
<div class="ch-row"><div class="ch-av av-oma">OR</div><div class="ch-body"><div class="ch-row-t1"><b>Oma</b> kommentierte <a>Brief Nr. 39 · München 1952</a></div><div class="ch-row-t2">"das war bei der Hochzeit von Onkel Heinrich, der hatte einen Dackel namens Bello und immer zwei Zigaretten in der Brusttasche"</div></div><div class="ch-time">18:47</div></div>
|
||
<div class="ch-row"><div class="ch-av av-papa">PR</div><div class="ch-body"><div class="ch-row-t1"><b>Papa</b> kommentierte <a>Brief Nr. 36</a></div><div class="ch-row-t2">"stimmt, das war kurz vor dem Umzug nach Köln — ich erinnere mich, weil Mama das Foto erst am Abend entwickelt hat"</div></div><div class="ch-time">12:15</div></div>
|
||
<div class="ch-dh"><div class="ch-dh-t">Gestern</div></div>
|
||
<div class="ch-row"><div class="ch-av av-anna">AR</div><div class="ch-body"><div class="ch-row-t1"><b>Anna</b> antwortete in <a>Brief Nr. 41</a></div><div class="ch-row-t2">"ja genau, das war 1947 in Hamburg. Die Oma hat mir damals erzählt, dass der Dackel dabei war"</div></div><div class="ch-time">18:12</div></div>
|
||
<div class="ch-loadmore">Mehr laden</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ════════════════════════════════════════════════════
|
||
STATE 09 · FILTER WITH NO RESULTS
|
||
═══════════════════════════════════════════════════════ -->
|
||
<div class="state-block">
|
||
<div class="state-hdr"><span class="state-num">09</span><span class="state-title">Filter Active · No Matching Results</span></div>
|
||
<div class="state-desc">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.</div>
|
||
<div class="state-vps">
|
||
<div class="state-vp-col">
|
||
<span class="vp-tag">320 px · Mobile</span><span class="vp-dim">176 px @ 55%</span>
|
||
<div class="wf wf-m">
|
||
<div class="wf-m-status"><span>9:41</span><div class="dots"><i></i><i></i><i></i></div></div>
|
||
<div class="ch">
|
||
<div class="ch-gh"><div class="ch-gh-logo">FA</div><div class="ch-gh-nav"><span class="on">Chronik</span></div><div class="ch-gh-bell"></div></div>
|
||
<div class="ch-wrap">
|
||
<div class="ch-back">← Übersicht</div>
|
||
<div class="ch-hdr"><div class="ch-title" style="font-size:13px">Chronik</div></div>
|
||
<div class="ch-fy"><div class="ch-fy-empty"><div class="ch-fy-empty-ic">✓</div><div class="ch-fy-empty-t">Keine neuen</div><div class="ch-fy-empty-link">Ältere →</div></div></div>
|
||
<div class="ch-fp"><div class="ch-pill">Alle</div><div class="ch-pill">Für dich</div><div class="ch-pill on">Hochgeladen</div><div class="ch-pill">Transkription</div><div class="ch-pill">Kommentare</div></div>
|
||
<div class="ch-empty" style="padding:24px 8px"><div class="ch-empty-ic" style="font-size:14px">∅</div><div class="ch-empty-t" style="font-size:7.5px">Keine Uploads</div><div class="ch-empty-b">Noch nichts hochgeladen.</div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="state-vp-col">
|
||
<span class="vp-tag">768 px · Tablet</span><span class="vp-dim">422 px @ 55%</span>
|
||
<div class="wf wf-t">
|
||
<div class="wf-bar"><span class="dot r"></span><span class="dot y"></span><span class="dot g"></span><div class="urlbar"><span>/chronik?filter=hochgeladen</span></div></div>
|
||
<div class="ch">
|
||
<div class="ch-gh"><div class="ch-gh-logo">Familienarchiv</div><div class="ch-gh-nav"><span>Dokumente</span><span>Personen</span><span class="on">Chronik</span></div><div class="ch-gh-bell"></div></div>
|
||
<div class="ch-wrap">
|
||
<div class="ch-back">← Zurück zur Übersicht</div>
|
||
<div class="ch-hdr"><div class="ch-title">Chronik</div></div>
|
||
<div class="ch-fy"><div class="ch-fy-empty"><div class="ch-fy-empty-ic">✓</div><div class="ch-fy-empty-t">Keine neuen Erwähnungen</div><div class="ch-fy-empty-link">Ältere Erwähnungen ansehen →</div></div></div>
|
||
<div class="ch-fp"><div class="ch-pill">Alle</div><div class="ch-pill">Für dich</div><div class="ch-pill on">Hochgeladen</div><div class="ch-pill">Transkription</div><div class="ch-pill">Kommentare</div></div>
|
||
<div class="ch-empty"><div class="ch-empty-ic">∅</div><div class="ch-empty-t">Keine Uploads gefunden</div><div class="ch-empty-b">In diesem Zeitraum wurden keine Dokumente hochgeladen. Versuche einen anderen Filter.</div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="state-vp-col">
|
||
<span class="vp-tag">1440 px · Desktop</span><span class="vp-dim">720 px @ 55%</span>
|
||
<div class="wf wf-d">
|
||
<div class="wf-bar"><span class="dot r"></span><span class="dot y"></span><span class="dot g"></span><div class="urlbar"><span>familienarchiv.de/chronik?filter=hochgeladen</span></div></div>
|
||
<div class="ch">
|
||
<div class="ch-gh"><div class="ch-gh-logo">Familienarchiv</div><div class="ch-gh-nav"><span>Dokumente</span><span>Personen</span><span>Briefwechsel</span><span class="on">Chronik</span></div><div class="ch-gh-bell"></div></div>
|
||
<div class="ch-wrap">
|
||
<div class="ch-back">← Zurück zur Übersicht</div>
|
||
<div class="ch-hdr"><div class="ch-title">Chronik</div></div>
|
||
<div class="ch-fy"><div class="ch-fy-empty"><div class="ch-fy-empty-ic">✓</div><div class="ch-fy-empty-t">Keine neuen Erwähnungen</div><div class="ch-fy-empty-link">Ältere Erwähnungen ansehen →</div></div></div>
|
||
<div class="ch-fp"><div class="ch-pill">Alle</div><div class="ch-pill">Für dich</div><div class="ch-pill on">Hochgeladen</div><div class="ch-pill">Transkription</div><div class="ch-pill">Kommentare</div></div>
|
||
<div class="ch-empty"><div class="ch-empty-ic">∅</div><div class="ch-empty-t">Keine Uploads gefunden</div><div class="ch-empty-b">In diesem Zeitraum wurden keine Dokumente hochgeladen. Wähle einen anderen Filter oder schau in der vollständigen Chronik nach.</div><div class="ch-empty-cta">Zu Alle wechseln</div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ════════════════════════════════════════════════════
|
||
STATE 10 · LOADING (skeleton)
|
||
═══════════════════════════════════════════════════════ -->
|
||
<div class="state-block">
|
||
<div class="state-hdr"><span class="state-num">10</span><span class="state-title">Loading · Skeleton Placeholders</span></div>
|
||
<div class="state-desc">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. <code>prefers-reduced-motion</code>: shimmer animation is disabled, skeleton shows as static blocks.</div>
|
||
<div class="state-vps">
|
||
<div class="state-vp-col">
|
||
<span class="vp-tag">320 px · Mobile</span><span class="vp-dim">176 px @ 55%</span>
|
||
<div class="wf wf-m">
|
||
<div class="wf-m-status"><span>9:41</span><div class="dots"><i></i><i></i><i></i></div></div>
|
||
<div class="ch">
|
||
<div class="ch-gh"><div class="ch-gh-logo">FA</div><div class="ch-gh-nav"><span class="on">Chronik</span></div><div class="ch-gh-bell"></div></div>
|
||
<div class="ch-wrap">
|
||
<div class="ch-back">← Übersicht</div>
|
||
<div class="ch-hdr"><div class="ch-title" style="font-size:13px">Chronik</div></div>
|
||
<div class="ch-fy">
|
||
<div class="sk sk-line" style="width:30%;height:6px;margin-bottom:6px"></div>
|
||
<div class="ch-fy-row"><div class="sk" style="width:4px;height:4px;border-radius:50%;margin-top:4px;flex-shrink:0"></div><div class="sk" style="width:8px;height:8px;flex-shrink:0;margin-top:2px"></div><div class="ch-fy-body"><div class="sk sk-line" style="width:70%"></div><div class="sk sk-line" style="width:50%;height:3px"></div></div></div>
|
||
<div class="ch-fy-row"><div class="sk" style="width:4px;height:4px;border-radius:50%;margin-top:4px;flex-shrink:0"></div><div class="sk" style="width:8px;height:8px;flex-shrink:0;margin-top:2px"></div><div class="ch-fy-body"><div class="sk sk-line" style="width:60%"></div></div></div>
|
||
</div>
|
||
<div class="ch-fp"><div class="ch-pill on">Alle</div><div class="ch-pill">Für dich</div><div class="ch-pill">Hochgeladen</div><div class="ch-pill">Transkription</div><div class="ch-pill">Kommentare</div></div>
|
||
<div class="ch-dh"><div class="ch-dh-t">Heute</div></div>
|
||
<div class="ch-row"><div class="sk ch-av" style="background:#eceae4"></div><div class="ch-body"><div class="sk sk-line" style="width:80%"></div></div><div class="sk sk-line" style="width:15px;flex-shrink:0;margin-top:2px"></div></div>
|
||
<div class="ch-row"><div class="sk ch-av" style="background:#eceae4"></div><div class="ch-body"><div class="sk sk-line" style="width:60%"></div></div><div class="sk sk-line" style="width:15px;flex-shrink:0;margin-top:2px"></div></div>
|
||
<div class="ch-row"><div class="sk ch-av" style="background:#eceae4"></div><div class="ch-body"><div class="sk sk-line" style="width:75%"></div><div class="sk sk-line" style="width:40%;height:3px"></div></div><div class="sk sk-line" style="width:15px;flex-shrink:0;margin-top:2px"></div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="state-vp-col">
|
||
<span class="vp-tag">768 px · Tablet</span><span class="vp-dim">422 px @ 55%</span>
|
||
<div class="wf wf-t">
|
||
<div class="wf-bar"><span class="dot r"></span><span class="dot y"></span><span class="dot g"></span><div class="urlbar"><span>familienarchiv.de/chronik</span></div></div>
|
||
<div class="ch">
|
||
<div class="ch-gh"><div class="ch-gh-logo">Familienarchiv</div><div class="ch-gh-nav"><span>Dokumente</span><span>Personen</span><span class="on">Chronik</span></div><div class="ch-gh-bell"></div></div>
|
||
<div class="ch-wrap">
|
||
<div class="ch-back">← Zurück zur Übersicht</div>
|
||
<div class="ch-hdr"><div class="ch-title">Chronik</div></div>
|
||
<div class="ch-fy"><div class="sk sk-line" style="width:20%"></div><div class="ch-fy-row"><div class="sk" style="width:5px;height:5px;border-radius:50%;margin-top:6px;flex-shrink:0"></div><div class="sk" style="width:11px;height:11px;flex-shrink:0;margin-top:2px"></div><div class="ch-fy-body"><div class="sk sk-line" style="width:75%"></div><div class="sk sk-line" style="width:55%;height:5px"></div></div></div><div class="ch-fy-row"><div class="sk" style="width:5px;height:5px;border-radius:50%;margin-top:6px;flex-shrink:0"></div><div class="sk" style="width:11px;height:11px;flex-shrink:0;margin-top:2px"></div><div class="ch-fy-body"><div class="sk sk-line" style="width:65%"></div></div></div></div>
|
||
<div class="ch-fp"><div class="ch-pill on">Alle</div><div class="ch-pill">Für dich</div><div class="ch-pill">Hochgeladen</div><div class="ch-pill">Transkription</div><div class="ch-pill">Kommentare</div></div>
|
||
<div class="ch-dh"><div class="ch-dh-t">Heute</div></div>
|
||
<div class="ch-row"><div class="sk ch-av" style="background:#eceae4"></div><div class="ch-body"><div class="sk sk-line" style="width:85%"></div></div><div class="sk sk-line" style="width:30px;flex-shrink:0"></div></div>
|
||
<div class="ch-row"><div class="sk ch-av" style="background:#eceae4"></div><div class="ch-body"><div class="sk sk-line" style="width:70%"></div><div class="sk sk-line" style="width:45%;height:5px"></div></div><div class="sk sk-line" style="width:30px;flex-shrink:0"></div></div>
|
||
<div class="ch-row"><div class="sk ch-av" style="background:#eceae4"></div><div class="ch-body"><div class="sk sk-line" style="width:60%"></div></div><div class="sk sk-line" style="width:30px;flex-shrink:0"></div></div>
|
||
<div class="ch-row"><div class="sk ch-av" style="background:#eceae4"></div><div class="ch-body"><div class="sk sk-line" style="width:80%"></div></div><div class="sk sk-line" style="width:30px;flex-shrink:0"></div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="state-vp-col">
|
||
<span class="vp-tag">1440 px · Desktop</span><span class="vp-dim">720 px @ 55%</span>
|
||
<div class="wf wf-d">
|
||
<div class="wf-bar"><span class="dot r"></span><span class="dot y"></span><span class="dot g"></span><div class="urlbar"><span>familienarchiv.de/chronik</span></div></div>
|
||
<div class="ch">
|
||
<div class="ch-gh"><div class="ch-gh-logo">Familienarchiv</div><div class="ch-gh-nav"><span>Dokumente</span><span>Personen</span><span>Briefwechsel</span><span class="on">Chronik</span></div><div class="ch-gh-bell"></div></div>
|
||
<div class="ch-wrap">
|
||
<div class="ch-back">← Zurück zur Übersicht</div>
|
||
<div class="ch-hdr"><div class="ch-title">Chronik</div></div>
|
||
<div class="ch-fy"><div class="sk sk-line" style="width:15%"></div>
|
||
<div class="ch-fy-row"><div class="sk" style="width:6px;height:6px;border-radius:50%;margin-top:8px;flex-shrink:0"></div><div class="sk" style="width:13px;height:13px;flex-shrink:0;margin-top:2px"></div><div class="ch-fy-body"><div class="sk sk-line" style="width:70%"></div><div class="sk sk-line" style="width:55%;height:6px"></div></div></div>
|
||
<div class="ch-fy-row"><div class="sk" style="width:6px;height:6px;border-radius:50%;margin-top:8px;flex-shrink:0"></div><div class="sk" style="width:13px;height:13px;flex-shrink:0;margin-top:2px"></div><div class="ch-fy-body"><div class="sk sk-line" style="width:65%"></div><div class="sk sk-line" style="width:40%;height:6px"></div></div></div>
|
||
<div class="ch-fy-row"><div class="sk" style="width:6px;height:6px;border-radius:50%;margin-top:8px;flex-shrink:0"></div><div class="sk" style="width:13px;height:13px;flex-shrink:0;margin-top:2px"></div><div class="ch-fy-body"><div class="sk sk-line" style="width:75%"></div></div></div>
|
||
</div>
|
||
<div class="ch-fp"><div class="ch-pill on">Alle</div><div class="ch-pill">Für dich</div><div class="ch-pill">Hochgeladen</div><div class="ch-pill">Transkription</div><div class="ch-pill">Kommentare</div></div>
|
||
<div class="ch-dh"><div class="ch-dh-t">Heute</div></div>
|
||
<div class="ch-row"><div class="sk ch-av" style="background:#eceae4"></div><div class="ch-body"><div class="sk sk-line" style="width:85%"></div></div><div class="sk sk-line" style="width:40px;flex-shrink:0"></div></div>
|
||
<div class="ch-row"><div class="sk ch-av" style="background:#eceae4"></div><div class="ch-body"><div class="sk sk-line" style="width:75%"></div><div class="sk sk-line" style="width:55%;height:6px"></div></div><div class="sk sk-line" style="width:40px;flex-shrink:0"></div></div>
|
||
<div class="ch-row"><div class="sk ch-av" style="background:#eceae4"></div><div class="ch-body"><div class="sk sk-line" style="width:65%"></div></div><div class="sk sk-line" style="width:40px;flex-shrink:0"></div></div>
|
||
<div class="ch-row"><div class="sk ch-av" style="background:#eceae4"></div><div class="ch-body"><div class="sk sk-line" style="width:80%"></div></div><div class="sk sk-line" style="width:40px;flex-shrink:0"></div></div>
|
||
<div class="ch-row"><div class="sk ch-av" style="background:#eceae4"></div><div class="ch-body"><div class="sk sk-line" style="width:70%"></div><div class="sk sk-line" style="width:50%;height:6px"></div></div><div class="sk sk-line" style="width:40px;flex-shrink:0"></div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ════════════════════════════════════════════════════
|
||
STATE 11 · ERROR
|
||
═══════════════════════════════════════════════════════ -->
|
||
<div class="state-block">
|
||
<div class="state-hdr"><span class="state-num">11</span><span class="state-title">Error · API Failure with Retry</span></div>
|
||
<div class="state-desc">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.</div>
|
||
<div class="state-vps">
|
||
<div class="state-vp-col">
|
||
<span class="vp-tag">320 px · Mobile</span><span class="vp-dim">176 px @ 55%</span>
|
||
<div class="wf wf-m">
|
||
<div class="wf-m-status"><span>9:41</span><div class="dots"><i></i><i></i><i></i></div></div>
|
||
<div class="ch">
|
||
<div class="ch-gh"><div class="ch-gh-logo">FA</div><div class="ch-gh-nav"><span class="on">Chronik</span></div><div class="ch-gh-bell"></div></div>
|
||
<div class="ch-wrap">
|
||
<div class="ch-back">← Übersicht</div>
|
||
<div class="ch-hdr"><div class="ch-title" style="font-size:13px">Chronik</div></div>
|
||
<div class="ch-fp"><div class="ch-pill on">Alle</div><div class="ch-pill">Für dich</div><div class="ch-pill">Hochgeladen</div><div class="ch-pill">Transkription</div><div class="ch-pill">Kommentare</div></div>
|
||
<div class="ch-err"><div class="ch-err-ic">⚠</div><div class="ch-err-body"><div class="ch-err-t">Chronik nicht verfügbar</div><div class="ch-err-b">Bitte erneut versuchen.</div><div class="ch-err-btn">Erneut laden</div></div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="state-vp-col">
|
||
<span class="vp-tag">768 px · Tablet</span><span class="vp-dim">422 px @ 55%</span>
|
||
<div class="wf wf-t">
|
||
<div class="wf-bar"><span class="dot r"></span><span class="dot y"></span><span class="dot g"></span><div class="urlbar"><span>familienarchiv.de/chronik</span></div></div>
|
||
<div class="ch">
|
||
<div class="ch-gh"><div class="ch-gh-logo">Familienarchiv</div><div class="ch-gh-nav"><span>Dokumente</span><span>Personen</span><span class="on">Chronik</span></div><div class="ch-gh-bell"></div></div>
|
||
<div class="ch-wrap">
|
||
<div class="ch-back">← Zurück zur Übersicht</div>
|
||
<div class="ch-hdr"><div class="ch-title">Chronik</div></div>
|
||
<div class="ch-fp"><div class="ch-pill on">Alle</div><div class="ch-pill">Für dich</div><div class="ch-pill">Hochgeladen</div><div class="ch-pill">Transkription</div><div class="ch-pill">Kommentare</div></div>
|
||
<div class="ch-err"><div class="ch-err-ic">⚠</div><div class="ch-err-body"><div class="ch-err-t">Chronik konnte nicht geladen werden</div><div class="ch-err-b">Es gab ein Problem beim Laden. Bitte versuche es in einem Moment erneut.</div><div class="ch-err-btn">Erneut laden</div></div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="state-vp-col">
|
||
<span class="vp-tag">1440 px · Desktop</span><span class="vp-dim">720 px @ 55%</span>
|
||
<div class="wf wf-d">
|
||
<div class="wf-bar"><span class="dot r"></span><span class="dot y"></span><span class="dot g"></span><div class="urlbar"><span>familienarchiv.de/chronik</span></div></div>
|
||
<div class="ch">
|
||
<div class="ch-gh"><div class="ch-gh-logo">Familienarchiv</div><div class="ch-gh-nav"><span>Dokumente</span><span>Personen</span><span>Briefwechsel</span><span class="on">Chronik</span></div><div class="ch-gh-bell"></div></div>
|
||
<div class="ch-wrap">
|
||
<div class="ch-back">← Zurück zur Übersicht</div>
|
||
<div class="ch-hdr"><div class="ch-title">Chronik</div></div>
|
||
<div class="ch-fp"><div class="ch-pill on">Alle</div><div class="ch-pill">Für dich</div><div class="ch-pill">Hochgeladen</div><div class="ch-pill">Transkription</div><div class="ch-pill">Kommentare</div></div>
|
||
<div class="ch-err"><div class="ch-err-ic">⚠</div><div class="ch-err-body"><div class="ch-err-t">Chronik konnte nicht geladen werden</div><div class="ch-err-b">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)</div><div class="ch-err-btn">Erneut laden</div></div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="ann ann-info"><strong>Error-Copy-Regeln.</strong>
|
||
<ul>
|
||
<li>Keine rohen Backend-Messages. Mapping durch <code>getErrorMessage(code)</code> über Paraglide-Keys.</li>
|
||
<li>Fehlercode <em>optional</em> am Ende der Body-Zeile, in Klammern — hilft Support, verschreckt Nutzer nicht.</li>
|
||
<li>"Erneut laden" ist eine echte Button-Aktion, kein Reload — sie triggert nur die fehlgeschlagene Query neu.</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="impl-ref">
|
||
<div class="impl-ref-hdr">Implementation Reference — Content States<span>semantic tokens</span></div>
|
||
<table>
|
||
<thead><tr><th>Element</th><th>Classes</th><th>Real</th><th>Note</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>Unread dot (Für dich)</td><td><code>h-2 w-2 rounded-full bg-accent</code> (light) / <code>bg-turquoise</code> (dark)</td><td class="ir-px">8 px</td><td>aria-hidden, redundant cue</td></tr>
|
||
<tr><td>For-you lane row</td><td><code>border-l-[3px] border-accent bg-accent-bg/60 pl-3 rounded-sm</code></td><td class="ir-px">border 3 px</td><td>Never color-only; keep @ marker</td></tr>
|
||
<tr><td>@ marker circle</td><td><code>inline-flex items-center justify-center w-5 h-5 rounded-full bg-accent-bg text-ink font-bold</code></td><td class="ir-px">20 px</td><td>Icon fallback if no name</td></tr>
|
||
<tr><td>Count badge (rollup)</td><td><code>inline-block bg-primary text-primary-fg text-xs font-bold px-1.5 py-0.5 rounded-sm</code></td><td class="ir-px">12 px / 700</td><td>"20 Blöcke" etc.</td></tr>
|
||
<tr><td>Day header</td><td><code>flex items-center gap-3 mt-6 mb-2</code> · <code>text-xs font-bold uppercase tracking-widest text-ink-3</code> · after: <code>flex-1 h-px bg-line</code></td><td class="ir-px">12 px</td><td>Heute / Gestern / Diese Woche / Älter</td></tr>
|
||
<tr><td>Empty-state icon</td><td><code>w-10 h-10 text-accent opacity-70</code></td><td class="ir-px">40 px</td><td>Scroll icon for first-run, ∅ for filter-no-result, ✓ for inbox zero</td></tr>
|
||
<tr><td>Skeleton row</td><td><code>h-[72px] flex items-start gap-3 py-3</code> + <code>bg-gradient-to-r from-muted via-canvas to-muted animate-shimmer</code></td><td class="ir-px">72 px</td><td>Disable animation at <code>motion-reduce</code></td></tr>
|
||
<tr><td>Error card</td><td><code>bg-warning/10 border border-warning/40 text-warning rounded-sm p-4 flex gap-3</code></td><td class="ir-px">AA 4.8:1</td><td>Retry button: <code>bg-warning text-warning-fg px-4 py-2</code></td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ══════════════════════════════════════════════════════
|
||
SECTION 3 — DARK MODE PARITY
|
||
════════════════════════════════════════════════════════ -->
|
||
<section class="sec">
|
||
<h2 class="sec-h"><span class="sec-num">03</span>Dark Mode Parity</h2>
|
||
<p class="sec-intro">
|
||
Dark mode remaps every semantic token via <code>:root[data-theme='dark']</code>. Contrast ratios re-verified on the dark surface (<code>#011526</code>): brand-mint primary (<code>#a1dcd8</code>) gives 9.2:1 on canvas, turquoise accent (<code>#00c7b1</code>) 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.
|
||
</p>
|
||
|
||
<div class="sg sg-3" style="gap:20px">
|
||
<!-- Dark · Default -->
|
||
<div class="sb">
|
||
<span class="sl"><span class="sl-vp" style="background:#000">1440 · Default · Dark</span></span>
|
||
<div class="wf wf-d dark">
|
||
<div class="wf-bar"><span class="dot r"></span><span class="dot y"></span><span class="dot g"></span><div class="urlbar"><span>familienarchiv.de/chronik</span></div></div>
|
||
<div class="ch dark">
|
||
<div class="ch-gh" style="background:#001020"><div class="ch-gh-logo">Familienarchiv</div><div class="ch-gh-nav"><span>Dokumente</span><span>Personen</span><span class="on">Chronik</span></div><div class="ch-gh-bell"></div></div>
|
||
<div class="ch-wrap">
|
||
<div class="ch-back">← Zurück zur Übersicht</div>
|
||
<div class="ch-hdr"><div class="ch-title">Chronik</div><div class="ch-action">Alle gelesen</div></div>
|
||
<div class="ch-fy"><div class="ch-fy-hdr"><div class="ch-fy-caption">Für dich</div><div class="ch-fy-count">3 neu</div></div>
|
||
<div class="ch-fy-row"><div class="ch-fy-dot"></div><div class="ch-fy-ic">@</div><div class="ch-fy-body"><div class="ch-fy-t1"><b>Mama</b> hat dich in <b>Brief Nr. 42</b> erwähnt</div><div class="ch-fy-prev">"schau mal, das ist Omas Handschrift"</div></div><div class="ch-fy-time">14:32</div><div class="ch-fy-dismiss">✓</div></div>
|
||
<div class="ch-fy-row"><div class="ch-fy-dot"></div><div class="ch-fy-ic">@</div><div class="ch-fy-body"><div class="ch-fy-t1"><b>Oma</b> hat dich in <b>Brief Nr. 39</b> erwähnt</div></div><div class="ch-fy-time">11:05</div><div class="ch-fy-dismiss">✓</div></div>
|
||
<div class="ch-fy-row"><div class="ch-fy-dot"></div><div class="ch-fy-ic">↩</div><div class="ch-fy-body"><div class="ch-fy-t1"><b>Anna</b> antwortete in <b>Brief Nr. 41</b></div></div><div class="ch-fy-time">Gestern</div><div class="ch-fy-dismiss">✓</div></div>
|
||
</div>
|
||
<div class="ch-fp"><div class="ch-pill on">Alle</div><div class="ch-pill">Für dich</div><div class="ch-pill">Hochgeladen</div><div class="ch-pill">Transkription</div><div class="ch-pill">Kommentare</div></div>
|
||
<div class="ch-dh"><div class="ch-dh-t">Heute</div></div>
|
||
<div class="ch-row"><div class="ch-av av-anna">AR</div><div class="ch-body"><div class="ch-row-t1"><b>Anna</b> transkribierte <span class="ch-row-badge">20 Blöcke</span> in <a>Brief Nr. 42</a></div></div><div class="ch-time">14:02–14:32</div></div>
|
||
<div class="ch-row"><div class="ch-av av-papa">PR</div><div class="ch-body"><div class="ch-row-t1"><b>Papa</b> lud <span class="ch-row-badge">3 Dokumente</span> hoch</div></div><div class="ch-time">11:08</div></div>
|
||
<div class="ch-row mine"><div class="ch-mk">@</div><div class="ch-av av-mama">MR</div><div class="ch-body"><div class="ch-row-t1"><b>Mama</b> erwähnte dich in <a>Brief Nr. 42</a></div><div class="ch-row-t2">"schau mal, das ist Omas Handschrift von 1952"</div></div><div class="ch-time">14:32</div></div>
|
||
<div class="ch-dh"><div class="ch-dh-t">Gestern</div></div>
|
||
<div class="ch-row"><div class="ch-av av-oma">OR</div><div class="ch-body"><div class="ch-row-t1"><b>Oma</b> kommentierte <a>Brief Nr. 39</a></div><div class="ch-row-t2">"das war bei der Hochzeit von Onkel Heinrich"</div></div><div class="ch-time">18:47</div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Dark · Inbox Zero -->
|
||
<div class="sb">
|
||
<span class="sl"><span class="sl-vp" style="background:#000">1440 · Inbox Zero · Dark</span></span>
|
||
<div class="wf wf-d dark">
|
||
<div class="wf-bar"><span class="dot r"></span><span class="dot y"></span><span class="dot g"></span><div class="urlbar"><span>familienarchiv.de/chronik</span></div></div>
|
||
<div class="ch dark">
|
||
<div class="ch-gh" style="background:#001020"><div class="ch-gh-logo">Familienarchiv</div><div class="ch-gh-nav"><span>Dokumente</span><span>Personen</span><span class="on">Chronik</span></div><div class="ch-gh-bell"></div></div>
|
||
<div class="ch-wrap">
|
||
<div class="ch-back">← Zurück zur Übersicht</div>
|
||
<div class="ch-hdr"><div class="ch-title">Chronik</div></div>
|
||
<div class="ch-fy"><div class="ch-fy-empty"><div class="ch-fy-empty-ic">✓</div><div class="ch-fy-empty-t">Keine neuen Erwähnungen</div><div class="ch-fy-empty-link">Ältere Erwähnungen ansehen →</div></div></div>
|
||
<div class="ch-fp"><div class="ch-pill on">Alle</div><div class="ch-pill">Für dich</div><div class="ch-pill">Hochgeladen</div><div class="ch-pill">Transkription</div><div class="ch-pill">Kommentare</div></div>
|
||
<div class="ch-dh"><div class="ch-dh-t">Heute</div></div>
|
||
<div class="ch-row"><div class="ch-av av-anna">AR</div><div class="ch-body"><div class="ch-row-t1"><b>Anna</b> transkribierte <span class="ch-row-badge">20 Blöcke</span></div></div><div class="ch-time">14:02</div></div>
|
||
<div class="ch-row"><div class="ch-av av-papa">PR</div><div class="ch-body"><div class="ch-row-t1"><b>Papa</b> lud <span class="ch-row-badge">3 Dok.</span> hoch</div></div><div class="ch-time">11:08</div></div>
|
||
<div class="ch-row mine"><div class="ch-mk">@</div><div class="ch-av av-mama">MR</div><div class="ch-body"><div class="ch-row-t1"><b>Mama</b> erwähnte dich</div></div><div class="ch-time">14:32</div></div>
|
||
<div class="ch-dh"><div class="ch-dh-t">Gestern</div></div>
|
||
<div class="ch-row"><div class="ch-av av-oma">OR</div><div class="ch-body"><div class="ch-row-t1"><b>Oma</b> kommentierte <a>Brief 39</a></div></div><div class="ch-time">18:47</div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Dark · Transkription -->
|
||
<div class="sb">
|
||
<span class="sl"><span class="sl-vp" style="background:#000">1440 · Transkription · Dark</span></span>
|
||
<div class="wf wf-d dark">
|
||
<div class="wf-bar"><span class="dot r"></span><span class="dot y"></span><span class="dot g"></span><div class="urlbar"><span>/chronik?filter=transkription</span></div></div>
|
||
<div class="ch dark">
|
||
<div class="ch-gh" style="background:#001020"><div class="ch-gh-logo">Familienarchiv</div><div class="ch-gh-nav"><span>Dokumente</span><span>Personen</span><span class="on">Chronik</span></div><div class="ch-gh-bell"></div></div>
|
||
<div class="ch-wrap">
|
||
<div class="ch-back">← Zurück zur Übersicht</div>
|
||
<div class="ch-hdr"><div class="ch-title">Chronik</div></div>
|
||
<div class="ch-fy"><div class="ch-fy-empty"><div class="ch-fy-empty-ic">✓</div><div class="ch-fy-empty-t">Keine neuen Erwähnungen</div><div class="ch-fy-empty-link">Ältere ansehen →</div></div></div>
|
||
<div class="ch-fp"><div class="ch-pill">Alle</div><div class="ch-pill">Für dich</div><div class="ch-pill">Hochgeladen</div><div class="ch-pill on">Transkription</div><div class="ch-pill">Kommentare</div></div>
|
||
<div class="ch-dh"><div class="ch-dh-t">Heute</div></div>
|
||
<div class="ch-row"><div class="ch-av av-anna">AR</div><div class="ch-body"><div class="ch-row-t1"><b>Anna</b> transkribierte <span class="ch-row-badge">20 Blöcke</span> in <a>Brief 42</a></div></div><div class="ch-time">14:02</div></div>
|
||
<div class="ch-row"><div class="ch-av av-felix">FB</div><div class="ch-body"><div class="ch-row-t1"><b>Felix</b> überprüfte <span class="ch-row-badge">5 Blöcke</span> in <a>Brief 38</a></div></div><div class="ch-time">10:24</div></div>
|
||
<div class="ch-dh"><div class="ch-dh-t">Gestern</div></div>
|
||
<div class="ch-row"><div class="ch-av av-anna">AR</div><div class="ch-body"><div class="ch-row-t1"><b>Anna</b> erstellte Annotation auf <a>Brief 37</a></div></div><div class="ch-time">16:03</div></div>
|
||
<div class="ch-row"><div class="ch-av av-mama">MR</div><div class="ch-body"><div class="ch-row-t1"><b>Mama</b> transkribierte <span class="ch-row-badge">8 Blöcke</span></div></div><div class="ch-time">11:30</div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="ann ann-info"><strong>Dark-Mode-Regeln, die aus dem Light-Mode abweichen.</strong>
|
||
<ul>
|
||
<li><code>--c-accent</code> wechselt von Mint (<code>#a1dcd8</code>) zu Turquoise (<code>#00c7b1</code>) — auf dunklem Hintergrund ist der Sättigungssprung nötig, damit die For-Dich-Lane sichtbar bleibt (6.8:1 auf Canvas).</li>
|
||
<li><code>--c-primary</code> 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.</li>
|
||
<li>Focus-Ring wechselt von Navy zu Mint (9.2:1 auf Canvas) — keine Anpassung im Markup nötig, die Tokens regeln das.</li>
|
||
<li>Kein <code>filter: invert()</code>. Jeder Token wird gezielt neu gemappt.</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="impl-ref">
|
||
<div class="impl-ref-hdr">Dark Mode — Contrast Verification<span>real tokens from layout.css</span></div>
|
||
<table>
|
||
<thead><tr><th>Pair</th><th>Value</th><th>Ratio</th><th>WCAG</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>Body text (ink on surface)</td><td><code>#f0efe9 on #011526</code></td><td class="ir-px">14.2:1</td><td>AAA ✓</td></tr>
|
||
<tr><td>Secondary text (ink-2 on surface)</td><td><code>#9ca3af on #011526</code></td><td class="ir-px">7.5:1</td><td>AAA ✓ (body)</td></tr>
|
||
<tr><td>Tertiary text (ink-3 on surface)</td><td><code>#8b97a5 on #011526</code></td><td class="ir-px">7.1:1</td><td>AAA ✓ (body)</td></tr>
|
||
<tr><td>Primary pill bg vs text</td><td><code>#a1dcd8 / #012851</code></td><td class="ir-px">9.8:1</td><td>AAA ✓</td></tr>
|
||
<tr><td>Accent bg (for-you lane) on canvas</td><td><code>rgba(0,199,177,0.12)</code> effective</td><td class="ir-px">decorative</td><td>n/a (border is cue)</td></tr>
|
||
<tr><td>Turquoise dot on surface</td><td><code>#00c7b1 on #011526</code></td><td class="ir-px">6.8:1</td><td>AA ✓</td></tr>
|
||
<tr><td>Focus ring on canvas</td><td><code>#a1dcd8 on #010e1e</code></td><td class="ir-px">9.2:1</td><td>AAA ✓</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ══════════════════════════════════════════════════════
|
||
SECTION 4 — ROW ANATOMY CLOSE-UPS
|
||
════════════════════════════════════════════════════════ -->
|
||
<section class="sec">
|
||
<h2 class="sec-h"><span class="sec-num">04</span>Row Anatomy · Close-Ups at ~100% Scale</h2>
|
||
<p class="sec-intro">
|
||
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 <code>ChronikRow.svelte</code> component.
|
||
</p>
|
||
|
||
<!-- Shared close-up styles -->
|
||
<style>
|
||
.cu{background:#fff;border:1px solid #e4e2d7;border-radius:6px;padding:20px 24px;margin-bottom:20px}
|
||
.cu.dark{background:#011526;border-color:#0d3358}
|
||
.cu-t{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:#666;margin-bottom:10px}
|
||
.cu-row{display:flex;align-items:flex-start;gap:12px;padding:14px 0;border-bottom:1px solid #f1ede3;position:relative}
|
||
.cu.dark .cu-row{border-bottom-color:#092843}
|
||
.cu-row.mine{background:rgba(161,220,216,.15);border-left:3px solid #a1dcd8;padding-left:12px;border-radius:3px}
|
||
.cu.dark .cu-row.mine{background:rgba(0,199,177,.12);border-left-color:#00c7b1}
|
||
.cu-av{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:13px;flex-shrink:0;margin-top:2px}
|
||
.cu-body{flex:1;min-width:0}
|
||
.cu-t1{font-size:15px;color:#012851;line-height:1.5}
|
||
.cu.dark .cu-t1{color:#f0efe9}
|
||
.cu-t1 b{font-weight:700}
|
||
.cu-t1 a{text-decoration:underline;text-decoration-color:#a1dcd8;text-underline-offset:2px}
|
||
.cu.dark .cu-t1 a{text-decoration-color:#00c7b1}
|
||
.cu-t2{font-size:13px;color:#4b5563;font-style:italic;line-height:1.55;margin-top:4px}
|
||
.cu.dark .cu-t2{color:#9ca3af}
|
||
.cu-badge{display:inline-block;background:#012851;color:#fff;font-size:11px;font-weight:800;padding:2px 7px;border-radius:3px;margin-right:3px;letter-spacing:.2px}
|
||
.cu.dark .cu-badge{background:#a1dcd8;color:#012851}
|
||
.cu-time{font-size:13px;color:#6b7280;flex-shrink:0;min-width:92px;text-align:right;margin-top:4px;font-family:'Helvetica Neue';font-variant-numeric:tabular-nums}
|
||
.cu.dark .cu-time{color:#8b97a5}
|
||
.cu-mk{flex-shrink:0;width:24px;height:24px;background:rgba(161,220,216,.35);color:#012851;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;margin-top:6px}
|
||
.cu.dark .cu-mk{background:rgba(0,199,177,.25);color:#a1dcd8}
|
||
.cu-marks{position:absolute;font-size:9px;color:#F87171;font-weight:700;pointer-events:none}
|
||
</style>
|
||
|
||
<!-- Row type 1: Simple activity row -->
|
||
<div class="cu">
|
||
<div class="cu-t">Type A · Simple activity row (upload, single annotation)</div>
|
||
<div class="cu-row">
|
||
<div class="cu-av" style="background:#3060b0">PR</div>
|
||
<div class="cu-body">
|
||
<div class="cu-t1"><b>Papa</b> lud <a>Brief Nr. 42 · Hamburg 1947</a> hoch</div>
|
||
</div>
|
||
<div class="cu-time">11:08</div>
|
||
</div>
|
||
<div class="impl-ref" style="margin-top:14px">
|
||
<div class="impl-ref-hdr">Type A — Simple Row<span>FILE_UPLOADED, single ANNOTATION_CREATED</span></div>
|
||
<table>
|
||
<thead><tr><th>Part</th><th>Classes</th><th>Real</th><th>Note</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>Row container</td><td><code>flex items-start gap-3 py-3 border-b border-line</code></td><td class="ir-px">56 px min</td><td>Compact (no preview)</td></tr>
|
||
<tr><td>Avatar</td><td><code>w-10 h-10 rounded-full flex items-center justify-center text-white font-bold text-sm</code></td><td class="ir-px">40 px</td><td>Color from <code>actor.color</code></td></tr>
|
||
<tr><td>Text line 1</td><td><code>text-[15px] leading-[1.5] text-ink</code> with <code><strong></code> on actor</td><td class="ir-px">15 px / 400+700</td><td>Document link underlined with accent</td></tr>
|
||
<tr><td>Time</td><td><code>text-sm text-ink-3 tabular-nums whitespace-nowrap ml-auto</code></td><td class="ir-px">14 px</td><td>Right-aligned, min-width 90 px</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Row type 2: Rollup row -->
|
||
<div class="cu">
|
||
<div class="cu-t">Type B · Rollup row (N Blöcke, Zeitspanne)</div>
|
||
<div class="cu-row">
|
||
<div class="cu-av" style="background:#a0522d">AR</div>
|
||
<div class="cu-body">
|
||
<div class="cu-t1"><b>Anna</b> transkribierte <span class="cu-badge">20 Blöcke</span> in <a>Brief Nr. 42 · Hamburg 1947</a></div>
|
||
</div>
|
||
<div class="cu-time">14:02–14:32</div>
|
||
</div>
|
||
<div class="ann ann-info" style="margin-top:10px">
|
||
<strong>Wann erscheint der Badge?</strong> Ab 2 Events im Rollup-Fenster. 1 Event → normales Verb ("Anna transkribierte Block in…"). Der Badge zeigt die Gesamtzahl, nie die Blocknummern einzeln.
|
||
</div>
|
||
<div class="impl-ref" style="margin-top:14px">
|
||
<div class="impl-ref-hdr">Type B — Rollup Row<span>same actor + doc, 2h window</span></div>
|
||
<table>
|
||
<thead><tr><th>Part</th><th>Classes</th><th>Real</th><th>Note</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>Count badge</td><td><code>inline-block bg-primary text-primary-fg text-xs font-bold px-2 py-0.5 rounded-sm mr-1 tracking-tight</code></td><td class="ir-px">12 px / 700</td><td>"20 Blöcke", "3 Dokumente", "5 Fotos"</td></tr>
|
||
<tr><td>Time range</td><td><code>text-sm text-ink-3 tabular-nums whitespace-nowrap</code></td><td class="ir-px">14 px</td><td>en-dash between times, never hyphen</td></tr>
|
||
<tr><td>Verb copy</td><td><code>m.rollup_text_saved({ count })</code></td><td class="ir-px">via Paraglide</td><td>Plural forms handled by Paraglide</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Row type 3: Comment row with preview -->
|
||
<div class="cu">
|
||
<div class="cu-t">Type C · Comment row (with inline preview)</div>
|
||
<div class="cu-row">
|
||
<div class="cu-av" style="background:#7a4f9a">OR</div>
|
||
<div class="cu-body">
|
||
<div class="cu-t1"><b>Oma</b> kommentierte <a>Brief Nr. 39 · München 1952</a></div>
|
||
<div class="cu-t2">"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"</div>
|
||
</div>
|
||
<div class="cu-time">18:47</div>
|
||
</div>
|
||
<div class="impl-ref" style="margin-top:14px">
|
||
<div class="impl-ref-hdr">Type C — Comment with Preview<span>COMMENT_ADDED, never rolled up</span></div>
|
||
<table>
|
||
<thead><tr><th>Part</th><th>Classes</th><th>Real</th><th>Note</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>Preview text</td><td><code>text-[13px] italic leading-relaxed text-ink-2 mt-1 line-clamp-2</code></td><td class="ir-px">13 px / italic</td><td>Max 2 lines at ≥640 px; 1 line with ellipsis at <640 px</td></tr>
|
||
<tr><td>Preview length</td><td>Truncated server-side to <code>~140 chars</code> + "…"</td><td class="ir-px">body</td><td>Never render unbounded comment content</td></tr>
|
||
<tr><td>Quote marks</td><td>Literal German quotes: "…"</td><td class="ir-px">U+201E / U+201C</td><td>Wrap the truncated string</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Row type 4: For-you mention row -->
|
||
<div class="cu">
|
||
<div class="cu-t">Type D · For-You lane row (read or unread mention in timeline)</div>
|
||
<div class="cu-row mine">
|
||
<div class="cu-mk">@</div>
|
||
<div class="cu-av" style="background:#c0446e">MR</div>
|
||
<div class="cu-body">
|
||
<div class="cu-t1"><b>Mama</b> erwähnte dich in <a>Brief Nr. 42 · Hamburg 1947</a></div>
|
||
<div class="cu-t2">"schau mal, das ist Omas Handschrift von 1952 — ich glaube, das ist der Brief an Tante Elke"</div>
|
||
</div>
|
||
<div class="cu-time">14:32</div>
|
||
</div>
|
||
<div class="ann ann-ok" style="margin-top:10px">
|
||
<strong>Redundante Merkmale für die For-Dich-Lane.</strong>
|
||
<ul>
|
||
<li>Linker Rand: 3 px brand-mint (light) / turquoise (dark). Nie "nur Farbe" — immer mit @ / ↩ Marker kombiniert.</li>
|
||
<li>Hintergrund: <code>bg-accent-bg</code> (~12 % Opazität). Contrast ratio mit Body-Text: 13.9:1 (unverändert, weil Text-Farbe gleich bleibt).</li>
|
||
<li>Der @ / ↩ Marker im Kreis ist der primäre ikonografische Hinweis; Screenreader ignorieren ihn (<code>aria-hidden</code>), weil die Textzeile ("erwähnte dich") die gleiche Info semantisch transportiert.</li>
|
||
</ul>
|
||
</div>
|
||
<div class="impl-ref" style="margin-top:14px">
|
||
<div class="impl-ref-hdr">Type D — For-You Lane Row<span>MENTION_CREATED, COMMENT_ADDED where mentionedUserId = currentUserId</span></div>
|
||
<table>
|
||
<thead><tr><th>Part</th><th>Classes</th><th>Real</th><th>Note</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>Row container</td><td><code>flex items-start gap-3 py-3 border-l-[3px] border-accent bg-accent-bg/60 pl-3 -ml-3 rounded-sm</code></td><td class="ir-px">border 3 px</td><td>Negative margin compensates pl to keep vertical alignment with other rows</td></tr>
|
||
<tr><td>@ marker</td><td><code>w-6 h-6 rounded-full bg-accent-bg text-ink flex items-center justify-center font-bold shrink-0 mt-1</code></td><td class="ir-px">24 px</td><td>Glyph: @ for MENTION, ↩ (U+21A9) for REPLY</td></tr>
|
||
<tr><td>Unread dot (if unread)</td><td><code>absolute top-2 -left-1 w-2 h-2 rounded-full bg-accent</code></td><td class="ir-px">8 px</td><td>Adds dot next to the @ marker; aria-label "ungelesen"</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Row type 4 (dark mode variant) -->
|
||
<div class="cu dark">
|
||
<div class="cu-t" style="color:#8b97a5">Type D · Dark mode variant</div>
|
||
<div class="cu-row mine">
|
||
<div class="cu-mk">@</div>
|
||
<div class="cu-av" style="background:#c0446e">MR</div>
|
||
<div class="cu-body">
|
||
<div class="cu-t1"><b>Mama</b> erwähnte dich in <a>Brief Nr. 42 · Hamburg 1947</a></div>
|
||
<div class="cu-t2">"schau mal, das ist Omas Handschrift von 1952 — ich glaube, das ist der Brief an Tante Elke"</div>
|
||
</div>
|
||
<div class="cu-time">14:32</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ══════════════════════════════════════════════════════
|
||
SECTION 5 — INTERACTION STATES
|
||
════════════════════════════════════════════════════════ -->
|
||
<section class="sec">
|
||
<h2 class="sec-h"><span class="sec-num">05</span>Interaction States</h2>
|
||
<p class="sec-intro">
|
||
Every interactive control at every visible state: default, hover, focus, active (pressed), and where relevant disabled. Pointer-driven states (<code>:hover</code>) and keyboard-driven states (<code>:focus-visible</code>) are shown separately because they MUST render differently — the focus ring only appears for keyboard navigation.
|
||
</p>
|
||
|
||
<!-- Filter pills all states -->
|
||
<h3 class="sec-sub">5.1 Filter Pills</h3>
|
||
<style>
|
||
.pill-demo{background:#fff;border:1px solid #e4e2d7;border-radius:6px;padding:20px 24px;margin-bottom:18px}
|
||
.pill-demo.dark{background:#011526;border-color:#0d3358}
|
||
.pill-demo .row{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
|
||
.pill-demo .row:last-child{margin-bottom:0}
|
||
.pill-demo .lbl{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:1px;color:#888;min-width:70px}
|
||
.pill-real{font-family:'Montserrat','Helvetica Neue',sans-serif;font-size:14px;font-weight:500;padding:8px 14px;border-radius:999px;background:#f5f4ef;color:#012851;min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center;border:1px solid transparent}
|
||
.pill-real.on{background:#012851;color:#fff}
|
||
.pill-real.hover{background:#e4e2d7;color:#012851}
|
||
.pill-real.on.hover{background:#003a72;color:#fff}
|
||
.pill-real.focus{outline:2px solid #012851;outline-offset:2px}
|
||
.pill-real.on.focus{outline-color:#012851;outline-offset:2px}
|
||
.pill-real.pressed{background:#012851;color:#fff;transform:translateY(1px)}
|
||
.pill-demo.dark .pill-real{background:#011a30;color:#f0efe9}
|
||
.pill-demo.dark .pill-real.on{background:#a1dcd8;color:#012851}
|
||
.pill-demo.dark .pill-real.hover{background:#022a50;color:#f0efe9}
|
||
.pill-demo.dark .pill-real.on.hover{background:#8acac5;color:#012851}
|
||
.pill-demo.dark .pill-real.focus{outline-color:#a1dcd8}
|
||
</style>
|
||
|
||
<div class="pill-demo">
|
||
<div class="row"><span class="lbl">Default</span><span class="pill-real">Alle</span><span class="pill-real on">Alle</span></div>
|
||
<div class="row"><span class="lbl">Hover</span><span class="pill-real hover">Alle</span><span class="pill-real on hover">Alle</span></div>
|
||
<div class="row"><span class="lbl">Focus</span><span class="pill-real focus">Alle</span><span class="pill-real on focus">Alle</span></div>
|
||
<div class="row"><span class="lbl">Pressed</span><span class="pill-real pressed">Alle</span><span class="pill-real on pressed">Alle</span></div>
|
||
<div class="row"><span class="lbl">→ Light · Inactive = gray-sand; Active = navy / white; Hover darkens; Focus ring = 2 px navy with 2 px offset.</span></div>
|
||
</div>
|
||
<div class="pill-demo dark">
|
||
<div class="row"><span class="lbl">Default</span><span class="pill-real">Alle</span><span class="pill-real on">Alle</span></div>
|
||
<div class="row"><span class="lbl">Hover</span><span class="pill-real hover">Alle</span><span class="pill-real on hover">Alle</span></div>
|
||
<div class="row"><span class="lbl">Focus</span><span class="pill-real focus">Alle</span><span class="pill-real on focus">Alle</span></div>
|
||
<div class="row"><span class="lbl" style="color:#8b97a5">→ Dark · Inactive = muted-navy; Active = mint / navy; Focus ring = 2 px mint (9.2:1 on canvas).</span></div>
|
||
</div>
|
||
|
||
<div class="impl-ref">
|
||
<div class="impl-ref-hdr">Filter Pill States<span>role="radio" within role="radiogroup"</span></div>
|
||
<table>
|
||
<thead><tr><th>State</th><th>Classes</th><th>Ratio</th><th>Note</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>Default inactive</td><td><code>bg-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-center</code></td><td class="ir-px">44 px min</td><td>Senior-friendly touch target</td></tr>
|
||
<tr><td>Default active</td><td><code>bg-primary text-primary-fg hover:bg-primary/90</code></td><td class="ir-px">14.5:1 light</td><td>Unambiguous when active</td></tr>
|
||
<tr><td>Focus visible</td><td><code>focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:outline-none</code></td><td class="ir-px">2 px ring</td><td>Never <code>:focus</code> — only keyboard</td></tr>
|
||
<tr><td>Pressed</td><td><code>active:translate-y-px active:bg-primary/95</code></td><td class="ir-px">1 px nudge</td><td>Confirms the tap</td></tr>
|
||
<tr><td>Disabled</td><td>Not used — pills never disable; if no events match, filter still selectable and empty-state renders instead.</td><td class="ir-px">n/a</td><td>Avoid dead UI</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<!-- Für dich row states -->
|
||
<h3 class="sec-sub">5.2 Für dich Row · Mark-as-read Button</h3>
|
||
<style>
|
||
.fy-demo{background:#fff;border:1px solid #e4e2d7;border-radius:6px;padding:20px 24px;margin-bottom:18px}
|
||
.fy-rrow{display:flex;align-items:flex-start;gap:12px;padding:10px 0;border-bottom:1px solid #f1ede3}
|
||
.fy-rrow:last-child{border-bottom:none}
|
||
.fy-lbl{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:1px;color:#888;min-width:80px;margin-top:6px}
|
||
.fy-dot{width:8px;height:8px;border-radius:50%;background:#00c7b1;flex-shrink:0;margin-top:7px}
|
||
.fy-ic{width:22px;height:22px;border-radius:50%;background:rgba(161,220,216,.3);color:#012851;font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px}
|
||
.fy-txt{flex:1;font-size:14px;color:#012851}
|
||
.fy-btn{width:40px;height:40px;border-radius:4px;border:1px solid #e4e2d7;background:#fff;color:#6b7280;font-size:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
|
||
.fy-btn.hover{background:#f5f4ef;color:#012851;border-color:#d0cec4}
|
||
.fy-btn.focus{outline:2px solid #012851;outline-offset:2px}
|
||
.fy-btn.pressed{background:#e4e2d7;transform:translateY(1px)}
|
||
.fy-btn.done{background:#012851;color:#a1dcd8;border-color:#012851}
|
||
</style>
|
||
|
||
<div class="fy-demo">
|
||
<div class="fy-rrow"><span class="fy-lbl">Default</span><div class="fy-dot"></div><div class="fy-ic">@</div><div class="fy-txt"><b>Mama</b> erwähnte dich in <b>Brief Nr. 42</b></div><div class="fy-btn">✓</div></div>
|
||
<div class="fy-rrow"><span class="fy-lbl">Btn hover</span><div class="fy-dot"></div><div class="fy-ic">@</div><div class="fy-txt"><b>Mama</b> erwähnte dich in <b>Brief Nr. 42</b></div><div class="fy-btn hover">✓</div></div>
|
||
<div class="fy-rrow"><span class="fy-lbl">Btn focus</span><div class="fy-dot"></div><div class="fy-ic">@</div><div class="fy-txt"><b>Mama</b> erwähnte dich in <b>Brief Nr. 42</b></div><div class="fy-btn focus">✓</div></div>
|
||
<div class="fy-rrow"><span class="fy-lbl">Btn pressed</span><div class="fy-dot"></div><div class="fy-ic">@</div><div class="fy-txt"><b>Mama</b> erwähnte dich in <b>Brief Nr. 42</b></div><div class="fy-btn pressed">✓</div></div>
|
||
<div class="fy-rrow" style="opacity:.6"><span class="fy-lbl">Post-click (row fades out in ~200ms, then row removed from box; count decrements)</span><div class="fy-dot" style="background:transparent"></div><div class="fy-ic" style="background:#f5f4ef">@</div><div class="fy-txt"><b>Mama</b> erwähnte dich in <b>Brief Nr. 42</b></div><div class="fy-btn done">✓</div></div>
|
||
</div>
|
||
|
||
<div class="impl-ref">
|
||
<div class="impl-ref-hdr">Dismiss Button<span>aria-label="Als gelesen markieren"</span></div>
|
||
<table>
|
||
<thead><tr><th>State</th><th>Classes</th><th>Real</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>Default</td><td><code>w-11 h-11 rounded-sm border border-line bg-surface text-ink-3 flex items-center justify-center</code></td><td class="ir-px">44 × 44 px</td></tr>
|
||
<tr><td>Hover</td><td><code>hover:bg-muted hover:text-ink hover:border-line-2</code></td><td class="ir-px">—</td></tr>
|
||
<tr><td>Focus</td><td><code>focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:outline-none</code></td><td class="ir-px">2 px</td></tr>
|
||
<tr><td>Active</td><td><code>active:translate-y-px active:bg-line</code></td><td class="ir-px">1 px</td></tr>
|
||
<tr><td>After click</td><td>Row animates out over 200 ms, <code>aria-live="polite"</code> count badge updates, then DOM element removed</td><td class="ir-px">200 ms</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<!-- Alle gelesen button -->
|
||
<h3 class="sec-sub">5.3 "Alle gelesen" Action Button (page header)</h3>
|
||
<style>
|
||
.ag-demo{background:#fff;border:1px solid #e4e2d7;border-radius:6px;padding:20px 24px;margin-bottom:18px;display:flex;flex-direction:column;gap:10px}
|
||
.ag-row{display:flex;align-items:center;gap:16px}
|
||
.ag-lbl{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:1px;color:#888;min-width:80px}
|
||
.ag-btn{font-family:'Montserrat',sans-serif;font-size:14px;font-weight:500;color:#4b5563;padding:10px 14px;border-radius:4px;min-height:44px;background:transparent;display:inline-flex;align-items:center}
|
||
.ag-btn.hover{color:#012851;background:#f5f4ef}
|
||
.ag-btn.focus{outline:2px solid #012851;outline-offset:2px;color:#012851}
|
||
.ag-btn.pressed{color:#012851;background:#e4e2d7;transform:translateY(1px)}
|
||
.ag-btn.done{color:#888;opacity:.6;pointer-events:none}
|
||
</style>
|
||
<div class="ag-demo">
|
||
<div class="ag-row"><span class="ag-lbl">Default</span><span class="ag-btn">Alle gelesen</span></div>
|
||
<div class="ag-row"><span class="ag-lbl">Hover</span><span class="ag-btn hover">Alle gelesen</span></div>
|
||
<div class="ag-row"><span class="ag-lbl">Focus</span><span class="ag-btn focus">Alle gelesen</span></div>
|
||
<div class="ag-row"><span class="ag-lbl">Pressed</span><span class="ag-btn pressed">Alle gelesen</span></div>
|
||
<div class="ag-row"><span class="ag-lbl">Hidden</span><span style="font-size:12px;color:#888;font-style:italic">Button is not rendered when unreadCount === 0 (never a disabled state)</span></div>
|
||
</div>
|
||
|
||
<!-- Timeline row hover/focus -->
|
||
<h3 class="sec-sub">5.4 Timeline Row Interaction</h3>
|
||
<style>
|
||
.tr-demo{background:#fff;border:1px solid #e4e2d7;border-radius:6px;padding:20px 24px;margin-bottom:18px}
|
||
.tr-r{display:flex;align-items:flex-start;gap:12px;padding:12px;border-radius:4px;margin-bottom:4px;cursor:pointer}
|
||
.tr-r.hover{background:#f5f4ef}
|
||
.tr-r.focus{outline:2px solid #012851;outline-offset:2px;background:#f5f4ef}
|
||
.tr-av{width:40px;height:40px;border-radius:50%;background:#a0522d;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px}
|
||
.tr-t{font-size:14px;color:#012851;line-height:1.5;flex:1}
|
||
.tr-t a{text-decoration:underline;text-decoration-color:#a1dcd8}
|
||
.tr-tm{font-size:12px;color:#6b7280}
|
||
.tr-lbl{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:1px;color:#888;margin-bottom:4px;padding-left:12px}
|
||
</style>
|
||
<div class="tr-demo">
|
||
<div class="tr-lbl">Default</div>
|
||
<div class="tr-r"><div class="tr-av">AR</div><div class="tr-t"><b>Anna</b> transkribierte <span style="background:#012851;color:#fff;padding:1px 6px;border-radius:2px;font-size:11px;font-weight:800">20 Blöcke</span> in <a>Brief Nr. 42</a></div><div class="tr-tm">14:02</div></div>
|
||
<div class="tr-lbl">Hover (cursor pointer)</div>
|
||
<div class="tr-r hover"><div class="tr-av">AR</div><div class="tr-t"><b>Anna</b> transkribierte <span style="background:#012851;color:#fff;padding:1px 6px;border-radius:2px;font-size:11px;font-weight:800">20 Blöcke</span> in <a>Brief Nr. 42</a></div><div class="tr-tm">14:02</div></div>
|
||
<div class="tr-lbl">Focus (keyboard)</div>
|
||
<div class="tr-r focus"><div class="tr-av">AR</div><div class="tr-t"><b>Anna</b> transkribierte <span style="background:#012851;color:#fff;padding:1px 6px;border-radius:2px;font-size:11px;font-weight:800">20 Blöcke</span> in <a>Brief Nr. 42</a></div><div class="tr-tm">14:02</div></div>
|
||
</div>
|
||
|
||
<div class="impl-ref">
|
||
<div class="impl-ref-hdr">Timeline Row<span>rendered as <code><a href="/documents/{id}"></code> — entire row is the link</span></div>
|
||
<table>
|
||
<thead><tr><th>State</th><th>Classes</th><th>Real</th><th>Note</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>Default</td><td><code>flex items-start gap-3 p-3 -mx-3 rounded-sm</code></td><td class="ir-px">72 px target</td><td>Negative margin so hover-bg reaches beyond text</td></tr>
|
||
<tr><td>Hover</td><td><code>hover:bg-muted transition-colors</code></td><td class="ir-px">—</td><td>150 ms transition; disabled under <code>motion-reduce</code></td></tr>
|
||
<tr><td>Focus</td><td><code>focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:outline-none focus-visible:bg-muted</code></td><td class="ir-px">2 px ring</td><td>Ring on <b>row</b>, not on inner link text</td></tr>
|
||
<tr><td>Click target</td><td>Whole row navigates; inner doc link uses <code>pointer-events:none</code> so outer row handles navigation.</td><td class="ir-px">—</td><td>Prevents nested-link a11y issues</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ══════════════════════════════════════════════════════
|
||
SECTION 6 — ACCESSIBILITY CONTRACT
|
||
════════════════════════════════════════════════════════ -->
|
||
<section class="sec">
|
||
<h2 class="sec-h"><span class="sec-num">06</span>Accessibility Contract</h2>
|
||
<p class="sec-intro">
|
||
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.
|
||
</p>
|
||
|
||
<div class="ann-pair">
|
||
<div class="ann ann-ok">
|
||
<strong>✓ Erfüllt in dieser Spec:</strong>
|
||
<ul>
|
||
<li>Semantische Landmarks: <code><main></code>, <code><nav></code> für Back-Link und Filter, <code><section aria-labelledby></code> für Für-Dich-Box.</li>
|
||
<li>Filter-Pills als <code>role="radiogroup"</code> / <code>role="radio"</code> mit <code>aria-checked</code>.</li>
|
||
<li>Unread-Count mit <code>aria-live="polite"</code> — Screenreader kündigen Änderungen an.</li>
|
||
<li>"Für dich" Empty-State Link hat einen vollen Satz als sichtbaren Text, keine Platzhalter-Alternative.</li>
|
||
<li>Alle Icons <code>aria-hidden="true"</code>, semantische Info im umgebenden Text.</li>
|
||
<li>Minimum 44×44 px Touch-Targets für alle interaktiven Elemente.</li>
|
||
<li>Tag-Grenzen als Day-Headers sind visuelle Gruppierungen, keine Landmarks — sie bekommen kein <code><h2></code>.</li>
|
||
<li><code>prefers-reduced-motion</code> deaktiviert Shimmer, Hover-Transitions, und 200 ms Row-Fade.</li>
|
||
</ul>
|
||
</div>
|
||
<div class="ann ann-warn">
|
||
<strong>⚠ Implementation muss liefern:</strong>
|
||
<ul>
|
||
<li>axe-playwright Run auf <code>/chronik</code> in Light UND Dark in E2E — beide müssen passen (kein "light-only").</li>
|
||
<li>Visual-Regression Snapshots bei 320 / 768 / 1440 px für Default + Inbox-Zero + Für-Dich-Filter.</li>
|
||
<li>Tastatur-Navigation: <code>Tab</code> 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.</li>
|
||
<li>Screenreader-Test: Der Bell-Unread-Count soll beim Öffnen einer Für-Dich-Zeile durch <code>aria-live</code> die neue Gesamtzahl ansagen ("2 neue Erwähnungen").</li>
|
||
<li>Zoom auf 200 %: Pills dürfen nicht aus dem Viewport verschwinden, Day-Headers nicht überlappen.</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="impl-ref">
|
||
<div class="impl-ref-hdr">Contrast Ratios · Real Token Values<span>measured at document surface</span></div>
|
||
<table>
|
||
<thead><tr><th>Pair</th><th>Values</th><th>Light</th><th>Dark</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>Body text (ink)</td><td>ink / surface</td><td class="ir-px">14.5:1 (AAA)</td><td class="ir-px">14.2:1 (AAA)</td></tr>
|
||
<tr><td>Secondary text (ink-2)</td><td>ink-2 / surface</td><td class="ir-px">7.6:1 (AAA)</td><td class="ir-px">7.5:1 (AAA)</td></tr>
|
||
<tr><td>Tertiary text (ink-3)</td><td>ink-3 / surface</td><td class="ir-px">4.8:1 (AA)</td><td class="ir-px">7.1:1 (AAA)</td></tr>
|
||
<tr><td>Day header</td><td>ink-3 / canvas</td><td class="ir-px">4.6:1 (AA)</td><td class="ir-px">6.9:1 (AAA)</td></tr>
|
||
<tr><td>Active pill</td><td>primary-fg / primary</td><td class="ir-px">14.5:1</td><td class="ir-px">9.8:1</td></tr>
|
||
<tr><td>Unread dot</td><td>accent / surface</td><td class="ir-px">1.5:1 (decorative)</td><td class="ir-px">6.8:1</td></tr>
|
||
<tr><td>For-you lane border</td><td>accent / canvas</td><td class="ir-px">1.5:1 (decorative + border)</td><td class="ir-px">6.8:1</td></tr>
|
||
<tr><td>Focus ring</td><td>focus-ring / canvas</td><td class="ir-px">14:1</td><td class="ir-px">9.2:1</td></tr>
|
||
<tr><td>Error card text</td><td>warning / warning-bg</td><td class="ir-px">4.8:1 (AA)</td><td class="ir-px">4.7:1 (AA)</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<div class="ann ann-info" style="margin-top:18px">
|
||
<strong>Hinweis zu <code>accent</code> als dekorativer Farbe.</strong> Light-mode accent (<code>#a1dcd8</code>) erreicht nur 1.5:1 auf weiß — das ist <em>bewusst</em>. Er darf NICHT für Text stehen. In der For-Dich-Lane ist die <em>Text</em>-Farbe weiter <code>ink</code> (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.
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ══════════════════════════════════════════════════════
|
||
SECTION 7 — IMPLEMENTATION NOTES
|
||
════════════════════════════════════════════════════════ -->
|
||
<section class="sec">
|
||
<h2 class="sec-h"><span class="sec-num">07</span>Implementation Notes for Felix</h2>
|
||
<p class="sec-intro">
|
||
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.
|
||
</p>
|
||
|
||
<h3 class="sec-sub">7.1 Routing</h3>
|
||
<div class="impl-ref">
|
||
<div class="impl-ref-hdr">Route Changes<span>SvelteKit routing</span></div>
|
||
<table>
|
||
<thead><tr><th>Route</th><th>Behavior</th><th>Note</th></tr></thead>
|
||
<tbody>
|
||
<tr><td><code>/chronik</code></td><td>New page — renders this spec</td><td>i18n slug: de=chronik, en=chronicle, es=cronica (via Paraglide routing)</td></tr>
|
||
<tr><td><code>/chronik?filter=fuer-dich</code></td><td>Filter state in query param</td><td>Values: <code>fuer-dich</code>, <code>hochgeladen</code>, <code>transkription</code>, <code>kommentare</code>. Missing = Alle.</td></tr>
|
||
<tr><td><code>/notifications</code></td><td>301 redirect to <code>/chronik</code></td><td>Preserves bookmarks; add in hooks.server.ts</td></tr>
|
||
<tr><td>Bell dropdown footer link</td><td>Changes target from <code>/notifications</code> → <code>/chronik</code>; label: "Zur Chronik →"</td><td>No other bell behavior change</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<h3 class="sec-sub">7.2 Data</h3>
|
||
<div class="impl-ref">
|
||
<div class="impl-ref-hdr">API Calls from <code>/chronik</code><span>both existing; one new endpoint optional</span></div>
|
||
<table>
|
||
<thead><tr><th>Call</th><th>Existing?</th><th>Returns</th></tr></thead>
|
||
<tbody>
|
||
<tr><td><code>GET /api/notifications?read=false&size=20</code></td><td>✓ existing</td><td>Für-dich Box items (unread MENTION + REPLY)</td></tr>
|
||
<tr><td><code>GET /api/dashboard/activity?limit=40</code></td><td>✓ existing (currently capped at 20)</td><td>Timeline items when filter is <code>Alle</code>. Raise server cap to 40 for this page.</td></tr>
|
||
<tr><td><code>GET /api/dashboard/activity?limit=40&kinds=FILE_UPLOADED</code></td><td>⊕ new query param</td><td>Filtered timeline. Query param: <code>kinds</code> (CSV of AuditKind).</td></tr>
|
||
<tr><td><code>GET /api/notifications?size=40</code></td><td>✓ existing</td><td>"Für dich" filter view (read + unread).</td></tr>
|
||
<tr><td><code>PATCH /api/notifications/{id}/read</code></td><td>✓ existing</td><td>Dismiss-button on Für-dich row.</td></tr>
|
||
<tr><td><code>POST /api/notifications/read-all</code></td><td>✓ existing</td><td>"Alle gelesen" action.</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<h3 class="sec-sub">7.3 Rollup (backend)</h3>
|
||
<div class="ann ann-warn">
|
||
<strong>Rollup logic lives in the backend.</strong>
|
||
<ul>
|
||
<li>Modify <code>AuditLogQueryRepository.findActivityFeed</code> to group consecutive rows where <code>actor_id</code>, <code>document_id</code>, <code>kind</code> match AND <code>happened_at</code> falls within 120 min of the previous row in the same group.</li>
|
||
<li>Result record shape extends <code>ActivityFeedRow</code> with <code>count</code> (int) and <code>happenedAtRange</code> (start..end). For single-event rows, <code>count = 1</code> and the range is <code>happenedAt..happenedAt</code>.</li>
|
||
<li><code>DTO</code>: extend <code>ActivityFeedItemDTO</code> with <code>count</code> and <code>happenedAtUntil</code> (optional, null for singletons).</li>
|
||
<li>Rollup applies to these kinds only: <code>TEXT_SAVED</code>, <code>ANNOTATION_CREATED</code>, <code>BLOCK_REVIEWED</code>, <code>FILE_UPLOADED</code>. <code>COMMENT_ADDED</code> and <code>MENTION_CREATED</code> stream 1:1.</li>
|
||
<li>Add <code>kinds</code> query param to <code>GET /api/dashboard/activity</code>. Default: all 6 (FILE_UPLOADED, TEXT_SAVED, BLOCK_REVIEWED, ANNOTATION_CREATED, COMMENT_ADDED, MENTION_CREATED). Never include <code>STATUS_CHANGED</code> or <code>METADATA_UPDATED</code> — they remain audit-only.</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<h3 class="sec-sub">7.4 Frontend Structure</h3>
|
||
<div class="impl-ref">
|
||
<div class="impl-ref-hdr">New Svelte Files<span>each unit is one visible region</span></div>
|
||
<table>
|
||
<thead><tr><th>File</th><th>Responsibility</th></tr></thead>
|
||
<tbody>
|
||
<tr><td><code>src/routes/chronik/+page.svelte</code></td><td>Page shell: back link, title, "Alle gelesen", Für-Dich-Box, pills, timeline. Composes the components below.</td></tr>
|
||
<tr><td><code>src/routes/chronik/+page.server.ts</code></td><td>Load: <code>/api/notifications?read=false</code> + <code>/api/dashboard/activity</code> based on query filter. Actions: mark-all.</td></tr>
|
||
<tr><td><code>src/lib/components/ChronikFuerDichBox.svelte</code></td><td>Unread mentions card with empty-state variant. Dismiss-button per row.</td></tr>
|
||
<tr><td><code>src/lib/components/ChronikFilterPills.svelte</code></td><td>5 pills, <code>role="radiogroup"</code>, navigates via <code>goto</code>.</td></tr>
|
||
<tr><td><code>src/lib/components/ChronikTimeline.svelte</code></td><td>Day-grouped timeline, renders a list of <code>ChronikRow</code>.</td></tr>
|
||
<tr><td><code>src/lib/components/ChronikRow.svelte</code></td><td>Single row: 4 types (simple, rollup, comment, for-you). Props: <code>item: ActivityFeedItemDTO</code>, <code>currentUserId</code>.</td></tr>
|
||
<tr><td><code>src/lib/components/ChronikEmptyState.svelte</code></td><td>Three variants: first-run, filter-no-result, inbox-zero (Für-dich).</td></tr>
|
||
<tr><td><code>src/lib/components/ChronikErrorCard.svelte</code></td><td>Warning card with retry button; accepts <code>onRetry</code>.</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<h3 class="sec-sub">7.5 i18n keys (Paraglide)</h3>
|
||
<div class="impl-ref">
|
||
<div class="impl-ref-hdr">New keys in messages/de.json (mirror in en.json, es.json)<span>use existing feed_* keys where possible</span></div>
|
||
<table>
|
||
<thead><tr><th>Key</th><th>de</th></tr></thead>
|
||
<tbody>
|
||
<tr><td><code>chronik_page_title</code></td><td>Chronik</td></tr>
|
||
<tr><td><code>chronik_for_you_caption</code></td><td>Für dich</td></tr>
|
||
<tr><td><code>chronik_for_you_count</code></td><td>{count} neu</td></tr>
|
||
<tr><td><code>chronik_mark_read_aria</code></td><td>Als gelesen markieren</td></tr>
|
||
<tr><td><code>chronik_mark_all_read</code></td><td>Alle gelesen</td></tr>
|
||
<tr><td><code>chronik_inbox_zero_title</code></td><td>Keine neuen Erwähnungen</td></tr>
|
||
<tr><td><code>chronik_inbox_zero_link</code></td><td>Ältere Erwähnungen ansehen →</td></tr>
|
||
<tr><td><code>chronik_filter_all</code></td><td>Alle</td></tr>
|
||
<tr><td><code>chronik_filter_for_you</code></td><td>Für dich</td></tr>
|
||
<tr><td><code>chronik_filter_uploaded</code></td><td>Hochgeladen</td></tr>
|
||
<tr><td><code>chronik_filter_transcription</code></td><td>Transkription</td></tr>
|
||
<tr><td><code>chronik_filter_comments</code></td><td>Kommentare</td></tr>
|
||
<tr><td><code>chronik_day_today</code></td><td>Heute</td></tr>
|
||
<tr><td><code>chronik_day_yesterday</code></td><td>Gestern</td></tr>
|
||
<tr><td><code>chronik_day_this_week</code></td><td>Diese Woche</td></tr>
|
||
<tr><td><code>chronik_day_older</code></td><td>Älter</td></tr>
|
||
<tr><td><code>chronik_rollup_text_saved</code></td><td>{actor} transkribierte <b>{count} Blöcke</b> in {doc}</td></tr>
|
||
<tr><td><code>chronik_rollup_uploaded</code></td><td>{actor} lud <b>{count} Dokumente</b> hoch</td></tr>
|
||
<tr><td><code>chronik_rollup_reviewed</code></td><td>{actor} überprüfte <b>{count} Blöcke</b> in {doc}</td></tr>
|
||
<tr><td><code>chronik_empty_first_run_title</code></td><td>Noch nichts geschehen</td></tr>
|
||
<tr><td><code>chronik_empty_first_run_body</code></td><td>Sobald jemand aus der Familie Dokumente hochlädt, transkribiert oder kommentiert, erscheint es hier.</td></tr>
|
||
<tr><td><code>chronik_empty_filter_title</code></td><td>Nichts in dieser Ansicht</td></tr>
|
||
<tr><td><code>chronik_error_title</code></td><td>Chronik konnte nicht geladen werden</td></tr>
|
||
<tr><td><code>chronik_error_retry</code></td><td>Erneut laden</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<h3 class="sec-sub">7.6 Dashboard activity feed — fix the wrong link</h3>
|
||
<div class="ann ann-ok">
|
||
<strong>Fix for existing bug:</strong> <code>DashboardActivityFeed.svelte</code> line ~37 currently links to <code>/documents</code>. Change <code>href="/documents"</code> → <code>href="/chronik"</code> and update <code>feed_show_all</code> label text if desired (e.g., "Zur Chronik" instead of the generic "Alle anzeigen").
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ══════════════════════════════════════════════════════
|
||
FOOTER
|
||
════════════════════════════════════════════════════════ -->
|
||
<footer style="margin-top:60px;padding-top:24px;border-top:1px solid #D8D4CE;font-size:11px;color:#888;display:flex;justify-content:space-between;align-items:center;gap:24px">
|
||
<div>
|
||
<strong style="color:#012851">Chronik Final Spec</strong> · v1.0 · Leonie Voss, UX/Design · 2026-04-20
|
||
</div>
|
||
<div style="font-family:monospace">docs/specs/chronik-spec.html</div>
|
||
</footer>
|
||
|
||
</div>
|
||
</body>
|
||
</html>
|