feat: init

apps/web/core/components/command-palette/actions/help-actions.tsx

@@ -0,0 +1,85 @@
+"use client";
+import { Command } from "cmdk";
+import { observer } from "mobx-react";
+import { GithubIcon, MessageSquare, Rocket } from "lucide-react";
+// ui
+import { DiscordIcon, PageIcon } from "@plane/propel/icons";
+// hooks
+import { useCommandPalette } from "@/hooks/store/use-command-palette";
+import { useTransient } from "@/hooks/store/use-transient";
+
+type Props = {
+  closePalette: () => void;
+};
+
+export const CommandPaletteHelpActions: React.FC<Props> = observer((props) => {
+  const { closePalette } = props;
+  // hooks
+  const { toggleShortcutModal } = useCommandPalette();
+  const { toggleIntercom } = useTransient();
+
+  return (
+    <Command.Group heading="Help">
+      <Command.Item
+        onSelect={() => {
+          closePalette();
+          toggleShortcutModal(true);
+        }}
+        className="focus:outline-none"
+      >
+        <div className="flex items-center gap-2 text-custom-text-200">
+          <Rocket className="h-3.5 w-3.5" />
+          Open keyboard shortcuts
+        </div>
+      </Command.Item>
+      <Command.Item
+        onSelect={() => {
+          closePalette();
+          window.open("https://docs.plane.so/", "_blank");
+        }}
+        className="focus:outline-none"
+      >
+        <div className="flex items-center gap-2 text-custom-text-200">
+          <PageIcon className="h-3.5 w-3.5" />
+          Open Plane documentation
+        </div>
+      </Command.Item>
+      <Command.Item
+        onSelect={() => {
+          closePalette();
+          window.open("https://discord.com/invite/A92xrEGCge", "_blank");
+        }}
+        className="focus:outline-none"
+      >
+        <div className="flex items-center gap-2 text-custom-text-200">
+          <DiscordIcon className="h-4 w-4" color="rgb(var(--color-text-200))" />
+          Join our Discord
+        </div>
+      </Command.Item>
+      <Command.Item
+        onSelect={() => {
+          closePalette();
+          window.open("https://github.com/makeplane/plane/issues/new/choose", "_blank");
+        }}
+        className="focus:outline-none"
+      >
+        <div className="flex items-center gap-2 text-custom-text-200">
+          <GithubIcon className="h-4 w-4" color="rgb(var(--color-text-200))" />
+          Report a bug
+        </div>
+      </Command.Item>
+      <Command.Item
+        onSelect={() => {
+          closePalette();
+          toggleIntercom(true);
+        }}
+        className="focus:outline-none"
+      >
+        <div className="flex items-center gap-2 text-custom-text-200">
+          <MessageSquare className="h-3.5 w-3.5" />
+          Chat with us
+        </div>
+      </Command.Item>
+    </Command.Group>
+  );
+});

apps/web/core/components/command-palette/actions/helper.tsx

@@ -0,0 +1,25 @@
+import { store } from "@/lib/store-context";
+
+export const openProjectAndScrollToSidebar = (itemProjectId: string | undefined) => {
+  if (!itemProjectId) {
+    console.warn("No project id provided. Cannot open project and scroll to sidebar.");
+    return;
+  }
+  // open the project list
+  store.commandPalette.toggleProjectListOpen(itemProjectId, true);
+  // scroll to the element
+  const scrollElementId = `sidebar-${itemProjectId}-JOINED`;
+  const scrollElement = document.getElementById(scrollElementId);
+  // if the element exists, scroll to it
+  if (scrollElement) {
+    setTimeout(() => {
+      scrollElement.scrollIntoView({ behavior: "smooth", block: "start" });
+      // Restart the highlight animation every time
+      scrollElement.style.animation = "none";
+      // Trigger a reflow to ensure the animation is restarted
+      void scrollElement.offsetWidth;
+      // Restart the highlight animation
+      scrollElement.style.animation = "highlight 2s ease-in-out";
+    });
+  }
+};

apps/web/core/components/command-palette/actions/index.ts

@@ -0,0 +1,6 @@
+export * from "./issue-actions";
+export * from "./help-actions";
+export * from "./project-actions";
+export * from "./search-results";
+export * from "./theme-actions";
+export * from "./workspace-settings-actions";

apps/web/core/components/command-palette/actions/issue-actions/actions-list.tsx

@@ -0,0 +1,164 @@
+"use client";
+
+import { Command } from "cmdk";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import { LinkIcon, Signal, Trash2, UserMinus2, UserPlus2, Users } from "lucide-react";
+import { DoubleCircleIcon } from "@plane/propel/icons";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { TIssue } from "@plane/types";
+import { EIssueServiceType } from "@plane/types";
+// hooks
+// helpers
+import { copyTextToClipboard } from "@plane/utils";
+// hooks
+import { useCommandPalette } from "@/hooks/store/use-command-palette";
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+import { useUser } from "@/hooks/store/user";
+
+type Props = {
+  closePalette: () => void;
+  issueDetails: TIssue | undefined;
+  pages: string[];
+  setPages: (pages: string[]) => void;
+  setPlaceholder: (placeholder: string) => void;
+  setSearchTerm: (searchTerm: string) => void;
+};
+
+export const CommandPaletteIssueActions: React.FC<Props> = observer((props) => {
+  const { closePalette, issueDetails, pages, setPages, setPlaceholder, setSearchTerm } = props;
+  // router
+  const { workspaceSlug } = useParams();
+  // hooks
+  const { updateIssue } = useIssueDetail(issueDetails?.is_epic ? EIssueServiceType.EPICS : EIssueServiceType.ISSUES);
+  const { toggleCommandPaletteModal, toggleDeleteIssueModal } = useCommandPalette();
+  const { data: currentUser } = useUser();
+  // derived values
+  const issueId = issueDetails?.id;
+  const projectId = issueDetails?.project_id;
+
+  const handleUpdateIssue = async (formData: Partial<TIssue>) => {
+    if (!workspaceSlug || !projectId || !issueDetails) return;
+
+    const payload = { ...formData };
+    await updateIssue(workspaceSlug.toString(), projectId.toString(), issueDetails.id, payload).catch((e) => {
+      console.error(e);
+    });
+  };
+
+  const handleIssueAssignees = (assignee: string) => {
+    if (!issueDetails || !assignee) return;
+
+    closePalette();
+    const updatedAssignees = issueDetails.assignee_ids ?? [];
+
+    if (updatedAssignees.includes(assignee)) updatedAssignees.splice(updatedAssignees.indexOf(assignee), 1);
+    else updatedAssignees.push(assignee);
+
+    handleUpdateIssue({ assignee_ids: updatedAssignees });
+  };
+
+  const deleteIssue = () => {
+    toggleCommandPaletteModal(false);
+    toggleDeleteIssueModal(true);
+  };
+
+  const copyIssueUrlToClipboard = () => {
+    if (!issueId) return;
+
+    const url = new URL(window.location.href);
+    copyTextToClipboard(url.href)
+      .then(() => {
+        setToast({ type: TOAST_TYPE.SUCCESS, title: "Copied to clipboard" });
+      })
+      .catch(() => {
+        setToast({ type: TOAST_TYPE.ERROR, title: "Some error occurred" });
+      });
+  };
+
+  const actionHeading = issueDetails?.is_epic ? "Epic actions" : "Work item actions";
+  const entityType = issueDetails?.is_epic ? "epic" : "work item";
+
+  return (
+    <Command.Group heading={actionHeading}>
+      <Command.Item
+        onSelect={() => {
+          setPlaceholder("Change state...");
+          setSearchTerm("");
+          setPages([...pages, "change-issue-state"]);
+        }}
+        className="focus:outline-none"
+      >
+        <div className="flex items-center gap-2 text-custom-text-200">
+          <DoubleCircleIcon className="h-3.5 w-3.5" />
+          Change state...
+        </div>
+      </Command.Item>
+      <Command.Item
+        onSelect={() => {
+          setPlaceholder("Change priority...");
+          setSearchTerm("");
+          setPages([...pages, "change-issue-priority"]);
+        }}
+        className="focus:outline-none"
+      >
+        <div className="flex items-center gap-2 text-custom-text-200">
+          <Signal className="h-3.5 w-3.5" />
+          Change priority...
+        </div>
+      </Command.Item>
+      <Command.Item
+        onSelect={() => {
+          setPlaceholder("Assign to...");
+          setSearchTerm("");
+          setPages([...pages, "change-issue-assignee"]);
+        }}
+        className="focus:outline-none"
+      >
+        <div className="flex items-center gap-2 text-custom-text-200">
+          <Users className="h-3.5 w-3.5" />
+          Assign to...
+        </div>
+      </Command.Item>
+      <Command.Item
+        onSelect={() => {
+          handleIssueAssignees(currentUser?.id ?? "");
+          setSearchTerm("");
+        }}
+        className="focus:outline-none"
+      >
+        <div className="flex items-center gap-2 text-custom-text-200">
+          {issueDetails?.assignee_ids.includes(currentUser?.id ?? "") ? (
+            <>
+              <UserMinus2 className="h-3.5 w-3.5" />
+              Un-assign from me
+            </>
+          ) : (
+            <>
+              <UserPlus2 className="h-3.5 w-3.5" />
+              Assign to me
+            </>
+          )}
+        </div>
+      </Command.Item>
+      <Command.Item onSelect={deleteIssue} className="focus:outline-none">
+        <div className="flex items-center gap-2 text-custom-text-200">
+          <Trash2 className="h-3.5 w-3.5" />
+          {`Delete ${entityType}`}
+        </div>
+      </Command.Item>
+      <Command.Item
+        onSelect={() => {
+          closePalette();
+          copyIssueUrlToClipboard();
+        }}
+        className="focus:outline-none"
+      >
+        <div className="flex items-center gap-2 text-custom-text-200">
+          <LinkIcon className="h-3.5 w-3.5" />
+          {`Copy ${entityType} URL`}
+        </div>
+      </Command.Item>
+    </Command.Group>
+  );
+});

