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
2026-01-12 12:20:23 +01:00 · 2024-09-19 21:17:11 +07:00
parent 0df105f186
commit 8eed3f8cc2
23 changed files with 686 additions and 515 deletions
--- a/web/app/(pages)/layout.tsx
+++ b/web/app/(pages)/layout.tsx
@@ -3,8 +3,9 @@
 import { Sidebar } from "@/components/custom/sidebar/sidebar"
 import { CommandPalette } from "@/components/custom/command-palette/command-palette"
 import { useAccountOrGuest } from "@/lib/providers/jazz-provider"
-import SlidingMenu from "@/components/ui/sliding-menu"
 import { LearnAnythingOnboarding } from "@/components/custom/learn-anything-onboarding"
+import { Shortcut } from "@/components/custom/Shortcut/shortcut"
+import { GlobalKeydownHandler } from "@/components/custom/global-keydown-handler"

 export default function PageLayout({ children }: { children: React.ReactNode }) {
 	const { me } = useAccountOrGuest()
@@ -13,11 +14,16 @@ export default function PageLayout({ children }: { children: React.ReactNode })
 		<div className="flex h-full min-h-full w-full flex-row items-stretch overflow-hidden">
 			<Sidebar />
 			<LearnAnythingOnboarding />
+			<GlobalKeydownHandler />

-			{me._type !== "Anonymous" && <CommandPalette />}
+			{me._type !== "Anonymous" && (
+				<>
+					<CommandPalette />
+					<Shortcut />
+				</>
+			)}

 			<div className="relative flex min-w-0 flex-1 flex-col">
-				<SlidingMenu />
 				<main className="relative flex flex-auto flex-col place-items-stretch overflow-auto lg:my-2 lg:mr-2 lg:rounded-md lg:border">
 					{children}
 				</main>
--- a/web/components/custom/Shortcut/shortcut.tsx
+++ b/web/components/custom/Shortcut/shortcut.tsx
@@ -0,0 +1,155 @@
+"use client"
+
+import * as React from "react"
+import * as SheetPrimitive from "@radix-ui/react-dialog"
+import { atom, useAtom } from "jotai"
+import { Sheet, SheetPortal, SheetOverlay, SheetTitle, sheetVariants, SheetDescription } from "@/components/ui/sheet"
+import { LaIcon } from "../la-icon"
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { useKeyboardManager } from "@/hooks/use-keyboard-manager"
+
+export const showShortcutAtom = atom(false)
+
+type ShortcutItem = {
+	label: string
+	keys: string[]
+	then?: string[]
+}
+
+type ShortcutSection = {
+	title: string
+	shortcuts: ShortcutItem[]
+}
+
+const SHORTCUTS: ShortcutSection[] = [
+	{
+		title: "General",
+		shortcuts: [
+			{ label: "Open command menu", keys: ["⌘", "k"] },
+			{ label: "Log out", keys: ["⌥", "⇧", "q"] }
+		]
+	},
+	{
+		title: "Navigation",
+		shortcuts: [
+			{ label: "Go to link", keys: ["G"], then: ["L"] },
+			{ label: "Go to page", keys: ["G"], then: ["P"] },
+			{ label: "Go to topic", keys: ["G"], then: ["T"] }
+		]
+	}
+]
+
+const ShortcutKey: React.FC<{ keyChar: string }> = ({ keyChar }) => (
+	<kbd
+		aria-hidden="true"
+		className="inline-flex size-5 items-center justify-center rounded border font-sans text-xs capitalize"
+	>
+		{keyChar}
+	</kbd>
+)
+
+const ShortcutItem: React.FC<ShortcutItem> = ({ label, keys, then }) => (
+	<div className="flex flex-row items-center gap-2">
+		<dt className="flex grow items-center">
+			<span className="text-muted-foreground text-left text-sm">{label}</span>
+		</dt>
+		<dd className="flex items-end">
+			<span className="text-left">
+				<span
+					aria-label={keys.join(" ") + (then ? ` then ${then.join(" ")}` : "")}
+					className="inline-flex items-center gap-1"
+				>
+					{keys.map((key, index) => (
+						<ShortcutKey key={index} keyChar={key} />
+					))}
+					{then && (
+						<>
+							<span className="text-muted-foreground text-xs">then</span>
+							{then.map((key, index) => (
+								<ShortcutKey key={`then-${index}`} keyChar={key} />
+							))}
+						</>
+					)}
+				</span>
+			</span>
+		</dd>
+	</div>
+)
+
+const ShortcutSection: React.FC<ShortcutSection> = ({ title, shortcuts }) => (
+	<section className="flex flex-col gap-2">
+		<h2 className="inline-flex gap-1.5 text-sm">{title}</h2>
+		<dl className="m-0 flex flex-col gap-2">
+			{shortcuts.map((shortcut, index) => (
+				<ShortcutItem key={index} {...shortcut} />
+			))}
+		</dl>
+	</section>
+)
+
+export function Shortcut() {
+	const [showShortcut, setShowShortcut] = useAtom(showShortcutAtom)
+	const [searchQuery, setSearchQuery] = React.useState("")
+
+	const { disableKeydown } = useKeyboardManager("shortcutSection")
+
+	React.useEffect(() => {
+		disableKeydown(showShortcut)
+	}, [showShortcut, disableKeydown])
+
+	const filteredShortcuts = React.useMemo(() => {
+		if (!searchQuery) return SHORTCUTS
+
+		return SHORTCUTS.map(section => ({
+			...section,
+			shortcuts: section.shortcuts.filter(shortcut => shortcut.label.toLowerCase().includes(searchQuery.toLowerCase()))
+		})).filter(section => section.shortcuts.length > 0)
+	}, [searchQuery])
+
+	return (
+		<Sheet open={showShortcut} onOpenChange={setShowShortcut}>
+			<SheetPortal>
+				<SheetOverlay className="bg-black/10" />
+				<SheetPrimitive.Content
+					className={cn(sheetVariants({ side: "right" }), "m-3 h-[calc(100vh-24px)] rounded-md p-0")}
+				>
+					<header className="flex flex-[0_0_auto] items-center gap-3 px-5 pb-4 pt-5">
+						<SheetTitle className="text-base font-medium">Keyboard Shortcuts</SheetTitle>
+						<SheetDescription className="sr-only">Quickly navigate around the app</SheetDescription>
+
+						<div className="flex-auto"></div>
+
+						<SheetPrimitive.Close className={cn(buttonVariants({ size: "icon", variant: "ghost" }), "size-6 p-0")}>
+							<LaIcon name="X" className="text-muted-foreground size-5" />
+							<span className="sr-only">Close</span>
+						</SheetPrimitive.Close>
+					</header>
+
+					<div className="flex flex-col gap-1 px-5 pb-6">
+						<form className="relative flex items-center">
+							<LaIcon name="Search" className="text-muted-foreground absolute left-3 size-4" />
+							<Input
+								placeholder="Search shortcuts"
+								className="border-muted-foreground/50 focus-visible:border-muted-foreground h-10 pl-10 focus-visible:ring-0"
+								value={searchQuery}
+								onChange={e => setSearchQuery(e.target.value)}
+							/>
+						</form>
+					</div>
+
+					<main className="flex-auto overflow-y-auto overflow-x-hidden [scrollbar-gutter:auto]">
+						<div className="px-5 pb-5">
+							<div role="region" aria-live="polite" className="flex flex-col gap-7">
+								{filteredShortcuts.map((section, index) => (
+									<ShortcutSection key={index} {...section} />
+								))}
+							</div>
+						</div>
+					</main>
+				</SheetPrimitive.Content>
+			</SheetPortal>
+		</Sheet>
+	)
+}
--- a/web/components/custom/command-palette/command-palette.tsx
+++ b/web/components/custom/command-palette/command-palette.tsx
@@ -9,6 +9,7 @@ import { searchSafeRegExp } from "@/lib/utils"
 import { GraphNode } from "@/components/routes/public/PublicHomeRoute"
 import { useCommandActions } from "./hooks/use-command-actions"
 import { atom, useAtom } from "jotai"
+import { useKeydownListener } from "@/hooks/use-keydown-listener"

 const graph_data_promise = import("@/components/routes/public/graph-data.json").then(a => a.default)

@@ -29,17 +30,17 @@ export function CommandPalette() {

 	const raw_graph_data = React.use(graph_data_promise) as GraphNode[]

-	React.useEffect(() => {
-		const down = (e: KeyboardEvent) => {
+	const handleKeydown = React.useCallback(
+		(e: KeyboardEvent) => {
 			if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
 				e.preventDefault()
 				setOpen(prev => !prev)
 			}
-		}
+		},
+		[setOpen]
+	)

-		document.addEventListener("keydown", down)
-		return () => document.removeEventListener("keydown", down)
-	}, [setOpen])
+	useKeydownListener(handleKeydown)

 	const bounce = React.useCallback(() => {
 		if (dialogRef.current) {
@@ -118,11 +119,9 @@ export function CommandPalette() {

 		if (activePage === "home") {
 			if (!inputValue) {
-				// Only show items from the home object when there's no search input
 				return commandGroups.home
 			}

-			// When there's a search input, search across all categories
 			const allGroups = [...Object.values(commandGroups).flat(), personalLinks, personalPages, topics]

 			return allGroups
@@ -133,7 +132,6 @@ export function CommandPalette() {
 				.filter(group => group.items.length > 0)
 		}

-		// Handle other active pages (searchLinks, searchPages, etc.)
 		switch (activePage) {
 			case "searchLinks":
 				return [...commandGroups.searchLinks, { items: filterItems(personalLinks.items, searchRegex) }]
--- a/web/components/custom/discordIcon.tsx
+++ b/web/components/custom/discordIcon.tsx
@@ -3,21 +3,21 @@ export const DiscordIcon = () => (
 		<path
 			d="M5.9143 7.38378L4.93679 14.6174C4.82454 15.448 5.24219 16.2606 5.983 16.6528L8.99995 18.25L9.99995 15.75C9.99995 15.75 10.6562 16.25 11.9999 16.25C13.3437 16.25 13.9999 15.75 13.9999 15.75L14.9999 18.25L18.0169 16.6528C18.7577 16.2606 19.1754 15.448 19.0631 14.6174L18.0856 7.38378C18.0334 6.99739 17.7613 6.67658 17.3887 6.56192L14.7499 5.75003V6.25003C14.7499 6.80232 14.3022 7.25003 13.7499 7.25003H10.2499C9.69766 7.25003 9.24995 6.80232 9.24995 6.25003V5.75003L6.61122 6.56192C6.23855 6.67658 5.96652 6.99739 5.9143 7.38378Z"
 			stroke="currentColor"
-			stroke-width="1.5"
-			stroke-linecap="round"
-			stroke-linejoin="round"
+			strokeWidth="1.5"
+			strokeLinecap="round"
+			strokeLinejoin="round"
 		></path>
 		<path
 			d="M10.5 12C10.5 12.2761 10.2761 12.5 10 12.5C9.72386 12.5 9.5 12.2761 9.5 12C9.5 11.7239 9.72386 11.5 10 11.5C10.2761 11.5 10.5 11.7239 10.5 12Z"
 			stroke="currentColor"
-			stroke-linecap="round"
-			stroke-linejoin="round"
+			strokeLinecap="round"
+			strokeLinejoin="round"
 		></path>
 		<path
 			d="M14.5 12C14.5 12.2761 14.2761 12.5 14 12.5C13.7239 12.5 13.5 12.2761 13.5 12C13.5 11.7239 13.7239 11.5 14 11.5C14.2761 11.5 14.5 11.7239 14.5 12Z"
 			stroke="currentColor"
-			stroke-linecap="round"
-			stroke-linejoin="round"
+			strokeLinecap="round"
+			strokeLinejoin="round"
 		></path>
 	</svg>
 )
--- a/web/components/custom/global-keydown-handler.tsx
+++ b/web/components/custom/global-keydown-handler.tsx
@@ -0,0 +1,63 @@
+"use client"
+
+import { useState, useEffect, useCallback } from "react"
+import { useKeydownListener } from "@/hooks/use-keydown-listener"
+import { useAuth } from "@clerk/nextjs"
+import { useRouter } from "next/navigation"
+
+type Sequence = {
+	[key: string]: string
+}
+
+const SEQUENCES: Sequence = {
+	GL: "/links",
+	GP: "/pages",
+	GT: "/topics"
+}
+
+const MAX_SEQUENCE_TIME = 1000
+
+export function GlobalKeydownHandler() {
+	const [sequence, setSequence] = useState<string[]>([])
+	const { signOut } = useAuth()
+	const router = useRouter()
+
+	const resetSequence = useCallback(() => {
+		setSequence([])
+	}, [])
+
+	const checkSequence = useCallback(() => {
+		const sequenceStr = sequence.join("")
+		const route = SEQUENCES[sequenceStr]
+
+		if (route) {
+			console.log(`Navigating to ${route}...`)
+			router.push(route)
+			resetSequence()
+		}
+	}, [sequence, router, resetSequence])
+
+	useKeydownListener((e: KeyboardEvent) => {
+		// Check for logout shortcut
+		if (e.altKey && e.shiftKey && e.code === "KeyQ") {
+			signOut()
+			return
+		}
+
+		// Key sequence handling
+		const key = e.key.toUpperCase()
+		setSequence(prev => [...prev, key])
+	})
+
+	useEffect(() => {
+		checkSequence()
+
+		const timeoutId = setTimeout(() => {
+			resetSequence()
+		}, MAX_SEQUENCE_TIME)
+
+		return () => clearTimeout(timeoutId)
+	}, [sequence, checkSequence, resetSequence])
+
+	return null
+}
--- a/web/components/custom/sidebar/partial/profile-section.tsx
+++ b/web/components/custom/sidebar/partial/profile-section.tsx
@@ -1,7 +1,14 @@
-import { LaIcon } from "@/components/custom/la-icon"
-import { DiscordIcon } from "../../discordIcon"
-import { useState } from "react"
+"use client"
+
+import { useEffect, useState } from "react"
 import { SignInButton, useAuth, useUser } from "@clerk/nextjs"
+import { useAtom } from "jotai"
+import Link from "next/link"
+import { usePathname } from "next/navigation"
+import { icons } from "lucide-react"
+
+import { LaIcon } from "@/components/custom/la-icon"
+import { DiscordIcon } from "@/components/custom/discordIcon"
 import {
 	DropdownMenu,
 	DropdownMenuContent,
@@ -10,17 +17,25 @@ import {
 	DropdownMenuTrigger
 } from "@/components/ui/dropdown-menu"
 import { Avatar, AvatarImage } from "@/components/ui/avatar"
-import Link from "next/link"
-import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
-import { usePathname } from "next/navigation"
+import { cn } from "@/lib/utils"
 import { Feedback } from "./feedback"
+import { showShortcutAtom } from "@/components/custom/Shortcut/shortcut"
+import { ShortcutKey } from "@/components/minimal-tiptap/components/shortcut-key"
+import { useKeyboardManager } from "@/hooks/use-keyboard-manager"

 export const ProfileSection: React.FC = () => {
 	const { user, isSignedIn } = useUser()
 	const { signOut } = useAuth()
 	const [menuOpen, setMenuOpen] = useState(false)
 	const pathname = usePathname()
+	const [, setShowShortcut] = useAtom(showShortcutAtom)
+
+	const { disableKeydown } = useKeyboardManager("profileSection")
+
+	useEffect(() => {
+		disableKeydown(menuOpen)
+	}, [menuOpen, disableKeydown])

 	if (!isSignedIn) {
 		return (
@@ -38,88 +53,104 @@ export const ProfileSection: React.FC = () => {
 	return (
 		<div className="flex flex-col gap-px border-t border-transparent px-3 py-2 pb-3 pt-1.5">
 			<div className="flex h-10 min-w-full items-center">
-				<div className="flex min-w-0">
-					<DropdownMenu open={menuOpen} onOpenChange={setMenuOpen}>
-						<DropdownMenuTrigger asChild>
-							<Button
-								variant="ghost"
-								aria-label="Profile"
-								className="hover:bg-accent focus-visible:ring-ring hover:text-accent-foreground flex h-auto items-center gap-1.5 truncate rounded py-1 pl-1 pr-1.5 focus-visible:outline-none focus-visible:ring-1"
-							>
-								<Avatar className="size-6">
-									<AvatarImage src={user.imageUrl} alt={user.fullName || ""} />
-								</Avatar>
-								<span className="truncate text-left text-sm font-medium -tracking-wider">{user.fullName}</span>
-								<LaIcon
-									name="ChevronDown"
-									className={cn("size-4 shrink-0 transition-transform duration-300", {
-										"rotate-180": menuOpen
-									})}
-								/>
-							</Button>
-						</DropdownMenuTrigger>
-						<DropdownMenuContent className="w-56" align="start" side="top">
-							<DropdownMenuItem asChild>
-								<Link className="cursor-pointer" href="/profile">
-									<div className="relative flex flex-1 items-center gap-2">
-										<LaIcon name="CircleUser" />
-										<span className="line-clamp-1 flex-1">My profile</span>
-									</div>
-								</Link>
-							</DropdownMenuItem>
-							<DropdownMenuSeparator />
-							<DropdownMenuItem asChild>
-								<Link className="cursor-pointer" href="/onboarding">
-									<div className="relative flex flex-1 items-center gap-2">
-										<LaIcon name="LayoutList" />
-										<span className="line-clamp-1 flex-1">Onboarding</span>
-									</div>
-								</Link>
-							</DropdownMenuItem>
-							<DropdownMenuSeparator />
-
-							<DropdownMenuItem asChild>
-								<Link className="cursor-pointer" href="https://docs.learn-anything.xyz/">
-									<div className="relative flex flex-1 items-center gap-2">
-										<LaIcon name="Sticker" />
-										<span className="line-clamp-1 flex-1">Docs</span>
-									</div>
-								</Link>
-							</DropdownMenuItem>
-							<DropdownMenuSeparator />
-
-							<DropdownMenuItem asChild>
-								<Link className="cursor-pointer" href="https://github.com/learn-anything/learn-anything">
-									<div className="relative flex flex-1 items-center gap-2">
-										<LaIcon name="Github" />
-										<span className="line-clamp-1 flex-1">GitHub</span>
-									</div>
-								</Link>
-							</DropdownMenuItem>
-							<DropdownMenuSeparator />
-
-							<DropdownMenuItem asChild>
-								<Link className="cursor-pointer" href="https://discord.com/invite/bxtD8x6aNF">
-									<div className="relative -ml-1 flex flex-1 items-center gap-2">
-										<DiscordIcon />
-										<span className="line-clamp-1 flex-1">Discord</span>
-									</div>
-								</Link>
-							</DropdownMenuItem>
-							<DropdownMenuSeparator />
-
-							<DropdownMenuItem onClick={() => signOut()}>
-								<div className="relative flex flex-1 cursor-pointer items-center gap-2">
-									<LaIcon name="LogOut" />
-									<span className="line-clamp-1 flex-1">Log out</span>
-								</div>
-							</DropdownMenuItem>
-						</DropdownMenuContent>
-					</DropdownMenu>
-				</div>
-
+				<ProfileDropdown
+					user={user}
+					menuOpen={menuOpen}
+					setMenuOpen={setMenuOpen}
+					signOut={signOut}
+					setShowShortcut={setShowShortcut}
+				/>
 				<Feedback />
 			</div>
 		</div>
 	)
 }
+
+interface ProfileDropdownProps {
+	user: any
+	menuOpen: boolean
+	setMenuOpen: (open: boolean) => void
+	signOut: () => void
+	setShowShortcut: (show: boolean) => void
+}
+
+const ProfileDropdown: React.FC<ProfileDropdownProps> = ({ user, menuOpen, setMenuOpen, signOut, setShowShortcut }) => (
+	<div className="flex min-w-0">
+		<DropdownMenu open={menuOpen} onOpenChange={setMenuOpen}>
+			<DropdownMenuTrigger asChild>
+				<Button
+					variant="ghost"
+					aria-label="Profile"
+					className="hover:bg-accent focus-visible:ring-ring hover:text-accent-foreground flex h-auto items-center gap-1.5 truncate rounded py-1 pl-1 pr-1.5 focus-visible:outline-none focus-visible:ring-1"
+				>
+					<Avatar className="size-6">
+						<AvatarImage src={user.imageUrl} alt={user.fullName || ""} />
+					</Avatar>
+					<span className="truncate text-left text-sm font-medium -tracking-wider">{user.fullName}</span>
+					<LaIcon
+						name="ChevronDown"
+						className={cn("size-4 shrink-0 transition-transform duration-300", {
+							"rotate-180": menuOpen
+						})}
+					/>
+				</Button>
+			</DropdownMenuTrigger>
+			<DropdownMenuContent className="w-56" align="start" side="top">
+				<DropdownMenuItems signOut={signOut} setShowShortcut={setShowShortcut} />
+			</DropdownMenuContent>
+		</DropdownMenu>
+	</div>
+)
+
+interface DropdownMenuItemsProps {
+	signOut: () => void
+	setShowShortcut: (show: boolean) => void
+}
+
+const DropdownMenuItems: React.FC<DropdownMenuItemsProps> = ({ signOut, setShowShortcut }) => (
+	<>
+		<MenuLink href="/profile" icon="CircleUser" text="My profile" />
+		<DropdownMenuItem className="gap-2" onClick={() => setShowShortcut(true)}>
+			<LaIcon name="Keyboard" />
+			<span>Shortcut</span>
+		</DropdownMenuItem>
+		<MenuLink href="/onboarding" icon="LayoutList" text="Onboarding" />
+		<DropdownMenuSeparator />
+		<MenuLink href="https://docs.learn-anything.xyz/" icon="Sticker" text="Docs" />
+		<MenuLink href="https://github.com/learn-anything/learn-anything" icon="Github" text="GitHub" />
+		<MenuLink href="https://discord.com/invite/bxtD8x6aNF" icon={DiscordIcon} text="Discord" iconClass="-ml-1" />
+		<DropdownMenuSeparator />
+		<DropdownMenuItem onClick={signOut}>
+			<div className="relative flex flex-1 cursor-pointer items-center gap-2">
+				<LaIcon name="LogOut" />
+				<span>Log out</span>
+				<div className="absolute right-0">
+					<ShortcutKey keys={["alt", "shift", "q"]} />
+				</div>
+			</div>
+		</DropdownMenuItem>
+	</>
+)
+
+interface MenuLinkProps {
+	href: string
+	icon: keyof typeof icons | React.FC
+	text: string
+	iconClass?: string
+}
+
+const MenuLink: React.FC<MenuLinkProps> = ({ href, icon, text, iconClass = "" }) => {
+	const IconComponent = typeof icon === "string" ? icons[icon] : icon
+	return (
+		<DropdownMenuItem asChild>
+			<Link className="cursor-pointer" href={href}>
+				<div className={cn("relative flex flex-1 items-center gap-2", iconClass)}>
+					<IconComponent className="size-4" />
+					<span className="line-clamp-1 flex-1">{text}</span>
+				</div>
+			</Link>
+		</DropdownMenuItem>
+	)
+}
+
+export default ProfileSection
--- a/web/components/la-editor/components/ui/shortcut.tsx
+++ b/web/components/la-editor/components/ui/shortcut.tsx
@@ -1,6 +1,6 @@
 import * as React from "react"
 import { cn } from "@/lib/utils"
-import { getShortcutKey } from "../../lib/utils"
+import { getShortcutKey } from "@/lib/utils"

 export interface ShortcutKeyWrapperProps extends React.HTMLAttributes<HTMLSpanElement> {
 	ariaLabel: string
@@ -32,7 +32,7 @@ const ShortcutKey = React.forwardRef<HTMLSpanElement, ShortcutKeyProps>(({ class
 			{...props}
 			ref={ref}
 		>
-			{getShortcutKey(shortcut)}
+			{getShortcutKey(shortcut).symbol}
 		</kbd>
 	)
 })
--- a/web/components/la-editor/extensions/slash-command/menu-list.tsx
+++ b/web/components/la-editor/extensions/slash-command/menu-list.tsx
@@ -6,7 +6,7 @@ import { Button } from "@/components/ui/button"
 import { Separator } from "@/components/ui/separator"

 import { Command, MenuListProps } from "./types"
-import { getShortcutKeys } from "../../lib/utils"
+import { getShortcutKeys } from "@/lib/utils"
 import { Icon } from "../../components/ui/icon"
 import { PopoverWrapper } from "../../components/ui/popover-wrapper"
 import { Shortcut } from "../../components/ui/shortcut"
@@ -136,7 +136,11 @@ export const MenuList = React.forwardRef((props: MenuListProps, ref) => {
 							<Icon name={command.iconName} />
 							<span className="truncate text-sm">{command.label}</span>
 							<div className="flex flex-auto flex-row"></div>
-							<Shortcut.Wrapper ariaLabel={getShortcutKeys(command.shortcuts)}>
+							<Shortcut.Wrapper
+								ariaLabel={getShortcutKeys(command.shortcuts)
+									.map(shortcut => shortcut.readable)
+									.join(" + ")}
+							>
 								{command.shortcuts.map(shortcut => (
 									<Shortcut.Key shortcut={shortcut} key={shortcut} />
 								))}
--- a/web/components/la-editor/lib/utils/index.ts
+++ b/web/components/la-editor/lib/utils/index.ts
@@ -8,7 +8,5 @@ export function getOutput(editor: Editor, output: LAEditorProps["output"]) {
 	return ""
 }

-export * from "./keyboard"
-export * from "./platform"
 export * from "./isCustomNodeSelected"
 export * from "./isTextSelected"
--- a/web/components/la-editor/lib/utils/keyboard.ts
+++ b/web/components/la-editor/lib/utils/keyboard.ts
@@ -1,25 +0,0 @@
-import { isMacOS } from "./platform"
-
-export const getShortcutKey = (key: string) => {
-	const lowercaseKey = key.toLowerCase()
-	const macOS = isMacOS()
-
-	switch (lowercaseKey) {
-		case "mod":
-			return macOS ? "⌘" : "Ctrl"
-		case "alt":
-			return macOS ? "⌥" : "Alt"
-		case "shift":
-			return macOS ? "⇧" : "Shift"
-		default:
-			return key
-	}
-}
-
-export const getShortcutKeys = (keys: string | string[], separator: string = "") => {
-	const keyArray = Array.isArray(keys) ? keys : keys.split(/\s+/)
-	const shortcutKeys = keyArray.map(getShortcutKey)
-	return shortcutKeys.join(separator)
-}
-
-export default { getShortcutKey, getShortcutKeys }
--- a/web/components/la-editor/lib/utils/platform.ts
+++ b/web/components/la-editor/lib/utils/platform.ts
@@ -1,46 +0,0 @@
-export interface NavigatorWithUserAgentData extends Navigator {
-	userAgentData?: {
-		brands: { brand: string; version: string }[]
-		mobile: boolean
-		platform: string
-		getHighEntropyValues: (hints: string[]) => Promise<{
-			platform: string
-			platformVersion: string
-			uaFullVersion: string
-		}>
-	}
-}
-
-let isMac: boolean | undefined
-
-const getPlatform = () => {
-	const nav = navigator as NavigatorWithUserAgentData
-	if (nav.userAgentData) {
-		if (nav.userAgentData.platform) {
-			return nav.userAgentData.platform
-		}
-
-		nav.userAgentData
-			.getHighEntropyValues(["platform"])
-			.then(highEntropyValues => {
-				if (highEntropyValues.platform) {
-					return highEntropyValues.platform
-				}
-			})
-			.catch(() => {
-				return navigator.platform || ""
-			})
-	}
-
-	return navigator.platform || ""
-}
-
-export const isMacOS = () => {
-	if (isMac === undefined) {
-		isMac = getPlatform().toLowerCase().includes("mac")
-	}
-
-	return isMac
-}
-
-export default isMacOS
--- a/web/components/minimal-tiptap/components/shortcut-key.tsx
+++ b/web/components/minimal-tiptap/components/shortcut-key.tsx
@@ -1,33 +1,33 @@
-import * as React from 'react'
-import { cn } from '@/lib/utils'
-import { getShortcutKey } from '../utils'
+import * as React from "react"
+import { cn } from "@/lib/utils"
+import { getShortcutKey } from "@/lib/utils"

 export interface ShortcutKeyProps extends React.HTMLAttributes<HTMLSpanElement> {
-  keys: string[]
+	keys: string[]
 }

 export const ShortcutKey = React.forwardRef<HTMLSpanElement, ShortcutKeyProps>(({ className, keys, ...props }, ref) => {
-  const modifiedKeys = keys.map(key => getShortcutKey(key))
-  const ariaLabel = modifiedKeys.map(shortcut => shortcut.readable).join(' + ')
+	const modifiedKeys = keys.map(key => getShortcutKey(key))
+	const ariaLabel = modifiedKeys.map(shortcut => shortcut.readable).join(" + ")

-  return (
-    <span aria-label={ariaLabel} className={cn('inline-flex items-center gap-0.5', className)} {...props} ref={ref}>
-      {modifiedKeys.map(shortcut => (
-        <kbd
-          key={shortcut.symbol}
-          className={cn(
-            'inline-block min-w-2.5 text-center align-baseline font-sans text-xs font-medium capitalize text-[rgb(156,157,160)]',
+	return (
+		<span aria-label={ariaLabel} className={cn("inline-flex items-center gap-0.5", className)} {...props} ref={ref}>
+			{modifiedKeys.map(shortcut => (
+				<kbd
+					key={shortcut.symbol}
+					className={cn(
+						"inline-block min-w-2.5 text-center align-baseline font-sans text-xs font-medium capitalize text-[rgb(156,157,160)]",

-            className
-          )}
-          {...props}
-          ref={ref}
-        >
-          {shortcut.symbol}
-        </kbd>
-      ))}
-    </span>
-  )
+						className
+					)}
+					{...props}
+					ref={ref}
+				>
+					{shortcut.symbol}
+				</kbd>
+			))}
+		</span>
+	)
 })

-ShortcutKey.displayName = 'ShortcutKey'
+ShortcutKey.displayName = "ShortcutKey"
--- a/web/components/minimal-tiptap/components/toolbar-section.tsx
+++ b/web/components/minimal-tiptap/components/toolbar-section.tsx
@@ -1,112 +1,112 @@
-import * as React from 'react'
-import type { Editor } from '@tiptap/react'
-import { cn } from '@/lib/utils'
-import { CaretDownIcon } from '@radix-ui/react-icons'
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
-import { ToolbarButton } from './toolbar-button'
-import { ShortcutKey } from './shortcut-key'
-import { getShortcutKey } from '../utils'
-import type { FormatAction } from '../types'
-import type { VariantProps } from 'class-variance-authority'
-import type { toggleVariants } from '@/components/ui/toggle'
+import * as React from "react"
+import type { Editor } from "@tiptap/react"
+import { cn } from "@/lib/utils"
+import { CaretDownIcon } from "@radix-ui/react-icons"
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
+import { ToolbarButton } from "./toolbar-button"
+import { ShortcutKey } from "./shortcut-key"
+import { getShortcutKey } from "@/lib/utils"
+import type { FormatAction } from "../types"
+import type { VariantProps } from "class-variance-authority"
+import type { toggleVariants } from "@/components/ui/toggle"

 interface ToolbarSectionProps extends VariantProps<typeof toggleVariants> {
-  editor: Editor
-  actions: FormatAction[]
-  activeActions?: string[]
-  mainActionCount?: number
-  dropdownIcon?: React.ReactNode
-  dropdownTooltip?: string
-  dropdownClassName?: string
+	editor: Editor
+	actions: FormatAction[]
+	activeActions?: string[]
+	mainActionCount?: number
+	dropdownIcon?: React.ReactNode
+	dropdownTooltip?: string
+	dropdownClassName?: string
 }

 export const ToolbarSection: React.FC<ToolbarSectionProps> = ({
-  editor,
-  actions,
-  activeActions = actions.map(action => action.value),
-  mainActionCount = 0,
-  dropdownIcon,
-  dropdownTooltip = 'More options',
-  dropdownClassName = 'w-12',
-  size,
-  variant
+	editor,
+	actions,
+	activeActions = actions.map(action => action.value),
+	mainActionCount = 0,
+	dropdownIcon,
+	dropdownTooltip = "More options",
+	dropdownClassName = "w-12",
+	size,
+	variant
 }) => {
-  const { mainActions, dropdownActions } = React.useMemo(() => {
-    const sortedActions = actions
-      .filter(action => activeActions.includes(action.value))
-      .sort((a, b) => activeActions.indexOf(a.value) - activeActions.indexOf(b.value))
+	const { mainActions, dropdownActions } = React.useMemo(() => {
+		const sortedActions = actions
+			.filter(action => activeActions.includes(action.value))
+			.sort((a, b) => activeActions.indexOf(a.value) - activeActions.indexOf(b.value))

-    return {
-      mainActions: sortedActions.slice(0, mainActionCount),
-      dropdownActions: sortedActions.slice(mainActionCount)
-    }
-  }, [actions, activeActions, mainActionCount])
+		return {
+			mainActions: sortedActions.slice(0, mainActionCount),
+			dropdownActions: sortedActions.slice(mainActionCount)
+		}
+	}, [actions, activeActions, mainActionCount])

-  const renderToolbarButton = React.useCallback(
-    (action: FormatAction) => (
-      <ToolbarButton
-        key={action.label}
-        onClick={() => action.action(editor)}
-        disabled={!action.canExecute(editor)}
-        isActive={action.isActive(editor)}
-        tooltip={`${action.label} ${action.shortcuts.map(s => getShortcutKey(s).symbol).join(' ')}`}
-        aria-label={action.label}
-        size={size}
-        variant={variant}
-      >
-        {action.icon}
-      </ToolbarButton>
-    ),
-    [editor, size, variant]
-  )
+	const renderToolbarButton = React.useCallback(
+		(action: FormatAction) => (
+			<ToolbarButton
+				key={action.label}
+				onClick={() => action.action(editor)}
+				disabled={!action.canExecute(editor)}
+				isActive={action.isActive(editor)}
+				tooltip={`${action.label} ${action.shortcuts.map(s => getShortcutKey(s).symbol).join(" ")}`}
+				aria-label={action.label}
+				size={size}
+				variant={variant}
+			>
+				{action.icon}
+			</ToolbarButton>
+		),
+		[editor, size, variant]
+	)

-  const renderDropdownMenuItem = React.useCallback(
-    (action: FormatAction) => (
-      <DropdownMenuItem
-        key={action.label}
-        onClick={() => action.action(editor)}
-        disabled={!action.canExecute(editor)}
-        className={cn('flex flex-row items-center justify-between gap-4', {
-          'bg-accent': action.isActive(editor)
-        })}
-        aria-label={action.label}
-      >
-        <span className="grow">{action.label}</span>
-        <ShortcutKey keys={action.shortcuts} />
-      </DropdownMenuItem>
-    ),
-    [editor]
-  )
+	const renderDropdownMenuItem = React.useCallback(
+		(action: FormatAction) => (
+			<DropdownMenuItem
+				key={action.label}
+				onClick={() => action.action(editor)}
+				disabled={!action.canExecute(editor)}
+				className={cn("flex flex-row items-center justify-between gap-4", {
+					"bg-accent": action.isActive(editor)
+				})}
+				aria-label={action.label}
+			>
+				<span className="grow">{action.label}</span>
+				<ShortcutKey keys={action.shortcuts} />
+			</DropdownMenuItem>
+		),
+		[editor]
+	)

-  const isDropdownActive = React.useMemo(
-    () => dropdownActions.some(action => action.isActive(editor)),
-    [dropdownActions, editor]
-  )
+	const isDropdownActive = React.useMemo(
+		() => dropdownActions.some(action => action.isActive(editor)),
+		[dropdownActions, editor]
+	)

-  return (
-    <>
-      {mainActions.map(renderToolbarButton)}
-      {dropdownActions.length > 0 && (
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <ToolbarButton
-              isActive={isDropdownActive}
-              tooltip={dropdownTooltip}
-              aria-label={dropdownTooltip}
-              className={cn(dropdownClassName)}
-              size={size}
-              variant={variant}
-            >
-              {dropdownIcon || <CaretDownIcon className="size-5" />}
-            </ToolbarButton>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="start" className="w-full">
-            {dropdownActions.map(renderDropdownMenuItem)}
-          </DropdownMenuContent>
-        </DropdownMenu>
-      )}
-    </>
-  )
+	return (
+		<>
+			{mainActions.map(renderToolbarButton)}
+			{dropdownActions.length > 0 && (
+				<DropdownMenu>
+					<DropdownMenuTrigger asChild>
+						<ToolbarButton
+							isActive={isDropdownActive}
+							tooltip={dropdownTooltip}
+							aria-label={dropdownTooltip}
+							className={cn(dropdownClassName)}
+							size={size}
+							variant={variant}
+						>
+							{dropdownIcon || <CaretDownIcon className="size-5" />}
+						</ToolbarButton>
+					</DropdownMenuTrigger>
+					<DropdownMenuContent align="start" className="w-full">
+						{dropdownActions.map(renderDropdownMenuItem)}
+					</DropdownMenuContent>
+				</DropdownMenu>
+			)}
+		</>
+	)
 }

 export default ToolbarSection
--- a/web/components/minimal-tiptap/utils.ts
+++ b/web/components/minimal-tiptap/utils.ts
@@ -1,81 +1,14 @@
-import type { Editor } from '@tiptap/core'
-import type { MinimalTiptapProps } from './minimal-tiptap'
+import type { Editor } from "@tiptap/core"
+import type { MinimalTiptapProps } from "./minimal-tiptap"

-let isMac: boolean | undefined
+export function getOutput(editor: Editor, format: MinimalTiptapProps["output"]) {
+	if (format === "json") {
+		return editor.getJSON()
+	}

-interface Navigator {
-  userAgentData?: {
-    brands: { brand: string; version: string }[]
-    mobile: boolean
-    platform: string
-    getHighEntropyValues: (hints: string[]) => Promise<{
-      platform: string
-      platformVersion: string
-      uaFullVersion: string
-    }>
-  }
-}
-
-function getPlatform(): string {
-  const nav = navigator as Navigator
-
-  if (nav.userAgentData) {
-    if (nav.userAgentData.platform) {
-      return nav.userAgentData.platform
-    }
-
-    nav.userAgentData.getHighEntropyValues(['platform']).then(highEntropyValues => {
-      if (highEntropyValues.platform) {
-        return highEntropyValues.platform
-      }
-    })
-  }
-
-  if (typeof navigator.platform === 'string') {
-    return navigator.platform
-  }
-
-  return ''
-}
-
-export function isMacOS() {
-  if (isMac === undefined) {
-    isMac = getPlatform().toLowerCase().includes('mac')
-  }
-
-  return isMac
-}
-
-interface ShortcutKeyResult {
-  symbol: string
-  readable: string
-}
-
-export function getShortcutKey(key: string): ShortcutKeyResult {
-  const lowercaseKey = key.toLowerCase()
-  if (lowercaseKey === 'mod') {
-    return isMacOS() ? { symbol: '⌘', readable: 'Command' } : { symbol: 'Ctrl', readable: 'Control' }
-  } else if (lowercaseKey === 'alt') {
-    return isMacOS() ? { symbol: '⌥', readable: 'Option' } : { symbol: 'Alt', readable: 'Alt' }
-  } else if (lowercaseKey === 'shift') {
-    return isMacOS() ? { symbol: '⇧', readable: 'Shift' } : { symbol: 'Shift', readable: 'Shift' }
-  } else {
-    return { symbol: key, readable: key }
-  }
-}
-
-export function getShortcutKeys(keys: string[]): ShortcutKeyResult[] {
-  return keys.map(key => getShortcutKey(key))
-}
-
-export function getOutput(editor: Editor, format: MinimalTiptapProps['output']) {
-  if (format === 'json') {
-    return editor.getJSON()
-  }
-
-  if (format === 'html') {
-    return editor.getText() ? editor.getHTML() : ''
-  }
-
-  return editor.getText()
+	if (format === "html") {
+		return editor.getText() ? editor.getHTML() : ""
+	}
+
+	return editor.getText()
 }
--- a/web/components/routes/link/bottom-bar.tsx
+++ b/web/components/routes/link/bottom-bar.tsx
@@ -1,9 +1,11 @@
+"use client"
+
 import React, { useCallback, useEffect, useRef } from "react"
 import { motion, AnimatePresence } from "framer-motion"
-import { icons, ZapIcon } from "lucide-react"
+import type { icons } from "lucide-react"
 import { Button } from "@/components/ui/button"
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"
-import { getSpecialShortcut, formatShortcut, isMacOS, cn } from "@/lib/utils"
+import { cn, getShortcutKeys } from "@/lib/utils"
 import { LaIcon } from "@/components/custom/la-icon"
 import { useAtom } from "jotai"
 import { parseAsBoolean, useQueryState } from "nuqs"
@@ -13,7 +15,7 @@ import { PersonalLink } from "@/lib/schema"
 import { ID } from "jazz-tools"
 import { globalLinkFormExceptionRefsAtom } from "./partials/form/link-form"
 import { useLinkActions } from "./hooks/use-link-actions"
-import { showHotkeyPanelAtom } from "@/store/sidebar"
+import { useKeydownListener } from "@/hooks/use-keydown-listener"

 interface ToolbarButtonProps extends React.ComponentPropsWithoutRef<typeof Button> {
 	icon: keyof typeof icons
@@ -73,8 +75,6 @@ export const LinkBottomBar: React.FC = () => {
 		}, 100)
 	}, [setEditId, setCreateMode])

-	const [, setShowHotkeyPanel] = useAtom(showHotkeyPanelAtom)
-
 	useEffect(() => {
 		setGlobalLinkFormExceptionRefsAtom([
 			overlayRef,
@@ -119,24 +119,21 @@ export const LinkBottomBar: React.FC = () => {
 		}
 	}

-	useEffect(() => {
-		const handleKeyDown = (event: KeyboardEvent) => {
-			const isCreateShortcut = isMacOS()
-				? event.ctrlKey && event.metaKey && event.key.toLowerCase() === "n"
-				: event.ctrlKey && event.key.toLowerCase() === "n" && (event.metaKey || event.altKey)
+	const handleKeydown = useCallback(
+		(event: KeyboardEvent) => {
+			const isCreateShortcut = event.key === "c"

 			if (isCreateShortcut) {
 				event.preventDefault()
 				handleCreateMode()
 			}
-		}
+		},
+		[handleCreateMode]
+	)

-		window.addEventListener("keydown", handleKeyDown)
-		return () => window.removeEventListener("keydown", handleKeyDown)
-	}, [handleCreateMode])
+	useKeydownListener(handleKeydown)

-	const shortcutKeys = getSpecialShortcut("expandToolbar")
-	const shortcutText = formatShortcut(shortcutKeys)
+	const shortcutText = getShortcutKeys(["c"])

 	return (
 		<motion.div
@@ -179,23 +176,13 @@ export const LinkBottomBar: React.FC = () => {
 							<ToolbarButton
 								icon={"Plus"}
 								onClick={handleCreateMode}
-								tooltip={`New Link (${shortcutText})`}
+								tooltip={`New Link (${shortcutText.map(s => s.symbol).join("")})`}
 								ref={plusBtnRef}
 							/>
 						)}
-						{/* <ToolbarButton icon={"Ellipsis"} ref={plusMoreBtnRef} /> */}
 					</motion.div>
 				)}
 			</AnimatePresence>
-			<div className="absolute right-0 top-0 hidden h-full items-center justify-center p-2 pr-1 sm:flex">
-				<ToolbarButton
-					icon={"Zap"}
-					tooltip={`Hotkeys`}
-					onClick={() => {
-						setShowHotkeyPanel(true)
-					}}
-				/>
-			</div>
 		</motion.div>
 	)
 }
--- a/web/components/routes/topics/detail/TopicDetailRoute.tsx
+++ b/web/components/routes/topics/detail/TopicDetailRoute.tsx
@@ -22,6 +22,7 @@ export function TopicDetailRoute({ topicName }: TopicDetailRouteProps) {
 	const raw_graph_data = React.use(graph_data_promise) as GraphNode[]

 	const { me } = useAccountOrGuest({ root: { personalLinks: [] } })
+
 	const topicID = useMemo(() => me && Topic.findUnique({ topicName }, JAZZ_GLOBAL_GROUP_ID, me), [topicName, me])
 	const topic = useCoState(Topic, topicID, { latestGlobalGuide: { sections: [] } })
 	const [activeIndex, setActiveIndex] = useState(-1)
--- a/web/components/ui/sheet.tsx
+++ b/web/components/ui/sheet.tsx
@@ -0,0 +1,109 @@
+"use client"
+
+import * as React from "react"
+import * as SheetPrimitive from "@radix-ui/react-dialog"
+import { Cross2Icon } from "@radix-ui/react-icons"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const Sheet = SheetPrimitive.Root
+
+const SheetTrigger = SheetPrimitive.Trigger
+
+const SheetClose = SheetPrimitive.Close
+
+const SheetPortal = SheetPrimitive.Portal
+
+const SheetOverlay = React.forwardRef<
+	React.ElementRef<typeof SheetPrimitive.Overlay>,
+	React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+	<SheetPrimitive.Overlay
+		className={cn(
+			"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80",
+			className
+		)}
+		{...props}
+		ref={ref}
+	/>
+))
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
+
+export const sheetVariants = cva(
+	"fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out",
+	{
+		variants: {
+			side: {
+				top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+				bottom:
+					"inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+				left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+				right:
+					"inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm"
+			}
+		},
+		defaultVariants: {
+			side: "right"
+		}
+	}
+)
+
+interface SheetContentProps
+	extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
+		VariantProps<typeof sheetVariants> {}
+
+const SheetContent = React.forwardRef<React.ElementRef<typeof SheetPrimitive.Content>, SheetContentProps>(
+	({ side = "right", className, children, ...props }, ref) => (
+		<SheetPortal>
+			<SheetOverlay />
+			<SheetPrimitive.Content ref={ref} className={cn(sheetVariants({ side }), className)} {...props}>
+				<SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none">
+					<Cross2Icon className="h-4 w-4" />
+					<span className="sr-only">Close</span>
+				</SheetPrimitive.Close>
+				{children}
+			</SheetPrimitive.Content>
+		</SheetPortal>
+	)
+)
+SheetContent.displayName = SheetPrimitive.Content.displayName
+
+const SheetHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+	<div className={cn("flex flex-col space-y-2 text-center sm:text-left", className)} {...props} />
+)
+SheetHeader.displayName = "SheetHeader"
+
+const SheetFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+	<div className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)} {...props} />
+)
+SheetFooter.displayName = "SheetFooter"
+
+const SheetTitle = React.forwardRef<
+	React.ElementRef<typeof SheetPrimitive.Title>,
+	React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
+>(({ className, ...props }, ref) => (
+	<SheetPrimitive.Title ref={ref} className={cn("text-foreground text-lg font-semibold", className)} {...props} />
+))
+SheetTitle.displayName = SheetPrimitive.Title.displayName
+
+const SheetDescription = React.forwardRef<
+	React.ElementRef<typeof SheetPrimitive.Description>,
+	React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
+>(({ className, ...props }, ref) => (
+	<SheetPrimitive.Description ref={ref} className={cn("text-muted-foreground text-sm", className)} {...props} />
+))
+SheetDescription.displayName = SheetPrimitive.Description.displayName
+
+export {
+	Sheet,
+	SheetPortal,
+	SheetOverlay,
+	SheetTrigger,
+	SheetClose,
+	SheetContent,
+	SheetHeader,
+	SheetFooter,
+	SheetTitle,
+	SheetDescription
+}
--- a/web/components/ui/sliding-menu.tsx
+++ b/web/components/ui/sliding-menu.tsx
@@ -1,82 +0,0 @@
-import { XIcon } from "lucide-react"
-import { useState, useEffect, useRef } from "react"
-import { motion, AnimatePresence } from "framer-motion"
-import { showHotkeyPanelAtom } from "@/store/sidebar"
-import { useAtom } from "jotai/react"
-
-export default function SlidingMenu() {
-	const [isOpen, setIsOpen] = useAtom(showHotkeyPanelAtom)
-	const panelRef = useRef<HTMLDivElement>(null)
-	const [shortcuts] = useState<{ name: string; shortcut: string[] }[]>([
-		// TODO: change to better keybind
-		// TODO: windows users don't understand these symbols, figure out better way to show keybinds
-		{ name: "New Todo", shortcut: ["⌘", "⌃", "n"] },
-		{ name: "CMD Palette", shortcut: ["⌘", "k"] }
-		// TODO: add
-		// { name: "Global Search", shortcut: ["."] },
-		// { name: "(/pages)", shortcut: [".", "."] }
-	])
-
-	useEffect(() => {
-		const handleClickOutside = (event: MouseEvent) => {
-			if (panelRef.current && !panelRef.current.contains(event.target as Node)) {
-				setIsOpen(false)
-			}
-		}
-
-		if (isOpen) {
-			document.addEventListener("mousedown", handleClickOutside)
-		}
-
-		return () => {
-			document.removeEventListener("mousedown", handleClickOutside)
-		}
-	}, [isOpen, setIsOpen])
-
-	return (
-		<AnimatePresence>
-			{isOpen && (
-				<>
-					<motion.div
-						initial={{ opacity: 0 }}
-						animate={{ opacity: 1 }}
-						exit={{ opacity: 0 }}
-						transition={{ duration: 0.2 }}
-						className="fixed inset-0 z-[99] bg-black bg-opacity-50"
-						onClick={() => setIsOpen(false)}
-					/>
-					<motion.div
-						ref={panelRef}
-						initial={{ x: "100%" }}
-						animate={{ x: 0 }}
-						exit={{ x: "100%", transition: { duration: 0.1, ease: "easeIn" } }}
-						transition={{ type: "spring", stiffness: 300, damping: 30 }}
-						className="fixed right-0 top-0 z-[100] h-full p-4"
-					>
-						<div className="flex h-full w-[300px] flex-col gap-4 rounded-lg border border-slate-400/20 bg-white p-3 pl-4 drop-shadow-md dark:bg-neutral-950">
-							<div className="flex flex-row items-center justify-between gap-4">
-								<div className="">Shortcuts</div>
-								<button
-									onClick={() => setIsOpen(false)}
-									className="flex h-[28px] w-[28px] items-center justify-center rounded-md border border-slate-400/20 text-black/60 dark:text-white/60"
-								>
-									<XIcon className="h-[16px] w-[16px]" />
-								</button>
-							</div>
-							<div className="flex flex-col gap-1 text-[12px]">
-								{shortcuts.map((shortcut, index) => (
-									<div key={index} className="flex flex-row items-center justify-between gap-4">
-										<div className="opacity-40">{shortcut.name}</div>
-										<div className="flex min-w-[20px] items-center justify-center rounded-sm bg-gray-100 p-1 px-2 dark:bg-neutral-900">
-											{shortcut.shortcut.join(" ")}
-										</div>
-									</div>
-								))}
-							</div>
-						</div>
-					</motion.div>
-				</>
-			)}
-		</AnimatePresence>
-	)
-}
--- a/web/hooks/use-keyboard-manager.ts
+++ b/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 }
+}
--- a/web/hooks/use-keydown-listener.ts
+++ b/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])
+}
--- a/web/lib/utils/keyboard.ts
+++ b/web/lib/utils/keyboard.ts
@@ -55,11 +55,7 @@ export function getShortcutKey(key: string): ShortcutKeyResult {
 	} else if (lowercaseKey === "alt") {
 		return isMacOS() ? { symbol: "⌥", readable: "Option" } : { symbol: "Alt", readable: "Alt" }
 	} else if (lowercaseKey === "shift") {
-		return { symbol: "⇧", readable: "Shift" }
-	} else if (lowercaseKey === "control") {
-		return { symbol: "⌃", readable: "Control" }
-	} else if (lowercaseKey === "windows" && !isMacOS()) {
-		return { symbol: "Win", readable: "Windows" }
+		return isMacOS() ? { symbol: "⇧", readable: "Shift" } : { symbol: "Shift", readable: "Shift" }
 	} else {
 		return { symbol: key.toUpperCase(), readable: key }
 	}
@@ -68,21 +64,3 @@ export function getShortcutKey(key: string): ShortcutKeyResult {
 export function getShortcutKeys(keys: string[]): ShortcutKeyResult[] {
 	return keys.map(key => getShortcutKey(key))
 }
-
-export function getSpecialShortcut(shortcutName: string): ShortcutKeyResult[] {
-	if (shortcutName === "expandToolbar") {
-		return isMacOS()
-			? [getShortcutKey("control"), getShortcutKey("mod"), getShortcutKey("n")]
-			: [getShortcutKey("mod"), getShortcutKey("windows"), getShortcutKey("n")]
-	}
-
-	return []
-}
-
-export function formatShortcut(shortcutKeys: ShortcutKeyResult[]): string {
-	return shortcutKeys.map(key => key.symbol).join("")
-}
-
-export function formatReadableShortcut(shortcutKeys: ShortcutKeyResult[]): string {
-	return shortcutKeys.map(key => key.readable).join(" + ")
-}
--- a/web/store/keydown-manager.ts
+++ b/web/store/keydown-manager.ts
@@ -0,0 +1,3 @@
+import { atom } from "jotai"
+
+export const keyboardDisableSourcesAtom = atom<Set<string>>(new Set<string>())
--- a/web/store/sidebar.ts
+++ b/web/store/sidebar.ts
@@ -5,4 +5,3 @@ export const toggleCollapseAtom = atom(
 	get => get(isCollapseAtom),
 	(get, set) => set(isCollapseAtom, !get(isCollapseAtom))
 )
-export const showHotkeyPanelAtom = atom(false)