@pablozaiden/webapp 0.5.8 → 0.6.0

package/src/web/settings/user-management.tsx

@@ -0,0 +1,123 @@
+import { useCallback, useState } from "react";
+import type { CreatedUserResponse, WebAppConfigResponse, WebAppUserRole, WebAppUserSummary } from "../../contracts";
+import { appJson } from "../api-client";
+import { Badge, Button, ConfirmDialog, EmptyState, FormSection, SelectField, TextField } from "../components";
+import { useLiveQuery } from "../realtime/useRealtime";
+import { ResourceState } from "./resource-state";
+
+export function UserManagement({ config }: { config: WebAppConfigResponse }) {
+  const [username, setUsername] = useState("");
+  const [role, setRole] = useState<WebAppUserRole>("user");
+  const [setupLink, setSetupLink] = useState<string>();
+  const [userToDelete, setUserToDelete] = useState<WebAppUserSummary>();
+  const [error, setError] = useState<string>();
+
+  const loadUsers = useCallback(
+    () => config.userManagement.canManageUsers
+      ? appJson<WebAppUserSummary[]>("/api/users")
+      : Promise.resolve([]),
+    [config.userManagement.canManageUsers],
+  );
+  const { data: users, error: usersLoadError, loading: usersLoading, refresh: refreshUsers } = useLiveQuery<WebAppUserSummary[]>({ load: loadUsers, realtime: false });
+
+  async function createUser() {
+    try {
+      setError(undefined);
+      const result = await appJson<CreatedUserResponse>("/api/users", { method: "POST", body: JSON.stringify({ username, role }) });
+      setUsername("");
+      setRole("user");
+      setSetupLink(result.setupLink.url);
+      await refreshUsers();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    }
+  }
+
+  async function updateRole(user: WebAppUserSummary, nextRole: WebAppUserRole) {
+    try {
+      setError(undefined);
+      await appJson(`/api/users/${encodeURIComponent(user.id)}/role`, { method: "PATCH", body: JSON.stringify({ role: nextRole }) });
+      await refreshUsers();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    }
+  }
+
+  async function resetUser(user: WebAppUserSummary) {
+    try {
+      setError(undefined);
+      const result = await appJson<CreatedUserResponse>(`/api/users/${encodeURIComponent(user.id)}/reset`, { method: "POST", body: "{}" });
+      setSetupLink(result.setupLink.url);
+      await refreshUsers();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    }
+  }
+
+  async function deleteUser(user: WebAppUserSummary) {
+    try {
+      setError(undefined);
+      await appJson(`/api/users/${encodeURIComponent(user.id)}`, { method: "DELETE" });
+      setUserToDelete(undefined);
+      await refreshUsers();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    }
+  }
+
+  if (!config.userManagement.canManageUsers) {
+    return null;
+  }
+  return (
+    <FormSection title="User management" description="Create users, reset passkeys, and manage admin access.">
+      {error ? <p className="wapp-error">{error}</p> : null}
+      <br />
+      <div className="wapp-settings-row stacked">
+        <div>
+          <TextField label="Username" value={username} onChange={(event) => setUsername(event.currentTarget.value)} placeholder="new-user" />
+          <br />
+          <SelectField label="Role" value={role} onChange={(event) => setRole(event.currentTarget.value as WebAppUserRole)}>
+            <option value="user">User</option>
+            <option value="admin">Admin</option>
+          </SelectField>
+        </div>
+        <br />
+        <div className="wapp-row-actions"><Button type="button" variant="primary" disabled={!username.trim()} onClick={() => void createUser()}>Create setup link</Button></div>
+        {setupLink ? <code className="wapp-token">{setupLink}</code> : null}
+      </div>
+      <br />
+      <ResourceState loading={usersLoading} error={usersLoadError} hasData={users !== undefined} refresh={refreshUsers} />
+      {users?.length ? (
+        <div className="wapp-list">
+          {users.map((user) => (
+            <div className="wapp-list-row" key={user.id}>
+              <span>
+                <strong>{user.username}</strong>
+                <small>{user.role} · passkey {user.passkeyConfigured ? "configured" : "pending"} · created {user.createdAt}</small>
+              </span>
+              <div className="wapp-row-actions">
+                {user.role !== "owner" ? (
+                  <select className="wapp-inline-select" aria-label={`Role for ${user.username}`} value={user.role} onChange={(event) => void updateRole(user, event.currentTarget.value as WebAppUserRole)}>
+                    <option value="user">User</option>
+                    <option value="admin">Admin</option>
+                  </select>
+                ) : <Badge variant="success">Owner</Badge>}
+                {user.role !== "owner" ? <Button type="button" onClick={() => void resetUser(user)}>Reset</Button> : null}
+                <Button type="button" variant="danger" disabled={user.role === "owner"} onClick={() => setUserToDelete(user)}>Delete</Button>
+              </div>
+            </div>
+          ))}
+        </div>
+      ) : users !== undefined && !usersLoadError ? <EmptyState title="No users" /> : null}
+      <ConfirmDialog
+        open={Boolean(userToDelete)}
+        title="Delete user?"
+        message={userToDelete ? `This permanently deletes "${userToDelete.username}" and revokes their setup links, API keys, passkeys and device sessions.` : ""}
+        confirmLabel="Delete user"
+        danger
+        onCancel={() => setUserToDelete(undefined)}
+        onConfirm={() => userToDelete && void deleteUser(userToDelete)}
+      />
+    </FormSection>
+  );
+}

