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

fix(geschichte): use mode-aware journey tokens for interlude and badge
All checks were successful
CI / Unit & Component Tests (pull_request) Successful in 3m45s
Details
CI / OCR Service Tests (pull_request) Successful in 23s
Details
CI / Backend Unit Tests (pull_request) Successful in 4m8s
Details
CI / fail2ban Regex (pull_request) Successful in 49s
Details
CI / Semgrep Security Scan (pull_request) Successful in 21s
Details
CI / Compose Bucket Idempotency (pull_request) Successful in 1m6s
Details

Browse Source 
The reader interlude and the LESEREISE badge hardcoded orange-50/200/
400/700, leaving light text on a light background in dark mode. Switch
to the existing journey-tint/journey/journey-border tokens already used
by the list and editor rows.

Closes #801
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-06-10 22:42:26 +02:00
parent 9c524443cf
commit 2d38122833
5 changed files with 25 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/lib/geschichte/JourneyInterlude.svelte
View File

@@ -11,7 +11,7 @@ let { note }: Props = $props();
<div
role="note"
aria-label={m.journey_interlude_aria_label()}
class="my-4 rounded-r-sm border-l-2 border-orange-400 bg-orange-50 py-2 pr-3 pl-3"
class="my-4 rounded-r-sm border-l-2 border-journey-border bg-journey-tint py-2 pr-3 pl-3"
>
<!-- plaintext — do NOT use {@html} here -->
<p class="text-base leading-relaxed text-ink italic">{note}</p>

9
frontend/src/lib/geschichte/JourneyInterlude.svelte.spec.ts
View File

@@ -35,6 +35,15 @@ describe('JourneyInterlude', () => {
expect(el?.getAttribute('aria-label')).toBe(m.journey_interlude_aria_label());
});
it('uses mode-aware journey tokens, not raw orange utilities (#801)', async () => {
render(JourneyInterlude, { props: { note: 'Notiz' } });
const block = document.querySelector('[role="note"]');
expect(block!.className).toContain('bg-journey-tint');
expect(block!.className).toContain('border-journey-border');
expect(block!.className).not.toContain('bg-orange-50');
});
it('note text uses readable body size (text-base, #800)', async () => {
render(JourneyInterlude, { props: { note: 'Notiz' } });

2
frontend/src/routes/geschichten/[id]/+page.svelte
View File

@@ -60,7 +60,7 @@ async function handleDelete() {
<header class="mb-6">
{#if isJourney}
<span
class="mb-2 inline-flex rounded-sm border border-orange-200 bg-orange-50 px-2 py-px text-[10px] font-bold tracking-widest text-orange-700 uppercase"
class="mb-2 inline-flex rounded-sm border border-journey-border bg-journey-tint px-2 py-px text-[10px] font-bold tracking-widest text-journey uppercase"
>
{m.journey_badge_detail()}
</span>

12
frontend/src/routes/geschichten/[id]/page.svelte.test.ts
View File

@@ -84,6 +84,18 @@ describe('geschichten/[id] page', () => {
}
});
it('journey badge uses mode-aware journey tokens, not raw orange utilities (#801)', async () => {
render(GeschichtePage, {
context: new Map([[CONFIRM_KEY, createConfirmService()]]),
props: { data: baseData({ geschichte: baseGeschichte({ type: 'JOURNEY' }) }) }
});
const badge = document.querySelector('h1')!.parentElement!.querySelector('span');
expect(badge!.className).toContain('bg-journey-tint');
expect(badge!.className).toContain('text-journey');
expect(badge!.className).not.toContain('bg-orange-50');
});
it('renders the author full name from firstName + lastName', async () => {
render(GeschichtePage, {
context: new Map([[CONFIRM_KEY, createConfirmService()]]),