feat: Improve Keyboard Shortcuts UI & logic

Author: allozaur

tools/server/webui/README.md

@@ -9,7 +9,7 @@ A modern, feature-rich web interface for llama.cpp built with SvelteKit. This UI
 - **Conversation Management** - Create, edit, branch, and search conversations
 - **Advanced Markdown** - Code highlighting, math formulas (KaTeX), and content blocks
 - **Reasoning Content** - Support for models with thinking blocks
-- **Keyboard Shortcuts** - Full keyboard navigation (Ctrl+K, Ctrl+V, Ctrl+B, etc.)
+- **Keyboard Shortcuts** - Keyboard navigation (Shift+Ctrl/Cmd+O for new chat, Shift+Ctrl/Cmdt+E for edit conversation, Shift+Ctrl/Cmdt+D for delete conversation, Ctrl/Cmd+K for search, Ctrl/Cmd+V for paste, Ctrl/Cmd+B for opening/collapsing sidebar)
 - **Request Tracking** - Monitor processing with slots endpoint integration
 - **UI Testing** - Storybook component library with automated tests
 

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

@@ -130,11 +130,6 @@
 	function handleKeydown(event: KeyboardEvent) {
 		const isCtrlOrCmd = event.ctrlKey || event.metaKey;
 
-		if (isCtrlOrCmd && event.key === 'k') {
-			event.preventDefault();
-			goto('/?new_chat=true');
-		}
-
 		if (isCtrlOrCmd && event.shiftKey && (event.key === 'd' || event.key === 'D')) {
 			event.preventDefault();
 			if (activeConversation()) {

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

@@ -42,6 +42,23 @@
 		}
 	}
 
+	export function activateSearchMode() {
+		isSearchModeActive = true;
+	}
+
+	export function editActiveConversation() {
+		if (currentChatId) {
+			const activeConversation = filteredConversations.find(conv => conv.id === currentChatId);
+
+			if (activeConversation) {
+				const event = new CustomEvent('edit-active-conversation', { 
+					detail: { conversationId: currentChatId } 
+				});
+				document.dispatchEvent(event);
+			}
+		}
+	}
+
 	async function selectConversation(id: string) {
 		if (isSearchModeActive) {
 			isSearchModeActive = false;

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

@@ -2,6 +2,7 @@
 	import { Button } from '$lib/components/ui/button';
 	import { Input } from '$lib/components/ui/input';
 	import { Search, SquarePen, X } from '@lucide/svelte';
+	import KeyboardShortcutInfo from '$lib/components/ui/KeyboardShortcutInfo.svelte';
 
 	interface Props {
 		handleMobileSidebarItemClick: () => void;
@@ -49,26 +50,32 @@
 		</div>
 	{:else}
 		<Button
-			class="w-full justify-start gap-2"
+			class="w-full justify-between hover:[&>kbd]:opacity-100"
 			href="/?new_chat=true"
 			onclick={handleMobileSidebarItemClick}
 			variant="ghost"
 		>
-			<SquarePen class="h-4 w-4" />
+			<div class="flex items-center gap-2">
+				<SquarePen class="h-4 w-4" />
+				New chat
+			</div>
 
-			New chat
+			<KeyboardShortcutInfo keys={['shift', 'cmd', 'o']} />
 		</Button>
 
 		<Button
-			class="w-full justify-start gap-2"
+			class="w-full justify-between hover:[&>kbd]:opacity-100"
 			onclick={() => {
 				isSearchModeActive = true;
 			}}
 			variant="ghost"
 		>
-			<Search class="h-4 w-4" />
+			<div class="flex items-center gap-2">
+				<Search class="h-4 w-4" />
+				Search conversations
+			</div>
 
-			Search conversations
+			<KeyboardShortcutInfo keys={['cmd', 'k']} />
 		</Button>
 	{/if}
 </div>

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

@@ -3,6 +3,7 @@
 	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';
+	import KeyboardShortcutInfo from '$lib/components/ui/KeyboardShortcutInfo.svelte';
 
 	interface Props {
 		isActive?: boolean;
@@ -58,6 +59,23 @@
 	function handleSelect() {
 		onSelect?.(conversation.id);
 	}
+
+	// Listen for global edit event
+	function handleGlobalEditEvent(event: Event) {
+		const customEvent = event as CustomEvent<{ conversationId: string }>;
+		if (customEvent.detail.conversationId === conversation.id && isActive) {
+			handleEdit(event);
+		}
+	}
+
+	// Add event listener when component mounts
+	$effect(() => {
+		document.addEventListener('edit-active-conversation', handleGlobalEditEvent as EventListener);
+		
+		return () => {
+			document.removeEventListener('edit-active-conversation', handleGlobalEditEvent as EventListener);
+		};
+	});
 </script>
 
 <button
@@ -93,25 +111,29 @@
 			</DropdownMenu.Trigger>
 
 			<DropdownMenu.Content align="end" class="z-999 w-48">
-				<DropdownMenu.Item onclick={handleEdit} class="flex items-center gap-2">
-					<Pencil class="h-4 w-4" />
-
-					Edit
+				<DropdownMenu.Item onclick={handleEdit} class="flex items-center justify-between hover:[&>kbd]:opacity-100">
+					<div class="flex items-center gap-2">
+						<Pencil class="h-4 w-4" />
+						Edit
+					</div>
+					<KeyboardShortcutInfo keys={['shift', 'cmd', 'e']} />
 				</DropdownMenu.Item>
 
 				<DropdownMenu.Separator />
 
 				<DropdownMenu.Item
 					variant="destructive"
-					class="flex items-center gap-2"
+					class="flex items-center justify-between hover:[&>kbd]:opacity-100"
 					onclick={(e) => {
 						e.stopPropagation();
 						showDeleteDialog = true;
 					}}
 				>
-					<Trash2 class="h-4 w-4" />
-
-					Delete
+					<div class="flex items-center gap-2">
+						<Trash2 class="h-4 w-4 text-destructive" />
+						Delete
+					</div>
+					<KeyboardShortcutInfo keys={['shift', 'cmd', 'd']} variant="destructive" />
 				</DropdownMenu.Item>
 			</DropdownMenu.Content>
 		</DropdownMenu.Root>

tools/server/webui/src/lib/components/ui/KeyboardShortcutInfo.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import { ArrowBigUp } from '@lucide/svelte';
+
+	interface Props {
+		keys: string[];
+		variant?: 'default' | 'destructive';
+		class?: string;
+	}
+
+	let {
+		keys,
+		variant = 'default',
+		class: className = ''
+	}: Props = $props();
+
+	let baseClasses = 'px-1 pointer-events-none inline-flex select-none items-center gap-0.5 font-mono text-md font-medium opacity-0 transition-opacity';
+	let variantClasses = variant === 'destructive' ? 'text-destructive' : 'text-muted-foreground';
+</script>
+
+<kbd class="{baseClasses} {variantClasses} {className}">
+	{#each keys as key, index}
+		{#if key === 'shift'}
+			<ArrowBigUp class="h-2 w-2 {variant === 'destructive' ? 'text-destructive' : ''} -mr-1" />
+		{:else if key === 'cmd'}
+			<span class="text-lg {variant === 'destructive' ? 'text-destructive' : ''}">⌘</span>
+		{:else}
+			{key.toUpperCase()}
+		{/if}
+		{#if index < keys.length - 1}
+			<span> </span>
+		{/if}
+	{/each}
+</kbd>

tools/server/webui/src/routes/+layout.svelte

@@ -7,6 +7,7 @@
 	import { serverStore } from '$lib/stores/server.svelte';
 	import { ModeWatcher } from 'mode-watcher';
 	import { Toaster } from 'svelte-sonner';
+	import { goto } from '$app/navigation';
 
 	let { children } = $props();
 
@@ -15,6 +16,7 @@
 	let isNewChatMode = $derived(page.url.searchParams.get('new_chat') === 'true');
 	let showSidebarByDefault = $derived(activeMessages().length > 0 || isLoading());
 	let sidebarOpen = $state(false);
+	let chatSidebar: any = $state();
 
 	$effect(() => {
 		if (isHomeRoute && !isNewChatMode) {
@@ -36,6 +38,32 @@
 	$effect(() => {
 		serverStore.fetchServerProps();
 	});
+
+	// Global keyboard shortcuts
+	function handleKeydown(event: KeyboardEvent) {
+		const isCtrlOrCmd = event.ctrlKey || event.metaKey;
+
+		if (isCtrlOrCmd && event.key === 'k') {
+			event.preventDefault();
+			if (chatSidebar?.activateSearchMode) {
+				chatSidebar.activateSearchMode();
+				sidebarOpen = true;
+			}
+		}
+
+		if (isCtrlOrCmd && event.shiftKey && event.key === 'o') {
+			event.preventDefault();
+			goto('/?new_chat=true');
+		}
+
+		if (event.shiftKey && isCtrlOrCmd && event.key === 'e') {
+			event.preventDefault();
+			
+			if (chatSidebar?.editActiveConversation) {
+				chatSidebar.editActiveConversation();
+			}
+		}
+	}
 </script>
 
 <ModeWatcher />
@@ -47,7 +75,7 @@
 <Sidebar.Provider bind:open={sidebarOpen}>
 	<div class="flex h-screen w-full">
 		<Sidebar.Root class="h-full">
-			<ChatSidebar />
+			<ChatSidebar bind:this={chatSidebar} />
 		</Sidebar.Root>
 
 		<Sidebar.Trigger
@@ -62,3 +90,5 @@
 		</Sidebar.Inset>
 	</div>
 </Sidebar.Provider>
+
+<svelte:window onkeydown={handleKeydown} />