feat: cleanup hotkeys

packages/web/src/views/Calendar/components/Sidebar/SomedayTab/SomedayEvents/SomedayEvent/SomedayEvent.tsx

@@ -1,4 +1,3 @@
-import type React from "react";
 import {
   type DraggableProvided,
   type DraggableStateSnapshot,
@@ -24,7 +23,6 @@ interface Props {
   onBlur: () => void;
   onClick: () => void;
   onFocus: () => void;
-  onKeyDown: (e: React.KeyboardEvent<HTMLDivElement>) => void;
   onMigrate: Actions_Sidebar["onMigrate"];
   priority: Priorities;
   provided: DraggableProvided;
@@ -41,7 +39,6 @@ export const SomedayEvent = ({
   onBlur,
   onClick,
   onFocus,
-  onKeyDown,
   onMigrate,
   priority,
   provided,
@@ -62,7 +59,6 @@ export const SomedayEvent = ({
     onBlur,
     onClick,
     onFocus,
-    onKeyDown,
     priority,
     role: "button",
     ref: provided.innerRef,

packages/web/src/views/Calendar/components/Sidebar/SomedayTab/SomedayEvents/SomedayEventContainer/SomedayEventContainer.test.tsx

@@ -85,7 +85,7 @@ describe("SomedayEventContainer keyboard interactions", () => {
     const btn = document.querySelector(
       `[data-event-id="${LEARN_CHINESE._id}"]`,
     )!;
-    btn.focus();
+    fireEvent.focus(btn);
     fireEvent.keyDown(btn, { key: "Enter" });
 
     expect(onDraft).toHaveBeenCalledTimes(1);
@@ -152,7 +152,7 @@ describe("SomedayEventContainer keyboard interactions", () => {
     const btn = document.querySelector(
       `[data-event-id="${LEARN_CHINESE._id}"]`,
     )!;
-    btn.focus();
+    fireEvent.focus(btn);
     fireEvent.keyDown(btn, { key: "ArrowUp", metaKey: true, ctrlKey: true });
 
     expect(onSubmit).toHaveBeenCalledTimes(1);
@@ -217,7 +217,7 @@ describe("SomedayEventContainer keyboard interactions", () => {
     const btn = document.querySelector(
       `[data-event-id="${LEARN_CHINESE._id}"]`,
     )!;
-    btn.focus();
+    fireEvent.focus(btn);
     fireEvent.keyDown(btn, { key: "ArrowDown", metaKey: true, ctrlKey: true });
 
     expect(onSubmit).toHaveBeenCalledTimes(1);

packages/web/src/views/Calendar/components/Sidebar/SomedayTab/SomedayEvents/SomedayEventContainer/SomedayEventContainer.tsx

@@ -1,7 +1,5 @@
-import type React from "react";
 import { useState } from "react";
 import { toast } from "react-toastify";
-import { Key } from "ts-key-enum";
 import { FloatingFocusManager, FloatingPortal } from "@floating-ui/react";
 import {
   type DraggableProvided,
@@ -13,6 +11,7 @@ import {
   RecurringEventUpdateScope,
   type Schema_Event,
 } from "@core/types/event.types";
+import { useAppHotkey } from "@web/common/hooks/useAppHotkey";
 import { computeCurrentEventDateRange } from "@web/common/utils/datetime/web.date.util";
 import { useDraftForm } from "@web/views/Calendar/components/Draft/hooks/state/useDraftForm";
 import { type SidebarDraftContextValue } from "@web/views/Calendar/components/Draft/sidebar/context/SidebarDraftContext";
@@ -68,48 +67,34 @@ export const SomedayEventContainer = ({
 
   const [isFocused, setIsFocused] = useState(false);
 
-  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
-    // ENTER opens the edit form
-    if (e.key === Key.Enter) {
-      e.preventDefault();
-      e.stopPropagation();
-      actions.onDraft(event, category);
-      return;
-    }
-
-    // META + CTRL + UP/DOWN should migrate the event between Someday lists
-    const isMetaCtrl = e.metaKey && e.ctrlKey;
-    const isArrowUp = e.key === "ArrowUp";
-    const isArrowDown = e.key === "ArrowDown";
-
-    if (isMetaCtrl && (isArrowUp || isArrowDown)) {
-      e.preventDefault();
-      e.stopPropagation();
-
-      // Prevent migrating recurring events
-      const canMigrate =
-        !event.recurrence?.rule || event.recurrence?.rule.length === 0;
+  useAppHotkey("Enter", () => actions.onDraft(event, category), {
+    enabled: isFocused,
+  });
 
-      if (!canMigrate) {
-        toast.error("Can't migrate recurring events");
-        return;
-      }
-
-      const duration = isArrowUp ? "week" : "month";
-      const targetCategory = isArrowUp
-        ? Categories_Event.SOMEDAY_WEEK
-        : Categories_Event.SOMEDAY_MONTH;
-
-      const updatedEvent = computeCurrentEventDateRange(
-        { duration },
-        event,
-        weekViewRange,
-      );
-
-      actions.onSubmit(targetCategory, updatedEvent);
+  const migrateEvent = (direction: "up" | "down") => {
+    const canMigrate =
+      !event.recurrence?.rule || event.recurrence?.rule.length === 0;
+    if (!canMigrate) {
+      toast.error("Can't migrate recurring events");
+      return;
     }
+    const [duration, targetCategory] =
+      direction === "up"
+        ? (["week", Categories_Event.SOMEDAY_WEEK] as const)
+        : (["month", Categories_Event.SOMEDAY_MONTH] as const);
+    void actions.onSubmit(
+      targetCategory,
+      computeCurrentEventDateRange({ duration }, event, weekViewRange),
+    );
   };
 
+  useAppHotkey("Control+Meta+ArrowUp", () => migrateEvent("up"), {
+    enabled: isFocused,
+  });
+  useAppHotkey("Control+Meta+ArrowDown", () => migrateEvent("down"), {
+    enabled: isFocused,
+  });
+
   const isDraftingThisEvent =
     state.isDrafting && state.draft?._id === event._id;
 
@@ -127,7 +112,6 @@ export const SomedayEventContainer = ({
           actions.onDraft(event, category);
         }}
         onFocus={() => setIsFocused(true)}
-        onKeyDown={handleKeyDown}
         priority={event.priority || Priorities.UNASSIGNED}
         provided={provided}
         snapshot={snapshot}

packages/web/src/views/Calendar/hooks/grid/useScroll.ts

@@ -1,4 +1,5 @@
 import { type MutableRefObject, useCallback, useEffect } from "react";
+import { useAppHotkey } from "@web/common/hooks/useAppHotkey";
 import { getCurrentMinute } from "@web/common/utils/grid/grid.util";
 
 export const useScroll = (
@@ -21,24 +22,7 @@ export const useScroll = (
   }, [timedGridRef]);
 
   // Scroll when pressing "c"
-  useEffect(() => {
-    const handleKeyDown = (event: KeyboardEvent) => {
-      const target = event.target as HTMLElement;
-      const isTypingField =
-        target.tagName === "INPUT" ||
-        target.tagName === "TEXTAREA" ||
-        target.isContentEditable;
-
-      if (!isTypingField && !event.ctrlKey && event.key.toLowerCase() === "c") {
-        scrollToNow();
-      }
-    };
-
-    window.addEventListener("keydown", handleKeyDown);
-    return () => {
-      window.removeEventListener("keydown", handleKeyDown);
-    };
-  }, [scrollToNow]);
+  useAppHotkey("C", scrollToNow);
 
   // Optional: scroll to now on mount
   useEffect(() => {