@protobase/ui 0.22.5 → 0.22.7

package/dist/app/app.js

@@ -29,6 +29,8 @@ import { bottomBarFromMeta } from "./bottom-bar-from-meta.js";
 import { breadcrumbFor } from "./breadcrumb-for.js";
 import { ComposedPage } from "./pages/composed-page.js";
 import { CreateRoute } from "./create/create-route.js";
+import { userMenuFromMeta } from "./user-menu-from-meta.js";
+import { navFromMeta, navItemId } from "./nav-from-meta.js";
 import { ListPage } from "./list-page.js";
 import { MembersPage } from "../organizations/members-page.js";
 import { InvitationsPage } from "../organizations/invitations-page.js";
@@ -37,8 +39,6 @@ import { OrganizationPage } from "../organizations/organization-page.js";
 import { OrganizationsPage } from "../organizations/organizations-page.js";
 import { actingUser } from "../roles/acting-user.js";
 import { useActiveRole } from "../roles/use-active-role.js";
-import { userMenuFromMeta } from "./user-menu-from-meta.js";
-import { navFromMeta } from "./nav-from-meta.js";
 import { ProjectLogo } from "./project-logo.js";
 import { PluginGate, usePluginsOff } from "../plugins/plugin-gate.js";
 import { PluginNotice } from "../plugins/plugin-notice.js";
