@protobase/ui 0.2.0 → 0.3.1

package/dist/app/app.js

@@ -28,7 +28,7 @@ const Routes = ({ workspace, sidebarMode, assistant }) => {
 	const { state, signOut } = useAuth();
 	if (state.kind !== "signed-in") throw new Error("The shell is only rendered for a signed-in user");
 	const { user } = state;
-	const { path, basePath, navigate } = useRouter();
+	const { path, params, basePath, navigate } = useRouter();
 	const route = matchRoute(path);
 	const search = useGlobalSearch();
 	const recent = useNavRecent(meta, basePath, route);
@@ -60,6 +60,7 @@ const Routes = ({ workspace, sidebarMode, assistant }) => {
 	const assistantPanel = assistantUrl && assistantOpen && /* @__PURE__ */ jsx(AssistantPanel, {
 		url: assistantUrl,
 		client: assistant,
+		page: params.size > 0 ? `${path}?${params}` : path,
 		onClose: () => setAssistantOpen(false)
 	});
 	const breadcrumb = breadcrumbFor({

package/dist/app/assistant-shell.js

@@ -12,28 +12,31 @@ const AssistantButton = ({ open, onToggle }) => /* @__PURE__ */ jsxs(Button, {
 	onClick: onToggle,
 	children: [/* @__PURE__ */ jsx(Sparkles, { className: "size-3.5" }), "Assistant"]
 });
-const ConnectedDock = ({ client, onClose }) => {
+const ConnectedDock = ({ client, page, onClose }) => {
 	const { state, offline, error, send, act } = useAssistant(client);
 	return /* @__PURE__ */ jsx(AssistantDock, {
 		state,
 		offline,
 		error,
-		onSend: send,
+		onSend: (text) => send(text, page),
 		onAction: act,
 		onClose
 	});
 };
-const OwnDock = ({ url, onClose }) => /* @__PURE__ */ jsx(ConnectedDock, {
+const OwnDock = ({ url, ...props }) => /* @__PURE__ */ jsx(ConnectedDock, {
 	client: useAssistantClient(url),
-	onClose
+	...props
 });
-/** The dock for the backend `/meta` names, signed in as the user; `client` replaces it in stories and tests. */
-const AssistantPanel = ({ url, client, onClose }) => client ? /* @__PURE__ */ jsx(ConnectedDock, {
+/**
+* The dock for the backend `/meta` names, signed in as the user, sending each message with the `page` the user is on;
+* `client` replaces it in stories and tests.
+*/
+const AssistantPanel = ({ url, client, ...props }) => client ? /* @__PURE__ */ jsx(ConnectedDock, {
 	client,
-	onClose
+	...props
 }) : /* @__PURE__ */ jsx(OwnDock, {
 	url,
-	onClose
+	...props
 });
 //#endregion
 export { AssistantButton, AssistantPanel };

package/dist/app/nav-recent.js

@@ -29,5 +29,10 @@ const recentRecords = (model, view, recent, rows, basePath, activeKey) => {
 		};
 	});
 };
+/** Whether a record read anew differs from its row in a sidebar group on the fields the group shows: the group is then out of date. */
+const recentRowDiffers = (model, fields, rows, key, record) => {
+	const row = rows.find((entry) => encodeKey(recordKey(model, entry)) === key);
+	return row !== void 0 && fields.some((field) => !Object.is(row[field], record[field]));
+};
 //#endregion
-export { recentRecords, recentRequest };
+export { recentRecords, recentRequest, recentRowDiffers };

package/dist/app/use-nav-recent.js

@@ -1,29 +1,56 @@
 import { keys } from "../data/query-keys.js";
 import { useClient } from "../data/api-provider.js";
 import { userMenuResources } from "./user-menu-from-meta.js";
-import { recentRecords, recentRequest } from "./nav-recent.js";
-import { useQueries } from "@tanstack/react-query";
+import { recentRecords, recentRequest, recentRowDiffers } from "./nav-recent.js";
+import { useEffect, useMemo } from "react";
+import { useQueries, useQueryClient } from "@tanstack/react-query";
 //#region src/app/use-nav-recent.ts
+const groupKey = ({ model, request }) => keys.navRecent(model.name, request.filter, request.orderBy, request.pageSize);
+/**
+* Refetches a group when a record of its resource is read anew (a record page, or an app following one) and shows
+* something else than the group's row of it, so the sidebar follows the record without waiting for a write or focus.
+*/
+const useFollowRecords = (groups) => {
+	const queryClient = useQueryClient();
+	useEffect(() => queryClient.getQueryCache().subscribe((event) => {
+		if (event.type !== "updated" || event.action.type !== "success") return;
+		const [scope, resource, key] = event.query.queryKey;
+		const record = event.action.data?.record;
+		if (scope !== "record" || typeof key !== "string" || !record) return;
+		for (const group of groups) {
+			if (group.model.name !== resource) continue;
+			const page = queryClient.getQueryData(groupKey(group));
+			if (page && recentRowDiffers(group.model, group.request.fields, page.items, key, record)) queryClient.invalidateQueries({
+				queryKey: groupKey(group),
+				exact: true
+			});
+		}
+	}), [queryClient, groups]);
+};
 /**
 * The records of every sidebar group (`nav.recent`), one list request each, under the `list` query key so that any
-* write to the resource refreshes them. The server applies the caller's access, as on the list page.
+* write to the resource refreshes them, as does reading one of their records anew. The server applies the caller's
+* access, as on the list page.
 */
 const useNavRecent = (meta, basePath, active) => {
 	const client = useClient();
-	const inMenu = userMenuResources(meta);
-	const groups = Object.values(meta.views).flatMap((view) => {
-		const model = meta.resources[view.resource];
-		const recent = view.nav?.recent;
-		return model && recent && !view.nav?.hidden && !inMenu.has(model.name) ? [{
-			model,
-			view,
-			recent,
-			request: recentRequest(model, view, recent)
-		}] : [];
-	});
-	const results = useQueries({ queries: groups.map(({ model, request }) => ({
-		queryKey: keys.navRecent(model.name, request.filter, request.orderBy, request.pageSize),
-		queryFn: () => client.list(model.name, request),
+	const groups = useMemo(() => {
+		const inMenu = userMenuResources(meta);
+		return Object.values(meta.views).flatMap((view) => {
+			const model = meta.resources[view.resource];
+			const recent = view.nav?.recent;
+			return model && recent && !view.nav?.hidden && !inMenu.has(model.name) ? [{
+				model,
+				view,
+				recent,
+				request: recentRequest(model, view, recent)
+			}] : [];
+		});
+	}, [meta]);
+	useFollowRecords(groups);
+	const results = useQueries({ queries: groups.map((group) => ({
+		queryKey: groupKey(group),
+		queryFn: () => client.list(group.model.name, group.request),
 		refetchOnWindowFocus: true
 	})) });
 	return Object.fromEntries(groups.map(({ model, view, recent }, index) => {

package/dist/assistant-dock/use-assistant.d.ts

@@ -5,7 +5,7 @@ export declare const useAssistant: (client: AssistantClient | undefined) => {
   state: import("@protobase/schema").AssistantState;
   offline: boolean;
   error: string | undefined;
-  send: (text: string) => void | undefined;
+  send: (text: string, page?: string) => void | undefined;
   act: (partId: string, actionId: string) => void | undefined;
 };
 //#endregion

package/dist/assistant-dock/use-assistant.js

@@ -19,7 +19,7 @@ const useAssistant = (client) => {
 		state,
 		offline,
 		error,
-		send: (text) => client && deliver(client.send(text)),
+		send: (text, page) => client && deliver(client.send(text, page)),
 		act: (partId, actionId) => client && deliver(client.act(partId, actionId))
 	};
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@protobase/ui",
-  "version": "0.2.0",
+  "version": "0.3.1",
   "description": "The Protobase admin app and the React hooks and components for custom UI.",
   "license": "Apache-2.0",
   "repository": {
@@ -38,9 +38,9 @@
     "react-dom": "^19.3.0",
     "recharts": "^3.10.1",
     "tailwindcss": "^4.3.3",
-    "@protobase/client": "0.2.0",
-    "@protobase/layout": "0.2.0",
-    "@protobase/schema": "0.2.0"
+    "@protobase/client": "0.3.1",
+    "@protobase/layout": "0.3.1",
+    "@protobase/schema": "0.3.1"
   },
   "scripts": {
     "build": "tsdown"