apps/web/core/components/command-palette/actions/issue-actions/change-assignee.tsx

@@ -0,0 +1,98 @@
+"use client";
+
+import { Command } from "cmdk";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import { Check } from "lucide-react";
+// plane types
+import type { TIssue } from "@plane/types";
+import { EIssueServiceType } from "@plane/types";
+// plane ui
+import { Avatar } from "@plane/ui";
+// helpers
+import { getFileURL } from "@plane/utils";
+// hooks
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+import { useMember } from "@/hooks/store/use-member";
+
+type Props = { closePalette: () => void; issue: TIssue };
+
+export const ChangeIssueAssignee: React.FC<Props> = observer((props) => {
+  const { closePalette, issue } = props;
+  // router params
+  const { workspaceSlug } = useParams();
+  // store
+  const { updateIssue } = useIssueDetail(issue?.is_epic ? EIssueServiceType.EPICS : EIssueServiceType.ISSUES);
+  const {
+    project: { getProjectMemberIds, getProjectMemberDetails },
+  } = useMember();
+  // derived values
+  const projectId = issue?.project_id ?? "";
+  const projectMemberIds = getProjectMemberIds(projectId, false);
+
+  const options =
+    projectMemberIds
+      ?.map((userId) => {
+        if (!projectId) return;
+        const memberDetails = getProjectMemberDetails(userId, projectId.toString());
+
+        return {
+          value: `${memberDetails?.member?.id}`,
+          query: `${memberDetails?.member?.display_name}`,
+          content: (
+            <>
+              <div className="flex items-center gap-2">
+                <Avatar
+                  name={memberDetails?.member?.display_name}
+                  src={getFileURL(memberDetails?.member?.avatar_url ?? "")}
+                  showTooltip={false}
+                />
+                {memberDetails?.member?.display_name}
+              </div>
+              {issue.assignee_ids.includes(memberDetails?.member?.id ?? "") && (
+                <div>
+                  <Check className="h-3 w-3" />
+                </div>
+              )}
+            </>
+          ),
+        };
+      })
+      .filter((o) => o !== undefined) ?? [];
+
+  const handleUpdateIssue = async (formData: Partial<TIssue>) => {
+    if (!workspaceSlug || !projectId || !issue) return;
+
+    const payload = { ...formData };
+    await updateIssue(workspaceSlug.toString(), projectId.toString(), issue.id, payload).catch((e) => {
+      console.error(e);
+    });
+  };
+
+  const handleIssueAssignees = (assignee: string) => {
+    const updatedAssignees = issue.assignee_ids ?? [];
+
+    if (updatedAssignees.includes(assignee)) updatedAssignees.splice(updatedAssignees.indexOf(assignee), 1);
+    else updatedAssignees.push(assignee);
+
+    handleUpdateIssue({ assignee_ids: updatedAssignees });
+    closePalette();
+  };
+
+  return (
+    <>
+      {options.map(
+        (option) =>
+          option && (
+            <Command.Item
+              key={option.value}
+              onSelect={() => handleIssueAssignees(option.value)}
+              className="focus:outline-none"
+            >
+              {option.content}
+            </Command.Item>
+          )
+      )}
+    </>
+  );
+});

apps/web/core/components/command-palette/actions/issue-actions/change-priority.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import { Command } from "cmdk";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import { Check } from "lucide-react";
+// plane constants
+import { ISSUE_PRIORITIES } from "@plane/constants";
+// plane types
+import { PriorityIcon } from "@plane/propel/icons";
+import type { TIssue, TIssuePriorities } from "@plane/types";
+import { EIssueServiceType } from "@plane/types";
+// mobx store
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+// ui
+// types
+// constants
+
+type Props = { closePalette: () => void; issue: TIssue };
+
+export const ChangeIssuePriority: React.FC<Props> = observer((props) => {
+  const { closePalette, issue } = props;
+  // router params
+  const { workspaceSlug } = useParams();
+  // store hooks
+  const { updateIssue } = useIssueDetail(issue?.is_epic ? EIssueServiceType.EPICS : EIssueServiceType.ISSUES);
+  // derived values
+  const projectId = issue?.project_id;
+
+  const submitChanges = async (formData: Partial<TIssue>) => {
+    if (!workspaceSlug || !projectId || !issue) return;
+
+    const payload = { ...formData };
+    await updateIssue(workspaceSlug.toString(), projectId.toString(), issue.id, payload).catch((e) => {
+      console.error(e);
+    });
+  };
+
+  const handleIssueState = (priority: TIssuePriorities) => {
+    submitChanges({ priority });
+    closePalette();
+  };
+
+  return (
+    <>
+      {ISSUE_PRIORITIES.map((priority) => (
+        <Command.Item key={priority.key} onSelect={() => handleIssueState(priority.key)} className="focus:outline-none">
+          <div className="flex items-center space-x-3">
+            <PriorityIcon priority={priority.key} />
+            <span className="capitalize">{priority.title ?? "None"}</span>
+          </div>
+          <div>{priority.key === issue.priority && <Check className="h-3 w-3" />}</div>
+        </Command.Item>
+      ))}
+    </>
+  );
+});