@@ -50,8 +50,13 @@ import { StaffBanner } from "./staff-banner.js";
 import { useNavRecent } from "./use-nav-recent.js";
 import { useCallback, useEffect, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { viewOfList } from "@protobase/schema/internal";
 //#region src/app/app.tsx
-const placeOf = (address) => address?.kind === "page" ? address.page : address?.resource;
+const placeOf = (address) => {
+	if (address?.kind === "page") return address.page;
+	if (address?.kind === "list") return navItemId(address.resource, address.list);
+	return address?.resource;
+};
 const recordOf = (address) => address?.kind === "record" ? address : void 0;
 const Routes = ({ workspace, sidebarMode, assistant, runtime }) => {
 	const meta = useAdminMeta();
@@ -67,7 +72,7 @@ const Routes = ({ workspace, sidebarMode, assistant, runtime }) => {
 	const search = useGlobalSearch();
 	const theme = useTheme();
 	const recent = useNavRecent(meta, basePath, {
-		resource: place,
+		resource: shown?.resource,
 		key: shown?.key
 	});
 	const groups = navFromMeta(meta, basePath, recent);
@@ -92,7 +97,7 @@ const Routes = ({ workspace, sidebarMode, assistant, runtime }) => {
 	]);
 	const resource = address?.kind === "page" ? void 0 : address?.resource;
 	const drawnFrom = resource ? sourceStatusOf(meta, resource) : void 0;
-	const view = resource ? meta.views[resource] : void 0;
+	const view = resource ? viewOfList(meta.views[resource], address?.kind === "list" ? address.list : void 0) : void 0;
 	const group = groups.find((entry) => entry.items.some((item) => item.id === place));
 	const model = resource ? meta.resources[resource] : void 0;
 	const record = useOpenedRecord(shown?.resource ?? "", shown?.key ?? "", Boolean(model && shown));
@@ -183,7 +188,7 @@ const Routes = ({ workspace, sidebarMode, assistant, runtime }) => {
 	}, address.resource) : address.kind === "record" ? /* @__PURE__ */ jsx(RecordPage, {
 		resource: address.resource,
 		recordKey: address.key
-	}, `${address.resource}/${address.key}`) : /* @__PURE__ */ jsx(ListPage, { address }, address.resource);
+	}, `${address.resource}/${address.key}`) : /* @__PURE__ */ jsx(ListPage, { address }, navItemId(address.resource, address.list));
 	const appShell = /* @__PURE__ */ jsx(AppShell, {
 		pageScroll: true,
 		sidebarMode: sidebarMode ?? "text-small",

package/dist/app/breadcrumb-for.js

@@ -15,7 +15,8 @@ const breadcrumbFor = ({ basePath, address, group, page, resourceLabel, recordTi
 		label: resourceLabel,
 		href: appPath({
 			kind: "list",
-			resource: address.resource
+			resource: address.resource,
+			...address.kind === "list" && address.list && { list: address.list }
 		}, basePath)
 	}] : [];
 	if (address.kind === "list") return [...groupCrumb, ...resource];

package/dist/app/charts/chart-groups.js

@@ -49,4 +49,4 @@ const measureText = (value, measure) => {
 	return `${measure.hints?.prefix ?? ""}${text}${measure.hints?.suffix ?? ""}`;
 };
 //#endregion
-export { groupFilter, measureText, periodPoints, valueSlices };
+export { colorOf, groupFilter, labelOf, measureText, periodPoints, valueSlices };

package/dist/app/charts/chart-view.js

@@ -7,6 +7,7 @@ import { periodPoints, valueSlices } from "./chart-groups.js";
 import { GroupBars } from "./group-bars.js";
 import { GroupDonut } from "./group-donut.js";
 import { PeriodChart } from "./period-chart.js";
+import { splitPoints } from "./split-points.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/app/charts/chart-view.tsx
 const measureOf = (model, view, sum, average) => {
@@ -19,20 +20,31 @@ const measureOf = (model, view, sum, average) => {
 		hints: view?.fields[name]
 	};
 };
+const labelOf = (field, resources, views) => {
+	const target = field?.type === "relation" && field.relation ? resources[field.relation.resource] : void 0;
+	return target && target.primaryKey.length === 1 ? labelFieldOf(target, views[target.name]) : void 0;
+};
 /**
 * Loads a chart's groups through `:aggregate` and draws them: a date field's buckets as bars or a line, a field's
 * values as ranked bars or a donut, each value linking to its records. The server checked the chart at startup.
 */
-const ChartView = ({ model, view, groupBy, type = "bar", sum, average, filter = "", granularity = "day", range = "30d", limit = 10, empty = "Nothing to chart yet." }) => {
+const ChartView = ({ model, view, groupBy, splitBy, type = "bar", sum, average, filter = "", granularity = "day", range = "30d", limit = 10, empty = "Nothing to chart yet." }) => {
 	const { resources, views } = useAdminMeta();
 	const field = model.fields[groupBy];
 	const dated = field?.type === "date" || field?.type === "timestamp";
-	const target = field?.type === "relation" && field.relation ? resources[field.relation.resource] : void 0;
-	const label = target && target.primaryKey.length === 1 ? labelFieldOf(target, views[target.name]) : void 0;
+	const label = labelOf(field, resources, views);
+	const splitField = dated && splitBy !== void 0 ? model.fields[splitBy] : void 0;
+	const splitLabel = labelOf(splitField, resources, views);
+	const split = splitField ? {
+		splitBy: splitField.name,
+		splitLimit: 8,
+		...splitLabel && { splitLabel }
+	} : {};
 	const params = dated ? {
 		granularity,
 		range,
-		timeZone: viewerZone()
+		timeZone: viewerZone(),
+		...split
 	} : {
 		limit,
 		...label && { label }
@@ -56,11 +68,24 @@ const ChartView = ({ model, view, groupBy, type = "bar", sum, average, filter =
 		className: "text-muted-foreground",
 		children: empty
 	});
+	const chartType = type === "line" ? "line" : "bar";
+	if (dated && splitField && result.data.splits) {
+		const { series, points } = splitPoints(groups, result.data.splits, splitField, view?.fields[splitField.name], measure, filter);
+		return /* @__PURE__ */ jsx(PeriodChart, {
+			points,
+			measure,
+			bucket: granularity,
+			type: chartType,
+			series,
+			resource: model.name,
+			view
+		});
+	}
 	if (dated) return /* @__PURE__ */ jsx(PeriodChart, {
 		points: periodPoints(groups, measure),
 		measure,
 		bucket: granularity,
-		type: type === "line" ? "line" : "bar"
+		type: chartType
 	});
 	const slices = valueSlices(groups, field, view?.fields[groupBy], measure, filter);
 	return type === "donut" ? /* @__PURE__ */ jsx(GroupDonut, {

package/dist/app/charts/group-donut.js

@@ -1,6 +1,5 @@
-import { AppLink } from "../use-app-address.js";
 import { measureText } from "./chart-groups.js";
-import { filteredListAddress } from "../list-link.js";
+import { LegendItem } from "./legend-item.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Cell, Pie, PieChart, ResponsiveContainer, Tooltip } from "recharts";
 //#region src/app/charts/group-donut.tsx
@@ -51,29 +50,20 @@ const GroupDonut = ({ resource, view, slices, measure }) => {
 			})
 		}), /* @__PURE__ */ jsx("ul", {
 			className: "flex w-full min-w-0 flex-col gap-0.5",
-			children: slices.map((slice) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(AppLink, {
-				to: filteredListAddress(view, resource, slice.filter),
-				className: "group flex items-center gap-2 rounded-md px-1 py-0.5 hover:bg-muted",
-				children: [
-					/* @__PURE__ */ jsx("span", {
-						className: "size-2.5 shrink-0 rounded-full",
-						style: { background: slice.color },
-						"aria-hidden": true
-					}),
-					/* @__PURE__ */ jsx("span", {
-						className: "min-w-0 flex-1 truncate group-hover:text-primary-text",
-						children: slice.label
-					}),
-					/* @__PURE__ */ jsx("span", {
-						className: "font-medium tabular-nums",
-						children: measureText(slice.value, measure)
-					}),
-					/* @__PURE__ */ jsx("span", {
-						className: "w-9 text-right text-xs text-muted-foreground tabular-nums",
-						children: percent(slice.value ?? 0, whole)
-					})
-				]
-			}) }, slice.key))
+			children: slices.map((slice) => /* @__PURE__ */ jsxs(LegendItem, {
+				resource,
+				view,
+				filter: slice.filter,
+				color: slice.color,
+				label: slice.label,
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "font-medium tabular-nums",
+					children: measureText(slice.value, measure)
+				}), /* @__PURE__ */ jsx("span", {
+					className: "w-9 text-right text-xs text-muted-foreground tabular-nums",
+					children: percent(slice.value ?? 0, whole)
+				})]
+			}, slice.key))
 		})]
 	});
 };

