clients/web/docs: adapt command palette trigger to platform

clients/apps/web/src/components/CommandPalette/CommandPaletteTrigger.tsx

@@ -1,5 +1,6 @@
 import { SearchOutlined } from '@mui/icons-material'
 import { twMerge } from 'tailwind-merge'
+import { CommandPaletteTriggerKey } from './commands/trigger'
 
 export interface CommandPaletteTriggerProps {
   className?: string
@@ -33,7 +34,7 @@ export const CommandPaletteTrigger = ({
           'dark:border-polar-600 cursor-default rounded-md bg-white px-2 py-1 text-xs tracking-wide dark:border dark:bg-transparent',
         )}
       >
-        <span>⌘K</span>
+        <CommandPaletteTriggerKey />
       </div>
     </div>
   )

clients/apps/web/src/components/CommandPalette/commands/trigger.tsx

@@ -0,0 +1,37 @@
+import React, { useEffect, useState } from 'react'
+
+const KEY = 'k'
+
+const isMac = (navigator: Navigator): boolean => {
+  if (typeof navigator == 'undefined') {
+    return false
+  }
+  return navigator.platform.toLowerCase().includes('mac')
+}
+
+export const CommandPaletteTriggerKey: React.FC = () => {
+  const [isMacOS, setIsMacOS] = useState(false)
+
+  useEffect(() => {
+    setIsMacOS(isMac(navigator))
+  }, [])
+
+  return <span>{`${isMacOS ? '⌘' : '^'}${KEY.toUpperCase()}`}</span>
+}
+
+export const useCommandPaletteTrigger = (onTrigger: () => void): void => {
+  useEffect(() => {
+    const handleKeyPress = (e: KeyboardEvent) => {
+      const controlKeyPressed = isMac(navigator) ? e.metaKey : e.ctrlKey
+      if (e.key === KEY && controlKeyPressed) {
+        onTrigger()
+      }
+    }
+
+    window.addEventListener('keydown', handleKeyPress)
+
+    return () => {
+      window.removeEventListener('keydown', handleKeyPress)
+    }
+  }, [onTrigger])
+}

clients/apps/web/src/components/Dashboard/DashboardProvider.tsx

@@ -1,6 +1,7 @@
 import { useCurrentOrgAndRepoFromURL } from '@/hooks'
-import { PropsWithChildren, createContext, useContext, useEffect } from 'react'
+import { PropsWithChildren, createContext, useContext } from 'react'
 import { CommandPalette } from '../CommandPalette/CommandPalette'
+import { useCommandPaletteTrigger } from '../CommandPalette/commands/trigger'
 import { Modal } from '../Modal'
 import { useModal } from '../Modal/useModal'
 
@@ -32,21 +33,7 @@ export const DashboardProvider = ({ children }: PropsWithChildren) => {
     toggle: toggleCommandPalette,
   } = useModal()
 
-  useEffect(() => {
-    const handleKeyPress = (e: KeyboardEvent) => {
-      if (isCommandPaletteOpen) return
-
-      if (e.key === 'k' && e.metaKey) {
-        showCommandPalette()
-      }
-    }
-
-    window.addEventListener('keydown', handleKeyPress)
-
-    return () => {
-      window.removeEventListener('keydown', handleKeyPress)
-    }
-  }, [isCommandPaletteOpen, showCommandPalette])
+  useCommandPaletteTrigger(toggleCommandPalette)
 
   return (
     <DashboardContext.Provider

clients/apps/web/src/components/Documentation/Navigation.tsx

@@ -48,7 +48,7 @@ export const Navigation = () => {
 }
 
 export const DocumentationPageSidebar = () => {
-  const { isShown, show, hide } = useModal()
+  const { isShown, show, hide, toggle } = useModal()
 
   return (
     <div className="flex w-full flex-shrink-0 flex-col gap-y-12 md:w-60">
@@ -84,7 +84,7 @@ export const DocumentationPageSidebar = () => {
       <Separator />
       <Navigation />
 
-      <SearchPalette isShown={isShown} show={show} hide={hide} />
+      <SearchPalette isShown={isShown} toggle={toggle} hide={hide} />
     </div>
   )
 }

clients/apps/web/src/components/Documentation/SearchPalette.tsx

@@ -2,30 +2,20 @@
 
 import { CommandPalette } from '@/components/CommandPalette/CommandPalette'
 import { Modal } from '@/components/Modal'
-import { useEffect } from 'react'
+import { useCommandPaletteTrigger } from '../CommandPalette/commands/trigger'
 
 export interface SearchPaletteProps {
   isShown: boolean
-  show: () => void
+  toggle: () => void
   hide: () => void
 }
 
-export const SearchPalette = ({ isShown, show, hide }: SearchPaletteProps) => {
-  useEffect(() => {
-    const handleKeyPress = (e: KeyboardEvent) => {
-      if (isShown) return
-
-      if (e.key === 'k' && e.metaKey) {
-        show()
-      }
-    }
-
-    window.addEventListener('keydown', handleKeyPress)
-
-    return () => {
-      window.removeEventListener('keydown', handleKeyPress)
-    }
-  }, [isShown, show])
+export const SearchPalette = ({
+  isShown,
+  toggle,
+  hide,
+}: SearchPaletteProps) => {
+  useCommandPaletteTrigger(toggle)
 
   return (
     <Modal