apps/web/core/components/command-palette/actions/issue-actions/change-state.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// plane imports
+import type { TIssue } from "@plane/types";
+import { EIssueServiceType } from "@plane/types";
+// store hooks
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+// plane web imports
+import { ChangeWorkItemStateList } from "@/plane-web/components/command-palette/actions/work-item-actions";
+
+type Props = { closePalette: () => void; issue: TIssue };
+
+export const ChangeIssueState: React.FC<Props> = observer((props) => {
+  const { closePalette, issue } = props;
+  // router params
+  const { workspaceSlug } = useParams();
+  // store hooks
+  const { updateIssue } = useIssueDetail(issue?.is_epic ? EIssueServiceType.EPICS : EIssueServiceType.ISSUES);
+  // derived values
+  const projectId = issue?.project_id;
+  const currentStateId = issue?.state_id;
+
+  const submitChanges = async (formData: Partial<TIssue>) => {
+    if (!workspaceSlug || !projectId || !issue) return;
+
+    const payload = { ...formData };
+    await updateIssue(workspaceSlug.toString(), projectId.toString(), issue.id, payload).catch((e) => {
+      console.error(e);
+    });
+  };
+
+  const handleIssueState = (stateId: string) => {
+    submitChanges({ state_id: stateId });
+    closePalette();
+  };
+
+  return (
+    <ChangeWorkItemStateList
+      projectId={projectId}
+      currentStateId={currentStateId}
+      handleStateChange={handleIssueState}
+    />
+  );
+});

apps/web/core/components/command-palette/actions/issue-actions/index.ts

@@ -0,0 +1,4 @@
+export * from "./actions-list";
+export * from "./change-state";
+export * from "./change-priority";
+export * from "./change-assignee";

apps/web/core/components/command-palette/actions/project-actions.tsx

@@ -0,0 +1,94 @@
+"use client";
+
+import { Command } from "cmdk";
+// hooks
+import {
+  CYCLE_TRACKER_ELEMENTS,
+  MODULE_TRACKER_ELEMENTS,
+  PROJECT_PAGE_TRACKER_ELEMENTS,
+  PROJECT_VIEW_TRACKER_ELEMENTS,
+} from "@plane/constants";
+import { CycleIcon, ModuleIcon, PageIcon, ViewsIcon } from "@plane/propel/icons";
+// hooks
+import { useCommandPalette } from "@/hooks/store/use-command-palette";
+// ui
+
+type Props = {
+  closePalette: () => void;
+};
+
+export const CommandPaletteProjectActions: React.FC<Props> = (props) => {
+  const { closePalette } = props;
+  // store hooks
+  const { toggleCreateCycleModal, toggleCreateModuleModal, toggleCreatePageModal, toggleCreateViewModal } =
+    useCommandPalette();
+
+  return (
+    <>
+      <Command.Group heading="Cycle">
+        <Command.Item
+          data-ph-element={CYCLE_TRACKER_ELEMENTS.COMMAND_PALETTE_ADD_ITEM}
+          onSelect={() => {
+            closePalette();
+            toggleCreateCycleModal(true);
+          }}
+          className="focus:outline-none"
+        >
+          <div className="flex items-center gap-2 text-custom-text-200">
+            <CycleIcon className="h-3.5 w-3.5" />
+            Create new cycle
+          </div>
+          <kbd>Q</kbd>
+        </Command.Item>
+      </Command.Group>
+      <Command.Group heading="Module">
+        <Command.Item
+          data-ph-element={MODULE_TRACKER_ELEMENTS.COMMAND_PALETTE_ADD_ITEM}
+          onSelect={() => {
+            closePalette();
+            toggleCreateModuleModal(true);
+          }}
+          className="focus:outline-none"
+        >
+          <div className="flex items-center gap-2 text-custom-text-200">
+            <ModuleIcon className="h-3.5 w-3.5" />
+            Create new module
+          </div>
+          <kbd>M</kbd>
+        </Command.Item>
+      </Command.Group>
+      <Command.Group heading="View">
+        <Command.Item
+          data-ph-element={PROJECT_VIEW_TRACKER_ELEMENTS.COMMAND_PALETTE_ADD_ITEM}
+          onSelect={() => {
+            closePalette();
+            toggleCreateViewModal(true);
+          }}
+          className="focus:outline-none"
+        >
+          <div className="flex items-center gap-2 text-custom-text-200">
+            <ViewsIcon className="h-3.5 w-3.5" />
+            Create new view
+          </div>
+          <kbd>V</kbd>
+        </Command.Item>
+      </Command.Group>
+      <Command.Group heading="Page">
+        <Command.Item
+          data-ph-element={PROJECT_PAGE_TRACKER_ELEMENTS.COMMAND_PALETTE_CREATE_BUTTON}
+          onSelect={() => {
+            closePalette();
+            toggleCreatePageModal({ isOpen: true });
+          }}
+          className="focus:outline-none"
+        >
+          <div className="flex items-center gap-2 text-custom-text-200">
+            <PageIcon className="h-3.5 w-3.5" />
+            Create new page
+          </div>
+          <kbd>D</kbd>
+        </Command.Item>
+      </Command.Group>
+    </>
+  );
+};

apps/web/core/components/command-palette/actions/search-results.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import { Command } from "cmdk";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// plane imports
+import type { IWorkspaceSearchResults } from "@plane/types";
+// hooks
+import { useAppRouter } from "@/hooks/use-app-router";
+// plane web imports
+import { commandGroups } from "@/plane-web/components/command-palette";
+// helpers
+import { openProjectAndScrollToSidebar } from "./helper";
+
+type Props = {
+  closePalette: () => void;
+  results: IWorkspaceSearchResults;
+};
+
+export const CommandPaletteSearchResults: React.FC<Props> = observer((props) => {
+  const { closePalette, results } = props;
+  // router
+  const router = useAppRouter();
+  const { projectId: routerProjectId } = useParams();
+  // derived values
+  const projectId = routerProjectId?.toString();
+
+  return (
+    <>
+      {Object.keys(results.results).map((key) => {
+        // TODO: add type for results
+        const section = (results.results as any)[key];
+        const currentSection = commandGroups[key];
+        if (!currentSection) return null;
+        if (section.length > 0) {
+          return (
+            <Command.Group key={key} heading={`${currentSection.title} search`}>
+              {section.map((item: any) => (
+                <Command.Item
+                  key={item.id}
+                  onSelect={() => {
+                    closePalette();
+                    router.push(currentSection.path(item, projectId));
+                    const itemProjectId =
+                      item?.project_id ||
+                      (Array.isArray(item?.project_ids) && item?.project_ids?.length > 0
+                        ? item?.project_ids[0]
+                        : undefined);
+                    if (itemProjectId) openProjectAndScrollToSidebar(itemProjectId);
+                  }}
+                  value={`${key}-${item?.id}-${item.name}-${item.project__identifier ?? ""}-${item.sequence_id ?? ""}`}
+                  className="focus:outline-none"
+                >
+                  <div className="flex items-center gap-2 overflow-hidden text-custom-text-200">
+                    {currentSection.icon}
+                    <p className="block flex-1 truncate">{currentSection.itemName(item)}</p>
+                  </div>
+                </Command.Item>
+              ))}
+            </Command.Group>
+          );
+        }
+      })}
+    </>
+  );
+});

