feat(ui): add PersonChipRow — sender→receivers chips, 2nd receiver hidden md:contents

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-03-31 23:00:32 +02:00
parent 624eb9e5d6
commit eafb566170

View File

@@ -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>