From eafb56617085ad1c571c3817738dbb7458654d7a Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Tue, 31 Mar 2026 23:00:32 +0200
Subject: [PATCH] =?UTF-8?q?feat(ui):=20add=20PersonChipRow=20=E2=80=94=20s?=
 =?UTF-8?q?ender=E2=86=92receivers=20chips,=202nd=20receiver=20hidden=20md?=
 =?UTF-8?q?:contents?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../src/lib/components/PersonChipRow.svelte   | 37 +++++++++++++++++++
 1 file changed, 37 insertions(+)
 create mode 100644 frontend/src/lib/components/PersonChipRow.svelte

diff --git a/frontend/src/lib/components/PersonChipRow.svelte b/frontend/src/lib/components/PersonChipRow.svelte
new file mode 100644
index 00000000..662cc743
--- /dev/null
+++ b/frontend/src/lib/components/PersonChipRow.svelte
@@ -0,0 +1,37 @@
+<script lang="ts">
+import PersonChip from './PersonChip.svelte';
+import OverflowPillDisplay from './OverflowPillDisplay.svelte';
+
+type Person = { id: string; firstName: string; lastName: string };
+
+type Props = {
+	sender: Person | null | undefined;
+	receivers: Person[];
+	abbreviated: boolean;
+	extraCount: number;
+};
+
+let { sender, receivers, abbreviated, extraCount }: Props = $props();
+
+const visibleReceivers = $derived(receivers.slice(0, 2));
+</script>
+
+<div class="hidden min-w-0 items-center gap-1.5 overflow-hidden xs:flex">
+	{#if sender}
+		<PersonChip person={sender} abbreviated={abbreviated} />
+	{/if}
+
+	{#if sender && receivers.length > 0}
+		<span class="shrink-0 text-[10px] text-ink-2" aria-hidden="true">→</span>
+	{/if}
+
+	{#each visibleReceivers as receiver, i (receiver.id)}
+		<span class={i === 1 ? 'hidden md:contents' : ''}>
+			<PersonChip person={receiver} abbreviated={abbreviated} />
+		</span>
+	{/each}
+
+	{#if extraCount > 0}
+		<OverflowPillDisplay extraCount={extraCount} />
+	{/if}
+</div>