feat: support "None" option for keyboard shortcuts

apps/desktop/src/components/shortcut-input.tsx

@@ -1,10 +1,12 @@
 import React, { useState, useEffect } from "react";
-import { Button } from "@/components/ui/button";
-import { Pencil, X } from "lucide-react";
+import { Button, buttonVariants } from "@/components/ui/button";
+import { Undo2, X } from "lucide-react";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { api } from "@/trpc/react";
 import { toast } from "sonner";
 import { getKeyFromKeycode } from "@/utils/keycode-map";
+import { cn } from "@/lib/utils";
+import { usePreviousShortcut } from "@/hooks/usePreviousShortcut";
 
 interface ShortcutInputProps {
   value?: number[];
@@ -109,17 +111,24 @@ function RecordingDisplay({
 function ShortcutDisplay({
   value,
   onEdit,
+  onClear,
 }: {
   value?: number[];
   onEdit: () => void;
+  onClear: () => void;
 }) {
   // Format array as display string (e.g., ["Fn", "Space"] -> "Fn+Space")
   const displayValue = value?.length
     ? value.map((key) => keycodeToDisplay(key)).join("+")
     : undefined;
 
   return (
-    <>
+    <div
+      className={cn(
+        buttonVariants({ variant: "outline", size: "sm" }),
+        "gap-2",
+      )}
+    >
       {displayValue && (
         <kbd
           onClick={onEdit}
@@ -132,11 +141,44 @@ function ShortcutDisplay({
         variant="ghost"
         size="sm"
         className="h-6 w-6 p-0"
-        onClick={onEdit}
+        onClick={onClear}
       >
-        <Pencil className="h-3 w-3" />
+        <X className="h-3 w-3" />
       </Button>
-    </>
+    </div>
+  );
+}
+
+function NoneDisplay({
+  previousKeys,
+  onEdit,
+  onRestore,
+}: {
+  previousKeys?: number[];
+  onEdit: () => void;
+  onRestore: () => void;
+}) {
+  return (
+    <div
+      className={cn(
+        buttonVariants({ variant: "outline", size: "sm" }),
+        "gap-2",
+      )}
+    >
+      <Button variant="ghost" size="sm" onClick={onEdit}>
+        Set shortcut...
+      </Button>
+      {previousKeys && previousKeys.length > 0 && (
+        <Button
+          variant="ghost"
+          size="sm"
+          className="h-6 w-6 p-0"
+          onClick={onRestore}
+        >
+          <Undo2 className="h-3 w-3" />
+        </Button>
+      )}
+    </div>
   );
 }
 
@@ -147,9 +189,12 @@ export function ShortcutInput({
   onRecordingShortcutChange,
 }: ShortcutInputProps) {
   const [activeKeys, setActiveKeys] = useState<number[]>([]);
+  const { previousKeys, savePrevious, clearPrevious } = usePreviousShortcut();
   const setRecordingStateMutation =
     api.settings.setShortcutRecordingState.useMutation();
 
+  const hasShortcut = value && value.length > 0;
+
   const handleStartRecording = () => {
     onRecordingShortcutChange(true);
     setRecordingStateMutation.mutate(true);
@@ -161,6 +206,20 @@ export function ShortcutInput({
     setRecordingStateMutation.mutate(false);
   };
 
+  const handleClearRecording = () => {
+    if (value && value.length > 0) {
+      savePrevious(value);
+    }
+    onChange([]);
+  };
+
+  const handleRestorePrevious = () => {
+    if (previousKeys.length > 0) {
+      onChange(previousKeys);
+      clearPrevious();
+    }
+  };
+
   // Subscribe to key events when recording
   // Note: activeKeys closure is fresh on each render because useSubscription
   // updates its callback reference, so previousKeys correctly captures the
@@ -176,8 +235,8 @@ export function ShortcutInput({
         const result = validateShortcutFormat(previousKeys);
 
         if (result.valid && result.shortcut) {
-          // Basic format is valid - let parent handle backend validation
           onChange(result.shortcut);
+          clearPrevious();
         } else {
           toast.error(result.error || "Invalid key combination");
         }
@@ -198,6 +257,10 @@ export function ShortcutInput({
     }
   }, [isRecordingShortcut]);
 
+  if (value === undefined) {
+    return null;
+  }
+
   return (
     <TooltipProvider>
       <div className="inline-flex items-center gap-2">
@@ -206,8 +269,18 @@ export function ShortcutInput({
             activeKeys={activeKeys}
             onCancel={handleCancelRecording}
           />
+        ) : hasShortcut ? (
+          <ShortcutDisplay
+            value={value}
+            onEdit={handleStartRecording}
+            onClear={handleClearRecording}
+          />
         ) : (
-          <ShortcutDisplay value={value} onEdit={handleStartRecording} />
+          <NoneDisplay
+            previousKeys={previousKeys}
+            onEdit={handleStartRecording}
+            onRestore={handleRestorePrevious}
+          />
         )}
       </div>
     </TooltipProvider>

apps/desktop/src/hooks/useLocalStorage.ts

@@ -0,0 +1,21 @@
+import { useState, useEffect } from "react";
+
+export function useLocalStorage<T>(
+  key: string,
+  initialValue: T,
+): [T, React.Dispatch<React.SetStateAction<T>>] {
+  const [storedValue, setStoredValue] = useState<T>(() => {
+    const item = localStorage.getItem(key);
+    return item ? JSON.parse(item) : initialValue;
+  });
+
+  useEffect(() => {
+    if (JSON.stringify(storedValue) === JSON.stringify(initialValue)) {
+      localStorage.removeItem(key);
+    } else {
+      localStorage.setItem(key, JSON.stringify(storedValue));
+    }
+  }, [key, storedValue, initialValue]);
+
+  return [storedValue, setStoredValue];
+}

apps/desktop/src/hooks/usePreviousShortcut.ts

@@ -0,0 +1,38 @@
+import { useCallback } from "react";
+import { useLocalStorage } from "./useLocalStorage";
+
+const STORAGE_KEY = "previous-shortcut";
+
+export function usePreviousShortcut() {
+  const [previousKeys, setPreviousKeys] = useLocalStorage<number[]>(
+    STORAGE_KEY,
+    [],
+  );
+
+  const savePrevious = useCallback(
+    (keys: number[]) => {
+      if (keys.length > 0) {
+        setPreviousKeys(keys);
+      }
+    },
+    [setPreviousKeys],
+  );
+
+  const restorePrevious = useCallback(() => {
+    const keys = previousKeys;
+    setPreviousKeys([]);
+    return keys;
+  }, [previousKeys, setPreviousKeys]);
+
+  const clearPrevious = useCallback(() => {
+    setPreviousKeys([]);
+  }, [setPreviousKeys]);
+
+  return {
+    previousKeys,
+    savePrevious,
+    restorePrevious,
+    clearPrevious,
+    hasPrevious: previousKeys.length > 0,
+  };
+}

apps/desktop/src/renderer/main/pages/settings/shortcuts/index.tsx

@@ -7,12 +7,14 @@ import { api } from "@/trpc/react";
 import { toast } from "sonner";
 
 export function ShortcutsSettingsPage() {
-  const [pushToTalkShortcut, setPushToTalkShortcut] = useState<number[]>([]);
+  const [pushToTalkShortcut, setPushToTalkShortcut] = useState<
+    number[] | undefined
+  >();
   const [toggleRecordingShortcut, setToggleRecordingShortcut] = useState<
-    number[]
-  >([]);
+    number[] | undefined
+  >();
   const [pasteLastTranscriptShortcut, setPasteLastTranscriptShortcut] =
-    useState<number[]>([]);
+    useState<number[] | undefined>();
   const [recordingShortcut, setRecordingShortcut] = useState<
     "pushToTalk" | "toggleRecording" | "pasteLastTranscript" | null
   >(null);

apps/desktop/src/utils/shortcut-validation.ts

@@ -220,6 +220,11 @@ export function validateShortcutComprehensive(
   const { candidateShortcut, candidateType, shortcutsByType, platform } =
     context;
 
+  // Allow empty shortcut (user intentionally disabling)
+  if (candidateShortcut.length === 0) {
+    return { valid: true };
+  }
+
   const otherShortcuts = Object.entries(shortcutsByType)
     .filter(([shortcutType]) => shortcutType !== candidateType)
     .map(([, shortcutKeys]) => shortcutKeys);