apps/web/core/components/command-palette/actions/theme-actions.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import type { FC } from "react";
+import React, { useEffect, useState } from "react";
+import { Command } from "cmdk";
+import { observer } from "mobx-react";
+import { useTheme } from "next-themes";
+import { Settings } from "lucide-react";
+// plane imports
+import { THEME_OPTIONS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+// hooks
+import { useUserProfile } from "@/hooks/store/user";
+
+type Props = {
+  closePalette: () => void;
+};
+
+export const CommandPaletteThemeActions: FC<Props> = observer((props) => {
+  const { closePalette } = props;
+  const { setTheme } = useTheme();
+  // hooks
+  const { updateUserTheme } = useUserProfile();
+  const { t } = useTranslation();
+  // states
+  const [mounted, setMounted] = useState(false);
+
+  const updateTheme = async (newTheme: string) => {
+    setTheme(newTheme);
+    return updateUserTheme({ theme: newTheme }).catch(() => {
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: "Failed to save user theme settings!",
+      });
+    });
+  };
+
+  // useEffect only runs on the client, so now we can safely show the UI
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) return null;
+
+  return (
+    <>
+      {THEME_OPTIONS.map((theme) => (
+        <Command.Item
+          key={theme.value}
+          onSelect={() => {
+            updateTheme(theme.value);
+            closePalette();
+          }}
+          className="focus:outline-none"
+        >
+          <div className="flex items-center gap-2 text-custom-text-200">
+            <Settings className="h-4 w-4 text-custom-text-200" />
+            {t(theme.i18n_label)}
+          </div>
+        </Command.Item>
+      ))}
+    </>
+  );
+});

apps/web/core/components/command-palette/actions/workspace-settings-actions.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+import { Command } from "cmdk";
+// hooks
+import Link from "next/link";
+import { useParams } from "next/navigation";
+import { WORKSPACE_SETTINGS_LINKS, EUserPermissionsLevel } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+// components
+import { SettingIcon } from "@/components/icons";
+// hooks
+import { useUserPermissions } from "@/hooks/store/user";
+import { useAppRouter } from "@/hooks/use-app-router";
+// plane wev constants
+// plane web helpers
+import { shouldRenderSettingLink } from "@/plane-web/helpers/workspace.helper";
+
+type Props = {
+  closePalette: () => void;
+};
+
+export const CommandPaletteWorkspaceSettingsActions: React.FC<Props> = (props) => {
+  const { closePalette } = props;
+  // router
+  const router = useAppRouter();
+  // router params
+  const { workspaceSlug } = useParams();
+  // mobx store
+  const { t } = useTranslation();
+  const { allowPermissions } = useUserPermissions();
+  // derived values
+
+  const redirect = (path: string) => {
+    closePalette();
+    router.push(path);
+  };
+
+  return (
+    <>
+      {WORKSPACE_SETTINGS_LINKS.map(
+        (setting) =>
+          allowPermissions(setting.access, EUserPermissionsLevel.WORKSPACE, workspaceSlug.toString()) &&
+          shouldRenderSettingLink(workspaceSlug.toString(), setting.key) && (
+            <Command.Item
+              key={setting.key}
+              onSelect={() => redirect(`/${workspaceSlug}${setting.href}`)}
+              className="focus:outline-none"
+            >
+              <Link href={`/${workspaceSlug}${setting.href}`}>
+                <div className="flex items-center gap-2 text-custom-text-200">
+                  <SettingIcon className="h-4 w-4 text-custom-text-200" />
+                  {t(setting.i18n_label)}
+                </div>
+              </Link>
+            </Command.Item>
+          )
+      )}
+    </>
+  );
+};

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