package/dist/app/charts/legend-item.js

@@ -0,0 +1,33 @@
+import { AppLink } from "../use-app-address.js";
+import { filteredListAddress } from "../list-link.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/app/charts/legend-item.tsx
+const row = "flex items-center gap-2 rounded-md px-1 py-0.5";
+/**
+* One row of a chart legend: a colour dot and the value's name, with `children` after it. With a `filter` the row links to
+* that value's records; without, as for the rest of a split, it is plain text.
+*/
+const LegendItem = ({ resource, view, filter, color, label, children }) => {
+	const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx("span", {
+			className: "size-2.5 shrink-0 rounded-full",
+			style: { background: color },
+			"aria-hidden": true
+		}),
+		/* @__PURE__ */ jsx("span", {
+			className: "min-w-0 flex-1 truncate group-hover:text-primary-text",
+			children: label
+		}),
+		children
+	] });
+	return /* @__PURE__ */ jsx("li", { children: filter === void 0 ? /* @__PURE__ */ jsx("div", {
+		className: row,
+		children: content
+	}) : /* @__PURE__ */ jsx(AppLink, {
+		to: filteredListAddress(view, resource, filter),
+		className: `group ${row} hover:bg-muted`,
+		children: content
+	}) });
+};
+//#endregion
+export { LegendItem };

package/dist/app/charts/period-chart.js

@@ -1,5 +1,6 @@
 import { useMediaQuery } from "../../lib/use-media-query.js";
 import { measureText } from "./chart-groups.js";
+import { LegendItem } from "./legend-item.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Bar, BarChart, CartesianGrid, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
 //#region src/app/charts/period-chart.tsx
@@ -58,22 +59,47 @@ const axisTick = {
 	fontSize: 11,
 	fill: "var(--muted-foreground)"
 };
