synops/frontend/src/lib/components/NewChatDialog.svelte

<script lang="ts">
	import { nodeStore, edgeStore } from '$lib/spacetime';
	import type { Node } from '$lib/spacetime';

	interface Props {
		currentUserId: string;
		onselect: (personId: string) => void;
		onclose: () => void;
	}

	let { currentUserId, onselect, onclose }: Props = $props();

	let search = $state('');

	/**
	 * Available people to chat with: all person nodes except current user.
	 * For 1:1 chat we show person nodes the user can see.
	 */
	const people = $derived.by(() => {
		const persons: Node[] = [];
		for (const node of nodeStore.byKind('person')) {
			if (node.id !== currentUserId) {
				persons.push(node);
			}
		}
		// Sort alphabetically by title
		persons.sort((a, b) => (a.title || '').localeCompare(b.title || ''));
		return persons;
	});

	/** Filter by search term */
	const filtered = $derived.by(() => {
		if (!search.trim()) return people;
		const q = search.trim().toLowerCase();
		return people.filter(p => (p.title || '').toLowerCase().includes(q));
	});

	/**
	 * Check if there's already a 1:1 communication with this person.
	 * Returns the communication node ID if found, undefined otherwise.
	 */
	function existingChatWith(personId: string): string | undefined {
		// Find communication nodes where both current user and person are participants
		const userComms = new Set<string>();
		for (const edge of edgeStore.bySource(currentUserId)) {
			if (edge.edgeType === 'owner' || edge.edgeType === 'member_of') {
				const target = nodeStore.get(edge.targetId);
				if (target?.nodeKind === 'communication') {
					userComms.add(edge.targetId);
				}
			}
		}

		for (const edge of edgeStore.bySource(personId)) {
			if (edge.edgeType === 'owner' || edge.edgeType === 'member_of') {
				if (userComms.has(edge.targetId)) {
					return edge.targetId;
				}
			}
		}
		return undefined;
	}

	function handleSelect(personId: string) {
		onselect(personId);
	}

	function handleBackdropClick(e: MouseEvent) {
		if (e.target === e.currentTarget) {
			onclose();
		}
	}

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

<svelte:window onkeydown={handleKeydown} />

<!-- Backdrop -->
<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
<div
	onclick={handleBackdropClick}
	class="fixed inset-0 z-50 flex items-start justify-center bg-black/40 pt-20"
>
	<div class="w-full max-w-md rounded-xl bg-white shadow-xl">
		<!-- Header -->
		<div class="flex items-center justify-between border-b border-gray-200 px-4 py-3">
			<h2 class="text-lg font-semibold text-gray-900">Ny samtale</h2>
			<button
				onclick={onclose}
				class="rounded p-1 text-gray-400 hover:bg-gray-100 hover:text-gray-600"
				aria-label="Lukk"
			>
				<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
					<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
				</svg>
			</button>
		</div>

		<!-- Search -->
		<div class="border-b border-gray-100 px-4 py-2">
			<input
				bind:value={search}
				type="text"
				placeholder="Søk etter person…"
				class="w-full rounded-lg border border-gray-200 bg-gray-50 px-3 py-2 text-sm placeholder:text-gray-400 focus:border-blue-300 focus:bg-white focus:outline-none focus:ring-1 focus:ring-blue-300"
			/>
		</div>

		<!-- People list -->
		<div class="max-h-80 overflow-y-auto">
			{#if filtered.length === 0}
				<p class="px-4 py-6 text-center text-sm text-gray-400">
					{#if people.length === 0}
						Ingen andre brukere funnet
					{:else}
						Ingen treff for «{search}»
					{/if}
				</p>
			{:else}
				<ul>
					{#each filtered as person (person.id)}
						{@const existing = existingChatWith(person.id)}
						<li>
							<button
								onclick={() => handleSelect(person.id)}
								class="flex w-full items-center gap-3 px-4 py-3 text-left transition-colors hover:bg-gray-50"
							>
								<div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-blue-100 text-sm font-medium text-blue-700">
									{(person.title || '?')[0].toUpperCase()}
								</div>
								<div class="min-w-0 flex-1">
									<p class="font-medium text-gray-900">{person.title || 'Ukjent'}</p>
									{#if existing}
										<p class="text-xs text-gray-400">Har eksisterende samtale</p>
									{/if}
								</div>
								<svg class="h-4 w-4 shrink-0 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
									<path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
								</svg>
							</button>
						</li>
					{/each}
				</ul>
			{/if}
		</div>
	</div>
</div>