package/src/web/settings-view.tsx

@@ -0,0 +1,3 @@
+export { SettingsView } from "./settings/settings-view";
+export type { SettingsViewProps } from "./settings/settings-view";
+export type { SettingsAction, SettingsRow, SettingsSection } from "./root-types";

package/src/web/sidebar-state.ts

@@ -0,0 +1,108 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+import type { SidebarNode, WebAppRoute } from "./sidebar/types";
+
+export type StoredSidebarPin = {
+  id: string;
+  title: string;
+  subtitle?: string;
+  badge?: string;
+  badgeVariant?: SidebarNode["badgeVariant"];
+  route: WebAppRoute;
+};
+
+export type SidebarCollapsedState = Record<string, boolean>;
+
+export function flattenSidebarItems(nodes: SidebarNode[]): SidebarNode[] {
+  return nodes.flatMap((node) => [
+    node,
+    ...(node.children ? flattenSidebarItems(node.children) : []),
+  ]).filter((node) => node.type === "item");
+}
+
+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");
+}
+
+export function toStoredPin(node: SidebarNode): StoredSidebarPin | undefined {
+  if (!node.route) {
+    return undefined;
+  }
+  return {
+    id: node.pinId ?? node.id,
+    title: node.title,
+    subtitle: node.subtitle,
+    badge: node.badge,
+    badgeVariant: node.badgeVariant,
+    route: node.route,
+  };
+}
+
+export function useSidebarPins(appName: string, storageKey?: string) {
+  const key = pinStorageKey(appName, storageKey);
+  const [pins, setPins] = useState<StoredSidebarPin[]>(() => {
+    try {
+      const raw = localStorage.getItem(key);
+      return raw ? JSON.parse(raw) as StoredSidebarPin[] : [];
+    } catch {
+      return [];
+    }
+  });
+
+  useEffect(() => {
+    localStorage.setItem(key, JSON.stringify(pins));
+  }, [key, pins]);
+
+  const pinIds = useMemo(() => new Set(pins.map((pin) => pin.id)), [pins]);
+  const pin = useCallback((node: SidebarNode) => {
+    const stored = toStoredPin(node);
+    if (!stored) {
+      return;
+    }
+    setPins((current) => [...current.filter((item) => item.id !== stored.id), stored]);
+  }, []);
+  const unpin = useCallback((id: string) => {
+    setPins((current) => current.filter((item) => item.id !== id));
+  }, []);
+
+  return { pins, pinIds, pin, unpin };
+}
+
+export 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 };
+}

