@questpie/admin 3.5.2 → 3.5.4

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

@@ -5,13 +5,16 @@ 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 { resolveIconElement } from "../../components/component-renderer.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 { Badge } from "../../components/ui/badge.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 { adminCollectionKey, getCollectionQueryApi } from "../../hooks/query-access.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";
@@ -26,18 +29,19 @@ import { AdminViewHeader, AdminViewLayout } from "../layout/admin-view-layout.mj
 import { TableViewSkeleton } from "./view-skeletons.mjs";
 import { useUploadCollection } from "../../hooks/use-upload-collection.mjs";
 import { useDebouncedValue, useSearch } from "../../hooks/use-search.mjs";
+import { SearchInput } from "../../components/ui/search-input.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 { QuickFilterBar } from "./quick-filter-bar.mjs";
 import { UploadCollectionButton, mapListSchemaToConfig, stringifyGroupValue } from "./table-view.mjs";
 import { Icon } from "@iconify/react";
 import * as React from "react";
@@ -194,16 +198,30 @@ function SimpleValue({ value }) {
 	if (Array.isArray(value)) return /* @__PURE__ */ jsx(Fragment, { children: value.map((item) => stringifySimpleValue(item)).join(", ") });
 	return /* @__PURE__ */ jsx(Fragment, { children: stringifySimpleValue(value) });
 }
