familienarchiv/frontend/src/lib/components/OverflowPillButton.svelte

<script lang="ts">
import { tick } from 'svelte';
import { clickOutside } from '$lib/actions/clickOutside';

type Person = { id: string; firstName: string; lastName: string };

type Props = {
	extraCount: number;
	persons: Person[];
};

let { extraCount, persons }: Props = $props();

let open = $state(false);
let buttonEl: HTMLButtonElement | undefined = $state();

function toggle() {
	open = !open;
}

async function close() {
	open = false;
	await tick();
	buttonEl?.focus();
}

function handleKeydown(e: KeyboardEvent) {
	if (e.key === 'Escape') {
		e.stopPropagation();
		close();
	}
}
</script>

<div
	role="group"
	class="relative hidden md:block"
	use:clickOutside
	onclickoutside={() => (open = false)}
	onkeydown={handleKeydown}
>
	<button
		bind:this={buttonEl}
		type="button"
		aria-haspopup="true"
		aria-expanded={open}
		aria-label="{extraCount} weitere Empfänger anzeigen"
		onclick={toggle}
		onkeydown={handleKeydown}
		class="inline-flex shrink-0 items-center rounded-full border border-line bg-muted px-2 py-0.5 text-[11px] font-bold text-ink-2 hover:bg-surface focus-visible:ring-2 focus-visible:ring-primary"
	>
		+{extraCount} weitere
	</button>

	{#if open}
		<div
			role="list"
			class="absolute top-full left-0 z-50 mt-1 min-w-[160px] rounded-md border border-line bg-surface p-3 shadow-lg"
		>
			<p class="mb-2 text-[11px] font-bold tracking-wide text-ink-2 uppercase">Weitere Empfänger</p>
			{#each persons as person (person.id)}
				<div role="listitem">
					<a
						href="/persons/{person.id}"
						class="block py-0.5 text-[14px] text-ink hover:text-primary focus-visible:ring-2 focus-visible:ring-primary"
					>
						{person.firstName}
						{person.lastName}
					</a>
				</div>
			{/each}
		</div>
	{/if}
</div>