334b624063
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>
86 lines
2.4 KiB
Svelte
86 lines
2.4 KiB
Svelte
<script lang="ts">
|
|
import ConversationThumbnail from '$lib/components/ConversationThumbnail.svelte';
|
|
import TagChipList from '$lib/components/TagChipList.svelte';
|
|
import { formatDate } from '$lib/utils/date';
|
|
import * as m from '$lib/paraglide/messages.js';
|
|
|
|
type Person = { id: string; firstName?: string | null; lastName: string; displayName: string };
|
|
type Tag = { id: string; name: string };
|
|
|
|
type Doc = {
|
|
id: string;
|
|
title?: string;
|
|
originalFilename: string;
|
|
documentDate?: string;
|
|
location?: string;
|
|
summary?: string;
|
|
contentType?: string;
|
|
thumbnailKey?: string;
|
|
thumbnailGeneratedAt?: string;
|
|
thumbnailAspect?: 'PORTRAIT' | 'LANDSCAPE';
|
|
pageCount?: number;
|
|
sender?: Person | null;
|
|
receivers?: Person[];
|
|
tags?: Tag[];
|
|
};
|
|
|
|
let {
|
|
doc,
|
|
isOut,
|
|
showOtherParty
|
|
}: {
|
|
doc: Doc;
|
|
isOut: boolean;
|
|
showOtherParty: boolean;
|
|
} = $props();
|
|
|
|
const title = $derived(doc.title || doc.originalFilename);
|
|
const otherPartyName = $derived(
|
|
showOtherParty
|
|
? isOut
|
|
? (doc.receivers?.[0]?.displayName ?? '')
|
|
: (doc.sender?.displayName ?? '')
|
|
: ''
|
|
);
|
|
const directionLabel = $derived(isOut ? m.row_direction_sent() : m.row_direction_received());
|
|
const ariaLabel = $derived(
|
|
`${directionLabel}: ${title}${doc.documentDate ? `, ${formatDate(doc.documentDate)}` : ''}`
|
|
);
|
|
</script>
|
|
|
|
<a
|
|
href={`/documents/${doc.id}`}
|
|
aria-label={ariaLabel}
|
|
class="group flex min-h-[120px] items-start gap-3 border-b border-l-[3px] border-line-2 px-[14px] py-[10px] transition-colors last:border-b-0 focus-within:bg-muted hover:bg-muted focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-primary"
|
|
class:border-l-primary={isOut}
|
|
class:border-l-accent={!isOut}
|
|
>
|
|
<ConversationThumbnail doc={doc} />
|
|
|
|
<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-base text-ink-2 italic">
|
|
“{doc.summary}”
|
|
</div>
|
|
{/if}
|
|
|
|
<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>
|
|
<span>{doc.location}</span>
|
|
{/if}
|
|
{#if otherPartyName}
|
|
<span class="text-line">·</span>
|
|
<span>{otherPartyName}</span>
|
|
{/if}
|
|
</div>
|
|
|
|
<TagChipList tags={doc.tags ?? []} />
|
|
</div>
|
|
</a>
|