:sparkles feat(agenda-events): add event shortcuts (n, m) to Day view command palette (#1389)

* Initial plan

* Add Create event [n] and Edit event [m] to DayCmdPalette with tests

Co-authored-by: victor-enogwe <23452630+victor-enogwe@users.noreply.github.com>

* Fix test mocks and pass all tests with linting

Co-authored-by: victor-enogwe <23452630+victor-enogwe@users.noreply.github.com>

* Remove unnecessary onEventTargetVisibility wrapper from event shortcuts

Co-authored-by: victor-enogwe <23452630+victor-enogwe@users.noreply.github.com>

* :bug fix(DayCmdPalette): update event handlers to use queueMicrotask to stagger open and keep focus on open

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: victor-enogwe <23452630+victor-enogwe@users.noreply.github.com>

Author: Copilot

packages/web/src/views/Day/components/DayCmdPalette.test.tsx

@@ -3,13 +3,15 @@ import { fireEvent, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { render } from "@web/__tests__/__mocks__/mock.render";
 import { keyPressed$ } from "@web/common/utils/dom/event-emitter.util";
+import * as eventUtil from "@web/common/utils/event/event.util";
 import { getModifierKey } from "@web/common/utils/shortcut/shortcut.util";
 import { viewSlice } from "@web/ducks/events/slices/view.slice";
 import { settingsSlice } from "@web/ducks/settings/slices/settings.slice";
 import { useGlobalShortcuts } from "@web/views/Calendar/hooks/shortcuts/useGlobalShortcuts";
 import { DayCmdPalette } from "@web/views/Day/components/DayCmdPalette";
 
 // Mock react-router-dom
+const mockNavigate = jest.fn();
 jest.mock("react-router-dom", () => ({
   ...jest.requireActual("react-router-dom"),
   useNavigate: jest.fn(),
@@ -37,6 +39,9 @@ jest.mock("@web/common/utils/dom/event-target-visibility.util", () => ({
   onEventTargetVisibility: (callback: () => void) => callback,
 }));
 
+// Mock event utility functions
+jest.mock("@web/common/utils/event/event.util");
+
 jest.mock("@web/store/store.hooks", () => ({
   useAppDispatch: () => mockDispatch,
   useAppSelector: jest.requireActual("@web/store/store.hooks").useAppSelector,
@@ -49,7 +54,14 @@ function Component() {
 }
 
 describe("DayCmdPalette", () => {
-  const mockNavigate = jest.fn();
+  const mockOpenEventFormCreateEvent = jest.spyOn(
+    eventUtil,
+    "openEventFormCreateEvent",
+  );
+  const mockOpenEventFormEditEvent = jest.spyOn(
+    eventUtil,
+    "openEventFormEditEvent",
+  );
 
   beforeEach(() => {
     jest.clearAllMocks();
@@ -70,6 +82,8 @@ describe("DayCmdPalette", () => {
     expect(screen.getByText("Navigation")).toBeInTheDocument();
     expect(screen.getByText("Go to Now [1]")).toBeInTheDocument();
     expect(screen.getByText("Go to Week [3]")).toBeInTheDocument();
+    expect(screen.getByText("Create event [n]")).toBeInTheDocument();
+    expect(screen.getByText("Edit event [m]")).toBeInTheDocument();
     expect(screen.getByText("Edit Reminder [r]")).toBeInTheDocument();
     expect(
       screen.getByText("Go to Today (Monday, November 24) [t]"),
@@ -201,6 +215,42 @@ describe("DayCmdPalette", () => {
     expect(mockNavigate).toHaveBeenCalledWith("/logout");
   });
 
+  it("calls openEventFormEditEvent when Edit event is clicked", async () => {
+    const user = userEvent.setup();
+
+    await act(() =>
+      render(<Component />, {
+        state: { settings: { isCmdPaletteOpen: true } },
+      }),
+    );
+
+    const editEventBtn = await screen.findByRole("button", {
+      name: /edit event \[m\]/i,
+    });
+
+    await act(() => user.click(editEventBtn));
+
+    expect(mockOpenEventFormEditEvent).toHaveBeenCalled();
+  });
+
+  it("calls openEventFormCreateEvent when Create event is clicked", async () => {
+    const user = userEvent.setup();
+
+    await act(() =>
+      render(<Component />, {
+        state: { settings: { isCmdPaletteOpen: true } },
+      }),
+    );
+
+    const createEventBtn = await screen.findByRole("button", {
+      name: /create event \[n\]/i,
+    });
+
+    await act(() => user.click(createEventBtn));
+
+    expect(mockOpenEventFormCreateEvent).toHaveBeenCalled();
+  });
+
   it("filters items based on search input", async () => {
     const user = userEvent.setup();
     await act(() =>

packages/web/src/views/Day/components/DayCmdPalette.tsx

@@ -6,6 +6,10 @@ import { moreCommandPaletteItems } from "@web/common/constants/more.cmd.constant
 import { ROOT_ROUTES } from "@web/common/constants/routes";
 import { pressKey } from "@web/common/utils/dom/event-emitter.util";
 import { onEventTargetVisibility } from "@web/common/utils/dom/event-target-visibility.util";
+import {
+  openEventFormCreateEvent,
+  openEventFormEditEvent,
+} from "@web/common/utils/event/event.util";
 import { selectIsCmdPaletteOpen } from "@web/ducks/settings/selectors/settings.selectors";
 import { settingsSlice } from "@web/ducks/settings/slices/settings.slice";
 import { useAppDispatch, useAppSelector } from "@web/store/store.hooks";
@@ -39,6 +43,18 @@ export const DayCmdPalette = ({ onGoToToday }: DayCmdPaletteProps) => {
             icon: "CalendarIcon",
             onClick: () => pressKey("3"),
           },
+          {
+            id: "create-event",
+            children: "Create event [n]",
+            icon: "PlusIcon",
+            onClick: () => queueMicrotask(openEventFormCreateEvent),
+          },
+          {
+            id: "edit-event",
+            children: "Edit event [m]",
+            icon: "PencilSquareIcon",
+            onClick: () => queueMicrotask(openEventFormEditEvent),
+          },
           {
             id: "edit-reminder",
             children: `Edit Reminder [r]`,