package/src/web/sidebar-tree.tsx

@@ -0,0 +1,89 @@
+import { useState } from "react";
+import { Badge, ContextMenu, type ContextMenuPosition } from "./components";
+import type { SidebarCollapsedState } from "./sidebar-state";
+import type { ActionMenuItem, SidebarNode, WebAppRoute } from "./sidebar/types";
+
+type SidebarTreeParentKind = "root" | "section" | "item";
+
+export 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;
+  }
+  const baseIndentRem = level * 0.375;
+  const nestedSectionIndentRem = parentKind === "section" && level > 1 ? 0.875 : 0;
+  return { marginLeft: `${baseIndentRem + nestedSectionIndentRem}rem` };
+}
+
+export 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 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={toggleAriaLabel} disabled={searchActive} onClick={toggleNodeCollapsed}>
+                    <span>{isCollapsed ? "▶" : "▼"}</span>{node.title}
+                  </button>
+                ) : (
+                  <div className="wapp-sidebar-section-label">{node.title}</div>
+                )}
+                {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} searchActive={searchActive} level={level + 1} parentKind="section" /> : null}
+              {!isCollapsed && !hasChildren && level === 0 ? <div className="wapp-sidebar-empty">No items.</div> : null}
+            </section>
+          );
+        }
+        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={toggleAriaLabel} disabled={searchActive} onClick={toggleNodeCollapsed}>{isCollapsed ? "▶" : "▼"}</button> : null}
+            <button
+              type="button"
+              className={`wapp-sidebar-item ${active ? "active" : ""}`}
+              onClick={() => node.route && navigate(node.route)}
+              onContextMenu={(event) => {
+                if (!node.actions?.length) {
+                  return;
+                }
+                event.preventDefault();
+                setContextMenu({ position: { x: event.clientX, y: event.clientY }, items: node.actions, title: node.title });
+              }}
+            >
+              <span>
+                <strong>{node.title}</strong>
+                {node.subtitle ? <small>{node.subtitle}</small> : null}
+              </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} searchActive={searchActive} level={level + 1} parentKind="item" /></div> : null}
+          </div>
+        );
+      })}
+      <ContextMenu items={contextMenu?.items ?? []} position={contextMenu?.position ?? null} ariaLabel={contextMenu ? `Actions for ${contextMenu.title}` : "Actions"} onClose={() => setContextMenu(null)} />
+    </>
+  );
+}

package/src/web/styles.css

@@ -621,6 +621,15 @@ textarea::placeholder {
   padding: 1.5rem 2rem max(2rem, var(--wapp-mobile-bottom-clearance));
 }
 
