cleanup (this doesn't work)

1 files changed, 15 insertions, 122 deletions

diff --git a/apps/web/src/components/keyboard-shortcuts-help.tsx b/apps/web/src/components/keyboard-shortcuts-help.tsx
index 129cb438..9f0d1e57 100644
--- a/apps/web/src/components/keyboard-shortcuts-help.tsx
+++ b/apps/web/src/components/keyboard-shortcuts-help.tsx
@@ -11,120 +11,8 @@ import {
   DialogTrigger,
 } from "./ui/dialog";
 import { Badge } from "./ui/badge";
-import { Keyboard, Play, Pause, SkipBack, SkipForward } from "lucide-react";
-
-interface Shortcut {
-  keys: string[];
-  description: string;
-  category: string;
-  icon?: React.ReactNode;
-}
-
-const shortcuts: Shortcut[] = [
-  // Playback Controls
-  {
-    keys: ["Space"],
-    description: "Play/Pause",
-    category: "Playback",
-    icon: <Play className="w-3 h-3" />
-  },
-  {
-    keys: ["J"],
-    description: "Rewind 1 second",
-    category: "Playback",
-    icon: <SkipBack className="w-3 h-3" />
-  },
-  {
-    keys: ["K"],
-    description: "Play/Pause (alternative)",
-    category: "Playback",
-    icon: <Pause className="w-3 h-3" />
-  },
-  {
-    keys: ["L"],
-    description: "Fast forward 1 second",
-    category: "Playback",
-    icon: <SkipForward className="w-3 h-3" />
-  },
-  
-  // Navigation
-  {
-    keys: ["←"],
-    description: "Frame step backward",
-    category: "Navigation"
-  },
-  {
-    keys: ["→"],
-    description: "Frame step forward",
-    category: "Navigation"
-  },
-  {
-    keys: ["Shift", "←"],
-    description: "Jump back 5 seconds",
-    category: "Navigation"
-  },
-  {
-    keys: ["Shift", "→"],
-    description: "Jump forward 5 seconds",
-    category: "Navigation"
-  },
-  {
-    keys: ["Home"],
-    description: "Go to timeline start",
-    category: "Navigation"
-  },
-  {
-    keys: ["End"],
-    description: "Go to timeline end",
-    category: "Navigation"
-  },
-
-  // Editing
-  {
-    keys: ["S"],
-    description: "Split element at playhead",
-    category: "Editing"
-  },
-  {
-    keys: ["Delete", "Backspace"],
-    description: "Delete selected elements",
-    category: "Editing"
-  },
-  {
-    keys: ["N"],
-    description: "Toggle snapping",
-    category: "Editing"
-  },
-
-  // Selection & Organization
-  {
-    keys: ["Cmd", "A"],
-    description: "Select all elements",
-    category: "Selection"
-  },
-  {
-    keys: ["Cmd", "D"],
-    description: "Duplicate selected element",
-    category: "Selection"
-  },
-
-  // History
-  {
-    keys: ["Cmd", "Z"],
-    description: "Undo",
-    category: "History"
-  },
-  {
-    keys: ["Cmd", "Shift", "Z"],
-    description: "Redo",
-    category: "History"
-  },
-  {
-    keys: ["Cmd", "Y"],
-    description: "Redo (alternative)",
-    category: "History"
-  }
-];
+import { Keyboard } from "lucide-react";
+import { useKeyboardShortcuts } from "@/hooks/use-keyboard-shortcuts";
 
 const KeyBadge = ({ keyName }: { keyName: string }) => {
   // Replace common key names with symbols
@@ -142,7 +30,7 @@ const KeyBadge = ({ keyName }: { keyName: string }) => {
   );
 };
 
-const ShortcutItem = ({ shortcut }: { shortcut: Shortcut }) => (
+const ShortcutItem = ({ shortcut }: { shortcut: any }) => (
   <div className="flex items-center justify-between py-2 px-3 rounded-lg hover:bg-muted/50">
     <div className="flex items-center gap-3">
       {shortcut.icon && (
@@ -151,7 +39,7 @@ const ShortcutItem = ({ shortcut }: { shortcut: Shortcut }) => (
       <span className="text-sm">{shortcut.description}</span>
     </div>
     <div className="flex items-center gap-1">
-      {shortcut.keys.map((key, index) => (
+      {shortcut.keys.map((key: string, index: number) => (
         <div key={index} className="flex items-center gap-1">
           <KeyBadge keyName={key} />
           {index < shortcut.keys.length - 1 && (
@@ -166,7 +54,10 @@ const ShortcutItem = ({ shortcut }: { shortcut: Shortcut }) => (
 export const KeyboardShortcutsHelp = () => {
   const [open, setOpen] = useState(false);
 
-  const categories = Array.from(new Set(shortcuts.map(s => s.category)));
+  // Get shortcuts from centralized hook (disabled so it doesn't add event listeners)
+  const { shortcuts } = useKeyboardShortcuts({ enabled: false });
+
+  const categories = Array.from(new Set(shortcuts.map((s) => s.category)));
 
   return (
     <Dialog open={open} onOpenChange={setOpen}>
@@ -187,16 +78,16 @@ export const KeyboardShortcutsHelp = () => {
             Most shortcuts work when the timeline is focused.
           </DialogDescription>
         </DialogHeader>
-        
+
         <div className="space-y-6">
-          {categories.map(category => (
+          {categories.map((category) => (
             <div key={category}>
               <h3 className="font-semibold text-sm text-muted-foreground uppercase tracking-wide mb-3">
                 {category}
               </h3>
               <div className="space-y-1">
                 {shortcuts
-                  .filter(shortcut => shortcut.category === category)
+                  .filter((shortcut) => shortcut.category === category)
                   .map((shortcut, index) => (
                     <ShortcutItem key={index} shortcut={shortcut} />
                   ))}
@@ -208,7 +99,9 @@ export const KeyboardShortcutsHelp = () => {
         <div className="mt-6 p-4 bg-muted/30 rounded-lg">
           <h4 className="font-medium text-sm mb-2">Tips:</h4>
           <ul className="text-sm text-muted-foreground space-y-1">
-            <li>• Shortcuts work when the editor is focused (not typing in inputs)</li>
+            <li>
+              • Shortcuts work when the editor is focused (not typing in inputs)
+            </li>
             <li>• J/K/L are industry-standard video editing shortcuts</li>
             <li>• Use arrow keys for frame-perfect positioning</li>
             <li>• Hold Shift with arrow keys for larger jumps</li>
@@ -217,4 +110,4 @@ export const KeyboardShortcutsHelp = () => {
       </DialogContent>
     </Dialog>
   );
-}; 
\ No newline at end of file
+};