refactor: Cleanup

Author: allozaur

tools/server/webui/src/lib/components/app/chat/ChatSettings/ConversationSelectionDialog.svelte

@@ -28,21 +28,18 @@
 	let searchQuery = $state('');
 	let selectedIds = $state.raw<SvelteSet<string>>(new SvelteSet(conversations.map((c) => c.id)));
 
-	// Filter conversations based on search query
 	let filteredConversations = $derived(
 		conversations.filter((conv) => {
 			const name = conv.name || 'Untitled conversation';
 			return name.toLowerCase().includes(searchQuery.toLowerCase());
 		})
 	);
 
-	// Check if all filtered conversations are selected
 	let allSelected = $derived(
 		filteredConversations.length > 0 &&
 			filteredConversations.every((conv) => selectedIds.has(conv.id))
 	);
 
-	// Check if some (but not all) filtered conversations are selected
 	let someSelected = $derived(
 		filteredConversations.some((conv) => selectedIds.has(conv.id)) && !allSelected
 	);
@@ -59,13 +56,13 @@
 
 	function toggleAll() {
 		if (allSelected) {
-			// Deselect all filtered conversations
 			const newSet = new SvelteSet(selectedIds);
+
 			filteredConversations.forEach((conv) => newSet.delete(conv.id));
 			selectedIds = newSet;
 		} else {
-			// Select all filtered conversations
 			const newSet = new SvelteSet(selectedIds);
+
 			filteredConversations.forEach((conv) => newSet.add(conv.id));
 			selectedIds = newSet;
 		}
@@ -77,37 +74,36 @@
 	}
 
 	function handleCancel() {
-		// Reset selection to all conversations
 		selectedIds = new SvelteSet(conversations.map((c) => c.id));
 		searchQuery = '';
+
 		onCancel();
 	}
 
-	// Track previous open state to detect close
 	let previousOpen = $state(false);
 
-	// Reset selection when dialog opens, call onCancel when it closes
 	$effect(() => {
 		if (open && !previousOpen) {
-			// Dialog just opened
 			selectedIds = new SvelteSet(conversations.map((c) => c.id));
 			searchQuery = '';
 		} else if (!open && previousOpen) {
-			// Dialog just closed
 			onCancel();
 		}
+
 		previousOpen = open;
 	});
 </script>
 
 <Dialog.Root bind:open>
 	<Dialog.Portal>
 		<Dialog.Overlay class="z-[1000000]" />
+
 		<Dialog.Content class="z-[1000001] max-w-2xl">
 			<Dialog.Header>
 				<Dialog.Title>
 					Select Conversations to {mode === 'export' ? 'Export' : 'Import'}
 				</Dialog.Title>
