@pablozaiden/webapp 0.3.3 → 0.3.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pablozaiden/webapp",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "description": "Opinionated Bun + React webapp framework for single-server apps",
   "license": "MIT",
   "type": "module",

package/src/web/WebAppRoot.tsx

@@ -70,6 +70,18 @@ type StoredSidebarPin = {
   route: WebAppRoute;
 };
 
+function isSidebarShortcutEditableTarget(target: EventTarget | null): boolean {
+  if (!(target instanceof HTMLElement)) {
+    return false;
+  }
+  if (target.isContentEditable || target.closest("[contenteditable=''], [contenteditable='true']")) {
+    return true;
+  }
+  return target instanceof HTMLInputElement
+    || target instanceof HTMLTextAreaElement
+    || target instanceof HTMLSelectElement;
+}
+
 function routeToHash(route: WebAppRoute): string {
   const params = new URLSearchParams();
   for (const [key, value] of Object.entries(route)) {
@@ -980,6 +992,13 @@ export function WebAppRoot({ appName, homeRoute, sidebar, routes, header, onRout
   const [search, setSearch] = useState("");
   const [sidebarOpen, setSidebarOpen] = useState(false);
   const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
+  const toggleSidebarCollapsed = useCallback(() => {
+    setSidebarCollapsed((current) => {
+      const nextCollapsed = !current;
+      setSidebarOpen(!nextCollapsed);
+      return nextCollapsed;
+    });
+  }, []);
   const sidebarSearchEnabled = sidebar.search !== false;
   const pinningEnabled = sidebar.pinning !== false;
   const sidebarPins = useSidebarPins(appName, sidebar.pinning ? sidebar.pinning.storageKey : undefined);
@@ -1041,6 +1060,28 @@ export function WebAppRoot({ appName, homeRoute, sidebar, routes, header, onRout
       .catch(() => undefined);
   }, [config?.currentUser?.id, setTheme]);
 
+  useEffect(() => {
+    function handleSidebarShortcut(event: KeyboardEvent) {
+      if (
+        event.key.toLowerCase() !== "b"
+        || event.altKey
+        || event.shiftKey
+        || event.ctrlKey === event.metaKey
+        || event.isComposing
+        || event.repeat
+        || isSidebarShortcutEditableTarget(event.target)
+      ) {
+        return;
+      }
+
+      event.preventDefault();
+      toggleSidebarCollapsed();
+    }
+
+    document.addEventListener("keydown", handleSidebarShortcut);
+    return () => document.removeEventListener("keydown", handleSidebarShortcut);
+  }, [toggleSidebarCollapsed]);
+
   useEffect(() => {
     onRouteChange?.(route);
   }, [onRouteChange, route]);
@@ -1084,6 +1125,7 @@ export function WebAppRoot({ appName, homeRoute, sidebar, routes, header, onRout
   const headerTitle = header?.renderTitle?.(headerContext) ?? defaultTitle;
   const primaryHeaderActions = header?.renderActions?.(headerContext);
   const headerActionLabel = typeof headerTitle === "string" ? headerTitle : defaultTitle;
+  const sidebarToggleLabel = sidebarCollapsed ? "Show sidebar" : "Collapse sidebar";
   const navigateFromSidebarHeader = (nextRoute: WebAppRoute) => {
     navigate(nextRoute);
     setSidebarOpen(false);
@@ -1106,7 +1148,7 @@ export function WebAppRoot({ appName, homeRoute, sidebar, routes, header, onRout
           <div className="wapp-sidebar-actions">
             {topActions.map((action) => <IconButton key={action.id} className="wapp-sidebar-top-button" title={action.title} aria-label={action.title} onClick={() => runSidebarHeaderAction(action)}><ActionIcon icon={action.icon} /></IconButton>)}
             <IconButton className="wapp-sidebar-top-button" title="Settings" aria-label="Open settings" active={route.view === "settings"} onClick={() => navigateFromSidebarHeader({ view: "settings" })}><Icon name="settings" /></IconButton>
-            <IconButton className="wapp-sidebar-top-button" title="Collapse sidebar" aria-label="Collapse sidebar" onClick={() => { setSidebarCollapsed(true); setSidebarOpen(false); }}><Icon name="sidebar" /></IconButton>
+            <IconButton className="wapp-sidebar-top-button" title={sidebarToggleLabel} aria-label={sidebarToggleLabel} onClick={toggleSidebarCollapsed}><Icon name="sidebar" /></IconButton>
           </div>
         </div>
         <div className="wapp-sidebar-scroll">
@@ -1118,7 +1160,7 @@ export function WebAppRoot({ appName, homeRoute, sidebar, routes, header, onRout
       <section className="wapp-main">
         <header className="wapp-main-header">
           <div className="wapp-main-header-title">
-            {sidebarCollapsed ? <IconButton className="wapp-sidebar-top-button" aria-label="Show sidebar" title="Show sidebar" onClick={() => { setSidebarCollapsed(false); setSidebarOpen(true); }}><Icon name="sidebar" /></IconButton> : <IconButton className="wapp-mobile-only wapp-sidebar-top-button" aria-label="Show sidebar" title="Show sidebar" onClick={() => setSidebarOpen(true)}><Icon name="sidebar" /></IconButton>}
+            {sidebarCollapsed ? <IconButton className="wapp-sidebar-top-button" aria-label={sidebarToggleLabel} title={sidebarToggleLabel} onClick={toggleSidebarCollapsed}><Icon name="sidebar" /></IconButton> : <IconButton className="wapp-mobile-only wapp-sidebar-top-button" aria-label="Show sidebar" title="Show sidebar" onClick={() => setSidebarOpen(true)}><Icon name="sidebar" /></IconButton>}
             <h1>{headerTitle}</h1>
           </div>
           {primaryHeaderActions || headerActions.length ? (

package/src/web/styles.css

@@ -13,6 +13,8 @@
   --wapp-danger-bg: #991b1b;
   --wapp-primary: #111827;
   --wapp-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --wapp-overlay-bg: rgb(0 0 0 / 0.5);
+  --wapp-overlay-blur: blur(4px);
   --wapp-safe-area-top: env(safe-area-inset-top, 0px);
   --wapp-safe-area-bottom: env(safe-area-inset-bottom, 0px);
   --wapp-safe-area-left: env(safe-area-inset-left, 0px);
@@ -1549,7 +1551,8 @@ textarea::placeholder {
 .wapp-mobile-backdrop {
   position: fixed;
   inset: 0;
-  background: rgb(15 23 42 / 0.36);
+  background: var(--wapp-overlay-bg);
+  backdrop-filter: var(--wapp-overlay-blur);
   z-index: 50;
 }
 
@@ -1650,8 +1653,8 @@ textarea::placeholder {
 .wapp-modal-overlay {
   position: absolute;
   inset: 0;
-  background: rgb(0 0 0 / 0.5);
-  backdrop-filter: blur(4px);
+  background: var(--wapp-overlay-bg);
+  backdrop-filter: var(--wapp-overlay-blur);
 }
 
 .wapp-modal {