-const PointTooltip = ({ active, payload, measure, bucket }) => {
+const PointTooltip = ({ active, payload, measure, bucket, series }) => {
 	const point = payload?.[0]?.payload;
 	if (!active || !point) return null;
 	return /* @__PURE__ */ jsxs("div", {
 		className: "rounded-md border bg-background px-2.5 py-1.5 text-xs shadow-pop",
-		children: [/* @__PURE__ */ jsx("div", {
-			className: "text-muted-foreground",
-			children: (bucket === "week" ? "Week of " : "") + formatterOf(tooltipFormats[bucket])(point.at)
-		}), /* @__PURE__ */ jsx("div", {
-			className: "font-semibold tabular-nums",
-			children: measureText(point.value, measure)
-		})]
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "text-muted-foreground",
+				children: (bucket === "week" ? "Week of " : "") + formatterOf(tooltipFormats[bucket])(point.at)
+			}),
+			series?.map((part) => /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "size-2 shrink-0 rounded-full",
+						style: { background: part.color },
+						"aria-hidden": true
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "flex-1",
+						children: part.label
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "font-semibold tabular-nums",
+						children: measureText(point[part.key] ?? null, measure)
+					})
+				]
+			}, part.key)),
+			series && measure.kind !== "average" && /* @__PURE__ */ jsx("div", {
+				className: "mt-0.5 border-t pt-0.5 font-semibold tabular-nums",
+				children: measureText(point.value, measure)
+			}),
+			!series && /* @__PURE__ */ jsx("div", {
+				className: "font-semibold tabular-nums",
+				children: measureText(point.value, measure)
+			})
+		]
 	});
 };
 /** A date field's buckets over time, as bars or a line; a bucket without a value to add up is a gap. */
