From 986848adb30f7d2f4901bb629106ec8e1eabb3cf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Simon=20St=C3=B8vring?= Date: Wed, 24 Jul 2024 15:44:18 +0200 Subject: [PATCH 1/3] Adds keyboard shortcut to toggle project list --- src/common/utils/index.ts | 2 + src/common/utils/isMac.ts | 5 ++ src/common/utils/useKeyboardShortcut.ts | 17 +++++++ .../sidebar/view/base/SecondaryHeader.tsx | 47 +++++++++++++------ 4 files changed, 56 insertions(+), 15 deletions(-) create mode 100644 src/common/utils/isMac.ts create mode 100644 src/common/utils/useKeyboardShortcut.ts diff --git a/src/common/utils/index.ts b/src/common/utils/index.ts index d8b888cd..9d51c208 100644 --- a/src/common/utils/index.ts +++ b/src/common/utils/index.ts @@ -4,3 +4,5 @@ export { default as ZodJSONCoder } from "./ZodJSONCoder" export { default as listFromCommaSeparatedString } from "./listFromCommaSeparatedString" export { default as env } from "./env" export { default as getBaseFilename } from "./getBaseFilename" +export { default as isMac } from "./isMac" +export { default as useKeyboardShortcut } from "./useKeyboardShortcut" diff --git a/src/common/utils/isMac.ts b/src/common/utils/isMac.ts new file mode 100644 index 00000000..4864bfa5 --- /dev/null +++ b/src/common/utils/isMac.ts @@ -0,0 +1,5 @@ +const isMac = () => { + return window.navigator.userAgent.toLowerCase().includes("mac") +} + +export default isMac \ No newline at end of file diff --git a/src/common/utils/useKeyboardShortcut.ts b/src/common/utils/useKeyboardShortcut.ts new file mode 100644 index 00000000..aaf59881 --- /dev/null +++ b/src/common/utils/useKeyboardShortcut.ts @@ -0,0 +1,17 @@ +"use client" + +import { useEffect } from "react" + +const useKeyboardShortcut = ( + handleKeyDown: (event: KeyboardEvent) => void, + dependencies: any[] +) => { + useEffect(() => { + window.addEventListener("keydown", handleKeyDown) + return () => { + window.removeEventListener("keydown", handleKeyDown) + } + }, dependencies) +} + +export default useKeyboardShortcut \ No newline at end of file diff --git a/src/features/sidebar/view/base/SecondaryHeader.tsx b/src/features/sidebar/view/base/SecondaryHeader.tsx index a906f589..32048015 100644 --- a/src/features/sidebar/view/base/SecondaryHeader.tsx +++ b/src/features/sidebar/view/base/SecondaryHeader.tsx @@ -1,9 +1,10 @@ import { ReactNode } from "react" import { SxProps } from "@mui/system" -import { Box, Divider, IconButton } from "@mui/material" +import { Box, Divider, IconButton, Tooltip } from "@mui/material" import { useTheme } from "@mui/material/styles" import { FontAwesomeIcon } from "@fortawesome/react-fontawesome" import { faBars, faChevronLeft } from "@fortawesome/free-solid-svg-icons" +import { isMac, useKeyboardShortcut } from "@/common" export default function SecondaryHeader({ showOpenSidebar, @@ -20,6 +21,18 @@ export default function SecondaryHeader({ children?: ReactNode sx?: SxProps }) { + useKeyboardShortcut(event => { + const isActionKey = isMac() ? event.metaKey : event.ctrlKey + if (isActionKey && event.key === ".") { + event.preventDefault() + if (showOpenSidebar) { + onToggleSidebarOpen(true) + } else if (showCloseSidebar) { + onToggleSidebarOpen(false) + } + } + }, [showOpenSidebar, showCloseSidebar, onToggleSidebarOpen]) + const openCloseShortcutString = isMac() ? " (⌘ + .)" : "(^ + .)" const theme = useTheme() return ( {showOpenSidebar && - onToggleSidebarOpen(true)} - edge="start" - > - - + + onToggleSidebarOpen(true)} + edge="start" + > + + + } {showCloseSidebar && - onToggleSidebarOpen(false)} - edge="start" - > - - + + onToggleSidebarOpen(false)} + edge="start" + > + + + } {trailingItem} From 8d127df390db1f772cd2294517f3a201f8e3bff0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Simon=20St=C3=B8vring?= Date: Wed, 24 Jul 2024 15:49:39 +0200 Subject: [PATCH 2/3] Fixes linting error --- src/common/utils/useKeyboardShortcut.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/common/utils/useKeyboardShortcut.ts b/src/common/utils/useKeyboardShortcut.ts index aaf59881..e3aa9bea 100644 --- a/src/common/utils/useKeyboardShortcut.ts +++ b/src/common/utils/useKeyboardShortcut.ts @@ -4,6 +4,7 @@ import { useEffect } from "react" const useKeyboardShortcut = ( handleKeyDown: (event: KeyboardEvent) => void, + /* eslint-disable-next-line @typescript-eslint/no-explicit-any */ dependencies: any[] ) => { useEffect(() => { From 84b6248798d79aa9ef59c8c2e970aeac8bda506e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Simon=20St=C3=B8vring?= Date: Wed, 24 Jul 2024 15:52:44 +0200 Subject: [PATCH 3/3] Fixes linting error --- src/common/utils/useKeyboardShortcut.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/common/utils/useKeyboardShortcut.ts b/src/common/utils/useKeyboardShortcut.ts index e3aa9bea..afc377f2 100644 --- a/src/common/utils/useKeyboardShortcut.ts +++ b/src/common/utils/useKeyboardShortcut.ts @@ -12,7 +12,8 @@ const useKeyboardShortcut = ( return () => { window.removeEventListener("keydown", handleKeyDown) } - }, dependencies) + /* eslint-disable-next-line react-hooks/exhaustive-deps */ + }, [handleKeyDown, ...dependencies]) } export default useKeyboardShortcut \ No newline at end of file