+
 				<Dialog.Description>
 					{#if mode === 'export'}
 						Choose which conversations you want to export. Selected conversations will be downloaded
@@ -120,10 +116,11 @@
 			</Dialog.Header>
 
 			<div class="space-y-4">
-				<!-- Search Input -->
 				<div class="relative">
 					<Search class="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+
 					<Input bind:value={searchQuery} placeholder="Search conversations..." class="pr-9 pl-9" />
+
 					{#if searchQuery}
 						<button
 							class="absolute top-1/2 right-3 -translate-y-1/2 text-muted-foreground hover:text-foreground"
@@ -135,7 +132,6 @@
 					{/if}
 				</div>
 
-				<!-- Selection Summary -->
 				<div class="flex items-center justify-between text-sm text-muted-foreground">
 					<span>
 						{selectedIds.size} of {conversations.length} selected
@@ -145,7 +141,6 @@
 					</span>
 				</div>
 
-				<!-- Conversations Table -->
 				<div class="overflow-hidden rounded-md border">
 					<ScrollArea class="h-[400px]">
 						<table class="w-full">
@@ -158,7 +153,9 @@
 											onCheckedChange={toggleAll}
 										/>
 									</th>
+
 									<th class="p-3 text-left text-sm font-medium">Conversation Name</th>
+
 									<th class="w-32 p-3 text-left text-sm font-medium">Messages</th>
 								</tr>
 							</thead>
@@ -185,6 +182,7 @@
 													onCheckedChange={() => toggleConversation(conv.id)}
 												/>
 											</td>
+
 											<td class="p-3 text-sm">
 												<div
 													class="max-w-[17rem] truncate"
@@ -193,6 +191,7 @@
 													{conv.name || 'Untitled conversation'}
 												</div>
 											</td>
+
 											<td class="p-3 text-sm text-muted-foreground">
 												{messageCountMap.get(conv.id) ?? 0}
 											</td>
@@ -207,6 +206,7 @@
 
 			<Dialog.Footer>
 				<Button variant="outline" onclick={handleCancel}>Cancel</Button>
+
 				<Button onclick={handleConfirm} disabled={selectedIds.size === 0}>
 					{mode === 'export' ? 'Export' : 'Import'} ({selectedIds.size})
 				</Button>

tools/server/webui/src/lib/components/app/chat/ChatSettings/ImportExportTab.svelte

@@ -4,15 +4,14 @@
 	import ConversationSelectionDialog from './ConversationSelectionDialog.svelte';
 	import { DatabaseStore } from '$lib/stores/database';
 	import type { ExportedConversations } from '$lib/types/database';
-	import { createMessageCountMap } from '$lib/utils/conversationUtils';
+	import { createMessageCountMap } from '$lib/utils/conversation-utils';
 	import { chatStore } from '$lib/stores/chat.svelte';
 
 	let exportedConversations = $state<DatabaseConversation[]>([]);
 	let importedConversations = $state<DatabaseConversation[]>([]);
 	let showExportSummary = $state(false);
 	let showImportSummary = $state(false);
 
-	// Dialog state
 	let showExportDialog = $state(false);
 	let showImportDialog = $state(false);
 	let availableConversations = $state<DatabaseConversation[]>([]);
@@ -23,22 +22,19 @@
 
 	async function handleExportClick() {
 		try {
-			// Load all conversations for selection
 			const allConversations = await DatabaseStore.getAllConversations();
 			if (allConversations.length === 0) {
 				alert('No conversations to export');
 				return;
 			}
 
-			// Load messages for each conversation to get counts
 			const conversationsWithMessages = await Promise.all(
 				allConversations.map(async (conv) => {
 					const messages = await DatabaseStore.getConversationMessages(conv.id);
 					return { conv, messages };
 				})
 			);
 
-			// Create message count map
 			messageCountMap = createMessageCountMap(conversationsWithMessages);
 			availableConversations = allConversations;
 			showExportDialog = true;
@@ -50,7 +46,6 @@
 
 	async function handleExportConfirm(selectedConversations: DatabaseConversation[]) {
 		try {
-			// Export selected conversations - use snapshot to get plain objects
 			const allData: ExportedConversations = await Promise.all(
 				selectedConversations.map(async (conv) => {
 					const messages = await DatabaseStore.getConversationMessages(conv.id);
@@ -63,6 +58,7 @@
 			});
 			const url = URL.createObjectURL(blob);
 			const a = document.createElement('a');
+
 			a.href = url;
 			a.download = `conversations_${new Date().toISOString().split('T')[0]}.json`;
 			document.body.appendChild(a);
@@ -82,8 +78,8 @@
 
 	async function handleImportClick() {
 		try {
-			// Open file picker
 			const input = document.createElement('input');
+
 			input.type = 'file';
 			input.accept = '.json';
 
@@ -112,17 +108,15 @@
 						);
 					}
 
-					// Store full import data and extract conversations for selection dialog
 					fullImportData = importedData;
 					availableConversations = importedData.map(
 						(item: { conv: DatabaseConversation; messages: DatabaseMessage[] }) => item.conv
 					);
-
-					// Create message count map from imported data
 					messageCountMap = createMessageCountMap(importedData);
 					showImportDialog = true;
 				} catch (err: unknown) {
 					const message = err instanceof Error ? err.message : 'Unknown error';
+
 					console.error('Failed to parse file:', err);
 					alert(`Failed to parse file: ${message}`);
 				}
@@ -137,16 +131,13 @@
 
 	async function handleImportConfirm(selectedConversations: DatabaseConversation[]) {
 		try {
-			// Filter the original import data to only include selected conversations
 			const selectedIds = new Set(selectedConversations.map((c) => c.id));
 			const selectedData = $state
 				.snapshot(fullImportData)
 				.filter((item) => selectedIds.has(item.conv.id));
 
-			// Import selected conversations with their messages
 			await DatabaseStore.importConversations(selectedData);
 
-			// Refresh the conversations list in the chat store
 			await chatStore.loadConversations();
 
 			importedConversations = selectedConversations;
@@ -245,7 +236,6 @@
 	</div>
 </div>
 
-<!-- Export Dialog -->
 <ConversationSelectionDialog
 	conversations={availableConversations}
 	{messageCountMap}
@@ -255,7 +245,6 @@
 	onConfirm={handleExportConfirm}
 />
 
-<!-- Import Dialog -->
 <ConversationSelectionDialog
 	conversations={availableConversations}
 	{messageCountMap}