feat: generalize command palette entity shortcuts

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

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useCallback, useEffect, FC, useMemo } from "react";
+import React, { useCallback, useEffect, FC, useMemo, useRef } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import useSWR from "swr";
@@ -10,11 +10,13 @@
 // components
 import { copyTextToClipboard } from "@plane/utils";
 import { CommandModal, ShortcutsModal } from "@/components/command-palette";
+import { COMMAND_CONFIG, CommandConfig } 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 type { CommandPaletteEntity } from "@/store/base-command-palette.store";
 import { useIssueDetail } from "@/hooks/store/use-issue-detail";
 import { useUser, useUserPermissions } from "@/hooks/store/user";
 import { usePlatformOS } from "@/hooks/use-platform-os";
@@ -41,7 +43,8 @@
   const { toggleSidebar } = useAppTheme();
   const { platform } = usePlatformOS();
   const { data: currentUser, canPerformAnyCreateAction } = useUser();
-  const { toggleCommandPaletteModal, isShortcutModalOpen, toggleShortcutModal, isAnyModalOpen } = useCommandPalette();
+  const { toggleCommandPaletteModal, isShortcutModalOpen, toggleShortcutModal, isAnyModalOpen, activateEntity } =
+    useCommandPalette();
   const { allowPermissions } = useUserPermissions();
 
   // derived values
@@ -158,6 +161,17 @@
     []
   );
 
