f11d8a38ed
- Add displayName default method to PersonSummaryDTO - Update native SQL queries to include title, person_type columns - Add getInitials() utility to personFormat.ts - Update abbreviateName/abbreviateCompact for nullable firstName - Replace firstName+lastName concatenation with displayName in all person-displaying components and server load files - Regenerate API types with displayName on Person and PersonSummaryDTO Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
77 lines
1.9 KiB
Svelte
77 lines
1.9 KiB
Svelte
<script lang="ts">
|
|
import { tick } from 'svelte';
|
|
import { m } from '$lib/paraglide/messages.js';
|
|
import { clickOutside } from '$lib/actions/clickOutside';
|
|
|
|
type Person = { id: string; firstName?: string | null; lastName: string; displayName: 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={m.topbar_overflow_show({ count: extraCount })}
|
|
onclick={toggle}
|
|
onkeydown={handleKeydown}
|
|
class="inline-flex shrink-0 items-center rounded-full border border-line bg-muted px-2 py-0.5 text-[14px] font-bold text-ink-2 hover:bg-surface focus-visible:ring-2 focus-visible:ring-primary"
|
|
>
|
|
+{extraCount}<span class="hidden lg:inline"> {m.topbar_overflow_suffix()}</span>
|
|
</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-[14px] font-bold tracking-wide text-ink-2 uppercase">
|
|
{m.topbar_overflow_heading()}
|
|
</p>
|
|
{#each persons as person (person.id)}
|
|
<div role="listitem">
|
|
<a
|
|
href="/persons/{person.id}"
|
|
class="block py-0.5 text-[18px] text-ink hover:text-primary focus-visible:ring-2 focus-visible:ring-primary"
|
|
>
|
|
{person.displayName}
|
|
</a>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
{/if}
|
|
</div>
|