feat(timeline): add GapSpan for folded empty-year runs
A thin dashed span rendering '{from}–{to} · keine Einträge', collapsing to a
single year when the run has length 1 (REQ-015).
Refs #779
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
20
frontend/src/lib/timeline/GapSpan.svelte
Normal file
20
frontend/src/lib/timeline/GapSpan.svelte
Normal file
@@ -0,0 +1,20 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import * as m from '$lib/paraglide/messages.js';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* A folded run of fully-empty interior years (REQ-015), rendered as a thin
|
||||||
|
* dashed span so the scroll stays oriented. Collapses to a single year when the
|
||||||
|
* run has length 1.
|
||||||
|
*/
|
||||||
|
let { from, to }: { from: number; to: number } = $props();
|
||||||
|
|
||||||
|
const yearLabel = $derived(from === to ? `${from}` : `${from}–${to}`);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="mx-auto my-2 flex max-w-md items-center gap-2 rounded-full border border-dashed border-line bg-canvas px-4 py-1 font-sans text-xs text-ink-3"
|
||||||
|
>
|
||||||
|
<span class="h-px flex-1 bg-line"></span>
|
||||||
|
<span><span class="font-serif text-ink-2">{yearLabel}</span> · {m.timeline_gap_empty()}</span>
|
||||||
|
<span class="h-px flex-1 bg-line"></span>
|
||||||
|
</div>
|
||||||
20
frontend/src/lib/timeline/GapSpan.svelte.spec.ts
Normal file
20
frontend/src/lib/timeline/GapSpan.svelte.spec.ts
Normal file
@@ -0,0 +1,20 @@
|
|||||||
|
import { describe, it, expect, afterEach } from 'vitest';
|
||||||
|
import { cleanup, render } from 'vitest-browser-svelte';
|
||||||
|
import GapSpan from './GapSpan.svelte';
|
||||||
|
|
||||||
|
afterEach(() => cleanup());
|
||||||
|
|
||||||
|
describe('GapSpan', () => {
|
||||||
|
it('renders a multi-year empty run as "{from}–{to} · keine Einträge" (REQ-015)', () => {
|
||||||
|
render(GapSpan, { from: 1910, to: 1914 });
|
||||||
|
expect(document.body.textContent).toContain('1910–1914');
|
||||||
|
expect(document.body.textContent).toContain('keine Einträge');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('renders a single empty year as "{year} · keine Einträge" (REQ-015)', () => {
|
||||||
|
render(GapSpan, { from: 1912, to: 1912 });
|
||||||
|
expect(document.body.textContent).toContain('1912');
|
||||||
|
expect(document.body.textContent).not.toContain('1912–1912');
|
||||||
|
expect(document.body.textContent).toContain('keine Einträge');
|
||||||
|
});
|
||||||
|
});
|
||||||
Reference in New Issue
Block a user