diff --git a/web/components/command-palette/command-palette.tsx b/web/components/command-palette/command-palette.tsx index 0b3635b2d..9143d44c7 100644 --- a/web/components/command-palette/command-palette.tsx +++ b/web/components/command-palette/command-palette.tsx @@ -22,6 +22,7 @@ import { EUserWorkspaceRoles } from "@/constants/workspace"; import { copyTextToClipboard } from "@/helpers/string.helper"; // hooks import { useEventTracker, useIssues, useUser, useAppTheme, useCommandPalette } from "@/hooks/store"; +import { usePlatformOS } from "@/hooks/use-platform-os"; // services import { IssueService } from "@/services/issue"; @@ -35,6 +36,7 @@ export const CommandPalette: FC = observer(() => { // store hooks const { toggleSidebar } = useAppTheme(); const { setTrackElement } = useEventTracker(); + const { platform } = usePlatformOS(); const { membership: { currentWorkspaceRole, currentProjectRole }, data: currentUser, @@ -210,7 +212,7 @@ export const CommandPalette: FC = observer(() => { return; if (cmdClicked) { - if (keyPressed === "c" && altKey) { + if (keyPressed === "c" && ((platform === "MacOS" && ctrlKey) || altKey)) { e.preventDefault(); copyIssueUrlToClipboard(); } else if (keyPressed === "b") { diff --git a/web/components/command-palette/shortcuts-modal/commands-list.tsx b/web/components/command-palette/shortcuts-modal/commands-list.tsx index 3c327eb8b..d121f247a 100644 --- a/web/components/command-palette/shortcuts-modal/commands-list.tsx +++ b/web/components/command-palette/shortcuts-modal/commands-list.tsx @@ -1,39 +1,42 @@ import { Command } from "lucide-react"; // helpers import { substringMatch } from "@/helpers/string.helper"; +// hooks +import { usePlatformOS } from "@/hooks/use-platform-os"; type Props = { searchQuery: string; }; -const KEYBOARD_SHORTCUTS = [ - { - key: "navigation", - title: "Navigation", - shortcuts: [{ keys: "Ctrl,K", description: "Open command menu" }], - }, - { - key: "common", - title: "Common", - shortcuts: [ - { keys: "P", description: "Create project" }, - { keys: "C", description: "Create issue" }, - { keys: "Q", description: "Create cycle" }, - { keys: "M", description: "Create module" }, - { keys: "V", description: "Create view" }, - { keys: "D", description: "Create page" }, - { keys: "Delete", description: "Bulk delete issues" }, - { keys: "H", description: "Open shortcuts guide" }, - { - keys: "Ctrl,Alt,C", - description: "Copy issue URL from the issue details page", - }, - ], - }, -]; - export const ShortcutCommandsList: React.FC = (props) => { const { searchQuery } = props; + const { platform } = usePlatformOS(); + + const KEYBOARD_SHORTCUTS = [ + { + key: "navigation", + title: "Navigation", + shortcuts: [{ keys: "Ctrl,K", description: "Open command menu" }], + }, + { + key: "common", + title: "Common", + shortcuts: [ + { keys: "P", description: "Create project" }, + { keys: "C", description: "Create issue" }, + { keys: "Q", description: "Create cycle" }, + { keys: "M", description: "Create module" }, + { keys: "V", description: "Create view" }, + { keys: "D", description: "Create page" }, + { keys: "Delete", description: "Bulk delete issues" }, + { keys: "H", description: "Open shortcuts guide" }, + { + keys: platform === "MacOS" ? "Ctrl,control,C" : "Ctrl,Alt,C", + description: "Copy issue URL from the issue details page", + }, + ], + }, + ]; const filteredShortcuts = KEYBOARD_SHORTCUTS.map((category) => { const newCategory = { ...category }; @@ -60,13 +63,13 @@ export const ShortcutCommandsList: React.FC = (props) => { {category.shortcuts.map((shortcut) => (
-

{shortcut.description}

+

{shortcut.description}

{shortcut.keys.split(",").map((key) => (
{key === "Ctrl" ? ( -
- +
+ { platform === "MacOS" ? : 'Ctrl'}
) : ( diff --git a/web/hooks/use-platform-os.tsx b/web/hooks/use-platform-os.tsx index da7dfca11..fb9336fa6 100644 --- a/web/hooks/use-platform-os.tsx +++ b/web/hooks/use-platform-os.tsx @@ -2,11 +2,26 @@ import { useEffect, useState } from "react"; export const usePlatformOS = () => { const [isMobile, setIsMobile] = useState(false); + const [platform, setPlatform] = useState(""); useEffect(() => { const userAgent = window.navigator.userAgent; const isMobile = /iPhone|iPad|iPod|Android/i.test(userAgent); + let detectedPlatform = ""; - if (isMobile) setIsMobile(isMobile); + if (isMobile) { + setIsMobile(isMobile) + } else { + if (userAgent.indexOf("Win") !== -1) { + detectedPlatform = "Windows"; + } else if (userAgent.indexOf("Mac") !== -1) { + detectedPlatform = "MacOS"; + } else if (userAgent.indexOf("Linux") !== -1) { + detectedPlatform = "Linux"; + } else { + detectedPlatform = "Unknown"; + } + }; + setPlatform(detectedPlatform); }, []); - return { isMobile }; + return { isMobile, platform }; };