refactor(briefwechsel): extract bilateral DistributionBar component

Lifts the inline distribution bar out of ConversationTimeline so the
same two-tone ratio widget can be reused on other bilateral surfaces
(e.g. the person detail page). Markup/styling is byte-identical to
the inline version; only the prop interface is new.

Refs #305

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

frontend/src/lib/components/DistributionBar.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+interface Props {
+	outCount: number;
+	inCount: number;
+	senderName: string;
+	receiverName: string;
+}
+
+let { outCount, inCount, senderName, receiverName }: Props = $props();
+
+const total = $derived(outCount + inCount);
+const outPct = $derived(total > 0 ? (outCount / total) * 100 : 0);
+const shortSenderName = $derived(senderName.split(' ')[0] ?? senderName);
+const shortReceiverName = $derived(receiverName.split(' ')[0] ?? receiverName);
+</script>
+
+<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
+			data-testid="dist-bar-segment"
+			class="h-full bg-primary transition-all"
+			style="width: {outPct}%"
+		></div>
+		<div
+			data-testid="dist-bar-segment"
+			class="h-full bg-accent transition-all"
+			style="width: {100 - outPct}%"
+		></div>
+	</div>
+</div>