refactor: move shared components to lib/shared/ sub-packages
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
170
frontend/src/lib/shared/discussion/MentionDropdown.svelte
Normal file
170
frontend/src/lib/shared/discussion/MentionDropdown.svelte
Normal file
@@ -0,0 +1,170 @@
|
||||
<script lang="ts">
|
||||
import type { components } from '$lib/generated/api';
|
||||
import { formatLifeDateRange } from '$lib/person/personLifeDates';
|
||||
import { m } from '$lib/paraglide/messages.js';
|
||||
|
||||
type Person = components['schemas']['Person'];
|
||||
|
||||
// The dropdown receives a single reactive state object. PersonMentionEditor
|
||||
// mutates fields on this object (model.items = ..., etc.) and Svelte's $state
|
||||
// proxy reactivity propagates the change here. This is the supported way to
|
||||
// update an imperatively-mounted Svelte 5 component — `mount` does not return
|
||||
// settable prop accessors.
|
||||
type DropdownState = {
|
||||
items: Person[];
|
||||
command: (item: Person) => void;
|
||||
clientRect: (() => DOMRect | null) | null;
|
||||
};
|
||||
|
||||
let { model }: { model: DropdownState } = $props();
|
||||
|
||||
// highlightedIndex must be both writable (keyboard handler mutates it) and
|
||||
// reset when `items` changes (so it never points past the end of a new list).
|
||||
// A pure $derived is read-only and cannot serve both needs, so $state + $effect
|
||||
// is the correct pattern here. The autofixer suggestion to use $derived does not
|
||||
// apply: the mutation in onKeyDown is not a derivation.
|
||||
let highlightedIndex = $state(0);
|
||||
|
||||
$effect(() => {
|
||||
// Read model.items to subscribe; reset index whenever the list is replaced.
|
||||
void model.items;
|
||||
highlightedIndex = 0;
|
||||
});
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Positioning — flip strategy: open upward when there is not enough room
|
||||
// below the cursor to show the dropdown without clipping the viewport.
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
type Position = {
|
||||
top: string | null;
|
||||
bottom: string | null;
|
||||
left: string;
|
||||
};
|
||||
|
||||
const DROPDOWN_CLEARANCE_PX = 200;
|
||||
|
||||
const position = $derived.by<Position>(() => {
|
||||
const cr = model.clientRect;
|
||||
if (!cr) return { top: '0px', bottom: null, left: '0px' };
|
||||
const rect = cr();
|
||||
if (!rect) return { top: '0px', bottom: null, left: '0px' };
|
||||
|
||||
// Some editors report a caret DOMRect with zero width; fall back to rect.x.
|
||||
const left = `${rect.width === 0 ? rect.x : rect.left}px`;
|
||||
|
||||
if (window.innerHeight - rect.bottom < DROPDOWN_CLEARANCE_PX) {
|
||||
// Not enough space below — anchor bottom of dropdown to top of caret.
|
||||
return {
|
||||
top: null,
|
||||
bottom: `${window.innerHeight - rect.top}px`,
|
||||
left
|
||||
};
|
||||
}
|
||||
|
||||
return { top: `${rect.bottom}px`, bottom: null, left };
|
||||
});
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Keyboard handler — exported so Tiptap's render() can forward events.
|
||||
// Returns true when the event is consumed (prevents the editor's default).
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
export function onKeyDown(event: KeyboardEvent): boolean {
|
||||
const len = model.items.length;
|
||||
if (event.key === 'ArrowDown') {
|
||||
highlightedIndex = (highlightedIndex + 1) % Math.max(len, 1);
|
||||
return true;
|
||||
}
|
||||
|
||||
if (event.key === 'ArrowUp') {
|
||||
highlightedIndex = (highlightedIndex - 1 + Math.max(len, 1)) % Math.max(len, 1);
|
||||
return true;
|
||||
}
|
||||
|
||||
if (event.key === 'Enter') {
|
||||
const selected = model.items[highlightedIndex];
|
||||
if (selected) {
|
||||
model.command(selected);
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
// Escape: let the suggestion plugin handle it (return false = not consumed).
|
||||
return false;
|
||||
}
|
||||
|
||||
function selectItem(item: Person) {
|
||||
model.command(item);
|
||||
}
|
||||
</script>
|
||||
|
||||
<!--
|
||||
Mounted imperatively to document.body by the Tiptap suggestion plugin.
|
||||
Positioned absolutely relative to the viewport using inline styles derived
|
||||
from the Tiptap clientRect() callback.
|
||||
|
||||
SECURITY: This component receives pre-filtered Person[] items from the
|
||||
parent — it does NOT fetch. The parent's fetch relies on the SvelteKit Vite
|
||||
proxy injecting the auth_token cookie as the Authorization header.
|
||||
Mounted in transcribe mode behind WRITE_ALL — never reachable to
|
||||
unauthenticated users.
|
||||
-->
|
||||
<div
|
||||
class="fixed z-50 w-72 overflow-hidden rounded-sm border border-line bg-surface shadow-lg"
|
||||
role="listbox"
|
||||
aria-label={m.person_mention_btn_label()}
|
||||
style:top={position.top}
|
||||
style:bottom={position.bottom}
|
||||
style:left={position.left}
|
||||
>
|
||||
{#if model.items.length === 0}
|
||||
<p class="px-3 py-2.5 font-sans text-sm text-ink-3">
|
||||
{m.person_mention_popup_empty()}
|
||||
</p>
|
||||
<!--
|
||||
Empty-state escape hatch — without it the transcriber has to close
|
||||
the dropdown, navigate to /persons/new, come back, and re-type the
|
||||
query. target=_blank keeps the document and editor state intact;
|
||||
rel=noopener prevents reverse-tabnabbing on the new tab. Leonie #5621.
|
||||
-->
|
||||
<a
|
||||
href="/persons/new"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
class="flex min-h-[44px] items-center gap-2 border-t border-line px-3 py-2.5 font-sans text-sm font-medium text-brand-navy hover:bg-canvas focus:bg-canvas focus:outline-none"
|
||||
onmousedown={(e) => e.preventDefault()}
|
||||
>
|
||||
{m.person_mention_create_new()}
|
||||
<span aria-hidden="true">→</span>
|
||||
</a>
|
||||
{:else}
|
||||
{#each model.items as person, i (person.id)}
|
||||
<div
|
||||
class={[
|
||||
'flex min-h-[44px] cursor-pointer flex-col gap-1 px-3 py-2.5 text-left hover:bg-canvas',
|
||||
// brand-mint ring (≈2.5:1 on white) fails WCAG 1.4.11 Non-Text
|
||||
// Contrast for a meaningful keyboard-highlight indicator. brand-navy
|
||||
// gives ~14.5:1 against the bg-brand-mint/20 row. Leonie #5621.
|
||||
i === highlightedIndex && 'bg-brand-mint/20 ring-2 ring-brand-navy ring-inset'
|
||||
]}
|
||||
role="option"
|
||||
aria-selected={i === highlightedIndex}
|
||||
data-test-person-id={person.id}
|
||||
tabindex="-1"
|
||||
onmousedown={(e) => {
|
||||
// Prevent blur on the editor before the selection fires.
|
||||
e.preventDefault();
|
||||
selectItem(person);
|
||||
}}
|
||||
>
|
||||
<span class="truncate font-serif text-base text-ink">{person.displayName}</span>
|
||||
{#if formatLifeDateRange(person.birthYear, person.deathYear)}
|
||||
<span class="truncate font-sans text-xs text-ink-3">
|
||||
{formatLifeDateRange(person.birthYear, person.deathYear)}
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
{/if}
|
||||
</div>
|
||||
Reference in New Issue
Block a user