+function formatShortDate(date) {
+	const now = /* @__PURE__ */ new Date();
+	const sameYear = date.getFullYear() === now.getFullYear();
+	const month = date.toLocaleDateString(void 0, { month: "short" });
+	const day = date.getDate();
+	return sameYear ? `${month} ${day}` : `${month} ${day}, ${date.getFullYear()}`;
+}
+const ISO_DATE_RE = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}/;
 function stringifySimpleValue(value) {
 	if (value === null || value === void 0 || value === "") return "-";
 	if (typeof value === "object") {
+		if (value instanceof Date && !Number.isNaN(value.getTime())) return formatShortDate(value);
 		const record = value;
 		return String(record.title ?? record.name ?? record.label ?? record.id ?? "-");
 	}
+	if (typeof value === "string" && ISO_DATE_RE.test(value)) {
+		const date = new Date(value);
+		if (!Number.isNaN(date.getTime())) return formatShortDate(date);
+	}
 	return String(value);
 }
 function ListViewInner({ collection, config, viewConfig, navigate, basePath = "/admin", showSearch = true, showFilters = true, showToolbar = true, realtime, headerActions, actionsConfig }) {
 	"use no memo";
+	const collectionKey = adminCollectionKey(collection);
 	const globalRealtimeConfig = useAdminStore(selectRealtime);
 	const { fields: resolvedFields, schema } = useCollectionFields(collection, { fallbackFields: config?.fields });
 	const { collections: uploadCollections } = useUploadCollection();
@@ -248,7 +266,7 @@ function ListViewInner({ collection, config, viewConfig, navigate, basePath = "/
 	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 [toggledOutlineKeys, setToggledOutlineKeys] = React.useState(() => /* @__PURE__ */ new Set());
 	const [rowSelection, setRowSelection] = React.useState({});
 	const defaultColumns = React.useMemo(() => computeDefaultColumns(resolvedFields, {
 		meta: collectionMeta,
@@ -260,14 +278,39 @@ function ListViewInner({ collection, config, viewConfig, navigate, basePath = "/
 	]);
 	const groupingConfig = resolvedListConfig?.grouping;
 	const defaultGroupBy = groupingConfig?.defaultField ?? null;
-	const viewState = useViewState(defaultColumns, {
+	const defaultFilters = React.useMemo(() => resolvedListConfig?.defaultFilters ?? [], [resolvedListConfig?.defaultFilters]);
+	const viewState = useViewState(defaultColumns, React.useMemo(() => ({
 		realtime: resolvedRealtime,
-		groupBy: defaultGroupBy
-	}, collection, user?.id);
+		groupBy: defaultGroupBy,
+		filters: defaultFilters
+	}), [
+		resolvedRealtime,
+		defaultGroupBy,
+		defaultFilters
+	]), collection, user?.id);
 	const effectiveRealtime = viewState.config.realtime ?? resolvedRealtime;
 	const visibleColumns = viewState.config.visibleColumns.length > 0 ? viewState.config.visibleColumns : defaultColumns;
+	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 outlineRelationNames = React.useMemo(() => extractRelationNamesFromOutline(resolvedListConfig?.outline), [resolvedListConfig?.outline]);
-	const visibleColumnsForExpansion = React.useMemo(() => Array.from(new Set([...visibleColumns, ...outlineRelationNames])), [visibleColumns, outlineRelationNames]);
+	const visibleColumnsForExpansion = React.useMemo(() => Array.from(new Set([
+		...visibleColumns,
+		...outlineRelationNames,
+		...metaFields,
+		...leadingFields,
+		...badgeFields
+	])), [
+		visibleColumns,
+		outlineRelationNames,
+		metaFields,
+		leadingFields,
+		badgeFields
+	]);
 	const expandedFields = React.useMemo(() => autoExpandFields({
 		fields: resolvedFields,
 		list: resolvedListConfig,
@@ -279,7 +322,7 @@ function ListViewInner({ collection, config, viewConfig, navigate, basePath = "/
 		visibleColumnsForExpansion,
 		collectionMeta?.relations
 	]);
-	const isKnownSortField = React.useCallback((field) => !!field && (field === "_title" || !!resolvedFields?.[field]), [resolvedFields]);
+	const isKnownSortField = React.useCallback((field) => !!field && (field === "_title" || field === "createdAt" || field === "updatedAt" || !!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;
@@ -292,7 +335,79 @@ function ListViewInner({ collection, config, viewConfig, navigate, basePath = "/
 		resolvedListConfig?.defaultSort,
 		isKnownSortField
 	]);
-	const queryOptions = React.useMemo(() => {
+	const availableFields = React.useMemo(() => getAllAvailableFields(resolvedFields, { meta: collectionMeta }), [resolvedFields, collectionMeta]);
+	const fieldByName = React.useMemo(() => new Map(availableFields.map((field) => [field.name, field])), [availableFields]);
+	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 hasOutline = (resolvedListConfig?.outline?.levels?.length ?? 0) > 0;
+	const firstFieldLevel = React.useMemo(() => {
+		const first = effectiveOutline?.levels?.[0];
+		return first?.kind === "field" ? first : null;
+	}, [effectiveOutline]);
+	const groupValues = React.useMemo(() => {
+		if (!firstFieldLevel) return null;
+		const fieldDef = fieldByName.get(firstFieldLevel.field);
+		if (fieldDef?.type !== "select" || !fieldDef.options?.options) return null;
+		const flat = flattenOptions(fieldDef.options.options);
+		const order = firstFieldLevel.order;
+		if (Array.isArray(order)) return order.map((v) => flat.find((o) => String(o.value) === String(v)) ?? {
+			value: v,
+			label: { en: String(v) }
+		});
+		return flat;
+	}, [firstFieldLevel, fieldByName]);
+	const filteredGroupValues = React.useMemo(() => {
+		if (!groupValues || !firstFieldLevel) return groupValues;
+		const groupField = firstFieldLevel.field;
+		const relevant = viewState.config.filters.filter((f) => f.field === groupField);
+		if (relevant.length === 0) return groupValues;
+		return groupValues.filter((gv) => {
+			const val = String(gv.value);
+			for (const filter of relevant) switch (filter.operator) {
+				case "equals":
+					if (String(filter.value) !== val) return false;
+					break;
+				case "not_equals":
+					if (String(filter.value) === val) return false;
+					break;
+				case "in":
+					if (!Array.isArray(filter.value) || !filter.value.map(String).includes(val)) return false;
+					break;
+				case "not_in":
+					if (Array.isArray(filter.value) && filter.value.map(String).includes(val)) return false;
+					break;
+			}
+			return true;
+		});
+	}, [
+		groupValues,
+		firstFieldLevel,
+		viewState.config.filters
+	]);
+	const isGrouped = filteredGroupValues != null && filteredGroupValues.length > 0;
+	const [groupLimits, setGroupLimits] = React.useState({});
+	const DEFAULT_GROUP_LIMIT = 20;
+	const loadMoreInGroup = React.useCallback((groupKey) => {
+		setGroupLimits((prev) => ({
+			...prev,
+			[groupKey]: (prev[groupKey] ?? DEFAULT_GROUP_LIMIT) + DEFAULT_GROUP_LIMIT
+		}));
+	}, []);
+	const baseQueryOptions = React.useMemo(() => {
 		const options = {};
 		if (collectionMeta?.softDelete) options.includeDeleted = !!viewState.config.includeDeleted;
 		if (hasFieldsToExpand(expandedFields)) options.with = expandedFields;
@@ -302,28 +417,41 @@ function ListViewInner({ collection, config, viewConfig, navigate, basePath = "/
 			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;
+		if (sortConfig) options.orderBy = { [sortConfig.field]: sortConfig.direction };
 		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 flatQueryOptions = React.useMemo(() => {
+		if (isGrouped) return baseQueryOptions;
+		const options = { ...baseQueryOptions };
+		const groupBy = viewState.config.groupBy;
+		const sortConfig = effectiveSort;
+		if (groupBy && sortConfig?.field && sortConfig.field !== groupBy) options.orderBy = [{ [groupBy]: "asc" }, { [sortConfig.field]: sortConfig.direction }];
+		if (hasOutline && !isGrouped) options.limit = 500;
+		else {
+			const pageSize = viewState.config.pagination?.pageSize ?? 25;
+			const page = viewState.config.pagination?.page ?? 1;
+			options.limit = pageSize;
+			options.offset = (page - 1) * pageSize;
+		}
+		return options;
+	}, [
+		baseQueryOptions,
+		isGrouped,
+		hasOutline,
+		viewState.config.groupBy,
+		viewState.config.pagination?.page,
+		viewState.config.pagination?.pageSize,
+		effectiveSort
+	]);
 	const debouncedSearchTerm = useDebouncedValue(searchTerm, 300);
 	const isSearching = debouncedSearchTerm.trim().length > 0;
 	const { data: searchData, isLoading: searchLoading, isFetching: searchFetching } = useSearch({
@@ -332,13 +460,34 @@ function ListViewInner({ collection, config, viewConfig, navigate, basePath = "/
 		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 ?? [], [
+	const groupQueries = useQueries({ queries: isGrouped && !isSearching ? filteredGroupValues.map((gv) => {
+		const limit = groupLimits[String(gv.value)] ?? DEFAULT_GROUP_LIMIT;
+		const groupWhere = {
+			...baseQueryOptions.where,
+			[firstFieldLevel.field]: gv.value
+		};
+		return getCollectionQueryApi(queryOpts, collectionKey).find({
+			...baseQueryOptions,
+			where: groupWhere,
+			limit,
+			offset: 0,
+			locale
+		}, { realtime: false });
+	}) : [] });
+	const { data: listData, isLoading: listLoading, error: listError } = useCollectionList(collectionKey, flatQueryOptions, { enabled: !isSearching && !isGrouped }, { realtime: effectiveRealtime });
+	const groupDataVersion = isGrouped ? groupQueries.map((q) => q.dataUpdatedAt).join(",") : "";
+	const items = React.useMemo(() => {
+		if (isSearching) return searchData?.docs ?? [];
+		if (isGrouped) return groupQueries.flatMap((q) => q.data?.docs ?? []);
+		return listData?.docs ?? [];
+	}, [
 		isSearching,
+		isGrouped,
 		searchData?.docs,
+		groupDataVersion,
 		listData?.docs
 	]);
-	const isLoading = isSearching ? searchLoading : listLoading;
+	const isLoading = isSearching ? searchLoading : isGrouped ? groupQueries.some((q) => q.isLoading) : listLoading;
 	const isSearchActive = isSearching && searchFetching;
 	const { isHighlighted } = useRealtimeHighlight(items, { enabled: effectiveRealtime && !isSearching });
 	const { getLock, isLocked: isDocLocked } = useLocks({
@@ -348,17 +497,7 @@ function ListViewInner({ collection, config, viewConfig, navigate, basePath = "/
 	});
 	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({
+		return getCollectionQueryApi(queryOpts, adminCollectionKey(level.collection)).find({
 			where: level.where,
 			with: {
 				[level.parentField]: true,
@@ -376,39 +515,86 @@ function ListViewInner({ collection, config, viewConfig, navigate, basePath = "/
 		});
 		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;
+	const metaForValue = React.useCallback((value, field) => {
+		if (!field) return void 0;
+		const fieldDef = fieldByName.get(field);
+		if (fieldDef?.type !== "select") return void 0;
+		const options = fieldDef?.options?.options;
+		if (!Array.isArray(options)) return void 0;
+		const option = flattenOptions(options).find((opt) => String(opt.value) === String(value));
+		if (!option) return void 0;
+		if (!option.icon && !option.className) return void 0;
 		return {
-			...outline,
-			defaultExpanded: outline?.defaultExpanded ?? true,
-			levels: [{
-				kind: "field",
-				field: groupBy
-			}, ...levels]
+			icon: option.icon,
+			className: option.className
 		};
-	}, [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({
+	}, [fieldByName]);
+	const remainingOutline = React.useMemo(() => {
+		if (!isGrouped || !effectiveOutline) return effectiveOutline;
+		return {
+			...effectiveOutline,
+			levels: effectiveOutline.levels.slice(1)
+		};
+	}, [isGrouped, effectiveOutline]);
+	const labelForValue = React.useCallback((value, field) => stringifyGroupValue(value, field ? fieldByName.get(field) : void 0, resolveText, t, uiLocale, t("common.noValue")), [
+		fieldByName,
+		resolveText,
+		t,
+		uiLocale
+	]);
+	const outlineRows = React.useMemo(() => isGrouped ? [] : 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"))
+		toggledKeys: toggledOutlineKeys,
+		labelForValue,
+		metaForValue
 	}), [
+		isGrouped,
 		items,
 		effectiveOutline,
 		edgesByCollection,
-		collapsedOutlineKeys,
-		fieldByName,
-		resolveText,
-		t,
-		uiLocale
+		toggledOutlineKeys,
+		labelForValue,
+		metaForValue
+	]);
+	const allGroupDocs = React.useMemo(() => {
+		if (!isGrouped) return void 0;
+		return groupQueries.flatMap((q) => q.data?.docs ?? []);
+	}, [isGrouped, groupDataVersion]);
+	const groupOutlineRows = React.useMemo(() => {
+		if (!isGrouped) return [];
+		return filteredGroupValues.map((gv, i) => {
+			const docs = (groupQueries[i]?.data)?.docs ?? [];
+			if (docs.length === 0) return [];
+			const outline = remainingOutline;
+			if (!outline || outline.levels.length === 0) return docs.map((doc) => ({
+				kind: "record",
+				key: `record:${doc.id}`,
+				id: String(doc.id),
+				doc,
+				depth: 0
+			}));
+			return buildOutlineRows({
+				docs,
+				outline,
+				edgesByCollection,
+				toggledKeys: toggledOutlineKeys,
+				labelForValue,
+				metaForValue,
+				allDocs: allGroupDocs
+			});
+		});
+	}, [
+		isGrouped,
+		filteredGroupValues,
+		groupDataVersion,
+		remainingOutline,
+		edgesByCollection,
+		toggledOutlineKeys,
+		labelForValue,
+		metaForValue,
+		allGroupDocs
 	]);
 	const table = useReactTable({
 		data: items,
@@ -419,33 +605,44 @@ function ListViewInner({ collection, config, viewConfig, navigate, basePath = "/
 		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 rowsById = React.useMemo(() => {
+		const map = /* @__PURE__ */ new Map();
+		for (const row of table.getRowModel().rows) {
+			map.set(String(row.id), row);
+			const originalId = row.original?.id;
+			if (originalId !== void 0 && originalId !== null) map.set(String(originalId), row);
+		}
+		return map;
+	}, [table]);
+	const deleteMutation = useCollectionDelete(collectionKey);
+	const restoreMutation = useCollectionRestore(collectionKey);
 	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 hasViewOptionsState = hasActiveFilters || !!viewState.config.sortConfig || !!viewState.config.groupBy || !!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 applyQuickFilters = React.useCallback((filters) => {
+		viewState.setConfig((current) => ({
+			...current,
+			filters,
+			pagination: {
+				...current.pagination ?? { pageSize: 25 },
+				page: 1
+			}
+		}));
+	}, [viewState]);
 	const handleSaveView = React.useCallback((name, configuration) => {
 		saveViewMutation.mutate({
 			name,
@@ -469,7 +666,7 @@ function ListViewInner({ collection, config, viewConfig, navigate, basePath = "/
 		collection
 	]);
 	const toggleOutlineKey = React.useCallback((key) => {
-		setCollapsedOutlineKeys((current) => {
+		setToggledOutlineKeys((current) => {
 			const next = new Set(current);
 			if (next.has(key)) next.delete(key);
 			else next.add(key);
@@ -484,6 +681,37 @@ function ListViewInner({ collection, config, viewConfig, navigate, basePath = "/
 		if (cell && column) return flexRender(cell.column.columnDef.cell, cell.getContext());
 		return /* @__PURE__ */ jsx(SimpleValue, { value: fallback ?? getValueAtPath(row?.original, field) });
 	}, [columnsByKey]);
+	const resolveFieldValue = React.useCallback((item, field) => {
+		const value = getValueAtPath(item, field);
+		if (value != null && typeof value === "object") return value;
+		const fieldDef = fieldByName.get(field);
+		if (fieldDef?.type === "relation") {
+			const expanded = getValueAtPath(item, fieldDef.options?.relationName ?? field);
+			if (expanded && typeof expanded === "object") return expanded;
+		}
+		return value;
+	}, [fieldByName]);
+	const renderMetaField = React.useCallback((field, value) => {
+		if (value === null || value === void 0 || value === "") return /* @__PURE__ */ jsx("span", {
+			className: "text-foreground-subtle",
+			children: "-"
+		});
+		const fieldDef = fieldByName.get(field);
+		if (fieldDef?.type === "datetime" || fieldDef?.type === "date" || field === "updatedAt" || field === "createdAt") return /* @__PURE__ */ jsx("span", { children: typeof value === "string" && ISO_DATE_RE.test(value) ? formatShortDate(new Date(value)) : value instanceof Date ? formatShortDate(value) : String(value) });
+		return /* @__PURE__ */ jsx(Badge, {
+			variant: "secondary",
+			className: "max-w-full truncate",
+			children: typeof value === "object" ? String(value.title ?? value.name ?? value.label ?? value.id ?? "-") : String(value)
+		});
+	}, [fieldByName]);
+	const renderLeadingIcon = React.useCallback((field, value) => {
+		const fieldDef = fieldByName.get(field);
+		if (fieldDef?.type === "select" && fieldDef.options?.options) {
+			const option = flattenOptions(fieldDef.options.options).find((opt) => String(opt.value) === String(value));
+			if (option?.icon) return resolveIconElement(option.icon);
+		}
+		return null;
+	}, [fieldByName]);
 	const handleRowClick = React.useCallback((item) => navigate(`${basePath}/collections/${collection}/${item.id}`), [
 		navigate,
 		basePath,
@@ -540,7 +768,7 @@ function ListViewInner({ collection, config, viewConfig, navigate, basePath = "/
 				showFilters && /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsxs(Button, {
 					variant: "outline",
 					size: "icon-sm",
-					className: cn("relative", hasViewOptionsState && "border-foreground"),
+					className: "relative",
 					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" })]
@@ -549,30 +777,6 @@ function ListViewInner({ collection, config, viewConfig, navigate, basePath = "/
 					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)
@@ -587,120 +791,140 @@ function ListViewInner({ collection, config, viewConfig, navigate, basePath = "/
 			] })
 		}),
 		children: /* @__PURE__ */ jsxs("div", {
-			className: "space-y-3",
+			className: "space-y-4",
 			children: [
 				showSearch && isSearchPanelOpen && /* @__PURE__ */ jsx("div", {
-					className: "border-border-subtle bg-muted/20 rounded-md border p-3",
+					className: "max-w-xl",
 					children: /* @__PURE__ */ jsx(SearchInput, {
 						value: searchTerm,
 						onChange: (event) => setSearchTerm(event.target.value),
 						onClear: () => setSearchTerm(""),
 						placeholder: t("collectionSearch.placeholder"),
-						autoFocus: true,
-						isLoading: isSearchActive
+						isLoading: isSearchActive,
+						containerClassName: "h-10"
 					})
 				}),
-				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);
+				/* @__PURE__ */ jsx(QuickFilterBar, {
+					quickFilters: resolvedListConfig?.quickFilters,
+					currentFilters: viewState.config.filters,
+					onApply: applyQuickFilters
+				}),
+				(() => {
+					if (isGrouped ? groupOutlineRows.every((g) => g.length === 0) : outlineRows.length === 0) return /* @__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
+					});
+					const renderRecordRow = (outlineRow, groupContext) => {
 						const tableRow = rowsById.get(outlineRow.id);
-						if (!tableRow) return null;
-						const item = tableRow.original;
+						const item = tableRow?.original ?? outlineRow.doc;
 						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 isSelected = tableRow?.getIsSelected() ?? false;
+						const titleValue = (titleField ? getValueAtPath(item, titleField) : item["_title"]) ?? item.title ?? item.name ?? item.id;
 						const subtitleValue = subtitleField ? getValueAtPath(item, subtitleField) : void 0;
+						const isGroupMismatch = groupContext != null && getValueAtPath(item, groupContext.field) !== groupContext.value;
 						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` },
+							"data-state": isSelected ? "selected" : void 0,
+							className: cn("group/list-row hover:bg-accent data-[state=selected]:bg-muted relative flex min-w-0 cursor-pointer items-center gap-2 rounded-md px-4 text-sm transition-colors", density === "compact" ? "min-h-9 py-1" : "min-h-11 py-2", isHighlighted(item.id) && "animate-realtime-pulse", isGroupMismatch && "opacity-45"),
 							children: [
+								outlineRow.depth > 0 && /* @__PURE__ */ jsx("span", {
+									className: "bg-border-subtle absolute top-0 bottom-0 w-px",
+									style: { left: `${52 + (outlineRow.depth - 1) * 18}px` },
+									"aria-hidden": "true"
+								}),
 								/* @__PURE__ */ jsx("div", {
 									role: "presentation",
-									className: "mt-0.5 shrink-0",
+									"data-state": isSelected ? "selected" : void 0,
+									className: "shrink-0 opacity-0 transition-opacity duration-[var(--motion-duration-fast)] group-hover/list-row:opacity-100 data-[state=selected]:opacity-100",
 									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"
+										disabled: !tableRow || !tableRow.getCanSelect(),
+										onCheckedChange: (checked) => tableRow?.toggleSelected(!!checked),
+										"aria-label": t("table.selectRow")
 									})
 								}),
-								/* @__PURE__ */ jsx("button", {
+								outlineRow.expandable ? /* @__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,
+									className: "text-muted-foreground hover:bg-surface-high hover:text-foreground focus-visible:ring-ring/40 -ml-1 flex size-7 shrink-0 items-center justify-center rounded-[var(--control-radius-inner)] transition-[background-color,color,box-shadow] focus-visible:ring-2 focus-visible:outline-none",
 									onClick: (event) => {
 										event.stopPropagation();
-										if (outlineRow.expandable) toggleOutlineKey(outlineRow.key);
+										toggleOutlineKey(outlineRow.key);
 									},
-									"aria-label": outlineRow.collapsed ? "Expand row" : "Collapse row",
-									children: outlineRow.expandable ? /* @__PURE__ */ jsx(Icon, {
+									"aria-label": outlineRow.collapsed ? t("a11y.expand") : t("a11y.collapse"),
+									children: /* @__PURE__ */ jsx(Icon, {
 										icon: "ph:caret-right-bold",
 										className: cn("size-3 transition-transform", !outlineRow.collapsed && "rotate-90")
-									}) : null
-								}),
+									})
+								}) : null,
 								/* @__PURE__ */ jsxs("button", {
 									type: "button",
-									className: "min-w-0 flex-1 text-left",
+									className: "focus-visible:ring-ring/40 -my-1 min-w-0 flex-1 rounded-[var(--control-radius-inner)] py-1 text-left focus-visible:ring-2 focus-visible:outline-none",
+									style: outlineRow.depth > 0 ? { paddingLeft: `${outlineRow.depth * 18}px` } : void 0,
 									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)),
+											leadingFields.map((field) => {
+												const fieldValue = getValueAtPath(item, field);
+												return /* @__PURE__ */ jsx("span", {
+													className: "flex size-4 shrink-0 items-center justify-center",
+													children: renderLeadingIcon(field, fieldValue) || renderField(tableRow, field, fieldValue)
+												}, field);
+											}),
 											/* @__PURE__ */ jsx("span", {
-												className: "text-foreground truncate font-medium",
+												className: cn("truncate", outlineRow.depth > 0 ? "text-muted-foreground font-normal" : "text-foreground 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)),
+											badgeFields.map((field) => {
+												const fieldValue = getValueAtPath(item, field);
+												const icon = renderLeadingIcon(field, fieldValue);
+												if (icon) return /* @__PURE__ */ jsx("span", {
+													className: "flex size-4 shrink-0 items-center justify-center",
+													children: icon
+												}, field);
+												return /* @__PURE__ */ jsx("span", {
+													className: "text-muted-foreground inline-flex max-w-36 shrink-0 items-center text-xs",
+													children: /* @__PURE__ */ jsx("span", {
+														className: "truncate",
+														children: renderField(tableRow, field, fieldValue)
+													})
+												}, field);
+											}),
 											locked && /* @__PURE__ */ jsxs("span", {
-												className: "text-warning inline-flex items-center gap-1 text-xs",
+												className: "text-muted-foreground bg-muted inline-flex shrink-0 items-center gap-1 rounded-full px-1.5 py-0.5 text-xs",
 												children: [/* @__PURE__ */ jsx(Icon, {
 													icon: "ph:lock-key",
 													className: "size-3"
-												}), lockUser?.name ?? t("collection.locked")]
+												}), /* @__PURE__ */ jsx("span", {
+													className: "max-w-20 truncate",
+													children: lockUser?.name ?? t("collection.locked")
+												})]
 											})
 										]
 									}), subtitleValue !== void 0 && /* @__PURE__ */ jsx("div", {
@@ -709,10 +933,10 @@ function ListViewInner({ collection, config, viewConfig, navigate, basePath = "/
 									})]
 								}),
 								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",
+									className: "text-muted-foreground hidden shrink-0 items-center gap-2 text-xs md:flex",
 									children: metaFields.map((field) => /* @__PURE__ */ jsx("span", {
-										className: "min-w-0 truncate",
-										children: renderField(tableRow, field, getValueAtPath(item, field))
+										className: "flex w-28 min-w-0 items-center justify-end",
+										children: renderMetaField(field, resolveFieldValue(item, field))
 									}, field))
 								}),
 								actions.row.length > 0 && /* @__PURE__ */ jsx("div", {
@@ -732,27 +956,198 @@ function ListViewInner({ collection, config, viewConfig, navigate, basePath = "/
 								})
 							]
 						}, outlineRow.key);
-					})
+					};
+					if (isGrouped) return /* @__PURE__ */ jsx("div", {
+						className: "flex flex-col gap-1.5 overflow-hidden",
+						children: filteredGroupValues.map((gv, i) => {
+							const rows = groupOutlineRows[i] ?? [];
+							const queryData = groupQueries[i]?.data;
+							const totalDocs = queryData?.totalDocs ?? 0;
+							const loadedCount = (queryData?.docs ?? []).length;
+							const groupKey = String(gv.value);
+							const groupLabel = labelForValue(gv.value, firstFieldLevel?.field);
+							const meta = metaForValue(gv.value, firstFieldLevel?.field);
+							const groupIcon = meta?.icon ? resolveIconElement(meta.icon) : null;
+							const isGroupLoading = groupQueries[i]?.isLoading ?? false;
+							if (totalDocs === 0 && !isGroupLoading) return null;
+							const groupToggleKey = `group:${groupKey}`;
+							const isGroupCollapsed = toggledOutlineKeys.has(groupToggleKey);
+							return /* @__PURE__ */ jsxs("div", {
+								className: "flex flex-col",
+								children: [/* @__PURE__ */ jsxs("button", {
+									type: "button",
+									className: "hover:bg-surface-mid focus-visible:ring-ring/40 flex min-h-8 items-center gap-2 rounded-md px-3 py-1 text-left transition-colors focus-visible:ring-2 focus-visible:outline-none",
+									onClick: () => toggleOutlineKey(groupToggleKey),
+									"aria-expanded": !isGroupCollapsed,
+									children: [
+										/* @__PURE__ */ jsx(Icon, {
+											icon: "ph:caret-right-bold",
+											className: cn("text-muted-foreground size-3 shrink-0 transition-transform", !isGroupCollapsed && "rotate-90")
+										}),
+										groupIcon && /* @__PURE__ */ jsx("span", {
+											className: "size-4 shrink-0",
+											children: groupIcon
+										}),
+										/* @__PURE__ */ jsx("span", {
+											className: "text-muted-foreground text-xs font-medium",
+											children: groupLabel
+										}),
+										/* @__PURE__ */ jsx("span", {
+											className: "text-muted-foreground/60 text-xs tabular-nums",
+											children: totalDocs
+										})
+									]
+								}), !isGroupCollapsed && (isGroupLoading ? /* @__PURE__ */ jsx("div", {
+									className: "flex items-center justify-center py-4",
+									children: /* @__PURE__ */ jsx(Icon, {
+										icon: "ph:spinner-gap",
+										className: "text-muted-foreground size-4 animate-spin"
+									})
+								}) : /* @__PURE__ */ jsxs("div", {
+									className: "flex flex-col gap-px",
+									children: [rows.map((outlineRow) => {
+										if (outlineRow.kind !== "record") return /* @__PURE__ */ jsx(OutlineHeaderRow, {
+											row: outlineRow,
+											showCounts: resolvedListConfig?.outline?.showCounts ?? true,
+											onToggle: toggleOutlineKey
+										}, outlineRow.key);
+										return renderRecordRow(outlineRow, {
+											field: firstFieldLevel.field,
+											value: gv.value
+										});
+									}), totalDocs > loadedCount && /* @__PURE__ */ jsxs("button", {
+										type: "button",
+										className: "text-muted-foreground hover:text-foreground hover:bg-surface-mid focus-visible:ring-ring/40 flex w-full items-center justify-center gap-2 rounded-md py-2 text-xs transition-colors focus-visible:ring-2 focus-visible:outline-none",
+										onClick: () => loadMoreInGroup(groupKey),
+										children: [/* @__PURE__ */ jsx(Icon, {
+											icon: "ph:caret-down",
+											className: "size-3"
+										}), /* @__PURE__ */ jsxs("span", { children: [
+											t("table.loadMore"),
+											" (",
+											totalDocs - loadedCount,
+											")"
+										] })]
+									})]
+								}))]
+							}, groupKey);
+						})
+					});
+					return /* @__PURE__ */ jsx("div", {
+						className: "flex flex-col gap-px overflow-hidden",
+						children: outlineRows.map((outlineRow) => {
+							if (outlineRow.kind !== "record") return /* @__PURE__ */ jsx(OutlineHeaderRow, {
+								row: outlineRow,
+								showCounts: resolvedListConfig?.outline?.showCounts ?? true,
+								onToggle: toggleOutlineKey
+							}, outlineRow.key);
+							return renderRecordRow(outlineRow);
+						})
+					});
+				})(),
+				!isSearching && (hasOutline || isGrouped) && /* @__PURE__ */ jsx("div", {
+					className: "text-muted-foreground flex items-center gap-2 py-2 text-sm tabular-nums",
+					"aria-live": "polite",
+					"aria-atomic": "true",
+					children: /* @__PURE__ */ jsxs("span", { children: [
+						isGrouped ? groupQueries.reduce((sum, q) => sum + (q.data?.totalDocs ?? 0), 0) : items.length,
+						" ",
+						t("table.items")
+					] })
 				}),
-				/* @__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")
+				!isSearching && !hasOutline && !isGrouped && /* @__PURE__ */ jsxs("div", {
+					className: "qa-list-view__pagination flex items-center justify-between gap-4 py-2 tabular-nums",
+					role: "navigation",
+					"aria-label": t("table.pagination"),
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "text-muted-foreground flex items-center gap-4 text-sm",
+						"aria-live": "polite",
+						"aria-atomic": "true",
+						children: [/* @__PURE__ */ jsxs("span", { children: [
+							items.length > 0 ? `${((viewState.config.pagination?.page ?? 1) - 1) * (viewState.config.pagination?.pageSize ?? 25) + 1}-${Math.min(((viewState.config.pagination?.page ?? 1) - 1) * (viewState.config.pagination?.pageSize ?? 25) + items.length, listData?.totalDocs ?? items.length)}` : "0",
+							" ",
+							t("table.of"),
+							" ",
+							listData?.totalDocs ?? 0
+						] }), /* @__PURE__ */ jsxs("div", {
+							className: "flex items-center gap-2",
+							children: [/* @__PURE__ */ jsx("span", { children: t("table.show") }), /* @__PURE__ */ jsxs(Select, {
+								value: String(viewState.config.pagination?.pageSize ?? 25),
+								onValueChange: (value) => viewState.setPageSize(Number(value)),
+								children: [/* @__PURE__ */ jsx(SelectTrigger, {
+									className: "h-8 w-[70px]",
+									children: /* @__PURE__ */ jsx(SelectValue, {})
+								}), /* @__PURE__ */ jsx(SelectContent, {
+									side: "top",
+									children: [
+										10,
+										25,
+										50,
+										100
+									].map((size) => /* @__PURE__ */ jsx(SelectItem, {
+										value: String(size),
+										children: size
+									}, size))
+								})]
+							})]
 						})]
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-1",
+						children: [
+							/* @__PURE__ */ jsx(Button, {
+								variant: "ghost",
+								size: "sm",
+								className: "size-8 p-0",
+								disabled: (viewState.config.pagination?.page ?? 1) <= 1,
+								onClick: () => viewState.setPage((viewState.config.pagination?.page ?? 1) - 1),
+								"aria-label": t("table.previousPage"),
+								children: /* @__PURE__ */ jsx(Icon, {
+									icon: "ph:caret-left",
+									className: "size-4"
+								})
+							}),
+							Array.from({ length: Math.min(5, listData?.totalPages ?? 1) }, (_, i) => {
+								const currentPage = viewState.config.pagination?.page ?? 1;
+								const totalPages = listData?.totalPages ?? 1;
+								let pageNum;
+								if (totalPages <= 5) pageNum = i + 1;
+								else if (currentPage <= 3) pageNum = i + 1;
+								else if (currentPage >= totalPages - 2) pageNum = totalPages - 4 + i;
+								else pageNum = currentPage - 2 + i;
+								return /* @__PURE__ */ jsx(Button, {
+									variant: currentPage === pageNum ? "secondary" : "ghost",
+									size: "sm",
+									className: "size-8 min-w-8 p-0 tabular-nums",
+									onClick: () => viewState.setPage(pageNum),
+									"aria-label": t("table.page", { page: pageNum }),
+									"aria-current": currentPage === pageNum ? "page" : void 0,
+									children: pageNum
+								}, pageNum);
+							}),
+							/* @__PURE__ */ jsx(Button, {
+								variant: "ghost",
+								size: "sm",
+								className: "size-8 p-0",
+								disabled: (viewState.config.pagination?.page ?? 1) >= (listData?.totalPages ?? 1),
+								onClick: () => viewState.setPage((viewState.config.pagination?.page ?? 1) + 1),
+								"aria-label": t("table.nextPage"),
+								children: /* @__PURE__ */ jsx(Icon, {
+									icon: "ph:caret-right",
+									className: "size-4"
+								})
+							})
+						]
 					})]
 				}),
+				isSearching && /* @__PURE__ */ jsxs("div", {
+					className: "text-muted-foreground flex items-center gap-2 py-2 text-sm tabular-nums",
+					"aria-live": "polite",
+					"aria-atomic": "true",
+					children: [isSearchActive && /* @__PURE__ */ jsx(Icon, {
+						icon: "ph:spinner-gap",
+						className: "size-3 animate-spin"
+					}), t("cell.item", { count: items.length })]
+				}),
 				/* @__PURE__ */ jsx(BulkActionToolbar, {
 					table,
 					actions: actions.bulk,
@@ -781,7 +1176,9 @@ function ListViewInner({ collection, config, viewConfig, navigate, basePath = "/
 					onDeleteView: (viewId) => deleteViewMutation.mutate(viewId),
 					supportsSoftDelete: !!collectionMeta?.softDelete,
 					groupableFields,
-					defaultGroupBy
+					defaultGroupBy,
+					defaultFilters,
+					panels: { columns: false }
 				}),
 				dialogAction && /* @__PURE__ */ jsx(ActionDialog, {
 					open: !!dialogAction,
@@ -796,10 +1193,10 @@ function ListViewInner({ collection, config, viewConfig, navigate, basePath = "/
 	});
 }
 function OutlineHeaderRow({ row, showCounts, onToggle }) {
+	const groupIcon = row.kind === "group" && "icon" in row ? resolveIconElement(row.icon) : null;
 	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` },
+		className: "hover:bg-surface-mid focus-visible:ring-ring/40 flex min-h-8 w-full items-center gap-2 rounded-md px-3 py-1 text-left transition-[background-color,color,box-shadow] focus-visible:ring-2 focus-visible:outline-none",
 		onClick: () => onToggle(row.key),
 		"aria-expanded": !row.collapsed,
 		children: [
@@ -811,12 +1208,17 @@ function OutlineHeaderRow({ row, showCounts, onToggle }) {
 				icon: "ph:folder-simple",
 				className: "text-muted-foreground size-4"
 			}),
+			groupIcon && /* @__PURE__ */ jsx("span", {
+				className: "size-4 shrink-0",
+				children: groupIcon
+			}),
 			/* @__PURE__ */ jsx("span", {
-				className: "font-chrome chrome-meta text-muted-foreground truncate text-[11px] font-semibold tracking-[0.12em] uppercase",
+				className: "text-muted-foreground truncate text-xs font-medium",
+				style: row.depth > 0 ? { paddingLeft: `${row.depth * 18}px` } : void 0,
 				children: row.label
 			}),
 			showCounts && /* @__PURE__ */ jsx("span", {
-				className: "font-chrome chrome-meta text-muted-foreground text-[11px] tabular-nums",
+				className: "text-muted-foreground/60 ml-1 text-xs tabular-nums",
 				children: row.count
 			})
 		]