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:
37
frontend/src/lib/components/PersonChipRow.svelte
Normal file
37
frontend/src/lib/components/PersonChipRow.svelte
Normal 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>
|
||||||
Reference in New Issue
Block a user