fix keyboard shortcuts

apps/web/src/components/keyboard-shortcuts-help.tsx

@@ -21,7 +21,7 @@ const KeyBadge = ({ keyName }: { keyName: string }) => {
     .replace("Shift", "⇧")
     .replace("←", "◀")
     .replace("→", "▶")
-    .replace("Space", "⎵");
+    .replace("Space", "Space");
 
   return (
     <Badge variant="secondary" className="font-mono text-xs px-2 py-1">
@@ -31,7 +31,7 @@ const KeyBadge = ({ keyName }: { keyName: string }) => {
 };
 
 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 justify-between">
     <div className="flex items-center gap-3">
       {shortcut.icon && (
         <div className="text-muted-foreground">{shortcut.icon}</div>
@@ -67,7 +67,7 @@ export const KeyboardShortcutsHelp = () => {
           Shortcuts
         </Button>
       </DialogTrigger>
-      <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
+      <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-hidden flex">
         <DialogHeader>
           <DialogTitle className="flex items-center gap-2">
             <Keyboard className="w-5 h-5" />
@@ -81,11 +81,11 @@ export const KeyboardShortcutsHelp = () => {
 
         <div className="space-y-6">
           {categories.map((category) => (
-            <div key={category}>
-              <h3 className="font-semibold text-sm text-muted-foreground uppercase tracking-wide mb-3">
+            <div key={category} className="flex flex-col gap-1">
+              <h3 className="text-xs text-muted-foreground uppercase tracking-wide font-medium">
                 {category}
               </h3>
-              <div className="space-y-1">
+              <div className="space-y-0.5">
                 {shortcuts
                   .filter((shortcut) => shortcut.category === category)
                   .map((shortcut, index) => (
@@ -95,18 +95,6 @@ export const KeyboardShortcutsHelp = () => {
             </div>
           ))}
         </div>
-
-        <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>• 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>
-          </ul>
-        </div>
       </DialogContent>
     </Dialog>
   );

apps/web/src/components/ui/dialog.tsx

@@ -22,7 +22,7 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "fixed inset-0 z-[100] bg-black/20 backdrop-blur-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className
     )}
     {...props}
@@ -39,9 +39,17 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-[calc(100%-2rem)] max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        "fixed left-[50%] top-[50%] z-[150] grid w-[calc(100%-2rem)] max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-popover shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
         className
       )}
+      onCloseAutoFocus={(e) => {
+        e.stopPropagation();
+        e.preventDefault();
+      }}
+      onOpenAutoFocus={(e) => {
+        e.stopPropagation();
+        e.preventDefault();
+      }}
       {...props}
     >
       <ScrollArea className="max-h-[85vh]">

apps/web/src/hooks/use-keyboard-shortcuts.ts

@@ -15,6 +15,7 @@ export interface KeyboardShortcut {
   enabled?: boolean;
   requiresSelection?: boolean;
   icon?: React.ReactNode;
+  displayKeys?: string[]; // Keys to show in help (defaults to keys if not provided)
 }
 
 interface UseKeyboardShortcutsOptions {
@@ -66,7 +67,6 @@ export const useKeyboardShortcuts = (
       category: "Playback",
       action: () => {
         toggle();
-        toast.info(isPlaying ? "Paused" : "Playing", { duration: 1000 });
       },
     },
     {
@@ -76,7 +76,6 @@ export const useKeyboardShortcuts = (
       category: "Playback",
       action: () => {
         seek(Math.max(0, currentTime - 1));
-        toast.info("Rewind 1s", { duration: 1000 });
       },
     },
     {
@@ -86,7 +85,6 @@ export const useKeyboardShortcuts = (
       category: "Playback",
       action: () => {
         toggle();
-        toast.info(isPlaying ? "Paused" : "Playing", { duration: 1000 });
       },
     },
     {
@@ -96,7 +94,6 @@ export const useKeyboardShortcuts = (
       category: "Playback",
       action: () => {
         seek(Math.min(duration, currentTime + 1));
-        toast.info("Forward 1s", { duration: 1000 });
       },
     },
 
@@ -146,7 +143,6 @@ export const useKeyboardShortcuts = (
       category: "Navigation",
       action: () => {
         seek(0);
-        toast.info("Start of timeline", { duration: 1000 });
       },
     },
     {
@@ -156,7 +152,6 @@ export const useKeyboardShortcuts = (
       category: "Navigation",
       action: () => {
         seek(duration);
-        toast.info("End of timeline", { duration: 1000 });
       },
     },
 
@@ -185,7 +180,6 @@ export const useKeyboardShortcuts = (
 
           if (currentTime > effectiveStart && currentTime < effectiveEnd) {
             splitElement(trackId, elementId, currentTime);
-            toast.success("Element split at playhead");
           } else {
             toast.error("Playhead must be within selected element");
           }
@@ -218,9 +212,6 @@ export const useKeyboardShortcuts = (
       category: "Editing",
       action: () => {
         toggleSnapping();
-        toast.info(`Snapping ${snappingEnabled ? "disabled" : "enabled"}`, {
-          duration: 1000,
-        });
       },
     },
 
@@ -238,9 +229,6 @@ export const useKeyboardShortcuts = (
           }))
         );
         setSelectedElements(allElements);
-        toast.info(`Selected ${allElements.length} elements`, {
-          duration: 1000,
-        });
       },
     },
     {
@@ -270,8 +258,6 @@ export const useKeyboardShortcuts = (
             ...elementWithoutId,
             startTime: newStartTime,
           });
-
-          toast.success("Element duplicated");
         }
       },
     },