refac

src/lib/components/chat/ShortcutItem.svelte

@@ -1,18 +1,25 @@
 <script lang="ts">
 	import { getContext, onMount } from 'svelte';
+	import type { Writable } from 'svelte/store';
 	import Tooltip from '../common/Tooltip.svelte';
-	import type { Shortcut } from '$lib/shortcuts';
+	import { shortcuts } from '$lib/shortcuts';
 
-	export let shortcut: Shortcut;
+	type ShortcutDefinition = NonNullable<(typeof shortcuts)[keyof typeof shortcuts]>;
+
+	export let shortcut: ShortcutDefinition;
 	export let isMac: boolean;
 
-	const i18n = getContext('i18n');
+	const i18n: Writable<any> = getContext('i18n');
 	let keyboardLayoutMap: Map<string, string> | undefined;
 
 	onMount(async () => {
-		if (navigator.keyboard && 'getLayoutMap' in navigator.keyboard) {
+		const nav = navigator as Navigator & {
+			keyboard?: { getLayoutMap?: () => Promise<Map<string, string>> };
+		};
+
+		if (nav.keyboard?.getLayoutMap) {
 			try {
-				keyboardLayoutMap = await navigator.keyboard.getLayoutMap();
+				keyboardLayoutMap = await nav.keyboard.getLayoutMap();
 			} catch (error) {
 				console.error('Failed to get keyboard layout map:', error);
 			}
@@ -70,27 +77,34 @@
 				return key.toUpperCase();
 		}
 	}
+
+	function visibleKeys(keys: string[]): string[] {
+		return keys.filter((key) => !(key.toLowerCase() === 'delete' && keys.includes('Backspace')));
+	}
+
+	function formatKeys(keys: string[]): string {
+		return visibleKeys(keys)
+			.map(formatKey)
+			.join(isMac ? '' : ' + ');
+	}
 </script>
 
-<div class="w-full flex justify-between">
-	<div class="text-sm whitespace-pre-line">
+<div class="flex min-h-8 w-full items-center gap-3 px-1 py-1.5">
+	<div class="min-w-0 flex-1 text-[0.71875rem] leading-tight text-gray-700 dark:text-gray-300">
 		{#if shortcut.tooltip}
 			<Tooltip content={$i18n.t(shortcut.tooltip)}>
-				<span class="whitespace-nowrap">
-					{$i18n.t(shortcut.name)}<span class="text-xs">&nbsp;*</span>
+				<span class="inline-flex max-w-full items-baseline gap-1">
+					<span class="truncate whitespace-pre-line">{$i18n.t(shortcut.name)}</span>
+					<span class="text-[0.625rem] text-gray-400 dark:text-gray-600">*</span>
 				</span>
 			</Tooltip>
 		{:else}
-			{$i18n.t(shortcut.name)}
+			<span class="whitespace-pre-line">{$i18n.t(shortcut.name)}</span>
 		{/if}
 	</div>
-	<div class="flex-shrink-0 flex justify-end self-start h-full space-x-1 text-xs">
-		{#each shortcut.keys.filter((key) => !(key.toLowerCase() === 'delete' && shortcut.keys.includes('Backspace'))) as key}
-			<div
-				class="h-fit px-1 py-0.5 flex items-start justify-center rounded-sm border border-black/10 capitalize text-gray-600 dark:border-white/10 dark:text-gray-300"
-			>
-				{formatKey(key)}
-			</div>
-		{/each}
-	</div>
+	<span
+		class="inline-flex min-h-[1.125rem] max-w-[9.5rem] shrink-0 items-center justify-center rounded-full bg-gray-100 px-[0.4375rem] py-0.5 text-center text-[0.625rem] font-medium leading-none text-gray-500 dark:bg-white/6 dark:text-gray-400"
+	>
+		{formatKeys(shortcut.keys)}
+	</span>
 </div>