@questpie/admin 3.3.0 → 3.4.0

package/dist/client/views/collection/list-view.mjs

@@ -0,0 +1,830 @@
+"use client";
+
+import { useResolveText, useTranslation } from "../../i18n/hooks.mjs";
+import { cn } from "../../lib/utils.mjs";
+import { selectRealtime, useAdminStore } from "../../runtime/provider.mjs";
+import { useSafeContentLocales } from "../../runtime/content-locales-provider.mjs";
+import { useScopedLocale } from "../../runtime/locale-scope.mjs";
+import { flattenOptions } from "../../components/primitives/types.mjs";
+import { Button } from "../../components/ui/button.mjs";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../../components/ui/select.mjs";
+import { LocaleSwitcher } from "../../components/locale-switcher.mjs";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../../components/ui/tooltip.mjs";
+import { Checkbox } from "../../components/ui/checkbox.mjs";
+import { ActionButton } from "../../components/actions/action-button.mjs";
+import { useCollectionFields } from "../../hooks/use-collection-fields.mjs";
+import { useSuspenseCollectionMeta } from "../../hooks/use-collection-meta.mjs";
+import { ActionDialog } from "../../components/actions/action-dialog.mjs";
+import { EmptyState } from "../../components/ui/empty-state.mjs";
+import { useSidebarSearchParam } from "../../hooks/use-sidebar-search-param.mjs";
+import { useQuestpieQueryOptions } from "../../hooks/use-questpie-query-options.mjs";
+import { useCollectionDelete, useCollectionList, useCollectionRestore } from "../../hooks/use-collection.mjs";
+import { useSessionState } from "../../hooks/use-current-user.mjs";
+import { getLockUser, useLocks } from "../../hooks/use-locks.mjs";
+import { mergeServerActions, useServerActions } from "../../hooks/use-server-actions.mjs";
+import { AdminViewHeader, AdminViewLayout } from "../layout/admin-view-layout.mjs";
+import { TableViewSkeleton } from "./view-skeletons.mjs";
+import { useUploadCollection } from "../../hooks/use-upload-collection.mjs";
+import { useDebouncedValue, useSearch } from "../../hooks/use-search.mjs";
+import { autoExpandFields, hasFieldsToExpand } from "../../utils/auto-expand-fields.mjs";
+import { computeDefaultColumns, getAllAvailableFields } from "./columns/column-defaults.mjs";
+import { buildColumns } from "./columns/build-columns.mjs";
+import { HeaderActions } from "../../components/actions/header-actions.mjs";
+import { FilterBuilderSheet } from "../../components/filter-builder/filter-builder-sheet.mjs";
+import { SearchInput } from "../../components/ui/search-input.mjs";
+import { useActions } from "../../hooks/use-action.mjs";
+import { useRealtimeHighlight } from "../../hooks/use-realtime-highlight.mjs";
+import { useDeleteSavedView, useSaveView, useSavedViews } from "../../hooks/use-saved-views.mjs";
+import { useViewState } from "../../hooks/use-view-state.mjs";
+import { BulkActionToolbar } from "./bulk-action-toolbar.mjs";
+import { buildOutlineRows } from "./outline.mjs";
+import { UploadCollectionButton, mapListSchemaToConfig, stringifyGroupValue } from "./table-view.mjs";
+import { Icon } from "@iconify/react";
+import * as React from "react";
+import { useQueries } from "@tanstack/react-query";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table";
+
+//#region src/client/views/collection/list-view.tsx
+function normalizeFieldList(value) {
+	return Array.isArray(value) ? value.filter((item) => typeof item === "string") : [];
+}
+function getColumnKey(column) {
+	return column.accessorKey ?? column.id;
+}
+function getValueAtPath(source, path) {
+	if (!path) return source;
+	let current = source;
+	for (const part of path.split(".").filter(Boolean)) {
+		if (!current || typeof current !== "object") return void 0;
+		current = current[part];
+	}
+	return current;
+}
+function extractRelationNamesFromOutline(outline) {
+	const names = /* @__PURE__ */ new Set();
+	for (const level of outline?.levels ?? []) if (level.kind === "relation-field") names.add(level.relation);
+	return [...names];
+}
+function extractEdgeLevels(outline) {
+	return (outline?.levels ?? []).filter((level) => level.kind === "edge");
+}
+function buildFilterWhere({ filters, resolvedFields, relationNames }) {
+	if (filters.length === 0) return void 0;
+	const whereConditions = {};
+	const isEmptyValue = (val) => {
+		if (val === void 0 || val === null) return true;
+		if (typeof val === "string") return val.trim().length === 0;
+		if (Array.isArray(val)) return val.length === 0;
+		return false;
+	};
+	const normalizeSelectValue = (val, fieldOptions) => {
+		const optionsList = fieldOptions?.options;
+		if (!optionsList) return val;
+		const map = new Map(flattenOptions(optionsList).map((opt) => [String(opt.value), opt.value]));
+		const mapValue = (item) => map.get(String(item)) ?? item;
+		if (Array.isArray(val)) return val.map(mapValue);
+		if (val === void 0 || val === null) return val;
+		return mapValue(val);
+	};
+	const coerceValue = (val, fieldDef) => {
+		if (!fieldDef) return val;
+		const fieldType = fieldDef?.name ?? "text";
+		const fieldOptions = fieldDef?.["~options"] ?? {};
+		if (fieldType === "number" && typeof val === "string") {
+			const parsed = Number(val);
+			return Number.isNaN(parsed) ? val : parsed;
+		}
+		if ((fieldType === "checkbox" || fieldType === "switch") && typeof val === "string") {
+			if (val === "true") return true;
+			if (val === "false") return false;
+		}
+		if (fieldType === "select") return normalizeSelectValue(val, fieldOptions);
+		return val;
+	};
+	const toArray = (val) => {
+		if (Array.isArray(val)) return val;
+		if (val === void 0 || val === null || val === "") return [];
+		return [val];
+	};
+	const buildRelationCondition = (operator, val, relationType) => {
+		const isMultiple = relationType === "multiple";
+		const ids = toArray(val);
+		switch (operator) {
+			case "equals": return isMultiple ? { some: { id: val } } : { is: { id: val } };
+			case "not_equals": return isMultiple ? { none: { id: val } } : { isNot: { id: val } };
+			case "in": return isMultiple ? { some: { id: { in: ids } } } : { is: { id: { in: ids } } };
+			case "not_in": return isMultiple ? { none: { id: { in: ids } } } : { isNot: { id: { in: ids } } };
+			case "some": return { some: { id: { in: ids } } };
+			case "every": return { every: { id: { in: ids } } };
+			case "none": return { none: { id: { in: ids } } };
+			case "is_empty": return isMultiple ? { none: {} } : { isNot: {} };
+			case "is_not_empty": return isMultiple ? { some: {} } : { is: {} };
+			default: return;
+		}
+	};
+	for (const filter of filters) {
+		const { field, operator, value } = filter;
+		if (!field || field === "_title") continue;
+		const fieldDef = resolvedFields?.[field];
+		const fieldType = fieldDef?.name ?? "text";
+		const fieldOptions = fieldDef?.["~options"] ?? {};
+		const relationName = fieldType === "relation" ? fieldOptions.relationName ?? field : void 0;
+		const hasRelation = relationName && (relationNames.length === 0 || relationNames.includes(relationName));
+		const isRelationField = fieldType === "relation" && !!hasRelation;
+		if (operator !== "is_empty" && operator !== "is_not_empty" && isEmptyValue(value)) continue;
+		const normalizedValue = coerceValue(value, fieldDef);
+		if (isRelationField && relationName) {
+			const condition = buildRelationCondition(operator, normalizedValue, fieldOptions.type === "multiple" ? "multiple" : "single");
+			if (condition) whereConditions[relationName] = condition;
+			continue;
+		}
+		switch (operator) {
+			case "equals":
+				whereConditions[field] = normalizedValue;
+				break;
+			case "not_equals":
+				whereConditions[field] = { ne: normalizedValue };
+				break;
+			case "contains":
+				whereConditions[field] = { contains: normalizedValue };
+				break;
+			case "not_contains":
+				whereConditions[field] = { notIlike: `%${normalizedValue}%` };
+				break;
+			case "starts_with":
+				whereConditions[field] = { startsWith: normalizedValue };
+				break;
+			case "ends_with":
+				whereConditions[field] = { endsWith: normalizedValue };
+				break;
+			case "greater_than":
+				whereConditions[field] = { gt: normalizedValue };
+				break;
+			case "less_than":
+				whereConditions[field] = { lt: normalizedValue };
+				break;
+			case "greater_than_or_equal":
+				whereConditions[field] = { gte: normalizedValue };
+				break;
+			case "less_than_or_equal":
+				whereConditions[field] = { lte: normalizedValue };
+				break;
+			case "in":
+				whereConditions[field] = { in: Array.isArray(normalizedValue) ? normalizedValue : [normalizedValue] };
+				break;
+			case "not_in":
+				whereConditions[field] = { notIn: Array.isArray(normalizedValue) ? normalizedValue : [normalizedValue] };
+				break;
+			case "is_empty":
+				whereConditions[field] = { isNull: true };
+				break;
+			case "is_not_empty":
+				whereConditions[field] = { isNotNull: true };
+				break;
+		}
+	}
+	return Object.keys(whereConditions).length ? whereConditions : void 0;
+}
+function SimpleValue({ value }) {
+	if (value === null || value === void 0 || value === "") return /* @__PURE__ */ jsx("span", {
+		className: "text-muted-foreground",
+		children: "-"
+	});
+	if (Array.isArray(value)) return /* @__PURE__ */ jsx(Fragment, { children: value.map((item) => stringifySimpleValue(item)).join(", ") });
+	return /* @__PURE__ */ jsx(Fragment, { children: stringifySimpleValue(value) });
+}
+function stringifySimpleValue(value) {
+	if (value === null || value === void 0 || value === "") return "-";
+	if (typeof value === "object") {
+		const record = value;
+		return String(record.title ?? record.name ?? record.label ?? record.id ?? "-");
+	}
+	return String(value);
+}
+function ListViewInner({ collection, config, viewConfig, navigate, basePath = "/admin", showSearch = true, showFilters = true, showToolbar = true, realtime, headerActions, actionsConfig }) {
+	"use no memo";
+	const globalRealtimeConfig = useAdminStore(selectRealtime);
+	const { fields: resolvedFields, schema } = useCollectionFields(collection, { fallbackFields: config?.fields });
+	const { collections: uploadCollections } = useUploadCollection();
+	const schemaListConfig = mapListSchemaToConfig(schema?.admin?.list);
+	const resolvedListConfig = viewConfig ?? (config?.list)?.["~config"] ?? config?.list ?? schemaListConfig;
+	const resolvedRealtime = realtime ?? resolvedListConfig?.realtime ?? globalRealtimeConfig.enabled;
+	const { user } = useSessionState();
+	const { data: collectionMeta } = useSuspenseCollectionMeta(collection);
+	const { t, locale: uiLocale } = useTranslation();
+	const resolveText = useResolveText();
+	const { locale: contentLocale, setLocale: setContentLocale } = useScopedLocale();
+	const localeOptions = useSafeContentLocales()?.locales ?? [];
+	const { queryOpts, locale } = useQuestpieQueryOptions();
+	const rawActionsConfig = actionsConfig ?? resolvedListConfig?.actions;
+	const { serverActions } = useServerActions({ collection });
+	const { helpers: actionHelpers, actions, dialogAction, dialogItem, openDialog, closeDialog } = useActions({
+		collection,
+		actionsConfig: React.useMemo(() => mergeServerActions(rawActionsConfig ?? {}, serverActions), [rawActionsConfig, serverActions])
+	});
+	const canUploadToCollection = uploadCollections.includes(collection) && schema?.access?.operations?.create?.allowed === true;
+	const columns = React.useMemo(() => buildColumns({
+		config: {
+			fields: resolvedFields,
+			list: resolvedListConfig
+		},
+		fallbackColumns: ["id"],
+		buildAllColumns: true,
+		meta: collectionMeta
+	}), [
+		resolvedFields,
+		resolvedListConfig,
+		collectionMeta
+	]);
+	const columnsByKey = React.useMemo(() => {
+		const map = /* @__PURE__ */ new Map();
+		for (const column of columns) {
+			const key = getColumnKey(column);
+			if (key) map.set(key, column);
+		}
+		return map;
+	}, [columns]);
+	const [isSheetOpen, setIsSheetOpen] = useSidebarSearchParam("view-options", { legacyKey: "viewOptions" });
+	const [searchTerm, setSearchTerm] = React.useState("");
+	const [isSearchPanelOpen, setIsSearchPanelOpen] = React.useState(false);
+	const [collapsedOutlineKeys, setCollapsedOutlineKeys] = React.useState(() => /* @__PURE__ */ new Set());
+	const [rowSelection, setRowSelection] = React.useState({});
+	const defaultColumns = React.useMemo(() => computeDefaultColumns(resolvedFields, {
+		meta: collectionMeta,
+		configuredColumns: resolvedListConfig?.columns
+	}), [
+		resolvedFields,
+		resolvedListConfig?.columns,
+		collectionMeta
+	]);
+	const groupingConfig = resolvedListConfig?.grouping;
+	const defaultGroupBy = groupingConfig?.defaultField ?? null;
+	const viewState = useViewState(defaultColumns, {
+		realtime: resolvedRealtime,
+		groupBy: defaultGroupBy
+	}, collection, user?.id);
+	const effectiveRealtime = viewState.config.realtime ?? resolvedRealtime;
+	const visibleColumns = viewState.config.visibleColumns.length > 0 ? viewState.config.visibleColumns : defaultColumns;
+	const outlineRelationNames = React.useMemo(() => extractRelationNamesFromOutline(resolvedListConfig?.outline), [resolvedListConfig?.outline]);
+	const visibleColumnsForExpansion = React.useMemo(() => Array.from(new Set([...visibleColumns, ...outlineRelationNames])), [visibleColumns, outlineRelationNames]);
+	const expandedFields = React.useMemo(() => autoExpandFields({
+		fields: resolvedFields,
+		list: resolvedListConfig,
+		visibleColumns: visibleColumnsForExpansion,
+		relations: collectionMeta?.relations
+	}), [
+		resolvedFields,
+		resolvedListConfig,
+		visibleColumnsForExpansion,
+		collectionMeta?.relations
+	]);
+	const isKnownSortField = React.useCallback((field) => !!field && (field === "_title" || !!resolvedFields?.[field]), [resolvedFields]);
+	const effectiveSort = React.useMemo(() => {
+		if (isKnownSortField(viewState.config.sortConfig?.field)) return viewState.config.sortConfig;
+		if (isKnownSortField(resolvedListConfig?.defaultSort?.field)) return resolvedListConfig.defaultSort;
+		return {
+			field: "createdAt",
+			direction: "desc"
+		};
+	}, [
+		viewState.config.sortConfig,
+		resolvedListConfig?.defaultSort,
+		isKnownSortField
+	]);
+	const queryOptions = React.useMemo(() => {
+		const options = {};
+		if (collectionMeta?.softDelete) options.includeDeleted = !!viewState.config.includeDeleted;
+		if (hasFieldsToExpand(expandedFields)) options.with = expandedFields;
+		const where = buildFilterWhere({
+			filters: viewState.config.filters,
+			resolvedFields,
+			relationNames: collectionMeta?.relations ?? []
+		});
+		if (where) options.where = where;
+		const groupBy = viewState.config.groupBy;
+		const sortConfig = effectiveSort;
+		if (groupBy && sortConfig?.field && sortConfig.field !== groupBy) options.orderBy = [{ [groupBy]: "asc" }, { [sortConfig.field]: sortConfig.direction }];
+		else if (groupBy) options.orderBy = { [groupBy]: sortConfig?.direction ?? "asc" };
+		else if (sortConfig) options.orderBy = { [sortConfig.field]: sortConfig.direction };
+		const pageSize = viewState.config.pagination?.pageSize ?? 25;
+		const page = viewState.config.pagination?.page ?? 1;
+		options.limit = pageSize;
+		options.offset = (page - 1) * pageSize;
+		return options;
+	}, [
+		collectionMeta?.softDelete,
+		collectionMeta?.relations,
+		viewState.config.includeDeleted,
+		viewState.config.filters,
+		viewState.config.groupBy,
+		viewState.config.pagination?.page,
+		viewState.config.pagination?.pageSize,
+		expandedFields,
+		effectiveSort,
+		resolvedFields
+	]);
+	const debouncedSearchTerm = useDebouncedValue(searchTerm, 300);
+	const isSearching = debouncedSearchTerm.trim().length > 0;
+	const { data: searchData, isLoading: searchLoading, isFetching: searchFetching } = useSearch({
+		collection,
+		query: debouncedSearchTerm,
+		limit: 100,
+		highlights: true
+	}, { enabled: isSearching });
+	const { data: listData, isLoading: listLoading, error: listError } = useCollectionList(collection, queryOptions, { enabled: !isSearching }, { realtime: effectiveRealtime });
+	const items = React.useMemo(() => isSearching ? searchData?.docs ?? [] : listData?.docs ?? [], [
+		isSearching,
+		searchData?.docs,
+		listData?.docs
+	]);
+	const isLoading = isSearching ? searchLoading : listLoading;
+	const isSearchActive = isSearching && searchFetching;
+	const { isHighlighted } = useRealtimeHighlight(items, { enabled: effectiveRealtime && !isSearching });
+	const { getLock, isLocked: isDocLocked } = useLocks({
+		resourceType: "collection",
+		resource: collection,
+		realtime: effectiveRealtime
+	});
+	const edgeLevels = React.useMemo(() => extractEdgeLevels(resolvedListConfig?.outline), [resolvedListConfig?.outline]);
+	const edgeQueries = useQueries({ queries: edgeLevels.map((level) => {
+		const collectionQueries = queryOpts.collections?.[level.collection];
+		if (!collectionQueries?.find) return {
+			queryKey: [
+				"questpie",
+				"outline-edge-missing",
+				level.collection
+			],
+			queryFn: async () => ({ docs: [] }),
+			enabled: false
+		};
+		return collectionQueries.find({
+			where: level.where,
+			with: {
+				[level.parentField]: true,
+				[level.childField]: true
+			},
+			limit: 1e3,
+			locale
+		});
+	}) });
+	const edgesByCollection = React.useMemo(() => {
+		const map = {};
+		edgeLevels.forEach((level, index) => {
+			const docs = (edgeQueries[index]?.data)?.docs ?? [];
+			map[level.collection] = [...map[level.collection] ?? [], ...docs];
+		});
+		return map;
+	}, [edgeLevels, edgeQueries]);
+	const effectiveOutline = React.useMemo(() => {
+		const outline = resolvedListConfig?.outline;
+		const groupBy = viewState.config.groupBy;
+		if (!groupBy) return outline;
+		const levels = outline?.levels ?? [];
+		const first = levels[0];
+		if (first?.kind === "field" && first.field === groupBy) return outline;
+		return {
+			...outline,
+			defaultExpanded: outline?.defaultExpanded ?? true,
+			levels: [{
+				kind: "field",
+				field: groupBy
+			}, ...levels]
+		};
+	}, [resolvedListConfig?.outline, viewState.config.groupBy]);
+	const availableFields = React.useMemo(() => getAllAvailableFields(resolvedFields, { meta: collectionMeta }), [resolvedFields, collectionMeta]);
+	const fieldByName = React.useMemo(() => new Map(availableFields.map((field) => [field.name, field])), [availableFields]);
+	const outlineRows = React.useMemo(() => buildOutlineRows({
+		docs: items,
+		outline: effectiveOutline,
+		edgesByCollection,
+		collapsedKeys: collapsedOutlineKeys,
+		labelForValue: (value, field) => stringifyGroupValue(value, field ? fieldByName.get(field) : void 0, resolveText, t, uiLocale, t("common.noValue"))
+	}), [
+		items,
+		effectiveOutline,
+		edgesByCollection,
+		collapsedOutlineKeys,
+		fieldByName,
+		resolveText,
+		t,
+		uiLocale
+	]);
+	const table = useReactTable({
+		data: items,
+		columns,
+		getCoreRowModel: getCoreRowModel(),
+		enableRowSelection: true,
+		onRowSelectionChange: setRowSelection,
+		getRowId: (row) => String(row.id),
+		state: { rowSelection }
+	});
+	const rowsById = React.useMemo(() => new Map(table.getRowModel().rows.map((row) => [String(row.id), row])), [table, items]);
+	const deleteMutation = useCollectionDelete(collection);
+	const restoreMutation = useCollectionRestore(collection);
+	const { data: savedViewsData, isLoading: savedViewsLoading } = useSavedViews(collection, user?.id);
+	const saveViewMutation = useSaveView(collection, user?.id);
+	const deleteViewMutation = useDeleteSavedView(collection, user?.id);
+	const hasActiveFilters = viewState.config.filters.length > 0;
+	const hasViewOptionsState = hasActiveFilters || !!viewState.config.groupBy || viewState.config.visibleColumns.length !== defaultColumns.length || !!viewState.config.includeDeleted;
+	const groupableFields = React.useMemo(() => {
+		const groupableNames = groupingConfig?.fields ?? [];
+		if (groupableNames.length === 0) return [];
+		const groupableSet = new Set(groupableNames);
+		return availableFields.filter((field) => groupableSet.has(field.name));
+	}, [availableFields, groupingConfig?.fields]);
+	const layout = resolvedListConfig?.layout;
+	const titleField = layout?.titleField ?? (collectionMeta?.title?.type === "field" ? collectionMeta.title.fieldName : void 0);
+	const subtitleField = layout?.subtitleField;
+	const leadingFields = normalizeFieldList(layout?.leadingFields);
+	const badgeFields = normalizeFieldList(layout?.badgeFields);
+	const metaFields = normalizeFieldList(layout?.metaFields);
+	const density = layout?.density ?? "compact";
+	const clearFilters = React.useCallback(() => {
+		viewState.setConfig({
+			...viewState.config,
+			filters: []
+		});
+	}, [viewState]);
+	const handleSaveView = React.useCallback((name, configuration) => {
+		saveViewMutation.mutate({
+			name,
+			configuration
+		});
+	}, [saveViewMutation]);
+	const handleBulkDelete = React.useCallback(async (ids) => {
+		await Promise.allSettled(ids.map((id) => deleteMutation.mutateAsync({ id })));
+		actionHelpers.invalidateCollection(collection);
+	}, [
+		deleteMutation,
+		actionHelpers,
+		collection
+	]);
+	const handleBulkRestore = React.useCallback(async (ids) => {
+		await Promise.allSettled(ids.map((id) => restoreMutation.mutateAsync({ id })));
+		actionHelpers.invalidateCollection(collection);
+	}, [
+		restoreMutation,
+		actionHelpers,
+		collection
+	]);
+	const toggleOutlineKey = React.useCallback((key) => {
+		setCollapsedOutlineKeys((current) => {
+			const next = new Set(current);
+			if (next.has(key)) next.delete(key);
+			else next.add(key);
+			return next;
+		});
+	}, []);
+	const renderField = React.useCallback((row, field, fallback) => {
+		const column = columnsByKey.get(field);
+		const cell = row?.getAllCells?.().find((candidate) => {
+			return getColumnKey(candidate.column.columnDef) === field || candidate.column.id === field;
+		});
+		if (cell && column) return flexRender(cell.column.columnDef.cell, cell.getContext());
+		return /* @__PURE__ */ jsx(SimpleValue, { value: fallback ?? getValueAtPath(row?.original, field) });
+	}, [columnsByKey]);
+	const handleRowClick = React.useCallback((item) => navigate(`${basePath}/collections/${collection}/${item.id}`), [
+		navigate,
+		basePath,
+		collection
+	]);
+	if (listError && !isSearching) {
+		const errorMessage = listError instanceof Error ? listError.message : void 0;
+		return /* @__PURE__ */ jsx("div", {
+			className: "container",
+			children: /* @__PURE__ */ jsx(EmptyState, {
+				variant: "error",
+				iconName: "ph:warning-circle",
+				title: t("error.failedToLoad"),
+				description: errorMessage,
+				height: "h-64",
+				action: /* @__PURE__ */ jsxs(Button, {
+					variant: "outline",
+					size: "sm",
+					className: "gap-2",
+					onClick: () => window.location.reload(),
+					children: [/* @__PURE__ */ jsx(Icon, {
+						icon: "ph:arrow-clockwise",
+						className: "size-3.5"
+					}), t("common.retry")]
+				})
+			})
+		});
+	}
+	if (isLoading) return /* @__PURE__ */ jsx(TableViewSkeleton, {});
+	const emptyStateTitle = isSearching || hasActiveFilters ? t("collectionSearch.noResults") : t("table.noItemsInCollection");
+	const emptyStateDescription = isSearching ? t("collectionSearch.noResultsDescription") : hasActiveFilters ? t("viewOptions.noResultsDescription") : t("table.emptyDescription");
+	return /* @__PURE__ */ jsx(AdminViewLayout, {
+		header: /* @__PURE__ */ jsx(AdminViewHeader, {
+			title: resolveText(config?.label ?? schema?.admin?.config?.label, collection),
+			titleAccessory: localeOptions.length > 0 ? /* @__PURE__ */ jsx(LocaleSwitcher, {
+				locales: localeOptions,
+				value: contentLocale,
+				onChange: setContentLocale
+			}) : void 0,
+			description: resolveText(config?.description ?? schema?.admin?.config?.description),
+			actions: /* @__PURE__ */ jsxs(Fragment, { children: [
+				showSearch && /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsxs(Button, {
+					variant: "outline",
+					size: "icon-sm",
+					className: "relative",
+					onClick: () => setIsSearchPanelOpen((open) => !open),
+					"aria-label": t("common.search"),
+					children: [/* @__PURE__ */ jsx(Icon, { icon: "ph:magnifying-glass" }), searchTerm && /* @__PURE__ */ jsx("span", { className: "bg-foreground absolute top-1 right-1 size-1.5 rounded-full" })]
+				}) }), /* @__PURE__ */ jsx(TooltipContent, {
+					side: "bottom",
+					align: "end",
+					children: t("common.search")
+				})] }),
+				showFilters && /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsxs(Button, {
+					variant: "outline",
+					size: "icon-sm",
+					className: cn("relative", hasViewOptionsState && "border-foreground"),
+					onClick: () => setIsSheetOpen(true),
+					"aria-label": t("viewOptions.title"),
+					children: [/* @__PURE__ */ jsx(Icon, { icon: "ph:sliders-horizontal" }), hasViewOptionsState && /* @__PURE__ */ jsx("span", { className: "bg-foreground absolute top-1 right-1 size-1.5 rounded-full" })]
+				}) }), /* @__PURE__ */ jsx(TooltipContent, {
+					side: "bottom",
+					align: "end",
+					children: t("viewOptions.title")
+				})] }),
+				/* @__PURE__ */ jsxs(Select, {
+					value: effectiveSort?.field ?? "",
+					onValueChange: (field) => viewState.setSort(field ? {
+						field,
+						direction: effectiveSort?.direction ?? "asc"
+					} : null),
+					children: [/* @__PURE__ */ jsx(SelectTrigger, {
+						className: "h-8 w-40",
+						children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Sort" })
+					}), /* @__PURE__ */ jsx(SelectContent, { children: availableFields.map((field) => /* @__PURE__ */ jsx(SelectItem, {
+						value: field.name,
+						children: resolveText(field.label, field.name)
+					}, field.name)) })]
+				}),
+				/* @__PURE__ */ jsx(Button, {
+					variant: "outline",
+					size: "icon-sm",
+					"aria-label": "Toggle sort direction",
+					onClick: () => viewState.setSort({
+						field: effectiveSort?.field ?? "createdAt",
+						direction: effectiveSort?.direction === "asc" ? "desc" : "asc"
+					}),
+					children: /* @__PURE__ */ jsx(Icon, { icon: effectiveSort?.direction === "asc" ? "ph:sort-ascending" : "ph:sort-descending" })
+				}),
+				canUploadToCollection && showToolbar && /* @__PURE__ */ jsx(UploadCollectionButton, {
+					collection,
+					onUploaded: () => actionHelpers.invalidateCollection(collection)
+				}),
+				/* @__PURE__ */ jsx(HeaderActions, {
+					actions: actions.header,
+					collection,
+					helpers: actionHelpers,
+					onOpenDialog: (action) => openDialog(action)
+				}),
+				headerActions
+			] })
+		}),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "space-y-3",
+			children: [
+				showSearch && isSearchPanelOpen && /* @__PURE__ */ jsx("div", {
+					className: "border-border-subtle bg-muted/20 rounded-md border p-3",
+					children: /* @__PURE__ */ jsx(SearchInput, {
+						value: searchTerm,
+						onChange: (event) => setSearchTerm(event.target.value),
+						onClear: () => setSearchTerm(""),
+						placeholder: t("collectionSearch.placeholder"),
+						autoFocus: true,
+						isLoading: isSearchActive
+					})
+				}),
+				outlineRows.length === 0 ? /* @__PURE__ */ jsx(EmptyState, {
+					title: emptyStateTitle,
+					description: emptyStateDescription,
+					height: "h-64",
+					action: isSearching || hasActiveFilters ? /* @__PURE__ */ jsxs("div", {
+						className: "flex gap-2",
+						children: [isSearching && /* @__PURE__ */ jsxs(Button, {
+							variant: "outline",
+							size: "sm",
+							className: "gap-2",
+							onClick: () => setSearchTerm(""),
+							children: [/* @__PURE__ */ jsx(Icon, {
+								icon: "ph:x",
+								className: "size-3.5"
+							}), t("common.clear")]
+						}), hasActiveFilters && /* @__PURE__ */ jsxs(Button, {
+							variant: "outline",
+							size: "sm",
+							className: "gap-2",
+							onClick: clearFilters,
+							children: [/* @__PURE__ */ jsx(Icon, {
+								icon: "ph:funnel-x",
+								className: "size-3.5"
+							}), t("viewOptions.clearFilters")]
+						})]
+					}) : void 0
+				}) : /* @__PURE__ */ jsx("div", {
+					className: "border-border-subtle overflow-hidden rounded-md border",
+					children: outlineRows.map((outlineRow) => {
+						if (outlineRow.kind !== "record") return /* @__PURE__ */ jsx(OutlineHeaderRow, {
+							row: outlineRow,
+							showCounts: resolvedListConfig?.outline?.showCounts ?? true,
+							onToggle: toggleOutlineKey
+						}, outlineRow.key);
+						const tableRow = rowsById.get(outlineRow.id);
+						if (!tableRow) return null;
+						const item = tableRow.original;
+						const lock = getLock(item.id);
+						const locked = isDocLocked(item.id);
+						const lockUser = lock ? getLockUser(lock) : null;
+						const isSelected = tableRow.getIsSelected();
+						const titleValue = (titleField ? getValueAtPath(item, titleField) : item._title) ?? item.title ?? item.name ?? item.id;
+						const subtitleValue = subtitleField ? getValueAtPath(item, subtitleField) : void 0;
+						return /* @__PURE__ */ jsxs("div", {
+							className: cn("group/list-row border-border-subtle hover:bg-muted/35 flex min-w-0 items-start gap-2 border-b px-3 text-sm transition-colors last:border-b-0", density === "compact" ? "py-2" : "py-3", isHighlighted(item.id) && "bg-info/10", isSelected && "bg-muted/50"),
+							style: { paddingLeft: `${12 + outlineRow.depth * 18}px` },
+							children: [
+								/* @__PURE__ */ jsx("div", {
+									role: "presentation",
+									className: "mt-0.5 shrink-0",
+									onClick: (event) => event.stopPropagation(),
+									onKeyDown: (event) => event.stopPropagation(),
+									children: /* @__PURE__ */ jsx(Checkbox, {
+										checked: isSelected,
+										disabled: !tableRow.getCanSelect(),
+										onCheckedChange: (checked) => tableRow.toggleSelected(!!checked),
+										"aria-label": "Select row"
+									})
+								}),
+								/* @__PURE__ */ jsx("button", {
+									type: "button",
+									className: cn("text-muted-foreground mt-0.5 flex size-5 shrink-0 items-center justify-center rounded transition-colors", outlineRow.expandable && "hover:bg-muted hover:text-foreground"),
+									disabled: !outlineRow.expandable,
+									onClick: (event) => {
+										event.stopPropagation();
+										if (outlineRow.expandable) toggleOutlineKey(outlineRow.key);
+									},
+									"aria-label": outlineRow.collapsed ? "Expand row" : "Collapse row",
+									children: outlineRow.expandable ? /* @__PURE__ */ jsx(Icon, {
+										icon: "ph:caret-right-bold",
+										className: cn("size-3 transition-transform", !outlineRow.collapsed && "rotate-90")
+									}) : null
+								}),
+								/* @__PURE__ */ jsxs("button", {
+									type: "button",
+									className: "min-w-0 flex-1 text-left",
+									onClick: () => handleRowClick(item),
+									children: [/* @__PURE__ */ jsxs("div", {
+										className: "flex min-w-0 items-center gap-2",
+										children: [
+											leadingFields.map((field) => /* @__PURE__ */ jsx("span", {
+												className: "shrink-0",
+												children: renderField(tableRow, field, getValueAtPath(item, field))
+											}, field)),
+											/* @__PURE__ */ jsx("span", {
+												className: "text-foreground truncate font-medium",
+												children: titleField ? renderField(tableRow, titleField, titleValue) : stringifySimpleValue(titleValue)
+											}),
+											badgeFields.map((field) => /* @__PURE__ */ jsx("span", {
+												className: "bg-muted text-muted-foreground inline-flex h-5 max-w-36 shrink-0 items-center rounded px-1.5 font-mono text-[11px]",
+												children: /* @__PURE__ */ jsx("span", {
+													className: "truncate",
+													children: renderField(tableRow, field, getValueAtPath(item, field))
+												})
+											}, field)),
+											locked && /* @__PURE__ */ jsxs("span", {
+												className: "text-warning inline-flex items-center gap-1 text-xs",
+												children: [/* @__PURE__ */ jsx(Icon, {
+													icon: "ph:lock-key",
+													className: "size-3"
+												}), lockUser?.name ?? t("collection.locked")]
+											})
+										]
+									}), subtitleValue !== void 0 && /* @__PURE__ */ jsx("div", {
+										className: "text-muted-foreground mt-0.5 truncate text-xs",
+										children: renderField(tableRow, subtitleField, subtitleValue)
+									})]
+								}),
+								metaFields.length > 0 && /* @__PURE__ */ jsx("div", {
+									className: "text-muted-foreground hidden max-w-[42%] shrink-0 items-center justify-end gap-3 overflow-hidden text-right text-xs md:flex",
+									children: metaFields.map((field) => /* @__PURE__ */ jsx("span", {
+										className: "min-w-0 truncate",
+										children: renderField(tableRow, field, getValueAtPath(item, field))
+									}, field))
+								}),
+								actions.row.length > 0 && /* @__PURE__ */ jsx("div", {
+									role: "presentation",
+									className: "flex shrink-0 justify-end gap-1 opacity-0 transition-opacity group-hover/list-row:opacity-100 focus-within:opacity-100",
+									onClick: (event) => event.stopPropagation(),
+									onKeyDown: (event) => event.stopPropagation(),
+									children: actions.row.map((action) => /* @__PURE__ */ jsx(ActionButton, {
+										action,
+										collection,
+										item,
+										helpers: actionHelpers,
+										size: "icon-sm",
+										iconOnly: true,
+										onOpenDialog: (dialogAction$1) => openDialog(dialogAction$1, item)
+									}, action.id))
+								})
+							]
+						}, outlineRow.key);
+					})
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "text-muted-foreground flex flex-col gap-2 text-xs sm:flex-row sm:items-center sm:justify-between",
+					children: [/* @__PURE__ */ jsx("span", { children: isSearching ? `${items.length} item${items.length === 1 ? "" : "s"}` : `${items.length > 0 ? ((viewState.config.pagination?.page ?? 1) - 1) * (viewState.config.pagination?.pageSize ?? 25) + 1 : 0}-${Math.min(((viewState.config.pagination?.page ?? 1) - 1) * (viewState.config.pagination?.pageSize ?? 25) + items.length, listData?.totalDocs ?? items.length)} ${t("table.of")} ${listData?.totalDocs ?? 0}` }), !isSearching && (listData?.totalPages ?? 1) > 1 && /* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-2",
+						children: [/* @__PURE__ */ jsx(Button, {
+							variant: "outline",
+							size: "sm",
+							disabled: (viewState.config.pagination?.page ?? 1) <= 1,
+							onClick: () => viewState.setPage(Math.max(1, (viewState.config.pagination?.page ?? 1) - 1)),
+							children: t("common.previous")
+						}), /* @__PURE__ */ jsx(Button, {
+							variant: "outline",
+							size: "sm",
+							disabled: (viewState.config.pagination?.page ?? 1) >= (listData?.totalPages ?? 1),
+							onClick: () => viewState.setPage((viewState.config.pagination?.page ?? 1) + 1),
+							children: t("common.next")
+						})]
+					})]
+				}),
+				/* @__PURE__ */ jsx(BulkActionToolbar, {
+					table,
+					actions: actions.bulk,
+					collection,
+					helpers: actionHelpers,
+					totalCount: isSearching ? items.length : listData?.totalDocs,
+					pageCount: items.length,
+					onOpenDialog: (action, selectedItems) => openDialog(action, selectedItems),
+					onBulkDelete: handleBulkDelete,
+					onBulkRestore: handleBulkRestore,
+					filterCount: viewState.config.filters.length,
+					onClearFilters: clearFilters,
+					onOpenFilters: () => setIsSheetOpen(true)
+				}),
+				/* @__PURE__ */ jsx(FilterBuilderSheet, {
+					collection,
+					availableFields,
+					currentConfig: viewState.config,
+					onConfigChange: viewState.setConfig,
+					isOpen: isSheetOpen,
+					onOpenChange: setIsSheetOpen,
+					defaultColumns,
+					savedViews: savedViewsData?.docs ?? [],
+					savedViewsLoading,
+					onSaveView: handleSaveView,
+					onDeleteView: (viewId) => deleteViewMutation.mutate(viewId),
+					supportsSoftDelete: !!collectionMeta?.softDelete,
+					groupableFields,
+					defaultGroupBy
+				}),
+				dialogAction && /* @__PURE__ */ jsx(ActionDialog, {
+					open: !!dialogAction,
+					onOpenChange: (open) => !open && closeDialog(),
+					action: dialogAction,
+					collection,
+					item: dialogItem,
+					helpers: actionHelpers
+				})
+			]
+		})
+	});
+}
+function OutlineHeaderRow({ row, showCounts, onToggle }) {
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		className: "bg-background/95 border-border-subtle sticky top-0 z-10 flex w-full items-center gap-2 border-b px-3 py-2 text-left backdrop-blur",
+		style: { paddingLeft: `${12 + row.depth * 18}px` },
+		onClick: () => onToggle(row.key),
+		"aria-expanded": !row.collapsed,
+		children: [
+			/* @__PURE__ */ jsx(Icon, {
+				icon: "ph:caret-right-bold",
+				className: cn("text-muted-foreground size-3 transition-transform", !row.collapsed && "rotate-90")
+			}),
+			row.kind === "synthetic" && /* @__PURE__ */ jsx(Icon, {
+				icon: "ph:folder-simple",
+				className: "text-muted-foreground size-4"
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "font-chrome chrome-meta text-muted-foreground truncate text-[11px] font-semibold tracking-[0.12em] uppercase",
+				children: row.label
+			}),
+			showCounts && /* @__PURE__ */ jsx("span", {
+				className: "font-chrome chrome-meta text-muted-foreground text-[11px] tabular-nums",
+				children: row.count
+			})
+		]
+	});
+}
+function ListView(props) {
+	return /* @__PURE__ */ jsx(ListViewInner, { ...props });
+}
+
+//#endregion
+export { ListView as default };