@rebasepro/admin 0.0.1-canary.eae7889 → 0.0.1-canary.eb08332

package/src/components/{EntityCollectionView/EntityCollectionView.tsx → CollectionViewBinding/CollectionViewBinding.tsx}

@@ -1,18 +1,20 @@
-
-import type { AdditionalFieldDelegate, EntityCollection } from "@rebasepro/types";
-import type { EntityAction, Property } from "@rebasepro/types";
+import type { AdditionalFieldDelegate, EntityAction, CollectionConfig, Property } from "@rebasepro/types";
+import {
+    CollectionSize,
+    Entity,
+    EntityReference,
+    EntityTableController,
+    FilterValues,
+    getCollectionDataPath,
+    PartialCollectionConfig,
+    ViewMode
+} from "@rebasepro/types";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { useSearchParams } from "react-router-dom";
 
 import { deepEqual as equal } from "fast-equals"
-
-const EMPTY_ARRAY: any[] = [];
-
-import { CollectionSize, Entity, EntityReference, EntityTableController, FilterValues, PartialEntityCollection, SaveEntityProps, ViewMode } from "@rebasepro/types";
-import {
-    EntityCollectionRowActions,
-    EntityCollectionTable
-} from "../EntityCollectionTable";
-import { CollectionTableToolbar } from "../EntityCollectionTable/internal/CollectionTableToolbar";
+import { CollectionRowActions, CollectionTableBinding } from "../CollectionTableBinding";
+import { CollectionTableToolbar } from "../CollectionTableBinding/internal/CollectionTableToolbar";
 import { getSubcollections } from "@rebasepro/common";
 import { useCollectionInlineEditor } from "./hooks/useCollectionInlineEditor";
 import { navigateToEntity } from "../../util/navigation_utils";
@@ -21,62 +23,79 @@ import { resolveEntityAction } from "../../util/resolutions";
 import { getPropertyInPath } from "../../util/property_utils";
 import { ReferencePreview } from "../../preview";
 import {
-    saveEntityWithCallbacks,
+    CollectionScopeProvider,
+    OnColumnResizeParams,
+    useAnalyticsController,
     useAuthController,
+    useColumnIds,
+    useComponentOverride,
     useCustomizationController,
     useData,
     useDataTableController,
     useLargeLayout,
     usePermissions,
+    useScrollRestoration,
+    useSlot,
     useTranslation,
-    useSlot
-} from "@rebasepro/core";
-import { useUserConfigurationPersistence } from "@rebasepro/core";
-import { EntityCollectionViewActions } from "./EntityCollectionViewActions";
-import { EntityCollectionCardView } from "./EntityCollectionCardView";
-import { EntityCollectionListView } from "./EntityCollectionListView";
+    useUserConfigurationPersistence
+} from "@rebasepro/app";
+import { CollectionViewActions } from "./CollectionViewActions";
+import { CollectionCardViewBinding } from "./CollectionCardViewBinding";
+import { CollectionListViewBinding } from "./CollectionListViewBinding";
 import { SplitListView } from "./SplitListView";
-import { EntityCollectionBoardView } from "./EntityCollectionBoardView";
-import { ViewModeToggle, KanbanPropertyOption } from "./ViewModeToggle";
-import { Button, cls, focusedDisabled, IconButton, Markdown, Popover, Skeleton, Tooltip, Typography, VirtualTableColumn , iconSize } from "@rebasepro/ui";
-import { PlusIcon, ArrowRightToLineIcon, SearchIcon } from "lucide-react";
-import { setIn } from "@rebasepro/formex";
-import { getSubcollectionColumnId } from "../EntityCollectionTable/internal/common";
+import { CollectionBoardViewBinding } from "./CollectionBoardViewBinding";
+import { KanbanPropertyOption, ViewModeToggle } from "./ViewModeToggle";
 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";
+    ArrowRightToLineIcon,
+    Button,
+    cls,
+    ErrorBoundary,
+    focusedDisabled,
+    IconButton,
+    iconSize,
+    PlusIcon,
+    Popover,
+    SearchIcon,
+    TextField,
+    Tooltip,
+    Typography,
+    VirtualTableColumn
+} from "@rebasepro/ui";
+import { getSubcollectionColumnId } from "../CollectionTableBinding/internal/common";
+import { copyEntityAction, deleteEntityAction, editEntityAction } from "../common/default_entity_actions";
+import { PopupFormField } from "../CollectionTableBinding/internal/popup_field/PopupFormField";
+import { GetPropertyForProps } from "../CollectionTableBinding/CollectionTableBindingProps";
 import { DeleteEntityDialog } from "../DeleteEntityDialog";
-import { useAnalyticsController } from "@rebasepro/core";
 import { useSelectionController } from "./useSelectionController";
-import { EntityCollectionViewStartActions } from "./EntityCollectionViewStartActions";
+import { CollectionViewStartActions } from "./CollectionViewStartActions";
 import { addRecentId, getRecentIds } from "./utils";
-import { useScrollRestoration } from "@rebasepro/core";
-import { ErrorBoundary } from "@rebasepro/ui";
 import { mergeDeep } from "@rebasepro/utils";
-import { useCollectionRegistryController, useUrlController, useSideEntityController, useCMSContext } from "../../index";
-import { useBreadcrumbsController } from "../../index";
+import {
+    useBreadcrumbsController,
+    useCMSContext,
+    useCollectionRegistryController,
+    useSidePanel,
+    useUrlController
+} from "../../index";
 
