@protobase/ui 0.16.0 → 0.17.0

package/dist/app/searches/update-search-dialog.js

@@ -0,0 +1,196 @@
+import { Skeleton } from "../../primitives/skeleton.js";
+import { Button } from "../../primitives/button.js";
+import { useClient } from "../../data/api-provider.js";
+import { humanize } from "../../live/naming.js";
+import { defaultOrderBy } from "../list-order.js";
+import { ResponsiveDialog } from "../../primitives/responsive-dialog.js";
+import { countQuery } from "../pages/use-layout-data.js";
+import { EmbeddedList } from "../embedded-list/embedded-list.js";
+import { addedFilter, filterChanges, netChange, removedFilter } from "./search-diff.js";
+import { useFilterChips } from "./use-filter-chips.js";
+import { useMemo } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useQuery } from "@tanstack/react-query";
+import { tableDisplay } from "@protobase/schema/internal";
+//#region src/app/searches/update-search-dialog.tsx
+/** How many records each side of the diff shows; its count says how many there are in all. */
+const shownLimit = 12;
+const changeStyle = {
+	added: {
+		word: "Added",
+		className: "text-success-text"
+	},
+	removed: {
+		word: "Removed",
+		className: "text-danger-text"
+	},
+	changed: {
+		word: "Changed",
+		className: "text-primary-text"
+	}
+};
+const FilterChanges = ({ changes }) => /* @__PURE__ */ jsx("ul", {
+	"aria-label": "Filter changes",
+	className: "divide-y rounded-md border text-[13px]",
+	children: changes.map((change) => /* @__PURE__ */ jsxs("li", {
+		className: "grid grid-cols-[72px_1fr] gap-3 px-3 py-2",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: `font-medium ${changeStyle[change.kind].className}`,
+			children: changeStyle[change.kind].word
+		}), change.kind === "changed" ? /* @__PURE__ */ jsxs("span", { children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "text-muted-foreground line-through",
+				children: change.before
+			}),
+			" ",
+			/* @__PURE__ */ jsx("span", {
+				className: "font-medium",
+				children: change.label
+			})
+		] }) : /* @__PURE__ */ jsx("span", {
+			className: change.kind === "removed" ? "text-muted-foreground line-through" : "font-medium",
+			children: change.label
+		})]
+	}, `${change.kind}:${change.label}`))
+});
+/** How many records `filter` finds, none for a filter that can find none (`null`). */
+const useDiffCount = (model, filter) => {
+	const query = useQuery({
+		...countQuery(useClient(), model, filter ?? ""),
+		enabled: filter !== null
+	});
+	return filter === null ? 0 : query.data;
+};
+const count = (n, singular, plural) => `${n} ${n === 1 ? singular : plural}`;
+/** One side of the diff: its title and count, and its first records as the list shows them. */
+const RecordsSide = ({ model, view, title, filter, total, plural }) => {
+	const cards = view?.list?.displays?.find((display) => display.kind === "cards");
+	return /* @__PURE__ */ jsxs("section", {
+		"aria-label": title,
+		className: "flex flex-col gap-2",
+		children: [
+			/* @__PURE__ */ jsxs("h3", {
+				className: "text-[13px] font-semibold",
+				children: [
+					title,
+					" ",
+					/* @__PURE__ */ jsxs("span", {
+						className: "font-normal text-muted-foreground",
+						children: [
+							"(",
+							total ?? "…",
+							")"
+						]
+					})
+				]
+			}),
+			total !== void 0 && total > shownLimit && /* @__PURE__ */ jsxs("p", {
+				className: "text-xs text-muted-foreground",
+				children: [
+					"The first ",
+					shownLimit,
+					" of ",
+					total,
+					"."
+				]
+			}),
+			filter === null || total === 0 ? /* @__PURE__ */ jsxs("p", {
+				className: "text-[13px] text-muted-foreground",
+				children: [
+					"No ",
+					plural,
+					"."
+				]
+			}) : /* @__PURE__ */ jsx(EmbeddedList, {
+				model,
+				view,
+				filter,
+				sort: defaultOrderBy(model, view),
+				limit: shownLimit,
+				display: cards?.name ?? tableDisplay,
+				row: true,
+				link: false,
+				empty: `No ${plural}.`
+			})
+		]
+	});
+};
+/**
+* Asks before a saved search takes the list's filter: what changes in its filters, how many more or fewer records it
+* finds, and the records it would add and drop, each found by the list API (`addedFilter`, `removedFilter`).
+*/
+const UpdateSearchDialog = ({ model, view, title, before, after, saveNewLabel, updating, creating, onUpdate, onSaveNew, onCancel }) => {
+	const changes = filterChanges(useFilterChips(model, before), useFilterChips(model, after));
+	const added = useMemo(() => addedFilter(before, after), [before, after]);
+	const removed = useMemo(() => removedFilter(before, after), [before, after]);
+	const addedCount = useDiffCount(model, added);
+	const removedCount = useDiffCount(model, removed);
+	const singular = (view?.names?.singular ?? humanize(model.name)).toLowerCase();
+	const plural = (view?.names?.plural ?? humanize(model.name)).toLowerCase();
+	const counted = addedCount !== void 0 && removedCount !== void 0;
+	return /* @__PURE__ */ jsx(ResponsiveDialog, {
+		open: true,
+		wide: true,
+		title,
+		onClose: onCancel,
+		actions: /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			/* @__PURE__ */ jsx(Button, {
+				onClick: onCancel,
+				children: "Cancel"
+			}),
+			/* @__PURE__ */ jsx(Button, {
+				loading: creating,
+				disabled: updating,
+				onClick: onSaveNew,
+				children: saveNewLabel
+			}),
+			/* @__PURE__ */ jsx(Button, {
+				variant: "primary",
+				loading: updating,
+				disabled: creating,
+				onClick: onUpdate,
+				children: "Update"
+			})
+		] }),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-4",
+			children: [
+				changes.length > 0 && /* @__PURE__ */ jsx(FilterChanges, { changes }),
+				counted ? /* @__PURE__ */ jsxs("p", {
+					className: "text-[13px]",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "font-semibold",
+						children: netChange(addedCount, removedCount, singular, plural)
+					}), /* @__PURE__ */ jsxs("span", {
+						className: "text-muted-foreground",
+						children: [
+							": ",
+							count(addedCount, singular, plural),
+							" added, ",
+							removedCount,
+							" removed"
+						]
+					})]
+				}) : /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-48" }),
+				/* @__PURE__ */ jsx(RecordsSide, {
+					model,
+					view,
+					title: "Added",
+					filter: added,
+					total: addedCount,
+					plural
+				}),
+				/* @__PURE__ */ jsx(RecordsSide, {
+					model,
+					view,
+					title: "Removed",
+					filter: removed,
+					total: removedCount,
+					plural
+				})
+			]
+		})
+	});
+};
+//#endregion
+export { UpdateSearchDialog };

