fix: sidebar keyboard shortcuts

Author: tommerty

registry/sidebar/index.ts

@@ -21,4 +21,4 @@ export { sidebarStore, sidebarActions } from "./sidebar-store";
 export type { SidebarState, SidebarStoreState } from "./sidebar-store";
 
 // Script for zero-flash loading and keyboard shortcuts
-export { SidebarScript, SidebarKeyboardHandler } from "./sidebar-script";
+export { SidebarScript } from "./sidebar-script";

registry/sidebar/sidebar-script.tsx

@@ -17,9 +17,6 @@
  * ```
  */
 
-import * as React from "react";
-import { sidebarActions, sidebarStore } from "./sidebar-store";
-
 export function SidebarScript() {
 	// This script runs BEFORE React hydration
 	const script = `
@@ -49,46 +46,3 @@ export function SidebarScript() {
 	);
 }
 
-/**
- * Sidebar Keyboard Shortcuts Handler
- * 
- * Add this component near the root of your app to enable keyboard shortcuts
- * for toggling sidebars. It listens for keyboard events and toggles the
- * appropriate sidebar based on registered shortcuts.
- * 
- * Usage:
- * ```tsx
- * <SidebarKeyboardHandler />
- * ```
- */
-export function SidebarKeyboardHandler() {
-	React.useEffect(() => {
-		const handleKeyDown = (event: KeyboardEvent) => {
-			// Check if Cmd (Mac) or Ctrl (Windows/Linux) is pressed
-			if (!(event.metaKey || event.ctrlKey)) {
-				return;
-			}
-
-			// Get the key pressed (lowercase)
-			const key = event.key.toLowerCase();
-
-			// Check if this key matches any registered shortcut
-			// We use the format "mod+key" where mod is cmd/ctrl
-			const shortcut = `mod+${key}`;
-			
-			// Check if this shortcut is registered
-			const sidebarId = sidebarStore.state.keyboardShortcuts[shortcut];
-			if (sidebarId) {
-				// Prevent default browser behavior (e.g., Cmd+B opening bookmarks)
-				event.preventDefault();
-				// Toggle the sidebar
-				sidebarActions.toggleSidebar(sidebarId);
-			}
-		};
-
-		window.addEventListener("keydown", handleKeyDown);
-		return () => window.removeEventListener("keydown", handleKeyDown);
-	}, []);
-
-	return null;
-}

registry/sidebar/sidebar.tsx

@@ -2,7 +2,7 @@
 
 import * as React from "react";
 import { useStore } from "@tanstack/react-store";
-import { ChevronDownIcon, PanelLeftIcon } from "lucide-react";
+import { PanelLeftIcon } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { Button } from "@/components/ui/button";
 import {
@@ -24,7 +24,6 @@ import {
 	PopoverTrigger,
 } from "@/components/ui/popover";
 import { sidebarStore, sidebarActions } from "./sidebar-store";
-import { Skeleton } from "@/components/ui/skeleton";
 import { IconChevronRight } from "@tabler/icons-react";
 
 const SIDEBAR_WIDTH = "16rem";
@@ -103,29 +102,53 @@ export function Sidebar({
 	// Register sidebar on mount
 	React.useEffect(() => {
 		if (hasRegistered.current) return;
-		
+
+		const normalizedShortcut =
+			keyboardShortcut && keyboardShortcut.length === 1
+				? `mod+${keyboardShortcut}`
+				: keyboardShortcut;
+
 		const existing = sidebarStore.state.sidebars[id];
 		if (!existing) {
 			sidebarActions.registerSidebar(id, {
 				open: defaultOpen,
 				variant,
 				side,
 				openMobile: false,
-				keyboardShortcut,
+				keyboardShortcut: normalizedShortcut,
 			});
-		} else if (keyboardShortcut !== existing.keyboardShortcut) {
+		} else if (normalizedShortcut !== existing.keyboardShortcut) {
 			// Update keyboard shortcut if changed
-			sidebarActions.setKeyboardShortcut(id, keyboardShortcut);
+			sidebarActions.setKeyboardShortcut(id, normalizedShortcut);
 		}
-		
+
 		hasRegistered.current = true;
-		
+
 		return () => {
 			hasRegistered.current = false;
 			sidebarActions.unregisterSidebar(id);
 		};
 	}, [id, defaultOpen, variant, side, keyboardShortcut]);
 
+	// Keyboard shortcut handler
+	React.useEffect(() => {
+		if (!keyboardShortcut) return;
+
+		const handleKeyDown = (event: KeyboardEvent) => {
+			// Only support mod+key for now
+			if (!event.metaKey && !event.ctrlKey) return;
+
+			const key = keyboardShortcut.replace(/mod\+/i, "").toLowerCase();
+			if (event.key.toLowerCase() === key) {
+				event.preventDefault();
+				sidebarActions.toggleSidebar(id);
+			}
+		};
+
+		window.addEventListener("keydown", handleKeyDown);
+		return () => window.removeEventListener("keydown", handleKeyDown);
+	}, [id, keyboardShortcut]);
+
 	// Update CSS variable when sidebar state changes
 	React.useEffect(() => {
 		if (sidebar) {
@@ -189,16 +212,12 @@ export function Sidebar({
 					minWidth: `var(--sidebar-${id}-width, ${defaultOpen ? width : collapsedWidth})`,
 					maxWidth: `var(--sidebar-${id}-width, ${defaultOpen ? width : collapsedWidth})`
 				}}
-				className={cn(baseStyles, variantStyles[variant], className, "animate-pulse border-transparent")}
+				className={cn(baseStyles, variantStyles[variant], className, "")}
 				{...props}
 			>
 				{/* Skeleton - no content on server */}
 				<div className="flex h-full flex-col overflow-hidden" style={{ width: `var(--sidebar-${id}-width, ${defaultOpen ? width : collapsedWidth})` }} >
-                    <div className="flex flex-col gap-0.5 p-2">
-                    <Skeleton className="w-full h-9 opacity-10"/>
-                     <Skeleton className="w-full h-9 opacity-10"/>
-                      <Skeleton className="w-full h-9 opacity-10"/>
-                    </div>
+                   
                 </div>
 			</aside>
             </div>

src/components/layout/sidebar.tsx

@@ -50,7 +50,13 @@ export function MainSidebar() {
 	const isSidebarOpen = sidebarStore.state.sidebars[sidebarId]?.open ?? true;
 
 	return (
-		<Sidebar id={sidebarId} collapsible variant="floating" className="">
+		<Sidebar
+			id={sidebarId}
+			collapsible
+			variant="floating"
+			className=""
+			keyboardShortcut="p"
+		>
 			<SidebarHeader>
 				<SidebarMenuItem>
 					<Link to="/" className="w-full">