refactor: replace keyboard events with command palette store

web/components/command-palette/command-modal.tsx

@@ -3,6 +3,7 @@ import { useRouter } from "next/router";
 import useSWR, { mutate } from "swr";
 import { Command } from "cmdk";
 import { Dialog, Transition } from "@headlessui/react";
+import { observer } from "mobx-react-lite";
 import {
   FileText,
   FolderPlus,
@@ -16,12 +17,13 @@ import {
   UserMinus2,
   UserPlus2,
 } from "lucide-react";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
 // services
 import { WorkspaceService } from "services/workspace.service";
 import { IssueService } from "services/issue";
 // hooks
 import useDebounce from "hooks/use-debounce";
-import useUser from "hooks/use-user";
 import useToast from "hooks/use-toast";
 // components
 import {
@@ -61,11 +63,8 @@ type Props = {
 const workspaceService = new WorkspaceService();
 const issueService = new IssueService();
 
-export const CommandModal: React.FC<Props> = (props) => {
+export const CommandModal: React.FC<Props> = observer((props) => {
   const { deleteIssue, isPaletteOpen, closePalette } = props;
-  // router
-  const router = useRouter();
-  const { workspaceSlug, projectId, issueId } = router.query;
   // states
   const [placeholder, setPlaceholder] = useState("Type a command or search...");
   const [resultsCount, setResultsCount] = useState(0);
@@ -86,14 +85,19 @@ export const CommandModal: React.FC<Props> = (props) => {
   const [isWorkspaceLevel, setIsWorkspaceLevel] = useState(false);
   const [pages, setPages] = useState<string[]>([]);
 
+  const { user: userStore, commandPalette: commandPaletteStore } = useMobxStore();
+  const user = userStore.currentUser ?? undefined;
+
+  // router
+  const router = useRouter();
+  const { workspaceSlug, projectId, issueId } = router.query;
+
   const page = pages[pages.length - 1];
 
   const debouncedSearchTerm = useDebounce(searchTerm, 500);
 
   const { setToastAlert } = useToast();
 
-  const { user } = useUser();
-
   const { data: issueDetails } = useSWR(
     workspaceSlug && projectId && issueId ? ISSUE_DETAILS(issueId as string) : null,
     workspaceSlug && projectId && issueId
@@ -468,10 +472,7 @@ export const CommandModal: React.FC<Props> = (props) => {
                           <Command.Item
                             onSelect={() => {
                               closePalette();
-                              const e = new KeyboardEvent("keydown", {
-                                key: "c",
-                              });
-                              document.dispatchEvent(e);
+                              commandPaletteStore.toggleCreateIssueModal(true);
                             }}
                             className="focus:bg-custom-background-80"
                           >
@@ -488,10 +489,7 @@ export const CommandModal: React.FC<Props> = (props) => {
                             <Command.Item
                               onSelect={() => {
                                 closePalette();
-                                const e = new KeyboardEvent("keydown", {
-                                  key: "p",
-                                });
-                                document.dispatchEvent(e);
+                                commandPaletteStore.toggleCreateProjectModal(true);
                               }}
                               className="focus:outline-none"
                             >
@@ -510,10 +508,7 @@ export const CommandModal: React.FC<Props> = (props) => {
                               <Command.Item
                                 onSelect={() => {
                                   closePalette();
-                                  const e = new KeyboardEvent("keydown", {
-                                    key: "q",
-                                  });
-                                  document.dispatchEvent(e);
+                                  commandPaletteStore.toggleCreateCycleModal(true);
                                 }}
                                 className="focus:outline-none"
                               >
@@ -528,10 +523,7 @@ export const CommandModal: React.FC<Props> = (props) => {
                               <Command.Item
                                 onSelect={() => {
                                   closePalette();
-                                  const e = new KeyboardEvent("keydown", {
-                                    key: "m",
-                                  });
-                                  document.dispatchEvent(e);
+                                  commandPaletteStore.toggleCreateModuleModal(true);
                                 }}
                                 className="focus:outline-none"
                               >
@@ -546,10 +538,7 @@ export const CommandModal: React.FC<Props> = (props) => {
                               <Command.Item
                                 onSelect={() => {
                                   closePalette();
-                                  const e = new KeyboardEvent("keydown", {
-                                    key: "v",
-                                  });
-                                  document.dispatchEvent(e);
+                                  commandPaletteStore.toggleCreateViewModal(true);
                                 }}
                                 className="focus:outline-none"
                               >
@@ -564,10 +553,7 @@ export const CommandModal: React.FC<Props> = (props) => {
                               <Command.Item
                                 onSelect={() => {
                                   closePalette();
-                                  const e = new KeyboardEvent("keydown", {
-                                    key: "d",
-                                  });
-                                  document.dispatchEvent(e);
+                                  commandPaletteStore.toggleCreatePageModal(true);
                                 }}
                                 className="focus:outline-none"
                               >
@@ -621,10 +607,7 @@ export const CommandModal: React.FC<Props> = (props) => {
                           <Command.Item
                             onSelect={() => {
                               closePalette();
-                              const e = new KeyboardEvent("keydown", {
-                                key: "h",
-                              });
-                              document.dispatchEvent(e);
+                              commandPaletteStore.toggleShortcutModal(true);
                             }}
                             className="focus:outline-none"
                           >
@@ -762,4 +745,4 @@ export const CommandModal: React.FC<Props> = (props) => {
       </Dialog>
     </Transition.Root>
   );
-};
+});

web/components/cycles/active-cycle-details.tsx

@@ -1,10 +1,12 @@
 import { MouseEvent } from "react";
 import Link from "next/link";
 import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
 import useSWR from "swr";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
 // hooks
 import useToast from "hooks/use-toast";
-import { useMobxStore } from "lib/mobx/store-provider";
 // ui
 import { SingleProgressStats } from "components/core";
 import {
@@ -25,7 +27,6 @@ import { ActiveCycleProgressStats } from "components/cycles";
 import { ViewIssueLabel } from "components/issues";
 // icons
 import { AlarmClock, AlertTriangle, ArrowRight, CalendarDays, Star, Target } from "lucide-react";
-
 // helpers
 import { getDateRangeStatus, renderShortDateWithYearFormat, findHowManyDaysLeft } from "helpers/date-time.helper";
 import { truncateText } from "helpers/string.helper";
@@ -65,12 +66,12 @@ interface IActiveCycleDetails {
   projectId: string;
 }
 
-export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = (props) => {
+export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = observer((props) => {
   const router = useRouter();
 
   const { workspaceSlug, projectId } = props;
 
-  const { cycle: cycleStore } = useMobxStore();
+  const { cycle: cycleStore, commandPalette: commandPaletteStore } = useMobxStore();
 
   const { setToastAlert } = useToast();
 
@@ -117,12 +118,7 @@ export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = (props) => {
           <button
             type="button"
             className="text-custom-primary-100 text-sm outline-none"
-            onClick={() => {
-              const e = new KeyboardEvent("keydown", {
-                key: "q",
-              });
-              document.dispatchEvent(e);
-            }}
+            onClick={() => commandPaletteStore.toggleCreateCycleModal(true)}
           >
             Create a new cycle
           </button>
@@ -485,4 +481,4 @@ export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = (props) => {
       </div>
     </div>
   );
-};
+});

web/components/cycles/cycles-board.tsx

@@ -1,8 +1,11 @@
 import { FC } from "react";
-// types
-import { ICycle } from "types";
+import { observer } from "mobx-react-lite";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
 // components
 import { CyclePeekOverview, CyclesBoardCard } from "components/cycles";
+// types
+import { ICycle } from "types";
 
 export interface ICyclesBoard {
   cycles: ICycle[];
@@ -12,9 +15,11 @@ export interface ICyclesBoard {
   peekCycle: string;
 }
 
-export const CyclesBoard: FC<ICyclesBoard> = (props) => {
+export const CyclesBoard: FC<ICyclesBoard> = observer((props) => {
   const { cycles, filter, workspaceSlug, projectId, peekCycle } = props;
 
+  const { commandPalette: commandPaletteStore } = useMobxStore();
+
   return (
     <>
       {cycles.length > 0 ? (
@@ -53,12 +58,7 @@ export const CyclesBoard: FC<ICyclesBoard> = (props) => {
             <button
               type="button"
               className="text-custom-primary-100 text-sm outline-none"
-              onClick={() => {
-                const e = new KeyboardEvent("keydown", {
-                  key: "q",
-                });
-                document.dispatchEvent(e);
-              }}
+              onClick={() => commandPaletteStore.toggleCreateCycleModal(true)}
             >
               Create a new cycle
             </button>
@@ -67,4 +67,4 @@ export const CyclesBoard: FC<ICyclesBoard> = (props) => {
       )}
     </>
   );
-};
+});

web/components/cycles/cycles-list.tsx

@@ -1,7 +1,9 @@
 import { FC } from "react";
+import { observer } from "mobx-react-lite";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
 // components
 import { CyclePeekOverview, CyclesListItem } from "components/cycles";
-
 // ui
 import { Loader } from "@plane/ui";
 // types
@@ -14,9 +16,11 @@ export interface ICyclesList {
   projectId: string;
 }
 
-export const CyclesList: FC<ICyclesList> = (props) => {
+export const CyclesList: FC<ICyclesList> = observer((props) => {
   const { cycles, filter, workspaceSlug, projectId } = props;
 
+  const { commandPalette: commandPaletteStore } = useMobxStore();
+
   return (
     <>
       {cycles ? (
@@ -53,12 +57,7 @@ export const CyclesList: FC<ICyclesList> = (props) => {
                 <button
                   type="button"
                   className="text-custom-primary-100 text-sm outline-none"
-                  onClick={() => {
-                    const e = new KeyboardEvent("keydown", {
-                      key: "q",
-                    });
-                    document.dispatchEvent(e);
-                  }}
+                  onClick={() => commandPaletteStore.toggleCreateCycleModal(true)}
                 >
                   Create a new cycle
                 </button>
@@ -75,4 +74,4 @@ export const CyclesList: FC<ICyclesList> = (props) => {
       )}
     </>
   );
-};
+});

web/components/cycles/sidebar.tsx

@@ -317,11 +317,11 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
                 <LinkIcon className="h-3 w-3 text-custom-text-300" />
               </button>
               {!isCompleted && (
-                <CustomMenu width="lg" ellipsis>
+                <CustomMenu width="lg" placement="bottom-end" ellipsis>
                   <CustomMenu.MenuItem onClick={() => setCycleDeleteModal(true)}>
                     <span className="flex items-center justify-start gap-2">
-                      <Trash2 className="h-4 w-4" />
-                      <span>Delete</span>
+                      <Trash2 className="h-3 w-3" />
+                      <span>Delete cycle</span>
                     </span>
                   </CustomMenu.MenuItem>
                 </CustomMenu>

web/components/headers/cycle-issues.tsx

@@ -31,6 +31,7 @@ export const CycleIssuesHeader: React.FC = observer(() => {
     cycle: cycleStore,
     cycleIssueFilter: cycleIssueFilterStore,
     project: projectStore,
+    commandPalette: commandPaletteStore,
   } = useMobxStore();
   const { currentProjectDetails } = projectStore;
 
@@ -139,7 +140,6 @@ export const CycleIssuesHeader: React.FC = observer(() => {
               type="component"
               component={
                 <CustomMenu
-                  placement="bottom-start"
                   label={
                     <>
                       <ContrastIcon className="h-3 w-3" />
@@ -148,6 +148,7 @@ export const CycleIssuesHeader: React.FC = observer(() => {
                   }
                   className="ml-1.5 flex-shrink-0"
                   width="auto"
+                  placement="bottom-start"
                 >
                   {cyclesList?.map((cycle) => (
                     <CustomMenu.MenuItem
@@ -194,16 +195,7 @@ export const CycleIssuesHeader: React.FC = observer(() => {
           <Button onClick={() => setAnalyticsModal(true)} variant="neutral-primary" size="sm">
             Analytics
           </Button>
-          <Button
-            onClick={() => {
-              const e = new KeyboardEvent("keydown", {
-                key: "c",
-              });
-              document.dispatchEvent(e);
-            }}
-            size="sm"
-            prependIcon={<Plus />}
-          >
+          <Button onClick={() => commandPaletteStore.toggleCreateIssueModal(true)} size="sm" prependIcon={<Plus />}>
             Add Issue
           </Button>
           <button

web/components/headers/cycles.tsx

@@ -1,22 +1,20 @@
 import { FC } from "react";
 import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
 import { Plus } from "lucide-react";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
 // ui
 import { Breadcrumbs, Button, ContrastIcon } from "@plane/ui";
 // helpers
 import { renderEmoji } from "helpers/emoji.helper";
-// hooks
-import { useMobxStore } from "lib/mobx/store-provider";
-
-export interface ICyclesHeader {}
 
-export const CyclesHeader: FC<ICyclesHeader> = (props) => {
-  const {} = props;
+export const CyclesHeader: FC = observer(() => {
   // router
   const router = useRouter();
   const { workspaceSlug } = router.query;
   // store
-  const { project: projectStore } = useMobxStore();
+  const { project: projectStore, commandPalette: commandPaletteStore } = useMobxStore();
   const { currentProjectDetails } = projectStore;
 
   return (
@@ -54,14 +52,11 @@ export const CyclesHeader: FC<ICyclesHeader> = (props) => {
         <Button
           variant="primary"
           prependIcon={<Plus />}
-          onClick={() => {
-            const e = new KeyboardEvent("keydown", { key: "q" });
-            document.dispatchEvent(e);
-          }}
+          onClick={() => commandPaletteStore.toggleCreateCycleModal(true)}
         >
           Add Cycle
         </Button>
       </div>
     </div>
   );
-};
+});