refactor(ui): rename route /korrespondenz → /briefwechsel
Update all internal links (AppNav, CoCorrespondentsList, goto) to the new URL. No redirect needed — no production URLs exist yet. Refs: #179 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
180
frontend/src/routes/briefwechsel/ConversationTimeline.svelte
Normal file
180
frontend/src/routes/briefwechsel/ConversationTimeline.svelte
Normal file
@@ -0,0 +1,180 @@
|
||||
<script lang="ts">
|
||||
import { formatDate } from '$lib/utils/date';
|
||||
import { m } from '$lib/paraglide/messages.js';
|
||||
|
||||
interface Props {
|
||||
documents: {
|
||||
id: string;
|
||||
title?: string;
|
||||
originalFilename: string;
|
||||
documentDate?: string;
|
||||
location?: string;
|
||||
status: string;
|
||||
sender?: { id: string; firstName: string; lastName: string } | null;
|
||||
receivers?: { id: string; firstName: string; lastName: string }[];
|
||||
}[];
|
||||
senderId: string;
|
||||
receiverId?: string;
|
||||
canWrite: boolean;
|
||||
senderName?: string;
|
||||
receiverName?: string;
|
||||
}
|
||||
|
||||
let { documents, senderId, receiverId, canWrite, senderName, receiverName }: Props = $props();
|
||||
|
||||
const enrichedDocuments = $derived(
|
||||
documents.map((doc, i) => {
|
||||
const year = doc.documentDate ? new Date(doc.documentDate).getFullYear() : null;
|
||||
const prevYear =
|
||||
i > 0 && documents[i - 1].documentDate
|
||||
? new Date(documents[i - 1].documentDate!).getFullYear()
|
||||
: null;
|
||||
const isOut = doc.sender?.id === senderId;
|
||||
return { doc, year, showYearDivider: year !== null && year !== prevYear, isOut };
|
||||
})
|
||||
);
|
||||
|
||||
const countsByYear = $derived(
|
||||
documents.reduce((acc, d) => {
|
||||
if (d.documentDate) {
|
||||
const y = new Date(d.documentDate).getFullYear();
|
||||
acc.set(y, (acc.get(y) ?? 0) + 1);
|
||||
}
|
||||
return acc;
|
||||
}, new Map<number, number>())
|
||||
);
|
||||
|
||||
const outCount = $derived(documents.filter((d) => d.sender?.id === senderId).length);
|
||||
const inCount = $derived(documents.length - outCount);
|
||||
const outPct = $derived(documents.length > 0 ? (outCount / documents.length) * 100 : 0);
|
||||
|
||||
const isBilateral = $derived(!!senderId && !!receiverId);
|
||||
|
||||
const shortSenderName = $derived(senderName?.split(' ')[0] ?? senderName ?? '');
|
||||
const shortReceiverName = $derived(receiverName?.split(' ')[0] ?? receiverName ?? '');
|
||||
|
||||
function statusDotClass(status: string): string {
|
||||
const map: Record<string, string> = {
|
||||
PLACEHOLDER: 'bg-brand-sand',
|
||||
UPLOADED: 'bg-brand-mint',
|
||||
TRANSCRIBED: 'bg-brand-mint',
|
||||
REVIEWED: 'bg-brand-navy/70',
|
||||
ARCHIVED: 'bg-brand-navy'
|
||||
};
|
||||
return map[status] ?? 'bg-brand-sand';
|
||||
}
|
||||
|
||||
function otherPartyName(doc: (typeof documents)[number]): string {
|
||||
if (doc.sender?.id === senderId) {
|
||||
const r = doc.receivers?.[0];
|
||||
return r ? `${r.firstName} ${r.lastName}` : m.conv_no_party();
|
||||
}
|
||||
return doc.sender ? `${doc.sender.firstName} ${doc.sender.lastName}` : m.conv_no_party();
|
||||
}
|
||||
|
||||
const newDocUrl = $derived(
|
||||
`/documents/new?senderId=${encodeURIComponent(senderId)}${receiverId ? `&receiverId=${encodeURIComponent(receiverId)}` : ''}`
|
||||
);
|
||||
</script>
|
||||
|
||||
{#if isBilateral && documents.length > 0}
|
||||
<div
|
||||
class="flex flex-col gap-1 border-b border-line bg-muted px-[18px] py-2"
|
||||
role="img"
|
||||
aria-label="Briefverteilung in diesem Zeitraum: {outCount} von {senderName ?? ''}, {inCount} von {receiverName ?? ''}"
|
||||
>
|
||||
<div class="flex justify-between text-sm font-bold">
|
||||
<span class="text-primary">{outCount} von {shortSenderName} →</span>
|
||||
<span class="text-accent">{inCount} von {shortReceiverName} ←</span>
|
||||
</div>
|
||||
<div class="flex h-[5px] overflow-hidden rounded-full bg-line">
|
||||
<div class="h-full bg-primary transition-all" style="width: {outPct}%"></div>
|
||||
<div class="h-full bg-accent transition-all" style="width: {100 - outPct}%"></div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="overflow-hidden rounded-sm border border-line bg-surface">
|
||||
{#each enrichedDocuments as { doc, year, showYearDivider, isOut } (doc.id)}
|
||||
{#if showYearDivider && year !== null}
|
||||
<div
|
||||
data-testid="year-divider"
|
||||
class="flex items-baseline gap-3 border-t-2 border-b border-line bg-muted px-[14px] py-[8px]"
|
||||
>
|
||||
<span class="text-2xl font-black tracking-tight text-primary">{year}</span>
|
||||
<span class="text-sm font-bold text-ink-3">{countsByYear.get(year) ?? 0} Briefe</span>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<a
|
||||
href="/documents/{doc.id}"
|
||||
aria-label="{doc.title || doc.originalFilename}, {doc.documentDate
|
||||
? formatDate(doc.documentDate)
|
||||
: ''}"
|
||||
class="group flex min-h-[44px] cursor-pointer items-center gap-[9px] border-b border-l-[3px] border-line-2 px-[14px] py-[10px] transition-colors last:border-b-0 hover:bg-muted"
|
||||
class:border-l-primary={isOut}
|
||||
class:border-l-accent={!isOut}
|
||||
>
|
||||
<span
|
||||
class="w-[16px] shrink-0 text-sm font-black"
|
||||
class:text-primary={isOut}
|
||||
class:text-accent={!isOut}
|
||||
aria-hidden="true"
|
||||
>
|
||||
{isOut ? '→' : '←'}
|
||||
</span>
|
||||
|
||||
<div class="min-w-0 flex-1">
|
||||
<div class="mb-[2px] truncate text-sm font-bold text-ink">
|
||||
{doc.title || doc.originalFilename}
|
||||
</div>
|
||||
<div class="flex items-center gap-[5px] 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 !receiverId}
|
||||
<span class="text-line">·</span>
|
||||
<span>{otherPartyName(doc)}</span>
|
||||
{/if}
|
||||
<span
|
||||
class="ml-[3px] h-[6px] w-[6px] shrink-0 rounded-full {statusDotClass(doc.status)}"
|
||||
title={doc.status}
|
||||
></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span
|
||||
class="shrink-0 text-sm text-ink-3 opacity-0 transition-opacity group-hover:opacity-100"
|
||||
aria-hidden="true">›</span
|
||||
>
|
||||
</a>
|
||||
{/each}
|
||||
|
||||
{#if canWrite}
|
||||
<div class="flex justify-end border-t border-line px-[14px] py-[6px]">
|
||||
<a
|
||||
href={newDocUrl}
|
||||
data-testid="conv-new-doc-link"
|
||||
class="inline-flex items-center gap-1 text-xs font-bold text-primary/50 transition-colors hover:text-primary"
|
||||
>
|
||||
<svg
|
||||
class="h-3 w-3"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M12 4v16m8-8H4"
|
||||
/>
|
||||
</svg>
|
||||
{m.conv_new_doc_link()}
|
||||
</a>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
Reference in New Issue
Block a user