@@ -0,0 +1,492 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import { Command } from "cmdk";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import useSWR from "swr";
+import { CommandIcon, FolderPlus, Search, Settings, X } from "lucide-react";
+import { Dialog, Transition } from "@headlessui/react";
+// plane imports
+import {
+  EUserPermissions,
+  EUserPermissionsLevel,
+  PROJECT_TRACKER_ELEMENTS,
+  WORK_ITEM_TRACKER_ELEMENTS,
+  WORKSPACE_DEFAULT_SEARCH_RESULT,
+} from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { WorkItemsIcon } from "@plane/propel/icons";
+import type { IWorkspaceSearchResults } from "@plane/types";
+import { Loader, ToggleSwitch } from "@plane/ui";
+import { cn, getTabIndex } from "@plane/utils";
+// components
+import {
+  ChangeIssueAssignee,
+  ChangeIssuePriority,
+  ChangeIssueState,
+  CommandPaletteHelpActions,
+  CommandPaletteIssueActions,
+  CommandPaletteProjectActions,
+  CommandPaletteSearchResults,
+  CommandPaletteThemeActions,
+  CommandPaletteWorkspaceSettingsActions,
+} from "@/components/command-palette";
+import { SimpleEmptyState } from "@/components/empty-state/simple-empty-state-root";
+// helpers
+// hooks
+import { captureClick } from "@/helpers/event-tracker.helper";
+import { useCommandPalette } from "@/hooks/store/use-command-palette";
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+import { useProject } from "@/hooks/store/use-project";
+import { useUser, useUserPermissions } from "@/hooks/store/user";
+import { useAppRouter } from "@/hooks/use-app-router";
+import useDebounce from "@/hooks/use-debounce";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+// plane web components
+import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path";
+import { IssueIdentifier } from "@/plane-web/components/issues/issue-details/issue-identifier";
+// plane web services
+import { WorkspaceService } from "@/plane-web/services";
+
+const workspaceService = new WorkspaceService();
+
+export const CommandModal: React.FC = observer(() => {
+  // router
+  const router = useAppRouter();
+  const { workspaceSlug, projectId: routerProjectId, workItem } = useParams();
+  // states
+  const [placeholder, setPlaceholder] = useState("Type a command or search...");
+  const [resultsCount, setResultsCount] = useState(0);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isSearching, setIsSearching] = useState(false);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [results, setResults] = useState<IWorkspaceSearchResults>(WORKSPACE_DEFAULT_SEARCH_RESULT);
+  const [isWorkspaceLevel, setIsWorkspaceLevel] = useState(false);
+  const [pages, setPages] = useState<string[]>([]);
+  const [searchInIssue, setSearchInIssue] = useState(false);
+  // plane hooks
+  const { t } = useTranslation();
+  // hooks
+  const {
+    issue: { getIssueById },
+    fetchIssueWithIdentifier,
+  } = useIssueDetail();
+  const { workspaceProjectIds } = useProject();
+  const { platform, isMobile } = usePlatformOS();
+  const { canPerformAnyCreateAction } = useUser();
+  const { isCommandPaletteOpen, toggleCommandPaletteModal, toggleCreateIssueModal, toggleCreateProjectModal } =
+    useCommandPalette();
+  const { allowPermissions } = useUserPermissions();
+  const projectIdentifier = workItem?.toString().split("-")[0];
+  const sequence_id = workItem?.toString().split("-")[1];
+  // fetch work item details using identifier
+  const { data: workItemDetailsSWR } = useSWR(
+    workspaceSlug && workItem ? `ISSUE_DETAIL_${workspaceSlug}_${projectIdentifier}_${sequence_id}` : null,
+    workspaceSlug && workItem
+      ? () => fetchIssueWithIdentifier(workspaceSlug.toString(), projectIdentifier, sequence_id)
+      : null
+  );
+
+  // derived values
+  const issueDetails = workItemDetailsSWR ? getIssueById(workItemDetailsSWR?.id) : null;
+  const issueId = issueDetails?.id;
+  const projectId = issueDetails?.project_id ?? routerProjectId;
+  const page = pages[pages.length - 1];
+  const debouncedSearchTerm = useDebounce(searchTerm, 500);
+  const { baseTabIndex } = getTabIndex(undefined, isMobile);
+  const canPerformWorkspaceActions = allowPermissions(
+    [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
+    EUserPermissionsLevel.WORKSPACE
+  );
+  const resolvedPath = useResolvedAssetPath({ basePath: "/empty-state/search/search" });
+
+  useEffect(() => {
+    if (issueDetails && isCommandPaletteOpen) {
+      setSearchInIssue(true);
+    }
+  }, [issueDetails, isCommandPaletteOpen]);
+
+  useEffect(() => {
+    if (!projectId && !isWorkspaceLevel) {
+      setIsWorkspaceLevel(true);
+    } else {
+      setIsWorkspaceLevel(false);
+    }
+  }, [projectId]);
+
+  const closePalette = () => {
+    toggleCommandPaletteModal(false);
+  };
+
+  const createNewWorkspace = () => {
+    closePalette();
+    router.push("/create-workspace");
+  };
+
+  useEffect(
+    () => {
+      if (!workspaceSlug) return;
+
+      setIsLoading(true);
+
+      if (debouncedSearchTerm) {
+        setIsSearching(true);
+        workspaceService
+          .searchWorkspace(workspaceSlug.toString(), {
+            ...(projectId ? { project_id: projectId.toString() } : {}),
+            search: debouncedSearchTerm,
+            workspace_search: !projectId ? true : isWorkspaceLevel,
+          })
+          .then((results) => {
+            setResults(results);
+            const count = Object.keys(results.results).reduce(
+              (accumulator, key) => (results.results as any)[key].length + accumulator,
+              0
+            );
+            setResultsCount(count);
+          })
+          .finally(() => {
+            setIsLoading(false);
+            setIsSearching(false);
+          });
+      } else {
+        setResults(WORKSPACE_DEFAULT_SEARCH_RESULT);
+        setIsLoading(false);
+        setIsSearching(false);
+      }
+    },
+    [debouncedSearchTerm, isWorkspaceLevel, projectId, workspaceSlug] // Only call effect if debounced search term changes
+  );
+
+  return (
+    <Transition.Root show={isCommandPaletteOpen} afterLeave={() => setSearchTerm("")} as={React.Fragment}>
+      <Dialog
+        as="div"
+        className="relative z-30"
+        onClose={() => {
+          closePalette();
+          if (searchInIssue) {
+            setSearchInIssue(true);
+          }
+        }}
+      >
+        <Transition.Child
+          as={React.Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
+        </Transition.Child>
+
+        <div className="fixed inset-0 z-30 overflow-y-auto">
+          <div className="flex items-center justify-center p-4 sm:p-6 md:p-20">
+            <Transition.Child
+              as={React.Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enterTo="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            >
+              <Dialog.Panel className="relative flex w-full max-w-2xl transform flex-col items-center justify-center divide-y divide-custom-border-200 divide-opacity-10 rounded-lg bg-custom-background-100 shadow-custom-shadow-md transition-all">
+                <div className="w-full max-w-2xl">
+                  <Command
+                    filter={(value, search) => {
+                      if (value.toLowerCase().includes(search.toLowerCase())) return 1;
+                      return 0;
+                    }}
+                    shouldFilter={searchTerm.length > 0}
+                    onKeyDown={(e: any) => {
+                      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        closePalette();
+                        return;
+                      }
+
+                      if (e.key === "Tab") {
+                        e.preventDefault();
+                        const commandList = document.querySelector("[cmdk-list]");
+                        const items = commandList?.querySelectorAll("[cmdk-item]") || [];
+                        const selectedItem = commandList?.querySelector('[aria-selected="true"]');
+                        if (items.length === 0) return;
+
+                        const currentIndex = Array.from(items).indexOf(selectedItem as Element);
+                        let nextIndex;
+
+                        if (e.shiftKey) {
+                          nextIndex = currentIndex > 0 ? currentIndex - 1 : items.length - 1;
+                        } else {
+                          nextIndex = currentIndex < items.length - 1 ? currentIndex + 1 : 0;
+                        }
+
+                        const nextItem = items[nextIndex] as HTMLElement;
+                        if (nextItem) {
+                          nextItem.setAttribute("aria-selected", "true");
+                          selectedItem?.setAttribute("aria-selected", "false");
+                          nextItem.focus();
+                          nextItem.scrollIntoView({ behavior: "smooth", block: "nearest" });
+                        }
+                      }
+
+                      if (e.key === "Escape" && searchTerm) {
+                        e.preventDefault();
+                        setSearchTerm("");
+                      }
+
+                      if (e.key === "Escape" && !page && !searchTerm) {
+                        e.preventDefault();
+                        closePalette();
+                      }
+
+                      if (e.key === "Escape" || (e.key === "Backspace" && !searchTerm)) {
+                        e.preventDefault();
+                        setPages((pages) => pages.slice(0, -1));
+                        setPlaceholder("Type a command or search...");
+                      }
+                    }}
+                  >
+                    <div className="relative flex items-center px-4 border-0 border-b border-custom-border-200">
+                      <div className="flex items-center gap-2 flex-shrink-0">
+                        <Search
+                          className="h-4 w-4 text-custom-text-200 flex-shrink-0"
+                          aria-hidden="true"
+                          strokeWidth={2}
+                        />
+                        {searchInIssue && issueDetails && (
+                          <>
+                            <span className="flex items-center text-sm">Update in:</span>
+                            <span className="flex items-center gap-1 rounded px-1.5 py-1 text-sm bg-custom-primary-100/10 ">
+                              {issueDetails.project_id && (
+                                <IssueIdentifier
+                                  issueId={issueDetails.id}
+                                  projectId={issueDetails.project_id}
+                                  textContainerClassName="text-sm text-custom-primary-200"
+                                />
+                              )}
+                              <X
+                                size={12}
+                                strokeWidth={2}
+                                className="flex-shrink-0 cursor-pointer"
+                                onClick={() => {
+                                  setSearchInIssue(false);
+                                }}
+                              />
+                            </span>
+                          </>
+                        )}
+                      </div>
+                      <Command.Input
+                        className={cn(
+                          "w-full bg-transparent p-4 text-sm text-custom-text-100 outline-none placeholder:text-custom-text-400 focus:ring-0"
+                        )}
+                        placeholder={placeholder}
+                        value={searchTerm}
+                        onValueChange={(e) => setSearchTerm(e)}
+                        autoFocus
+                        tabIndex={baseTabIndex}
+                      />
+                    </div>
+
+                    <Command.List className="vertical-scrollbar scrollbar-sm max-h-96 overflow-scroll p-2">
+                      {searchTerm !== "" && (
+                        <h5 className="mx-[3px] my-4 text-xs text-custom-text-100">
+                          Search results for{" "}
+                          <span className="font-medium">
+                            {'"'}
+                            {searchTerm}
+                            {'"'}
+                          </span>{" "}
+                          in {!projectId || isWorkspaceLevel ? "workspace" : "project"}:
+                        </h5>
+                      )}
+
+                      {!isLoading && resultsCount === 0 && searchTerm !== "" && debouncedSearchTerm !== "" && (
+                        <div className="flex flex-col items-center justify-center px-3 py-8 text-center">
+                          <SimpleEmptyState title={t("command_k.empty_state.search.title")} assetPath={resolvedPath} />
+                        </div>
+                      )}
+
+                      {(isLoading || isSearching) && (
+                        <Command.Loading>
+                          <Loader className="space-y-3">
+                            <Loader.Item height="40px" />
+                            <Loader.Item height="40px" />
+                            <Loader.Item height="40px" />
+                            <Loader.Item height="40px" />
+                          </Loader>
+                        </Command.Loading>
+                      )}
+
+                      {debouncedSearchTerm !== "" && (
+                        <CommandPaletteSearchResults closePalette={closePalette} results={results} />
+                      )}
+
+                      {!page && (
+                        <>
+                          {/* issue actions */}
+                          {issueId && issueDetails && searchInIssue && (
+                            <CommandPaletteIssueActions
+                              closePalette={closePalette}
+                              issueDetails={issueDetails}
+                              pages={pages}
+                              setPages={(newPages) => setPages(newPages)}
+                              setPlaceholder={(newPlaceholder) => setPlaceholder(newPlaceholder)}
+                              setSearchTerm={(newSearchTerm) => setSearchTerm(newSearchTerm)}
+                            />
+                          )}
+                          {workspaceSlug &&
+                            workspaceProjectIds &&
+                            workspaceProjectIds.length > 0 &&
+                            canPerformAnyCreateAction && (
+                              <Command.Group heading="Work item">
+                                <Command.Item
+                                  onSelect={() => {
+                                    closePalette();
+                                    captureClick({
+                                      elementName: WORK_ITEM_TRACKER_ELEMENTS.COMMAND_PALETTE_ADD_BUTTON,
+                                    });
+                                    toggleCreateIssueModal(true);
+                                  }}
+                                  className="focus:bg-custom-background-80"
+                                >
+                                  <div className="flex items-center gap-2 text-custom-text-200">
+                                    <WorkItemsIcon className="h-3.5 w-3.5" />
+                                    Create new work item
+                                  </div>
+                                  <kbd>C</kbd>
+                                </Command.Item>
+                              </Command.Group>
+                            )}
+                          {workspaceSlug && canPerformWorkspaceActions && (
+                            <Command.Group heading="Project">
+                              <Command.Item
+                                onSelect={() => {
+                                  closePalette();
+                                  captureClick({ elementName: PROJECT_TRACKER_ELEMENTS.COMMAND_PALETTE_CREATE_BUTTON });
+                                  toggleCreateProjectModal(true);
+                                }}
+                                className="focus:outline-none"
+                              >
+                                <div className="flex items-center gap-2 text-custom-text-200">
+                                  <FolderPlus className="h-3.5 w-3.5" />
+                                  Create new project
+                                </div>
+                                <kbd>P</kbd>
+                              </Command.Item>
+                            </Command.Group>
+                          )}
+
+                          {/* project actions */}
+                          {projectId && canPerformAnyCreateAction && (
+                            <CommandPaletteProjectActions closePalette={closePalette} />
+                          )}
+                          {canPerformWorkspaceActions && (
+                            <Command.Group heading="Workspace Settings">
+                              <Command.Item
+                                onSelect={() => {
+                                  setPlaceholder("Search workspace settings...");
+                                  setSearchTerm("");
+                                  setPages([...pages, "settings"]);
+                                }}
+                                className="focus:outline-none"
+                              >
+                                <div className="flex items-center gap-2 text-custom-text-200">
+                                  <Settings className="h-3.5 w-3.5" />
+                                  Search settings...
+                                </div>
+                              </Command.Item>
+                            </Command.Group>
+                          )}
+                          <Command.Group heading="Account">
+                            <Command.Item onSelect={createNewWorkspace} className="focus:outline-none">
+                              <div className="flex items-center gap-2 text-custom-text-200">
+                                <FolderPlus className="h-3.5 w-3.5" />
+                                Create new workspace
+                              </div>
+                            </Command.Item>
+                            <Command.Item
+                              onSelect={() => {
+                                setPlaceholder("Change interface theme...");
+                                setSearchTerm("");
+                                setPages([...pages, "change-interface-theme"]);
+                              }}
+                              className="focus:outline-none"
+                            >
+                              <div className="flex items-center gap-2 text-custom-text-200">
+                                <Settings className="h-3.5 w-3.5" />
+                                Change interface theme...
+                              </div>
+                            </Command.Item>
+                          </Command.Group>
+
+                          {/* help options */}
+                          <CommandPaletteHelpActions closePalette={closePalette} />
+                        </>
+                      )}
+
+                      {/* workspace settings actions */}
+                      {page === "settings" && workspaceSlug && (
+                        <CommandPaletteWorkspaceSettingsActions closePalette={closePalette} />
+                      )}
+
+                      {/* issue details page actions */}
+                      {page === "change-issue-state" && issueDetails && (
+                        <ChangeIssueState closePalette={closePalette} issue={issueDetails} />
+                      )}
+                      {page === "change-issue-priority" && issueDetails && (
+                        <ChangeIssuePriority closePalette={closePalette} issue={issueDetails} />
+                      )}
+                      {page === "change-issue-assignee" && issueDetails && (
+                        <ChangeIssueAssignee closePalette={closePalette} issue={issueDetails} />
+                      )}
+
+                      {/* theme actions */}
+                      {page === "change-interface-theme" && (
+                        <CommandPaletteThemeActions
+                          closePalette={() => {
+                            closePalette();
+                            setPages((pages) => pages.slice(0, -1));
+                          }}
+                        />
+                      )}
+                    </Command.List>
+                  </Command>
+                </div>
+                {/* Bottom overlay */}
+                <div className="w-full flex items-center justify-between px-4 py-2 border-t border-custom-border-200 bg-custom-background-90/80 rounded-b-lg">
+                  <div className="flex items-center gap-2">
+                    <span className="text-xs text-custom-text-300">Actions</span>
+                    <div className="flex items-center gap-1">
+                      <div className="grid h-6 min-w-[1.5rem] place-items-center rounded bg-custom-background-80 border-[0.5px] border-custom-border-200 px-1.5 text-[10px] text-custom-text-200">
+                        {platform === "MacOS" ? <CommandIcon 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 bg-custom-background-80 border-[0.5px] border-custom-border-200 px-1.5 text-[10px] text-custom-text-200">
+                        K
+                      </kbd>
+                    </div>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <span className="text-xs text-custom-text-300">Workspace Level</span>
+                    <ToggleSwitch
+                      value={isWorkspaceLevel}
+                      onChange={() => setIsWorkspaceLevel((prevData) => !prevData)}
+                      disabled={!projectId}
+                      size="sm"
+                    />
+                  </div>
+                </div>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+});

apps/web/core/components/command-palette/command-palette.tsx

@@ -0,0 +1,270 @@
+"use client";
+
+import type { FC } from "react";
+import React, { useCallback, useEffect, useMemo } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import useSWR from "swr";
+// ui
+import { COMMAND_PALETTE_TRACKER_ELEMENTS, EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+// components
+import { copyTextToClipboard } from "@plane/utils";
+import { CommandModal, ShortcutsModal } from "@/components/command-palette";
+// helpers
+// hooks
+import { captureClick } from "@/helpers/event-tracker.helper";
+import { useAppTheme } from "@/hooks/store/use-app-theme";
+import { useCommandPalette } from "@/hooks/store/use-command-palette";
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+import { useUser, useUserPermissions } from "@/hooks/store/user";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+// plane web components
+import {
+  IssueLevelModals,
+  ProjectLevelModals,
+  WorkspaceLevelModals,
+} from "@/plane-web/components/command-palette/modals";
+// plane web constants
+// plane web helpers
+import {
+  getGlobalShortcutsList,
+  getProjectShortcutsList,
+  getWorkspaceShortcutsList,
+  handleAdditionalKeyDownEvents,
+} from "@/plane-web/helpers/command-palette";
+
+export const CommandPalette: FC = observer(() => {
+  // router params
+  const { workspaceSlug, projectId: paramsProjectId, workItem } = useParams();
+  // store hooks
+  const { fetchIssueWithIdentifier } = useIssueDetail();
+  const { toggleSidebar, toggleExtendedSidebar } = useAppTheme();
+  const { platform } = usePlatformOS();
+  const { data: currentUser, canPerformAnyCreateAction } = useUser();
+  const { toggleCommandPaletteModal, isShortcutModalOpen, toggleShortcutModal, isAnyModalOpen } = useCommandPalette();
+  const { allowPermissions } = useUserPermissions();
+
+  // derived values
+  const projectIdentifier = workItem?.toString().split("-")[0];
+  const sequence_id = workItem?.toString().split("-")[1];
+
+  const { data: issueDetails } = useSWR(
+    workspaceSlug && workItem ? `ISSUE_DETAIL_${workspaceSlug}_${projectIdentifier}_${sequence_id}` : null,
+    workspaceSlug && workItem
+      ? () => fetchIssueWithIdentifier(workspaceSlug.toString(), projectIdentifier, sequence_id)
+      : null
+  );
+
+  const issueId = issueDetails?.id;
+  const projectId = paramsProjectId?.toString() ?? issueDetails?.project_id;
+
+  const canPerformWorkspaceMemberActions = allowPermissions(
+    [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
+    EUserPermissionsLevel.WORKSPACE
+  );
+  const canPerformProjectMemberActions = allowPermissions(
+    [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
+    EUserPermissionsLevel.PROJECT,
+    workspaceSlug?.toString(),
+    projectId
+  );
+  const canPerformProjectAdminActions = allowPermissions(
+    [EUserPermissions.ADMIN],
+    EUserPermissionsLevel.PROJECT,
+    workspaceSlug?.toString(),
+    projectId
+  );
+
+  const copyIssueUrlToClipboard = useCallback(() => {
+    if (!workItem) return;
+
+    const url = new URL(window.location.href);
+    copyTextToClipboard(url.href)
+      .then(() => {
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: "Copied to clipboard",
+        });
+      })
+      .catch(() => {
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: "Some error occurred",
+        });
+      });
+  }, [workItem]);
+
+  // auth
+  const performProjectCreateActions = useCallback(
+    (showToast: boolean = true) => {
+      if (!canPerformProjectMemberActions && showToast)
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: "You don't have permission to perform this action.",
+        });
+
+      return canPerformProjectMemberActions;
+    },
+    [canPerformProjectMemberActions]
+  );
+
+  const performProjectBulkDeleteActions = useCallback(
+    (showToast: boolean = true) => {
+      if (!canPerformProjectAdminActions && projectId && showToast)
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: "You don't have permission to perform this action.",
+        });
+
+      return canPerformProjectAdminActions;
+    },
+    [canPerformProjectAdminActions, projectId]
+  );
+
+  const performWorkspaceCreateActions = useCallback(
+    (showToast: boolean = true) => {
+      if (!canPerformWorkspaceMemberActions && showToast)
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: "You don't have permission to perform this action.",
+        });
+      return canPerformWorkspaceMemberActions;
+    },
+    [canPerformWorkspaceMemberActions]
+  );
+
+  const performAnyProjectCreateActions = useCallback(
+    (showToast: boolean = true) => {
+      if (!canPerformAnyCreateAction && showToast)
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: "You don't have permission to perform this action.",
+        });
+      return canPerformAnyCreateAction;
+    },
+    [canPerformAnyCreateAction]
+  );
+
+  const shortcutsList: {
+    global: Record<string, { title: string; description: string; action: () => void }>;
+    workspace: Record<string, { title: string; description: string; action: () => void }>;
+    project: Record<string, { title: string; description: string; action: () => void }>;
+  } = useMemo(
+    () => ({
+      global: getGlobalShortcutsList(),
+      workspace: getWorkspaceShortcutsList(),
+      project: getProjectShortcutsList(),
+    }),
+    []
+  );
+
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent) => {
+      const { key, ctrlKey, metaKey, altKey, shiftKey } = e;
+      if (!key) return;
+
+      const keyPressed = key.toLowerCase();
+      const cmdClicked = ctrlKey || metaKey;
+      const shiftClicked = shiftKey;
+      const deleteKey = keyPressed === "backspace" || keyPressed === "delete";
+
+      if (cmdClicked && keyPressed === "k" && !isAnyModalOpen) {
+        e.preventDefault();
+        toggleCommandPaletteModal(true);
+      }
+
+      // if on input, textarea or editor, don't do anything
+      if (
+        e.target instanceof HTMLTextAreaElement ||
+        e.target instanceof HTMLInputElement ||
+        (e.target as Element)?.classList?.contains("ProseMirror")
+      )
+        return;
+
+      if (shiftClicked && (keyPressed === "?" || keyPressed === "/") && !isAnyModalOpen) {
+        e.preventDefault();
+        toggleShortcutModal(true);
+      }
+
+      if (deleteKey) {
+        if (performProjectBulkDeleteActions()) {
+          shortcutsList.project.delete.action();
+        }
+      } else if (cmdClicked) {
+        if (keyPressed === "c" && ((platform === "MacOS" && ctrlKey) || altKey)) {
+          e.preventDefault();
+          copyIssueUrlToClipboard();
+        } else if (keyPressed === "b") {
+          e.preventDefault();
+          toggleSidebar();
+          toggleExtendedSidebar(false);
+        }
+      } else if (!isAnyModalOpen) {
+        captureClick({ elementName: COMMAND_PALETTE_TRACKER_ELEMENTS.COMMAND_PALETTE_SHORTCUT_KEY });
+        if (
+          Object.keys(shortcutsList.global).includes(keyPressed) &&
+          ((!projectId && performAnyProjectCreateActions()) || performProjectCreateActions())
+        ) {
+          shortcutsList.global[keyPressed].action();
+        }
+        // workspace authorized actions
+        else if (
+          Object.keys(shortcutsList.workspace).includes(keyPressed) &&
+          workspaceSlug &&
+          performWorkspaceCreateActions()
+        ) {
+          e.preventDefault();
+          shortcutsList.workspace[keyPressed].action();
+        }
+        // project authorized actions
+        else if (
+          Object.keys(shortcutsList.project).includes(keyPressed) &&
+          projectId &&
+          performProjectCreateActions()
+        ) {
+          e.preventDefault();
+          // actions that can be performed only inside a project
+          shortcutsList.project[keyPressed].action();
+        }
+      }
+      // Additional keydown events
+      handleAdditionalKeyDownEvents(e);
+    },
+    [
+      copyIssueUrlToClipboard,
+      isAnyModalOpen,
+      platform,
+      performAnyProjectCreateActions,
+      performProjectBulkDeleteActions,
+      performProjectCreateActions,
+      performWorkspaceCreateActions,
+      projectId,
+      shortcutsList,
+      toggleCommandPaletteModal,
+      toggleShortcutModal,
+      toggleSidebar,
+      toggleExtendedSidebar,
+      workspaceSlug,
+    ]
+  );
+
+  useEffect(() => {
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [handleKeyDown]);
+
+  if (!currentUser) return null;
+
+  return (
+    <>
+      <ShortcutsModal isOpen={isShortcutModalOpen} onClose={() => toggleShortcutModal(false)} />
+      {workspaceSlug && <WorkspaceLevelModals workspaceSlug={workspaceSlug.toString()} />}
+      {workspaceSlug && projectId && (
+        <ProjectLevelModals workspaceSlug={workspaceSlug.toString()} projectId={projectId.toString()} />
+      )}
+      <IssueLevelModals projectId={projectId} issueId={issueId} />
+      <CommandModal />
+    </>
+  );
+});

