@pablozaiden/webapp 0.3.5 → 0.3.7

package/package.json

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

package/src/web/WebAppRoot.tsx

@@ -531,6 +531,17 @@ function DeviceVerificationScreen() {
 
 type SidebarTreeParentKind = "root" | "section" | "item";
 
+type SidebarTreeProps = {
+  nodes: SidebarNode[];
+  route: WebAppRoute;
+  navigate: (route: WebAppRoute) => void;
+  collapsed: SidebarCollapsedState;
+  toggleCollapsed: (id: string, isCollapsed: boolean) => void;
+  searchActive: boolean;
+  level?: number;
+  parentKind?: SidebarTreeParentKind;
+};
+
 function sidebarIndentStyle(level: number, parentKind: SidebarTreeParentKind): { marginLeft?: string } | undefined {
   if (level <= 0) {
     return undefined;
@@ -540,19 +551,26 @@ function sidebarIndentStyle(level: number, parentKind: SidebarTreeParentKind): {
   return { marginLeft: `${baseIndentRem + nestedSectionIndentRem}rem` };
 }
 
-function SidebarTree({ nodes, route, navigate, collapsed, toggleCollapsed, level = 0, parentKind = "root" }: { nodes: SidebarNode[]; route: WebAppRoute; navigate: (route: WebAppRoute) => void; collapsed: SidebarCollapsedState; toggleCollapsed: (id: string, isCollapsed: boolean) => void; level?: number; parentKind?: SidebarTreeParentKind }) {
+function SidebarTree({ nodes, route, navigate, collapsed, toggleCollapsed, searchActive, level = 0, parentKind = "root" }: SidebarTreeProps) {
   const [contextMenu, setContextMenu] = useState<{ position: ContextMenuPosition; items: ActionMenuItem[]; title: string } | null>(null);
   return (
     <>
       {nodes.map((node) => {
         const hasChildren = Boolean(node.children?.length);
-        const isCollapsed = collapsed[node.id] ?? node.defaultCollapsed ?? false;
+        const storedIsCollapsed = collapsed[node.id] ?? node.defaultCollapsed ?? false;
+        const isCollapsed = searchActive && hasChildren ? false : storedIsCollapsed;
+        const toggleAriaLabel = searchActive ? `Toggling unavailable during search for ${node.title}` : `${isCollapsed ? "Expand" : "Collapse"} ${node.title}`;
+        const toggleNodeCollapsed = () => {
+          if (!searchActive) {
+            toggleCollapsed(node.id, storedIsCollapsed);
+          }
+        };
         if (node.type === "section") {
           return (
             <section className={`wapp-sidebar-section ${level === 0 ? "top" : "nested"}`} key={node.id}>
               <div className="wapp-sidebar-section-title" style={sidebarIndentStyle(level, parentKind)}>
                 {hasChildren ? (
-                  <button type="button" aria-expanded={!isCollapsed} aria-label={`${isCollapsed ? "Expand" : "Collapse"} ${node.title}`} onClick={() => toggleCollapsed(node.id, isCollapsed)}>
+                  <button type="button" aria-expanded={!isCollapsed} aria-label={toggleAriaLabel} disabled={searchActive} onClick={toggleNodeCollapsed}>
                     <span>{isCollapsed ? "▶" : "▼"}</span>{node.title}
                   </button>
                 ) : (
@@ -560,7 +578,7 @@ function SidebarTree({ nodes, route, navigate, collapsed, toggleCollapsed, level
                 )}
                 {node.action ? <button type="button" className="wapp-sidebar-action" title={node.action.title} aria-label={node.action.title} onClick={node.action.onAction ?? (() => node.action?.route && navigate(node.action.route))}>{node.action.label ?? "New"}</button> : null}
               </div>
-              {!isCollapsed && hasChildren ? <SidebarTree nodes={node.children ?? []} route={route} navigate={navigate} collapsed={collapsed} toggleCollapsed={toggleCollapsed} level={level + 1} parentKind="section" /> : null}
+              {!isCollapsed && hasChildren ? <SidebarTree nodes={node.children ?? []} route={route} navigate={navigate} collapsed={collapsed} toggleCollapsed={toggleCollapsed} searchActive={searchActive} level={level + 1} parentKind="section" /> : null}
               {!isCollapsed && !hasChildren && level === 0 ? <div className="wapp-sidebar-empty">No items.</div> : null}
             </section>
           );
@@ -568,7 +586,7 @@ function SidebarTree({ nodes, route, navigate, collapsed, toggleCollapsed, level
         const active = node.route?.view === route.view && Object.entries(node.route).every(([key, value]) => key === "view" || route[key] === value);
         return (
           <div className={`wapp-sidebar-item-wrap ${hasChildren ? "has-toggle" : ""}`} key={node.id} style={sidebarIndentStyle(level, parentKind)}>
-            {hasChildren ? <button type="button" className="wapp-tree-toggle" aria-expanded={!isCollapsed} aria-label={`${isCollapsed ? "Expand" : "Collapse"} ${node.title}`} onClick={() => toggleCollapsed(node.id, isCollapsed)}>{isCollapsed ? "▶" : "▼"}</button> : null}
+            {hasChildren ? <button type="button" className="wapp-tree-toggle" aria-expanded={!isCollapsed} aria-label={toggleAriaLabel} disabled={searchActive} onClick={toggleNodeCollapsed}>{isCollapsed ? "▶" : "▼"}</button> : null}
             <button
               type="button"
               className={`wapp-sidebar-item ${active ? "active" : ""}`}
@@ -585,7 +603,7 @@ function SidebarTree({ nodes, route, navigate, collapsed, toggleCollapsed, level
               </span>
               {node.badge ? <Badge variant={node.badgeVariant} className="wapp-sidebar-badge" title={node.badge} aria-label={node.badge}> </Badge> : null}
             </button>
-            {!isCollapsed && node.children ? <div className="wapp-sidebar-children"><SidebarTree nodes={node.children} route={route} navigate={navigate} collapsed={collapsed} toggleCollapsed={toggleCollapsed} level={level + 1} parentKind="item" /></div> : null}
+            {!isCollapsed && node.children ? <div className="wapp-sidebar-children"><SidebarTree nodes={node.children} route={route} navigate={navigate} collapsed={collapsed} toggleCollapsed={toggleCollapsed} searchActive={searchActive} level={level + 1} parentKind="item" /></div> : null}
           </div>
         );
       })}
@@ -1040,10 +1058,12 @@ export function WebAppRoot({ appName, homeRoute, sidebar, routes, header, onRout
     });
   }, []);
   const sidebarSearchEnabled = sidebar.search !== false;
+  const normalizedSidebarSearch = sidebarSearchEnabled ? search.trim() : "";
+  const sidebarSearchActive = normalizedSidebarSearch.length > 0;
   const pinningEnabled = sidebar.pinning !== false;
   const sidebarPins = useSidebarPins(appName, sidebar.pinning ? sidebar.pinning.storageKey : undefined);
   const baseNodes = useMemo(() => sidebar.getNodes({ search: "" }), [sidebar]);
-  const filteredNodes = useMemo(() => sidebar.getNodes({ search: sidebarSearchEnabled ? search : "" }), [sidebar, search, sidebarSearchEnabled]);
+  const filteredNodes = useMemo(() => sidebar.getNodes({ search: normalizedSidebarSearch }), [sidebar, normalizedSidebarSearch]);
   const allPinnableItems = useMemo(() => flattenSidebarItems(baseNodes).filter((node) => node.pinnable && node.route), [baseNodes]);
   const currentPins = useMemo(() => {
     const byId = new Map(allPinnableItems.map((node) => [node.pinId ?? node.id, node]));
@@ -1071,7 +1091,7 @@ export function WebAppRoot({ appName, homeRoute, sidebar, routes, header, onRout
   }), [pinningActionFor]);
   const nodes = useMemo(() => {
     const augmented = augmentPinningActions(filteredNodes);
-    if (!pinningEnabled || (sidebarSearchEnabled && search.trim()) || currentPins.length === 0) return augmented;
+    if (!pinningEnabled || sidebarSearchActive || currentPins.length === 0) return augmented;
     const augmentedByPinId = new Map(flattenSidebarItems(augmentPinningActions(baseNodes)).map((node) => [node.pinId ?? node.id, node]));
     const pinnedChildren = currentPins.map((pin) => ({
       ...(augmentedByPinId.get(pin.id) ?? {
@@ -1091,7 +1111,7 @@ export function WebAppRoot({ appName, homeRoute, sidebar, routes, header, onRout
       { type: "section" as const, id: "framework:pinned", title: sidebar.pinning ? sidebar.pinning.sectionTitle ?? "Pinned" : "Pinned", children: pinnedChildren },
       ...augmented,
     ];
-  }, [augmentPinningActions, baseNodes, currentPins, filteredNodes, pinningEnabled, search, sidebar.pinning, sidebarSearchEnabled]);
+  }, [augmentPinningActions, baseNodes, currentPins, filteredNodes, pinningEnabled, sidebar.pinning, sidebarSearchActive]);
 
   useEffect(() => {
     if (!config?.currentUser) return;
@@ -1192,8 +1212,8 @@ export function WebAppRoot({ appName, homeRoute, sidebar, routes, header, onRout
           </div>
         </div>
         <div className="wapp-sidebar-scroll">
-          {sidebarSearchEnabled ? <label className="wapp-search"><span className="sr-only">Search</span><input value={search} onChange={(event) => setSearch(event.target.value)} placeholder="Search" /></label> : null}
-          <SidebarTree nodes={nodes} route={route} navigate={(next) => { navigate(next); setSidebarOpen(false); }} collapsed={sidebarTreeState.collapsed} toggleCollapsed={sidebarTreeState.toggleCollapsed} />
+          {sidebarSearchEnabled ? <label className="wapp-search"><span className="sr-only">Search</span><input value={search} onInput={(event) => setSearch(event.currentTarget.value)} placeholder="Search" /></label> : null}
+          <SidebarTree nodes={nodes} route={route} navigate={(next) => { navigate(next); setSidebarOpen(false); }} collapsed={sidebarTreeState.collapsed} toggleCollapsed={sidebarTreeState.toggleCollapsed} searchActive={sidebarSearchActive} />
           <div className="wapp-sidebar-footer">v{effectiveVersion}<button type="button" aria-label="Reload" onClick={() => window.location.reload()}><Icon name="refresh" /></button></div>
         </div>
       </aside>

package/src/web/styles.css

@@ -1072,9 +1072,10 @@ textarea::placeholder {
 }
 
 .wapp-badge {
+  --wapp-badge-fg: var(--wapp-muted);
   border-radius: 999px;
   background: color-mix(in srgb, var(--wapp-muted), transparent 86%);
-  color: var(--wapp-muted);
+  color: var(--wapp-badge-fg);
   font-size: 0.6875rem;
   font-weight: 700;
   padding: 0.125rem 0.5rem;
@@ -1093,61 +1094,73 @@ textarea::placeholder {
 
 .wapp-badge-success,
 .wapp-badge-completed {
+  --wapp-badge-fg: rgb(22 101 52);
   background: rgb(220 252 231);
-  color: rgb(22 101 52);
+  color: var(--wapp-badge-fg);
 }
 .wapp-badge-warning,
 .wapp-badge-plan_ready {
+  --wapp-badge-fg: rgb(146 64 14);
   background: rgb(254 243 199);
-  color: rgb(146 64 14);
+  color: var(--wapp-badge-fg);
 }
 .wapp-badge-error,
 .wapp-badge-failed {
+  --wapp-badge-fg: rgb(153 27 27);
   background: rgb(254 226 226);
-  color: rgb(153 27 27);
+  color: var(--wapp-badge-fg);
 }
 .wapp-badge-info,
 .wapp-badge-running {
+  --wapp-badge-fg: rgb(30 64 175);
   background: rgb(219 234 254);
-  color: rgb(30 64 175);
+  color: var(--wapp-badge-fg);
 }
 .wapp-badge-disabled,
 .wapp-badge-stopped,
 .wapp-badge-idle {
+  --wapp-badge-fg: rgb(31 41 55);
   background: rgb(243 244 246);
-  color: rgb(31 41 55);
+  color: var(--wapp-badge-fg);
 }
 .wapp-badge-planning {
+  --wapp-badge-fg: rgb(21 94 117);
   background: rgb(207 250 254);
-  color: rgb(21 94 117);
+  color: var(--wapp-badge-fg);
 }
 .wapp-badge-merged {
+  --wapp-badge-fg: rgb(107 33 168);
   background: rgb(243 232 255);
-  color: rgb(107 33 168);
+  color: var(--wapp-badge-fg);
 }
 .wapp-badge-pushed {
+  --wapp-badge-fg: rgb(55 48 163);
   background: rgb(224 231 255);
-  color: rgb(55 48 163);
+  color: var(--wapp-badge-fg);
 }
 .wapp-badge-deleted {
+  --wapp-badge-fg: rgb(107 114 128);
   background: rgb(243 244 246);
-  color: rgb(107 114 128);
+  color: var(--wapp-badge-fg);
 }
 
 :root.dark .wapp-badge-success,
 :root.dark .wapp-badge-completed {
+  --wapp-badge-fg: rgb(134 239 172);
   background: rgb(20 83 45);
-  color: rgb(134 239 172);
+  color: var(--wapp-badge-fg);
 }
 :root.dark .wapp-badge-warning,
 :root.dark .wapp-badge-plan_ready {
+  --wapp-badge-fg: rgb(252 211 77);
   background: rgb(120 53 15);
-  color: rgb(252 211 77);
+  color: var(--wapp-badge-fg);
 }
 :root.dark .wapp-badge-error,
 :root.dark .wapp-badge-failed {
+  --wapp-badge-fg: rgb(252 165 165);
   background: rgb(127 29 29);
-  color: rgb(252 165 165);
+  color: var(--wapp-badge-fg);
 }
 :root.dark .wapp-badge-info,
 :root.dark .wapp-badge-running,
@@ -1159,25 +1172,36 @@ textarea::placeholder {
 }
 :root.dark .wapp-badge-info,
 :root.dark .wapp-badge-running {
-  color: rgb(147 197 253);
+  --wapp-badge-fg: rgb(147 197 253);
+  color: var(--wapp-badge-fg);
 }
 :root.dark .wapp-badge-planning {
-  color: rgb(103 232 249);
+  --wapp-badge-fg: rgb(103 232 249);
+  color: var(--wapp-badge-fg);
 }
 :root.dark .wapp-badge-merged {
-  color: rgb(216 180 254);
+  --wapp-badge-fg: rgb(216 180 254);
+  color: var(--wapp-badge-fg);
 }
 :root.dark .wapp-badge-pushed {
-  color: rgb(165 180 252);
+  --wapp-badge-fg: rgb(165 180 252);
+  color: var(--wapp-badge-fg);
 }
 :root.dark .wapp-badge-deleted {
-  color: rgb(107 114 128);
+  --wapp-badge-fg: rgb(107 114 128);
+  color: var(--wapp-badge-fg);
 }
 :root.dark .wapp-badge-disabled,
 :root.dark .wapp-badge-stopped,
 :root.dark .wapp-badge-idle {
+  --wapp-badge-fg: rgb(209 213 219);
   background: rgb(64 64 64);
-  color: rgb(209 213 219);
+  color: var(--wapp-badge-fg);
+}
+
+.wapp-badge.wapp-sidebar-badge,
+:root.dark .wapp-badge.wapp-sidebar-badge {
+  background: var(--wapp-badge-fg);
 }
 
 .wapp-settings {