From 5483db83de2c8d3a051148dfc56d6ab52335ee73 Mon Sep 17 00:00:00 2001
From: Maze Winther <mazewinther@gmail.com>
Date: Wed, 16 Jul 2025 15:52:25 +0200
Subject: fix keyboard shortcuts

---
 apps/web/src/hooks/use-keyboard-shortcuts.ts | 16 +---------------
 1 file changed, 1 insertion(+), 15 deletions(-)

(limited to 'apps/web/src/hooks')

diff --git a/apps/web/src/hooks/use-keyboard-shortcuts.ts b/apps/web/src/hooks/use-keyboard-shortcuts.ts
index 86190c94..d8fc032e 100644
--- a/apps/web/src/hooks/use-keyboard-shortcuts.ts
+++ b/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");
         }
       },
     },
-- 
cgit v1.3.1


From 0c086e3c240e229b3dd89e6925b34f8c5fc20052 Mon Sep 17 00:00:00 2001
From: Maze Winther <mazewinther@gmail.com>
Date: Wed, 16 Jul 2025 16:05:30 +0200
Subject: more shortcut fixes

---
 .../web/src/components/keyboard-shortcuts-help.tsx | 76 +++++++++++++++-------
 apps/web/src/hooks/use-keyboard-shortcuts.ts       |  1 -
 2 files changed, 54 insertions(+), 23 deletions(-)

(limited to 'apps/web/src/hooks')

diff --git a/apps/web/src/components/keyboard-shortcuts-help.tsx b/apps/web/src/components/keyboard-shortcuts-help.tsx
index 95fb6031..936254be 100644
--- a/apps/web/src/components/keyboard-shortcuts-help.tsx
+++ b/apps/web/src/components/keyboard-shortcuts-help.tsx
@@ -15,41 +15,73 @@ import { Keyboard } from "lucide-react";
 import { useKeyboardShortcuts } from "@/hooks/use-keyboard-shortcuts";
 
 const KeyBadge = ({ keyName }: { keyName: string }) => {
-  // Replace common key names with symbols
+  // Replace common key names with symbols or friendly names
   const displayKey = keyName
     .replace("Cmd", "⌘")
-    .replace("Shift", "⇧")
+    .replace("Shift", "Shift")
+    .replace("ArrowLeft", "Arrow Left")
+    .replace("ArrowRight", "Arrow Right")
+    .replace("ArrowUp", "Arrow Up")
+    .replace("ArrowDown", "Arrow Down")
     .replace("←", "◀")
     .replace("→", "▶")
     .replace("Space", "Space");
 
   return (
-    <Badge variant="secondary" className="font-mono text-xs px-2 py-1">
+    <Badge variant="secondary" className="font-mono text-xs px-1 py-1">
       {displayKey}
     </Badge>
   );
 };
 
-const ShortcutItem = ({ shortcut }: { shortcut: any }) => (
-  <div className="flex items-center justify-between">
-    <div className="flex items-center gap-3">
-      {shortcut.icon && (
-        <div className="text-muted-foreground">{shortcut.icon}</div>
-      )}
-      <span className="text-sm">{shortcut.description}</span>
-    </div>
-    <div className="flex items-center gap-1">
-      {shortcut.keys.map((key: string, index: number) => (
-        <div key={index} className="flex items-center gap-1">
-          <KeyBadge keyName={key} />
-          {index < shortcut.keys.length - 1 && (
-            <span className="text-xs text-muted-foreground">+</span>
-          )}
-        </div>
-      ))}
+const ShortcutItem = ({ shortcut }: { shortcut: any }) => {
+  // Filter out lowercase duplicates for display - if both "j" and "J" exist, only show "J"
+  const displayKeys = shortcut.keys.filter((key: string) => {
+    const lowerKey = key.toLowerCase();
+    const upperKey = key.toUpperCase();
+
+    // If this is a lowercase letter and the uppercase version exists, skip it
+    if (
+      key === lowerKey &&
+      key !== upperKey &&
+      shortcut.keys.includes(upperKey)
+    ) {
+      return false;
+    }
+
+    return true;
+  });
+
+  return (
+    <div className="flex items-center justify-between">
+      <div className="flex items-center gap-3">
+        {shortcut.icon && (
+          <div className="text-muted-foreground">{shortcut.icon}</div>
+        )}
+        <span className="text-sm">{shortcut.description}</span>
+      </div>
+      <div className="flex items-center gap-1">
+        {displayKeys.map((key: string, index: number) => (
+          <div key={index} className="flex items-center gap-1">
+            <div className="flex items-center">
+              {key.split("+").map((keyPart: string, partIndex: number) => (
+                <div key={partIndex} className="flex items-center gap-1">
+                  <KeyBadge keyName={keyPart} />
+                  {partIndex < key.split("+").length - 1 && (
+                    <span className="text-xs text-muted-foreground">+</span>
+                  )}
+                </div>
+              ))}
+            </div>
+            {index < displayKeys.length - 1 && (
+              <span className="text-xs text-muted-foreground">or</span>
+            )}
+          </div>
+        ))}
+      </div>
     </div>
-  </div>
-);
+  );
+};
 
 export const KeyboardShortcutsHelp = () => {
   const [open, setOpen] = useState(false);
diff --git a/apps/web/src/hooks/use-keyboard-shortcuts.ts b/apps/web/src/hooks/use-keyboard-shortcuts.ts
index d8fc032e..84cb78f8 100644
--- a/apps/web/src/hooks/use-keyboard-shortcuts.ts
+++ b/apps/web/src/hooks/use-keyboard-shortcuts.ts
@@ -15,7 +15,6 @@ 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 {
-- 
cgit v1.3.1