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

feat(timeline): caption the density strip with ✉ + month axis (REQ-010/011)

Browse Source 
The dense-year strip count now carries the ✉ glyph (aria-hidden + sr-only
"Brief"), and beneath the sparkline a "Monats-Dichte" caption sits between
the two endpoint month labels (Jan/Dez {year}) at the ≥10px micro-axis
floor, localized via the shared month formatter. The ≥44px keyboard-
focusable "Briefe anzeigen" expand toggle is preserved unchanged.

Refs #833
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-06-14 10:52:55 +02:00
parent 144719720f
commit 6382efa65a
2 changed files with 54 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
frontend/src/lib/timeline/YearLetterStrip.svelte
View File

@@ -1,5 +1,7 @@
<script lang="ts">
import * as m from '$lib/paraglide/messages.js';
import { getLocale } from '$lib/paraglide/runtime.js';
import { formatTickLabel } from '$lib/shared/utils/monthBuckets';
import Sparkline from '$lib/shared/primitives/Sparkline.svelte';
import LetterCard from './LetterCard.svelte';
import { monthHistogram } from './timelineDensity';
@@ -10,20 +12,28 @@ type TimelineEntryDTO = components['schemas']['TimelineEntryDTO'];
/**
* Compact density view for a year with many letters (REQ-012): the letter count
* plus a 12-month density sparkline, and a ≥44px keyboard-focusable toggle that
* expands to that year's individual LetterCards.
* expands to that year's individual LetterCards. The count carries a ✉ glyph and
* the sparkline is captioned with its month-density meaning and Jan/Dez endpoint
* labels (REQ-010/011).
*/
let { letters, year }: { letters: TimelineEntryDTO[]; year: number } = $props();
let expanded = $state(false);
const counts = $derived(monthHistogram(letters, year).map((b) => b.count));
// Two endpoint month labels only (not one per bar). Pass the Jan/Dez anchors so
// the locale formatter returns a month (a bare "{year}" returns just the year).
const janLabel = $derived(formatTickLabel(`${year}-01`, getLocale()));
const dezLabel = $derived(formatTickLabel(`${year}-12`, getLocale()));
</script>
<div class="mx-auto max-w-md rounded-sm border border-line bg-surface p-3 shadow-sm">
<div class="flex items-center justify-between gap-3">
<span class="font-sans text-sm font-bold text-brand-navy"
>{m.timeline_letters_count({ count: letters.length })}</span
>
<span class="font-sans text-sm font-bold text-brand-navy">
<span aria-hidden="true">✉</span>
<span class="sr-only">{m.timeline_letter_glyph_label()}</span>
{m.timeline_letters_count({ count: letters.length })}
</span>
<button
type="button"
data-testid="strip-expand"
@@ -42,6 +52,15 @@ const counts = $derived(monthHistogram(letters, year).map((b) => b.count));
class="mt-2"
/>
<!-- Two endpoint month labels + the density caption, beneath the sparkline
(REQ-010/011). 10px is the floor for this micro-axis (the spec's 6px is
below this project's legibility floor for the 60+ transcriber audience). -->
<div class="mt-1 flex items-center justify-between gap-2 font-sans text-[10px] text-ink-3">
<span data-testid="strip-axis-label">{janLabel}</span>
<span>{m.timeline_strip_density_caption()}</span>
<span data-testid="strip-axis-label">{dezLabel}</span>
</div>
{#if expanded}
<ul class="mt-3 space-y-2">
{#each letters as letter (letter.documentId)}