fix: view modal overlapping (#2956)

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

@@ -55,22 +55,10 @@ export const CommandPalette: FC = observer(() => {
     toggleBulkDeleteIssueModal,
     isDeleteIssueModalOpen,
     toggleDeleteIssueModal,
-
+    isAnyModalOpen,
     createIssueStoreType,
   } = commandPalette;
 
-  const isAnyModalOpen = Boolean(
-    isCreateIssueModalOpen ||
-      isCreateCycleModalOpen ||
-      isCreatePageModalOpen ||
-      isCreateProjectModalOpen ||
-      isCreateModuleModalOpen ||
-      isCreateViewModalOpen ||
-      isShortcutModalOpen ||
-      isBulkDeleteIssueModalOpen ||
-      isDeleteIssueModalOpen
-  );
-
   const { setToastAlert } = useToast();
 
   const { data: issueDetails } = useSWR(

web/components/headers/project-views.tsx

@@ -1,4 +1,3 @@
-import { useState } from "react";
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 import { Plus } from "lucide-react";
@@ -15,18 +14,16 @@ export const ProjectViewsHeader: React.FC = observer(() => {
   // router
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
-  // states
-  const [createViewModal, setCreateViewModal] = useState(false);
 
-  const { project: projectStore } = useMobxStore();
+  const { project: projectStore, commandPalette } = useMobxStore();
   const { currentProjectDetails } = projectStore;
 
   return (
     <>
       {workspaceSlug && projectId && (
         <CreateUpdateProjectViewModal
-          isOpen={createViewModal}
-          onClose={() => setCreateViewModal(false)}
+          isOpen={commandPalette.isCreateViewModalOpen}
+          onClose={() => commandPalette.toggleCreateViewModal(false)}
           workspaceSlug={workspaceSlug.toString()}
           projectId={projectId.toString()}
         />
@@ -69,7 +66,7 @@ export const ProjectViewsHeader: React.FC = observer(() => {
               variant="primary"
               size="sm"
               prependIcon={<Plus className="h-3.5 w-3.5 stroke-2" />}
-              onClick={() => setCreateViewModal(true)}
+              onClick={() => commandPalette.toggleCreateViewModal(true)}
             >
               Create View
             </Button>

web/store/command-palette.store.ts

@@ -1,4 +1,4 @@
-import { observable, action, makeObservable } from "mobx";
+import { observable, action, makeObservable, computed } from "mobx";
 // types
 import { RootStore } from "./root";
 // services
@@ -30,6 +30,9 @@ export interface ICommandPaletteStore {
   isDeleteIssueModalOpen: boolean;
   isBulkDeleteIssueModalOpen: boolean;
 
+  // computed
+  isAnyModalOpen: boolean;
+
   toggleCommandPaletteModal: (value?: boolean) => void;
   toggleShortcutModal: (value?: boolean) => void;
   toggleCreateProjectModal: (value?: boolean) => void;
@@ -77,6 +80,7 @@ class CommandPaletteStore implements ICommandPaletteStore {
       isDeleteIssueModalOpen: observable.ref,
       isBulkDeleteIssueModalOpen: observable.ref,
       // computed
+      isAnyModalOpen: computed,
       // projectPages: computed,
       // action
       toggleCommandPaletteModal: action,
@@ -96,6 +100,20 @@ class CommandPaletteStore implements ICommandPaletteStore {
     this.pageService = new PageService();
   }
 
+  get isAnyModalOpen() {
+    return Boolean(
+      this.isCreateIssueModalOpen ||
+        this.isCreateCycleModalOpen ||
+        this.isCreatePageModalOpen ||
+        this.isCreateProjectModalOpen ||
+        this.isCreateModuleModalOpen ||
+        this.isCreateViewModalOpen ||
+        this.isShortcutModalOpen ||
+        this.isBulkDeleteIssueModalOpen ||
+        this.isDeleteIssueModalOpen
+    );
+  }
+
   toggleCommandPaletteModal = (value?: boolean) => {
     if (value) {
       this.isCommandPaletteOpen = value;