Merge pull request #342 from anwarulislam/feat/kbd

chore: keyboard shortcuts and improve key display

3 files changed, 80 insertions, 55 deletions

diff --git a/apps/web/src/components/keyboard-shortcuts-help.tsx b/apps/web/src/components/keyboard-shortcuts-help.tsx
index 936254be..a48b3c21 100644
--- a/apps/web/src/components/keyboard-shortcuts-help.tsx
+++ b/apps/web/src/components/keyboard-shortcuts-help.tsx
@@ -1,5 +1,7 @@
 "use client";
 
+import { useKeyboardShortcuts } from "@/hooks/use-keyboard-shortcuts";
+import { Keyboard } from "lucide-react";
 import { useState } from "react";
 import { Button } from "./ui/button";
 import {
@@ -10,44 +12,33 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "./ui/dialog";
-import { Badge } from "./ui/badge";
-import { Keyboard } from "lucide-react";
-import { useKeyboardShortcuts } from "@/hooks/use-keyboard-shortcuts";
+import { getPlatformSpecialKey } from "@/lib/utils";
 
-const KeyBadge = ({ keyName }: { keyName: string }) => {
-  // Replace common key names with symbols or friendly names
-  const displayKey = keyName
-    .replace("Cmd", "⌘")
-    .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-1 py-1">
-      {displayKey}
-    </Badge>
-  );
+const modifier: {
+  [key: string]: string;
+} = {
+  Shift: "Shift",
+  Alt: "Alt",
+  ArrowLeft: "←",
+  ArrowRight: "→",
+  ArrowUp: "↑",
+  ArrowDown: "↓",
+  Space: "Space",
 };
 
+function getKeyWithModifier(key: string) {
+  if (key === "Ctrl") return getPlatformSpecialKey();
+  return modifier[key] || key;
+}
+
 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)
-    ) {
+      key.includes("Cmd") &&
+      shortcut.keys.includes(key.replace("Cmd", "Ctrl"))
+    )
       return false;
-    }
 
     return true;
   });
