Merge pull request #1101 from EpicenterHQ/kbd-migration

refactor: migrate keyboard shortcuts to Kbd component

Author: braden-w

apps/whispering/src/lib/constants/keyboard/display-labels.ts

@@ -85,11 +85,11 @@ const BROWSER_KEY_DISPLAY_LABELS: Partial<
  * Gets display label for a full shortcut string.
  *
  * @param shortcut - The shortcut string (e.g., "control+shift+ ", "a")
- * @returns Human-readable display (e.g., "Ctrl+Shift+Space", "A")
+ * @returns Human-readable display (e.g., "Ctrl + Shift + Space", "A")
  *
  * @example
  * getShortcutDisplayLabel(' ')           // 'Space'
- * getShortcutDisplayLabel('control+a')   // 'Ctrl+A'
+ * getShortcutDisplayLabel('control+a')   // 'Ctrl + A'
  * getShortcutDisplayLabel(null)          // ''
  */
 export function getShortcutDisplayLabel(shortcut: string | null): string {
@@ -98,7 +98,7 @@ export function getShortcutDisplayLabel(shortcut: string | null): string {
 	return shortcut
 		.split('+')
 		.map((key) => formatKeyForDisplay(key.toLowerCase()))
-		.join('+');
+		.join(' + ');
 }
 
 /**

apps/whispering/src/lib/constants/keyboard/index.ts

@@ -16,12 +16,9 @@ export {
 	KEYBOARD_EVENT_SUPPORTED_KEYS,
 	type KeyboardEventSupportedKey,
 } from './browser/supported-keys';
-
+export { getShortcutDisplayLabel } from './display-labels';
 export {
 	normalizeOptionKeyCharacter,
 	OPTION_DEAD_KEYS,
 } from './macos-option-key-map';
-
 export { CommandOrAlt, CommandOrControl } from './modifiers';
-
-export { getShortcutDisplayLabel } from './display-labels';

apps/whispering/src/routes/(app)/(config)/install-ffmpeg/+page.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { Button, buttonVariants } from '@epicenter/ui/button';
+	import * as Kbd from '@epicenter/ui/kbd';
 	import { Link } from '@epicenter/ui/link';
 	import * as Card from '@epicenter/ui/card';
 	import * as Alert from '@epicenter/ui/alert';
@@ -230,10 +231,8 @@
 														<li class="flex gap-3">
 															<span class="shrink-0">a.</span>
 															<span
-																>Press <kbd
-																	class="bg-muted px-2 py-1 rounded font-mono text-xs"
-																	>Windows + X</kbd
-																> and select "System"</span
+																>Press <Kbd.Root>Windows + X</Kbd.Root> and select
+																"System"</span
 															>
 														</li>
 														<li class="flex gap-3">

apps/whispering/src/routes/(app)/(config)/settings/shortcuts/keyboard-shortcut-recorder/KeyboardShortcutRecorder.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import * as Alert from '@epicenter/ui/alert';
-	import { Badge } from '@epicenter/ui/badge';
 	import { Button } from '@epicenter/ui/button';
+	import * as Kbd from '@epicenter/ui/kbd';
 	import { Input } from '@epicenter/ui/input';
 	import * as Popover from '@epicenter/ui/popover';
 	import {
@@ -41,9 +41,7 @@
 
 <div class="flex items-center justify-end gap-2">
 	{#if rawKeyCombination}
-		<Badge variant="secondary" class="font-mono text-xs">
-			{getShortcutDisplayLabel(rawKeyCombination)}
-		</Badge>
+		<Kbd.Root>{getShortcutDisplayLabel(rawKeyCombination)}</Kbd.Root>
 		<Button
 			variant="ghost"
 			size="icon"
@@ -137,9 +135,7 @@
 								class="flex grow items-center gap-1.5 overflow-x-auto pr-2 scrollbar-none"
 							>
 								{#if rawKeyCombination && !keyRecorder.isListening}
-									<Badge variant="secondary" class="font-mono text-xs">
-										{getShortcutDisplayLabel(rawKeyCombination)}
-									</Badge>
+									<Kbd.Root>{getShortcutDisplayLabel(rawKeyCombination)}</Kbd.Root>
 								{:else if !keyRecorder.isListening}
 									<span class="truncate text-muted-foreground"
 										>{placeholder}</span

apps/whispering/src/routes/(app)/(config)/settings/shortcuts/keyboard-shortcut-recorder/ShortcutFormatHelp.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import * as Alert from '@epicenter/ui/alert';
-	import { Badge } from '@epicenter/ui/badge';
 	import { Button } from '@epicenter/ui/button';
+	import * as Kbd from '@epicenter/ui/kbd';
 	import * as Dialog from '@epicenter/ui/dialog';
 	import {
 		ACCELERATOR_SECTIONS,
@@ -90,9 +90,7 @@
 					<p class="text-xs text-muted-foreground mb-2">Hold with other keys</p>
 					<div class="flex flex-wrap sm:flex-col gap-1">
 						{#each (isLocal ? KEYBOARD_EVENT_SUPPORTED_KEY_SECTIONS.at(0) : ACCELERATOR_SECTIONS.at(0)).keys as modifier}
-							<Badge variant="outline" class="font-mono text-sm justify-start">
-								{modifier}
-							</Badge>
+							<Kbd.Root>{modifier}</Kbd.Root>
 						{/each}
 					</div>
 				</div>
@@ -108,9 +106,7 @@
 								</p>
 								<div class="flex flex-wrap gap-1">
 									{#each section.keys as key}
-										<Badge variant="secondary" class="font-mono text-xs">
-											{key}
-										</Badge>
+										<Kbd.Root>{key}</Kbd.Root>
 									{/each}
 								</div>
 							</div>
@@ -140,9 +136,7 @@
 						</p>
 						<div class="flex flex-wrap gap-1 my-2">
 							{#each OPTION_DEAD_KEYS as key}
-								<Badge variant="outline" class="font-mono text-xs">
-									Option+{key.toUpperCase()}
-								</Badge>
+								<Kbd.Root>Option + {key.toUpperCase()}</Kbd.Root>
 							{/each}
 						</div>
 						<p class="font-medium">Workarounds:</p>

apps/whispering/src/routes/(app)/+page.svelte

@@ -3,6 +3,7 @@
 	import NavItems from '$lib/components/NavItems.svelte';
 	import CopyToClipboardButton from '$lib/components/copyable/CopyToClipboardButton.svelte';
 	import { Button } from '@epicenter/ui/button';
+	import * as Kbd from '@epicenter/ui/kbd';
 	import { Link } from '@epicenter/ui/link';
 	import { ClipboardIcon } from '$lib/components/icons';
 	import {
@@ -365,13 +366,7 @@
 				tooltip="Go to local shortcut in settings"
 				href="/settings/shortcuts/local"
 			>
-				<kbd
-					class="bg-muted relative rounded px-[0.3rem] py-[0.15rem] font-mono text-sm font-semibold"
-				>
-					{getShortcutDisplayLabel(
-						settings.value['shortcuts.local.toggleManualRecording'],
-					)}
-				</kbd>
+	<Kbd.Root>{getShortcutDisplayLabel(settings.value['shortcuts.local.toggleManualRecording'])}</Kbd.Root>
 			</Link>{' '}
 			to start recording here.
 		</p>
@@ -382,11 +377,7 @@
 					tooltip="Go to global shortcut in settings"
 					href="/settings/shortcuts/global"
 				>
-					<kbd
-						class="bg-muted relative rounded px-[0.3rem] py-[0.15rem] font-mono text-sm font-semibold"
-					>
-						{settings.value['shortcuts.global.toggleManualRecording']}
-					</kbd>
+	<Kbd.Root>{getShortcutDisplayLabel(settings.value['shortcuts.global.toggleManualRecording'])}</Kbd.Root>
 				</Link>{' '}
 				to start recording anywhere.
 			</p>