@rebasepro/cms 0.0.1-canary.4d4fb3e

package/src/components/EntityCollectionView/EntityCollectionView.tsx

@@ -0,0 +1,1143 @@
+import type { AdditionalFieldDelegate, EntityCollection } from "@rebasepro/types";
+import type { EntityAction, Property } from "@rebasepro/types";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+
+import { deepEqual as equal } from "fast-equals"
+
+import { CollectionSize, Entity, EntityReference, EntityTableController, FilterValues, PartialEntityCollection, SaveEntityProps, ViewMode } from "@rebasepro/types";
+import {
+    EntityCollectionRowActions,
+    EntityCollectionTable,
+} from "../EntityCollectionTable";
+import { CollectionTableToolbar } from "../EntityCollectionTable/internal/CollectionTableToolbar";
+import { getSubcollections } from "@rebasepro/common";
+import { useCollectionInlineEditor } from "./hooks/useCollectionInlineEditor";
+import { navigateToEntity } from "../../util/navigation_utils";
+import { mergeEntityActions } from "../../util/entity_actions";
+import { resolveEntityAction } from "../../util/resolutions";
+import { getPropertyInPath } from "../../util/property_utils";
+import { ReferencePreview } from "../../preview";
+import {
+    saveEntityWithCallbacks,
+    useAuthController,
+    useCustomizationController,
+    useData,
+    useDataTableController,
+    useRebaseContext,
+    useLargeLayout,
+    usePermissions,
+    useTranslation,
+    useSlot
+} from "@rebasepro/core";
+import { useUserConfigurationPersistence } from "@rebasepro/core";
+import { EntityCollectionViewActions } from "./EntityCollectionViewActions";
+import { EntityCollectionCardView } from "./EntityCollectionCardView";
+import { EntityCollectionBoardView } from "./EntityCollectionBoardView";
+import { ViewModeToggle, KanbanPropertyOption } from "./ViewModeToggle";
+import {
+    AddIcon,
+    Button,
+    cls,
+    focusedDisabled,
+    IconButton,
+    KeyboardTabIcon,
+    Markdown,
+    Popover,
+    SearchIcon,
+    Skeleton,
+    Tooltip,
+    Typography
+} from "@rebasepro/ui";
+import { setIn } from "@rebasepro/formex";
+import { getSubcollectionColumnId } from "../EntityCollectionTable/internal/common";
+import {
+    copyEntityAction,
+    deleteEntityAction,
+    editEntityAction,
+} from "../common/default_entity_actions";
+import { OnCellValueChange, OnColumnResizeParams, UniqueFieldValidator } from "@rebasepro/core";
+import { useColumnIds } from "@rebasepro/core";
+import { PopupFormField } from "../EntityCollectionTable/internal/popup_field/PopupFormField";
+import { GetPropertyForProps } from "../EntityCollectionTable/EntityCollectionTableProps";
+import { DeleteEntityDialog } from "../DeleteEntityDialog";
+import { useAnalyticsController } from "@rebasepro/core";
+import { useSelectionController } from "./useSelectionController";
+import { EntityCollectionViewStartActions } from "./EntityCollectionViewStartActions";
+import { addRecentId, getRecentIds } from "./utils";
+import { useScrollRestoration } from "@rebasepro/core";
+import { ErrorBoundary } from "@rebasepro/ui";
+import { mergeDeep } from "@rebasepro/utils";
+import { useCollectionRegistryController, useUrlController, useSideEntityController } from "../../index";
+import { useBreadcrumbsController } from "../../index";
+
+const DEFAULT_ENTITY_OPEN_MODE: "side_panel" | "full_screen" = "side_panel";
+
+/**
+ * @group Components
+ */
+export type EntityCollectionViewProps<M extends Record<string, unknown>> = {
+    /**
+     * Complete path where this collection is located.
+     * It defaults to the collection path if not provided.
+     */
+    path?: string;
+    /**
+     * Full path using navigation ids.
+     */
+    idPath?: string;
+    /**
+     * If this is a subcollection, specify the parent collection ids.
+     */
+    parentCollectionIds?: string[];
+    /**
+     * Whether this is a subcollection or not.
+     */
+    isSubCollection?: boolean;
+
+    className?: string;
+
+    /**
+     * If true, this view will store its filter and sorting status in the url params
+     */
+    updateUrl?: boolean;
+
+} & EntityCollection<M>;
+
+/**
+ * This component is in charge of binding a driver path with an {@link EntityCollection}
+ * where it's configuration is defined. It includes an infinite scrolling table
+ * and a 'Add' new entities button,
+ *
+ * This component is the default one used for displaying entity collections
+ * and is in charge of generating all the specific actions and customization
+ * of the lower level {@link EntityCollectionTable}
+ *
+ * Please **note** that you only need to use this component if you are building
+ * a custom view. If you just need to create a default view you can do it
+ * exclusively with config options.
+ *
+ * If you need a lower level implementation with more granular options, you
+ * can use {@link EntityCollectionTable}.
+ *
+ * If you need a generic table that is not bound to the driver or entities and
+ * properties at all, you can check {@link VirtualTable}
+ *
+ * @param path
+ * @param collection
+
+ * @group Components
+ */
+export const EntityCollectionView = React.memo(
+    function EntityCollectionView<M extends Record<string, unknown>>({
+        path: pathProp,
+
+        parentCollectionIds,
+        isSubCollection,
+        className,
+        updateUrl,
+        ...collectionProp
+    }: EntityCollectionViewProps<M>
+    ) {
+
+        const { t } = useTranslation();
+        const context = useRebaseContext();
+        const collectionRegistry = useCollectionRegistryController();
+        const urlController = useUrlController();
+        const breadcrumbs = useBreadcrumbsController();
+        const path = pathProp ?? collectionProp.slug;
+        const dataClient = useData();
+        const sideEntityController = useSideEntityController();
+        const authController = useAuthController();
+        const userConfigPersistence = useUserConfigurationPersistence();
+        const analyticsController = useAnalyticsController();
+        const customizationController = useCustomizationController();
+        const { canCreate, canEdit, canDelete } = usePermissions();
+
+        const containerRef = React.useRef<HTMLDivElement>(null);
+
+        const scrollRestoration = useScrollRestoration();
+
+        const collection = useMemo(() => {
+            const userOverride = userConfigPersistence?.getCollectionConfig<M>(path);
+            return (userOverride ? mergeDeep(collectionProp, userOverride) : collectionProp) as EntityCollection<M>;
+        }, [collectionProp, path, userConfigPersistence?.getCollectionConfig]);
+
+        const openEntityMode = collection?.openEntityMode ?? DEFAULT_ENTITY_OPEN_MODE;
+
+        const collectionRef = React.useRef(collection);
+        useEffect(() => {
+            collectionRef.current = collection;
+        }, [collection]);
+
+        const canCreateEntities = canCreate(collection, path);
+        const [highlightedEntity, setHighlightedEntity] = useState<Entity<M> | undefined>(undefined);
+        const [deleteEntityClicked, setDeleteEntityClicked] = React.useState<Entity<M> | Entity<M>[] | undefined>(undefined);
+
+        const [lastDeleteTimestamp, setLastDeleteTimestamp] = React.useState<number>(0);
+
+        // Track recently deleted entities for optimistic Kanban count updates
+        const [deletedEntities, setDeletedEntities] = React.useState<Entity<M>[]>([]);
+
+        // number of entities in the collection (undefined = loading)
+        const [docsCount, setDocsCount] = useState<number | undefined>(undefined);
+
+        // Optimistic state for column order to prevent UI flickering during persistence
+        const [localPropertiesOrder, setLocalPropertiesOrder] = useState<string[] | undefined>(collection.propertiesOrder);
+
+        // Sync local state with collection's propertiesOrder when it changes from external sources
+        useEffect(() => {
+            setLocalPropertiesOrder(collection.propertiesOrder);
+        }, [collection.propertiesOrder]);
+
+        const unselectNavigatedEntity = useCallback(() => {
+            const currentSelection = highlightedEntity;
+            setTimeout(() => {
+                if (currentSelection === highlightedEntity)
+                    setHighlightedEntity(undefined);
+            }, 2400);
+        }, [highlightedEntity]);
+
+        const checkInlineEditing = useCallback((entity?: Entity<any>): boolean => {
+            const collection = collectionRef.current;
+            if (!canEdit(collection, path, entity ?? null)) {
+                return false;
+            }
+            return collection.inlineEditing === undefined || collection.inlineEditing;
+        }, [canEdit, path]);
+
+        const selectionEnabled = collection.selectionEnabled === undefined || collection.selectionEnabled;
+        const hoverRow = !checkInlineEditing();
+
+        const [popOverOpen, setPopOverOpen] = useState(false);
+
+        // View mode priority: URL > saved user config > collection.defaultViewMode
+        const defaultViewMode = collection.defaultViewMode ?? "table";
+
+        // Parse view from URL
+        const getViewFromUrl = useCallback((): ViewMode | null => {
+            const params = new URLSearchParams(window.location.search);
+            const urlView = params.get("__view");
+            if (urlView && ["table", "kanban", "cards"].includes(urlView)) {
+                return urlView as ViewMode;
+            }
+            return null;
+        }, []);
+
+        // Get saved view from local persistence
+        const getSavedView = useCallback((): ViewMode | null => {
+            const saved = userConfigPersistence?.getCollectionConfig<M>(path)?.defaultViewMode;
+            return (saved as ViewMode) ?? null;
+        }, [userConfigPersistence, path]);
+
+        const [viewMode, setViewModeState] = useState<ViewMode>(() => {
+            // Priority: URL > saved config > collection default
+            const urlView = getViewFromUrl();
+            if (urlView) return urlView;
+            const savedView = getSavedView();
+            if (savedView) return savedView;
+            return defaultViewMode;
+        });
+
+        // Sync URL with current view on init (if view came from saved config)
+        useEffect(() => {
+            const urlView = getViewFromUrl();
+            if (!urlView && viewMode !== "table") {
+                // View came from saved config but URL doesn't have it - update URL without push
+                const url = new URL(window.location.href);
+                url.searchParams.set("__view", viewMode);
+                window.history.replaceState({}, "", url.toString());
+            }
+        }, []); // Only on mount
+
+        // Update URL when view mode changes (user action)
+        const setViewMode = useCallback((newMode: ViewMode) => {
+            setViewModeState(newMode);
+
+            // Update URL with __view param
+            const url = new URL(window.location.href);
+            if (newMode === "table") {
+                url.searchParams.delete("__view");
+            } else {
+                url.searchParams.set("__view", newMode);
+            }
+            window.history.pushState({}, "", url.toString());
+        }, []);
+
+        // Listen for browser back/forward
+        useEffect(() => {
+            const handlePopState = () => {
+                const urlView = getViewFromUrl();
+                if (urlView) {
+                    // URL has explicit view - use it
+                    setViewModeState(urlView);
+                } else {
+                    // No URL param - fallback to saved config or collection default
+                    const savedView = getSavedView();
+                    setViewModeState(savedView ?? defaultViewMode);
+                }
+            };
+
+            window.addEventListener("popstate", handlePopState);
+            return () => window.removeEventListener("popstate", handlePopState);
+        }, [getViewFromUrl, getSavedView, defaultViewMode]);
+
+        // Card view size state - controls the grid column count
+        const [cardSize, setCardSize] = useState<CollectionSize>(collection.defaultSize ?? "m");
+
+        // Table view size state - controls row height
+        const [tableSize, setTableSize] = useState<CollectionSize>(collection.defaultSize ?? "m");
+
+        const selectionController = useSelectionController<M>();
+        const usedSelectionController = collection.selectionController ?? selectionController;
+        const {
+            selectedEntities,
+            setSelectedEntities
+        } = usedSelectionController;
+
+        const tableController = useDataTableController<M>({
+            path,
+            collection,
+            lastDeleteTimestamp,
+            scrollRestoration,
+            updateUrl
+        });
+
+        const tableKey = React.useRef<string>(Math.random().toString(36));
+        const popupCell = tableController.popupCell as {
+            entityId: string | number;
+            propertyKey: Extract<keyof M, string>;
+            cellRect?: DOMRect;
+        } | undefined;
+
+        const onPopupClose = useCallback(() => {
+            tableController.setPopupCell?.(undefined);
+        }, [tableController.setPopupCell]);
+
+        const onEntityClick = useCallback((clickedEntity: Entity<M>) => {
+            const collection = collectionRef.current;
+            setHighlightedEntity(clickedEntity);
+            analyticsController.onAnalyticsEvent?.("edit_entity_clicked", {
+                path: clickedEntity.path,
+                entityId: clickedEntity.id
+            });
+
+            if (collection) {
+                addRecentId(collection.slug, clickedEntity.id);
+            }
+
+            const entityPath = path ?? clickedEntity.path;
+            navigateToEntity({
+                navigation: urlController,
+                path: entityPath,
+                sideEntityController,
+                openEntityMode,
+                collection,
+                entityId: clickedEntity.id
+            });
+
+        }, [unselectNavigatedEntity, sideEntityController]);
+
+        const onNewClick = useCallback(() => {
+            const collection = collectionRef.current;
+            analyticsController.onAnalyticsEvent?.("new_entity_click", {
+                path: path
+            });
+            navigateToEntity({
+                openEntityMode,
+                collection,
+                entityId: undefined,
+                path: path,
+                sideEntityController,
+                navigation: urlController,
+                onClose: unselectNavigatedEntity
+            })
+        }, [path, sideEntityController]);
+
+        const onMultipleDeleteClick = () => {
+            analyticsController.onAnalyticsEvent?.("multiple_delete_dialog_open", {
+                path: path
+            });
+            setDeleteEntityClicked(selectedEntities);
+        };
+
+        const internalOnEntityDelete = (_path: string, entity: Entity<M>) => {
+            analyticsController.onAnalyticsEvent?.("single_entity_deleted", {
+                path: path
+            });
+            setSelectedEntities((selectedEntities) => selectedEntities.filter((e) => e.id !== entity.id));
+            setDeletedEntities(prev => [...prev, entity]);
+            setLastDeleteTimestamp(Date.now());
+        };
+
+        const internalOnMultipleEntitiesDelete = (_path: string, entities: Entity<M>[]) => {
+            analyticsController.onAnalyticsEvent?.("multiple_entities_deleted", {
+                path: path
+            });
+            setSelectedEntities([]);
+            setDeleteEntityClicked(undefined);
+            setDeletedEntities(prev => [...prev, ...entities]);
+            setLastDeleteTimestamp(Date.now());
+        };
+
+        const pluginAddColumnComponents = useSlot("collection.add-column", {
+            path,
+            parentCollectionIds: parentCollectionIds ?? [],
+            collection,
+            tableController
+        });
+
+        const pluginToolbarWidgets = useSlot("collection.toolbar", {
+            path,
+            parentCollectionIds: parentCollectionIds ?? [],
+            collection: collection,
+            tableController: tableController,
+            selectionController: usedSelectionController
+        });
+
+        const pluginEmptyStates = useSlot("collection.empty-state", {
+            path,
+            parentCollectionIds: parentCollectionIds ?? [],
+            collection,
+            canCreate: canCreateEntities,
+            onNewClick
+        });
+
+        const onCollectionModifiedForUser = useCallback((path: string, partialCollection: PartialEntityCollection<M>) => {
+            if (userConfigPersistence) {
+                const currentStoredConfig = userConfigPersistence.getCollectionConfig(path);
+                const updatedConfig = mergeDeep(currentStoredConfig, partialCollection);
+                userConfigPersistence.onCollectionModified(path, updatedConfig);
+            }
+        }, [userConfigPersistence]);
+
+        const onColumnResize = useCallback(({
+            width,
+            key
+        }: OnColumnResizeParams) => {
+
+            const collection = collectionRef.current;
+            // Only for property columns
+            if (!getPropertyInPath(collection.properties, key)) return;
+            const localCollection = buildPropertyWidthOverwrite(key, width);
+            onCollectionModifiedForUser(path, localCollection);
+        }, [onCollectionModifiedForUser, path]);
+
+        const onTableSizeChanged = useCallback((size: CollectionSize) => {
+            setTableSize(size);
+            if (userConfigPersistence)
+                onCollectionModifiedForUser(path, { defaultSize: size })
+        }, [onCollectionModifiedForUser, path, userConfigPersistence]);
+
+        // View mode change: update URL + save to local persistence
+        const onViewModeChange = useCallback((mode: ViewMode) => {
+            analyticsController.onAnalyticsEvent?.("view_mode_changed", {
+                path: path,
+                from: viewMode,
+                to: mode
+            });
+            setViewMode(mode);
+            // Save to local persistence for next visit
+            if (userConfigPersistence) {
+                onCollectionModifiedForUser(path, { defaultViewMode: mode } as PartialEntityCollection<M>);
+            }
+        }, [setViewMode, userConfigPersistence, onCollectionModifiedForUser, path, analyticsController, viewMode]);
+
+        const createEnabled = canCreate(collection, path);
+
+        const { onValueChange, uniqueFieldValidator } = useCollectionInlineEditor({
+            path,
+            collection,
+            dataClient,
+            context
+        });
+
+        // In v4, collections are already resolved, so we use collection directly
+        const resolvedCollection = collection;
+
+        // Check if Kanban view is available (needs kanban.columnProperty with enum)
+        const kanbanEnabled = useMemo(() => {
+            if (!collection.kanban?.columnProperty) return false;
+            const property = getPropertyInPath(resolvedCollection.properties, collection.kanban.columnProperty);
+            if (!property || property.type !== "string") return false;
+            return Boolean("enum" in property && property.enum);
+        }, [collection.kanban?.columnProperty, resolvedCollection.properties]);
+
+        // Compute the effective enabled views:
+        // - Start from collection.enabledViews (defaults to all three)
+        // - Filter out kanban if no enum properties exist
+        const hasEnumProperty = useMemo(() => {
+            return Object.values(resolvedCollection.properties).some((p: Property) => p.type === "string" && "enum" in p && p.enum);
+        }, [resolvedCollection.properties]);
+
+        const enabledViews: ViewMode[] = useMemo(() => {
+            const configured = collection.enabledViews ?? ["table", "cards", "kanban"];
+            if (!hasEnumProperty) {
+                return configured.filter(v => v !== "kanban");
+            }
+            return configured;
+        }, [collection.enabledViews, hasEnumProperty]);
+
+        // Compute available enum properties for kanban column selection
+        const kanbanPropertyOptions: KanbanPropertyOption[] = useMemo(() => {
+            const options: KanbanPropertyOption[] = [];
+            const properties = resolvedCollection.properties;
+
+            for (const [key, property] of Object.entries(properties)) {
+                const prop = property;
+                if (prop && prop.type === "string" && "enum" in prop && prop.enum) {
+                    options.push({
+                        key,
+                        label: prop.name || key
+                    });
+                }
+            }
+
+            return options;
+        }, [resolvedCollection.properties]);
+
+        // Get saved kanban property from user config
+        const getSavedKanbanProperty = useCallback((): string | undefined => {
+            const saved = userConfigPersistence?.getCollectionConfig<M>(path);
+            return (saved as Record<string, unknown>)?.kanbanColumnProperty as string | undefined;
+        }, [userConfigPersistence, path]);
+
+        // Selected kanban property state - priority: saved config > collection default > first available
+        const [selectedKanbanProperty, setSelectedKanbanProperty] = useState<string>(() => {
+            const saved = getSavedKanbanProperty();
+            if (saved && kanbanPropertyOptions.some(o => o.key === saved)) return saved;
+            if (collection.kanban?.columnProperty) return collection.kanban.columnProperty;
+            return kanbanPropertyOptions[0]?.key ?? "";
+        });
+
+        // Update selected property if options change and current selection is no longer valid
+        useEffect(() => {
+            if (kanbanPropertyOptions.length > 0 && !kanbanPropertyOptions.some(o => o.key === selectedKanbanProperty)) {
+                const saved = getSavedKanbanProperty();
+                if (saved && kanbanPropertyOptions.some(o => o.key === saved)) {
+                    setSelectedKanbanProperty(saved);
+                } else if (collection.kanban?.columnProperty && kanbanPropertyOptions.some(o => o.key === collection.kanban?.columnProperty)) {
+                    setSelectedKanbanProperty(collection.kanban.columnProperty);
+                } else {
+                    setSelectedKanbanProperty(kanbanPropertyOptions[0]?.key ?? "");
+                }
+            }
+        }, [kanbanPropertyOptions, selectedKanbanProperty, getSavedKanbanProperty, collection.kanban?.columnProperty]);
+
+        // Handle kanban property change
+        const onKanbanPropertyChange = useCallback((property: string) => {
+            analyticsController.onAnalyticsEvent?.("kanban_property_changed", {
+                path: path,
+                property
+            });
+            setSelectedKanbanProperty(property);
+            // Save to local persistence
+            if (userConfigPersistence) {
+                onCollectionModifiedForUser(path, { kanbanColumnProperty: property } as PartialEntityCollection<M>);
+            }
+        }, [userConfigPersistence, onCollectionModifiedForUser, path, analyticsController]);
+
+        const getPropertyFor = useCallback(({
+            propertyKey,
+            entity
+        }: GetPropertyForProps<M>) => {
+            let property: Property | undefined = getPropertyInPath(collection.properties, propertyKey);
+
+            // we might not find the property in the collection if combining property builders and map spread
+            if (!property) {
+                // these 2 properties are coming from the resolved collection with default values
+                property = getPropertyInPath(resolvedCollection.properties, propertyKey);
+            }
+
+            // In v4, properties are already resolved, so we return them directly
+            return property ?? null;
+        }, [collection.properties, resolvedCollection.properties]);
+
+        // Use a collection with local propertiesOrder for optimistic UI updates
+        const collectionWithLocalOrder = useMemo(() => {
+            if (localPropertiesOrder && localPropertiesOrder !== resolvedCollection.propertiesOrder) {
+                return {
+                    ...resolvedCollection,
+                    propertiesOrder: localPropertiesOrder
+                };
+            }
+            return resolvedCollection;
+        }, [resolvedCollection, localPropertiesOrder]);
+
+        const displayedColumnIds = useColumnIds(collectionWithLocalOrder, true);
+
+        const additionalFields = useMemo(() => {
+            // v4: use getSubcollections helper to access subcollections
+            const subcollectionsList = getSubcollections(collection);
+            const subcollectionColumns: AdditionalFieldDelegate<M, any>[] = subcollectionsList.map((subcollection: EntityCollection) => {
+                return {
+                    key: getSubcollectionColumnId(subcollection),
+                    name: subcollection.name,
+                    width: 200,
+                    dependencies: [],
+                    Builder: ({ entity }: { entity: Entity }) => (
+                        <Button
+                            className={"max-w-full truncate justify-start"}
+                            startIcon={<KeyboardTabIcon size={"small"} />}
+                            onClick={(event: React.MouseEvent) => {
+                                event.stopPropagation();
+                                navigateToEntity({
+                                    openEntityMode,
+                                    collection,
+                                    entityId: entity.id,
+                                    selectedTab: subcollection.slug,
+                                    path: path,
+                                    navigation: urlController,
+                                    sideEntityController
+                                })
+                            }}>
+                            {subcollection.name}
+                        </Button>
+                    )
+                };
+            }) ?? [];
+
+            return [
+                ...(collection.additionalFields ?? []),
+                ...subcollectionColumns
+            ];
+        }, [collection, path, sideEntityController]);
+
+        const updateLastDeleteTimestamp = useCallback(() => {
+            setLastDeleteTimestamp(Date.now());
+        }, []);
+
+        const largeLayout = useLargeLayout();
+
+        const getActionsForEntity = ({
+            entity,
+            customEntityActions
+        }: {
+            entity?: Entity<M>,
+            customEntityActions?: EntityAction[]
+        }): EntityAction[] => {
+            const deleteEnabled = entity ? canDelete(collection, path, entity) : true;
+            const actions: EntityAction[] = [editEntityAction];
+            if (createEnabled)
+                actions.push(copyEntityAction);
+            if (deleteEnabled)
+                actions.push(deleteEntityAction);
+            if (customEntityActions)
+                return mergeEntityActions(actions, customEntityActions);
+            return actions;
+        };
+
+        const getIdColumnWidth = () => {
+            const entityActions = getActionsForEntity({});
+            const collapsedActions = entityActions.filter(a => a.collapsed !== false);
+            const uncollapsedActions = entityActions.filter(a => a.collapsed === false);
+            const actionsWidth = uncollapsedActions.length * (largeLayout ? 40 : 30);
+            return (largeLayout ? (80 + actionsWidth) : (70 + actionsWidth)) + (collapsedActions.length > 0 ? (largeLayout ? 40 : 30) : 0);
+        };
+
+        const tableRowActionsBuilder = useCallback(({
+            entity,
+            size,
+            width,
+            frozen
+        }: {
+            entity: Entity<any>,
+            size: CollectionSize,
+            width: number,
+            frozen?: boolean
+        }) => {
+
+            const isSelected = Boolean(usedSelectionController.selectedEntities.find(e => e.id == entity.id && e.path == entity.path));
+            const customEntityActions = (collection.entityActions ?? [])
+                .map(action => resolveEntityAction(action, customizationController.entityActions))
+                .filter(Boolean) as EntityAction<M>[];
+
+            const actions = getActionsForEntity({
+                entity,
+                customEntityActions
+            });
+
+            return (
+                <EntityCollectionRowActions
+                    entity={entity}
+                    width={width}
+                    frozen={frozen}
+                    isSelected={isSelected}
+                    selectionEnabled={selectionEnabled}
+                    size={size}
+                    highlightEntity={setHighlightedEntity}
+                    unhighlightEntity={unselectNavigatedEntity}
+                    collection={collection}
+                    path={path}
+                    actions={actions}
+                    hideId={collection?.hideIdFromCollection}
+                    onCollectionChange={updateLastDeleteTimestamp}
+                    selectionController={usedSelectionController}
+                    openEntityMode={openEntityMode}
+                />
+            );
+
+        }, [updateLastDeleteTimestamp, usedSelectionController]);
+
+        // Update breadcrumb count when count changes (only if loaded)
+        useEffect(() => {
+            if (docsCount !== undefined) {
+                breadcrumbs.updateCount(path, docsCount);
+            }
+        }, [docsCount, path, breadcrumbs.updateCount]);
+
+        // EntitiesCount fetches count and updates breadcrumb - no visual rendering needed here
+        const countFetcher = <EntitiesCount
+            path={path}
+            collection={collection}
+            filter={tableController.filterValues}
+            sortBy={tableController.sortBy}
+            onCountChange={setDocsCount}
+        />;
+
+        const { resolvedSlots } = customizationController;
+
+        // Pre-compute header action slot contributions (avoid useSlot inside callback)
+        const headerActionContributions = resolvedSlots
+            .filter(s => s.slot === "collection.header.action")
+            .sort((a, b) => (a.order ?? 50) - (b.order ?? 50));
+
+        const buildAdditionalHeaderWidget = useCallback(({
+            property,
+            propertyKey,
+            onHover
+        }: {
+            property: Property,
+            propertyKey: string,
+            onHover: boolean
+        }) => {
+            const collection = collectionRef.current;
+            const headerSlotProps = {
+                property,
+                propertyKey,
+                onHover,
+                path,
+                collection: collection as unknown as EntityCollection,
+                tableController: tableController as unknown as EntityTableController,
+                parentCollectionIds: parentCollectionIds ?? []
+            };
+            return <>{headerActionContributions.map((s, i) => (
+                <ErrorBoundary key={`header_action_${propertyKey}_${i}`}>
+                    <s.Component {...headerSlotProps} {...(s.props ?? {})} />
+                </ErrorBoundary>
+            ))}</>;
+        }, [headerActionContributions, path, parentCollectionIds]);
+
+        const addColumnComponentInternal = pluginAddColumnComponents.length > 0
+            ? function () {
+                return (
+                    <div className="flex flex-row items-center gap-2">
+                        {pluginAddColumnComponents}
+                    </div>
+                );
+            }
+            : undefined;
+
+
+
+        // Popover open state managed at parent level to prevent closing when view changes
+        const [viewModePopoverOpen, setViewModePopoverOpen] = useState(false);
+
+        // Create ViewModeToggle once to prevent remounting when view changes
+        const viewModeToggleElement = (
+            <ViewModeToggle
+                viewMode={viewMode}
+                onViewModeChange={onViewModeChange}
+                enabledViews={enabledViews}
+                size={viewMode === "table" ? tableSize : viewMode === "cards" ? cardSize : undefined}
+                onSizeChanged={viewMode === "table" ? onTableSizeChanged : viewMode === "cards" ? setCardSize : undefined}
+                open={viewModePopoverOpen}
+                onOpenChange={setViewModePopoverOpen}
+                kanbanPropertyOptions={kanbanPropertyOptions}
+                selectedKanbanProperty={selectedKanbanProperty}
+                onKanbanPropertyChange={onKanbanPropertyChange}
+            />
+        );
+
+        // Compute plugin-provided error view for collection loading errors
+        const pluginErrorViews = useSlot("collection.error", {
+            path,
+            collection,
+            parentCollectionIds,
+            error: tableController.dataLoadingError as Error
+        });
+        const pluginErrorView = tableController.dataLoadingError && pluginErrorViews.length > 0
+            ? pluginErrorViews[0]
+            : null;
+
+        // Shared empty state — plugin slot takes priority, then default
+        const isFilteredOrSorted = tableController.filterValues !== undefined || tableController.sortBy !== undefined;
+        const emptyComponent = pluginEmptyStates.length > 0
+            ? <>{pluginEmptyStates}</>
+            : canCreateEntities && !isFilteredOrSorted
+                ? <div className="flex flex-col items-center justify-center">
+                    <Typography variant={"subtitle2"}>{t("so_empty")}</Typography>
+                    <Button
+                        onClick={onNewClick}
+                        className="mt-4"
+                    >
+                        <AddIcon />
+                        {t("create_your_first_entry")}
+                    </Button>
+                </div>
+                : <Typography variant={"label"}>{t("no_results_filter_sort")}</Typography>;
+
+        return (
+            <div className={cls("overflow-hidden h-full w-full rounded-md flex flex-col", className)}
+                ref={containerRef}>
+
+                {/* Unified toolbar - rendered once, outside view conditionals */}
+                {countFetcher}
+                <CollectionTableToolbar
+                    loading={tableController.dataLoading}
+                    onTextSearch={tableController.setSearchString}
+                    viewModeToggle={viewModeToggleElement}
+                    actionsStart={<EntityCollectionViewStartActions
+                        parentCollectionIds={parentCollectionIds ?? []}
+                        collection={collection}
+                        tableController={tableController}
+                        path={path}
+                        relativePath={collection.slug}
+                        selectionController={usedSelectionController}
+                        collectionEntitiesCount={docsCount}
+                        resolvedProperties={resolvedCollection.properties} />}
+                    actions={<>
+                        {pluginToolbarWidgets}
+                        <EntityCollectionViewActions
+                            parentCollectionIds={parentCollectionIds ?? []}
+                            collection={collection}
+                            tableController={tableController}
+                            onMultipleDeleteClick={onMultipleDeleteClick}
+                            onNewClick={onNewClick}
+                            path={path}
+                            relativePath={collection.slug}
+                            selectionController={usedSelectionController}
+                            selectionEnabled={selectionEnabled}
+                            collectionEntitiesCount={docsCount}
+                        />
+                    </>}
+                />
+
+                {/* View content - only the view-specific content changes */}
+                {viewMode === "kanban" ? (
+                    <EntityCollectionBoardView
+                        key={`kanban-view-${path}-${selectedKanbanProperty}`}
+                        collection={collection}
+                        tableController={tableController}
+                        fullPath={path}
+                        parentCollectionIds={parentCollectionIds}
+                        columnProperty={selectedKanbanProperty}
+                        onEntityClick={onEntityClick}
+                        selectionController={usedSelectionController}
+                        selectionEnabled={selectionEnabled}
+                        highlightedEntities={highlightedEntity ? [highlightedEntity] : []}
+                        deletedEntities={deletedEntities}
+                        emptyComponent={emptyComponent}
+                    />
+                ) : viewMode === "cards" ? (
+                    <EntityCollectionCardView
+                        key={`cards-view-${path}`}
+                        collection={collection}
+                        tableController={tableController}
+                        onEntityClick={onEntityClick}
+                        selectionController={usedSelectionController}
+                        selectionEnabled={selectionEnabled}
+                        highlightedEntities={highlightedEntity ? [highlightedEntity] : []}
+                        onScroll={tableController.onScroll}
+                        initialScroll={tableController.initialScroll}
+                        size={cardSize}
+                        emptyComponent={emptyComponent}
+                    />
+                ) : (
+                    <EntityCollectionTable
+                        key={`collection_table_${path}`}
+                        hideToolbar={true}
+                        additionalFields={additionalFields}
+                        tableController={tableController}
+                        enablePopupIcon={true}
+                        displayedColumnIds={displayedColumnIds}
+                        onSizeChanged={onTableSizeChanged}
+                        onEntityClick={onEntityClick}
+                        onColumnResize={onColumnResize}
+                        onValueChange={onValueChange}
+                        tableRowActionsBuilder={tableRowActionsBuilder}
+                        uniqueFieldValidator={uniqueFieldValidator}
+                        selectionController={usedSelectionController}
+                        highlightedEntities={highlightedEntity ? [highlightedEntity] : []}
+                        defaultSize={tableSize}
+                        properties={resolvedCollection.properties}
+                        getPropertyFor={getPropertyFor}
+                        onScroll={tableController.onScroll}
+                        initialScroll={tableController.initialScroll}
+                        emptyComponent={emptyComponent}
+                        hoverRow={hoverRow}
+                        inlineEditing={checkInlineEditing()}
+                        AdditionalHeaderWidget={buildAdditionalHeaderWidget}
+                        AddColumnComponent={addColumnComponentInternal}
+                        getIdColumnWidth={getIdColumnWidth}
+                        additionalIDHeaderWidget={<EntityIdHeaderWidget
+                            path={path}
+                            idPath={path}
+                            collection={collection} />}
+                        openEntityMode={openEntityMode}
+                        onColumnsOrderChange={(newColumns) => {
+                            // Extract property keys from the new column order
+                            // Filter to only include actual property columns (not frozen columns, not additional fields, etc.)
+                            // Deduplicate to clean up any previously duplicated keys
+                            const seenKeys = new Set<string>();
+                            const newPropertiesOrder = newColumns
+                                .filter(col => !col.frozen && getPropertyInPath(collection.properties, col.key))
+                                .map(col => col.key)
+                                .filter(key => {
+                                    if (seenKeys.has(key)) return false;
+                                    seenKeys.add(key);
+                                    return true;
+                                });
+
+                            // Optimistically update local state to prevent UI flickering
+                            setLocalPropertiesOrder(newPropertiesOrder);
+
+                            // Call each plugin's onColumnsReorder callback
+                            if (customizationController?.plugins) {
+                                customizationController.plugins
+                                    .filter(plugin => plugin.hooks?.onColumnsReorder)
+                                    .forEach(plugin => {
+                                        plugin.hooks!.onColumnsReorder!({
+                                            fullPath: path,
+                                            parentCollectionIds: parentCollectionIds ?? [],
+                                            collection,
+                                            newPropertiesOrder
+                                        });
+                                    });
+                            }
+                        }}
+                    />
+                )}
+
+                {popupCell && <PopupFormField
+                    key={`popup_form_${popupCell?.propertyKey}_${popupCell?.entityId}`}
+                    open={Boolean(popupCell)}
+                    onClose={onPopupClose}
+                    cellRect={popupCell?.cellRect}
+                    propertyKey={popupCell?.propertyKey}
+                    collection={collection}
+                    entityId={popupCell.entityId}
+                    tableKey={tableKey.current}
+                    customFieldValidator={uniqueFieldValidator}
+                    path={path}
+                    onCellValueChange={onValueChange}
+                    container={containerRef.current} />}
+
+                {deleteEntityClicked &&
+                    <DeleteEntityDialog
+                        entityOrEntitiesToDelete={deleteEntityClicked}
+                        path={path}
+                        collection={collection}
+                        callbacks={collection.callbacks}
+                        open={Boolean(deleteEntityClicked)}
+                        onEntityDelete={internalOnEntityDelete}
+                        onMultipleEntitiesDelete={internalOnMultipleEntitiesDelete}
+                        onClose={() => setDeleteEntityClicked(undefined)} />}
+
+            </div>
+        );
+    }, (a, b) => {
+        return equal(a.path, b.path) &&
+            equal(a.parentCollectionIds, b.parentCollectionIds) &&
+            equal(a.isSubCollection, b.isSubCollection) &&
+            equal(a.className, b.className) &&
+            equal(a.properties, b.properties) &&
+            equal(a.propertiesOrder, b.propertiesOrder) &&
+            equal(a.hideIdFromCollection, b.hideIdFromCollection) &&
+            equal(a.inlineEditing, b.inlineEditing) &&
+            equal(a.selectionEnabled, b.selectionEnabled) &&
+            equal(a.selectionController, b.selectionController) &&
+            equal(a.Actions, b.Actions) &&
+            equal(a.defaultSize, b.defaultSize) &&
+            equal(a.includeJsonView, b.includeJsonView) &&
+            equal(a.additionalFields, b.additionalFields) &&
+            equal(a.sideDialogWidth, b.sideDialogWidth) &&
+            equal(a.openEntityMode, b.openEntityMode) &&
+            equal(a.exportable, b.exportable) &&
+            equal(a.history, b.history) &&
+            equal(a.forceFilter, b.forceFilter);
+    }) as React.FunctionComponent<EntityCollectionViewProps<any>>
+
+function EntitiesCount({
+    path,
+    collection,
+    filter,
+    sortBy,
+    onCountChange
+}: {
+    path: string,
+    collection: EntityCollection,
+    filter?: FilterValues<any>,
+    sortBy?: [string, "asc" | "desc"],
+    onCountChange?: (count: number) => void,
+}) {
+
+    const dataClient = useData();
+    const navigation = useCollectionRegistryController();
+    const [count, setCount] = useState<number | undefined>(undefined);
+    const [error, setError] = useState<Error | undefined>(undefined);
+
+    const sortByProperty = sortBy ? sortBy[0] : undefined;
+    const currentSort = sortBy ? sortBy[1] : undefined;
+    // v4: use path directly instead of resolveIdsFrom
+    const resolvedPath = path;
+
+    useEffect(() => {
+        const accessor = dataClient.collection(resolvedPath);
+        if (accessor.count) {
+            // Convert filterValues to PostgREST where clause
+            const whereMap: Record<string, string> = {};
+            if (filter) {
+                Object.entries(filter).forEach(([key, value]) => {
+                    if (value && Array.isArray(value)) {
+                        const [op, val] = value;
+                        const postgrestOp = op === "==" ? "eq" : op === "!=" ? "neq" : op === ">" ? "gt" : op === ">=" ? "gte" : op === "<" ? "lt" : op === "<=" ? "lte" : op === "in" ? "in" : op === "not-in" ? "nin" : op === "array-contains" ? "cs" : op === "array-contains-any" ? "csa" : "eq";
+                        
+                        let stringVal: string;
+                        if (Array.isArray(val)) {
+                            stringVal = `(${val.join(",")})`;
+                        } else {
+                            stringVal = String(val);
+                        }
+                        whereMap[key] = `${postgrestOp}.${stringVal}`;
+                    }
+                });
+            }
+            const whereParams = Object.keys(whereMap).length > 0 ? whereMap : undefined;
+            const orderByParams = sortByProperty ? `${String(sortByProperty)}:${currentSort}` : undefined;
+
+            accessor.count({
+                where: whereParams,
+                orderBy: orderByParams
+            }).then(setCount).catch(setError);
+        }
+    }, [path, resolvedPath, collection, filter, sortByProperty, currentSort, dataClient]);
+
+    useEffect(() => {
+        if (onCountChange && count !== undefined) {
+            setError(undefined);
+            onCountChange(count);
+        }
+    }, [onCountChange, count]);
+
+    if (error) {
+        return null;
+    }
+
+    // Count is now displayed in the breadcrumb bar, this component only fetches and reports
+    return null;
+}
+
+function buildPropertyWidthOverwrite(key: string, width: number): PartialEntityCollection {
+    if (key.includes(".")) {
+        const [parentKey, ...childKey] = key.split(".");
+        return { properties: { [parentKey]: buildPropertyWidthOverwrite(childKey.join("."), width) } } as PartialEntityCollection;
+    }
+    return { properties: { [key]: { columnWidth: width } } } as PartialEntityCollection;
+}
+
+function EntityIdHeaderWidget({
+    collection,
+    path,
+    idPath
+}: {
+    collection: EntityCollection,
+    path: string,
+    idPath: string
+}) {
+
+    const { t } = useTranslation();
+    const urlController = useUrlController();
+    const [openPopup, setOpenPopup] = React.useState(false);
+    const [searchString, setSearchString] = React.useState("");
+    const [recentIds, setRecentIds] = React.useState<string[]>(getRecentIds(collection.slug).map(String));
+    const sideEntityController = useSideEntityController();
+
+    const openEntityMode = collection?.openEntityMode ?? DEFAULT_ENTITY_OPEN_MODE;
+
+    return (
+        <Tooltip title={!openPopup ? t("find_by_id") : undefined} asChild={false}>
+            <Popover
+                open={openPopup}
+                onOpenChange={setOpenPopup}
+                sideOffset={0}
+                align={"start"}
+                alignOffset={-117}
+                trigger={
+                    <IconButton size={"small"}>
+                        <SearchIcon size={"small"} />
+                    </IconButton>
+                }>
+                <div
+                    className={cls("my-2 rounded-lg bg-surface-50 dark:bg-surface-950 text-surface-900 dark:text-white")}>
+                    <form noValidate={true}
+                        onSubmit={(e) => {
+                            e.preventDefault();
+                            if (!searchString) return;
+                            setOpenPopup(false);
+                            const entityId = searchString.trim();
+                            setRecentIds(addRecentId(collection.slug, entityId).map(String));
+                            navigateToEntity({
+                                openEntityMode,
+                                collection,
+                                entityId,
+                                path,
+
+                                sideEntityController,
+                                navigation: urlController
+                            })
+                        }}
+                        className={"w-96 max-w-full"}>
+
+                        <div className="flex p-2 w-full gap-2">
+                            <input
+                                autoFocus={openPopup}
+                                placeholder={t("find_entity_by_id")}
+                                // size={"small"}
+                                onChange={(e) => {
+                                    setSearchString(e.target.value);
+                                }}
+                                value={searchString}
+                                className={"rounded-lg bg-white dark:bg-surface-800 flex-grow bg-transparent outline-none p-2 " + focusedDisabled} />
+                            <Button variant={"text"}
+                                disabled={!(searchString.trim())}
+                                type={"submit"}
+                            ><KeyboardTabIcon /></Button>
+                        </div>
+                    </form>
+                    {recentIds && recentIds.length > 0 && <div className="flex flex-col gap-2 p-2">
+                        {recentIds.map(id => (
+                            <ReferencePreview reference={new EntityReference({ id, path })}
+                                key={id}
+                                hover={true}
+                                onClick={() => {
+                                    setOpenPopup(false);
+                                    navigateToEntity({
+                                        openEntityMode,
+                                        collection,
+                                        entityId: id,
+                                        path,
+
+                                        sideEntityController,
+                                        navigation: urlController
+                                    })
+                                }}
+                                includeEntityLink={false}
+                                size={"small"} />
+                        ))}
+                    </div>}
+                </div>
+            </Popover>
+
+        </Tooltip>
+    );
+}