style: localise labels to user device (#509)

apps/client/src/common/utils/deviceUtils.ts

@@ -0,0 +1,6 @@
+export function isMacOS() {
+  const userAgent = navigator.userAgent.toLowerCase();
+  return userAgent.includes('macintosh') || userAgent.includes('mac os');
+}
+
+export const deviceAlt = isMacOS() ? '⌥' : 'Alt';

apps/client/src/features/rundown/quick-add-block/QuickAddBlock.tsx

@@ -5,6 +5,7 @@ import { SupportedEvent } from 'ontime-types';
 import { useEventAction } from '../../../common/hooks/useEventAction';
 import { useEditorSettings } from '../../../common/stores/editorSettings';
 import { useEmitLog } from '../../../common/stores/logger';
+import { deviceAlt } from '../../../common/utils/deviceUtils';
 import { tooltipDelayMid } from '../../../ontimeConfig';
 
 import style from './QuickAddBlock.module.scss';
@@ -82,7 +83,7 @@ const QuickAddBlock = (props: QuickAddBlockProps) => {
             className={style.quickBtn}
             data-testid='quick-add-event'
           >
-            Event {showKbd && <span className={style.keyboard}>Alt + E</span>}
+            Event {showKbd && <span className={style.keyboard}>{`${deviceAlt} + E`}</span>}
           </Button>
         </Tooltip>
         <Tooltip label='Add Delay' openDelay={tooltipDelayMid}>
@@ -94,7 +95,7 @@ const QuickAddBlock = (props: QuickAddBlockProps) => {
             className={style.quickBtn}
             data-testid='quick-add-delay'
           >
-            Delay {showKbd && <span className={style.keyboard}>Alt + D</span>}
+            Delay {showKbd && <span className={style.keyboard}>{`${deviceAlt} + D`}</span>}
           </Button>
         </Tooltip>
         <Tooltip label='Add Block' openDelay={tooltipDelayMid}>
@@ -106,7 +107,7 @@ const QuickAddBlock = (props: QuickAddBlockProps) => {
             className={style.quickBtn}
             data-testid='quick-add-block'
           >
-            Block {showKbd && <span className={style.keyboard}>Alt + B</span>}
+            Block {showKbd && <span className={style.keyboard}>{`${deviceAlt} + B`}</span>}
           </Button>
         </Tooltip>
       </div>