@pablozaiden/webapp 0.3.0 → 0.3.2

package/package.json

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

package/src/web/WebAppRoot.tsx

@@ -1002,16 +1002,28 @@ 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 navigateFromSidebarHeader = (nextRoute: WebAppRoute) => {
+    navigate(nextRoute);
+    setSidebarOpen(false);
+  };
+  const runSidebarHeaderAction = (action: SidebarAction) => {
+    if (action.onAction) {
+      action.onAction();
+    } else if (action.route) {
+      navigate(action.route);
+    }
+    setSidebarOpen(false);
+  };
 
   return (
     <main className={`wapp-shell ${sidebarCollapsed ? "sidebar-collapsed" : ""} ${sidebarOpen ? "sidebar-open" : ""}`}>
       <div className="wapp-mobile-backdrop" onClick={() => setSidebarOpen(false)} />
       <aside className="wapp-sidebar">
         <div className="wapp-sidebar-header">
-          <button type="button" className="wapp-brand" onClick={() => navigate(homeRoute)}>{appName}</button>
+          <button type="button" className="wapp-brand" onClick={() => navigateFromSidebarHeader(homeRoute)}>{appName}</button>
           <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={action.onAction ?? (() => action.route && navigate(action.route))}><ActionIcon icon={action.icon} /></IconButton>)}
-            <IconButton className="wapp-sidebar-top-button" title="Settings" aria-label="Open settings" active={route.view === "settings"} onClick={() => navigate({ view: "settings" })}><Icon name="settings" /></IconButton>
+            {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>
           </div>
         </div>

package/src/web/components/index.tsx

@@ -30,6 +30,10 @@ export function Badge({ variant = "default", className = "", children, ...props
   return <span {...props} className={`wapp-badge wapp-badge-${variant} ${className}`}>{children}</span>;
 }
 
+export function Page({ className = "", children, ...props }: HTMLAttributes<HTMLDivElement> & { children: ReactNode }) {
+  return <div {...props} className={`wapp-page ${className}`}>{children}</div>;
+}
+
 export function Panel({ title, description, actions, children, className = "" }: { title?: string; description?: string; actions?: ReactNode; children?: ReactNode; className?: string }) {
   return (
     <section className={`wapp-panel ${className}`}>

package/src/web/styles.css

@@ -1,6 +1,6 @@
 :root {
   color-scheme: light;
-  --wapp-bg: #f3f4f6;
+  --wapp-bg: var(--wapp-shell-bg);
   --wapp-shell-bg: rgb(249 250 251 / 0.95);
   --wapp-surface: #ffffff;
   --wapp-surface-muted: #f9fafb;
@@ -18,7 +18,7 @@
 
 :root.dark {
   color-scheme: dark;
-  --wapp-bg: #0a0a0a;
+  --wapp-bg: var(--wapp-shell-bg);
   --wapp-shell-bg: rgb(23 23 23 / 0.95);
   --wapp-surface: #262626;
   --wapp-surface-muted: #171717;
@@ -550,6 +550,12 @@ textarea::placeholder {
   min-height: 0;
   overflow: auto;
   overflow-x: hidden;
+  padding: 0;
+}
+
+.wapp-page {
+  width: 100%;
+  min-width: 0;
   padding: 1.5rem 2rem 2rem;
 }
 
@@ -1765,11 +1771,14 @@ textarea::placeholder {
   }
 
   .wapp-main-content {
-    padding: 1rem;
     overflow: auto;
     overflow-x: hidden;
   }
 
+  .wapp-page {
+    padding: 1rem;
+  }
+
   .wapp-panel-header,
   .wapp-entity-header {
     flex-wrap: wrap;