190 display ctrl instead of for windows users (#9617)

Closes https://github.com/twentyhq/core-team-issues/issues/190

<img width="226" alt="Capture d’écran 2025-01-15 à 12 07 12"
src="https://github.com/user-attachments/assets/b9a13746-2629-477a-9795-cda03c63f8f6"
/>

To test, update the user agent in your browser dev tools:
<img width="459" alt="Capture d’écran 2025-01-15 à 12 14 29"
src="https://github.com/user-attachments/assets/4371d5fc-fd3c-403d-beaa-7ba58019d3c9"
/>

packages/twenty-front/src/modules/action-menu/components/CmdEnterActionButton.tsx

@@ -1,7 +1,7 @@
-import { Button } from 'twenty-ui';
+import { RightDrawerHotkeyScope } from '@/ui/layout/right-drawer/types/RightDrawerHotkeyScope';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { Key } from 'ts-key-enum';
-import { RightDrawerHotkeyScope } from '@/ui/layout/right-drawer/types/RightDrawerHotkeyScope';
+import { Button, getOsControlSymbol } from 'twenty-ui';
 
 export const CmdEnterActionButton = ({
   title,
@@ -24,7 +24,7 @@ export const CmdEnterActionButton = ({
       accent="blue"
       size="medium"
       onClick={onClick}
-      shortcut={'⌘⏎'}
+      hotkeys={[getOsControlSymbol(), '⏎']}
     />
   );
 };

packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenuBarAllActionsButton.tsx

@@ -1,7 +1,7 @@
 import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { IconLayoutSidebarRightExpand } from 'twenty-ui';
+import { IconLayoutSidebarRightExpand, getOsControlSymbol } from 'twenty-ui';
 
 const StyledButton = styled.div`
   border-radius: ${({ theme }) => theme.border.radius.sm};
@@ -46,7 +46,7 @@ export const RecordIndexActionMenuBarAllActionsButton = () => {
         <IconLayoutSidebarRightExpand size={theme.icon.size.md} />
         <StyledButtonLabel>All Actions</StyledButtonLabel>
         <StyledSeparator size="sm" />
-        <StyledShortcutLabel>⌘K</StyledShortcutLabel>
+        <StyledShortcutLabel>{getOsControlSymbol()}K</StyledShortcutLabel>
       </StyledButton>
     </>
   );

packages/twenty-front/src/modules/action-menu/components/RightDrawerActionMenuDropdown.tsx

@@ -14,7 +14,7 @@ import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/
 import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
 import { useTheme } from '@emotion/react';
 import { Key } from 'ts-key-enum';
-import { Button, MenuItem } from 'twenty-ui';
+import { Button, MenuItem, getOsControlSymbol } from 'twenty-ui';
 import { FeatureFlagKey } from '~/generated/graphql';
 
 export const RightDrawerActionMenuDropdown = () => {
@@ -68,7 +68,9 @@ export const RightDrawerActionMenuDropdown = () => {
           RightDrawerActionMenuDropdownHotkeyScope.RightDrawerActionMenuDropdown,
       }}
       data-select-disable
-      clickableComponent={<Button title="Actions" shortcut="⌘O" />}
+      clickableComponent={
+        <Button title="Actions" hotkeys={[getOsControlSymbol(), 'O']} />
+      }
       dropdownPlacement="top-end"
       dropdownOffset={{
         y: parseInt(theme.spacing(2), 10),

packages/twenty-front/src/modules/keyboard-shortcut-menu/constants/KeyboardShortcutsGeneral.ts

@@ -1,10 +1,11 @@
+import { getOsControlSymbol } from 'twenty-ui';
 import { Shortcut, ShortcutType } from '../types/Shortcut';
 
 export const KEYBOARD_SHORTCUTS_GENERAL: Shortcut[] = [
   {
     label: 'Open search',
     type: ShortcutType.General,
-    firstHotKey: '⌘',
+    firstHotKey: getOsControlSymbol(),
     secondHotKey: 'K',
     areSimultaneous: false,
   },

packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerItems.tsx

@@ -1,6 +1,6 @@
 import { useLocation } from 'react-router-dom';
 import { useRecoilState, useSetRecoilState } from 'recoil';
-import { IconSearch, IconSettings } from 'twenty-ui';
+import { IconSearch, IconSettings, getOsControlSymbol } from 'twenty-ui';
 
 import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
 import { CurrentWorkspaceMemberFavoritesFolders } from '@/favorites/components/CurrentWorkspaceMemberFavoritesFolders';
@@ -45,7 +45,7 @@ export const MainNavigationDrawerItems = () => {
             label="Search"
             Icon={IconSearch}
             onClick={toggleCommandMenu}
-            keyboard={['⌘', 'K']}
+            keyboard={[getOsControlSymbol(), 'K']}
           />
           <NavigationDrawerItem
             label="Settings"

packages/twenty-front/src/modules/sign-in-background-mock/components/SignInAppNavigationDrawerMock.tsx

@@ -7,6 +7,7 @@ import { NavigationDrawerSection } from '@/ui/navigation/navigation-drawer/compo
 import { DEFAULT_WORKSPACE_LOGO } from '@/ui/navigation/navigation-drawer/constants/DefaultWorkspaceLogo';
 import { DEFAULT_WORKSPACE_NAME } from '@/ui/navigation/navigation-drawer/constants/DefaultWorkspaceName';
 import styled from '@emotion/styled';
+import { getOsControlSymbol } from '@ui/utilities/device/getOsControlSymbol';
 import { IconSearch, IconSettings, useIsMobile } from 'twenty-ui';
 import { generatedMockObjectMetadataItems } from '~/testing/mock-data/generatedMockObjectMetadataItems';
 
@@ -39,7 +40,7 @@ export const SignInAppNavigationDrawerMock = ({
             label="Search"
             Icon={IconSearch}
             onClick={() => {}}
-            keyboard={['⌘', 'K']}
+            keyboard={[getOsControlSymbol(), 'K']}
           />
           <NavigationDrawerItem
             label="Settings"

packages/twenty-front/src/modules/ui/layout/page-header/components/PageHeaderOpenCommandMenuButton.tsx

@@ -1,4 +1,10 @@
-import { Button, IconButton, IconDotsVertical, useIsMobile } from 'twenty-ui';
+import {
+  Button,
+  IconButton,
+  IconDotsVertical,
+  getOsControlSymbol,
+  useIsMobile,
+} from 'twenty-ui';
 
 import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
 import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
@@ -22,7 +28,7 @@ export const PageHeaderOpenCommandMenuButton = () => {
           size={isMobile ? 'medium' : 'small'}
           variant="secondary"
           accent="default"
-          shortcut={isMobile ? '' : '⌘K'}
+          hotkeys={[getOsControlSymbol(), 'K']}
           ariaLabel="Open command menu"
           onClick={openCommandMenu}
         />

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/__stories__/NavigationDrawer.stories.tsx

@@ -19,6 +19,7 @@ import {
   IconUser,
   IconUserCircle,
   IconUsers,
+  getOsControlSymbol,
 } from 'twenty-ui';
 
 import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
@@ -88,7 +89,7 @@ export const Default: Story = {
           <NavigationDrawerItem
             label="Search"
             Icon={IconSearch}
-            keyboard={['⌘', 'K']}
+            keyboard={[`${getOsControlSymbol()}`, 'K']}
           />
           <NavigationDrawerItem
             label="Settings"

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/__stories__/NavigationDrawerItem.stories.tsx

@@ -5,6 +5,7 @@ import { CatalogDecorator, CatalogStory, IconSearch } from 'twenty-ui';
 import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
 import { MemoryRouterDecorator } from '~/testing/decorators/MemoryRouterDecorator';
 
+import { getOsControlSymbol } from '@ui/utilities/device/getOsControlSymbol';
 import { NavigationDrawerItem } from '../NavigationDrawerItem';
 
 const StyledContainer = styled.div`
@@ -188,7 +189,7 @@ export const Catalog: CatalogStory<Story, typeof NavigationDrawerItem> = {
               : adornmentName === 'Count'
                 ? { count: 3 }
                 : adornmentName === 'Keyboard Keys'
-                  ? { keyboard: ['⌘', 'K'] }
+                  ? { keyboard: [getOsControlSymbol(), 'K'] }
                   : {},
         },
       ],