Adds keyboard shortcut to toggle project list

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"

src/common/utils/isMac.ts

@@ -0,0 +1,5 @@
+const isMac = () => {
+  return  window.navigator.userAgent.toLowerCase().includes("mac")
+}
+
+export default isMac

src/common/utils/useKeyboardShortcut.ts

@@ -0,0 +1,19 @@
+"use client"
+
+import { useEffect } from "react"
+
+const useKeyboardShortcut = (
+  handleKeyDown: (event: KeyboardEvent) => void,
+  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+  dependencies: any[]
+) => {
+  useEffect(() => {
+    window.addEventListener("keydown", handleKeyDown)
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown)
+    }
+  /* eslint-disable-next-line react-hooks/exhaustive-deps */
+  }, [handleKeyDown, ...dependencies])
+}
+
+export default useKeyboardShortcut

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 (
     <Box
@@ -31,22 +44,26 @@ export default function SecondaryHeader({
     >
       <Box sx={{ display: "flex", alignItems: "center", padding: 2 }}>
         {showOpenSidebar &&
-          <IconButton
-            color="primary"
-            onClick={() => onToggleSidebarOpen(true)}
-            edge="start"
-          >
-            <FontAwesomeIcon icon={faBars} size="sm" style={{ aspectRatio: 1 }} />
-          </IconButton>
+          <Tooltip title={`Show Projects${openCloseShortcutString}`}>
+            <IconButton
+              color="primary"
+              onClick={() => onToggleSidebarOpen(true)}
+              edge="start"
+            >
+              <FontAwesomeIcon icon={faBars} size="sm" style={{ aspectRatio: 1 }} />
+            </IconButton>
+          </Tooltip>
         }
         {showCloseSidebar &&
-          <IconButton
-            color="primary"
-            onClick={() => onToggleSidebarOpen(false)}
-            edge="start"
-          >
-            <FontAwesomeIcon icon={faChevronLeft} size="sm" style={{ aspectRatio: 1 }} />
-          </IconButton>
+          <Tooltip title={`Hide Projects${openCloseShortcutString}`}>
+            <IconButton
+              color="primary"
+              onClick={() => onToggleSidebarOpen(false)}
+              edge="start"
+            >
+              <FontAwesomeIcon icon={faChevronLeft} size="sm" style={{ aspectRatio: 1 }} />
+            </IconButton>
+          </Tooltip>
         }
         <Box sx={{ display: "flex", flexGrow: 1, justifyContent: "end" }}> 
           {trailingItem}