@pablozaiden/webapp 0.2.0 → 0.2.2

package/src/web/WebAppRoot.tsx

@@ -40,6 +40,7 @@ export interface WebAppRootProps {
   appName: string;
   homeRoute: WebAppRoute;
   sidebar: {
+    search?: boolean;
     topActions?: SidebarAction[];
     pinning?: false | {
       sectionTitle?: string;
@@ -487,6 +488,7 @@ 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 refreshUsers = useCallback(async () => {
@@ -535,6 +537,7 @@ function UserManagement({ config }: { config: WebAppConfigResponse }) {
     try {
       setError(undefined);
       await json(`/api/users/${encodeURIComponent(user.id)}`, { method: "DELETE" });
+      setUserToDelete(undefined);
       await refreshUsers();
     } catch (err) {
       setError(err instanceof Error ? err.message : String(err));
@@ -575,23 +578,73 @@ function UserManagement({ config }: { config: WebAppConfigResponse }) {
                 </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={() => void deleteUser(user)}>Delete</Button>
+              <Button type="button" variant="danger" disabled={user.role === "owner"} onClick={() => setUserToDelete(user)}>Delete</Button>
             </div>
           </div>
         ))}
       </div>
+      <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>
   );
 }
 
+const KILL_SERVER_COUNTDOWN_SECONDS = 15;
+
+function computeProgressPercent(countdown: number, total: number): number {
+  return total <= 0 ? 0 : (countdown / total) * 100;
+}
+
+function useCountdownReload(active: boolean, onComplete: () => void, durationSeconds = KILL_SERVER_COUNTDOWN_SECONDS): { countdown: number; progressPercent: number } {
+  const [countdown, setCountdown] = useState(durationSeconds);
+
+  useEffect(() => {
+    if (!active) {
+      setCountdown(durationSeconds);
+      return;
+    }
+
+    setCountdown(durationSeconds);
+    const interval = window.setInterval(() => {
+      setCountdown((previous) => {
+        const next = previous - 1;
+        if (next <= 0) {
+          window.clearInterval(interval);
+          onComplete();
+          return 0;
+        }
+        return next;
+      });
+    }, 1000);
+
+    return () => window.clearInterval(interval);
+  }, [active, durationSeconds, onComplete]);
+
+  return {
+    countdown,
+    progressPercent: computeProgressPercent(countdown, durationSeconds),
+  };
+}
+
 function SettingsView({ config, refresh, customSections, theme, setTheme }: { config: WebAppConfigResponse; refresh: () => Promise<void>; customSections: SettingsSection[]; theme: ThemePreference; setTheme: (theme: ThemePreference) => void }) {
   const [apiKeys, setApiKeys] = useState<ApiKeySummary[]>([]);
   const [authSessions, setAuthSessions] = useState<AuthSessionSummary[]>([]);
   const [createdToken, setCreatedToken] = useState<string>();
   const [apiKeyToDelete, setApiKeyToDelete] = useState<ApiKeySummary>();
+  const [authSessionToRevoke, setAuthSessionToRevoke] = useState<AuthSessionSummary>();
   const [confirmDeletePasskey, setConfirmDeletePasskey] = useState(false);
+  const [confirmKillServer, setConfirmKillServer] = useState(false);
   const [killRequested, setKillRequested] = useState(false);
   const [error, setError] = useState<string>();
+  const reloadPage = useCallback(() => window.location.reload(), []);
+  const { countdown, progressPercent } = useCountdownReload(killRequested, reloadPage);
 
   const refreshApiKeys = useCallback(async () => {
     if (config.apiKeys.enabled) {
@@ -648,10 +701,25 @@ function SettingsView({ config, refresh, customSections, theme, setTheme }: { co
     await refresh();
   }
 
+  async function revokeAuthSession(session: AuthSessionSummary) {
+    try {
+      setError(undefined);
+      await json(`/api/auth/sessions/${session.id}`, { method: "DELETE" });
+      setAuthSessionToRevoke(undefined);
+      await refreshAuthSessions();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    }
+  }
+
   async function killServer() {
+    setError(undefined);
+    setConfirmKillServer(false);
+    const response = await fetch("/api/server/kill", { method: "POST" });
+    if (!response.ok) {
+      throw new Error("Failed to kill server. Please try again.");
+    }
     setKillRequested(true);
-    await fetch("/api/server/kill", { method: "POST" });
-    setTimeout(() => window.location.reload(), 3500);
   }
 
   return (
@@ -729,7 +797,7 @@ function SettingsView({ config, refresh, customSections, theme, setTheme }: { co
               {authSessions.length ? authSessions.map((session) => (
                 <div className="wapp-list-row" key={session.id}>
                   <span><strong>{session.clientId}</strong><small>{session.scope} · {session.active ? "active" : "inactive"} · {session.updatedAt}</small></span>
-                  <Button type="button" variant="danger" disabled={!session.active} onClick={() => void json(`/api/auth/sessions/${session.id}`, { method: "DELETE" }).then(refreshAuthSessions)}>Revoke</Button>
+                  <Button type="button" variant="danger" disabled={!session.active} onClick={() => setAuthSessionToRevoke(session)}>Revoke</Button>
                 </div>
               )) : <EmptyState title="No device sessions" />}
             </div>
@@ -741,8 +809,23 @@ function SettingsView({ config, refresh, customSections, theme, setTheme }: { co
 
       {config.currentUser?.isAdmin ? (
         <FormSection title="Server operations">
-          {killRequested ? <p className="wapp-notice">Server is shutting down. Reloading soon...</p> : null}
-          <Button type="button" variant="danger" onClick={() => void killServer().catch((err) => setError(String(err)))}>Kill server</Button>
+          <div className="wapp-settings-row">
+            <div>
+              <strong>Kill server</strong>
+              <p>Stop the server process. If your deployment restarts it automatically, the app will come back after a moment.</p>
+              {killRequested ? (
+                <div className="wapp-shutdown-countdown" aria-live="polite">
+                  <div className="wapp-shutdown-message">Server is shutting down... Reloading in {countdown}s</div>
+                  <div className="wapp-shutdown-progress" aria-hidden="true">
+                    <div className="wapp-shutdown-progress-bar" style={{ width: `${progressPercent}%` }} />
+                  </div>
+                </div>
+              ) : null}
+            </div>
+            <div className="wapp-row-actions">
+              <Button type="button" variant="danger" disabled={killRequested} onClick={() => setConfirmKillServer(true)}>Kill server</Button>
+            </div>
+          </div>
         </FormSection>
       ) : null}
 
@@ -765,6 +848,24 @@ function SettingsView({ config, refresh, customSections, theme, setTheme }: { co
         onConfirm={() => apiKeyToDelete && void deleteKey(apiKeyToDelete.id)}
       />
       <ConfirmDialog open={confirmDeletePasskey} title="Delete passkey?" message="This removes the configured passkey and invalidates browser sessions." confirmLabel="Delete passkey" danger onCancel={() => setConfirmDeletePasskey(false)} onConfirm={() => void deleteConfiguredPasskey()} />
+      <ConfirmDialog
+        open={Boolean(authSessionToRevoke)}
+        title="Revoke device session?"
+        message={authSessionToRevoke ? `This revokes the active "${authSessionToRevoke.clientId}" refresh-token session.` : ""}
+        confirmLabel="Revoke session"
+        danger
+        onCancel={() => setAuthSessionToRevoke(undefined)}
+        onConfirm={() => authSessionToRevoke && void revokeAuthSession(authSessionToRevoke)}
+      />
+      <ConfirmDialog
+        open={confirmKillServer}
+        title="Kill server?"
+        message="Are you sure you want to kill the server?"
+        confirmLabel="Kill server"
+        danger
+        onCancel={() => setConfirmKillServer(false)}
+        onConfirm={() => void killServer().catch((err) => setError(String(err)))}
+      />
     </div>
   );
 }
@@ -776,10 +877,11 @@ export function WebAppRoot({ appName, homeRoute, sidebar, routes, header, settin
   const [search, setSearch] = useState("");
   const [sidebarOpen, setSidebarOpen] = useState(false);
   const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
+  const sidebarSearchEnabled = sidebar.search !== false;
   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 }), [sidebar, search]);
+  const filteredNodes = useMemo(() => sidebar.getNodes({ search: sidebarSearchEnabled ? search : "" }), [sidebar, search, sidebarSearchEnabled]);
   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]));
@@ -807,7 +909,7 @@ export function WebAppRoot({ appName, homeRoute, sidebar, routes, header, settin
   }), [pinningActionFor]);
   const nodes = useMemo(() => {
     const augmented = augmentPinningActions(filteredNodes);
-    if (!pinningEnabled || search.trim() || currentPins.length === 0) return augmented;
+    if (!pinningEnabled || (sidebarSearchEnabled && search.trim()) || 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) ?? {
@@ -827,7 +929,7 @@ export function WebAppRoot({ appName, homeRoute, sidebar, routes, header, settin
       { 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]);
+  }, [augmentPinningActions, baseNodes, currentPins, filteredNodes, pinningEnabled, search, sidebar.pinning, sidebarSearchEnabled]);
 
   useEffect(() => {
     if (!config?.currentUser) return;
@@ -888,7 +990,7 @@ export function WebAppRoot({ appName, homeRoute, sidebar, routes, header, settin
           </div>
         </div>
         <div className="wapp-sidebar-scroll">
-          <label className="wapp-search"><span className="sr-only">Search</span><input value={search} onChange={(event) => setSearch(event.target.value)} placeholder="Search" /></label>
+          {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); }} />
         </div>
         <div className="wapp-sidebar-footer">v{effectiveVersion}<button type="button" aria-label="Reload" onClick={() => window.location.reload()}><Icon name="refresh" /></button></div>

package/src/web/api-client.ts

@@ -0,0 +1,64 @@
+export class WebAppApiError extends Error {
+  status: number;
+  error?: string;
+  details?: unknown;
+
+  constructor(message: string, status: number, error?: string, details?: unknown) {
+    super(message);
+    this.name = "WebAppApiError";
+    this.status = status;
+    this.error = error;
+    this.details = details;
+  }
+}
+
+export type AuthRequiredListener = () => void;
+
+const authRequiredListeners = new Set<AuthRequiredListener>();
+
+export function onAuthRequired(listener: AuthRequiredListener): () => void {
+  authRequiredListeners.add(listener);
+  return () => authRequiredListeners.delete(listener);
+}
+
+function emitAuthRequired(): void {
+  for (const listener of authRequiredListeners) {
+    listener();
+  }
+}
+
+export function appPath(path: string): string {
+  if (/^[a-z][a-z0-9+.-]*:\/\//i.test(path)) return path;
+  const base = document.querySelector("base")?.getAttribute("href") ?? "/";
+  return new URL(path.replace(/^\/+/, ""), new URL(base, window.location.href)).toString();
+}
+
+export function appWebSocketUrl(path = "/api/ws"): string {
+  const url = new URL(appPath(path));
+  url.protocol = url.protocol === "https:" ? "wss:" : "ws:";
+  return url.toString();
+}
+
+export async function appFetch(input: RequestInfo | URL, init?: RequestInit): Promise<Response> {
+  const response = await fetch(typeof input === "string" ? appPath(input) : input, {
+    ...init,
+    credentials: init?.credentials ?? "same-origin",
+    headers: {
+      accept: "application/json",
+      ...init?.headers,
+    },
+  });
+  if (response.headers.get("x-webapp-passkey-required") === "true" || response.headers.get("x-passkey-auth-required") === "true") {
+    emitAuthRequired();
+  }
+  if (!response.ok) {
+    let body: { error?: string; message?: string; details?: unknown } | undefined;
+    try {
+      body = await response.clone().json() as typeof body;
+    } catch {
+      body = undefined;
+    }
+    throw new WebAppApiError(body?.message ?? `Request failed with status ${response.status}`, response.status, body?.error, body?.details);
+  }
+  return response;
+}

package/src/web/index.ts

@@ -1,6 +1,7 @@
 export * from "./WebAppRoot";
 export * from "./components";
 export * from "./render";
+export * from "./api-client";
 export * from "./sidebar/types";
 export * from "./realtime/useRealtime";
 export type { ThemePreference } from "../contracts";

package/src/web/realtime/useRealtime.ts

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useRef, useState } from "react";
+import { appWebSocketUrl } from "../api-client";
 
 export type RealtimeStatus = "connecting" | "open" | "closed";
 export type RealtimeAction = "created" | "updated" | "changed" | "deleted";
@@ -71,8 +72,7 @@ export function useRealtime<TEvent>({
       for (const [key, value] of Object.entries(filters ?? {})) {
         if (value) params.set(key, value);
       }
-      const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
-      socket = new WebSocket(`${protocol}//${window.location.host}${path}${params.size ? `?${params.toString()}` : ""}`);
+      socket = new WebSocket(appWebSocketUrl(`${path}${params.size ? `?${params.toString()}` : ""}`));
       setStatus("connecting");
       socket.onopen = () => {
         retryRef.current = 0;

package/src/web/styles.css

@@ -725,6 +725,7 @@ textarea::placeholder {
   font-size: 0.875rem;
   font-weight: 600;
   padding: 0.5rem 0.875rem;
+  white-space: nowrap;
   transition: background 120ms ease, border-color 120ms ease, color 120ms ease, transform 120ms ease;
 }
 
@@ -978,6 +979,10 @@ textarea::placeholder {
   gap: 0.5rem;
 }
 
+.wapp-settings .wapp-row-actions {
+  flex: 0 0 auto;
+}
+
 .wapp-danger-zone {
   display: flex;
   align-items: flex-start;
@@ -1064,6 +1069,45 @@ textarea::placeholder {
   color: var(--wapp-muted);
 }
 
+.wapp-shutdown-countdown {
+  display: grid;
+  gap: 0.5rem;
+  margin-top: 0.75rem;
+  font-weight: 600;
+}
+
+.wapp-shutdown-message {
+  color: #dc2626;
+  font-size: 0.875rem;
+}
+
+:root.dark .wapp-shutdown-message {
+  color: #f87171;
+}
+
+.wapp-shutdown-progress {
+  width: 100%;
+  height: 0.375rem;
+  overflow: hidden;
+  border-radius: 999px;
+  background: #fecaca;
+}
+
+:root.dark .wapp-shutdown-progress {
+  background: #7f1d1d;
+}
+
+.wapp-shutdown-progress-bar {
+  height: 100%;
+  border-radius: inherit;
+  background: #ef4444;
+  transition: width 1s linear;
+}
+
+:root.dark .wapp-shutdown-progress-bar {
+  background: #f87171;
+}
+
 .wapp-segmented {
   display: flex;
   width: 100%;
@@ -1117,6 +1161,10 @@ textarea::placeholder {
   padding: 0.75rem;
 }
 
+.wapp-list-row > span {
+  min-width: 0;
+}
+
 .wapp-grid-2 {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -1356,3 +1404,21 @@ textarea::placeholder {
     margin-top: 0.75rem;
   }
 }
+
+@media (max-width: 640px) {
+  .wapp-settings .wapp-list-row {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    align-items: start;
+    gap: 0.75rem;
+  }
+
+  .wapp-settings .wapp-list-row .wapp-row-actions {
+    justify-content: flex-start;
+    margin-top: 0;
+  }
+
+  .wapp-settings .wapp-row-actions .wapp-inline-select {
+    max-width: 100%;
+  }
+}