fix(renderer): improve shortcut hint rendering

src/renderer/lib/ui/kbd.tsx

@@ -17,7 +17,10 @@ function KbdGroup({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <kbd
       data-slot="kbd-group"
-      className={cn('inline-flex items-center gap-1', className)}
+      className={cn(
+        'inline-flex items-center gap-0 [&>[data-slot=kbd]]:min-w-0 [&>[data-slot=kbd]]:rounded-none [&>[data-slot=kbd]]:px-0 [&>[data-slot=kbd]:first-child]:rounded-l-sm [&>[data-slot=kbd]:first-child]:pl-1 [&>[data-slot=kbd]:last-child]:rounded-r-sm [&>[data-slot=kbd]:last-child]:pr-1',
+        className
+      )}
       {...props}
     />
   );

src/renderer/lib/ui/shortcut-hint.tsx

@@ -1,30 +1,49 @@
-import { formatForDisplay } from '@tanstack/react-hotkeys';
+import {
+  detectPlatform,
+  KEY_DISPLAY_SYMBOLS,
+  MAC_MODIFIER_SYMBOLS,
+  parseHotkey,
+  STANDARD_MODIFIER_LABELS,
+} from '@tanstack/react-hotkeys';
 import React from 'react';
 import { useAppSettingsKey } from '@renderer/features/settings/use-app-settings-key';
 import {
   getEffectiveHotkey,
   type ShortcutSettingsKey,
 } from '@renderer/lib/hooks/useKeyboardShortcuts';
+import { cn } from '@renderer/utils/utils';
 import { Kbd, KbdGroup } from './kbd';
 
 interface ShortcutHintProps {
   settingsKey: ShortcutSettingsKey;
   className?: string;
 }
 
+const PLATFORM = detectPlatform();
+const IS_MAC = PLATFORM === 'mac';
+
 export const ShortcutHint: React.FC<ShortcutHintProps> = ({ settingsKey, className }) => {
   const { value: keyboard } = useAppSettingsKey('keyboard');
   const hotkey = getEffectiveHotkey(settingsKey, keyboard);
-  const display = hotkey ? formatForDisplay(hotkey) : '';
 
-  if (!display) return null;
+  if (!hotkey) return null;
+
+  const parsed = parseHotkey(hotkey, PLATFORM);
 
   return (
-    <span className={`flex items-center gap-1 text-xs text-muted-foreground ${className ?? ''}`}>
+    <span className={cn('flex items-center gap-1 text-xs text-muted-foreground', className)}>
       <KbdGroup>
-        {display.split('+').map((key, _) => (
-          <Kbd key={key}>{key.trim()}</Kbd>
-        ))}
+        {parsed.modifiers.map((modifier) => {
+          const glyph = IS_MAC
+            ? (MAC_MODIFIER_SYMBOLS[modifier] ?? modifier)
+            : (STANDARD_MODIFIER_LABELS[modifier] ?? modifier);
+          return (
+            <Kbd key={modifier}>
+              {IS_MAC ? <span className="translate-y-px">{glyph}</span> : glyph}
+            </Kbd>
+          );
+        })}
+        <Kbd>{KEY_DISPLAY_SYMBOLS[parsed.key] ?? parsed.key}</Kbd>
       </KbdGroup>
     </span>
   );