feat(timeline): add the "Ereignis hinzufügen" CTA to the Zeitstrahl header

Wrap the heading in a flex-wrap header so the gated add-event link drops
below the title at narrow widths instead of overflowing; the CTA targets
#781's /zeitstrahl/events/new and only shows for a WRITE_ALL viewer. Also
thread canWrite into TimelineView so a curator sees the edit pencils on
the real page. New i18n key timeline_add_event in de/en/es.

Refs #842
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-06-15 08:12:52 +02:00
parent 11bcaf7cdb
commit 9118a10e4b
5 changed files with 70 additions and 2 deletions

View File

@@ -74,7 +74,20 @@ const metaLine = $derived.by(() => {
border is intentionally omitted (the page is already bg-canvas), per the
review of REQ-001 — the sheet reads through its padding, not a frame line. -->
<div data-testid="timeline-canvas" class="rounded-[10px] bg-canvas p-6">
<h1 class="font-serif text-2xl font-bold text-brand-navy">{m.timeline_heading()}</h1>
<!-- Wrapping header so the CTA drops below the heading at narrow widths
(≤360px) instead of overflowing — #842 REQ-001. -->
<header class="flex flex-wrap items-center justify-between gap-3">
<h1 class="font-serif text-2xl font-bold text-brand-navy">{m.timeline_heading()}</h1>
{#if data.canWrite}
<a
data-testid="timeline-add-event"
href="/zeitstrahl/events/new"
class="inline-flex h-11 items-center rounded bg-primary px-4 font-sans text-sm font-medium text-primary-fg hover:opacity-90 focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
>
{m.timeline_add_event()}
</a>
{/if}
</header>
{#if hasContent}
<p data-testid="timeline-meta" class="mt-1 mb-6 font-sans text-xs text-ink-3">{metaLine}</p>
<TimelineFilters
@@ -99,7 +112,7 @@ const metaLine = $derived.by(() => {
</button>
</div>
{:else}
<TimelineView timeline={filteredTimeline} />
<TimelineView timeline={filteredTimeline} canWrite={data.canWrite} />
{/if}
</div>
</div>