-const PeriodChart = ({ points, measure, bucket, type }) => {
+const PeriodChart = ({ points, measure, bucket, type, series, resource, view }) => {
 	const wide = useMediaQuery("(min-width: 640px)");
 	const tick = formatterOf(formats[bucket]);
 	const grid = /* @__PURE__ */ jsx(CartesianGrid, {
@@ -101,11 +127,17 @@ const PeriodChart = ({ points, measure, bucket, type }) => {
 		cursor: type === "bar" ? { fill: "var(--muted)" } : { stroke: "var(--border-strong)" },
 		content: /* @__PURE__ */ jsx(PointTooltip, {
 			measure,
-			bucket
+			bucket,
+			...series && { series }
 		}),
 		isAnimationActive: false
 	});
-	return /* @__PURE__ */ jsx("div", {
+	const parts = series ?? [{
+		key: "value",
+		label: "",
+		color: "var(--chart-1)"
+	}];
+	const chart = /* @__PURE__ */ jsx("div", {
 		className: "h-40",
 		children: /* @__PURE__ */ jsx(ResponsiveContainer, {
 			width: "100%",
@@ -123,13 +155,13 @@ const PeriodChart = ({ points, measure, bucket, type }) => {
 					x,
 					y,
 					tooltip,
-					/* @__PURE__ */ jsx(Line, {
-						dataKey: "value",
-						stroke: "var(--chart-1)",
+					parts.map((part) => /* @__PURE__ */ jsx(Line, {
+						dataKey: part.key,
+						stroke: part.color,
 						strokeWidth: 2,
 						dot: points.length <= 31 ? {
 							r: 3,
-							fill: "var(--chart-1)",
+							fill: part.color,
 							strokeWidth: 0
 						} : false,
 						activeDot: {
@@ -138,7 +170,7 @@ const PeriodChart = ({ points, measure, bucket, type }) => {
 							strokeWidth: 2
 						},
 						isAnimationActive: false
-					})
+					}, part.key))
 				]
 			}) : /* @__PURE__ */ jsxs(BarChart, {
 				data: points,
@@ -154,21 +186,36 @@ const PeriodChart = ({ points, measure, bucket, type }) => {
 					x,
 					y,
 					tooltip,
-					/* @__PURE__ */ jsx(Bar, {
-						dataKey: "value",
-						fill: "var(--chart-1)",
-						radius: [
+					parts.map((part, index) => /* @__PURE__ */ jsx(Bar, {
+						dataKey: part.key,
+						fill: part.color,
+						...series && { stackId: "split" },
+						radius: index === parts.length - 1 ? [
 							4,
 							4,
 							0,
 							0
-						],
+						] : 0,
 						isAnimationActive: false
-					})
+					}, part.key))
 				]
 			})
 		})
 	});
+	if (!series || resource === void 0) return chart;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-2",
+		children: [chart, /* @__PURE__ */ jsx("ul", {
+			className: "flex flex-wrap gap-x-3 gap-y-0.5 text-sm",
+			children: series.map((part) => /* @__PURE__ */ jsx(LegendItem, {
+				resource,
+				view,
+				color: part.color,
+				label: part.label,
+				...part.filter !== void 0 && { filter: part.filter }
+			}, part.key))
+		})]
+	});
 };
 //#endregion
 export { PeriodChart };

package/dist/app/charts/split-points.js

@@ -0,0 +1,52 @@
+import { colorOf, groupFilter, labelOf, periodPoints } from "./chart-groups.js";
+//#region src/app/charts/split-points.ts
+const noise = 1e-6;
+/**
+* A date field's buckets with each split into one part per value of another field, in the order the API ranks them.
+* A bucket where a value has no records holds 0 of a count and no value of a sum or average. For a count or a sum, what
+* the kept values leave of the bucket's total is "Other", a series of its own when some bucket has any; an average
+* has no remainder.
+*/
+const splitPoints = (groups, splits, field, hints, measure, filter = "") => {
+	const series = splits.map((split, index) => ({
+		key: `s${index}`,
+		label: labelOf(field, hints, split),
+		color: colorOf(field, hints, split.value, index),
+		filter: groupFilter(field, split.value, filter)
+	}));
+	const missing = measure.kind === "count" ? 0 : null;
+	const partOf = (group, value) => {
+		const part = group.splits?.find((candidate) => candidate.value === value);
+		if (!part) return missing;
+		return measure.kind === "count" ? part.count : part[measure.kind] ?? null;
+	};
+	const points = periodPoints(groups, measure).map((point, at) => {
+		const group = groups[at];
+		const parts = splits.map((split) => partOf(group, split.value));
+		const entries = Object.fromEntries(parts.map((part, index) => [`s${index}`, part]));
+		if (measure.kind === "average") return {
+			...point,
+			...entries
+		};
+		const rest = point.value === null ? null : point.value - parts.reduce((all, part) => all + (part ?? 0), 0);
+		return {
+			...point,
+			...entries,
+			other: rest === null ? null : rest < noise ? 0 : rest
+		};
+	});
+	if (!(measure.kind !== "average" && points.some((point) => (point.other ?? 0) > 0))) return {
+		series,
+		points: points.map(({ other, ...point }) => point)
+	};
+	return {
+		series: [...series, {
+			key: "other",
+			label: "Other",
+			color: "var(--border-strong)"
+		}],
+		points
+	};
+};
+//#endregion
+export { splitPoints };

package/dist/app/current-address.d.ts

@@ -7,6 +7,7 @@ import { AppAddress, CalendarView, FilterLayout, MapView, ResourceModel, ViewMod
 export type ListAddress = {
   kind: 'list';
   resource: string;
+  list?: string;
   display: string;
   filter: string;
   orderBy: string;
@@ -31,5 +32,5 @@ export type CurrentAddress = ListAddress | {
   page: string;
 };
 /** What can change about the list the app shows; `undefined` returns a value to its default. */
-export type ListChange = Partial<Omit<ListAddress, 'kind' | 'resource'>>;
+export type ListChange = Partial<Omit<ListAddress, 'kind' | 'resource' | 'list'>>;
 //#endregion

package/dist/app/current-address.js

@@ -1,14 +1,15 @@
 import { defaultDisplay, listDefaultDisplay } from "./displays/list-displays.js";
 import { defaultOrderBy } from "./list-order.js";
-import { encodeKey } from "@protobase/schema/internal";
+import { encodeKey, viewOfList } from "@protobase/schema/internal";
 //#region src/app/current-address.ts
 /**
 * The resource whose records a list shows, with its view: the list's own, or, when its view has `listOf`, the resource
 * that relation points at, if the caller can see it.
 */
-const listedResource = (resources, views, resource) => {
+const listedResource = (resources, views, resource, list) => {
 	const model = resources[resource];
-	const listOf = views[resource]?.listOf;
+	const own = viewOfList(views[resource], list);
+	const listOf = own?.listOf;
 	const target = listOf === void 0 ? void 0 : model?.fields[listOf]?.relation?.resource;
 	return target !== void 0 && resources[target] ? {
 		model: resources[target],
@@ -16,7 +17,7 @@ const listedResource = (resources, views, resource) => {
 		listOf: true
 	} : {
 		model,
-		view: views[resource],
+		view: own,
 		listOf: false
 	};
 };
@@ -38,7 +39,7 @@ const currentAddress = (read, defaults) => {
 	};
 	if (read?.kind !== "list") return read;
 	return {
-		...defaults(read.resource),
+		...defaults(read.resource, read.list),
 		...read
 	};
 };
@@ -52,6 +53,7 @@ const changedList = (read, change, defaults) => {
 	return {
 		kind: "list",
 		resource: read.resource,
+		...read.list && { list: read.list },
 		...differs("filter") && { filter: next.filter },
 		...differs("display") && { display: next.display },
 		...differs("orderBy") && { orderBy: next.orderBy },

package/dist/app/displays/map-display.js

@@ -33,6 +33,7 @@ const MapDisplay = ({ model, view, display, filter, orderBy, fields, at, onMove,
 	const [fitting, setFitting] = useState(at === void 0);
 	const records = useMapRecords({
 		model,
+		view,
 		display,
 		fields,
 		filter,

package/dist/app/displays/use-map-records.js

@@ -12,7 +12,7 @@ import { keepPreviousData, useQuery } from "@tanstack/react-query";
 * many. A new area or filter keeps the previous answer until its own arrives, and an answer for an area the map has
 * left is never shown.
 */
-const useMapRecords = ({ model, display, fields, filter, orderBy, area }) => {
+const useMapRecords = ({ model, view, display, fields, filter, orderBy, area }) => {
 	const client = useClient();
 	const { resources, views } = useAdminMeta();
 	const position = {
@@ -32,7 +32,7 @@ const useMapRecords = ({ model, display, fields, filter, orderBy, area }) => {
 				filter: inside,
 				orderBy,
 				labels: listLabels(resources, views, model, fields),
-				photos: listPhotos(views[model.name])
+				photos: listPhotos(view)
 			});
 			return {
 				rows: withLabels(resources, model, fields, withPhotos(model, result.items, result.photos), result.labels).map((record) => displayRow(model, record)),

package/dist/app/list-page.js

@@ -50,6 +50,7 @@ import { useListScroll } from "./list-scroll.js";
 import { ListChart } from "./list-chart.js";
 import { ListGroupChart } from "./list-group-chart.js";
 import { ListSearch } from "./list-search.js";
+import { navItemId } from "./nav-from-meta.js";
 import { withRelatedDotsColumns } from "./related-dots/related-dots-columns.js";
 import { SavedList } from "./saved/saved-list.js";
 import { SaveSearchButton } from "./searches/save-search-button.js";
@@ -62,7 +63,7 @@ import { useMemo, useState } from "react";
 import { Download, Plus, SlidersHorizontal } from "lucide-react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { createWhere } from "@protobase/schema";
-import { isGroupChart, tableDisplay } from "@protobase/schema/internal";
+import { isGroupChart, tableDisplay, viewOfList } from "@protobase/schema/internal";
 //#region src/app/list-page.tsx
 const where$1 = createWhere();
 const searchText = (extras) => extras.find((clause) => clause.kind === "search");
@@ -86,12 +87,20 @@ const ListPage = ({ address }) => {
 			"."
 		]
 	});
-	const view = views[address.resource];
+	const view = viewOfList(views[address.resource], address.list);
+	if (address.list !== void 0 && !view) return /* @__PURE__ */ jsxs(Notice, {
+		title: "Not found",
+		children: [
+			"There is no list called ",
+			address.list,
+			"."
+		]
+	});
 	if (view?.searchesOf) return /* @__PURE__ */ jsx(SavedSearches, {
 		model,
 		view
 	});
-	const listed = listedResource(resources, views, address.resource);
+	const listed = listedResource(resources, views, address.resource, address.list);
 	if (view && listed.listOf) {
 		const target = listed.model;
 		return /* @__PURE__ */ jsx(SavedList, {
@@ -118,7 +127,7 @@ const LoadedList = ({ model, address, scope, heading }) => {
 	const meta = useAdminMeta();
 	const { set, listTo, go, href } = useAppAddress();
 	const resource = model.name;
-	const view = meta.views[resource];
+	const view = viewOfList(meta.views[resource], address.list);
 	const fields = useMemo(() => widgetFields(view, model), [view, model]);
 	const { fields: fieldTypes } = useProjectUi();
 	const columns = useMemo(() => withRelatedDotsColumns(withFieldTypeCells(columnsFromModel(model, view), model, view, fieldTypes), model, view, meta.resources, meta.views), [
@@ -377,7 +386,7 @@ const LoadedList = ({ model, address, scope, heading }) => {
 			onRun: (rows) => remove.startBulk(rows.map(target))
 		}] : []],
 		rowNumbers: false,
-		pinKey: auth.kind === "signed-in" ? pinnedStorageKey(auth.user.id, resource) : void 0,
+		pinKey: auth.kind === "signed-in" ? pinnedStorageKey(auth.user.id, navItemId(resource, address.list)) : void 0,
 		scroll: "parent",
 		className: "flex-1"
 	}) : /* @__PURE__ */ jsx("div", { className: "flex-1 rounded-lg border bg-surface" });

package/dist/app/nav-from-meta.js

@@ -5,6 +5,8 @@ import { userMenuResources } from "./user-menu-from-meta.js";
 import { LayoutDashboard } from "lucide-react";
 import { appPath } from "@protobase/schema";
 //#region src/app/nav-from-meta.ts
+/** The sidebar item of a resource's list, or of one of its named lists. */
+const navItemId = (resource, list) => list === void 0 ? resource : `${resource}/${list}`;
 const groupLabels = {
 	sales: "Sales",
 	crm: "CRM",
@@ -18,7 +20,8 @@ const groupLabels = {
 * the user menu leave an entry out, `nav.order` sorts within a group, and `recent` (from `useNavRecent`) makes an entry
 * collapsible. Groups with pages come first, so a dashboard leads the sidebar. The resources of a source that cannot be
 * read are listed under its label, each with the problem. A visitor also gets the resources whose views ask them to sign
-* in, where those views place them, under "Account" without a group.
+* in, where those views place them, under "Account" without a group. Each named list of a view is an entry of its
+* own, placed by its own `nav`.
 */
 const navFromMeta = (meta, basePath = "", recent = {}) => {
 	const groups = /* @__PURE__ */ new Map();
@@ -45,15 +48,20 @@ const navFromMeta = (meta, basePath = "", recent = {}) => {
 	}
 	for (const model of Object.values(meta.resources)) {
 		const view = meta.views[model.name];
-		if (!view || view.nav?.hidden || inMenu.has(model.name)) continue;
+		if (!view || inMenu.has(model.name)) continue;
 		const schema = model.table.schema ?? "public";
-		const groupName = view.nav?.group ?? groupLabels[schema] ?? humanize(schema);
-		const group = groups.get(groupName) ?? {
-			label: groupName,
-			items: []
+		const defaultGroup = view.nav?.group ?? groupLabels[schema] ?? humanize(schema);
+		const add = (groupName, item, order) => {
+			const group = groups.get(groupName) ?? {
+				label: groupName,
+				items: []
+			};
+			group.items.push(item);
+			groups.set(groupName, group);
+			orders.set(item.id, order ?? Number.MAX_SAFE_INTEGER);
 		};
-		group.items.push({
-			id: model.name,
+		if (!view.nav?.hidden) add(defaultGroup, {
+			id: navItemId(model.name),
 			label: view.names?.plural ?? humanize(model.name),
 			icon: iconFor(model.name),
 			href: appPath({
@@ -61,9 +69,20 @@ const navFromMeta = (meta, basePath = "", recent = {}) => {
 				resource: model.name
 			}, basePath),
 			...recent[model.name] && { recent: recent[model.name] }
-		});
-		groups.set(groupName, group);
-		orders.set(model.name, view.nav?.order ?? Number.MAX_SAFE_INTEGER);
+		}, view.nav?.order);
+		for (const named of view.lists ?? []) {
+			if (named.nav?.hidden) continue;
+			add(named.nav?.group ?? defaultGroup, {
+				id: navItemId(model.name, named.name),
+				label: named.names.plural,
+				icon: iconFor(model.name),
+				href: appPath({
+					kind: "list",
+					resource: model.name,
+					list: named.name
+				}, basePath)
+			}, named.nav?.order);
+		}
 	}
 	for (const entry of Object.values(meta.signIn ?? {})) {
 		if (entry.nav?.hidden || inMenu.has(entry.resource)) continue;
@@ -108,4 +127,4 @@ const navFromMeta = (meta, basePath = "", recent = {}) => {
 	}));
 };
 //#endregion
-export { navFromMeta };
+export { navFromMeta, navItemId };