Refactor keyboard shortcuts to use uppercase keys for display and update KeyBadge functionality

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,38 +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
-  return 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");
+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;
   });
@@ -60,7 +57,7 @@ const ShortcutItem = ({ shortcut }: { shortcut: any }) => {
             <div className="flex items-center">
               {key.split("+").map((keyPart: string, partIndex: number) => (
                 <kbd key={partIndex} className="shortcut-key">
-                  <KeyBadge keyName={keyPart} />
+                  {getKeyWithModifier(keyPart)}
                 </kbd>
               ))}
             </div>

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: () => {