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

feat(journey-reader): match spec LR-2 — card layout, interlude, badge, actions; inline note in editor row
Some checks failed
CI / Unit & Component Tests (pull_request) Failing after 3m3s
Details
CI / OCR Service Tests (pull_request) Successful in 24s
Details
CI / Backend Unit Tests (pull_request) Successful in 4m11s
Details
CI / fail2ban Regex (pull_request) Successful in 45s
Details
CI / Semgrep Security Scan (pull_request) Successful in 23s
Details
CI / Compose Bucket Idempotency (pull_request) Successful in 1m5s
Details

Browse Source 
JourneyItemCard: restructure from full-<a> to div+card with meta line
(date · von X an Y) and explicit "Brief öffnen →" link; note renders as
mint-border annotation inside the card.

JourneyInterlude: remove ❦ ornament; orange-400 left-border spec classes.

JourneyReader: fix intro classes (dashed border-b); remove bottom author
actions (moved to +page.svelte metabar).

+page.svelte geschichten/[id]: badge above title with spec orange-50 classes;
Bearbeiten/Löschen in metabar right side for isJourney + canBlogWrite.

JourneyItemRow: items-center on main row; drag handle self-center; note
textarea inline in content column (removes border-t section below).

i18n: add journey_item_open, journey_item_meta_from_to to de/en/es.

Tests: update JourneyItemCard + JourneyReader specs to match new structure;
fix datePrecision 'FULL'→'DAY', add receiverCount: 0 to all test fixtures.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-06-10 19:59:32 +02:00
parent b0d75b26cd
commit 90a1bd4082
11 changed files with 203 additions and 182 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
frontend/src/lib/geschichte/JourneyItemCard.svelte
View File

@@ -14,7 +14,17 @@ let { item }: Props = $props();
// Safe: JourneyReader filters out items where document === null before rendering this component.
const doc = $derived(item.document!);
const formattedDate = $derived(doc.documentDate ? formatDate(doc.documentDate, 'short') : null);
const ariaLabel = $derived(
const metaLine = $derived.by(() => {
const parts: string[] = [];
if (formattedDate) parts.push(formattedDate);
if (doc.senderName && doc.receiverName) {
parts.push(m.journey_item_meta_from_to({ sender: doc.senderName, receiver: doc.receiverName }));
} else if (doc.senderName) {
parts.push(doc.senderName);
}
return parts.join(' · ');
});
const openAriaLabel = $derived(
formattedDate
? m.journey_item_open_aria({ date: formattedDate })
: m.journey_item_open_aria_undated()
@@ -22,22 +32,43 @@ const ariaLabel = $derived(
const hasNote = $derived(item.note != null && item.note.trim().length > 0);
</script>
<a
href="/documents/{doc.id}"
aria-label={ariaLabel}
style="display: flex; min-height: 44px; flex-direction: column"
class="flex min-h-[44px] flex-col gap-1 rounded border border-line bg-surface px-4 py-3 font-serif text-base text-ink hover:bg-muted focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
>
<span class="font-bold">{doc.title}</span>
{#if formattedDate}
<span class="font-sans text-sm text-ink-3">{formattedDate}</span>
{/if}
</a>
{#if hasNote}
<!-- plaintext — do NOT use {@html} here -->
<p class="mt-1 flex items-baseline gap-1 font-sans text-sm text-ink-3">
<span aria-hidden="true">✎</span>
{item.note}
</p>
{/if}
<div class="mb-3">
<div class="rounded-sm border border-line bg-white p-3">
<!-- plaintext — do NOT use {@html} here -->
<p class="mb-0.5 font-serif text-sm leading-snug text-ink">{doc.title}</p>
{#if metaLine}
<p class="mb-2 text-xs text-ink-3">{metaLine}</p>
{/if}
<a
href="/documents/{doc.id}"
aria-label={openAriaLabel}
class="inline-flex items-center gap-1 text-xs font-semibold text-ink hover:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
>
<svg class="h-3 w-3 shrink-0" viewBox="0 0 10 12" fill="none">
<rect x="1" y="1" width="8" height="10" rx="1" stroke="currentColor" stroke-width="1" />
<path
d="M3 4h4M3 6.5h4M3 9h2"
stroke="currentColor"
stroke-width=".7"
stroke-linecap="round"
/>
</svg>
{m.journey_item_open()}
<svg class="h-3 w-3 shrink-0" viewBox="0 0 10 10" fill="none">
<path
d="M4 2l4 3-4 3"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</a>
{#if hasNote}
<!-- plaintext — do NOT use {@html} here -->
<div class="border-mint mt-3 rounded-r-sm border-l-2 bg-surface py-1.5 pr-2 pl-3">
<p class="text-xs leading-relaxed text-ink-2 italic">{item.note}</p>
</div>
{/if}
</div>
</div>