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

refactor(briefwechsel): ConversationTimeline consumes DistributionBar

Browse Source 
Drops the inline bilateral-distribution markup and the short-name /
percentage helpers that only existed to feed it. ConversationTimeline
now hands senderName, receiverName, and the two counts to the shared
component and lets it own the rendering.

Refs #305

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-04-23 14:33:53 +02:00
committed by marcel
parent d99f4544d2
commit 70d813ee70
1 changed files with 7 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
frontend/src/routes/briefwechsel/ConversationTimeline.svelte
View File

@@ -1,6 +1,7 @@
<script lang="ts"> <script lang="ts">
import { formatDate } from '$lib/utils/date'; import { formatDate } from '$lib/utils/date';
import { m } from '$lib/paraglide/messages.js'; import { m } from '$lib/paraglide/messages.js';
import DistributionBar from '$lib/components/DistributionBar.svelte';
interface Props { interface Props {
documents: { documents: {
@@ -51,13 +52,9 @@ const countsByYear = $derived(
const outCount = $derived(documents.filter((d) => d.sender?.id === senderId).length); const outCount = $derived(documents.filter((d) => d.sender?.id === senderId).length);
const inCount = $derived(documents.length - outCount); const inCount = $derived(documents.length - outCount);
const outPct = $derived(documents.length > 0 ? (outCount / documents.length) * 100 : 0);
const isBilateral = $derived(!!senderId && !!receiverId); const isBilateral = $derived(!!senderId && !!receiverId);
const shortSenderName = $derived(senderName?.split(' ')[0] ?? senderName ?? '');
const shortReceiverName = $derived(receiverName?.split(' ')[0] ?? receiverName ?? '');
function statusDotClass(status: string): string { function statusDotClass(status: string): string {
const map: Record<string, string> = { const map: Record<string, string> = {
PLACEHOLDER: 'bg-brand-sand', PLACEHOLDER: 'bg-brand-sand',
@@ -83,36 +80,12 @@ const newDocUrl = $derived(
</script> </script>
{#if isBilateral && documents.length > 0} {#if isBilateral && documents.length > 0}
<div <DistributionBar
class="flex flex-col gap-1 border-b border-line bg-muted px-[18px] py-2" outCount={outCount}
role="img" inCount={inCount}
aria-label="Briefverteilung in diesem Zeitraum: {outCount} von {senderName ?? ''}, {inCount} von {receiverName ?? ''}" senderName={senderName ?? ''}
> receiverName={receiverName ?? ''}
<div class="flex justify-between text-sm font-bold"> />
<span class="inline-flex items-center gap-1 text-primary"
>{outCount} von {shortSenderName}
<img
src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Long-Arrow/Long-Arrow-Right-MD.svg"
alt=""
aria-hidden="true"
class="inline h-3.5 w-3.5 opacity-60"
/></span
>
<span class="inline-flex items-center gap-1 text-accent"
>{inCount} von {shortReceiverName}
<img
src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Long-Arrow/Long-Arrow-Left-MD.svg"
alt=""
aria-hidden="true"
class="inline h-3.5 w-3.5 opacity-60"
/></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} {/if}
<div class="overflow-hidden rounded-sm border border-line bg-surface"> <div class="overflow-hidden rounded-sm border border-line bg-surface">