apps/web/core/components/command-palette/index.ts

@@ -0,0 +1,4 @@
+export * from "./actions";
+export * from "./shortcuts-modal";
+export * from "./command-modal";
+export * from "./command-palette";

apps/web/core/components/command-palette/shortcuts-modal/commands-list.tsx

@@ -0,0 +1,99 @@
+import { Command } from "lucide-react";
+// helpers
+import { substringMatch } from "@plane/utils";
+// hooks
+import { usePlatformOS } from "@/hooks/use-platform-os";
+// plane web helpers
+import {
+  getAdditionalShortcutsList,
+  getCommonShortcutsList,
+  getNavigationShortcutsList,
+} from "@/plane-web/helpers/command-palette";
+
+type Props = {
+  searchQuery: string;
+};
+
+export const ShortcutCommandsList: React.FC<Props> = (props) => {
+  const { searchQuery } = props;
+  const { platform } = usePlatformOS();
+
+  const KEYBOARD_SHORTCUTS = [
+    {
+      key: "navigation",
+      title: "Navigation",
+      shortcuts: getNavigationShortcutsList(),
+    },
+    {
+      key: "common",
+      title: "Common",
+      shortcuts: getCommonShortcutsList(platform),
+    },
+    ...getAdditionalShortcutsList(),
+  ];
+
+  const filteredShortcuts = KEYBOARD_SHORTCUTS.map((category) => {
+    const newCategory = { ...category };
+
+    newCategory.shortcuts = newCategory.shortcuts.filter((shortcut) =>
+      substringMatch(shortcut.description, searchQuery)
+    );
+
+    return newCategory;
+  });
+
+  const isShortcutsEmpty = filteredShortcuts.every((category) => category.shortcuts.length === 0);
+
+  return (
+    <div className="flex flex-col gap-y-3 overflow-y-auto">
+      {!isShortcutsEmpty ? (
+        filteredShortcuts.map((category) => {
+          if (category.shortcuts.length === 0) return;
+
+          return (
+            <div key={category.key}>
+              <h5 className="text-left text-sm font-medium">{category.title}</h5>
+              <div className="space-y-3 px-1">
+                {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 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 text-[10px] 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">
+                                {key}
+                              </kbd>
+                            )}
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          );
+        })
+      ) : (
+        <p className="flex justify-center text-center text-sm text-custom-text-200">
+          No shortcuts found for{" "}
+          <span className="font-semibold italic">
+            {`"`}
+            {searchQuery}
+            {`"`}
+          </span>
+        </p>
+      )}
+    </div>
+  );
+};

