fix: Wire ? shortcut to keyboard shortcuts panel (#1118)

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">

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();
+  });
+});

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;