feat(shortcut): Keyboard Navigation (#168)

* chore: remove sliding menu

* feat(ui): sheet

* feat: shortcut component

* chore: register new shortcut component to layout

* fix: react attr naming

* fix: set default to false for shortcut

* feat(store): keydown-manager

* feat(hooks): keyboard manager

* chore: use util from base for la-editor

* chore: use util from base for minimal-tiptap-editor

* chore(utils): keyboard

* chore: use new keyboard manager

* fix: uniqueness of certain component

* feat: global key handler

* chore: implement new key handler

web/hooks/use-keyboard-manager.ts

@@ -0,0 +1,38 @@
+import { useAtom } from "jotai"
+import { useEffect, useCallback } from "react"
+import { keyboardDisableSourcesAtom } from "@/store/keydown-manager"
+
+export function useKeyboardManager(sourceId: string) {
+	const [disableSources, setDisableSources] = useAtom(keyboardDisableSourcesAtom)
+
+	useEffect(() => {
+		const handleKeyDown = (event: KeyboardEvent) => {
+			if (disableSources.size > 0) {
+				event.preventDefault()
+			}
+		}
+
+		window.addEventListener("keydown", handleKeyDown)
+		return () => window.removeEventListener("keydown", handleKeyDown)
+	}, [disableSources])
+
+	const disableKeydown = useCallback(
+		(disable: boolean) => {
+			console.log(`${sourceId} disable:`, disable)
+			setDisableSources(prev => {
+				const next = new Set(prev)
+				if (disable) {
+					next.add(sourceId)
+				} else {
+					next.delete(sourceId)
+				}
+				return next
+			})
+		},
+		[setDisableSources, sourceId]
+	)
+
+	const isKeyboardDisabled = disableSources.size > 0
+
+	return { disableKeydown, isKeyboardDisabled }
+}

web/hooks/use-keydown-listener.ts

@@ -0,0 +1,21 @@
+import { useAtomValue } from "jotai"
+import { useEffect, useCallback } from "react"
+import { keyboardDisableSourcesAtom } from "@/store/keydown-manager"
+
+export function useKeydownListener(callback: (event: KeyboardEvent) => void) {
+	const disableSources = useAtomValue(keyboardDisableSourcesAtom)
+
+	const handleKeyDown = useCallback(
+		(event: KeyboardEvent) => {
+			if (disableSources.size === 0) {
+				callback(event)
+			}
+		},
+		[disableSources, callback]
+	)
+
+	useEffect(() => {
+		window.addEventListener("keydown", handleKeyDown)
+		return () => window.removeEventListener("keydown", handleKeyDown)
+	}, [handleKeyDown])
+}