From 10be13e6cdc848217e41974ff0aafab0e7459529 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Thu, 23 Apr 2026 14:33:53 +0200
Subject: [PATCH] refactor(briefwechsel): ConversationTimeline consumes
 DistributionBar

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>
---
 .../briefwechsel/ConversationTimeline.svelte  | 41 ++++---------------
 1 file changed, 7 insertions(+), 34 deletions(-)

diff --git a/frontend/src/routes/briefwechsel/ConversationTimeline.svelte b/frontend/src/routes/briefwechsel/ConversationTimeline.svelte
index 31b45467..68d6a799 100644
--- a/frontend/src/routes/briefwechsel/ConversationTimeline.svelte
+++ b/frontend/src/routes/briefwechsel/ConversationTimeline.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 import { formatDate } from '$lib/utils/date';
 import { m } from '$lib/paraglide/messages.js';
+import DistributionBar from '$lib/components/DistributionBar.svelte';
 
 interface Props {
 	documents: {
@@ -51,13 +52,9 @@ const countsByYear = $derived(
 
 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',
@@ -83,36 +80,12 @@ const newDocUrl = $derived(
 </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="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>
+	<DistributionBar
+		outCount={outCount}
+		inCount={inCount}
+		senderName={senderName ?? ''}
+		receiverName={receiverName ?? ''}
+	/>
 {/if}
 
 <div class="overflow-hidden rounded-sm border border-line bg-surface">