906e75ec96
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>
91 lines
3.2 KiB
Svelte
91 lines
3.2 KiB
Svelte
<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';
|
|
|
|
type GeschichteRow = Pick<
|
|
components['schemas']['GeschichteSummary'],
|
|
'id' | 'title' | 'body' | 'type' | 'author' | 'publishedAt'
|
|
>;
|
|
|
|
let { geschichte }: { geschichte: GeschichteRow } = $props();
|
|
|
|
const isJourney = $derived(geschichte.type === 'JOURNEY');
|
|
|
|
const publishedAt = $derived(formatPublishedAt(geschichte.publishedAt, 'short'));
|
|
|
|
const authorName = $derived(formatAuthorName(geschichte.author));
|
|
</script>
|
|
|
|
<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"
|
|
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>
|
|
|
|
<!-- 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>
|