From 391938049b24562a750a9c99e67ca5955816ccbf Mon Sep 17 00:00:00 2001
From: Alessandro Spisso <5341363+ilGianfri@users.noreply.github.com>
Date: Mon, 1 Dec 2025 00:19:34 +0100
Subject: [PATCH] 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.
---
 .../video-editor/KeyboardShortcutsHelp.tsx    |  7 ++--
 .../video-editor/timeline/TimelineEditor.tsx  |  1 +
 src/utils/platformUtils.ts                    | 35 +++++++++++++++++++
 3 files changed, 40 insertions(+), 3 deletions(-)
 create mode 100644 src/utils/platformUtils.ts

diff --git a/src/components/video-editor/KeyboardShortcutsHelp.tsx b/src/components/video-editor/KeyboardShortcutsHelp.tsx
index b4cd2e47..453c613d 100644
--- a/src/components/video-editor/KeyboardShortcutsHelp.tsx
+++ b/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>
diff --git a/src/components/video-editor/timeline/TimelineEditor.tsx b/src/components/video-editor/timeline/TimelineEditor.tsx
index 907081d0..d383b79e 100644
--- a/src/components/video-editor/timeline/TimelineEditor.tsx
+++ b/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";
diff --git a/src/utils/platformUtils.ts b/src/utils/platformUtils.ts
new file mode 100644
index 00000000..4c63b811
--- /dev/null
+++ b/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(' + ');
+};
\ No newline at end of file