@riducms/admin 0.2.2 → 0.3.0

package/src/features/collections/collection-list-route.svelte

@@ -1,633 +1,115 @@
 <script lang="ts">
-	import { Link, useLocation, useNavigate, useParams } from "@hvniel/svelte-router";
-	import type { SchemaCollection, SchemaField } from "@riducms/protocol";
-	import FolderIcon from "~icons/lucide/folder";
-	import RotateCcwIcon from "~icons/lucide/rotate-ccw";
-	import Trash2Icon from "~icons/lucide/trash-2";
-	import UploadCloudIcon from "~icons/lucide/upload-cloud";
-
+	import APIReference from "@admin/features/api-reference/api-reference.svelte";
+	import "@admin/features/collections/collection-list.scss";
+	import "@admin/components/data/list-table.scss";
+	import {
+		Link,
+		useHref,
+		useLocation,
+		useNavigation,
+		useParams,
+		useSearchParams,
+	} from "@hvniel/svelte-router";
+	import { Button } from "@riducms/ui";
 	import { Banner } from "@admin/components/ui/banner";
-	import { Button, buttonVariants } from "@admin/components/ui/button";
-	import { ConfirmationDialog } from "@admin/components/ui/confirmation-dialog";
 	import {
 		collectionPath,
 		collectionTrashPath,
-		collectionUploadPath,
-		createDocumentPath,
-		documentPath,
+		withContentLocale,
 	} from "@admin/core/routing/admin-paths";
+	import { registerAdminScrollPage } from "@admin/core/routing/admin-scroll.svelte";
 	import { getAdminRuntime } from "@admin/core/runtime/admin-runtime.svelte";
+	import { getAdminBootstrapCoordinator } from "@admin/core/bootstrap/admin-bootstrap";
 	import { getNotificationCenter } from "@admin/core/notifications/notification-center.svelte";
-	import type { AdminDocument } from "@admin/core/api/admin-client";
-	import { preferenceOwnerID } from "@admin/core/preferences/preference-write-queue";
-
-	import { CollectionListController } from "@admin/features/collections/collection-list-controller.svelte";
-	import CollectionListBulkActions from "@admin/features/collections/collection-list-bulk-actions.svelte";
-	import CollectionListBulkEditor from "@admin/features/collections/collection-list-bulk-editor.svelte";
 	import {
-		CollectionListPreferencesController,
-		type CollectionListPreset,
-	} from "@admin/features/collections/collection-list-preferences-controller.svelte";
+		CollectionList,
+		setCollectionList,
+	} from "@admin/features/collections/collection-list.svelte";
+	import { CollectionListQuery } from "@admin/features/collections/collection-list-query";
 	import CollectionListResults from "@admin/features/collections/collection-list-results.svelte";
-	import CollectionListWorkspaceToolbar from "@admin/features/collections/collection-list-workspace-toolbar.svelte";
-	import {
-		buildListFilterWhere,
-		defaultListColumns,
-		filterableFields,
-		listColumnFields,
-		listPageSizes,
-		parseListFilters,
-		parseListPageSize,
-		visibleColumnNames,
-		type ListFilter,
-		type ListPageSize,
-	} from "@admin/features/collections/list-workspace";
-	import { formatDateDisplay } from "@admin/fields/scalar/date-value";
+	import ListToolbar from "@admin/features/collections/controls/list-toolbar.svelte";
+	import CollectionListBulkActions from "@admin/features/collections/bulk/bulk-actions.svelte";
+	import CollectionListBulkEditorLoader from "@admin/features/collections/bulk/bulk-editor-loader.svelte";
+	import BulkConfirmation, {
+		type BulkConfirmationAction,
+	} from "@admin/features/collections/bulk/bulk-confirmation.svelte";
 
 	const runtime = getAdminRuntime();