package/dist/app/searches/use-opened-search.js

@@ -0,0 +1,15 @@
+import { useAppAddress } from "../use-app-address.js";
+//#region src/app/searches/use-opened-search.ts
+/**
+* The saved search the list was opened from, by its key, as the address names it ("View all results" does), and `open`
+* to name another, such as a search just saved.
+*/
+const useOpenedSearch = () => {
+	const { address, set } = useAppAddress();
+	return {
+		key: address?.kind === "list" ? address.savedSearch : void 0,
+		open: (key) => set({ savedSearch: key })
+	};
+};
+//#endregion
+export { useOpenedSearch };

package/dist/app/searches/use-save-search.js

@@ -1,10 +1,12 @@
 import { useClient } from "../../data/api-provider.js";
 import { recordKey } from "../../live/model-helpers.js";
+import { humanize } from "../../live/naming.js";
 import { useToast } from "../../toasts/toast-provider.js";
 import { useAdminMeta } from "../meta-gate.js";
 import { useAppAddress } from "../use-app-address.js";
 import { can } from "../permissions.js";
 import { useRefreshResource } from "../pages/use-layout-data.js";
+import { useOpenedSearch } from "./use-opened-search.js";
 import { useSavedSearches } from "./use-saved-searches.js";
 import { useMutation } from "@tanstack/react-query";
 import { encodeKey } from "@protobase/schema/internal";
