feat: UI improvements for Keyboard Shortcut Info

Author: allozaur

tools/server/webui/src/lib/components/ui/KeyboardShortcutInfo.svelte renamed to tools/server/webui/src/lib/components/app/KeyboardShortcutInfo.svelte

@@ -10,16 +10,16 @@
 	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';
+		'px-1 pointer-events-none inline-flex select-none items-center gap-0.5 font-sans text-md font-medium opacity-0 transition-opacity -my-1';
 	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" />
+			<ArrowBigUp class="h-1 w-1 {variant === 'destructive' ? 'text-destructive' : ''} -mr-1" />
 		{:else if key === 'cmd'}
-			<span class="text-lg {variant === 'destructive' ? 'text-destructive' : ''}">⌘</span>
+			<span class="{variant === 'destructive' ? 'text-destructive' : ''}">⌘</span>
 		{:else}
 			{key.toUpperCase()}
 		{/if}

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

@@ -2,7 +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';
+	import { KeyboardShortcutInfo } from '$lib/components/app';
 
 	interface Props {
 		handleMobileSidebarItemClick: () => void;

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

@@ -3,7 +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';
+	import { KeyboardShortcutInfo } from '$lib/components/app';
 
 	interface Props {
 		isActive?: boolean;
@@ -122,6 +122,7 @@
 						<Pencil class="h-4 w-4" />
 						Edit
 					</div>
+
 					<KeyboardShortcutInfo keys={['shift', 'cmd', 'e']} />
 				</DropdownMenu.Item>
 
@@ -139,6 +140,7 @@
 						<Trash2 class="h-4 w-4 text-destructive" />
 						Delete
 					</div>
+
 					<KeyboardShortcutInfo keys={['shift', 'cmd', 'd']} variant="destructive" />
 				</DropdownMenu.Item>
 			</DropdownMenu.Content>

tools/server/webui/src/lib/components/app/index.ts

@@ -23,13 +23,16 @@ export { default as ChatSettingsDialog } from './chat/ChatSettings/ChatSettingsD
 export { default as ChatSettingsSection } from './chat/ChatSettings/ChatSettingsSection.svelte';
 export { default as ChatSettingsFooter } from './chat/ChatSettings/ChatSettingsFooter.svelte';
 
-export { default as ChatSidebarConversationItem } from './chat/ChatSidebar/ChatSidebarConversationItem.svelte';
 export { default as ChatSidebar } from './chat/ChatSidebar/ChatSidebar.svelte';
-export { default as MaximumContextAlertDialog } from './MaximumContextAlertDialog.svelte';
+export { default as ChatSidebarConversationItem } from './chat/ChatSidebar/ChatSidebarConversationItem.svelte';
 export { default as ChatSidebarSearch } from './chat/ChatSidebar/ChatSidebarSearch.svelte';
 
+export { default as KeyboardShortcutInfo } from './KeyboardShortcutInfo.svelte';
+
 export { default as MarkdownContent } from './MarkdownContent.svelte';
 
+export { default as MaximumContextAlertDialog } from './MaximumContextAlertDialog.svelte';
+
 export { default as ServerStatus } from './ServerStatus.svelte';
 export { default as ServerErrorSplash } from './ServerErrorSplash.svelte';
 export { default as ServerLoadingSplash } from './ServerLoadingSplash.svelte';