⌨️ worxpace Add keyboard shortcuts (#68)

Author: steeeee0223

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## Version `1.0.3`
 
+- `worxpace` Add keyboard shortcuts: settings panel, search palate, theme toggle
 - `ui` Update components: `Tabs`, `DropdownMenu`, `Popover`
 - `repo` Upgrade packages: `react`, `typescript`, `turbo`, `vitest`, `testing-library`, `eslint` plugins
 - `repo` Setup test coverage

apps/worxpace/package.json

@@ -34,6 +34,7 @@
     "next": "^14.2.3",
     "react": "18.3.1",
     "react-dom": "18.3.1",
+    "react-hotkeys-hook": "^4.5.0",
     "react-textarea-autosize": "^8.5.3",
     "sonner": "^1.3.1",
     "swr": "^2.2.5",

apps/worxpace/src/app/(platform)/(tools)/_components/sidebar.tsx

@@ -6,14 +6,14 @@
 import {
   forwardRef,
   useCallback,
-  useEffect,
   type ForwardedRef,
   type MouseEventHandler,
 } from "react";
 import { useRouter } from "next/navigation";
 import { useAuth } from "@clerk/nextjs";
 // import { useAuth, useOrganizationList } from "@clerk/nextjs";
 import { ChevronsLeft } from "lucide-react";
+import { useHotkeys } from "react-hotkeys-hook";
 
 import { Hint, CRUDItem as Item, useModal } from "@acme/ui/custom";
 import { cn } from "@acme/ui/lib";
@@ -22,7 +22,12 @@ import {
   WorkspaceSwitcher,
   type WorkspaceSwitcherProps,
 } from "@acme/ui/notion";
-import { Popover, PopoverContent, PopoverTrigger } from "@acme/ui/shadcn";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+  useTheme,
+} from "@acme/ui/shadcn";
 
 import { SearchCommand, SettingsModal } from "~/components/modal";
 import { theme } from "~/constants/theme";
@@ -89,18 +94,20 @@ export const Sidebar = forwardRef(function Sidebar(
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [fetchSearchData],
   );
-
-  useEffect(() => {
-    const down = (e: KeyboardEvent) => {
-      if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
-        e.preventDefault();
-        handleSearch();
-      }
-    };
-
-    addEventListener("keydown", down);
-    return () => removeEventListener("keydown", down);
-  }, [handleSearch]);
+  /** Key events */
+  const { theme: activeTheme, setTheme } = useTheme();
+  const shortcutOptions = { preventDefault: true };
+  useHotkeys(["meta+k", "shift+meta+k"], handleSearch, shortcutOptions);
+  useHotkeys(
+    ["meta+comma", "shift+meta+comma"],
+    handleSettings,
+    shortcutOptions,
+  );
+  useHotkeys(
+    "shift+meta+l",
+    () => setTheme(activeTheme === "dark" ? "light" : "dark"),
+    shortcutOptions,
+  );
 
   return (
     <aside

packages/ui/src/components/ui/theme.tsx

@@ -39,4 +39,4 @@ function ThemeToggle() {
   );
 }
 
-export { ThemeProvider, ThemeToggle };
+export { ThemeProvider, ThemeToggle, useTheme };