From c1fa1d647eef5e1c470a3a52b1ca228b94370700 Mon Sep 17 00:00:00 2001
From: j4k0xb <55899582+j4k0xb@users.noreply.github.com>
Date: Sat, 8 Jun 2024 14:14:13 +0200
Subject: [PATCH] fix: display cmd icon for macs (#90)

---
 apps/playground/src/components/menu/Menu.tsx | 5 +++--
 apps/playground/src/utils/platform.ts        | 9 +++++++++
 2 files changed, 12 insertions(+), 2 deletions(-)
 create mode 100644 apps/playground/src/utils/platform.ts

diff --git a/apps/playground/src/components/menu/Menu.tsx b/apps/playground/src/components/menu/Menu.tsx
index 94c2d7f7..70edbd58 100644
--- a/apps/playground/src/components/menu/Menu.tsx
+++ b/apps/playground/src/components/menu/Menu.tsx
@@ -2,6 +2,7 @@ import { For, createSignal, onCleanup, onMount } from 'solid-js';
 import { setSettings, settings, type Settings } from '../../hooks/useSettings';
 import { useWorkspaces, type Workspace } from '../../indexeddb';
 import { openFile } from '../../utils/files';
+import { ctrlCmdIcon } from '../../utils/platform';
 import MenuButton from './MenuButton';
 import MenuDropdown from './MenuDropdown';
 import MenuHeader from './MenuHeader';
@@ -42,7 +43,7 @@ export default function Menu(props: Props) {
         onOpen={() => setOpenedMenu('file')}
       >
         <MenuButton
-          shortcut={['Ctrl', 'O']}
+          shortcut={[ctrlCmdIcon, 'O']}
           onClick={() => openFile(props.onFileOpen)}
         >
           Open File…
@@ -62,7 +63,7 @@ export default function Menu(props: Props) {
             )}
           </For>
         </MenuDropdown>
-        <MenuButton shortcut={['Ctrl', 'S']} onClick={props.onSave}>
+        <MenuButton shortcut={[ctrlCmdIcon, 'S']} onClick={props.onSave}>
           Save
         </MenuButton>
       </MenuHeader>
diff --git a/apps/playground/src/utils/platform.ts b/apps/playground/src/utils/platform.ts
new file mode 100644
index 00000000..017e1bca
--- /dev/null
+++ b/apps/playground/src/utils/platform.ts
@@ -0,0 +1,9 @@
+const isMacintosh = navigator.userAgent.includes('Macintosh');
+const isIOS =
+  (navigator.userAgent.includes('Macintosh') ||
+    navigator.userAgent.includes('iPad') ||
+    navigator.userAgent.includes('iPhone')) &&
+  !!navigator.maxTouchPoints &&
+  navigator.maxTouchPoints > 0;
+
+export const ctrlCmdIcon = isMacintosh || isIOS ? '⌘' : 'Ctrl';