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

feat(geschichten-list): editorial list card per spec R-1/LR-1

Browse Source 
Single white list card with the person-filter pills inside, rows split
into an author meta column (avatar, name, date, REISE badge) and a
content column (serif title, two-line excerpt). Badge moves into the
meta column on desktop and next to the title on mobile.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-06-10 21:59:17 +02:00
parent 90a1bd4082
commit 906e75ec96
2 changed files with 131 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
frontend/src/lib/geschichte/GeschichteListRow.svelte
View File

@@ -1,6 +1,7 @@
<script lang="ts">
import { m } from '$lib/paraglide/messages.js';
import { plainExcerpt } from '$lib/shared/utils/extractText';
import { getInitials, personAvatarColor } from '$lib/person/personFormat';
import { formatAuthorName, formatPublishedAt } from './utils';
import type { components } from '$lib/generated/api';
@@ -18,25 +19,72 @@ const publishedAt = $derived(formatPublishedAt(geschichte.publishedAt, 'short'))
const authorName = $derived(formatAuthorName(geschichte.author));
</script>
<a href="/geschichten/{geschichte.id}" class="block">
<div class="mb-1 flex items-center gap-1.5">
<h2 class="font-serif text-xl font-bold text-ink">{geschichte.title}</h2>
<a
href="/geschichten/{geschichte.id}"
class="group flex min-h-[44px] transition-colors hover:bg-canvas/60 focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
>
<!-- Meta column (desktop) -->
<div class="hidden w-28 shrink-0 flex-col items-start gap-1 border-r border-line-2 p-3 sm:flex">
<span
aria-hidden="true"
class="flex h-7 w-7 items-center justify-center rounded-full font-sans text-[9px] font-bold text-white"
style="background-color: {personAvatarColor(authorName)}"
>
{getInitials(authorName)}
</span>
<span class="font-sans text-xs leading-tight font-semibold text-ink">{authorName}</span>
{#if publishedAt}
<span class="font-sans text-xs text-ink-3">{publishedAt}</span>
{/if}
{#if isJourney}
<span
data-testid="journey-badge"
style="font-size: 0.75rem"
class="inline-block rounded-full bg-journey-tint px-2 py-0.5 text-xs font-bold tracking-wider text-journey uppercase"
aria-label="Lesereise"
style="font-size: 10px"
class="inline-flex items-center rounded-sm border border-journey-border bg-journey-tint px-1.5 py-px font-sans text-[10px] font-bold tracking-wide text-journey uppercase"
>
{m.journey_badge_list()}
</span>
{/if}
</div>
<p class="mb-3 font-sans text-xs text-ink-3">
{authorName}
{#if publishedAt}· {m.geschichten_published_on({ date: publishedAt })}{/if}
</p>
{#if geschichte.body}
<!-- plaintext for JOURNEY, sanitised-HTML→text for STORY; never {@html} -->
<p class="font-serif text-base text-ink-2">{plainExcerpt(geschichte.body, 150)}</p>
{/if}
<!-- Content column -->
<div class="min-w-0 flex-1 p-3 sm:px-4">
<!-- Compact meta line (mobile only) -->
<div class="mb-1 flex items-center gap-1.5 sm:hidden">
<span
aria-hidden="true"
class="flex h-4 w-4 shrink-0 items-center justify-center rounded-full font-sans text-[7px] font-bold text-white"
style="background-color: {personAvatarColor(authorName)}"
>
{getInitials(authorName)}
</span>
<span class="font-sans text-xs font-semibold text-ink">{authorName}</span>
{#if publishedAt}
<span class="ml-auto font-sans text-xs text-ink-3">{publishedAt}</span>
{/if}
</div>
<div class="mb-1 flex items-center gap-1.5">
<h2 class="font-serif text-[15px] leading-snug text-ink group-hover:underline">
{geschichte.title}
</h2>
{#if isJourney}
<span
data-testid="journey-badge-mobile"
aria-hidden="true"
style="font-size: 10px"
class="inline-flex shrink-0 items-center rounded-sm border border-journey-border bg-journey-tint px-1.5 py-px font-sans text-[10px] font-bold tracking-wide text-journey uppercase sm:hidden"
>
{m.journey_badge_list()}
</span>
{/if}
</div>
{#if geschichte.body}
<!-- plaintext for JOURNEY, sanitised-HTML→text for STORY; never {@html} -->
<p class="line-clamp-2 font-sans text-xs leading-relaxed text-ink-3">
{plainExcerpt(geschichte.body, 150)}
</p>
{/if}
</div>
</a>