From 0f8b9181b4d0f0fe2232459bd1b55c8eace569df Mon Sep 17 00:00:00 2001
From: zack34567 <varun.ch@gmail.com>
Date: Mon, 25 May 2026 01:58:23 +0530
Subject: [PATCH] fix: wire keyboard shortcuts panel toggle

---
 src/components/VideoEditor.tsx          | 26 ++++++++----
 src/hooks/useKeyboardShortcuts.test.tsx | 56 +++++++++++++++++++++++++
 src/hooks/useKeyboardShortcuts.ts       | 12 +++---
 3 files changed, 82 insertions(+), 12 deletions(-)
 create mode 100644 src/hooks/useKeyboardShortcuts.test.tsx

diff --git a/src/components/VideoEditor.tsx b/src/components/VideoEditor.tsx
index 1e4e9f0d..61ef846b 100644
--- a/src/components/VideoEditor.tsx
+++ b/src/components/VideoEditor.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useRef, useEffect, useMemo } from "react";
+import { useState, useRef, useEffect, useMemo, useCallback } from "react";
 import { useVideoEditor } from "@/hooks/useVideoEditor";
 import { TextOverlay } from "@/lib/types";
 import FileUpload from "./FileUpload";
@@ -118,9 +118,13 @@ function Kbd({ children }: { children: React.ReactNode }) {
 }
 
 /** Collapsible panel that lists all keyboard shortcuts. */
-function KeyboardShortcutsPanel() {
-  const [open, setOpen] = useState(false);
-
+function KeyboardShortcutsPanel({
+  open,
+  onToggle,
+}: {
+  open: boolean;
+  onToggle: () => void;
+}) {
   const shortcuts: { keys: React.ReactNode[]; label: string }[] = [
   {
     keys: [
@@ -160,7 +164,7 @@ function KeyboardShortcutsPanel() {
         type="button"
         aria-expanded={open}
         aria-controls="keyboard-shortcuts-list"
-        onClick={() => setOpen((v) => !v)}
+        onClick={onToggle}
         className="w-full flex items-center justify-between px-4 py-3 text-left hover:bg-[var(--border)] transition-colors duration-150"
       >
         <span className="text-[10px] font-heading font-bold uppercase tracking-widest text-[var(--muted)] flex items-center gap-2">
@@ -212,6 +216,11 @@ export default function VideoEditor() {
     toggleSound,
   } = useVideoEditor();
 
+  const [shortcutsOpen, setShortcutsOpen] = useState(false);
+  const toggleShortcutsPanel = useCallback(() => {
+    setShortcutsOpen((open) => !open);
+  }, []);
+
   useKeyboardShortcuts({
     file,
     recipe,
@@ -220,7 +229,7 @@ export default function VideoEditor() {
     handleExport,
     status,
     cancelExport,
-    onToggleShortcutsModal: () => {},
+    onToggleShortcutsModal: toggleShortcutsPanel,
   });
 
   const [copied, setCopied] = useState(false);
@@ -681,7 +690,10 @@ export default function VideoEditor() {
               </div>
             </div>
 
-            <KeyboardShortcutsPanel />
+            <KeyboardShortcutsPanel
+              open={shortcutsOpen}
+              onToggle={toggleShortcutsPanel}
+            />
 
             {file && (
               <p className="rounded-xl border border-[var(--border)] bg-[var(--surface)] px-3 py-2 text-xs text-[var(--muted)] leading-relaxed">
diff --git a/src/hooks/useKeyboardShortcuts.test.tsx b/src/hooks/useKeyboardShortcuts.test.tsx
new file mode 100644
index 00000000..10ee7bf9
--- /dev/null
+++ b/src/hooks/useKeyboardShortcuts.test.tsx
@@ -0,0 +1,56 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+
+import { DEFAULT_RECIPE } from "../lib/constants";
+import { useKeyboardShortcuts } from "./useKeyboardShortcuts";
+
+function KeyboardShortcutHarness({
+  file = null,
+  onToggleShortcutsModal,
+}: {
+  file?: File | null;
+  onToggleShortcutsModal: () => void;
+}) {
+  useKeyboardShortcuts({
+    file,
+    recipe: DEFAULT_RECIPE,
+    resetSettings: vi.fn(),
+    updateRecipe: vi.fn(),
+    handleExport: vi.fn(),
+    status: "idle",
+    cancelExport: vi.fn(),
+    onToggleShortcutsModal,
+  });
+
+  return <input aria-label="Shortcut input" />;
+}
+
+describe("useKeyboardShortcuts", () => {
+  it("toggles the shortcuts panel when ? is pressed before a file is loaded", () => {
+    const onToggleShortcutsModal = vi.fn();
+
+    render(
+      <KeyboardShortcutHarness
+        onToggleShortcutsModal={onToggleShortcutsModal}
+      />
+    );
+
+    fireEvent.keyDown(window, { key: "?" });
+
+    expect(onToggleShortcutsModal).toHaveBeenCalledTimes(1);
+  });
+
+  it("does not toggle shortcuts while typing in an input", () => {
+    const onToggleShortcutsModal = vi.fn();
+
+    render(
+      <KeyboardShortcutHarness
+        onToggleShortcutsModal={onToggleShortcutsModal}
+      />
+    );
+
+    fireEvent.keyDown(screen.getByLabelText("Shortcut input"), { key: "?" });
+
+    expect(onToggleShortcutsModal).not.toHaveBeenCalled();
+  });
+});
diff --git a/src/hooks/useKeyboardShortcuts.ts b/src/hooks/useKeyboardShortcuts.ts
index a21a24b4..0cb24fee 100644
--- a/src/hooks/useKeyboardShortcuts.ts
+++ b/src/hooks/useKeyboardShortcuts.ts
@@ -1,6 +1,6 @@
 import { useEffect } from "react";
 import { EditRecipe, ExportStatus } from "@/lib/types";
-import { PRESETS } from "@/lib/presets";
+import { PRESETS } from "../lib/presets";
 
 interface UseKeyboardShortcutsProps {
   file: File | null;
@@ -42,6 +42,12 @@ export function useKeyboardShortcuts({
         return;
       }
 
+      if (e.key === "?") {
+        e.preventDefault();
+        onToggleShortcutsModal();
+        return;
+      }
+
       if (!file) return;
 
       switch (e.key) {
@@ -59,10 +65,6 @@ export function useKeyboardShortcuts({
           if (status === "exporting") cancelExport();
           break;
 
-        case "?":
-          onToggleShortcutsModal();
-          break;
-
         default:
           if (e.key >= "1" && e.key <= "9") {
             const index = parseInt(e.key) - 1;