From 480e83fa79155a83b9d6ae23fadea35e229f25a1 Mon Sep 17 00:00:00 2001 From: Anwarul Islam Date: Fri, 18 Jul 2025 05:52:31 +0600 Subject: [PATCH 1/6] Add shortcut key styles to globals.css --- apps/web/src/app/globals.css | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/apps/web/src/app/globals.css b/apps/web/src/app/globals.css index 2f7158cc..bc9638ef 100644 --- a/apps/web/src/app/globals.css +++ b/apps/web/src/app/globals.css @@ -86,3 +86,25 @@ overscroll-behavior-x: contain; } } + +.shortcut-key { + @apply inline-flex; + @apply font-sans; + @apply text-xs; + @apply rounded; + @apply px-2; + @apply min-w-[1.5rem]; + @apply min-h-[1.5rem]; + @apply leading-none; + @apply items-center; + @apply justify-center; + @apply shadow-sm; + @apply border; + + background-color: rgba(0, 0, 0, 0.2); + border-color: rgba(255, 255, 255, 0.1); + + &:not(:last-child) { + @apply mr-1; + } +} From c34b402297c0e06d0208571250357b2ea6acf2a9 Mon Sep 17 00:00:00 2001 From: Anwarul Islam Date: Fri, 18 Jul 2025 05:53:19 +0600 Subject: [PATCH 2/6] Add utils for platform detection --- apps/web/src/lib/utils.ts | 35 +++++++++++++++++++++++++++-------- 1 file changed, 27 insertions(+), 8 deletions(-) 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"; +} From f5d221feec01c835b7c2e7e2a29cdae312f514c1 Mon Sep 17 00:00:00 2001 From: Anwarul Islam Date: Fri, 18 Jul 2025 05:53:42 +0600 Subject: [PATCH 3/6] Refactor KeyBadge component to return key names directly and update ShortcutItem to use for key display --- .../src/components/keyboard-shortcuts-help.tsx | 15 +++------------ 1 file changed, 3 insertions(+), 12 deletions(-) diff --git a/apps/web/src/components/keyboard-shortcuts-help.tsx b/apps/web/src/components/keyboard-shortcuts-help.tsx index 936254be..e883da14 100644 --- a/apps/web/src/components/keyboard-shortcuts-help.tsx +++ b/apps/web/src/components/keyboard-shortcuts-help.tsx @@ -16,7 +16,7 @@ import { useKeyboardShortcuts } from "@/hooks/use-keyboard-shortcuts"; const KeyBadge = ({ keyName }: { keyName: string }) => { // Replace common key names with symbols or friendly names - const displayKey = keyName + return keyName .replace("Cmd", "⌘") .replace("Shift", "Shift") .replace("ArrowLeft", "Arrow Left") @@ -26,12 +26,6 @@ const KeyBadge = ({ keyName }: { keyName: string }) => { .replace("←", "◀") .replace("→", "▶") .replace("Space", "Space"); - - return ( - - {displayKey} - - ); }; const ShortcutItem = ({ shortcut }: { shortcut: any }) => { @@ -65,12 +59,9 @@ const ShortcutItem = ({ shortcut }: { shortcut: any }) => {
{key.split("+").map((keyPart: string, partIndex: number) => ( -
+ - {partIndex < key.split("+").length - 1 && ( - + - )} -
+ ))}
{index < displayKeys.length - 1 && ( From c391eb861683cb6aa3b98a83b2b9eda2c0ca9e7e Mon Sep 17 00:00:00 2001 From: Anwarul Islam Date: Fri, 18 Jul 2025 06:22:49 +0600 Subject: [PATCH 4/6] Refactor keyboard shortcuts to use uppercase keys for display and update KeyBadge functionality --- .../components/keyboard-shortcuts-help.tsx | 47 +++++++++---------- apps/web/src/hooks/use-keyboard-shortcuts.ts | 18 +++---- 2 files changed, 31 insertions(+), 34 deletions(-) diff --git a/apps/web/src/components/keyboard-shortcuts-help.tsx b/apps/web/src/components/keyboard-shortcuts-help.tsx index e883da14..a33ba666 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,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 }) => {
{key.split("+").map((keyPart: string, partIndex: number) => ( - + {getKeyWithModifier(keyPart)} ))}
diff --git a/apps/web/src/hooks/use-keyboard-shortcuts.ts b/apps/web/src/hooks/use-keyboard-shortcuts.ts index 84cb78f8..532b8224 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: () => { From 4b80c149828d7e730262cb170ab9fb90d0e634d1 Mon Sep 17 00:00:00 2001 From: Anwarul Islam Date: Fri, 18 Jul 2025 06:27:31 +0600 Subject: [PATCH 5/6] Normalize keyboard shortcut keys to lowercase for consistent handling --- apps/web/src/hooks/use-keyboard-shortcuts.ts | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/apps/web/src/hooks/use-keyboard-shortcuts.ts b/apps/web/src/hooks/use-keyboard-shortcuts.ts index 532b8224..feb8f409 100644 --- a/apps/web/src/hooks/use-keyboard-shortcuts.ts +++ b/apps/web/src/hooks/use-keyboard-shortcuts.ts @@ -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) { From b19db0bbea168f757fe1f6c7ff254128373cc593 Mon Sep 17 00:00:00 2001 From: Maze Winther Date: Fri, 18 Jul 2025 11:26:49 +0200 Subject: [PATCH 6/6] cleanup --- apps/web/src/app/globals.css | 22 ------------------- .../components/keyboard-shortcuts-help.tsx | 18 +++++++++++++-- 2 files changed, 16 insertions(+), 24 deletions(-) diff --git a/apps/web/src/app/globals.css b/apps/web/src/app/globals.css index bc9638ef..2f7158cc 100644 --- a/apps/web/src/app/globals.css +++ b/apps/web/src/app/globals.css @@ -86,25 +86,3 @@ overscroll-behavior-x: contain; } } - -.shortcut-key { - @apply inline-flex; - @apply font-sans; - @apply text-xs; - @apply rounded; - @apply px-2; - @apply min-w-[1.5rem]; - @apply min-h-[1.5rem]; - @apply leading-none; - @apply items-center; - @apply justify-center; - @apply shadow-sm; - @apply border; - - background-color: rgba(0, 0, 0, 0.2); - border-color: rgba(255, 255, 255, 0.1); - - &:not(:last-child) { - @apply mr-1; - } -} diff --git a/apps/web/src/components/keyboard-shortcuts-help.tsx b/apps/web/src/components/keyboard-shortcuts-help.tsx index a33ba666..a48b3c21 100644 --- a/apps/web/src/components/keyboard-shortcuts-help.tsx +++ b/apps/web/src/components/keyboard-shortcuts-help.tsx @@ -56,9 +56,9 @@ const ShortcutItem = ({ shortcut }: { shortcut: any }) => {
{key.split("+").map((keyPart: string, partIndex: number) => ( - + {getKeyWithModifier(keyPart)} - + ))}
{index < displayKeys.length - 1 && ( @@ -119,3 +119,17 @@ export const KeyboardShortcutsHelp = () => { ); }; + +function ShortcutKey({ children }: { children: React.ReactNode }) { + return ( + + {children} + + ); +};