-	const notifications = getNotificationCenter();
-	const navigate = useNavigate();
-	const params = $derived(useParams<"collection">());
-	const location = $derived(useLocation());
-	const slug = $derived(params.collection ?? "");
-	const trashOnly = $derived(location.pathname.endsWith("/trash"));
-	const collection = $derived(runtime.manifest?.collections.find((item) => item.slug === slug));
-	const titleField = $derived(
-		collection?.fields.find((field) => field.name === collection.admin.useAsTitle) ??
-			collection?.fields.find((field) => field.type === "text") ??
-			collection?.fields.find((field) => field.type === "select")
-	);
-	const searchLabel = $derived(
-		titleField === undefined
-			? runtime.i18n.t("collections:searchDocuments")
-			: runtime.i18n.t("collections:searchBy", { label: titleField.admin.label })
-	);
-	const statusField = $derived(
-		collection?.fields.find((field) => field.type === "select" && field.name === "status")
-	);
-	const statusOptions = $derived(statusField?.select?.options ?? []);
-	const searchParams = $derived(new URLSearchParams(location.search));
-	const localization = $derived(runtime.manifest?.application.localization);
-	const requestedLocale = $derived(searchParams.get("locale"));
-	const contentLocale = $derived(
-		localization?.locales.some((locale) => locale.code === requestedLocale)
-			? (requestedLocale ?? localization?.defaultLocale)
-			: (runtime.contentLocale ?? localization?.defaultLocale)
-	);
-	const query = $derived(searchParams.get("q") ?? "");
-	const requestedPage = $derived(parsePage(searchParams.get("page")));
-	const requestedStatus = $derived(searchParams.get("status") ?? "");
-	const requestedFolder = $derived(searchParams.get("folder") ?? "");
-	const hierarchy = $derived(searchParams.get("view") === "hierarchy");
-	const requestedSort = $derived(searchParams.get("sort") ?? "");
-	const folderField = $derived(
-		collection?.fields.find((field) => field.name === collection.admin.folderField)
-	);
-	const parentField = $derived(
-		collection?.fields.find((field) => field.name === collection.admin.parentField)
-	);
-	const folderCollection = $derived(
-		runtime.manifest?.collections.find(
-			(candidate) => candidate.slug === folderField?.relationship?.collectionSlug
-		)
-	);
-	let folders = $state.raw<AdminDocument[]>([]);
-	let referenceLabels = $state.raw<Record<string, string>>({});
-	let searchInput = $state<HTMLInputElement | null>(null);
-	const activeStatus = $derived(
-		statusOptions.some((option) => option.value === requestedStatus) ? requestedStatus : ""
-	);
-	const bulkEditableFields = $derived(
-		collection?.fields.filter(
-			(field) =>
-				field.category === "scalar" &&
-				field.localized !== true &&
-				field.admin.readOnly !== true &&
-				["text", "textarea", "email", "date", "number", "checkbox", "select", "radio"].includes(
-					field.type
-				)
-		) ?? []
-	);
-	const customListCells = $derived(
-		runtime.listCells.flatMap((cell) => {
-			if (cell.collection !== slug) return [];
-			const field = collection?.fields.find(
-				(candidate) => candidate.path === cell.field || candidate.name === cell.field
-			);
-			return field === undefined ? [] : [{ ...cell, field }];
-		})
-	);
-	const availableColumnFields = $derived(
-		listColumnFields(collection, titleField?.name).filter(
-			(field) =>
-				field.path !== statusField?.path &&
-				!customListCells.some((cell) => cell.field.path === field.path)
-		)
-	);
-	const availableFilterFields = $derived(filterableFields(collection?.fields ?? []));
-	const defaultColumns = $derived(defaultListColumns(collection, availableColumnFields));
-	const preferences = new CollectionListPreferencesController(
-		runtime.client,
-		notifications,
-		() => runtime.session?.id ?? "",
-		runtime.i18n
-	);
-	const { workspace, presets, presetsPending } = $derived(preferences);
-	const visibleColumns = $derived(
-		visibleColumnNames(searchParams.get("columns"), workspace.columns).flatMap((name) => {
-			const field = availableColumnFields.find((candidate) => candidate.path === name);
-			return field === undefined ? [] : [field];
-		})
-	);
-	const pageSize = $derived(parseListPageSize(searchParams.get("limit"), workspace.limit));
-	const showID = $derived(workspace.showID);
-	const showCreated = $derived(workspace.showCreated);
-	const listFilters = $derived(
-		parseListFilters(searchParams.get("filters"), availableFilterFields)
-	);
-	const filterWhere = $derived(buildListFilterWhere(listFilters, availableFilterFields));
-	const sortField = $derived(requestedSort.replace(/^-/, ""));
-	const sortDescending = $derived(requestedSort.startsWith("-"));
-	let bulkEditOpen = $state(false);
-	type ConfirmationAction =
-		| { kind: "delete-document"; id: string }
-		| { kind: "delete-selected" }
-		| { kind: "restore-selected" }
-		| { kind: "delete-selected-permanently" }
-		| { kind: "empty-trash" };
-	let confirmationOpen = $state(false);
-	let confirmationAction = $state.raw<ConfirmationAction>();
-	const confirmationCopy = $derived(confirmationText(confirmationAction));
-	const controller = new CollectionListController({
-		client: runtime.client,
-		notifications,
-		i18n: runtime.i18n,
+	const bootstrap = getAdminBootstrapCoordinator();
+	const navigation = useNavigation();
+	const params = useParams<"collection">();
+	const location = useLocation();
+	const currentPath = useHref(() => location.current.pathname);
+	const [searchParams, setSearchParams] = useSearchParams();
+
+	const list = new CollectionList({
+		runtime,
+		notifications: getNotificationCenter(),
+		query: new CollectionListQuery(searchParams, setSearchParams, () => {
+			const destination = navigation.current.location;
+			if (
+				destination?.pathname === currentPath.current &&
+				new URLSearchParams(destination.search).get("locale") === searchParams.current.get("locale")
+			) {
+				return destination.search;
+			}
+		}),
 		get slug() {
-			return slug;
-		},
-		get locale() {
-			return contentLocale;
-		},
-		get page() {
-			return requestedPage;
-		},
-		get search() {
-			return query;
-		},
-		get titleField() {
-			return titleField?.name;
-		},
-		get status() {
-			return activeStatus;
-		},
-		get statusField() {
-			return statusField?.name;
-		},
-		get statusOptions() {
-			return statusOptions;
-		},
-		get versioned() {
-			return collection?.capabilities.versions === true;
+			return params.current.collection ?? "";
 		},
 		get trashOnly() {
-			return trashOnly;
+			return location.current.pathname.endsWith("/trash");
 		},
-		get folderField() {
-			return folderField?.name;
+		get navigationIdle() {
+			return navigation.current.state === "idle";
 		},
-		get folderID() {
-			return requestedFolder;
-		},
-		get hierarchy() {
-			return hierarchy;
-		},
-		get limit() {
-			return pageSize;
-		},
-		get sort() {
-			return requestedSort === "" ? [] : [requestedSort];
-		},
-		get filterWhere() {
-			return filterWhere;
-		},
-	});
-	const {
-		allDocuments,
-		canCreate,
-		docs,
-		error,
-		pagination,
-		selectedIDs,
-		bulkPending,
-		showStatus,
-		showUpdated,
-		statusColumnAvailable,
-	} = $derived(controller);
-	const {
-		optionCount,
-		canReadField,
-		deletePermanent,
-		bulkDelete,
-		bulkDeletePermanent,
-		bulkRestore,
-		emptyTrash,
-		bulkUpdate,
-		retry,
-		setShowStatus,
-		setShowUpdated,
-		title,
-	} = controller;
+		prepared() {
+			// A retained route may only adopt a seed for its exact pathname and query.
+			const route = bootstrap.routeData(location.current.pathname, location.current.search);
 
-	$effect(() => {
-		if (contentLocale === undefined || requestedLocale === contentLocale) return;
-		const next = new URLSearchParams(location.search);
-		next.set("locale", contentLocale);
-		updateSearch(next, true);
+			return route?.kind === "collection-list" || route?.kind === "collection-trash"
+				? route.data
+				: undefined;
+		},
 	});
 
-	$effect(() =>
-		runtime.registerContentLocaleBlocker(
-			() =>
-				controller.bulkPending || controller.selectionPending || controller.mutationPending.size > 0
-		)
-	);
+	setCollectionList(list);
+	registerAdminScrollPage({ ready: () => list.ready });
 
-	$effect(() => {
-		preferences.enter({
-			slug,
-			sessionID: runtime.session?.id ?? "",
-			preferenceOwnerID: preferenceOwnerID(runtime.session),
-			columnFields: availableColumnFields,
-			filterFields: availableFilterFields,
-			defaultColumns,
-		});
-	});
+	const { controller } = list;
+	const { slug, collection, trashOnly, contentLocale, filtered } = $derived(list);
+	const { canCreate, error, pagination, bulkPending } = $derived(controller);
+	const { retry } = controller;
 
-	$effect(() => {
-		setShowStatus(workspace.showStatus);
-		setShowUpdated(workspace.showUpdated);
-	});
+	const collectionViews = $derived([
+		{ trash: false, label: runtime.i18n.t("collections:allDocuments", { label: list.label }) },
+		{ trash: true, label: runtime.i18n.t("collections:trash") },
+	]);
 
-	$effect(() => () => preferences.dispose());
+	let bulkEditOpen = $state(false);
+	let confirmationOpen = $state(false);
+	let confirmationAction = $state<BulkConfirmationAction>("delete-selected");
 
-	$effect(() => {
-		const target = folderCollection;
-		const revision = runtime.documentRevision;
-		if (target === undefined || revision < 0) {
-			folders = [];
-			return;
-		}
-		const request = new AbortController();
-		runtime.client
-			.list(target.slug, { limit: 100, locale: contentLocale, signal: request.signal })
-			.then((page) => {
-				if (!request.signal.aborted) folders = page.docs;
-			})
-			.catch(() => {
-				if (!request.signal.aborted) folders = [];
-			});
-		return () => request.abort();
-	});
+	let searchInput = $state<HTMLInputElement | null>(null);
+	let focusSearchAfterNavigation = $state(false);
 
 	$effect(() => {
-		const documents = docs;
-		const fields = visibleColumns.filter(referenceField);
-		const collections = runtime.manifest?.collections ?? [];
-		if (documents.length === 0 || fields.length === 0) {
-			referenceLabels = {};
-			return;
-		}
-		const lookups = new Map<string, { collection: SchemaCollection; id: string }>();
-		for (const document of documents) {
-			for (const field of fields) {
-				for (const reference of fieldReferences(field, documentPathValue(document, field.path))) {
-					const target = collections.find((candidate) => candidate.slug === reference.collection);
-					if (target !== undefined) {
-						lookups.set(referenceKey(reference.collection, reference.id), {
-							collection: target,
-							id: reference.id,
-						});
-					}
-				}
-			}
+		if (list.navigationIdle && focusSearchAfterNavigation) {
+			focusSearchAfterNavigation = false;
+			searchInput?.focus();
 		}
-		const request = new AbortController();
-		Promise.all(
-			[...lookups].map(async ([key, lookup]) => {
-				try {
-					const document = await runtime.client.find(lookup.collection.slug, lookup.id, {
-						signal: request.signal,
-						locale: contentLocale,
-					});
-					return [key, referenceTitle(lookup.collection, document)] as const;
-				} catch {
-					return [key, lookup.id] as const;
-				}
-			})
-		).then((entries) => {
-			if (!request.signal.aborted) referenceLabels = Object.fromEntries(entries);
-		});
-		return () => request.abort();
 	});
 
-	function parsePage(value: string | null) {
-		const page = Number(value);
-		return Number.isInteger(page) && page > 0 ? page : 1;
-	}
-
-	function contentPath(path: string) {
-		if (contentLocale === undefined) return path;
-		return `${path}?${new URLSearchParams({ locale: contentLocale }).toString()}`;
-	}
-
-	function updateSearch(next: URLSearchParams, replace: boolean) {
-		navigate(
-			{ pathname: location.pathname, search: next.size === 0 ? "" : `?${next}` },
-			{ replace }
-		);
-	}
-
-	function handleSearch(value: string) {
-		const next = new URLSearchParams(searchParams);
-		if (value.trim().length > 0) next.set("q", value);
-		else next.delete("q");
-		next.delete("page");
-		updateSearch(next, true);
-	}
-
-	function clearSearch() {
-		const next = new URLSearchParams(searchParams);
-		next.delete("q");
-		next.delete("page");
-		updateSearch(next, true);
-	}
-
-	function clearFilters() {
-		const next = new URLSearchParams(searchParams);
-		next.delete("q");
-		next.delete("status");
-		next.delete("page");
-		next.delete("folder");
-		next.delete("filters");
-		updateSearch(next, true);
-	}
-
 	function clearFiltersAndFocusSearch() {
-		clearFilters();
-		searchInput?.focus();
-	}
-
-	function updateListFilters(filters: readonly ListFilter[]) {
-		const next = new URLSearchParams(searchParams);
-		if (filters.length === 0) next.delete("filters");
-		else next.set("filters", JSON.stringify(filters));
-		next.delete("page");
-		updateSearch(next, false);
-	}
-
-	function toggleSort(name: string) {
-		const next = new URLSearchParams(searchParams);
-		if (sortField !== name) next.set("sort", name);
-		else if (!sortDescending) next.set("sort", `-${name}`);
-		else next.delete("sort");
-		next.delete("page");
-		updateSearch(next, false);
-	}
-
-	function selectPageSize(limit: ListPageSize) {
-		const next = new URLSearchParams(searchParams);
-		next.set("limit", String(limit));
-		next.delete("page");
-		updateSearch(next, false);
-		void preferences.persistWorkspace({ ...workspace, limit });
-	}
-
-	function toggleColumn(name: string, show: boolean) {
-		// Workspace state is updated synchronously by persistWorkspace. Using it as
-		// the source prevents two quick checkbox changes from racing a router update.
-		const nextNames = new Set(workspace.columns);
-		if (show) nextNames.add(name);
-		else nextNames.delete(name);
-		const columns = availableColumnFields
-			.map((field) => field.path)
-			.filter((candidate) => nextNames.has(candidate));
-		const next = new URLSearchParams(searchParams);
-		if (columns.length === 0) next.set("columns", "");
-		else next.set("columns", columns.join(","));
-		updateSearch(next, true);
-		void preferences.persistWorkspace({ ...workspace, columns });
-	}
-
-	function toggleStatusColumn(show: boolean) {
-		void preferences.persistWorkspace({ ...workspace, showStatus: show });
-	}
-
-	function toggleUpdatedColumn(show: boolean) {
-		void preferences.persistWorkspace({ ...workspace, showUpdated: show });
-	}
-
-	function toggleIDColumn(show: boolean) {
-		void preferences.persistWorkspace({ ...workspace, showID: show });
-	}
-
-	function toggleCreatedColumn(show: boolean) {
-		void preferences.persistWorkspace({ ...workspace, showCreated: show });
-	}
-
-	function selectFolder(folder: string) {
-		const next = new URLSearchParams(searchParams);
-		if (folder === "") next.delete("folder");
-		else next.set("folder", folder);
-		next.delete("page");
-		updateSearch(next, false);
-	}
-
-	function selectView(view: "list" | "hierarchy") {
-		const next = new URLSearchParams(searchParams);
-		if (view === "list") next.delete("view");
-		else next.set("view", view);
-		next.delete("page");
-		updateSearch(next, false);
-	}
-
-	function savePreset(name: string) {
-		return preferences.savePreset(name, {
-			q: query,
-			status: activeStatus,
-			folder: requestedFolder,
-			view: hierarchy ? "hierarchy" : "list",
-			filters: listFilters,
-			sort: requestedSort,
-			columns: visibleColumns.map((field) => field.path),
-			limit: pageSize,
-			showStatus,
-			showID,
-			showCreated,
-			showUpdated,
-		});
-	}
-
-	function applyPreset(preset: CollectionListPreset) {
-		const next = new URLSearchParams();
-		if (contentLocale !== undefined) next.set("locale", contentLocale);
-		if (preset.q !== "") next.set("q", preset.q);
-		if (preset.status !== "") next.set("status", preset.status);
-		if (preset.folder !== "") next.set("folder", preset.folder);
-		if (preset.view === "hierarchy") next.set("view", "hierarchy");
-		if (preset.filters.length > 0) next.set("filters", JSON.stringify(preset.filters));
-		if (preset.sort !== "") next.set("sort", preset.sort);
-		if (preset.columns.length > 0) next.set("columns", preset.columns.join(","));
-		next.set("limit", String(preset.limit));
-		void preferences.persistWorkspace({
-			columns: preset.columns,
-			limit: preset.limit,
-			showStatus: preset.showStatus,
-			showID: preset.showID,
-			showCreated: preset.showCreated,
-			showUpdated: preset.showUpdated,
-		});
-		updateSearch(next, false);
-	}
-
-	function selectStatus(status: string) {
-		const next = new URLSearchParams(searchParams);
-		if (status === "") next.delete("status");
-		else next.set("status", status);
-		next.delete("page");
-		updateSearch(next, false);
-	}
-
-	function selectPage(page: number) {
-		const next = new URLSearchParams(searchParams);
-		if (page <= 1) next.delete("page");
-		else next.set("page", String(page));
-		updateSearch(next, false);
-	}
-
-	function columnValue(document: AdminDocument, field: SchemaField) {
-		if (!canReadField(field.path, document.id)) return "—";
-		const value = documentPathValue(document, field.path);
-		if (value === undefined || value === null || value === "") return "—";
-		if (field.type === "checkbox") {
-			return value === true ? runtime.i18n.t("general:yes") : runtime.i18n.t("general:no");
-		}
-		if (field.type === "select" || field.type === "radio") {
-			return field.select?.options.find((option) => option.value === value)?.label ?? String(value);
-		}
-		if (field.type === "array") return summarizeRows(value, "row");
-		if (field.type === "blocks") return summarizeRows(value, "block");
-		if (field.type === "json" || field.plugin !== undefined) return summarizeStructured(value);
-		if (field.type === "date") return formatDateDisplay(value, field.date?.format, runtime.i18n);
-		if (referenceField(field)) {
-			return runtime.i18n.formatList(
-				fieldReferences(field, value).map(
-					(reference) =>
-						referenceLabels[referenceKey(reference.collection, reference.id)] ?? reference.id
-				)
-			);
-		}
-		if (Array.isArray(value)) return runtime.i18n.formatList(value.map(displayReference));
-		if (typeof value === "object") return displayReference(value);
-		return String(value);
-	}
-
-	function referenceField(field: SchemaField) {
-		return (
-			field.relationship !== undefined || field.upload !== undefined || field.join !== undefined
-		);
-	}
-
-	function fieldReferences(field: SchemaField, value: unknown) {
-		const values = Array.isArray(value) ? value : [value];
-		return values.flatMap((candidate): { collection: string; id: string }[] => {
-			if (typeof candidate === "string") {
-				const target =
-					field.relationship?.collectionSlug ??
-					field.upload?.collectionSlug ??
-					field.join?.collectionSlug;
-				return target === undefined ? [] : [{ collection: target, id: candidate }];
-			}
-			if (typeof candidate !== "object" || candidate === null) return [];
-			const record = candidate as Record<string, unknown>;
-			const id = typeof record.id === "string" ? record.id : undefined;
-			const target =
-				typeof record.relationTo === "string"
-					? record.relationTo
-					: (field.relationship?.collectionSlug ??
-						field.upload?.collectionSlug ??
-						field.join?.collectionSlug);
-			return id === undefined || target === undefined ? [] : [{ collection: target, id }];
-		});
-	}
-
-	function referenceKey(collection: string, id: string) {
-		return `${collection}:${id}`;
-	}
-
-	function referenceTitle(collection: SchemaCollection, document: AdminDocument) {
-		const titleField =
-			collection.fields.find((field) => field.name === collection.admin.useAsTitle) ??
-			collection.fields.find((field) => ["text", "email", "select", "radio"].includes(field.type));
-		const value =
-			titleField === undefined ? undefined : documentPathValue(document, titleField.path);
-		return value === undefined || value === null || value === "" ? document.id : String(value);
-	}
-
-	function displayReference(value: unknown) {
-		if (typeof value === "string") return value;
-		if (typeof value !== "object" || value === null) return String(value ?? "—");
-		const record = value as Record<string, unknown>;
-		return String(
-			record.title ??
-				record.name ??
-				record.email ??
-				record.id ??
-				runtime.i18n.t("collections:relatedDocument")
-		);
-	}
-
-	function documentPathValue(document: AdminDocument, path: string) {
-		let value: unknown = document;
-		for (const segment of path.split(".")) {
-			if (typeof value !== "object" || value === null || Array.isArray(value)) return undefined;
-			value = Reflect.get(value, segment);
-		}
-		return value;
+		focusSearchAfterNavigation = true;
+		return list.query.clearFilters();
 	}
 
-	function summarizeRows(value: unknown, singular: "row" | "block") {
-		if (!Array.isArray(value) || value.length === 0) return "—";
-		const previews = value.slice(0, 2).map((row) => {
-			if (typeof row !== "object" || row === null) return String(row);
-			const record = row as Record<string, unknown>;
-			return String(
-				record.label ??
-					record.title ??
-					record.heading ??
-					record.name ??
-					record.blockType ??
-					runtime.i18n.t(singular === "row" ? "collections:rowNumber" : "collections:blockNumber", {
-						number: runtime.i18n.formatNumber(value.indexOf(row) + 1),
-					})
-			);
-		});
-		const summary = runtime.i18n.formatList(previews);
-		return value.length > previews.length
-			? runtime.i18n.t("collections:moreItems", {
-					summary,
-					count: runtime.i18n.formatNumber(value.length - previews.length),
-				})
-			: summary;
-	}
-
-	function summarizeStructured(value: unknown) {
-		if (value === undefined || value === null) return "—";
-		if (typeof value !== "object") return String(value);
-		const text = JSON.stringify(value);
-		return text.length > 72 ? `${text.slice(0, 69)}…` : text;
+	function contentPath(path: string) {
+		return withContentLocale(path, contentLocale);
 	}
 
-	function requestConfirmation(action: ConfirmationAction) {
+	function requestConfirmation(action: BulkConfirmationAction) {
 		confirmationAction = action;
 		confirmationOpen = true;
 	}
@@ -635,316 +117,93 @@
 	function openBulkEdit() {
 		bulkEditOpen = true;
 	}
-
-	function applyBulkEdit(field: SchemaField, value: unknown) {
-		return bulkUpdate({ [field.name]: value });
-	}
-
-	async function performConfirmation() {
-		const action = confirmationAction;
-		if (action === undefined) return;
-		if (action.kind === "delete-document") await deletePermanent(action.id);
-		else if (action.kind === "delete-selected") await bulkDelete();
-		else if (action.kind === "restore-selected") await bulkRestore();
-		else if (action.kind === "delete-selected-permanently") await bulkDeletePermanent();
-		else await emptyTrash();
-	}
-
-	function confirmationText(action: ConfirmationAction | undefined) {
-		const count = selectedIDs.size;
-		if (action?.kind === "delete-document") {
-			return {
-				title: runtime.i18n.t("collections:confirmDeleteDocumentPermanently"),
-				description: runtime.i18n.t("collections:cannotUndo"),
-				confirmLabel: runtime.i18n.t("collections:deletePermanently"),
-				destructive: true,
-			};
-		}
-		if (action?.kind === "restore-selected") {
-			return {
-				title: runtime.i18n.t("collections:confirmRestoreSelected", {
-					count,
-					formattedCount: runtime.i18n.formatNumber(count),
-				}),
-				description: runtime.i18n.t("collections:restoreSelectedDescription"),
-				confirmLabel: runtime.i18n.t("documents:restore"),
-				destructive: false,
-			};
-		}
-		if (action?.kind === "delete-selected-permanently") {
-			return {
-				title: runtime.i18n.t("collections:confirmDeleteSelectedPermanently", {
-					count,
-					formattedCount: runtime.i18n.formatNumber(count),
-				}),
-				description: runtime.i18n.t("collections:cannotUndo"),
-				confirmLabel: runtime.i18n.t("collections:deletePermanently"),
-				destructive: true,
-			};
-		}
-		if (action?.kind === "empty-trash") {
-			const trashCount = pagination.totalDocs;
-			return {
-				title: runtime.i18n.t("collections:confirmEmptyTrash", {
-					label:
-						collection?.labels.plural.toLocaleLowerCase(runtime.i18n.language) ??
-						runtime.i18n.t("collections:documents"),
-				}),
-				description: runtime.i18n.t("collections:emptyTrashDescription", {
-					count: trashCount,
-					formattedCount: runtime.i18n.formatNumber(trashCount),
-				}),
-				confirmLabel: runtime.i18n.t("collections:emptyTrash"),
-				destructive: true,
-			};
-		}
-		return {
-			title: runtime.i18n.t("collections:confirmDeleteSelected", {
-				count,
-				formattedCount: runtime.i18n.formatNumber(count),
-			}),
-			description: runtime.i18n.t("collections:deleteSelectedDescription"),
-			confirmLabel: runtime.i18n.t("general:delete"),
-			destructive: true,
-		};
-	}
 </script>
 
-<section class="w-full px-5 py-7 sm:px-8 sm:py-8 lg:px-10 lg:pb-20">
-	<header class="flex flex-wrap items-start justify-between gap-4">
-		<div>
-			<div class="flex flex-wrap items-center gap-3">
-				<h1
-					class="text-[28px] font-semibold leading-tight tracking-[-0.02em] text-foreground-strong"
-				>
-					{collection?.labels.plural ?? slug}
-				</h1>
-				{#if !trashOnly && canCreate}
-					<Link class={buttonVariants()} to={contentPath(createDocumentPath(slug))}>
-						{runtime.i18n.t("general:create")}
-					</Link>
-				{/if}
-			</div>
-			<p class="mt-1.5 text-[12.5px] text-foreground-muted">
-				{runtime.i18n.t("collections:documentCount", {
-					count: allDocuments,
-					formattedCount: runtime.i18n.formatNumber(allDocuments),
-				})}
-				{#if collection?.capabilities.versions === true}
-					<span aria-hidden="true">·</span>
-					{runtime.i18n.t("collections:draftsAndVersions")}
-				{/if}
-			</p>
-		</div>
-		<div class="flex items-center gap-2">
-			{#if !trashOnly && canCreate && collection?.capabilities.upload === true}
+<section class="ridu-list">
+	<header class="ridu-list__header" inert={!list.navigationIdle}>
+		<div class="ridu-list__title">
+			<h1>{collection?.labels.plural ?? slug}</h1>
+			{#if !trashOnly && canCreate}
 				<Link
-					class={buttonVariants({ variant: "outline" })}
-					to={contentPath(collectionUploadPath(slug))}
+					class="ridu-list__pill"
+					aria-label={runtime.i18n.t("collections:createNew", {
+						label: collection?.labels.singular ?? slug,
+					})}
+					to={list.createHref}
 				>
-					<UploadCloudIcon class="size-3.5" />
-					{runtime.i18n.t("collections:bulkUpload")}
+					{runtime.i18n.t("collections:createNewButton")}
 				</Link>
 			{/if}
-			{#if collection?.capabilities.trash === true}
-				{#if trashOnly}
-					<Button
-						variant="destructive"
-						disabled={pagination.totalDocs === 0 || bulkPending}
-						onclick={() => requestConfirmation({ kind: "empty-trash" })}
-					>
-						{runtime.i18n.t("collections:emptyTrash")}
-					</Button>
-				{/if}
-				<Link
-					class={buttonVariants({ variant: "outline" })}
-					to={contentPath(trashOnly ? collectionPath(slug) : collectionTrashPath(slug))}
-				>
-					{#if trashOnly}<RotateCcwIcon class="size-3.5" />
-						{runtime.i18n.t("collections:backToCollection")}{:else}<Trash2Icon class="size-3.5" />
-						{runtime.i18n.t("collections:trash")}{/if}
+			{#if list.uploadHref !== undefined}
+				<Link class="ridu-list__pill" to={list.uploadHref}>
+					{runtime.i18n.t("collections:bulkUpload")}
 				</Link>
 			{/if}
-		</div>
-	</header>
-
-	{#if statusOptions.length > 0 && !trashOnly}
-		<div
-			class="mt-6 flex h-9 w-full items-center justify-start gap-5 border-b border-control-border"
-			role="group"
-			aria-label={runtime.i18n.t("collections:statusFilters")}
-		>
-			<button
-				type="button"
-				class="relative h-9 flex-none cursor-pointer px-px pb-2.5 text-[13px] text-foreground-muted outline-none after:absolute after:inset-x-0 after:bottom-[-1px] after:h-0.5 after:bg-primary after:opacity-0 after:transition-opacity hover:text-foreground-strong focus-visible:outline-2 focus-visible:outline-primary/60 focus-visible:outline-offset-2 aria-pressed:text-foreground-strong aria-pressed:after:opacity-100"
-				aria-pressed={activeStatus === ""}
-				onclick={() => selectStatus("")}
-			>
-				{runtime.i18n.t("collections:all")}
-				<span class="font-mono ms-1 text-[9.5px] text-foreground-faint">
-					{runtime.i18n.formatNumber(allDocuments)}
-				</span>
-			</button>
-			{#each statusOptions as option (option.value)}
-				{const statusCount = $derived(optionCount(option))}
+			{#if trashOnly}
 				<button
 					type="button"
-					class="relative h-9 flex-none cursor-pointer px-px pb-2.5 text-[13px] text-foreground-muted outline-none after:absolute after:inset-x-0 after:bottom-[-1px] after:h-0.5 after:bg-primary after:opacity-0 after:transition-opacity hover:text-foreground-strong focus-visible:outline-2 focus-visible:outline-primary/60 focus-visible:outline-offset-2 aria-pressed:text-foreground-strong aria-pressed:after:opacity-100"
-					aria-pressed={activeStatus === option.value}
-					onclick={() => selectStatus(option.value)}
+					class="ridu-list__pill"
+					disabled={bulkPending || (pagination.totalDocs === 0 && !filtered)}
+					onclick={() => requestConfirmation("empty-trash")}
 				>
-					{option.label}
-					{#if statusCount !== undefined}
-						<span class="font-mono ms-1 text-[9.5px] text-foreground-faint">
-							{runtime.i18n.formatNumber(statusCount)}
-						</span>
-					{/if}
+					{runtime.i18n.t("collections:emptyTrash")}
 				</button>
-			{/each}
+			{/if}
 		</div>
-	{/if}
+
+		<div class="ridu-list__header-actions">
+			{#if collection}
+				{#key collection.slug}
+					<APIReference {collection} />
+				{/key}
+			{/if}
+			<CollectionListBulkActions
+				onEdit={openBulkEdit}
+				onRequestPublish={() => requestConfirmation("publish-selected")}
+				onRequestUnpublish={() => requestConfirmation("unpublish-selected")}
+				onRequestDelete={() => requestConfirmation("delete-selected")}
+				onRequestRestore={() => requestConfirmation("restore-selected")}
+				onRequestDeletePermanent={() => requestConfirmation("delete-selected-permanently")}
+			/>
+
+			{#if collection?.capabilities.trash}
+				<nav class="ridu-list__views" aria-label={runtime.i18n.t("collections:collectionViews")}>
+					{#each collectionViews as view}
+						{#if trashOnly === view.trash}
+							<button type="button" class="ridu-list__view" aria-current="page" disabled>
+								{view.label}
+							</button>
+						{:else}
+							<Link
+								class="ridu-list__view"
+								to={contentPath(view.trash ? collectionTrashPath(slug) : collectionPath(slug))}
+							>
+								{view.label}
+							</Link>
+						{/if}
+					{/each}
+				</nav>
+			{/if}
+		</div>
+	</header>
 
 	{#if error !== undefined}
-		<Banner class="mt-6" tone="destructive">
-			<span class="size-2 shrink-0 rounded-full bg-destructive" aria-hidden="true"></span>
-			<span class="min-w-0 flex-1">{error}</span>
+		<Banner class="ridu-list__error" tone="destructive">
+			<span class="ridu-list__error-marker" aria-hidden="true"></span>
+			<span class="ridu-list__error-message">{error}</span>
 			<Button variant="outline" size="sm" onclick={retry}>
 				{runtime.i18n.t("general:retry")}
 			</Button>
 		</Banner>
 	{/if}
 
-	{#snippet manageFoldersLink()}
-		{#if folderCollection !== undefined}
-			<Link
-				class={buttonVariants({ variant: "outline", class: "h-[31px] gap-1.75 px-3" })}
-				to={contentPath(collectionPath(folderCollection.slug))}
-			>
-				<FolderIcon class="size-3" />
-				{runtime.i18n.t("collections:manageFolders")}
-			</Link>
-		{/if}
-	{/snippet}
-
-	<CollectionListWorkspaceToolbar
-		{slug}
-		{query}
-		{searchLabel}
-		bind:searchInput
-		filterFields={availableFilterFields}
-		filters={listFilters}
-		{canReadField}
-		{folders}
-		{requestedFolder}
-		manageFoldersLink={folderCollection === undefined ? undefined : manageFoldersLink}
-		showFolder={folderField !== undefined && !trashOnly}
-		showHierarchy={parentField !== undefined && !trashOnly}
-		{hierarchy}
-		sessionActive={runtime.session !== undefined && !trashOnly}
-		{presets}
-		{presetsPending}
-		{statusColumnAvailable}
-		{availableColumnFields}
-		{visibleColumns}
-		{showStatus}
-		{showID}
-		{showCreated}
-		{showUpdated}
-		{pageSize}
-		onSearch={handleSearch}
-		onClearSearch={clearSearch}
-		onFiltersChange={updateListFilters}
-		onSelectFolder={selectFolder}
-		onSelectView={selectView}
-		onSavePreset={savePreset}
-		onApplyPreset={applyPreset}
-		onDeletePreset={preferences.deletePreset}
-		onToggleColumn={toggleColumn}
-		onToggleStatus={toggleStatusColumn}
-		onToggleID={toggleIDColumn}
-		onToggleCreated={toggleCreatedColumn}
-		onToggleUpdated={toggleUpdatedColumn}
-		onSelectPageSize={selectPageSize}
-	/>
+	{#key slug}
+		<ListToolbar bind:searchInput />
+	{/key}
 
-	<CollectionListResults
-		i18n={runtime.i18n}
-		{controller}
-		resourceKey={slug}
-		{collection}
-		{titleField}
-		{customListCells}
-		{visibleColumns}
-		{showID}
-		{showCreated}
-		{showUpdated}
-		parentFieldName={parentField?.name}
-		{hierarchy}
-		{trashOnly}
-		filtered={query !== "" ||
-			activeStatus !== "" ||
-			requestedFolder !== "" ||
-			listFilters.length > 0}
-		{sortField}
-		{sortDescending}
-		{columnValue}
-		onClearFilters={clearFiltersAndFocusSearch}
-		onToggleSort={toggleSort}
-		onSelectPage={selectPage}
-		onRequestDeletePermanent={(id) => requestConfirmation({ kind: "delete-document", id })}
-	>
-		{#snippet documentLink(document)}
-			<Link class="block max-w-[600px]" to={contentPath(documentPath(slug, document.id))}>
-				<span
-					class="block truncate text-[14px] font-medium text-foreground-strong transition-colors group-hover:text-primary"
-				>
-					{title(document)}
-				</span>
-			</Link>
-		{/snippet}
-		{#snippet createAction()}
-			<Link
-				class={buttonVariants({ variant: "outline" })}
-				to={contentPath(createDocumentPath(slug))}
-			>
-				{runtime.i18n.t("collections:createNew", {
-					label:
-						collection?.labels.singular.toLocaleLowerCase(runtime.i18n.language) ??
-						runtime.i18n.t("collections:document"),
-				})}
-			</Link>
-		{/snippet}
-	</CollectionListResults>
+	<CollectionListResults onClearFilters={clearFiltersAndFocusSearch} />
 </section>
 
-<CollectionListBulkActions
-	i18n={runtime.i18n}
-	{controller}
-	{trashOnly}
-	versioned={collection?.capabilities.versions === true}
-	hasBulkEditableFields={bulkEditableFields.length > 0}
-	onEdit={openBulkEdit}
-	onRequestDelete={() => requestConfirmation({ kind: "delete-selected" })}
-	onRequestRestore={() => requestConfirmation({ kind: "restore-selected" })}
-	onRequestDeletePermanent={() => requestConfirmation({ kind: "delete-selected-permanently" })}
-	onOpenDocument={(id) => navigate(contentPath(documentPath(slug, id)))}
-/>
-
-<ConfirmationDialog
-	bind:open={confirmationOpen}
-	title={confirmationCopy.title}
-	description={confirmationCopy.description}
-	confirmLabel={confirmationCopy.confirmLabel}
-	cancelLabel={runtime.i18n.t("general:cancel")}
-	destructive={confirmationCopy.destructive}
-	disabled={bulkPending}
-	onconfirm={performConfirmation}
-/>
+<BulkConfirmation bind:open={confirmationOpen} action={confirmationAction} />
 
-<CollectionListBulkEditor
-	bind:open={bulkEditOpen}
-	selectedCount={selectedIDs.size}
-	fields={bulkEditableFields}
-	pending={bulkPending}
-	onApply={applyBulkEdit}
-/>
+<CollectionListBulkEditorLoader bind:open={bulkEditOpen} />