@vibesdotdev/chat 0.0.0-stage → 1.0.0-rc.1

package/dist/svelte/components/conversations/ConversationsTree.svelte

@@ -0,0 +1,663 @@
+<script lang="ts" module>
+	export interface ConversationsTreeProps {
+		compact?: boolean;
+		class?: string;
+		onSelectRoom?: (id: string) => void;
+		onDeletedRoom?: (id: string) => void;
+	}
+
+	type ConvNode =
+		| { kind: 'folder'; folderId: string }
+		| { kind: 'room'; roomId: string; folderId: string | null }
+		| { kind: 'unfiled' };
+</script>
+
+<script lang="ts">
+	import { useChatSurface } from '../../surface-context.js';
+	const { conversationsStore, runtimeChatStore, chatStore } = useChatSurface();
+
+	import TreeView from './ConversationNodes.svelte';
+	import CreateFolderDialog from './CreateFolderDialog.svelte';
+	import type { TreeNode } from './types.js';
+
+
+	import * as Alert from '@vibesdotdev/kit/components/ui/alert';
+	import { onMount, tick, untrack } from 'svelte';
+	import { SvelteSet } from 'svelte/reactivity';
+	import { Button } from '@vibesdotdev/kit/components/ui/button';
+	import { Checkbox } from '@vibesdotdev/kit/components/ui/checkbox';
+	import * as Select from '@vibesdotdev/kit/components/ui/select';
+	import { Input } from '@vibesdotdev/kit/components/ui/input';
+	import * as InputGroup from '@vibesdotdev/kit/components/ui/input-group';
+	import { Icon } from '@vibesdotdev/kit/components';
+	import * as DropdownMenu from '@vibesdotdev/kit/components/ui/dropdown-menu';
+	import * as AlertDialog from '@vibesdotdev/kit/components/ui/alert-dialog';
+
+	const UNFILED_ID = '__unfiled__';
+
+	let { compact = false, class: className, onSelectRoom = (id) => void runtimeChatStore.openRoom(id), onDeletedRoom = () => {} }: ConversationsTreeProps = $props();
+
+	// Per-instance expansion (page and sidebar expand independently).
+	const expandedIds = new SvelteSet<string>();
+
+	// Self-hydrate so the tree works standalone (page + sidebar). Idempotent.
+	onMount(() => void conversationsStore.ensureLoaded());
+	const libraryVersion = $derived(JSON.stringify(Array.from(chatStore.rooms.values()).map((room) => [room.id, room.title])));
+	$effect(() => {
+		void libraryVersion;
+		const owner = runtimeChatStore.client;
+		if (owner) untrack(() => void conversationsStore.load());
+	});
+
+	// Inline-rename state (folders and conversations share the input).
+	let renamingId = $state<string | null>(null);
+	const instanceId = $props.id();
+	let renamingKind = $state<'folder' | 'room'>('folder');
+	let renameValue = $state('');
+	// Conversation delete confirmation.
+	let deletingRoom = $state<{ id: string; title: string } | null>(null);
+	let deletingFolder = $state<{ id: string; name: string } | null>(null);
+	let creatingFolder = $state(false);
+	let newFolderParentId = $state<string | null>(null);
+	let showUnfiledBulk = $state(false);
+	let selectedUnfiledIds = $state<Set<string>>(new Set());
+	let bulkDestinationFolderId = $state('');
+	let movingSelectedUnfiled = $state(false);
+
+	const selectedUnfiledCount = $derived(selectedUnfiledIds.size);
+	const hasSelectedUnfiled = $derived(selectedUnfiledCount > 0);
+	const allUnfiledSelected = $derived(
+		conversationsStore.unfiled.length > 0 &&
+			conversationsStore.unfiled.every((room) => selectedUnfiledIds.has(room.id))
+	);
+	const someUnfiledSelected = $derived(hasSelectedUnfiled && !allUnfiledSelected);
+
+	$effect(() => {
+		const visibleRoomIds = new Set(conversationsStore.unfiled.map((room) => room.id));
+		const nextSelection = new Set([...selectedUnfiledIds].filter((id) => visibleRoomIds.has(id)));
+		if (nextSelection.size !== selectedUnfiledIds.size) {
+			selectedUnfiledIds = nextSelection;
+		}
+		if (conversationsStore.unfiled.length === 0) {
+			showUnfiledBulk = false;
+		}
+	});
+
+	function roomNode(
+		room: { id: string; title?: string | null },
+		folderId: string | null
+	): TreeNode<ConvNode> {
+		return {
+			id: `room:${room.id}`,
+			label: room.title || 'Untitled',
+			data: { kind: 'room', roomId: room.id, folderId }
+		};
+	}
+
+	function folderNode(folder: { id: string; name: string }): TreeNode<ConvNode> {
+		const children: TreeNode<ConvNode>[] = [
+			...conversationsStore.childFolders(folder.id).map(folderNode),
+			...conversationsStore.roomsInFolder(folder.id).map((i) => roomNode(i.chatRoom ?? { id: i.chatRoomId }, folder.id))
+		];
+		return {
+			id: folder.id,
+			label: folder.name,
+			data: { kind: 'folder', folderId: folder.id },
+			children,
+			isContainer: true
+		};
+	}
+
+	const treeNodes = $derived.by<TreeNode<ConvNode>[]>(() => {
+		const roots = conversationsStore.childFolders(null).map(folderNode);
+		const unfiled: TreeNode<ConvNode> = {
+			id: UNFILED_ID,
+			label: 'Unfiled',
+			data: { kind: 'unfiled' },
+			children: conversationsStore.unfiled.map((r) => roomNode(r, null)),
+			isContainer: true
+		};
+		return [...roots, unfiled];
+	});
+
+	// --- Search/filter -------------------------------------------------------
+	let query = $state('');
+	const q = $derived(query.trim().toLowerCase());
+
+	function filterNode(
+		node: TreeNode<ConvNode>,
+		needle: string,
+		expand: Set<string>
+	): TreeNode<ConvNode> | null {
+		const labelMatch = node.label.toLowerCase().includes(needle);
+		if (node.data?.kind === 'room') return labelMatch ? node : null;
+		// folder / unfiled: keep all children if the container name matches, else
+		// only matching descendants; keep the container if it or a descendant matches.
+		const all = node.children ?? [];
+		const kept: TreeNode<ConvNode>[] = [];
+		if (labelMatch) {
+			kept.push(...all);
+		} else {
+			for (const c of all) {
+				const filtered = filterNode(c, needle, expand);
+				if (filtered) kept.push(filtered);
+			}
+		}
+		if (!labelMatch && kept.length === 0) return null;
+		if (node.data?.kind === 'unfiled') {
+			expand.add(UNFILED_ID);
+		} else if (node.data?.kind === 'folder') {
+			expand.add(node.data.folderId);
+		}
+		return { ...node, children: kept };
+	}
+
+	const display = $derived.by<{ nodes: TreeNode<ConvNode>[]; expand: Set<string> | null }>(() => {
+		if (!q) return { nodes: treeNodes, expand: null };
+		const expand = new Set<string>();
+		const nodes: TreeNode<ConvNode>[] = [];
+		for (const n of treeNodes) {
+			const filtered = filterNode(n, q, expand);
+			if (filtered) nodes.push(filtered);
+		}
+		return { nodes, expand };
+	});
+
+	// Auto-expand the path to every match while searching.
+	$effect(() => {
+		if (display.expand) for (const id of display.expand) expandedIds.add(id);
+	});
+
+	function roomCount(folderId: string): number {
+		return conversationsStore.roomsInFolder(folderId).length;
+	}
+
+	function folderParentId(folderId: string): string | null {
+		return conversationsStore.folders.find((f) => f.id === folderId)?.parentId ?? null;
+	}
+
+	/** True if `candidateId` is `folderId` or one of its descendants (cycle guard). */
+	function isSelfOrDescendant(folderId: string, candidateId: string): boolean {
+		if (folderId === candidateId) return true;
+		let cursor: string | null = candidateId;
+		const seen = new Set<string>();
+		while (cursor) {
+			if (cursor === folderId) return true;
+			if (seen.has(cursor)) break;
+			seen.add(cursor);
+			cursor = folderParentId(cursor);
+		}
+		return false;
+	}
+
+	function handleSelect(node: TreeNode<ConvNode>) {
+		const data = node.data;
+		if (data?.kind === 'room') onSelectRoom(data.roomId);
+		else if (expandedIds.has(node.id)) expandedIds.delete(node.id);
+		else expandedIds.add(node.id);
+	}
+
+	function handleDrop(
+		dragged: TreeNode<ConvNode>,
+		target: TreeNode<ConvNode>,
+		position: 'before' | 'after' | 'inside'
+	) {
+		const d = dragged.data;
+		const t = target.data;
+		if (!d || !t) return;
+
+		if (d.kind === 'room') {
+			// Dropped before/after another conversation -> file and order relative to it.
+			if (t.kind === 'room') {
+				const destFolder = t.folderId; // null when the target is an unfiled room
+				if (destFolder === null) {
+					if (d.folderId !== null) void conversationsStore.moveRoom(d.roomId, d.folderId, null);
+					return; // unfiled has no persisted order
+				}
+				const siblings = conversationsStore
+					.roomsInFolder(destFolder)
+					.filter((i) => i.chatRoomId !== d.roomId);
+				let idx = siblings.findIndex((i) => i.chatRoomId === t.roomId);
+				if (idx < 0) idx = siblings.length;
+				const insertAt = position === 'after' ? idx + 1 : idx;
+				expandedIds.add(destFolder);
+				void conversationsStore.moveRoom(d.roomId, d.folderId, destFolder, insertAt);
+				return;
+			}
+			// Dropped on a folder (inside) or Unfiled -> file there (append).
+			const destFolder =
+				t.kind === 'folder'
+					? position === 'inside'
+						? t.folderId
+						: folderParentId(t.folderId)
+					: null;
+			if (destFolder === d.folderId) return; // same folder, no target — nothing to do
+			if (destFolder) expandedIds.add(destFolder); // reveal the filed chat
+			void conversationsStore.moveRoom(d.roomId, d.folderId, destFolder);
+			return;
+		}
+
+		// Dragging a folder.
+		if (d.kind === 'folder') {
+			let destParent: string | null;
+			if (t.kind === 'folder') {
+				destParent = position === 'inside' ? t.folderId : folderParentId(t.folderId);
+			} else if (t.kind === 'unfiled') {
+				destParent = null; // drop onto Unfiled -> move folder to root
+			} else {
+				return; // can't nest a folder into a conversation
+			}
+			if (destParent && isSelfOrDescendant(d.folderId, destParent)) return; // cycle guard
+			if (destParent === folderParentId(d.folderId) && position === 'inside') return;
+			if (destParent) expandedIds.add(destParent); // reveal the nested folder
+			const siblings = conversationsStore.childFolders(destParent).filter((folder) => folder.id !== d.folderId);
+			const targetIndex = t.kind === 'folder' ? siblings.findIndex((folder) => folder.id === t.folderId) : -1;
+			const index = position !== 'inside' && targetIndex >= 0 ? targetIndex + (position === 'after' ? 1 : 0) : siblings.length;
+			void conversationsStore.reorderFolder(d.folderId, destParent, index);
+		}
+	}
+
+	async function startRename(kind: 'folder' | 'room', id: string, current: string) {
+		renamingKind = kind;
+		renamingId = id;
+		renameValue = current;
+		await tick();
+		const el = document.getElementById(`conv-rename-${instanceId}-${id}`);
+		if (el instanceof HTMLInputElement) {
+			el.focus();
+			el.select(); // select-all so typing replaces the placeholder name
+		}
+	}
+
+	function commitRename() {
+		const id = renamingId;
+		const kind = renamingKind;
+		if (!id) return;
+		const value = renameValue.trim();
+		renamingId = null;
+		if (!value) return;
+		if (kind === 'folder') void conversationsStore.renameFolder(id, value);
+		else void renameRoom(id, value);
+	}
+
+	async function renameRoom(roomId: string, title: string) {
+		await conversationsStore.renameRoom(roomId, title);
+	}
+
+	async function confirmDeleteRoom() {
+		const room = deletingRoom;
+		if (!room) return;
+		if (await conversationsStore.deleteRoom(room.id)) {
+			deletingRoom = null;
+			onDeletedRoom(room.id);
+		}
+	}
+
+	function toggleUnfiledRoom(roomId: string, checked: boolean) {
+		const nextSelection = new Set(selectedUnfiledIds);
+		if (checked) {
+			nextSelection.add(roomId);
+		} else {
+			nextSelection.delete(roomId);
+		}
+		selectedUnfiledIds = nextSelection;
+	}
+
+	function toggleAllUnfiled(checked: boolean) {
+		selectedUnfiledIds = checked
+			? new Set(conversationsStore.unfiled.map((room) => room.id))
+			: new Set();
+	}
+
+	function clearUnfiledSelection() {
+		selectedUnfiledIds = new Set();
+		bulkDestinationFolderId = '';
+	}
+
+	async function moveSelectedUnfiled() {
+		if (!bulkDestinationFolderId || selectedUnfiledIds.size === 0) return;
+
+		const roomIds = conversationsStore.unfiled
+			.filter((room) => selectedUnfiledIds.has(room.id))
+			.map((room) => room.id);
+		if (roomIds.length === 0) return;
+
+		movingSelectedUnfiled = true;
+		try {
+			const moved = await conversationsStore.moveRooms(roomIds, null, bulkDestinationFolderId);
+			if (moved) clearUnfiledSelection();
+		} finally {
+			movingSelectedUnfiled = false;
+		}
+	}
+
+	/** The same creation dialog is used by the sidebar and full library. */
+	export async function newFolder(parentId: string | null = null) {
+		newFolderParentId = parentId;
+		creatingFolder = true;
+	}
+</script>
+
+<div class={className} aria-busy={conversationsStore.busy || conversationsStore.loading}>
+	{#if conversationsStore.error}
+		<Alert.Root variant="destructive">
+			<Alert.Title>Conversations need attention</Alert.Title>
+			<Alert.Description>{conversationsStore.error}</Alert.Description>
+			<Button variant="outline" disabled={conversationsStore.loading} onclick={() => conversationsStore.retry()}>Retry</Button>
+		</Alert.Root>
+	{/if}
+	<InputGroup.Root class="mb-2">
+		<InputGroup.Addon><Icon icon="lucide:search" /></InputGroup.Addon>
+		<InputGroup.InputGroupInput
+			class="min-w-0"
+			bind:value={query}
+			placeholder="Search conversations..."
+			aria-label="Search conversations"
+		/>
+	</InputGroup.Root>
+
+	{#if showUnfiledBulk && !compact && conversationsStore.unfiled.length > 0}
+		<div class="mb-2 rounded-md border bg-muted/20 p-2">
+			<div class="flex flex-col gap-2 md:flex-row md:items-center md:justify-between">
+				<div class="flex min-w-0 items-center gap-2">
+					<Checkbox
+
+						checked={allUnfiledSelected}
+						indeterminate={someUnfiledSelected}
+						aria-label="Select all unfiled conversations"
+						onCheckedChange={(checked) => toggleAllUnfiled(checked === true)}
+					/>
+					<span class="truncate text-sm font-medium">Unfiled Conversations</span>
+					<span class="text-muted-foreground text-xs tabular-nums">
+						{selectedUnfiledCount} selected
+					</span>
+				</div>
+				<div class="flex flex-wrap items-center gap-2">
+					<Select.Root
+						type="single"
+						value={bulkDestinationFolderId}
+						onValueChange={(value: string) => (bulkDestinationFolderId = value)}
+						disabled={!hasSelectedUnfiled || movingSelectedUnfiled}
+					>
+						<Select.Trigger aria-label="Bulk destination folder">
+							{conversationsStore.folders.find((f) => f.id === bulkDestinationFolderId)?.name ??
+								'Move selected to...'}
+						</Select.Trigger>
+						<Select.Content>
+							{#each conversationsStore.folders as folder (folder.id)}
+								<Select.Item value={folder.id} class="py-2 text-sm">{folder.name}</Select.Item>
+							{/each}
+						</Select.Content>
+					</Select.Root>
+					<Button
+						size="sm"
+						variant="secondary"
+						disabled={!hasSelectedUnfiled || !bulkDestinationFolderId || movingSelectedUnfiled}
+						onclick={moveSelectedUnfiled}
+					>
+						{#if movingSelectedUnfiled}
+							<Icon icon="lucide:loader-circle" class="size-3.5 animate-spin" />
+						{:else}
+							<Icon icon="lucide:folder-plus" class="size-3.5" />
+						{/if}
+						Move selected
+					</Button>
+					<Button
+						size="sm"
+						variant="ghost"
+						disabled={!hasSelectedUnfiled || movingSelectedUnfiled}
+						onclick={clearUnfiledSelection}
+					>
+						<Icon icon="lucide:x" class="size-3.5" />
+						Clear
+					</Button>
+				</div>
+			</div>
+			<div class="mt-2 max-h-64 divide-y overflow-y-auto rounded-md border bg-background">
+				{#each conversationsStore.unfiled as room (room.id)}
+					<div class="flex items-center gap-2 px-2 py-1.5">
+						<Checkbox
+
+							checked={selectedUnfiledIds.has(room.id)}
+							aria-label={`Select ${room.title || 'Untitled'}`}
+							disabled={movingSelectedUnfiled}
+							onCheckedChange={(checked) => toggleUnfiledRoom(room.id, checked === true)}
+						/>
+						<Button variant="ghost" class="min-w-0 flex-1 justify-start truncate" onclick={() => onSelectRoom(room.id)}>
+							{room.title || 'Untitled'}
+						</Button>
+					</div>
+				{/each}
+			</div>
+		</div>
+	{/if}
+
+	<TreeView
+		nodes={display.nodes}
+		{expandedIds}
+		defaultExpandAll={!compact && conversationsStore.loaded}
+		activeRoomId={runtimeChatStore.activeRoom?.id}
+		onNodeDrop={handleDrop}
+		emptyMessage={q ? 'No matches' : 'No conversations yet'}
+		nodeIcon={iconSnippet}
+		nodeContent={contentSnippet}
+	/>
+</div>
+
+{#snippet iconSnippet({
+	node,
+	isExpanded
+}: {
+	node: TreeNode<ConvNode>;
+	isExpanded: boolean;
+	isSelected: boolean;
+})}
+	{#if node.data?.kind === 'unfiled'}
+		<Icon icon="lucide:inbox" class="text-muted-foreground h-4 w-4 shrink-0" />
+	{:else if node.data?.kind === 'folder'}
+		<Icon
+			icon={isExpanded ? 'lucide:folder-open' : 'lucide:folder'}
+			class="text-muted-foreground h-4 w-4 shrink-0"
+		/>
+	{:else}
+		<Icon icon="lucide:message-square" class="text-muted-foreground h-4 w-4 shrink-0" />
+	{/if}
+{/snippet}
+
+{#snippet contentSnippet({ node }: { node: TreeNode<ConvNode>; isExpanded: boolean; isSelected: boolean; depth: number })}
+	{@const data = node.data}
+	{#if data?.kind === 'folder' && renamingId === data.folderId && renamingKind === 'folder'}
+		<Input
+			id={`conv-rename-${instanceId}-${data.folderId}`}
+			class="min-w-0 flex-1"
+			bind:value={renameValue}
+			onclick={(e) => e.stopPropagation()}
+			onkeydown={(e) => {
+				e.stopPropagation();
+				if (e.key === 'Enter') {
+					e.preventDefault();
+					// Blur first so focus leaves the input (which lives inside the row's
+					// select button); otherwise removing it shifts focus to that button
+					// and the same Enter activates it, navigating into the conversation.
+					(e.currentTarget as HTMLElement).blur();
+					commitRename();
+				} else if (e.key === 'Escape') {
+					renamingId = null;
+					(e.currentTarget as HTMLElement).blur();
+				}
+			}}
+			onblur={commitRename}
+		/>
+	{:else if data?.kind === 'folder'}
+		<Button variant="ghost" class="min-w-0 flex-1 justify-start truncate" onclick={() => handleSelect(node)}>{node.label}</Button>
+		{#if roomCount(data.folderId) > 0}
+			<span class="text-muted-foreground text-xs tabular-nums">{roomCount(data.folderId)}</span>
+		{/if}
+		<div class="shrink-0">
+			<DropdownMenu.Root>
+				<DropdownMenu.Trigger>
+					{#snippet child({ props })}
+						<Button
+							{...props}
+							variant="ghost"
+							size="icon"
+							disabled={conversationsStore.busy}
+							title="Folder actions"
+							onclick={(e) => e.stopPropagation()}
+						>
+							<Icon icon="lucide:ellipsis" class="text-muted-foreground h-3.5 w-3.5" />
+						</Button>
+					{/snippet}
+				</DropdownMenu.Trigger>
+				<DropdownMenu.Content align="end" class="w-44">
+					<DropdownMenu.Item onclick={() => newFolder(data.folderId)}>
+						<Icon icon="lucide:folder-plus" class="mr-2 h-4 w-4" /> New subfolder
+					</DropdownMenu.Item>
+					<DropdownMenu.Item onclick={() => startRename('folder', data.folderId, node.label)}>
+						<Icon icon="lucide:pencil" class="mr-2 h-4 w-4" /> Rename
+					</DropdownMenu.Item>
+					<DropdownMenu.Item
+						class="text-destructive focus:text-destructive"
+						onclick={() => deletingFolder = { id: data.folderId, name: node.label }}
+					>
+						<Icon icon="lucide:trash-2" class="mr-2 h-4 w-4" /> Delete
+					</DropdownMenu.Item>
+				</DropdownMenu.Content>
+			</DropdownMenu.Root>
+		</div>
+	{:else if data?.kind === 'unfiled'}
+		<span class="text-muted-foreground flex-1 truncate text-sm font-medium">{node.label}</span>
+		{#if conversationsStore.unfiled.length > 0}
+			<span class="text-muted-foreground text-xs tabular-nums">
+				{conversationsStore.unfiled.length}
+			</span>
+		{/if}
+		{#if !compact && conversationsStore.folders.length > 0 && conversationsStore.unfiled.length > 0}
+			<Button
+				variant="ghost"
+				size="sm"
+				onclick={(e) => {
+					e.stopPropagation();
+					showUnfiledBulk = !showUnfiledBulk;
+					if (!showUnfiledBulk) clearUnfiledSelection();
+				}}
+			>
+				<Icon icon="lucide:list-checks" class="size-3.5" />
+				Bulk move
+			</Button>
+		{/if}
+	{:else if data?.kind === 'room' && renamingId === data.roomId && renamingKind === 'room'}
+		<Input
+			id={`conv-rename-${instanceId}-${data.roomId}`}
+			class="min-w-0 flex-1"
+			bind:value={renameValue}
+			onclick={(e) => e.stopPropagation()}
+			onkeydown={(e) => {
+				e.stopPropagation();
+				if (e.key === 'Enter') {
+					e.preventDefault();
+					// Blur first so focus leaves the input (which lives inside the row's
+					// select button); otherwise removing it shifts focus to that button
+					// and the same Enter activates it, navigating into the conversation.
+					(e.currentTarget as HTMLElement).blur();
+					commitRename();
+				} else if (e.key === 'Escape') {
+					renamingId = null;
+					(e.currentTarget as HTMLElement).blur();
+				}
+			}}
+			onblur={commitRename}
+		/>
+	{:else if data?.kind === 'room'}
+		<Button variant="ghost" class="min-w-0 flex-1 justify-start truncate" onclick={() => handleSelect(node)}>{node.label}</Button>
+		<div class="shrink-0">
+			<DropdownMenu.Root>
+				<DropdownMenu.Trigger>
+					{#snippet child({ props })}
+						<Button
+							{...props}
+							variant="ghost"
+							size="icon"
+							disabled={conversationsStore.busy}
+							title="Conversation actions"
+							onclick={(e) => e.stopPropagation()}
+						>
+							<Icon icon="lucide:ellipsis" class="text-muted-foreground h-3.5 w-3.5" />
+						</Button>
+					{/snippet}
+				</DropdownMenu.Trigger>
+				<DropdownMenu.Content align="end" class="w-44">
+					<DropdownMenu.Item onclick={() => onSelectRoom(data.roomId)}>
+						<Icon icon="lucide:square-arrow-out-up-right" class="mr-2 h-4 w-4" /> Open
+					</DropdownMenu.Item>
+					<DropdownMenu.Item onclick={() => startRename('room', data.roomId, node.label)}>
+						<Icon icon="lucide:pencil" class="mr-2 h-4 w-4" /> Rename
+					</DropdownMenu.Item>
+					<DropdownMenu.Sub>
+						<DropdownMenu.SubTrigger>Move to folder</DropdownMenu.SubTrigger>
+						<DropdownMenu.SubContent>
+							{#each conversationsStore.folders as folder (folder.id)}
+								<DropdownMenu.Item disabled={folder.id === data.folderId} onclick={() => conversationsStore.moveRoom(data.roomId, data.folderId, folder.id)}>{folder.name}</DropdownMenu.Item>
+							{/each}
+						</DropdownMenu.SubContent>
+					</DropdownMenu.Sub>
+					{#if data.folderId}
+						<DropdownMenu.Item
+							onclick={() => conversationsStore.moveRoom(data.roomId, data.folderId, null)}
+						>
+							<Icon icon="lucide:folder-minus" class="mr-2 h-4 w-4" /> Remove from folder
+						</DropdownMenu.Item>
+					{/if}
+					<DropdownMenu.Item
+						class="text-destructive focus:text-destructive"
+						onclick={() => (deletingRoom = { id: data.roomId, title: node.label })}
+					>
+						<Icon icon="lucide:trash-2" class="mr-2 h-4 w-4" /> Delete
+					</DropdownMenu.Item>
+				</DropdownMenu.Content>
+			</DropdownMenu.Root>
+		</div>
+	{/if}
+{/snippet}
+
+<CreateFolderDialog bind:open={creatingFolder} parentFolderId={newFolderParentId}
+	onCreated={() => { if (newFolderParentId) expandedIds.add(newFolderParentId); }} />
+
+<AlertDialog.Root open={!!deletingFolder} onOpenChange={(open) => { if (!open && !conversationsStore.busy) deletingFolder = null; }}>
+	<AlertDialog.Content>
+		<AlertDialog.Header>
+			<AlertDialog.Title>Delete folder?</AlertDialog.Title>
+			<AlertDialog.Description>
+				Delete “{deletingFolder?.name}”? Conversations will move to Unfiled, and subfolders will move up one level. No conversations will be deleted.
+				{#if conversationsStore.error}<p role="alert">{conversationsStore.error}</p>{/if}
+			</AlertDialog.Description>
+		</AlertDialog.Header>
+		<AlertDialog.Footer>
+			<AlertDialog.Cancel disabled={conversationsStore.busy}>Cancel</AlertDialog.Cancel>
+			<Button variant="destructive" disabled={conversationsStore.busy} onclick={async () => { if (deletingFolder && await conversationsStore.deleteFolder(deletingFolder.id)) deletingFolder = null; }}>Delete folder</Button>
+		</AlertDialog.Footer>
+	</AlertDialog.Content>
+</AlertDialog.Root>
+
+<AlertDialog.Root
+	open={!!deletingRoom}
+	onOpenChange={(o) => {
+		if (!o && !conversationsStore.busy) deletingRoom = null;
+	}}
+>
+	<AlertDialog.Content>
+		<AlertDialog.Header>
+			<AlertDialog.Title>Delete conversation?</AlertDialog.Title>
+			<AlertDialog.Description>
+				"{deletingRoom?.title}" will be permanently deleted. This cannot be undone.
+				{#if conversationsStore.error}<p role="alert">{conversationsStore.error}</p>{/if}
+			</AlertDialog.Description>
+		</AlertDialog.Header>
+		<AlertDialog.Footer>
+			<AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
+			<Button variant="destructive" disabled={conversationsStore.busy} onclick={confirmDeleteRoom}>
+				Delete
+			</Button>
+		</AlertDialog.Footer>
+	</AlertDialog.Content>
+</AlertDialog.Root>

package/dist/svelte/components/conversations/ConversationsTree.svelte.d.ts

@@ -0,0 +1,12 @@
+export interface ConversationsTreeProps {
+    compact?: boolean;
+    class?: string;
+    onSelectRoom?: (id: string) => void;
+    onDeletedRoom?: (id: string) => void;
+}
+declare const ConversationsTree: import("svelte").Component<ConversationsTreeProps, {
+    newFolder: (parentId?: string | null) => Promise<void>;
+}, "">;
+type ConversationsTree = ReturnType<typeof ConversationsTree>;
+export default ConversationsTree;
+//# sourceMappingURL=ConversationsTree.svelte.d.ts.map

package/dist/svelte/components/conversations/ConversationsTree.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConversationsTree.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/conversations/ConversationsTree.svelte.ts"],"names":[],"mappings":"AAGC,MAAM,WAAW,sBAAsB;IACtC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,aAAa,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACrC;AAglBF,QAAA,MAAM,iBAAiB;2BArHc,MAAM,GAAG,IAAI;MAqHa,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}