diff --git a/web/app/layout.tsx b/web/app/layout.tsx index ddcb409a..09608b34 100644 --- a/web/app/layout.tsx +++ b/web/app/layout.tsx @@ -8,6 +8,7 @@ import { ClerkProviderClient } from "@/components/custom/clerk/clerk-provider-cl import { JotaiProvider } from "@/lib/providers/jotai-provider" import { Toaster } from "@/components/ui/sonner" import { ConfirmProvider } from "@/lib/providers/confirm-provider" +import { KeybindProvider } from "@/lib/providers/keybind-provider" const fontSans = FontSans({ subsets: ["latin"], @@ -28,14 +29,16 @@ export default function RootLayout({ - - - - {children} - - - - + + + + + {children} + + + + + diff --git a/web/components/routes/SettingsRoute.tsx b/web/components/routes/SettingsRoute.tsx index 26a3f9e2..2d7e974c 100644 --- a/web/components/routes/SettingsRoute.tsx +++ b/web/components/routes/SettingsRoute.tsx @@ -1,9 +1,12 @@ "use client" import { useAccount } from "@/lib/providers/jazz-provider" -import { useState, useCallback, useEffect } from "react" +import { useState, useCallback, useEffect, useRef } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { toast } from "sonner" +import { Icon } from "../la-editor/components/ui/icon" +import { motion } from "framer-motion" +import { useKeybind } from "@/lib/providers/keybind-provider" // Import the hook const MODIFIER_KEYS = ["Control", "Alt", "Shift", "Meta"] @@ -18,6 +21,13 @@ const HotkeyInput = ({ }) => { const [recording, setRecording] = useState(false) const [currentKeys, setCurrentKeys] = useState([]) + const [isHovering, setIsHovering] = useState(false) + const recordingTimeoutRef = useRef(null) + + const stopRecording = useCallback(() => { + setRecording(false) + setCurrentKeys([]) + }, []) const handleKeyDown = useCallback( (e: React.KeyboardEvent) => { @@ -30,6 +40,10 @@ const HotkeyInput = ({ return newKeys.slice(-3) }) } + // Clear the timeout on each keydown + if (recordingTimeoutRef.current) { + clearTimeout(recordingTimeoutRef.current) + } }, [recording, currentKeys] ) @@ -41,13 +55,18 @@ const HotkeyInput = ({ if (MODIFIER_KEYS.includes(key)) return if (currentKeys.length > 0) { onChange(currentKeys.join("+")) - setRecording(false) - setCurrentKeys([]) + // Set a timeout to stop recording if no key is pressed + recordingTimeoutRef.current = setTimeout(stopRecording, 500) } }, - [recording, currentKeys, onChange] + [recording, currentKeys, onChange, stopRecording] ) + const handleClearKeybind = () => { + onChange("") + setCurrentKeys([]) + } + useEffect(() => { if (recording) { const handleKeyDownEvent = (e: KeyboardEvent) => handleKeyDown(e as unknown as React.KeyboardEvent) @@ -57,6 +76,9 @@ const HotkeyInput = ({ return () => { window.removeEventListener("keydown", handleKeyDownEvent) window.removeEventListener("keyup", handleKeyUpEvent) + if (recordingTimeoutRef.current) { + clearTimeout(recordingTimeoutRef.current) + } } } }, [recording, handleKeyDown, handleKeyUp]) @@ -65,19 +87,37 @@ const HotkeyInput = ({
- setRecording(true)} - /> +
setIsHovering(true)} + onMouseLeave={() => setIsHovering(false)} + > + setRecording(true)} + onBlur={stopRecording} + /> + {isHovering && value && ( + + + + )} +