feat: Enables editing of conversation names

Allows users to rename existing conversations in the chat sidebar.

This change introduces an edit dialog to the conversation item,
allowing users to input a new name for the conversation. The name
is then updated in the store.

Author: allozaur

tools/server/webui/src/lib/components/app/chat/ChatSidebar/ChatSidebar.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import * as Sidebar from '$lib/components/ui/sidebar/index.js';
 	import { ChatSidebarConversationItem } from '$lib/components/app';
-	import { conversations, deleteConversation } from '$lib/stores/chat.svelte';
+	import { conversations, deleteConversation, updateConversationName } from '$lib/stores/chat.svelte';
 	import { goto } from '$app/navigation';
 	import { page } from '$app/state';
 	import { useSidebar } from '$lib/components/ui/sidebar';
@@ -28,8 +28,8 @@
 		return conversations();
 	});
 
-	async function editConversation(id: string) {
-		console.log('Editing conversation:', id);
+	async function editConversation(id: string, name: string) {
+		await updateConversationName(id, name);
 	}
 
 	async function handleDeleteConversation(id: string) {

tools/server/webui/src/lib/components/app/chat/ChatSidebar/ChatSidebarConversationItem.svelte

@@ -1,13 +1,14 @@
 <script lang="ts">
 	import * as AlertDialog from '$lib/components/ui/alert-dialog';
 	import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
+	import Input from '$lib/components/ui/input/input.svelte';
 	import { Trash2, Pencil, MoreHorizontal } from '@lucide/svelte';
 
 	interface Props {
 		conversation: DatabaseConversation;
 		isActive?: boolean;
 		onSelect?: (id: string) => void;
-		onEdit?: (id: string) => void;
+		onEdit?: (id: string, name: string) => void;
 		onDelete?: (id: string) => void;
 		showLastModified?: boolean;
 	}
@@ -22,7 +23,9 @@
 	}: Props = $props();
 
 	let showDeleteDialog = $state(false);
+	let showEditDialog = $state(false);
 	let showDropdown = $state(false);
+	let editedName = $state('');
 
 	function formatLastModified(timestamp: number) {
 		const now = Date.now();
@@ -43,7 +46,13 @@
 
 	function handleEdit(event: Event) {
 		event.stopPropagation();
-		onEdit?.(conversation.id);
+		editedName = conversation.name;
+		showEditDialog = true;
+	}
+
+	function handleConfirmEdit() {
+		if (!editedName.trim()) return;
+		onEdit?.(conversation.id, editedName);
 	}
 
 	function handleConfirmDelete() {
@@ -123,6 +132,33 @@
 				</AlertDialog.Footer>
 			</AlertDialog.Content>
 		</AlertDialog.Root>
+
+		<AlertDialog.Root bind:open={showEditDialog}>
+			<AlertDialog.Content>
+				<AlertDialog.Header>
+					<AlertDialog.Title>Edit Conversation Name</AlertDialog.Title>
+					<AlertDialog.Description>
+						<Input
+							class="mt-4 text-foreground"
+							onkeydown={(e) => {
+								if (e.key === 'Enter') {
+									e.preventDefault();
+									handleConfirmEdit();
+									showEditDialog = false;
+								}
+							}}
+							placeholder="Enter a new name"
+							type="text"
+							bind:value={editedName}
+						/>
+					</AlertDialog.Description>
+				</AlertDialog.Header>
+				<AlertDialog.Footer>
+					<AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
+					<AlertDialog.Action onclick={handleConfirmEdit}>Save</AlertDialog.Action>
+				</AlertDialog.Footer>
+			</AlertDialog.Content>
+		</AlertDialog.Root>
 	</div>
 </button>