feat: add hotkeys (#986)

apps/nextjs/src/app/[locale]/boards/(content)/_header-actions.tsx

@@ -2,6 +2,7 @@
 
 import { useCallback } from "react";
 import { Group, Menu } from "@mantine/core";
+import { useHotkeys } from "@mantine/hooks";
 import {
   IconBox,
   IconBoxAlignTop,
@@ -137,6 +138,8 @@ const EditModeMenu = () => {
     setEditMode(true);
   }, [board, isEditMode, saveBoard, setEditMode]);
 
+  useHotkeys([["mod+e", toggle]]);
+
   return (
     <HeaderButton onClick={toggle} loading={isPending}>
       {isEditMode ? <IconPencilOff stroke={1.5} /> : <IconPencil stroke={1.5} />}

apps/nextjs/src/components/user-avatar-menu.tsx

@@ -5,7 +5,7 @@ import { useCallback, useEffect } from "react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { Center, Menu, Stack, Text, useMantineColorScheme } from "@mantine/core";
-import { useTimeout } from "@mantine/hooks";
+import { useHotkeys, useTimeout } from "@mantine/hooks";
 import {
   IconCheck,
   IconHome,
@@ -33,6 +33,7 @@ interface UserAvatarMenuProps {
 export const UserAvatarMenu = ({ children }: UserAvatarMenuProps) => {
   const t = useScopedI18n("common.userAvatar.menu");
   const { colorScheme, toggleColorScheme } = useMantineColorScheme();
+  useHotkeys([["mod+J", toggleColorScheme]]);
 
   const ColorSchemeIcon = colorScheme === "dark" ? IconSun : IconMoon;
 

packages/widgets/src/notebook/notebook.tsx

@@ -15,7 +15,7 @@ import {
   useMantineColorScheme,
   useMantineTheme,
 } from "@mantine/core";
-import { useDisclosure } from "@mantine/hooks";
+import { getHotkeyHandler, useDisclosure } from "@mantine/hooks";
 import { Link, RichTextEditor, useRichTextEditorContext } from "@mantine/tiptap";
 import {
   IconCheck,
@@ -231,6 +231,7 @@ export function Notebook({ options, isEditMode, boardId, itemId }: WidgetCompone
         p={0}
         mt={0}
         h="100%"
+        onKeyDown={isEditing ? getHotkeyHandler([["mod+s", handleEditToggle]]) : undefined}
         editor={editor}
         styles={(theme) => ({
           root: {