refactor: replace custom useKeyboardShortcuts hook with direct react-hotkeys-hook usage and consolidate navigation shortcuts

Author: munlicode

apps/web/app/components/layout/AppLayout.tsx

@@ -1,4 +1,4 @@
-import { useState, useCallback, useMemo, useEffect } from "react";
+import { useState, useCallback, useMemo } from "react";
 import { Outlet, isRouteErrorResponse } from "react-router";
 import { PlusIcon } from "lucide-react";
 import { Button, cn } from "@kreozalabs/kei-ui";
@@ -12,8 +12,8 @@ import { useSettings } from "@/providers/SettingsContext";
 import { MobileFABProvider, useMobileFAB } from "@/components/MobileFAB";
 import { HeaderPortalContext } from "./HeaderPortalContext";
 import { DbSyncStatus } from "./DbSyncStatus";
-import { useKeyboardShortcuts } from "@/hooks/useKeyboardShortcuts";
 import { useFullscreen } from "@/hooks/useFullscreen";
+import { useHotkeys } from "react-hotkeys-hook";
 
 export interface AppLayoutContext {
   isSidebarOpen: boolean;
@@ -39,10 +39,8 @@ function AppLayoutContent({ error }: { error?: unknown }) {
   const toggleSidebar = useCallback(() => setIsSidebarOpen((prev) => !prev), []);
   const { toggleFullscreen } = useFullscreen();
 
-  useKeyboardShortcuts([
-    { key: "b", ctrlOrMeta: true, handler: toggleSidebar, description: "Toggle Sidebar" },
-    { key: "f", handler: toggleFullscreen, description: "Toggle Fullscreen" },
-  ]);
+  useHotkeys("mod+b", toggleSidebar, { preventDefault: true });
+  useHotkeys("f", toggleFullscreen, { preventDefault: true });
 
   const contextValue: AppLayoutContext = useMemo(
     () => ({

apps/web/app/hooks/useKeyboardShortcuts.ts

@@ -1,93 +1 @@
-import { useMemo } from "react";
-import { useHotkeys } from "react-hotkeys-hook";
-
-interface ShortcutConfig {
-  /**
-   * The key to trigger the shortcut (e.g., 'b', 'k', 'Enter').
-   * Case-insensitive. Space-separated for sequences.
-   */
-  key: string;
-  /**
-   * Whether the Ctrl key (Windows/Linux) or Command key (Mac) must be pressed.
-   */
-  ctrlOrMeta?: boolean;
-  /**
-   * Whether the Alt key must be pressed.
-   */
-  alt?: boolean;
-  /**
-   * Whether the Shift key must be pressed.
-   */
-  shift?: boolean;
-  /**
-   * Callback when the shortcut is triggered.
-   */
-  handler: (event: KeyboardEvent) => void;
-  /**
-   * Optional description for documentation or UI hints.
-   */
-  description?: string;
-  /**
-   * Whether to allow triggering even when focused on an input.
-   * Default is false.
-   */
-  allowInInputs?: boolean;
-}
-
-function getHotkeyValue(shortcut: ShortcutConfig): string {
-  const parts: string[] = [];
-  if (shortcut.ctrlOrMeta) {
-    parts.push("mod");
-  }
-  if (shortcut.alt) {
-    parts.push("alt");
-  }
-  if (shortcut.shift) {
-    parts.push("shift");
-  }
-
-  const cleanKey = shortcut.key.trim().toLowerCase();
-  if (cleanKey.includes(" ")) {
-    parts.push(cleanKey.split(/\s+/).join(">"));
-  } else {
-    parts.push(cleanKey);
-  }
-  return parts.join("+");
-}
-
-/**
- * A hook to register global keyboard shortcuts using react-hotkeys-hook.
- */
-export function useKeyboardShortcuts(shortcuts: ShortcutConfig[]) {
-  const hotkeyMap = useMemo(() => {
-    return shortcuts.map((s) => ({
-      hotkey: getHotkeyValue(s),
-      shortcut: s,
-    }));
-  }, [shortcuts]);
-
-  const hotkeysList = useMemo(() => hotkeyMap.map((h) => h.hotkey), [hotkeyMap]);
-
-  useHotkeys(
-    hotkeysList,
-    (event, handler) => {
-      const target = event.target as HTMLElement;
-      const isInput =
-        target?.tagName === "INPUT" || target?.tagName === "TEXTAREA" || target?.isContentEditable;
-
-      const matched = hotkeyMap.find((h) => h.hotkey === handler.hotkey);
-      if (matched) {
-        if (isInput && !matched.shortcut.allowInInputs) {
-          return;
-        }
-        event.preventDefault();
-        matched.shortcut.handler(event);
-      }
-    },
-    {
-      enableOnFormTags: true,
-      enableOnContentEditable: true,
-    },
-    [hotkeyMap]
-  );
-}
+export {};

apps/web/app/root.tsx

@@ -22,7 +22,7 @@ import { STORAGE_KEYS } from "@kreozalabs/kei-core";
 import { registerPWA } from "./utils/pwa";
 import { SyncListener } from "./components/SyncListener";
 import { ActionInputModalProvider } from "./providers/ActionInputModalContext";
-import { useKeyboardShortcuts } from "./hooks/useKeyboardShortcuts";
+import { useHotkeys } from "react-hotkeys-hook";
 
 export function Layout({ children }: { children: React.ReactNode }) {
   useEffect(() => {
@@ -70,19 +70,19 @@ export function Layout({ children }: { children: React.ReactNode }) {
 export default function App() {
   const navigate = useNavigate();
 
-  useKeyboardShortcuts([
-    {
-      key: "g>s>t",
-      handler: () => navigate("/app/settings"),
-      description: "Go to Settings",
-    },
-    {
-      key: "k",
-      ctrlOrMeta: true,
-      handler: () => console.log("Search..."),
-      description: "Search",
-    },
-  ]);
+  // Navigation shortcuts
+  useHotkeys("g>s>t", () => navigate("/app/settings"), { preventDefault: true });
+  useHotkeys("g>d>t", () => navigate("/app/calendar/day"), { preventDefault: true });
+  useHotkeys("g>w>t", () => navigate("/app/calendar/week"), { preventDefault: true });
+  useHotkeys("g>c>t", () => navigate("/app/calendar/month"), { preventDefault: true });
+  useHotkeys("g>y>t", () => navigate("/app/calendar/year"), { preventDefault: true });
+  useHotkeys("g>i>t", () => navigate("/app/calendar/inbox"), { preventDefault: true });
+  useHotkeys("g>t>t", () => navigate("/app/calendar/day"), { preventDefault: true });
+  useHotkeys("g>a>t", () => navigate("/app/calendar/agenda"), { preventDefault: true });
+  useHotkeys("g>l>t", () => navigate("/app/calendar/lists"), { preventDefault: true });
+
+  // Other shortcuts
+  useHotkeys("mod+k", () => console.log("Search..."), { preventDefault: true });
 
   return (
     <QueryProvider>

apps/web/app/routes/app/dashboard.tsx

@@ -12,7 +12,6 @@ import { CalendarView } from "./dashboard/views/CalendarView";
 import { DashboardHeader } from "@/components/dashboard/DashboardHeader";
 import { AppPage } from "@/components/layout/AppPage";
 import { CalendarSkeleton } from "@/components/CalendarSkeleton";
-import { useKeyboardShortcuts } from "@/hooks/useKeyboardShortcuts";
 
 const DashboardShell = memo(function DashboardShell() {
   const {
@@ -30,14 +29,6 @@ const DashboardShell = memo(function DashboardShell() {
 
   const { setViewMode } = useDashboardContext();
 
-  useKeyboardShortcuts([
-    { key: "g>d>t", handler: () => setViewMode("day"), description: "Go to Day View" },
-    { key: "g>w>t", handler: () => setViewMode("week"), description: "Go to Week View" },
-    { key: "g>c>t", handler: () => setViewMode("month"), description: "Go to Calendar" },
-    { key: "g>i>t", handler: () => setViewMode("inbox"), description: "Go to Inbox" },
-    { key: "g>t>t", handler: () => setViewMode("day"), description: "Go to Timeline" },
-  ]);
-
   useEffect(() => {
     document.title = `Kei︱Timeline — ${formatTitleDate(parseDateString(selectedDate))}`; // TODO: Add Weekday
   }, [selectedDate]);