@@ -12,15 +14,18 @@ import { encodeKey } from "@protobase/schema/internal";
 const message = (error) => error instanceof Error ? error.message : "Something went wrong";
 /**
 * A list page's "Save search" button for its `filter`: `save` for someone who can list, create and delete the saved
-* searches, `sign-in` for a visitor their resource asks to sign in (`prompt`), nothing otherwise. A press saves the
-* filter as a search named `name`, or takes the saved one off again.
+* searches, `sign-in` for a visitor their resource asks to sign in (`prompt`), nothing otherwise. `saved` while a search
+* has the filter, and `remove` takes it off again; otherwise `saveNew` saves the filter as a search, with the name the
+* user gave (`naming` says how to ask for it) or none. While the list was opened from a saved search (`opened`) whose
+* filter differs, `update` gives that search the list's filter.
 */
-const useSaveSearch = (search, filter, name) => {
+const useSaveSearch = (search, filter) => {
 	const meta = useAdminMeta();
 	const client = useClient();
 	const toast = useToast();
 	const refresh = useRefreshResource();
 	const { href, open } = useAppAddress();
+	const opened = useOpenedSearch();
 	const { resource } = search;
 	const model = meta.resources[resource];
 	const of = meta.views[resource]?.searchesOf;
@@ -28,18 +33,20 @@ const useSaveSearch = (search, filter, name) => {
 	const usable = model !== void 0 && of !== void 0 && permissions !== void 0 && can(permissions, "create") && can(permissions, "delete");
 	const prompt = meta.signIn?.[resource]?.signIn;
 	const saved = useSavedSearches(resource, usable);
+	const keyOf = (row) => encodeKey(recordKey(model, row));
 	const current = of && saved.data?.find((row) => row[of.filter] === filter);
-	const plural = meta.views[resource]?.names?.plural ?? "saved searches";
-	const toggle = useMutation({
-		mutationFn: async (existing) => {
-			if (existing) await client.remove(resource, encodeKey(recordKey(model, existing)));
-			else await client.create(resource, {
-				[of.filter]: filter,
-				...of.name && { [of.name]: name }
-			});
-		},
-		onSuccess: (_, existing) => {
-			if (!existing) toast.show({
+	const edited = current || opened.key === void 0 || !permissions || !can(permissions, "update") ? void 0 : saved.data?.find((row) => keyOf(row) === opened.key);
+	const names = meta.views[resource]?.names;
+	const plural = names?.plural ?? "saved searches";
+	const nameField = of?.name === void 0 ? void 0 : model?.fields[of.name];
+	const create = useMutation({
+		mutationFn: (name) => client.create(resource, {
+			[of.filter]: filter,
+			...of.name && { [of.name]: name }
+		}),
+		onSuccess: (created) => {
+			opened.open(keyOf(created.record));
+			toast.show({
 				state: "success",
 				title: "Search saved",
 				action: {
@@ -52,19 +59,58 @@ const useSaveSearch = (search, filter, name) => {
 				}
 			});
 		},
-		onError: (error, existing) => toast.show({
+		onError: (error) => toast.show({
+			state: "error",
+			title: "Could not save the search",
+			description: message(error)
+		}),
+		onSettled: () => refresh(resource)
+	});
+	const remove = useMutation({
+		mutationFn: (row) => client.remove(resource, keyOf(row)),
+		onError: (error) => toast.show({
 			state: "error",
-			title: existing ? "Could not take the search off" : "Could not save the search",
+			title: "Could not take the search off",
 			description: message(error)
 		}),
 		onSettled: () => refresh(resource)
 	});
+	const update = useMutation({
+		mutationFn: (row) => client.update(resource, keyOf(row), { [of.filter]: filter }, row.etag ?? "*"),
+		onSuccess: () => toast.show({
+			state: "success",
+			title: "Search updated"
+		}),
+		onError: (error) => toast.show({
+			state: "error",
+			title: "Could not update the search",
+			description: message(error)
+		}),
+		onSettled: () => refresh(resource)
+	});
+	const pending = create.isPending || remove.isPending || update.isPending;
 	return {
 		mode: usable ? "save" : prompt ? "sign-in" : void 0,
 		prompt,
 		saved: current !== void 0,
-		ready: saved.data !== void 0 && !toggle.isPending,
-		toggle: () => toggle.mutate(current)
+		/** The search the list was opened from and differs from: its filter, and its name when it has one. */
+		opened: edited && {
+			filter: String(edited[of.filter] ?? ""),
+			name: of.name && typeof edited[of.name] === "string" && edited[of.name] !== "" ? String(edited[of.name]) : void 0
+		},
+		/** What one search is called, as the saved searches' view names it. */
+		noun: (names?.singular ?? humanize(resource)).toLowerCase(),
+		/** How to ask for a new search's name, from its field and view; none when searches have no name. */
+		naming: nameField && {
+			label: meta.views[resource]?.fields[nameField.name]?.label ?? humanize(nameField.name),
+			required: !nameField.nullable
+		},
+		ready: saved.data !== void 0 && !pending,
+		updating: update.isPending,
+		creating: create.isPending,
+		remove: () => current && remove.mutate(current),
+		saveNew: (name, options) => create.mutate(name, options),
+		update: (options) => edited && update.mutate(edited, options)
 	};
 };
 //#endregion

package/dist/app/searches/use-search-row.js

@@ -0,0 +1,56 @@
+import { useClient } from "../../data/api-provider.js";
+import { humanize } from "../../live/naming.js";
+import { countQuery, useRefreshResource } from "../pages/use-layout-data.js";
+import { isUnseen, unseenFilter } from "./saved-search.js";
+import { chipsText } from "./filter-chip-list.js";
+import { useFilterChips } from "./use-filter-chips.js";
+import { useMutation, useQuery } from "@tanstack/react-query";
+//#region src/app/searches/use-search-row.ts
+/**
+* One saved search as a row of what it finds: its name, if it has one, its filters as chips, its title (the name, or
+* the chips as words), and the `RecordRowBody` of its records: with `unseen` newest first, those new to the user marked
+* "New", saying so when none are, and "View all results", which opens the list from the search and counts as having
+* seen them.
+*/
+const useSearchRow = ({ model, of, target, targetView, row, recordKey }) => {
+	const client = useClient();
+	const refresh = useRefreshResource();
+	const filter = String(row[of.filter] ?? "");
+	const chips = useFilterChips(target, filter);
+	const stored = of.name === void 0 ? void 0 : row[of.name];
+	const name = typeof stored === "string" && stored !== "" ? stored : void 0;
+	const unseen = of.unseen;
+	const markSeen = useMutation({
+		mutationFn: (seenAt) => client.update(model.name, recordKey, { [unseen.seenAt]: seenAt }, row.etag ?? "*"),
+		onSettled: () => refresh(model.name)
+	});
+	const newCount = useQuery({
+		...countQuery(client, target, unseen ? unseenFilter(filter, unseen.field, row[unseen.seenAt]) : ""),
+		enabled: unseen !== void 0
+	});
+	const plural = (targetView?.names?.plural ?? humanize(target.name)).toLowerCase();
+	const body = {
+		model: target,
+		view: targetView,
+		filter,
+		sort: unseen ? `${unseen.field} desc` : void 0,
+		limit: of.limit,
+		chips: name !== void 0,
+		empty: `No ${plural} match.`,
+		note: unseen && newCount.data === 0 && `No new ${plural} since you last looked.`,
+		isNew: unseen && ((record) => isUnseen(record.record[unseen.field], row[unseen.seenAt])),
+		viewAll: {
+			label: "View all results",
+			savedSearch: recordKey,
+			...unseen && { onOpen: () => markSeen.mutate((/* @__PURE__ */ new Date()).toISOString()) }
+		}
+	};
+	return {
+		name,
+		chips,
+		title: name ?? chipsText(chips),
+		body
+	};
+};
+//#endregion
+export { useSearchRow };

package/dist/package.js

@@ -1,5 +1,5 @@
 //#region package.json
-var version = "0.16.0";
+var version = "0.17.0";
 var protobase = { "pluginApi": 1 };
 //#endregion
 export { protobase, version };

package/dist/primitives/dialog.js

@@ -1,9 +1,10 @@
+import { cn } from "../lib/cn.js";
 import { useFocusTrap } from "../lib/use-focus-trap.js";
 import { useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/primitives/dialog.tsx
 /** A modal with a title, optional body and action buttons. Closes on Escape and on a click outside. */
-const Dialog = ({ title, description, onClose, actions, children }) => {
+const Dialog = ({ title, description, onClose, actions, children, wide = false }) => {
 	const panel = useRef(null);
 	useFocusTrap(panel, true, onClose);
 	return /* @__PURE__ */ jsx("div", {
@@ -15,7 +16,7 @@ const Dialog = ({ title, description, onClose, actions, children }) => {
 			role: "dialog",
 			"aria-modal": "true",
 			"aria-label": title,
-			className: "outline-none max-h-[90vh] w-full max-w-md overflow-y-auto rounded-lg border bg-background p-4 shadow-pop sm:p-5",
+			className: cn("outline-none max-h-[90vh] w-full overflow-y-auto rounded-lg border bg-background p-4 shadow-pop sm:p-5", wide ? "max-w-3xl" : "max-w-md"),
 			children: [
 				/* @__PURE__ */ jsx("h2", {
 					className: "text-[15px] font-semibold",

package/dist/primitives/responsive-dialog.d.ts

@@ -8,10 +8,12 @@ export type ResponsiveDialogProps = {
   /** Buttons: right-aligned in the modal, stacked full width at the bottom of the sheet. */
   actions: ReactNode;
   children?: ReactNode;
+  /** Room for a row of cards or a table in the modal's body. */
+  wide?: boolean;
 };
 /**
  * A modal centred on the screen from the `md` breakpoint up, and a sheet rising from the bottom on a phone, switching as
  * the viewport does. Both close on Escape and on a press outside, and keep focus inside while open.
  */
-export declare const ResponsiveDialog: ({ title, description, open, onClose, actions, children }: ResponsiveDialogProps) => import("react").JSX.Element | null;
+export declare const ResponsiveDialog: ({ title, description, open, onClose, actions, children, wide }: ResponsiveDialogProps) => import("react").JSX.Element | null;
 //#endregion

package/dist/primitives/responsive-dialog.js

@@ -7,7 +7,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * A modal centred on the screen from the `md` breakpoint up, and a sheet rising from the bottom on a phone, switching as
 * the viewport does. Both close on Escape and on a press outside, and keep focus inside while open.
 */
-const ResponsiveDialog = ({ title, description, open, onClose, actions, children }) => {
+const ResponsiveDialog = ({ title, description, open, onClose, actions, children, wide }) => {
 	const desktop = useIsDesktop();
 	if (!open) return null;
 	if (desktop) return /* @__PURE__ */ jsx(Dialog, {
@@ -15,6 +15,7 @@ const ResponsiveDialog = ({ title, description, open, onClose, actions, children
 		description,
 		onClose,
 		actions,
+		wide,
 		children
 	});
 	return /* @__PURE__ */ jsx(Sheet, {