5bff428954
Letter count + 12-month density sparkline + a >=44px keyboard-focusable expand toggle that reveals that year's LetterCards (REQ-012). Sparkline values from the shared monthHistogram. Refs #779 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
53 lines
1.7 KiB
Svelte
53 lines
1.7 KiB
Svelte
<script lang="ts">
|
|
import * as m from '$lib/paraglide/messages.js';
|
|
import Sparkline from '$lib/shared/primitives/Sparkline.svelte';
|
|
import LetterCard from './LetterCard.svelte';
|
|
import { monthHistogram } from './timelineDensity';
|
|
import type { components } from '$lib/generated/api';
|
|
|
|
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.
|
|
*/
|
|
let { letters, year }: { letters: TimelineEntryDTO[]; year: number } = $props();
|
|
|
|
let expanded = $state(false);
|
|
|
|
const counts = $derived(monthHistogram(letters, year).map((b) => b.count));
|
|
</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
|
|
>
|
|
<button
|
|
type="button"
|
|
data-testid="strip-expand"
|
|
aria-expanded={expanded}
|
|
onclick={() => (expanded = !expanded)}
|
|
style="display: inline-flex; align-items: center; min-height: 44px"
|
|
class="rounded-sm px-2 font-sans text-xs text-ink-3 hover:text-brand-navy focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-navy"
|
|
>
|
|
{m.timeline_strip_expand()}
|
|
</button>
|
|
</div>
|
|
|
|
<Sparkline
|
|
values={counts}
|
|
label={m.timeline_letters_count({ count: letters.length })}
|
|
class="mt-2"
|
|
/>
|
|
|
|
{#if expanded}
|
|
<ul class="mt-3 space-y-2">
|
|
{#each letters as letter (letter.documentId)}
|
|
<li><LetterCard entry={letter} /></li>
|
|
{/each}
|
|
</ul>
|
|
{/if}
|
|
</div>
|