+  const keySequence = useRef("");
+  const sequenceTimeout = useRef<NodeJS.Timeout | null>(null);
+
+  const commandSequenceMap = useMemo(() => {
+    const map: Record<string, CommandConfig> = {};
+    COMMAND_CONFIG.forEach((cmd) => {
+      map[cmd.sequence] = cmd;
+    });
+    return map;
+  }, []);
+
   const handleKeyDown = useCallback(
     (e: KeyboardEvent) => {
       const { key, ctrlKey, metaKey, altKey, shiftKey } = e;
@@ -186,6 +200,21 @@
         toggleShortcutModal(true);
       }
 
+      if (!cmdClicked && !altKey && !shiftKey && !isAnyModalOpen) {
+        keySequence.current = (keySequence.current + keyPressed).slice(-2);
+        if (sequenceTimeout.current) clearTimeout(sequenceTimeout.current);
+        sequenceTimeout.current = setTimeout(() => {
+          keySequence.current = "";
+        }, 500);
+        const cmd = commandSequenceMap[keySequence.current];
+        if (cmd && (!cmd.enabled || cmd.enabled())) {
+          e.preventDefault();
+          activateEntity(cmd.entity);
+          keySequence.current = "";
+          return;
+        }
+      }
+
       if (deleteKey) {
         if (performProjectBulkDeleteActions()) {
           shortcutsList.project.delete.action();
@@ -240,6 +269,7 @@
       projectId,
       shortcutsList,
       toggleCommandPaletteModal,
+      activateEntity,
       toggleShortcutModal,
       toggleSidebar,
       workspaceSlug,

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

@@ -0,0 +1,52 @@
+import type { CommandPaletteEntity } from "@/store/base-command-palette.store";
+
+export interface CommandConfig {
+  /**
+   * Unique identifier for the command
+   */
+  id: string;
+  /**
+   * Key sequence that triggers the command. Should be lowercase.
+   */
+  sequence: string;
+  /**
+   * Display label shown in the command palette.
+   */
+  title: string;
+  /**
+   * Keys displayed as shortcut hint.
+   */
+  keys: string[];
+  /**
+   * Entity that the command opens.
+   */
+  entity: CommandPaletteEntity;
+  /**
+   * Optional predicate controlling command availability
+   */
+  enabled?: () => boolean;
+}
+
+export const COMMAND_CONFIG: CommandConfig[] = [
+  {
+    id: "open-project",
+    sequence: "op",
+    title: "Open project...",
+    keys: ["O", "P"],
+    entity: "project",
+  },
+  {
+    id: "open-cycle",
+    sequence: "oc",
+    title: "Open cycle...",
+    keys: ["O", "C"],
+    entity: "cycle",
+  },
+  {
+    id: "open-issue",
+    sequence: "oi",
+    title: "Open issue...",
+    keys: ["O", "I"],
+    entity: "issue",
+  },
+];

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

@@ -0,0 +1,21 @@
+"use client";
+
+import React from "react";
+import type { ICycle } from "@plane/types";
+import { CommandPaletteEntityList } from "./entity-list";
+
+interface Props {
+  cycles: ICycle[];
+  onSelect: (cycle: ICycle) => void;
+}
+
+export const CommandPaletteCycleSelector: React.FC<Props> = ({ cycles, onSelect }) => (
+  <CommandPaletteEntityList
+    heading="Cycles"
+    items={cycles}
+    getKey={(cycle) => cycle.id}
+    getLabel={(cycle) => cycle.name}
+    onSelect={onSelect}
+    emptyText="No cycles found"
+  />
+);

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

@@ -0,0 +1,42 @@
+"use client";
+
+import React from "react";
+import { Command } from "cmdk";
+import { cn } from "@plane/utils";
+
+interface CommandPaletteEntityListProps<T> {
+  heading: string;
+  items: T[];
+  onSelect: (item: T) => void;
+  getKey?: (item: T) => string;
+  getLabel: (item: T) => string;
+  renderItem?: (item: T) => React.ReactNode;
+  emptyText?: string;
+}
+
+export const CommandPaletteEntityList = <T,>({
+  heading,
+  items,
+  onSelect,
+  getKey,
+  getLabel,
+  renderItem,
+  emptyText = "No results found",
+}: CommandPaletteEntityListProps<T>) => {
+  if (items.length === 0) return <div className="px-3 py-8 text-center text-sm text-custom-text-300">{emptyText}</div>;
+
+  return (
+    <Command.Group heading={heading}>
+      {items.map((item) => (
+        <Command.Item
+          key={getKey ? getKey(item) : getLabel(item)}
+          value={getLabel(item)}
+          onSelect={() => onSelect(item)}
+          className={cn("focus:outline-none")}
+        >
+          {renderItem ? renderItem(item) : getLabel(item)}
+        </Command.Item>
+      ))}
+    </Command.Group>
+  );
+};

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

@@ -2,3 +2,8 @@ export * from "./actions";
 export * from "./shortcuts-modal";
 export * from "./command-modal";
 export * from "./command-palette";
+export * from "./project-selector";
+export * from "./cycle-selector";
+export * from "./entity-list";
+export * from "./use-key-sequence";
+export * from "./commands";

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

@@ -0,0 +1,21 @@
+"use client";
+
+import React from "react";
+import type { TPartialProject } from "@/plane-web/types";
+import { CommandPaletteEntityList } from "./entity-list";
+
+interface Props {
+  projects: TPartialProject[];
+  onSelect: (project: TPartialProject) => void;
+}
+
+export const CommandPaletteProjectSelector: React.FC<Props> = ({ projects, onSelect }) => (
+  <CommandPaletteEntityList
+    heading="Projects"
+    items={projects}
+    getKey={(project) => project.id}
+    getLabel={(project) => project.name}
+    onSelect={onSelect}
+    emptyText="No projects found"
+  />
+);

apps/web/core/components/command-palette/use-key-sequence.ts

@@ -0,0 +1,25 @@
+"use client";
+
+import { useRef } from "react";
+
+export const useKeySequence = (handlers: Record<string, () => void>, timeout = 500) => {
+  const sequence = useRef("");
+  const sequenceTimeout = useRef<NodeJS.Timeout | null>(null);
+
+  return (e: React.KeyboardEvent) => {
+    const key = e.key.toLowerCase();
+    sequence.current = (sequence.current + key).slice(-2);
+
+    if (sequenceTimeout.current) clearTimeout(sequenceTimeout.current);
+    sequenceTimeout.current = setTimeout(() => {
+      sequence.current = "";
+    }, timeout);
+
+    const action = handlers[sequence.current];
+    if (action) {
+      e.preventDefault();
+      action();
+      sequence.current = "";
+    }
+  };
+};

apps/web/core/store/base-command-palette.store.ts

@@ -8,6 +8,8 @@ import {
 } from "@plane/constants";
 import { EIssuesStoreType } from "@plane/types";
 
+export type CommandPaletteEntity = "project" | "cycle" | "module" | "issue";
+
 export interface ModalData {
   store: EIssuesStoreType;
   viewId: string;
@@ -30,6 +32,9 @@ export interface IBaseCommandPaletteStore {
   allStickiesModal: boolean;
   projectListOpenMap: Record<string, boolean>;
   getIsProjectListOpen: (projectId: string) => boolean;
+  activeEntity: CommandPaletteEntity | null;
+  activateEntity: (entity: CommandPaletteEntity) => void;
+  clearActiveEntity: () => void;
   // toggle actions
   toggleCommandPaletteModal: (value?: boolean) => void;
   toggleShortcutModal: (value?: boolean) => void;
@@ -61,6 +66,7 @@ export abstract class BaseCommandPaletteStore implements IBaseCommandPaletteStor
   createWorkItemAllowedProjectIds: IBaseCommandPaletteStore["createWorkItemAllowedProjectIds"] = undefined;
   allStickiesModal: boolean = false;
   projectListOpenMap: Record<string, boolean> = {};
+  activeEntity: CommandPaletteEntity | null = null;
 
   constructor() {
     makeObservable(this, {
@@ -79,6 +85,7 @@ export abstract class BaseCommandPaletteStore implements IBaseCommandPaletteStor
       createWorkItemAllowedProjectIds: observable,
       allStickiesModal: observable,
       projectListOpenMap: observable,
+      activeEntity: observable,
       // projectPages: computed,
       // toggle actions
       toggleCommandPaletteModal: action,
@@ -93,6 +100,8 @@ export abstract class BaseCommandPaletteStore implements IBaseCommandPaletteStor
       toggleBulkDeleteIssueModal: action,
       toggleAllStickiesModal: action,
       toggleProjectListOpen: action,
+      activateEntity: action,
+      clearActiveEntity: action,
     });
   }
 
@@ -127,6 +136,22 @@ export abstract class BaseCommandPaletteStore implements IBaseCommandPaletteStor
     else this.projectListOpenMap[projectId] = !this.projectListOpenMap[projectId];
   };
 
+  /**
+   * Opens the command palette with a specific entity pre-selected
+   * @param entity
+   */
+  activateEntity = (entity: CommandPaletteEntity) => {
+    this.isCommandPaletteOpen = true;
+    this.activeEntity = entity;
+  };
+
+  /**
+   * Clears the active entity trigger
+   */
+  clearActiveEntity = () => {
+    this.activeEntity = null;
+  };
+
   /**
    * Toggles the command palette modal
    * @param value