feat(about): add hotkeys list (#4165)

packages/definitions/src/hotkeys.ts

@@ -0,0 +1,6 @@
+export const hotkeys = {
+  toggleBoardEdit: "mod+e",
+  toggleColorScheme: "mod+j",
+  saveNotebook: "mod+s",
+  openSpotlight: "mod+k",
+};

packages/definitions/src/index.ts

@@ -13,3 +13,4 @@ export * from "./cookie";
 export * from "./search-engine";
 export * from "./onboarding";
 export * from "./emptysuperjson";
+export * from "./hotkeys";

packages/spotlight/src/components/spotlight.tsx

@@ -6,6 +6,7 @@ import { ActionIcon, Center, Group, Kbd } from "@mantine/core";
 import { Spotlight as MantineSpotlight } from "@mantine/spotlight";
 import { IconQuestionMark, IconSearch, IconX } from "@tabler/icons-react";
 
+import { hotkeys } from "@homarr/definitions";
 import type { TranslationObject } from "@homarr/translation";
 import { useI18n } from "@homarr/translation/client";
 
@@ -49,6 +50,7 @@ const SpotlightWithActiveMode = ({ modeState, activeMode }: SpotlightWithActiveM
 
   return (
     <MantineSpotlight.Root
+      shortcut={hotkeys.openSpotlight}
       yOffset={8}
       onSpotlightClose={() => {
         setMode(defaultMode);

packages/translation/src/lang/en.json

@@ -3446,6 +3446,21 @@
           "libraries": {
             "title": "Libraries",
             "subtitle": "{count} used in the Code of Homarr"
+          },
+          "hotkeys": {
+            "title": "Hotkeys",
+            "subtitle": "Keyboard shortcuts to enhance your workflow",
+            "field": {
+              "shortcut": "Shortcut",
+              "action": "Action"
+            },
+            "action": {
+              "toggleBoardEdit": "Toggle board edit mode",
+              "toggleColorScheme": "Toggle light/dark mode",
+              "saveNotebook": "Save notebook (only inside notebook widget)",
+              "openSpotlight": "Open search"
+            },
+            "note": "Tip: Mod refers to both Ctrl key and ⌘ key on macOS"
           }
         }
       }

packages/widgets/src/notebook/notebook.tsx

@@ -72,6 +72,7 @@ import "./notebook.css";
 import { useSession } from "@homarr/auth/client";
 import { constructBoardPermissions } from "@homarr/auth/shared";
 import { useRequiredBoard } from "@homarr/boards/context";
+import { hotkeys } from "@homarr/definitions";
 import { useConfirmModal } from "@homarr/modals";
 
 const iconProps = {
@@ -266,7 +267,7 @@ export function Notebook({ options, setOptions, isEditMode, boardId, itemId }: W
         p={0}
         mt={0}
         h="100%"
-        onKeyDown={isEditing ? getHotkeyHandler([["mod+s", handleEditToggle]]) : undefined}
+        onKeyDown={isEditing ? getHotkeyHandler([[hotkeys.saveNotebook, handleEditToggle]]) : undefined}
         editor={editor}
         styles={(theme) => ({
           root: {