fix: hotkey display platform-specific symbols

- Fix formatHotkey to accept platform parameter instead of using React hook
- Update HotkeyInput to properly pass platform context to all key display functions
- Ensure Mac shows ⌘⌥⇧ symbols while other platforms show Ctrl/Alt/Shift
- Fix space key to display as 'Space' word instead of empty
- Update all formatHotkey callers to pass platform parameter correctly

Author: moinulmoin

src/components/HotkeyInput.tsx

@@ -2,6 +2,7 @@ import { Check, Edit2, X } from "lucide-react";
 import React, { useCallback, useEffect, useState } from "react";
 import { Button } from "./ui/button";
 import { formatHotkey } from "@/lib/hotkey-utils";
+import { usePlatform } from "@/contexts/PlatformContext";
 import { 
   normalizeShortcutKeys, 
   validateKeyCombinationWithRules,
@@ -24,6 +25,7 @@ export const HotkeyInput = React.memo(function HotkeyInput({
   placeholder,
   validationRules = ValidationPresets.standard()
 }: HotkeyInputProps) {
+  const { isMac } = usePlatform();
   const [mode, setMode] = useState<"display" | "edit">("display");
   const [keys, setKeys] = useState<Set<string>>(new Set());
   const [pendingHotkey, setPendingHotkey] = useState("");
@@ -105,10 +107,10 @@ export const HotkeyInput = React.memo(function HotkeyInput({
         // Update current keys display
         const displayKeys = [];
         if (modifiers.includes("CommandOrControl"))
-          displayKeys.push(formatKeyForDisplay("CommandOrControl"));
-        if (modifiers.includes("Alt")) displayKeys.push(formatKeyForDisplay("Alt"));
-        if (modifiers.includes("Shift")) displayKeys.push(formatKeyForDisplay("Shift"));
-        displayKeys.push(...regularKeys.map(k => formatKeyForDisplay(k)));
+          displayKeys.push(formatKeyForDisplay("CommandOrControl", isMac));
+        if (modifiers.includes("Alt")) displayKeys.push(formatKeyForDisplay("Alt", isMac));
+        if (modifiers.includes("Shift")) displayKeys.push(formatKeyForDisplay("Shift", isMac));
+        displayKeys.push(...regularKeys.map(k => formatKeyForDisplay(k, isMac)));
         setCurrentKeysDisplay(displayKeys.join(" + "));
 
         // Validate with rules
@@ -225,7 +227,7 @@ export const HotkeyInput = React.memo(function HotkeyInput({
         <div className="flex items-center gap-2">
           <div className="flex-1 flex items-center">
             {value ? (
-              formatHotkey(value)
+              formatHotkey(value, isMac)
             ) : (
               <span className="text-muted-foreground">{placeholder || "No hotkey set"}</span>
             )}
@@ -249,7 +251,7 @@ export const HotkeyInput = React.memo(function HotkeyInput({
       <div className="flex items-center gap-2">
         <div className="flex-1 flex items-center">
           {pendingHotkey ? (
-            formatHotkey(pendingHotkey)
+            formatHotkey(pendingHotkey, isMac)
           ) : currentKeysDisplay ? (
             <span className="text-foreground">{currentKeysDisplay}</span>
           ) : (

src/components/onboarding/OnboardingDesktop.tsx

@@ -537,7 +537,7 @@ export const OnboardingDesktop = function OnboardingDesktop({
                 <div className="space-y-2">
                   <h1 className="text-3xl font-bold">You're all set!</h1>
                   <p className="text-muted-foreground">
-                    Press {formatHotkey(hotkey)} to start recording
+                    Press {formatHotkey(hotkey, isMacOS)} to start recording
                   </p>
                 </div>
 

src/components/sections/RecentRecordings.tsx

@@ -2,6 +2,7 @@ import { ScrollArea } from "@/components/ui/scroll-area";
 import { formatHotkey } from "@/lib/hotkey-utils";
 import { TranscriptionHistory } from "@/types";
 import { useCanRecord, useCanAutoInsert } from "@/contexts/ReadinessContext";
+import { isMacOS } from "@/lib/platform";
 import { invoke } from "@tauri-apps/api/core";
 import { ask } from "@tauri-apps/plugin-dialog";
 import { AlertCircle, Mic, Trash2 } from "lucide-react";
@@ -129,7 +130,7 @@ export function RecentRecordings({ history, hotkey = "Cmd+Shift+Space", onHistor
                 <p className="text-sm text-muted-foreground">No recordings yet</p>
                 {canAutoInsert ? (
                   <p className="text-xs text-muted-foreground/70 mt-2">
-                    Press {formatHotkey(hotkey)} to start recording
+                    Press {formatHotkey(hotkey, isMacOS)} to start recording
                   </p>
                 ) : (
                   <p className="text-xs text-amber-600 mt-2">

src/lib/hotkey-utils.tsx

@@ -1,12 +1,10 @@
 import { cn } from '@/lib/utils';
-import { usePlatform } from '@/contexts/PlatformContext';
 
 /**
  * Formats a hotkey string into styled keyboard keys
  * e.g., "cmd+shift+space" -> styled keyboard keys
  */
-export function formatHotkey(hotkey: string): React.ReactNode {
-  const { isMac } = usePlatform();
+export function formatHotkey(hotkey: string, isMac: boolean = false): React.ReactNode {
 
   if (!hotkey) return null;
 
@@ -28,25 +26,34 @@ export function formatHotkey(hotkey: string): React.ReactNode {
 
   // Map common key names to display names
   const keyDisplayMap: Record<string, string> = {
-    'cmd': isMac ? 'cmd' : 'ctrl',
-    'ctrl': 'ctrl',
-    'shift': 'shift',
-    'alt': 'alt',
-    'space': 'space',
-    'enter': 'enter',
-    'tab': 'tab',
-    'escape': 'esc',
-    'esc': 'esc',
-    'delete': 'del',
-    'backspace': '⌫',
+    'cmd': isMac ? '⌘' : 'Ctrl',
+    'ctrl': 'Ctrl',
+    'commandorcontrol': isMac ? '⌘' : 'Ctrl',
+    'command': isMac ? '⌘' : 'Ctrl',
+    'shift': isMac ? '⇧' : 'Shift',
+    'alt': isMac ? '⌥' : 'Alt',
+    'option': isMac ? '⌥' : 'Alt',
+    'meta': isMac ? '⌘' : 'Ctrl',
+    'space': 'Space',
+    'enter': isMac ? '⏎' : 'Enter',
+    'return': isMac ? '⏎' : 'Enter',
+    'tab': isMac ? '⇥' : 'Tab',
+    'escape': 'Esc',
+    'esc': 'Esc',
+    'delete': isMac ? '⌦' : 'Del',
+    'backspace': isMac ? '⌫' : 'Backspace',
     'up': '↑',
     'down': '↓',
     'left': '←',
     'right': '→',
-    'pageup': 'PgUp',
-    'pagedown': 'PgDn',
-    'home': 'Home',
-    'end': 'End',
+    'arrowup': '↑',
+    'arrowdown': '↓',
+    'arrowleft': '←',
+    'arrowright': '→',
+    'pageup': isMac ? '⇞' : 'PgUp',
+    'pagedown': isMac ? '⇟' : 'PgDn',
+    'home': isMac ? '⇱' : 'Home',
+    'end': isMac ? '⇲' : 'End',
     'f1': 'F1',
     'f2': 'F2',
     'f3': 'F3',