feat(briefwechsel): bump row typography and drop relative-year chip
The 168px-tall thumbnail tile was dominating rows where the text column only rendered at text-xs / text-sm — visually the right column sat half-empty. Three changes: - Title: text-sm → text-lg - Summary: text-sm → text-base - Meta + tag chips: text-xs → text-sm And remove the "vor N Jahren" chip entirely. The documentDate in the meta row already carries the temporal context and the chip was adding visual noise without new information. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
@@ -2,7 +2,6 @@
|
||||
import ConversationThumbnail from '$lib/components/ConversationThumbnail.svelte';
|
||||
import TagChipList from '$lib/components/TagChipList.svelte';
|
||||
import { formatDate } from '$lib/utils/date';
|
||||
import { relativeYearsDe } from '$lib/relativeTime';
|
||||
import * as m from '$lib/paraglide/messages.js';
|
||||
|
||||
type Person = { id: string; firstName?: string | null; lastName: string; displayName: string };
|
||||
@@ -28,13 +27,11 @@ type Doc = {
|
||||
let {
|
||||
doc,
|
||||
isOut,
|
||||
showOtherParty,
|
||||
now = new Date()
|
||||
showOtherParty
|
||||
}: {
|
||||
doc: Doc;
|
||||
isOut: boolean;
|
||||
showOtherParty: boolean;
|
||||
now?: Date;
|
||||
} = $props();
|
||||
|
||||
const title = $derived(doc.title || doc.originalFilename);
|
||||
@@ -45,9 +42,6 @@ const otherPartyName = $derived(
|
||||
: (doc.sender?.displayName ?? '')
|
||||
: ''
|
||||
);
|
||||
const relativeYearLabel = $derived(
|
||||
doc.documentDate ? relativeYearsDe(new Date(doc.documentDate + 'T12:00:00'), now) : ''
|
||||
);
|
||||
const directionLabel = $derived(isOut ? m.row_direction_sent() : m.row_direction_received());
|
||||
const ariaLabel = $derived(
|
||||
`${directionLabel}: ${title}${doc.documentDate ? `, ${formatDate(doc.documentDate)}` : ''}`
|
||||
@@ -63,23 +57,18 @@ const ariaLabel = $derived(
|
||||
>
|
||||
<ConversationThumbnail doc={doc} />
|
||||
|
||||
<div class="flex min-w-0 flex-1 flex-col gap-1">
|
||||
<div class="flex items-baseline justify-between gap-3">
|
||||
<div class="min-w-0 flex-1 truncate text-sm font-bold text-ink">
|
||||
{title}
|
||||
</div>
|
||||
{#if relativeYearLabel}
|
||||
<div class="shrink-0 text-xs text-ink-3">{relativeYearLabel}</div>
|
||||
{/if}
|
||||
<div class="flex min-w-0 flex-1 flex-col gap-1.5">
|
||||
<div class="min-w-0 flex-1 truncate text-lg font-bold text-ink">
|
||||
{title}
|
||||
</div>
|
||||
|
||||
{#if doc.summary}
|
||||
<div class="line-clamp-2 text-sm text-ink-2 italic">
|
||||
<div class="line-clamp-2 text-base text-ink-2 italic">
|
||||
“{doc.summary}”
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="flex flex-wrap items-center gap-x-[6px] gap-y-1 text-xs text-ink-3">
|
||||
<div class="flex flex-wrap items-center gap-x-[6px] gap-y-1 text-sm text-ink-3">
|
||||
<span>{doc.documentDate ? formatDate(doc.documentDate) : '—'}</span>
|
||||
{#if doc.location}
|
||||
<span class="text-line">·</span>
|
||||
|
||||
Reference in New Issue
Block a user