Add platform-aware keyboard shortcut formatting

Introduces a new utility (platformUtils.ts) to format keyboard shortcuts based on the user's platform (macOS or others). Updates KeyboardShortcutsHelp and TimelineEditor to use the new formatShortcut function for displaying shortcuts, ensuring correct symbols are shown for modifier keys.

src/components/video-editor/KeyboardShortcutsHelp.tsx

@@ -1,4 +1,5 @@
 import { HelpCircle } from "lucide-react";
+import { formatShortcut } from "@/utils/platformUtils";
 
 export function KeyboardShortcutsHelp() {
   return (
@@ -21,15 +22,15 @@ export function KeyboardShortcutsHelp() {
           </div>
           <div className="flex items-center justify-between">
             <span className="text-slate-400">Delete Selected</span>
-            <kbd className="px-1 py-0.5 bg-white/5 border border-white/10 rounded text-[#34B27B] font-mono">⌘ + D</kbd>
+            <kbd className="px-1 py-0.5 bg-white/5 border border-white/10 rounded text-[#34B27B] font-mono">{formatShortcut(['mod', 'D'])}</kbd>
           </div>
           <div className="flex items-center justify-between">
             <span className="text-slate-400">Pan Timeline</span>
-            <kbd className="px-1 py-0.5 bg-white/5 border border-white/10 rounded text-[#34B27B] font-mono">⇧ + ⌘ + Scroll</kbd>
+            <kbd className="px-1 py-0.5 bg-white/5 border border-white/10 rounded text-[#34B27B] font-mono">{formatShortcut(['shift', 'mod', 'Scroll'])}</kbd>
           </div>
           <div className="flex items-center justify-between">
             <span className="text-slate-400">Zoom Timeline</span>
-            <kbd className="px-1 py-0.5 bg-white/5 border border-white/10 rounded text-[#34B27B] font-mono">⌘ + Scroll</kbd>
+            <kbd className="px-1 py-0.5 bg-white/5 border border-white/10 rounded text-[#34B27B] font-mono">{formatShortcut(['mod', 'Scroll'])}</kbd>
           </div>
         </div>
       </div>

src/components/video-editor/timeline/TimelineEditor.tsx

@@ -18,6 +18,7 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { type AspectRatio, getAspectRatioLabel } from "@/utils/aspectRatioUtils";
+import { formatShortcut } from "@/utils/platformUtils";
 
 const ZOOM_ROW_ID = "row-zoom";
 const TRIM_ROW_ID = "row-trim";

src/utils/platformUtils.ts

@@ -0,0 +1,35 @@
+/**
+ * Detects if the current platform is macOS
+ */
+export const isMac = (): boolean => {
+  if (typeof navigator === 'undefined') return false;
+  return /Mac|iPhone|iPad|iPod/.test(navigator.platform);
+};
+
+/**
+ * Gets the modifier key symbol based on the platform
+ */
+export const getModifierKey = (): string => {
+  return isMac() ? '⌘' : 'Ctrl';
+};
+
+/**
+ * Gets the shift key symbol based on the platform
+ */
+export const getShiftKey = (): string => {
+  return isMac() ? '⇧' : 'Shift';
+};
+
+/**
+ * Formats a keyboard shortcut for display based on the platform
+ * @param keys Array of key combinations (e.g., ['mod', 'D'] or ['shift', 'mod', 'Scroll'])
+ */
+export const formatShortcut = (keys: string[]): string => {
+  return keys
+    .map(key => {
+      if (key.toLowerCase() === 'mod') return getModifierKey();
+      if (key.toLowerCase() === 'shift') return getShiftKey();
+      return key;
+    })
+    .join(' + ');
+};