+.wapp-page-full {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: hidden;
+  padding: 0;
+}
+
 .wapp-page,
 .wapp-panel,
 .wapp-modal-body {
@@ -1868,85 +1877,88 @@ textarea::placeholder {
   display: none;
 }
 
-@media (max-width: 900px) {
-  .wapp-shell {
-    display: block;
-  }
+/* WebAppRoot owns the mobile state so CSS and browser behavior use one breakpoint. */
+:root[data-wapp-mobile] .wapp-shell {
+  display: block;
+}
 
-  .wapp-sidebar,
-  .wapp-shell.sidebar-collapsed .wapp-sidebar {
-    position: fixed;
-    inset: 0 auto 0 0;
-    z-index: 60;
-    width: min(20rem, 86vw);
-    min-width: min(20rem, 86vw);
-    transform: translateX(-100%);
-    opacity: 1;
-    pointer-events: auto;
-  }
+:root[data-wapp-mobile] .wapp-sidebar,
+:root[data-wapp-mobile] .wapp-shell.sidebar-collapsed .wapp-sidebar {
+  position: fixed;
+  inset: 0 auto 0 0;
+  z-index: 60;
+  width: min(20rem, 86vw);
+  min-width: min(20rem, 86vw);
+  transform: translateX(-100%);
+  opacity: 1;
+  pointer-events: auto;
+}
 
-  .wapp-shell.sidebar-open .wapp-sidebar {
-    transform: translateX(0);
-  }
+:root[data-wapp-mobile] .wapp-shell.sidebar-open .wapp-sidebar {
+  transform: translateX(0);
+}
 
-  .wapp-shell.sidebar-open .wapp-mobile-backdrop {
-    display: block;
-  }
+:root[data-wapp-mobile] .wapp-shell.sidebar-open .wapp-mobile-backdrop {
+  display: block;
+}
 
-  .wapp-main-header {
-    padding: 0.875rem 1rem;
-  }
+:root[data-wapp-mobile] .wapp-main-header {
+  padding: 0.875rem 1rem;
+}
 
-  .wapp-main {
-    touch-action: pan-y;
-  }
+:root[data-wapp-mobile] .wapp-main {
+  touch-action: pan-y;
+}
 
-  .wapp-main-content {
-    overflow: auto;
-    overflow-x: hidden;
-  }
+:root[data-wapp-mobile] .wapp-main-content {
+  overflow: auto;
+  overflow-x: hidden;
+}
 
-  .wapp-page {
-    padding: 1rem 1rem max(1rem, var(--wapp-mobile-bottom-clearance));
-  }
+:root[data-wapp-mobile] .wapp-page {
+  padding: 1rem 1rem max(1rem, var(--wapp-mobile-bottom-clearance));
+}
 
-  .wapp-panel-header,
-  .wapp-entity-header {
-    flex-wrap: wrap;
-  }
+:root[data-wapp-mobile] .wapp-page-full {
+  padding: 0;
+}
 
-  .wapp-panel-actions,
-  .wapp-entity-header-actions {
-    width: 100%;
-    justify-content: flex-start;
-  }
+:root[data-wapp-mobile] .wapp-panel-header,
+:root[data-wapp-mobile] .wapp-entity-header {
+  flex-wrap: wrap;
+}
 
-  .wapp-data-list-row {
-    gap: 0.5rem;
-  }
+:root[data-wapp-mobile] .wapp-panel-actions,
+:root[data-wapp-mobile] .wapp-entity-header-actions {
+  width: 100%;
+  justify-content: flex-start;
+}
 
-  .wapp-data-list-row-meta,
-  .wapp-data-list-row-badge,
-  .wapp-data-list-row-actions {
-    min-width: 0;
-  }
+:root[data-wapp-mobile] .wapp-data-list-row {
+  gap: 0.5rem;
+}
 
-  .wapp-mobile-only {
-    display: inline-flex;
-  }
+:root[data-wapp-mobile] .wapp-data-list-row-meta,
+:root[data-wapp-mobile] .wapp-data-list-row-badge,
+:root[data-wapp-mobile] .wapp-data-list-row-actions {
+  min-width: 0;
+}
 
-  .wapp-form-section {
-    grid-template-columns: 1fr;
-  }
+:root[data-wapp-mobile] .wapp-mobile-only {
+  display: inline-flex;
+}
 
-  .wapp-settings-row {
-    display: block;
-  }
+:root[data-wapp-mobile] .wapp-form-section {
+  grid-template-columns: 1fr;
+}
 
-  .wapp-row-actions {
-    justify-content: flex-start;
-    margin-top: 0.75rem;
-  }
+:root[data-wapp-mobile] .wapp-settings-row {
+  display: block;
+}
+
+:root[data-wapp-mobile] .wapp-row-actions {
+  justify-content: flex-start;
+  margin-top: 0.75rem;
 }
 
 @media (max-width: 640px) {