rastack 0.0.44 → 0.0.45

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.0.45](https://github.com/theserverkid/reactapistack/compare/v0.0.44...v0.0.45) (2026-07-13)
+
+
+### Features
+
+* **admin:** rebuild `rastack admin` as the dogfooded React console with Linear-style filters ([8755fb5](https://github.com/theserverkid/reactapistack/commit/8755fb5e8ce239851e5cd08b15045621419046b9))
+
 ### [0.0.44](https://github.com/theserverkid/reactapistack/compare/v0.0.43...v0.0.44) (2026-07-12)
 
 

package/admin/AdminApp.tsx

@@ -1,31 +1,49 @@
 /**
- * The in-browser admin — a Django-admin-style, manifest-driven UI that runs
- * entirely over the WASM engine (`useRastackClient().engine`). It reuses the
- * headless `rastack/components` (`DataTable`, `AutoForm`, primitives) and is
- * app-generic: every screen is built from the compiled manifest, so the same
- * bundle admins any app. Faithful to `rust/rastack-api/src/admin.rs`.
+ * The admin — a full Django-admin-style, manifest-driven console, built entirely
+ * from React API Stack's own pieces: the headless `rastack/components`
+ * (`DataTable`, `AutoForm`, `Button`, `Card`, `Badge`…), the `rastack/theme`
+ * tokens, and the framework's list/detail contract. It is app-generic (every
+ * screen is derived from the compiled manifest) and transport-agnostic: the
+ * `engine` prop is the WASM engine under `rastack dev` or an HTTP engine to the
+ * real `rastack-server` under `rastack admin` — the UI never learns which.
+ *
+ * Layout: models on the left (`<Sidebar>`), the changelist table in the main
+ * area, a Linear-style filter bar on top (`<FilterBar>`), and add/change forms.
  */
-
 import React, { useEffect, useMemo, useState } from "react";
-import { useRastackClient } from "../provider";
 import {
+  AutoForm,
   Button,
   Card,
   DataTable,
-  AutoForm,
   Spinner,
   type DataTableColumnInput,
 } from "../components";
+import type { RastackEngine } from "../provider/types";
 import {
   AdminResource,
   adminResources,
   changelistHeaders,
-  detailPath,
   findResource,
-  parseManifest,
 } from "./adapters";
-import { useDeleteRecord, useResourceForm, useResourceTable } from "./useAdmin";
-import type { RastackEngine } from "../provider/types";
+import {
+  useDeleteRecord,
+  useFilterModel,
+  useResourceForm,
+  useResourceTable,
+} from "./useAdmin";
+import { Sidebar } from "./ui/Sidebar";
+import { FilterBar } from "./ui/FilterBar";
+import { AdminStyles } from "./ui/styles";
+import {
+  IconArrowLeft,
+  IconChevronRight,
+  IconInbox,
+  IconLink,
+  IconPlus,
+  IconTable,
+  IconTrash,
+} from "./ui/icons";
 
 // -- hash routing (dependency-free) -----------------------------------------
 
@@ -60,78 +78,121 @@ const go = (hash: string) => {
   location.hash = hash;
 };
 
-// -- shell ------------------------------------------------------------------
+// -- chrome -----------------------------------------------------------------
 
-function Shell(props: {
-  crumbs: { label: string; hash?: string }[];
-  children: React.ReactNode;
-}): React.JSX.Element {
+interface Crumb {
+  label: string;
+  hash?: string;
+}
+
+function Topbar({ crumbs }: { crumbs: Crumb[] }): React.JSX.Element {
   return (
-    <div style={{ maxWidth: 1024, margin: "0 auto", padding: "24px 20px" }}>
-      <nav style={{ marginBottom: 20, fontSize: 14 }}>
-        {props.crumbs.map((c, i) => (
-          <span key={i}>
-            {i > 0 ? <span style={{ opacity: 0.5 }}> / </span> : null}
+    <header className="ras-topbar">
+      <nav className="ras-crumbs">
+        {crumbs.map((c, i) => (
+          <React.Fragment key={i}>
+            {i > 0 ? <IconChevronRight size={13} className="ras-crumb-sep" /> : null}
             {c.hash ? (
-              <a href={c.hash} style={{ textDecoration: "none" }}>
-                {c.label}
-              </a>
+              <a href={c.hash}>{c.label}</a>
             ) : (
-              <span>{c.label}</span>
+              <span className="ras-crumb-current">{c.label}</span>
             )}
-          </span>
+          </React.Fragment>
         ))}
       </nav>
-      {props.children}
+    </header>
+  );
+}
+
+function PageHead(props: {
+  eyebrow?: string;
+  title: string;
+  subtitle?: React.ReactNode;
+  actions?: React.ReactNode;
+}): React.JSX.Element {
+  return (
+    <div className="ras-pagehead">
+      <div>
+        {props.eyebrow ? <div className="ras-eyebrow">{props.eyebrow}</div> : null}
+        <h1 className="ras-title">{props.title}</h1>
+        {props.subtitle ? <div className="ras-subtitle">{props.subtitle}</div> : null}
+      </div>
+      {props.actions ? <div>{props.actions}</div> : null}
     </div>
   );
 }
 
-// -- screens ----------------------------------------------------------------
+// -- index / overview -------------------------------------------------------
 
 function IndexScreen(props: { resources: AdminResource[] }): React.JSX.Element {
   const byApp = useMemo(() => {
     const map = new Map<string, AdminResource[]>();
     for (const r of adminResources(props.resources)) {
-      (map.get(r.app) ?? map.set(r.app, []).get(r.app)!).push(r);
+      const list = map.get(r.app) ?? [];
+      list.push(r);
+      map.set(r.app, list);
     }
     return [...map.entries()].sort(([a], [b]) => a.localeCompare(b));
   }, [props.resources]);
 
   return (
-    <Shell crumbs={[{ label: "Admin" }]}>
-      <h1 style={{ fontSize: 22, margin: "0 0 16px" }}>Administration</h1>
-      {byApp.map(([app, models]) => (
-        <Card key={app} style={{ marginBottom: 16, padding: 16 }}>
-          <h2 style={{ fontSize: 15, textTransform: "capitalize", margin: "0 0 8px" }}>
-            {app}
-          </h2>
-          <ul style={{ margin: 0, paddingLeft: 18 }}>
-            {models
-              .slice()
-              .sort((a, b) => a.model.localeCompare(b.model))
-              .map((r) => (
-                <li key={r.key} style={{ margin: "4px 0" }}>
-                  <a href={`#/${r.app}/${r.model}/`}>{r.label}</a>
-                </li>
-              ))}
-          </ul>
-        </Card>
-      ))}
-    </Shell>
+    <>
+      <Topbar crumbs={[{ label: "Overview" }]} />
+      <div className="ras-content">
+        <PageHead
+          eyebrow="React API Stack"
+          title="Administration"
+          subtitle="Browse and edit every model in the manifest — stored as Apache Iceberg tables on object storage."
+        />
+        {byApp.map(([app, models]) => (
+          <div key={app} style={{ marginBottom: 28 }}>
+            <div className="ras-nav-label" style={{ padding: "0 2px 10px" }}>
+              {app}
+            </div>
+            <div className="ras-cardgrid">
+              {models
+                .slice()
+                .sort((a, b) => a.model.localeCompare(b.model))
+                .map((r) => (
+                  <Card
+                    key={r.key}
+                    className="ras-modelcard"
+                    onClick={() => go(`#/${r.app}/${r.model}/`)}
+                  >
+                    <div className="ras-mc-top">
+                      <span className="ras-mc-icon">
+                        <IconTable size={19} />
+                      </span>
+                    </div>
+                    <div className="ras-mc-name">{r.label}</div>
+                    <div className="ras-mc-go">
+                      View records <IconChevronRight size={14} />
+                    </div>
+                  </Card>
+                ))}
+            </div>
+          </div>
+        ))}
+      </div>
+    </>
   );
 }
 
-/** DataTable columns with id + FK cells rendered as links (like the Rust admin). */
+// -- changelist -------------------------------------------------------------
+
+/** Changelist columns: mono id link, FK chips, boolean dots — everything else default. */
 function columnsFor(resource: AdminResource): DataTableColumnInput[] {
   return changelistHeaders(resource).map((h) => {
     if (h.key === "id") {
       return {
         key: "id",
-        header: "id",
-        render: (row: Record<string, unknown>, value: unknown) => (
-          <a href={`#/${resource.app}/${resource.model}/${String(value)}`}>
-            {String(value)}
+        header: "ID",
+        render: (row: Record<string, unknown>) => (
+          <a
+            className="ras-cell-link ras-id"
+            href={`#/${resource.app}/${resource.model}/${String(row.id)}`}
+          >
+            {String(row.id)}
           </a>
         ),
       };
@@ -144,14 +205,36 @@ function columnsFor(resource: AdminResource): DataTableColumnInput[] {
         header: h.name,
         render: (_row: Record<string, unknown>, value: unknown) =>
           value == null || value === "" ? (
-            ""
+            <span className="ras-muted">—</span>
           ) : (
-            <a href={`#/${app}/${model}/${String(value)}`}>
+            <a
+              className="ras-fk"
+              href={`#/${app}/${model}/${String(value)}`}
+              onClick={(e) => e.stopPropagation()}
+            >
+              <IconLink size={12} />
               {model} #{String(value)}
             </a>
           ),
       };
     }
+    if (field?.type === "bool") {
+      return {
+        key: h.key,
+        header: h.name,
+        render: (_row: Record<string, unknown>, value: unknown) => (
+          <span className="ras-bool">
+            <span
+              className="ras-dot"
+              style={{
+                background: value ? "var(--color-success)" : "var(--color-text-muted)",
+              }}
+            />
+            {value ? "True" : "False"}
+          </span>
+        ),
+      };
+    }
     return { key: h.key, header: h.name };
   });
 }
@@ -161,39 +244,80 @@ function ListScreen(props: {
   resource: AdminResource;
 }): React.JSX.Element {
   const { engine, resource } = props;
-  const { query } = useResourceTable(engine, resource);
+  const table = useResourceTable(engine, resource);
+  const { fields: facets } = useFilterModel(engine, resource);
   const columns = useMemo(() => columnsFor(resource), [resource.key]);
-  return (
-    <Shell
-      crumbs={[
-        { label: "Admin", hash: "#/" },
-        { label: resource.label },
-      ]}
-    >
-      <div
-        style={{
-          display: "flex",
-          justifyContent: "space-between",
-          alignItems: "center",
-          marginBottom: 12,
-        }}
-      >
-        <h1 style={{ fontSize: 20, margin: 0 }}>{resource.label}</h1>
-        <Button onClick={() => go(`#/${resource.app}/${resource.model}/add`)}>
-          Add {resource.label}
-        </Button>
+  const addHash = `#/${resource.app}/${resource.model}/add`;
+
+  const empty = (
+    <div className="ras-empty">
+      <span className="ras-empty-ico">
+        <IconInbox size={24} />
+      </span>
+      <div>
+        <h3>Nothing here yet</h3>
+        <div style={{ marginTop: 4 }}>
+          {Object.keys(table.filters).length || table.search
+            ? "No records match the current filters."
+            : `Add the first ${resource.label.toLowerCase()} to get started.`}
+        </div>
       </div>
-      <DataTable
-        query={query}
-        columns={columns}
-        onRowClick={(row) =>
-          go(`#/${resource.app}/${resource.model}/${String(row.id)}`)
-        }
+      <Button size="sm" onClick={() => go(addHash)}>
+        <IconPlus size={15} /> Add {resource.label.toLowerCase()}
+      </Button>
+    </div>
+  );
+
+  return (
+    <>
+      <Topbar
+        crumbs={[{ label: "Overview", hash: "#/" }, { label: resource.label }]}
       />
-    </Shell>
+      <div className="ras-content">
+        <PageHead
+          eyebrow={resource.app}
+          title={resource.label}
+          subtitle={
+            table.query.isLoading
+              ? "Loading…"
+              : `${table.itemCount} ${table.itemCount === 1 ? "record" : "records"}`
+          }
+          actions={
+            <Button onClick={() => go(addHash)}>
+              <IconPlus size={16} /> Add {resource.label.toLowerCase()}
+            </Button>
+          }
+        />
+
+        <FilterBar
+          facets={facets}
+          filters={table.filters}
+          setFilter={table.setFilter}
+          removeFilter={table.removeFilter}
+          clearFilters={table.clearFilters}
+          search={table.search}
+          setSearch={table.setSearch}
+          searchable={resource.search.length > 0}
+        />
+
+        <Card flush className="ras-tablecard">
+          <DataTable
+            query={table.query}
+            columns={columns}
+            searchable={false}
+            emptyMessage={empty}
+            onRowClick={(row) =>
+              go(`#/${resource.app}/${resource.model}/${String(row.id)}`)
+            }
+          />
+        </Card>
+      </div>
+    </>
   );
 }
 
+// -- add / change -----------------------------------------------------------
+
 function FormScreen(props: {
   engine: RastackEngine;
   resource: AdminResource;
@@ -208,101 +332,130 @@ function FormScreen(props: {
   const del = useDeleteRecord(engine, resource);
   const listHash = `#/${resource.app}/${resource.model}/`;
 
-  // On successful save, return to the changelist.
   useEffect(() => {
     if (done) go(listHash);
   }, [done]);
 
   const onDelete = async () => {
     if (!id) return;
-    if (typeof confirm === "function" && !confirm("Delete this record?")) return;
+    if (typeof confirm === "function" && !confirm(`Delete this ${resource.label.toLowerCase()}?`))
+      return;
     if (await del(id)) go(listHash);
   };
 
   return (
-    <Shell
-      crumbs={[
-        { label: "Admin", hash: "#/" },
-        { label: resource.label, hash: listHash },
-        { label: id ? `Edit #${id}` : "Add" },
-      ]}
-    >
-      <h1 style={{ fontSize: 20, margin: "0 0 16px" }}>
-        {id ? `Edit ${resource.label} #${id}` : `Add ${resource.label}`}
-      </h1>
-      {loadError ? (
-        <p style={{ color: "#c93c37" }}>{loadError}</p>
-      ) : loading ? (
-        <Spinner />
-      ) : (
-        <Card style={{ padding: 20, maxWidth: 560 }}>
-          <AutoForm form={model} onCancel={() => go(listHash)} />
-          {submitError ? (
-            <p style={{ color: "#c93c37", marginTop: 12 }}>{submitError}</p>
-          ) : null}
-          {id ? (
-            <div style={{ marginTop: 16 }}>
-              <Button variant="danger" onClick={onDelete}>
-                Delete
-              </Button>
-            </div>
-          ) : null}
-        </Card>
-      )}
-    </Shell>
+    <>
+      <Topbar
+        crumbs={[
+          { label: "Overview", hash: "#/" },
+          { label: resource.label, hash: listHash },
+          { label: id ? `Edit #${id}` : "Add" },
+        ]}
+      />
+      <div className="ras-content">
+        <PageHead
+          eyebrow={resource.label}
+          title={id ? `Edit ${resource.label.toLowerCase()}` : `Add ${resource.label.toLowerCase()}`}
+          subtitle={id ? `Record #${id}` : "Create a new record."}
+        />
+
+        {loadError ? (
+          <Card style={{ padding: 20, borderColor: "var(--color-danger)" }}>
+            <span style={{ color: "var(--color-danger)" }}>{loadError}</span>
+          </Card>
+        ) : loading ? (
+          <div className="ras-boot" style={{ minHeight: 160 }}>
+            <Spinner /> Loading…
+          </div>
+        ) : (
+          <>
+            <Card className="ras-formgrid" style={{ padding: 22 }}>
+              <AutoForm
+                form={model}
+                onCancel={() => go(listHash)}
+                submitLabel={id ? "Save changes" : `Create ${resource.label.toLowerCase()}`}
+              />
+              {submitError ? (
+                <div style={{ color: "var(--color-danger)", marginTop: 14, fontSize: 13 }}>
+                  {submitError}
+                </div>
+              ) : null}
+            </Card>
+
+            {id ? (
+              <div className="ras-formgrid ras-danger-zone">
+                <div>
+                  <div className="ras-dz-title">Delete this {resource.label.toLowerCase()}</div>
+                  <div className="ras-dz-sub">This permanently removes the record from the table.</div>
+                </div>
+                <Button variant="danger" onClick={onDelete}>
+                  <IconTrash size={15} /> Delete
+                </Button>
+              </div>
+            ) : null}
+          </>
+        )}
+      </div>
+    </>
   );
 }
 
 // -- root -------------------------------------------------------------------
 
 export function AdminApp(props: {
-  manifest: object | string;
+  engine: RastackEngine;
+  resources: AdminResource[];
 }): React.JSX.Element {
-  const client = useRastackClient();
   const route = useRoute();
-  const resources = useMemo(() => parseManifest(props.manifest), [props.manifest]);
+  const { engine, resources } = props;
 
-  if (client.status === "error") {
-    return (
-      <Shell crumbs={[{ label: "Admin" }]}>
-        <p style={{ color: "#c93c37" }}>
-          The WASM engine failed to start. Check the console.
-        </p>
-      </Shell>
-    );
-  }
-  if (!client.engine || client.status !== "ready") {
-    return (
-      <Shell crumbs={[{ label: "Admin" }]}>
-        <div style={{ display: "flex", gap: 10, alignItems: "center" }}>
-          <Spinner />
-          <span>
-            {client.status === "seeding"
-              ? "Seeding the local warehouse…"
-              : "Starting the WASM engine…"}
-          </span>
-        </div>
-      </Shell>
-    );
-  }
-
-  if (route.name === "index") return <IndexScreen resources={resources} />;
+  const activeKey =
+    route.name === "index" ? undefined : `${route.app}.${route.model}`;
 
-  const resource = findResource(resources, route.app, route.model);
-  if (!resource) {
-    return (
-      <Shell crumbs={[{ label: "Admin", hash: "#/" }, { label: "Not found" }]}>
-        <p>
-          Unknown resource <code>{route.app}.{route.model}</code>.
-        </p>
-      </Shell>
-    );
+  let screen: React.ReactNode;
+  if (route.name === "index") {
+    screen = <IndexScreen resources={resources} />;
+  } else {
+    const resource = findResource(resources, route.app, route.model);
+    if (!resource) {
+      screen = (
+        <>
+          <Topbar crumbs={[{ label: "Overview", hash: "#/" }, { label: "Not found" }]} />
+          <div className="ras-content">
+            <div className="ras-empty">
+              <span className="ras-empty-ico">
+                <IconArrowLeft size={22} />
+              </span>
+              <h3>Unknown resource</h3>
+              <div>
+                <code>
+                  {route.app}.{route.model}
+                </code>{" "}
+                is not in the manifest.
+              </div>
+              <Button size="sm" variant="outline" onClick={() => go("#/")}>
+                Back to overview
+              </Button>
+            </div>
+          </div>
+        </>
+      );
+    } else if (route.name === "list") {
+      screen = <ListScreen engine={engine} resource={resource} />;
+    } else if (route.name === "add") {
+      screen = <FormScreen engine={engine} resource={resource} />;
+    } else {
+      screen = <FormScreen engine={engine} resource={resource} id={route.id} />;
+    }
   }
-  if (route.name === "list")
-    return <ListScreen engine={client.engine} resource={resource} />;
-  if (route.name === "add")
-    return <FormScreen engine={client.engine} resource={resource} />;
+
   return (
-    <FormScreen engine={client.engine} resource={resource} id={route.id} />
+    <>
+      <AdminStyles />
+      <div className="ras-root">
+        <Sidebar resources={resources} activeKey={activeKey} />
+        <main className="ras-main">{screen}</main>
+      </div>
+    </>
   );
 }