-const DEFAULT_ENTITY_OPEN_MODE: "side_panel" | "full_screen" | "split" = "split";
+const EMPTY_ARRAY: never[] = [];
+const DEFAULT_ENTITY_OPEN_MODE = "split";
 
 function getOpenEntityMode(
     viewMode: ViewMode,
-    configuredMode?: "side_panel" | "full_screen" | "split"
-): "side_panel" | "full_screen" | "split" {
+    configuredMode?: "side_panel" | "full_screen" | "split" | "dialog"
+): "side_panel" | "full_screen" | "split" | "dialog" {
     if (configuredMode) return configuredMode;
     if (viewMode === "kanban") return "side_panel";
-    return DEFAULT_ENTITY_OPEN_MODE;
+    if (viewMode === "table" || viewMode === "cards") return "full_screen";
+    // "list" view defaults to split
+    return "split";
 }
 
 /**
  * @group Components
  */
-export type EntityCollectionViewProps<M extends Record<string, unknown>> = {
+export type CollectionViewBindingProps<M extends Record<string, unknown>> = {
     /**
      * Complete path where this collection is located.
      * It defaults to the collection path if not provided.
@@ -89,7 +108,7 @@ export type EntityCollectionViewProps<M extends Record<string, unknown>> = {
     /**
      * If this is a subcollection, specify the parent collection ids.
      */
-    parentCollectionIds?: string[];
+    parentCollectionSlugs?: string[], parentEntityIds?: string[];
     /**
      * Whether this is a subcollection or not.
      */
@@ -114,23 +133,23 @@ export type EntityCollectionViewProps<M extends Record<string, unknown>> = {
      */
     selectedTab?: string;
 
-} & EntityCollection<M>;
+} & CollectionConfig<M>;
 
 /**
- * This component is in charge of binding a driver path with an {@link EntityCollection}
+ * This component is in charge of binding a driver path with an {@link CollectionConfig}
  * 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}
+ * of the lower level {@link CollectionTableBinding}
  *
  * 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}.
+ * can use {@link CollectionTableBinding}.
  *
  * If you need a generic table that is not bound to the driver or entities and
  * properties at all, you can check {@link VirtualTable}
@@ -140,18 +159,18 @@ export type EntityCollectionViewProps<M extends Record<string, unknown>> = {
 
  * @group Components
  */
-export const EntityCollectionView = React.memo(
-    function EntityCollectionView<M extends Record<string, unknown>>({
+const CollectionViewBindingInner = React.memo(
+    function CollectionViewBindingInner<M extends Record<string, unknown>>({
         path: pathProp,
 
-        parentCollectionIds,
+        parentCollectionSlugs, parentEntityIds,
         isSubCollection,
         className,
         updateUrl,
         selectedEntityId: selectedEntityIdProp,
         selectedTab: selectedTabProp,
         ...collectionProp
-    }: EntityCollectionViewProps<M>
+    }: CollectionViewBindingProps<M>
     ) {
 
         const { t } = useTranslation();
@@ -159,9 +178,9 @@ export const EntityCollectionView = React.memo(
         const collectionRegistry = useCollectionRegistryController();
         const urlController = useUrlController();
         const breadcrumbs = useBreadcrumbsController();
-        const path = pathProp ?? collectionProp.slug;
+        const path = pathProp ?? getCollectionDataPath(collectionProp);
         const dataClient = useData();
-        const sideEntityController = useSideEntityController();
+        const sidePanelController = useSidePanel();
         const authController = useAuthController();
         const userConfigPersistence = useUserConfigurationPersistence();
         const analyticsController = useAnalyticsController();
@@ -173,9 +192,10 @@ export const EntityCollectionView = React.memo(
         const scrollRestoration = useScrollRestoration();
 
         const collection = useMemo(() => {
+            const registryCollection = collectionRegistry.getCollection(path) || collectionProp;
             const userOverride = userConfigPersistence?.getCollectionConfig<M>(path);
-            return (userOverride ? mergeDeep(collectionProp, userOverride) : collectionProp) as EntityCollection<M>;
-        }, [collectionProp, path, userConfigPersistence?.getCollectionConfig]);
+            return (userOverride ? mergeDeep(registryCollection, userOverride) : registryCollection) as CollectionConfig<M>;
+        }, [collectionProp, path, userConfigPersistence, collectionRegistry]);
 
         const collectionRef = React.useRef(collection);
         useEffect(() => {
@@ -210,7 +230,7 @@ export const EntityCollectionView = React.memo(
             }, 2400);
         }, [highlightedEntity]);
 
-        const checkInlineEditing = useCallback((entity?: Entity<any>): boolean => {
+        const checkInlineEditing = useCallback((entity?: Entity<M>): boolean => {
             const collection = collectionRef.current;
             if (!canEdit(collection, path, entity ?? null)) {
                 return false;
@@ -225,16 +245,16 @@ export const EntityCollectionView = React.memo(
 
         // View mode priority: URL > saved user config > collection.defaultViewMode
         const defaultViewMode = collection.defaultViewMode ?? "list";
+        const [searchParams, setSearchParams] = useSearchParams();
 
-        // Parse view from URL
-        const getViewFromUrl = useCallback((): ViewMode | null => {
-            const params = new URLSearchParams(window.location.search);
-            const urlView = params.get("__view");
-            if (urlView && ["list", "table", "kanban", "cards"].includes(urlView)) {
-                return urlView as ViewMode;
+        // Read view from React Router's searchParams (reactive on back/forward)
+        const urlView = useMemo((): ViewMode | null => {
+            const v = searchParams.get("__view");
+            if (v && ["list", "table", "kanban", "cards"].includes(v)) {
+                return v as ViewMode;
             }
             return null;
-        }, []);
+        }, [searchParams]);
 
         // Get saved view from local persistence
         const getSavedView = useCallback((): ViewMode | null => {
@@ -244,7 +264,6 @@ export const EntityCollectionView = React.memo(
 
         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;
@@ -255,12 +274,13 @@ export const EntityCollectionView = React.memo(
 
         // Sync URL with current view on init (if view came from saved config)
         useEffect(() => {
-            const urlView = getViewFromUrl();
             if (!urlView && viewMode !== defaultViewMode) {
                 // 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());
+                setSearchParams((prev) => {
+                    const next = new URLSearchParams(prev);
+                    next.set("__view", viewMode);
+                    return next;
+                }, { replace: true });
             }
         }, []); // Only on mount
 
@@ -268,33 +288,27 @@ export const EntityCollectionView = React.memo(
         const setViewMode = useCallback((newMode: ViewMode) => {
             setViewModeState(newMode);
 
-            // Update URL with __view param
-            const url = new URL(window.location.href);
-            if (newMode === defaultViewMode) {
-                url.searchParams.delete("__view");
-            } else {
-                url.searchParams.set("__view", newMode);
-            }
-            window.history.pushState({}, "", url.toString());
-        }, [defaultViewMode]);
-
-        // Listen for browser back/forward
-        useEffect(() => {
-            const handlePopState = () => {
-                const urlView = getViewFromUrl();
-                if (urlView) {
-                    // URL has explicit view - use it
-                    setViewModeState(urlView);
+            // Update URL with __view param via React Router
+            setSearchParams((prev) => {
+                const next = new URLSearchParams(prev);
+                if (newMode === defaultViewMode) {
+                    next.delete("__view");
                 } else {
-                    // No URL param - fallback to saved config or collection default
-                    const savedView = getSavedView();
-                    setViewModeState(savedView ?? defaultViewMode);
+                    next.set("__view", newMode);
                 }
-            };
+                return next;
+            });
+        }, [defaultViewMode, setSearchParams]);
 
-            window.addEventListener("popstate", handlePopState);
-            return () => window.removeEventListener("popstate", handlePopState);
-        }, [getViewFromUrl, getSavedView, defaultViewMode]);
+        // Sync viewMode state when URL changes via back/forward navigation
+        useEffect(() => {
+            if (urlView) {
+                setViewModeState(urlView);
+            } else {
+                const savedView = getSavedView();
+                setViewModeState(savedView ?? defaultViewMode);
+            }
+        }, [urlView, getSavedView, defaultViewMode]);
 
         // List view size state - controls row height and info density
         const [listSize, setListSize] = useState<CollectionSize>(collection.defaultSize ?? "m");
@@ -347,13 +361,14 @@ export const EntityCollectionView = React.memo(
             navigateToEntity({
                 navigation: urlController,
                 path: entityPath,
-                sideEntityController,
+                sidePanelController,
                 openEntityMode,
                 collection,
-                entityId: clickedEntity.id
+                entityId: clickedEntity.id,
+                replace: openEntityMode === "split" && selectedEntityIdProp !== undefined
             });
 
-        }, [unselectNavigatedEntity, sideEntityController]);
+        }, [sidePanelController, openEntityMode, selectedEntityIdProp, path, urlController, analyticsController]);
 
         const onNewClick = useCallback(() => {
             const collection = collectionRef.current;
@@ -365,11 +380,28 @@ export const EntityCollectionView = React.memo(
                 collection,
                 entityId: undefined,
                 path: path,
-                sideEntityController,
+                sidePanelController,
                 navigation: urlController,
                 onClose: unselectNavigatedEntity
             })
-        }, [path, sideEntityController]);
+        }, [path, sidePanelController]);
+
+        const openNewDocument = useCallback((defaultValues?: Record<string, unknown>) => {
+            const collection = collectionRef.current;
+            analyticsController.onAnalyticsEvent?.("new_entity_click", {
+                path: path
+            });
+            navigateToEntity({
+                openEntityMode,
+                collection,
+                entityId: undefined,
+                defaultValues,
+                path: path,
+                sidePanelController,
+                navigation: urlController,
+                onClose: unselectNavigatedEntity
+            });
+        }, [path, sidePanelController, openEntityMode, urlController, unselectNavigatedEntity]);
 
         const onMultipleDeleteClick = () => {
             analyticsController.onAnalyticsEvent?.("multiple_delete_dialog_open", {
@@ -399,14 +431,16 @@ export const EntityCollectionView = React.memo(
 
         const pluginAddColumnComponents = useSlot("collection.add-column", {
             path,
-            parentCollectionIds: parentCollectionIds ?? EMPTY_ARRAY,
+            parentCollectionSlugs: parentCollectionSlugs ?? EMPTY_ARRAY,
+parentEntityIds: parentEntityIds ?? EMPTY_ARRAY,
             collection,
             tableController
         });
 
         const pluginToolbarWidgets = useSlot("collection.toolbar", {
             path,
-            parentCollectionIds: parentCollectionIds ?? EMPTY_ARRAY,
+            parentCollectionSlugs: parentCollectionSlugs ?? EMPTY_ARRAY,
+parentEntityIds: parentEntityIds ?? EMPTY_ARRAY,
             collection: collection,
             tableController: tableController,
             selectionController: usedSelectionController
@@ -414,7 +448,8 @@ export const EntityCollectionView = React.memo(
 
         const pluginEmptyStates = useSlot("collection.empty-state", {
             path,
-            parentCollectionIds: parentCollectionIds ?? EMPTY_ARRAY,
+            parentCollectionSlugs: parentCollectionSlugs ?? EMPTY_ARRAY,
+parentEntityIds: parentEntityIds ?? EMPTY_ARRAY,
             collection,
             canCreate: canCreateEntities,
             onNewClick
@@ -422,11 +457,12 @@ export const EntityCollectionView = React.memo(
 
         const pluginInsights = useSlot("collection.insights", {
             path,
-            parentCollectionIds: parentCollectionIds ?? EMPTY_ARRAY,
+            parentCollectionSlugs: parentCollectionSlugs ?? EMPTY_ARRAY,
+parentEntityIds: parentEntityIds ?? EMPTY_ARRAY,
             collection
         });
 
-        const onCollectionModifiedForUser = useCallback((path: string, partialCollection: PartialEntityCollection<M>) => {
+        const onCollectionModifiedForUser = useCallback((path: string, partialCollection: PartialCollectionConfig<M>) => {
             if (userConfigPersistence) {
                 const currentStoredConfig = userConfigPersistence.getCollectionConfig(path);
                 const updatedConfig = mergeDeep(currentStoredConfig, partialCollection);
@@ -442,7 +478,7 @@ export const EntityCollectionView = React.memo(
             const collection = collectionRef.current;
             // Only for property columns
             if (!getPropertyInPath(collection.properties, key)) return;
-            const localCollection = buildPropertyWidthOverwrite(key, width) as PartialEntityCollection<M>;
+            const localCollection = buildPropertyWidthOverwrite(key, width) as PartialCollectionConfig<M>;
             onCollectionModifiedForUser(path, localCollection);
         }, [onCollectionModifiedForUser, path]);
 
@@ -468,7 +504,7 @@ export const EntityCollectionView = React.memo(
             setViewMode(mode);
             // Save to local persistence for next visit
             if (userConfigPersistence) {
-                onCollectionModifiedForUser(path, { defaultViewMode: mode } as PartialEntityCollection<M>);
+                onCollectionModifiedForUser(path, { defaultViewMode: mode } as PartialCollectionConfig<M>);
             }
         }, [setViewMode, userConfigPersistence, onCollectionModifiedForUser, path, analyticsController, viewMode]);
 
@@ -562,7 +598,7 @@ export const EntityCollectionView = React.memo(
             setSelectedKanbanProperty(property);
             // Save to local persistence
             if (userConfigPersistence) {
-                onCollectionModifiedForUser(path, { kanbanColumnProperty: property } as PartialEntityCollection<M>);
+                onCollectionModifiedForUser(path, { kanbanColumnProperty: property } as PartialCollectionConfig<M>);
             }
         }, [userConfigPersistence, onCollectionModifiedForUser, path, analyticsController]);
 
@@ -599,7 +635,7 @@ export const EntityCollectionView = React.memo(
         const additionalFields = useMemo(() => {
             // v4: use getSubcollections helper to access subcollections
             const subcollectionsList = getSubcollections(collection);
-            const subcollectionColumns: AdditionalFieldDelegate<M, any>[] = subcollectionsList.map((subcollection: EntityCollection) => {
+            const subcollectionColumns: AdditionalFieldDelegate<M, any>[] = subcollectionsList.map((subcollection: CollectionConfig) => {
                 return {
                     key: getSubcollectionColumnId(subcollection),
                     name: subcollection.name,
@@ -618,7 +654,7 @@ export const EntityCollectionView = React.memo(
                                     selectedTab: subcollection.slug,
                                     path: path,
                                     navigation: urlController,
-                                    sideEntityController
+                                    sidePanelController
                                 })
                             }}>
                             {subcollection.name}
@@ -631,7 +667,7 @@ export const EntityCollectionView = React.memo(
                 ...(collection.additionalFields ?? EMPTY_ARRAY),
                 ...subcollectionColumns
             ];
-        }, [collection, path, sideEntityController]);
+        }, [collection, path, sidePanelController]);
 
         const updateLastDeleteTimestamp = useCallback(() => {
             setLastDeleteTimestamp(Date.now());
@@ -651,10 +687,14 @@ export const EntityCollectionView = React.memo(
             customEntityActions?: EntityAction[]
         }): EntityAction[] => {
             const deleteEnabled = entity ? canDelete(collection, path, entity) : true;
-            const actions: EntityAction[] = [editEntityAction];
-            if (createEnabled)
+            const disableActions = collection.disableDefaultActions ?? [];
+            const actions: EntityAction[] = [];
+            if (!disableActions.includes("edit")) {
+                actions.push(editEntityAction);
+            }
+            if (createEnabled && !disableActions.includes("copy"))
                 actions.push(copyEntityAction);
-            if (deleteEnabled)
+            if (deleteEnabled && !disableActions.includes("delete"))
                 actions.push(deleteEntityAction);
             if (customEntityActions)
                 return mergeEntityActions(actions, customEntityActions);
@@ -692,7 +732,7 @@ export const EntityCollectionView = React.memo(
             });
 
             return (
-                <EntityCollectionRowActions
+                <CollectionRowActions
                     entity={entity}
                     width={width}
                     frozen={frozen}
@@ -714,9 +754,11 @@ export const EntityCollectionView = React.memo(
         }, [updateLastDeleteTimestamp, usedSelectionController]);
 
         // Update breadcrumb count when count changes
+        const updateCountRef = React.useRef(breadcrumbs.updateCount);
+        updateCountRef.current = breadcrumbs.updateCount;
         useEffect(() => {
-            breadcrumbs.updateCount(path, docsCount);
-        }, [docsCount, path, breadcrumbs.updateCount]);
+            updateCountRef.current(path, docsCount);
+        }, [docsCount, path]);
 
         // EntitiesCount fetches count and updates breadcrumb - no visual rendering needed here
         const countFetcher = <EntitiesCount
@@ -749,16 +791,17 @@ export const EntityCollectionView = React.memo(
                 propertyKey,
                 onHover,
                 path,
-                collection: collection as unknown as EntityCollection,
-                tableController: tableController as unknown as EntityTableController,
-                parentCollectionIds: parentCollectionIds ?? EMPTY_ARRAY
+                collection: collection as CollectionConfig,
+                tableController: tableController as EntityTableController,
+                parentCollectionSlugs: parentCollectionSlugs ?? EMPTY_ARRAY,
+parentEntityIds: parentEntityIds ?? EMPTY_ARRAY
             };
             return <>{headerActionContributions.map((s, i) => (
                 <ErrorBoundary key={`header_action_${propertyKey}_${i}`}>
                     <s.Component {...headerSlotProps} {...(s.props ?? {})}/>
                 </ErrorBoundary>
             ))}</>;
-        }, [headerActionContributions, path, parentCollectionIds]);
+        }, [headerActionContributions, path, parentCollectionSlugs]);
 
         const addColumnComponentInternal = pluginAddColumnComponents.length > 0
             ? function () {
@@ -794,13 +837,19 @@ export const EntityCollectionView = React.memo(
                     .forEach(plugin => {
                         plugin.hooks!.onColumnsReorder!({
                             fullPath: path,
-                            parentCollectionIds: parentCollectionIds ?? EMPTY_ARRAY,
+                            parentCollectionSlugs: parentCollectionSlugs ?? EMPTY_ARRAY,
+                            parentEntityIds: parentEntityIds ?? EMPTY_ARRAY,
                             collection,
                             newPropertiesOrder
                         });
                     });
             }
-        }, [collection, setLocalPropertiesOrder, customizationController, path, parentCollectionIds]);
+
+            // Save to user configuration persistence (local storage)
+            if (userConfigPersistence) {
+                onCollectionModifiedForUser(path, { propertiesOrder: newPropertiesOrder } as PartialCollectionConfig<M>);
+            }
+        }, [collection, setLocalPropertiesOrder, customizationController, path, parentCollectionSlugs, parentEntityIds, userConfigPersistence, onCollectionModifiedForUser]);
 
         // Popover open state managed at parent level to prevent closing when view changes
         const [viewModePopoverOpen, setViewModePopoverOpen] = useState(false);
@@ -825,71 +874,73 @@ export const EntityCollectionView = React.memo(
         const pluginErrorViews = useSlot("collection.error", {
             path,
             collection,
-            parentCollectionIds,
+            parentCollectionSlugs,
+parentEntityIds,
             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;
+        // Shared empty state — plugin slot takes priority, then override, then default
+        const isSearching = !!tableController.searchString;
+        const isFilteredOrSorted = tableController.filterValues !== undefined || tableController.sortBy !== undefined || isSearching;
+        const ResolvedEmptyState = useComponentOverride("Collection.EmptyState", DefaultCollectionEmptyState);
+        const ResolvedCollectionActions = useComponentOverride("Collection.Actions", CollectionViewActions);
+        const ResolvedCollectionTable = useComponentOverride("Collection.Table", CollectionTableBinding) as typeof CollectionTableBinding;
         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"
-                    >
-                        <PlusIcon/>
-                        {t("create_your_first_entry")}
-                    </Button>
-                </div>
-                : <Typography variant={"label"}>{t("no_results_filter_sort")}</Typography>;
+            : <ResolvedEmptyState
+                canCreate={canCreateEntities && !isFilteredOrSorted}
+                onNewClick={onNewClick}
+                isSearching={isSearching}
+                searchString={tableController.searchString ?? ""}
+            />;
 
         const toolbarNode = (
             <CollectionTableToolbar
                 compact={isCompact}
                 loading={tableController.dataLoading}
                 onTextSearch={tableController.setSearchString}
+                initialSearchText={tableController.searchString}
                 viewModeToggle={viewModeToggleElement}
-                actionsStart={<EntityCollectionViewStartActions
-                    parentCollectionIds={parentCollectionIds ?? EMPTY_ARRAY}
+                actionsStart={<CollectionViewStartActions
+                    parentCollectionSlugs={parentCollectionSlugs ?? EMPTY_ARRAY} parentEntityIds={parentEntityIds ?? EMPTY_ARRAY}
                     collection={collection}
                     tableController={tableController}
                     path={path}
-                    relativePath={collection.slug}
+                    relativePath={getCollectionDataPath(collection)}
                     selectionController={usedSelectionController}
                     collectionEntitiesCount={docsCount ?? undefined}
                     resolvedProperties={resolvedCollection.properties}
+                    openNewDocument={openNewDocument}
                     compact={isCompact}/>}
                 actions={
-                    <EntityCollectionViewActions
-                        parentCollectionIds={parentCollectionIds ?? EMPTY_ARRAY}
+                    <ResolvedCollectionActions
+                        parentCollectionSlugs={parentCollectionSlugs ?? EMPTY_ARRAY} parentEntityIds={parentEntityIds ?? EMPTY_ARRAY}
                         collection={collection}
                         tableController={tableController}
                         onMultipleDeleteClick={onMultipleDeleteClick}
                         onNewClick={onNewClick}
+                        openNewDocument={openNewDocument}
                         path={path}
-                        relativePath={collection.slug}
+                        relativePath={getCollectionDataPath(collection)}
                         selectionController={usedSelectionController}
                         selectionEnabled={activeSelectionEnabled}
                         collectionEntitiesCount={docsCount ?? undefined}
                         compact={isCompact}
                     >
                         {pluginToolbarWidgets}
-                    </EntityCollectionViewActions>
+                    </ResolvedCollectionActions>
                 }
             />
         ); const innerView = viewMode === "kanban" ? (
-            <EntityCollectionBoardView
+            <CollectionBoardViewBinding
                 key={`kanban-view-${path}-${selectedKanbanProperty}`}
                 collection={collection}
                 tableController={tableController}
                 fullPath={path}
-                parentCollectionIds={parentCollectionIds}
+                parentCollectionSlugs={parentCollectionSlugs} parentEntityIds={parentEntityIds}
                 columnProperty={selectedKanbanProperty}
                 onEntityClick={onEntityClick}
                 selectionController={usedSelectionController}
@@ -899,7 +950,7 @@ export const EntityCollectionView = React.memo(
                 emptyComponent={emptyComponent}
             />
         ) : viewMode === "cards" ? (
-            <EntityCollectionCardView
+            <CollectionCardViewBinding
                 key={`cards-view-${path}`}
                 collection={collection}
                 tableController={tableController}
@@ -913,7 +964,7 @@ export const EntityCollectionView = React.memo(
                 emptyComponent={emptyComponent}
             />
         ) : viewMode === "list" ? (
-            <EntityCollectionListView
+            <CollectionListViewBinding
                 key={`list-view-${path}`}
                 collection={collection}
                 tableController={tableController}
@@ -923,9 +974,12 @@ export const EntityCollectionView = React.memo(
                 highlightedEntities={highlightedEntity ? [highlightedEntity] : []}
                 size={listSize}
                 emptyComponent={emptyComponent}
+                getActionsForEntity={getActionsForEntity}
+                path={path}
+                openEntityMode={openEntityMode}
             />
         ) : (
-            <EntityCollectionTable
+            <ResolvedCollectionTable
                 key={`collection_table_${path}`}
                 hideToolbar={true}
                 additionalFields={additionalFields}
@@ -960,12 +1014,20 @@ export const EntityCollectionView = React.memo(
             />
         );
 
-        return (
+        const mainContent = (
             <div className={cls("overflow-hidden h-full w-full rounded-md flex flex-col dark:bg-surface-800", className)}
                 ref={containerRef}>
 
                 {countFetcher}
 
+                {tableController.dataLoadingError && tableController.data.length > 0 && (
+                    <div className="flex items-center gap-4 px-4 py-2 bg-red-50 dark:bg-red-900/20 border-b border-red-200 dark:border-red-800 flex-shrink-0">
+                        <Typography variant="body2" className="text-red-700 dark:text-red-300 flex-1">
+                            <strong>Warning:</strong> {tableController.dataLoadingError.message || "Failed to update data."}
+                        </Typography>
+                    </div>
+                )}
+
 
                 {/* When isSplitLayout, SplitListView is ALWAYS mounted — regardless
                     of viewMode. The toolbar + current view live in the left panel;
@@ -987,7 +1049,7 @@ export const EntityCollectionView = React.memo(
                         size={listSize}
                         emptyComponent={emptyComponent}
                         path={path}
-                        parentCollectionIds={parentCollectionIds}
+                        parentCollectionSlugs={parentCollectionSlugs} parentEntityIds={parentEntityIds}
                         selectedEntityId={selectedEntityIdProp}
                         selectedTab={selectedTabProp}
                         toolbar={toolbarNode}
@@ -1000,7 +1062,7 @@ export const EntityCollectionView = React.memo(
                                 className={cls(
                                     "flex flex-col w-full",
                                     selectedEntityIdProp === undefined
-                                        ? "max-w-6xl mx-auto px-3 md:px-4 lg-px-6 py-4"
+                                        ? "max-w-6xl mx-auto px-3 md:px-4 lg:px-6 py-4"
                                         : ""
                                 )}
                             >
@@ -1020,11 +1082,20 @@ export const EntityCollectionView = React.memo(
                                     </div>
                                 </div>
                                 {pluginInsights.length > 0 && (
-                                    <div className="flex-shrink-0">
-                                        {pluginInsights}
+                                    <div
+                                        className={cls(
+                                            "grid transition-[grid-template-rows] duration-150 ease-out",
+                                            selectedEntityIdProp === undefined
+                                                ? "grid-rows-[1fr]"
+                                                : "grid-rows-[0fr]"
+                                        )}
+                                    >
+                                        <div className="overflow-hidden flex-shrink-0">
+                                            {pluginInsights}
+                                        </div>
                                     </div>
                                 )}
-                                <EntityCollectionListView
+                                <CollectionListViewBinding
                                     key={`list-view-${path}`}
                                     collection={collection}
                                     tableController={tableController}
@@ -1035,6 +1106,9 @@ export const EntityCollectionView = React.memo(
                                     size={listSize}
                                     emptyComponent={emptyComponent}
                                     selectedEntityId={selectedEntityIdProp}
+                                    getActionsForEntity={getActionsForEntity}
+                                    path={path}
+                                    openEntityMode={openEntityMode}
                                 />
                             </div>
                         ) : (
@@ -1042,15 +1116,47 @@ export const EntityCollectionView = React.memo(
                         )}
                     </SplitListView>
                 ) : (
-                    <>
+                    <div className="flex flex-col w-full h-full">
                         {toolbarNode}
-                        {pluginInsights.length > 0 && (viewMode === "list" || viewMode === "table") && (
-                            <div className="px-3 md:px-4 lg:px-6 max-w-6xl mx-auto w-full flex-shrink-0">
-                                {pluginInsights}
-                            </div>
-                        )}
-                        {innerView}
-                    </>
+                        <div className={cls(
+                            "flex-1 flex flex-col",
+                            (viewMode === "list" || viewMode === "cards") && "overflow-y-auto"
+                        )}>
+                            {viewMode === "list" ? (
+                                <div
+                                    className={cls(
+                                        "flex flex-col w-full",
+                                        selectedEntityIdProp === undefined
+                                            ? "max-w-6xl mx-auto px-3 md:px-4 lg:px-6 py-4"
+                                            : ""
+                                    )}
+                                >
+                                    <div
+                                        className={cls(
+                                            "grid transition-[grid-template-rows,transform,margin] duration-150 ease-out",
+                                            selectedEntityIdProp === undefined
+                                                ? "grid-rows-[1fr] translate-y-0 mt-12 mb-6"
+                                                : "grid-rows-[0fr] -translate-y-2 mt-0 mb-0"
+                                        )}
+                                    >
+                                        <div className="overflow-hidden flex items-center gap-4">
+                                            <Typography gutterBottom variant="h4" className="grow mb-0" component="h4">
+                                                {collection.name}
+                                            </Typography>
+                                        </div>
+                                    </div>
+                                    {pluginInsights.length > 0 && (
+                                        <div className="flex-shrink-0">
+                                            {pluginInsights}
+                                        </div>
+                                    )}
+                                    {innerView}
+                                </div>
+                            ) : (
+                                innerView
+                            )}
+                        </div>
+                    </div>
                 )}
 
                 {popupCell && <PopupFormField
@@ -1080,9 +1186,11 @@ export const EntityCollectionView = React.memo(
 
             </div>
         );
+
+        return mainContent;
     }, (a, b) => {
         return equal(a.path, b.path) &&
-            equal(a.parentCollectionIds, b.parentCollectionIds) &&
+            equal(a.parentCollectionSlugs, b.parentCollectionSlugs) && equal(a.parentEntityIds, b.parentEntityIds) &&
             equal(a.isSubCollection, b.isSubCollection) &&
             equal(a.className, b.className) &&
             equal(a.properties, b.properties) &&
@@ -1099,10 +1207,77 @@ export const EntityCollectionView = React.memo(
             equal(a.openEntityMode, b.openEntityMode) &&
             equal(a.exportable, b.exportable) &&
             equal(a.history, b.history) &&
-            equal(a.forceFilter, b.forceFilter) &&
+            equal(a.fixedFilter, b.fixedFilter) &&
             equal(a.selectedEntityId, b.selectedEntityId) &&
             equal(a.selectedTab, b.selectedTab);
-    }) as React.FunctionComponent<EntityCollectionViewProps<any>>
+    }) as React.FunctionComponent<CollectionViewBindingProps<any>>;
+
+export const CollectionViewBinding = React.memo(
+    function CollectionViewBinding<M extends Record<string, unknown>>(props: CollectionViewBindingProps<M>) {
+        const collectionRegistry = useCollectionRegistryController();
+        const path = props.path ?? props.slug;
+        const collection = collectionRegistry.getCollection(path) ?? props;
+
+        const content = <CollectionViewBindingInner {...props} />;
+
+        if (collection) {
+            return (
+                <CollectionScopeProvider collection={collection as CollectionConfig}>
+                    {content}
+                </CollectionScopeProvider>
+            );
+        }
+        return content;
+    }
+) as React.FunctionComponent<CollectionViewBindingProps<any>>;
+
+/**
+ * Default empty state shown when a collection has no entities.
+ * Used as the fallback for the `"Collection.EmptyState"` component override.
+ *
+ * @internal
+ */
+function DefaultCollectionEmptyState({
+    canCreate,
+    onNewClick,
+    isSearching,
+    searchString
+}: {
+    canCreate: boolean;
+    onNewClick: () => void;
+    isSearching: boolean;
+    searchString: string;
+}) {
+    const { t } = useTranslation();
+    if (canCreate) {
+        return (
+            <div className="flex flex-col items-center justify-center">
+                <Typography variant={"subtitle2"}>{t("so_empty")}</Typography>
+                <Button
+                    onClick={onNewClick}
+                    className="mt-4"
+                >
+                    <PlusIcon/>
+                    {t("create_your_first_entry")}
+                </Button>
+            </div>
+        );
+    }
+    return (
+        <Typography variant={"label"}>
+            {isSearching
+                ? t("no_results_search", { search: searchString })
+                : t("no_results_filter_sort")}
+        </Typography>
+    );
+}
+
+/**
+ * Inflight count request deduplication map.
+ * Keyed by `path|filterKey|sortByProperty|sortDir` so that concurrent
+ * callers (e.g. React StrictMode double-mount) share the same promise.
+ */
+const inflightCountRequests = new Map<string, Promise<number>>();
 
 function EntitiesCount({
     path,
@@ -1112,70 +1287,72 @@ function EntitiesCount({
     onCountChange
 }: {
     path: string,
-    collection: EntityCollection,
+    collection: CollectionConfig,
     filter?: FilterValues<any>,
     sortBy?: [string, "asc" | "desc"],
     onCountChange?: (count: number | null | undefined) => void,
 }) {
 
     const dataClient = useData();
-    const navigation = useCollectionRegistryController();
 
     const sortByProperty = sortBy ? sortBy[0] : undefined;
     const currentSort = sortBy ? sortBy[1] : undefined;
-    // v4: use path directly instead of resolveIdsFrom
-    const resolvedPath = path;
+
+    // Use refs for values that should NOT trigger re-fetches
+    const dataClientRef = React.useRef(dataClient);
+    dataClientRef.current = dataClient;
+    const onCountChangeRef = React.useRef(onCountChange);
+    onCountChangeRef.current = onCountChange;
+
+    // Serialize filter to a stable string to avoid re-fetches on object identity changes
+    const filterKey = React.useMemo(() => filter ? JSON.stringify(filter) : "", [filter]);
 
     useEffect(() => {
-        const accessor = dataClient.collection(resolvedPath);
-        if (accessor.count) {
-            if (onCountChange) onCountChange(null);
-
-            // 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;
+        const accessor = dataClientRef.current.collection(path);
+        if (!accessor.count) {
+            onCountChangeRef.current?.(undefined);
+            return;
+        }
 
-            accessor.count({
+        let cancelled = false;
+
+        // filterValues is already FilterValues — pass directly
+        const whereParams = filter && Object.keys(filter).length > 0 ? filter : undefined;
+        const orderByParams: [string, "asc" | "desc"] | undefined = sortByProperty && currentSort ? [String(sortByProperty), currentSort] : undefined;
+
+        // Deduplicate inflight count requests (e.g. React StrictMode double-mount)
+        const cacheKey = `${path}|${filterKey}|${sortByProperty ?? ""}|${currentSort ?? ""}`;
+        let countPromise = inflightCountRequests.get(cacheKey);
+        if (!countPromise) {
+            countPromise = accessor.count({
                 where: whereParams,
                 orderBy: orderByParams
-            }).then((c) => {
-                if (onCountChange) onCountChange(c);
-            }).catch((e) => {
-                console.warn("Error fetching count", e);
-                if (onCountChange) onCountChange(undefined);
             });
-        } else {
-            if (onCountChange) onCountChange(undefined);
+            inflightCountRequests.set(cacheKey, countPromise);
+            // Clean up the inflight entry once resolved/rejected
+            countPromise.finally(() => inflightCountRequests.delete(cacheKey));
         }
-    }, [path, resolvedPath, collection, filter, sortByProperty, currentSort, dataClient]);
+
+        countPromise.then((c) => {
+            if (!cancelled) onCountChangeRef.current?.(c);
+        }).catch((e) => {
+            console.warn("Error fetching count", e);
+            if (!cancelled) onCountChangeRef.current?.(undefined);
+        });
+
+        return () => { cancelled = true; };
+    }, [path, filterKey, sortByProperty, currentSort]);
 
     // Count is now displayed in the breadcrumb bar, this component only fetches and reports
     return null;
 }
 
-function buildPropertyWidthOverwrite(key: string, width: number): PartialEntityCollection {
+function buildPropertyWidthOverwrite(key: string, width: number): PartialCollectionConfig {
     if (key.includes(".")) {
         const [parentKey, ...childKey] = key.split(".");
-        return { properties: { [parentKey]: buildPropertyWidthOverwrite(childKey.join("."), width) } } as PartialEntityCollection;
+        return { properties: { [parentKey]: buildPropertyWidthOverwrite(childKey.join("."), width) } } as PartialCollectionConfig;
     }
-    return { properties: { [key]: { columnWidth: width } } } as PartialEntityCollection;
+    return { properties: { [key]: { ui: { columnWidth: width } } } } as PartialCollectionConfig;
 }
 
 function EntityIdHeaderWidget({
@@ -1183,7 +1360,7 @@ function EntityIdHeaderWidget({
     path,
     idPath
 }: {
-    collection: EntityCollection,
+    collection: CollectionConfig,
     path: string,
     idPath: string
 }) {
@@ -1193,7 +1370,7 @@ function EntityIdHeaderWidget({
     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 sidePanelController = useSidePanel();
 
     const openEntityMode = collection?.openEntityMode ?? DEFAULT_ENTITY_OPEN_MODE;
 
@@ -1225,22 +1402,24 @@ function EntityIdHeaderWidget({
                                 entityId,
                                 path,
 
-                                sideEntityController,
+                                sidePanelController,
                                 navigation: urlController
                             })
                         }}
                         className={"w-96 max-w-full"}>
 
                         <div className="flex p-2 w-full gap-2">
-                            <input
+                            <TextField
                                 autoFocus={openPopup}
                                 placeholder={t("find_entity_by_id")}
-                                // size={"small"}
+                                size="small"
                                 onChange={(e) => {
                                     setSearchString(e.target.value);
                                 }}
                                 value={searchString}
-                                className={"rounded-lg bg-white dark:bg-surface-900 flex-grow outline-none p-2 " + focusedDisabled}/>
+                                className="flex-grow"
+                                inputClassName={cls("rounded-lg bg-white dark:bg-surface-900", focusedDisabled)}
+                            />
                             <Button variant={"text"}
                                 disabled={!(searchString.trim())}
                                 type={"submit"}
@@ -1261,7 +1440,7 @@ path })}
                                         entityId: id,
                                         path,
 
-                                        sideEntityController,
+                                        sidePanelController,
                                         navigation: urlController
                                     })
                                 }}