@pablozaiden/webapp 0.3.4 → 0.3.6

package/package.json

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

package/src/web/WebAppRoot.tsx

@@ -70,6 +70,8 @@ type StoredSidebarPin = {
   route: WebAppRoute;
 };
 
+type SidebarCollapsedState = Record<string, boolean>;
+
 function isSidebarShortcutEditableTarget(target: EventTarget | null): boolean {
   if (!(target instanceof HTMLElement)) {
     return false;
@@ -251,6 +253,17 @@ function pinStorageKey(appName: string, explicitKey?: string): string {
   return explicitKey ?? `webapp.${appName.toLowerCase().replace(/[^a-z0-9]+/g, "-")}.sidebar.pins`;
 }
 
+function sidebarCollapsedStorageKey(appName: string): string {
+  return `webapp.${appName.toLowerCase().replace(/[^a-z0-9]+/g, "-")}.sidebar.collapsed`;
+}
+
+function isSidebarCollapsedState(value: unknown): value is SidebarCollapsedState {
+  if (value === null || typeof value !== "object" || Array.isArray(value)) {
+    return false;
+  }
+  return Object.values(value).every((entry) => typeof entry === "boolean");
+}
+
 function toStoredPin(node: SidebarNode): StoredSidebarPin | undefined {
   if (!node.route) return undefined;
   return {
@@ -291,6 +304,33 @@ function useSidebarPins(appName: string, storageKey?: string) {
   return { pins, pinIds, pin, unpin };
 }
 
+function useSidebarCollapsedState(appName: string) {
+  const key = sidebarCollapsedStorageKey(appName);
+  const [collapsed, setCollapsed] = useState<SidebarCollapsedState>(() => {
+    try {
+      const raw = localStorage.getItem(key);
+      if (!raw) return {};
+      const parsed: unknown = JSON.parse(raw);
+      return isSidebarCollapsedState(parsed) ? parsed : {};
+    } catch {
+      return {};
+    }
+  });
+
+  useEffect(() => {
+    localStorage.setItem(key, JSON.stringify(collapsed));
+  }, [key, collapsed]);
+
+  const toggleCollapsed = useCallback((id: string, isCollapsed: boolean) => {
+    setCollapsed((current) => {
+      const currentIsCollapsed = current[id] ?? isCollapsed;
+      return { ...current, [id]: !currentIsCollapsed };
+    });
+  }, []);
+
+  return { collapsed, toggleCollapsed };
+}
+
 function Icon({ name }: { name: "settings" | "sidebar" | "plus" | "home" | "search" | "bolt" | "chat" | "code" | "refresh" }) {
   const common = { "aria-hidden": true, viewBox: "0 0 24 24", className: "wapp-svg" };
   if (name === "settings") return <svg {...common}><circle cx="12" cy="12" r="3" /><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06A1.65 1.65 0 0 0 15 19.4a1.65 1.65 0 0 0-1 .6 1.65 1.65 0 0 0-.33 1.82V22a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.6 15a1.65 1.65 0 0 0-.6-1 1.65 1.65 0 0 0-1.82-.33H2a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.6a1.65 1.65 0 0 0 1-.6 1.65 1.65 0 0 0 .33-1.82V2a2 2 0 1 1 4 0v.09A1.65 1.65 0 0 0 15 4.6a1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9c.14.33.34.64.6 1 .26.36.61.6 1 .6H22a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-2.51.4Z" /></svg>;
@@ -500,8 +540,7 @@ function sidebarIndentStyle(level: number, parentKind: SidebarTreeParentKind): {
   return { marginLeft: `${baseIndentRem + nestedSectionIndentRem}rem` };
 }
 
-function SidebarTree({ nodes, route, navigate, level = 0, parentKind = "root" }: { nodes: SidebarNode[]; route: WebAppRoute; navigate: (route: WebAppRoute) => void; level?: number; parentKind?: SidebarTreeParentKind }) {
-  const [collapsed, setCollapsed] = useState<Record<string, boolean>>({});
+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 }) {
   const [contextMenu, setContextMenu] = useState<{ position: ContextMenuPosition; items: ActionMenuItem[]; title: string } | null>(null);
   return (
     <>
@@ -513,7 +552,7 @@ function SidebarTree({ nodes, route, navigate, level = 0, parentKind = "root" }:
             <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={() => setCollapsed((current) => ({ ...current, [node.id]: !isCollapsed }))}>
+                  <button type="button" aria-expanded={!isCollapsed} aria-label={`${isCollapsed ? "Expand" : "Collapse"} ${node.title}`} onClick={() => toggleCollapsed(node.id, isCollapsed)}>
                     <span>{isCollapsed ? "▶" : "▼"}</span>{node.title}
                   </button>
                 ) : (
@@ -521,7 +560,7 @@ function SidebarTree({ nodes, route, navigate, level = 0, parentKind = "root" }:
                 )}
                 {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} level={level + 1} parentKind="section" /> : null}
+              {!isCollapsed && hasChildren ? <SidebarTree nodes={node.children ?? []} route={route} navigate={navigate} collapsed={collapsed} toggleCollapsed={toggleCollapsed} level={level + 1} parentKind="section" /> : null}
               {!isCollapsed && !hasChildren && level === 0 ? <div className="wapp-sidebar-empty">No items.</div> : null}
             </section>
           );
@@ -529,7 +568,7 @@ function SidebarTree({ nodes, route, navigate, level = 0, parentKind = "root" }:
         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={() => setCollapsed((current) => ({ ...current, [node.id]: !isCollapsed }))}>{isCollapsed ? "▶" : "▼"}</button> : null}
+            {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}
             <button
               type="button"
               className={`wapp-sidebar-item ${active ? "active" : ""}`}
@@ -546,7 +585,7 @@ function SidebarTree({ nodes, route, navigate, level = 0, parentKind = "root" }:
               </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} 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} level={level + 1} parentKind="item" /></div> : null}
           </div>
         );
       })}
@@ -992,6 +1031,7 @@ export function WebAppRoot({ appName, homeRoute, sidebar, routes, header, onRout
   const [search, setSearch] = useState("");
   const [sidebarOpen, setSidebarOpen] = useState(false);
   const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
+  const sidebarTreeState = useSidebarCollapsedState(appName);
   const toggleSidebarCollapsed = useCallback(() => {
     setSidebarCollapsed((current) => {
       const nextCollapsed = !current;
@@ -1153,7 +1193,7 @@ export function WebAppRoot({ appName, homeRoute, sidebar, routes, header, onRout
         </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); }} />
+          <SidebarTree nodes={nodes} route={route} navigate={(next) => { navigate(next); setSidebarOpen(false); }} collapsed={sidebarTreeState.collapsed} toggleCollapsed={sidebarTreeState.toggleCollapsed} />
           <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 {