diff --git a/apps/desktop/src/components/shortcut-input.tsx b/apps/desktop/src/components/shortcut-input.tsx
index 6fc9cb2..2f40520 100644
--- a/apps/desktop/src/components/shortcut-input.tsx
+++ b/apps/desktop/src/components/shortcut-input.tsx
@@ -6,8 +6,8 @@ import { api } from "@/trpc/react";
import { toast } from "sonner";
interface ShortcutInputProps {
- value?: string;
- onChange: (value: string) => void;
+ value?: string[];
+ onChange: (value: string[]) => void;
isRecordingShortcut?: boolean;
onRecordingShortcutChange: (recording: boolean) => void;
}
@@ -17,7 +17,7 @@ const MAX_KEY_COMBINATION_LENGTH = 4;
type ValidationResult = {
valid: boolean;
- shortcut?: string;
+ shortcut?: string[];
error?: string;
};
@@ -45,7 +45,8 @@ function validateShortcut(keys: string[]): ValidationResult {
};
}
- return { valid: true, shortcut: [...modifierKeys, ...regularKeys].join("+") };
+ // Return array format: modifiers first, then regular keys
+ return { valid: true, shortcut: [...modifierKeys, ...regularKeys] };
}
function RecordingDisplay({
@@ -90,17 +91,20 @@ function ShortcutDisplay({
value,
onEdit,
}: {
- value?: string;
+ value?: string[];
onEdit: () => void;
}) {
+ // Format array as display string (e.g., ["Fn", "Space"] -> "Fn+Space")
+ const displayValue = value?.length ? value.join("+") : undefined;
+
return (
<>
- {value && (
+ {displayValue && (
- {value}
+ {displayValue}
)}