@pablozaiden/webapp 0.1.0 → 0.2.1

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/render.tsx

@@ -0,0 +1,26 @@
+import type { ReactNode } from "react";
+import { createRoot, type Root } from "react-dom/client";
+
+declare global {
+  var __pablozaidenWebAppRoots: WeakMap<Element, Root> | undefined;
+}
+
+function roots(): WeakMap<Element, Root> {
+  globalThis.__pablozaidenWebAppRoots ??= new WeakMap<Element, Root>();
+  return globalThis.__pablozaidenWebAppRoots;
+}
+
+export function renderWebApp(element: ReactNode, container: Element | string = "root"): Root {
+  const target = typeof container === "string" ? document.getElementById(container) : container;
+  if (!target) {
+    throw new Error(`Unable to find React root container: ${container}`);
+  }
+  const registry = roots();
+  let root = registry.get(target);
+  if (!root) {
+    root = createRoot(target);
+    registry.set(target, root);
+  }
+  root.render(element);
+  return root;
+}

package/src/web/styles.css

@@ -444,6 +444,9 @@ textarea::placeholder {
 }
 
 .wapp-panel {
+  min-width: 0;
+  max-width: 100%;
+  box-sizing: border-box;
   border: 1px solid var(--wapp-border-soft);
   border-radius: 1.5rem;
   background: var(--wapp-surface);
@@ -550,6 +553,10 @@ textarea::placeholder {
   margin-bottom: 1rem;
 }
 
+.wapp-entity-header > div:first-child {
+  min-width: 0;
+}
+
 .wapp-entity-header h2 {
   margin: 0;
   font-size: 1.125rem;
@@ -580,12 +587,15 @@ textarea::placeholder {
 }
 
 .wapp-data-list {
+  max-width: 100%;
+  box-sizing: border-box;
   overflow: hidden;
   border: 1px solid var(--wapp-border-soft);
   border-radius: 0.875rem;
 }
 
 .wapp-data-list-row {
+  box-sizing: border-box;
   width: 100%;
   display: flex;
   align-items: center;
@@ -697,6 +707,14 @@ textarea::placeholder {
   background: var(--wapp-surface);
 }
 
+.wapp-auth-dialog {
+  width: min(28rem, calc(100vw - 2rem));
+}
+
+.wapp-auth-dialog .wapp-dialog-body:empty {
+  display: none;
+}
+
 .wapp-button {
   min-height: 2.375rem;
   border: 1px solid var(--wapp-border);
@@ -1014,6 +1032,17 @@ textarea::placeholder {
   font-size: 0.8125rem;
 }
 
+.wapp-inline-select {
+  min-height: 2.375rem;
+  border: 1px solid var(--wapp-border);
+  border-radius: 0.375rem;
+  background: var(--wapp-surface);
+  color: var(--wapp-text);
+  box-shadow: var(--wapp-shadow);
+  padding: 0.5rem 2rem 0.5rem 0.75rem;
+  font-size: 0.8125rem;
+}
+
 .wapp-field textarea {
   min-height: 8rem;
   resize: vertical;
@@ -1035,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%;
@@ -1088,6 +1156,12 @@ textarea::placeholder {
   padding: 0.75rem;
 }
 
+.wapp-grid-2 {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.75rem;
+}
+
 .wapp-list-row + .wapp-list-row {
   border-top: 1px solid var(--wapp-border-soft);
 }
@@ -1180,11 +1254,11 @@ textarea::placeholder {
 
 .wapp-dialog-title {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   justify-content: space-between;
   gap: 1rem;
   border-bottom: 1px solid var(--wapp-border);
-  padding: 1rem 1.5rem;
+  padding: 1rem 1.5rem 0.75rem;
 }
 
 .wapp-dialog h2 {
@@ -1192,6 +1266,12 @@ textarea::placeholder {
   font-size: 1.125rem;
 }
 
+.wapp-dialog-title p {
+  margin: 0.25rem 0 0;
+  color: var(--wapp-muted);
+  line-height: 1.35;
+}
+
 .wapp-dialog-close {
   display: inline-flex;
   align-items: center;
@@ -1274,6 +1354,28 @@ textarea::placeholder {
 
   .wapp-main-content {
     padding: 1rem;
+    overflow-x: hidden;
+  }
+
+  .wapp-panel-header,
+  .wapp-entity-header {
+    flex-wrap: wrap;
+  }
+
+  .wapp-panel-actions,
+  .wapp-entity-header-actions {
+    width: 100%;
+    justify-content: flex-start;
+  }
+
+  .wapp-data-list-row {
+    gap: 0.5rem;
+  }
+
+  .wapp-data-list-row-meta,
+  .wapp-data-list-row-badge,
+  .wapp-data-list-row-actions {
+    min-width: 0;
   }
 
   .wapp-mobile-only {