apps/web/core/components/command-palette/shortcuts-modal/index.ts

@@ -0,0 +1,2 @@
+export * from "./commands-list";
+export * from "./modal";

apps/web/core/components/command-palette/shortcuts-modal/modal.tsx

@@ -0,0 +1,84 @@
+"use client";
+
+import type { FC } from "react";
+import { useState, Fragment } from "react";
+import { Search, X } from "lucide-react";
+import { Dialog, Transition } from "@headlessui/react";
+// components
+import { Input } from "@plane/ui";
+import { ShortcutCommandsList } from "@/components/command-palette";
+// ui
+
+type Props = {
+  isOpen: boolean;
+  onClose: () => void;
+};
+
+export const ShortcutsModal: FC<Props> = (props) => {
+  const { isOpen, onClose } = props;
+  // states
+  const [query, setQuery] = useState("");
+
+  const handleClose = () => {
+    onClose();
+    setQuery("");
+  };
+
+  return (
+    <Transition.Root show={isOpen} as={Fragment}>
+      <Dialog as="div" className="relative z-30" onClose={handleClose}>
+        <Transition.Child
+          as={Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
+        </Transition.Child>
+
+        <div className="fixed inset-0 z-30 overflow-y-auto">
+          <div className="my-10 flex items-center justify-center p-4 text-center sm:p-0 md:my-20">
+            <Transition.Child
+              as={Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enterTo="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            >
+              <Dialog.Panel className="relative flex h-full items-center justify-center">
+                <div className="flex h-[61vh] w-full flex-col  space-y-4 overflow-hidden rounded-lg bg-custom-background-100 p-5 shadow-custom-shadow-md transition-all sm:w-[28rem]">
+                  <Dialog.Title as="h3" className="flex justify-between">
+                    <span className="text-lg font-medium">Keyboard shortcuts</span>
+                    <button type="button" onClick={handleClose}>
+                      <X className="h-4 w-4 text-custom-text-200 hover:text-custom-text-100" aria-hidden="true" />
+                    </button>
+                  </Dialog.Title>
+                  <div className="flex w-full items-center rounded border-[0.5px] border-custom-border-200 bg-custom-background-90 px-2">
+                    <Search className="h-3.5 w-3.5 text-custom-text-200" />
+                    <Input
+                      id="search"
+                      name="search"
+                      type="text"
+                      value={query}
+                      onChange={(e) => setQuery(e.target.value)}
+                      placeholder="Search for shortcuts"
+                      className="w-full border-none bg-transparent py-1 text-xs text-custom-text-200 outline-none"
+                      autoFocus
+                      tabIndex={1}
+                    />
+                  </div>
+                  <ShortcutCommandsList searchQuery={query} />
+                </div>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+};