@pablozaiden/webapp 0.2.0 → 0.2.1

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

@@ -1064,6 +1064,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%;