[WEB-1311] fix: Issue link copy shortcut macOS (#4455)

* chore: issue link copy shortcut in macos

* chore: dynamic shortcut key render in shortcut pop up

* chore: changing button depending on the os

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") {

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> = (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> = (props) => {
                 {category.shortcuts.map((shortcut) => (
                   <div key={shortcut.keys} className="mt-1">
                     <div className="flex items-center justify-between">
-                      <h4 className="text-xs text-custom-text-200">{shortcut.description}</h4>
+                      <h4 className="text-xs text-custom-text-200 text-left">{shortcut.description}</h4>
                       <div className="flex items-center gap-x-1.5">
                         {shortcut.keys.split(",").map((key) => (
                           <div key={key} className="flex items-center gap-1">
                             {key === "Ctrl" ? (
-                              <div className="grid h-6 min-w-[1.5rem] place-items-center rounded-sm border-[0.5px] border-custom-border-200 bg-custom-background-90 px-1.5">
+                              <div className="grid h-6 min-w-[1.5rem] place-items-center rounded-sm border-[0.5px] border-custom-border-200 bg-custom-background-90 px-1.5 text-[10px] text-custom-text-200">
-                                <Command className="h-2.5 w-2.5 text-custom-text-200" />
+                                { platform === "MacOS" ? <Command className="h-2.5 w-2.5 text-custom-text-200" /> : 'Ctrl'}
                               </div>
                             ) : (
                               <kbd className="grid h-6 min-w-[1.5rem] place-items-center rounded-sm border-[0.5px] border-custom-border-200 bg-custom-background-90 px-1.5 text-[10px] text-custom-text-200">

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 };
 };