@@ -65,12 +56,9 @@ const ShortcutItem = ({ shortcut }: { shortcut: any }) => {
           <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>
+                <ShortcutKey key={partIndex}>
+                  {getKeyWithModifier(keyPart)}
+                </ShortcutKey>
               ))}
             </div>
             {index < displayKeys.length - 1 && (
@@ -131,3 +119,17 @@ export const KeyboardShortcutsHelp = () => {
     </Dialog>
   );
 };
+
+function ShortcutKey({ children }: { children: React.ReactNode }) {
+  return (
+    <kbd 
+      className="inline-flex font-sans text-xs rounded px-2 min-w-[1.5rem] min-h-[1.5rem] leading-none items-center justify-center shadow-sm border mr-1"
+      style={{
+        backgroundColor: "rgba(0, 0, 0, 0.2)",
+        borderColor: "rgba(255, 255, 255, 0.1)"
+      }}
+    >
+      {children}
+    </kbd>
+  );
+};
diff --git a/apps/web/src/hooks/use-keyboard-shortcuts.ts b/apps/web/src/hooks/use-keyboard-shortcuts.ts
index 84cb78f8..feb8f409 100644
--- a/apps/web/src/hooks/use-keyboard-shortcuts.ts
+++ b/apps/web/src/hooks/use-keyboard-shortcuts.ts
@@ -70,7 +70,7 @@ export const useKeyboardShortcuts = (
     },

     {

       id: "rewind",

-      keys: ["j", "J"],

+      keys: ["J"],

       description: "Rewind 1 second",

       category: "Playback",

       action: () => {

@@ -79,7 +79,7 @@ export const useKeyboardShortcuts = (
     },

     {

       id: "play-pause-alt",

-      keys: ["k", "K"],

+      keys: ["K"],

       description: "Play/Pause (alternative)",

       category: "Playback",

       action: () => {

@@ -88,7 +88,7 @@ export const useKeyboardShortcuts = (
     },

     {

       id: "fast-forward",

-      keys: ["l", "L"],

+      keys: ["L"],

       description: "Fast forward 1 second",

       category: "Playback",

       action: () => {

@@ -157,7 +157,7 @@ export const useKeyboardShortcuts = (
     // Editing

     {

       id: "split-element",

-      keys: ["s", "S"],

+      keys: ["S"],

       description: "Split element at playhead",

       category: "Editing",

       requiresSelection: true,

@@ -206,7 +206,7 @@ export const useKeyboardShortcuts = (
     },

     {

       id: "toggle-snapping",

-      keys: ["n", "N"],

+      keys: ["N"],

       description: "Toggle snapping",

       category: "Editing",

       action: () => {

@@ -217,7 +217,7 @@ export const useKeyboardShortcuts = (
     // Selection & Organization

     {

       id: "select-all",

-      keys: ["Cmd+a", "Ctrl+a"],

+      keys: ["Cmd+A", "Ctrl+A"],

       description: "Select all elements",

       category: "Selection",

       action: () => {

@@ -232,7 +232,7 @@ export const useKeyboardShortcuts = (
     },

     {

       id: "duplicate-element",

-      keys: ["Cmd+d", "Ctrl+d"],

+      keys: ["Cmd+D", "Ctrl+D"],

       description: "Duplicate selected element",

       category: "Selection",

       requiresSelection: true,

@@ -264,7 +264,7 @@ export const useKeyboardShortcuts = (
     // History

     {

       id: "undo",

-      keys: ["Cmd+z", "Ctrl+z"],

+      keys: ["Cmd+Z", "Ctrl+Z"],

       description: "Undo",

       category: "History",

       action: () => {

@@ -273,7 +273,7 @@ export const useKeyboardShortcuts = (
     },

     {

       id: "redo",

-      keys: ["Cmd+Shift+z", "Ctrl+Shift+z", "Cmd+y", "Ctrl+y"],

+      keys: ["Cmd+Shift+Z", "Ctrl+Shift+Z", "Cmd+Y", "Ctrl+Y"],

       description: "Redo",

       category: "History",

       action: () => {

@@ -292,7 +292,7 @@ export const useKeyboardShortcuts = (
 

     parts.push(e.key);

 

-    return parts.join("+");

+    return parts.join("+").toLowerCase();

   }, []);

 

   // Handle keyboard events

@@ -302,7 +302,11 @@ export const useKeyboardShortcuts = (
 

       const keyCombo = parseKeyboardEvent(e);

       const shortcut = shortcuts.find((s) =>

-        s.keys.some((key) => key === keyCombo || key === e.key)

+        s.keys.some(

+          (key) =>

+            key.toLowerCase() === keyCombo ||

+            key.toLowerCase() === e.key.toLowerCase()

+        )

       );

 

       if (shortcut) {

diff --git a/apps/web/src/lib/utils.ts b/apps/web/src/lib/utils.ts
index dd73059f..fd47cc13 100644
--- a/apps/web/src/lib/utils.ts
+++ b/apps/web/src/lib/utils.ts
@@ -13,7 +13,10 @@ export function cn(...inputs: ClassValue[]) {
  */
 export function generateUUID(): string {
   // Use the native crypto.randomUUID if available
-  if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {
+  if (
+    typeof crypto !== "undefined" &&
+    typeof crypto.randomUUID === "function"
+  ) {
     return crypto.randomUUID();
   }
 
@@ -26,13 +29,29 @@ export function generateUUID(): string {
   // Set variant 10xxxxxx
   bytes[8] = (bytes[8] & 0x3f) | 0x80;
 
-  const hex = [...bytes].map(b => b.toString(16).padStart(2, '0'));
+  const hex = [...bytes].map((b) => b.toString(16).padStart(2, "0"));
 
   return (
-    hex.slice(0, 4).join('') + '-' +
-    hex.slice(4, 6).join('') + '-' +
-    hex.slice(6, 8).join('') + '-' +
-    hex.slice(8, 10).join('') + '-' +
-    hex.slice(10, 16).join('')
+    hex.slice(0, 4).join("") +
+    "-" +
+    hex.slice(4, 6).join("") +
+    "-" +
+    hex.slice(6, 8).join("") +
+    "-" +
+    hex.slice(8, 10).join("") +
+    "-" +
+    hex.slice(10, 16).join("")
   );
-}
\ No newline at end of file
+}
+
+export function isAppleDevice() {
+  return /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform);
+}
+
+export function getPlatformSpecialKey() {
+  return isAppleDevice() ? "⌘" : "Ctrl";
+}
+
+export function getPlatformAlternateKey() {
+  return isAppleDevice() ? "⌥" : "Alt";
+}