@rebasepro/admin 0.0.1-canary.eae7889 → 0.1.0

package/src/components/EntityCollectionView/EntityCollectionViewStartActions.tsx

@@ -16,7 +16,7 @@ export type EntityCollectionViewStartActionsProps<M extends Record<string, unkno
     collection: EntityCollection<M>;
     path: string;
     relativePath: string;
-    parentCollectionIds: string[];
+    parentCollectionSlugs: string[], parentEntityIds: string[];
     selectionController: SelectionController<M>;
     tableController: EntityTableController<M>;
     collectionEntitiesCount?: number;
@@ -25,18 +25,20 @@ export type EntityCollectionViewStartActionsProps<M extends Record<string, unkno
      */
     resolvedProperties?: Properties;
     compact?: boolean;
+    openNewDocument: (defaultValues?: Record<string, unknown>) => void;
 }
 
 export function EntityCollectionViewStartActions<M extends Record<string, unknown>>({
     collection,
     relativePath,
-    parentCollectionIds,
+    parentCollectionSlugs, parentEntityIds,
     path,
     selectionController,
     tableController,
     collectionEntitiesCount,
     resolvedProperties,
-    compact
+    compact,
+    openNewDocument
 }: EntityCollectionViewStartActionsProps<M>) {
 
     const context = useCMSContext();
@@ -51,24 +53,30 @@ export function EntityCollectionViewStartActions<M extends Record<string, unknow
 
     // Count active filters (excluding force filters)
     const filterValues = tableController.filterValues;
-    const forceFilter = collection.forceFilter;
+    const fixedFilter = collection.fixedFilter;
     const activeFilterCount = filterValues
-        ? Object.keys(filterValues).filter(key => !forceFilter || !(key in forceFilter)).length
+        ? Object.keys(filterValues).filter(key => !fixedFilter || !(key in fixedFilter)).length
         : 0;
 
     const actionProps: CollectionActionsProps<M> = {
         path,
         relativePath,
-        parentCollectionIds,
+        parentCollectionSlugs, parentEntityIds,
         collection,
         selectionController,
         context,
         tableController,
-        collectionEntitiesCount
+        collectionEntitiesCount,
+        openNewDocument
     };
 
     const handleBackClick = useCallback(() => {
-        const collectionUrl = urlController.buildUrlCollectionPath(path);
+        let collectionUrl = urlController.buildUrlCollectionPath(path);
+        // Preserve the __view query param so the view mode is retained
+        const currentViewParam = new URLSearchParams(window.location.search).get("__view");
+        if (currentViewParam) {
+            collectionUrl += `${collectionUrl.includes("?") ? "&" : "?"}__view=${currentViewParam}`;
+        }
         navigate(collectionUrl);
     }, [navigate, urlController, path]);
 
@@ -103,13 +111,14 @@ export function EntityCollectionViewStartActions<M extends Record<string, unknow
                         {t("filters")}{activeFilterCount > 0 ? ` (${activeFilterCount})` : ""}
                     </Button>
                 ) : (
-                    <IconButton
+                    <Button
+                        variant="text"
                         size="small"
                         onClick={() => setFiltersDialogOpen(true)}
                         className={cls(activeFilterCount > 0 && "text-primary")}
                     >
                         <FilterIcon size={iconSize.small}/>
-                    </IconButton>
+                    </Button>
                 )}
             </Badge>
         </Tooltip>
@@ -121,7 +130,7 @@ export function EntityCollectionViewStartActions<M extends Record<string, unknow
         <ClearFilterSortButton
             key={"clear_filter"}
             tableController={tableController}
-            enabled={!collection.forceFilter}/>
+            enabled={!collection.fixedFilter}/>
     ];
 
     const pluginActionsStart = useSlot("collection.actions.start", actionProps);
@@ -139,7 +148,7 @@ export function EntityCollectionViewStartActions<M extends Record<string, unknow
                     properties={resolvedProperties}
                     filterValues={tableController.filterValues}
                     setFilterValues={(filterValues) => tableController.setFilterValues?.(filterValues ?? {})}
-                    forceFilter={collection.forceFilter}
+                    fixedFilter={collection.fixedFilter}
                 />
             )}
         </>

package/src/components/EntityCollectionView/FiltersDialog.tsx

@@ -18,7 +18,7 @@ export interface FiltersDialogProps {
     properties: Record<string, Property>;
     filterValues: FilterValues<any> | undefined;
     setFilterValues: (filterValues?: FilterValues<any>) => void;
-    forceFilter?: FilterValues<any>;
+    fixedFilter?: FilterValues<any>;
 }
 
 /**
@@ -31,7 +31,7 @@ export function FiltersDialog({
     properties,
     filterValues,
     setFilterValues,
-    forceFilter
+    fixedFilter
 }: FiltersDialogProps) {
     const { t } = useTranslation();
     // Local state for filters being edited
@@ -52,13 +52,13 @@ export function FiltersDialog({
         return Object.entries(properties).filter(([key, property]) => {
             if (!property) return false;
             // Force filter properties should not be editable
-            if (forceFilter && key in forceFilter) return false;
+            if (fixedFilter && key in fixedFilter) return false;
             // Check if property type is filterable
             const baseProperty = property.type === "array" ? property.of : property;
             if (!baseProperty || Array.isArray(baseProperty)) return false;
             return ["string", "number", "boolean", "date", "reference"].includes(baseProperty.type);
         });
-    }, [properties, forceFilter]);
+    }, [properties, fixedFilter]);
 
     const handleFilterChange = useCallback((propertyKey: string, value?: [VirtualTableWhereFilterOp, any]) => {
         setLocalFilters(prev => {
@@ -75,9 +75,9 @@ export function FiltersDialog({
     const handleApply = useCallback(() => {
         const hasFilters = Object.keys(localFilters).length > 0;
         setFilterValues(hasFilters ? { ...localFilters,
-...forceFilter } : (forceFilter || undefined));
+...fixedFilter } : (fixedFilter || undefined));
         onOpenChange(false);
-    }, [localFilters, setFilterValues, forceFilter, onOpenChange]);
+    }, [localFilters, setFilterValues, fixedFilter, onOpenChange]);
 
     const handleClearAll = useCallback(() => {
         setLocalFilters({});
@@ -114,7 +114,7 @@ export function FiltersDialog({
                     path={baseProperty.path}
                     title={property.name}
                     includeId={baseProperty.includeId}
-                    previewProperties={baseProperty.previewProperties}
+                    previewProperties={baseProperty.ui?.previewProperties}
                     hidden={hiddenFields[propertyKey] ?? false}
                     setHidden={(hidden) => setHiddenForField(propertyKey, hidden)}
                 />

package/src/components/EntityCollectionView/SplitListView.tsx

@@ -30,7 +30,7 @@ export type SplitListViewProps<M extends Record<string, unknown> = Record<string
     initialScroll?: number;
     size?: CollectionSize;
     path: string;
-    parentCollectionIds?: string[];
+    parentCollectionSlugs?: string[], parentEntityIds?: string[];
     /**
      * The entity ID to show in the detail panel.
      * Comes from the URL path (e.g. /c/authors/14 → selectedEntityId = "14").
@@ -99,7 +99,7 @@ export function SplitListView<M extends Record<string, unknown> = Record<string,
     initialScroll,
     size = "m",
     path,
-    parentCollectionIds,
+    parentCollectionSlugs, parentEntityIds,
     selectedEntityId,
     selectedTab,
     toolbar,
@@ -169,7 +169,12 @@ export function SplitListView<M extends Record<string, unknown> = Record<string,
 
     // Close the detail panel: navigate back to the collection path
     const handleCloseDetail = useCallback(() => {
-        const collectionUrl = urlController.buildUrlCollectionPath(path);
+        let collectionUrl = urlController.buildUrlCollectionPath(path);
+        // Preserve the __view query param so the view mode is retained
+        const currentViewParam = new URLSearchParams(window.location.search).get("__view");
+        if (currentViewParam) {
+            collectionUrl += `${collectionUrl.includes("?") ? "&" : "?"}__view=${currentViewParam}`;
+        }
         navigate(collectionUrl);
     }, [navigate, urlController, path]);
 
@@ -246,7 +251,8 @@ export function SplitListView<M extends Record<string, unknown> = Record<string,
         return () => window.removeEventListener("keydown", handleKeyDown);
     }, [selectedEntityId, handleCloseDetail, externalOnEntityClick, externalOnNewClick, entityIds, tableController.data]);
 
-    const usedParentCollectionIds = parentCollectionIds ?? collectionRegistryController.getParentCollectionIds(path);
+    const usedParentCollectionIds = parentCollectionSlugs ?? collectionRegistryController.getParentCollectionSlugs(path);
+    const usedParentEntityIds = parentEntityIds ?? collectionRegistryController.getParentEntityIds(path);
 
     const isDetailVisible = animationPhase !== "idle";
 
@@ -255,15 +261,19 @@ export function SplitListView<M extends Record<string, unknown> = Record<string,
     const listPanel = (
         <div
             className={cls(
-                "flex flex-col h-full overflow-y-auto overflow-x-hidden min-w-0 transition-all ease-out w-full",
+                "flex flex-col h-full min-w-0 transition-all ease-out w-full",
                 (!largeLayout && isDetailVisible)
                     ? "opacity-0 -translate-x-1/3 pointer-events-none"
                     : "opacity-100 translate-x-0"
             )}
             style={{ transitionDuration: `${TRANSITION_DURATION}ms` }}
         >
+            {/* Toolbar stays fixed above the scrollable area */}
             {toolbar}
-            {children}
+            {/* Scrollable content: title + insights + list rows */}
+            <div className="flex-1 overflow-y-auto overflow-x-hidden min-h-0">
+                {children}
+            </div>
         </div>
     );
 
@@ -283,16 +293,22 @@ export function SplitListView<M extends Record<string, unknown> = Record<string,
                     path={path}
                     collection={collection as EntityCollection<Record<string, unknown>>}
                     entityId={renderedEntityId}
-                    parentCollectionIds={usedParentCollectionIds}
+                    parentCollectionSlugs={usedParentCollectionIds}
+                    parentEntityIds={usedParentEntityIds}
                     selectedTab={selectedTab}
                     layout="split"
                     onTabChange={(params) => {
                         const newSelectedTab = params.selectedTab;
-                        const entityUrl = urlController.buildUrlCollectionPath(
+                        let entityUrl = urlController.buildUrlCollectionPath(
                             newSelectedTab
                                 ? `${path}/${renderedEntityId}/${newSelectedTab}`
                                 : `${path}/${renderedEntityId}`
                         );
+                        // Preserve the __view query param
+                        const currentViewParam = new URLSearchParams(window.location.search).get("__view");
+                        if (currentViewParam) {
+                            entityUrl += `${entityUrl.includes("?") ? "&" : "?"}__view=${currentViewParam}`;
+                        }
                         navigate(entityUrl);
                     }}
                 />

package/src/components/EntityCollectionView/useEntityPreviewSlots.ts

@@ -110,11 +110,39 @@ export function resolveCollectionSlotKeys(
 
     // Status: first string-enum that isn't the title
     let statusKey: string | undefined;
-    for (const [key, prop] of Object.entries(collection.properties)) {
-        const p = prop as Property;
-        if (p.type === "string" && "enum" in p && p.enum && key !== titleKey) {
-            statusKey = key;
-            break;
+
+    // 1. Explicitly defined in previewProperties
+    if (!statusKey && collection.previewProperties) {
+        for (const key of collection.previewProperties) {
+            const p = collection.properties[key] as Property | undefined;
+            if (p?.type === "string" && "enum" in p && p.enum && key !== titleKey) {
+                statusKey = key;
+                break;
+            }
+        }
+    }
+
+    // 2. Explicitly defined in propertiesOrder
+    if (!statusKey && collection.propertiesOrder) {
+        for (const key of collection.propertiesOrder) {
+            if (typeof key === "string" && !key.startsWith("subcollection:")) {
+                const p = collection.properties[key] as Property | undefined;
+                if (p?.type === "string" && "enum" in p && p.enum && key !== titleKey) {
+                    statusKey = key;
+                    break;
+                }
+            }
+        }
+    }
+
+    // 3. Default automatic inference
+    if (!statusKey) {
+        for (const [key, prop] of Object.entries(collection.properties)) {
+            const p = prop as Property;
+            if (p.type === "string" && "enum" in p && p.enum && key !== titleKey) {
+                statusKey = key;
+                break;
+            }
         }
     }
 

package/src/components/EntityEditView.tsx

@@ -1,9 +1,9 @@
-import type { EntityCollection, EntityCustomViewParams } from "@rebasepro/types";
+import type { ComponentRef, EntityCollection, EntityCustomViewParams } from "@rebasepro/types";
 import type { FormContext } from "../types/fields";
 import type { PluginFormActionProps } from "@rebasepro/types";
-import React, { lazy, Suspense, useEffect, useMemo, useState } from "react";
+import React, { lazy, Suspense, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Entity, EntityStatus } from "@rebasepro/types";
-import { PluginProviderStack } from "@rebasepro/core";
+import { PluginProviderStack, resolveComponentRef } from "@rebasepro/core";
 
 import { EntityCollectionView, EntityView } from "../components";
 import { CircularProgressCenter, iconSize } from "@rebasepro/ui";
@@ -16,7 +16,6 @@ import {
     resolveDefaultSelectedView
 } from "@rebasepro/common";
 import { resolvedSelectedEntityView } from "../util/resolutions";
-import { getEntityTitlePropertyKey } from "../util/previews";
 import { CenteredView, CircularProgress, cls, defaultBorderMixin, IconButton, Tab, Tabs, Tooltip, Typography, Skeleton } from "@rebasepro/ui";
 import {
     useCustomizationController,
@@ -66,13 +65,19 @@ export interface EntityEditViewProps<M extends Record<string, unknown> = Record<
     databaseId?: string;
     copy?: boolean;
     selectedTab?: string;
-    parentCollectionIds: string[];
+    parentCollectionSlugs: string[], parentEntityIds: string[];
     onValuesModified?: (modified: boolean, values: M) => void;
     onSaved?: (params: OnUpdateParams) => void;
     onTabChange?: (props: OnTabChangeParams<M>) => void;
     layout?: "side_panel" | "full_screen" | "split";
     barActions?: (params: BarActionsParams) => any;
     formProps?: Partial<EntityFormProps<M>>,
+    /**
+     * Pre-populate the form with these values when creating a new entity.
+     * Only applied when the form is in "new" mode (no entityId).
+     * Sourced from EntitySidePanelProps (side panel) or location.state (full screen).
+     */
+    defaultValues?: Partial<M>;
 }
 
 /**
@@ -99,7 +104,7 @@ export function EntityEditView<M extends Record<string, unknown>>({
 
     const initialDirtyValues = entityId
         ? getEntityFromMemoryCache(props.path + "/" + entityId)
-        : getEntityFromMemoryCache(props.path + "#new");
+        : (props.defaultValues ?? getEntityFromMemoryCache(props.path + "#new"));
 
     const { canEdit: canEditHook } = usePermissions();
 
@@ -143,7 +148,7 @@ export function EntityEditViewInner<M extends Record<string, unknown>>({
     entityId,
     selectedTab: selectedTabProp,
     collection,
-    parentCollectionIds,
+    parentCollectionSlugs, parentEntityIds,
     onValuesModified,
     onSaved,
     onTabChange,
@@ -183,9 +188,9 @@ export function EntityEditViewInner<M extends Record<string, unknown>>({
     const customizationController = useCustomizationController();
     const plugins = customizationController.plugins;
 
-    const formActionTopProps: PluginFormActionProps = {
+    const formActionTopProps: PluginFormActionProps = useMemo(() => ({
         entityId,
-        parentCollectionIds,
+        parentCollectionSlugs, parentEntityIds,
         path: path,
         status,
         collection: collection!,
@@ -193,7 +198,7 @@ export function EntityEditViewInner<M extends Record<string, unknown>>({
         formContext: formContext as FormContext<Record<string, unknown>> | undefined,
         openEntityMode: layout,
         disabled: false
-    };
+    }), [entityId, parentCollectionSlugs, parentEntityIds, path, status, collection, context, formContext, layout]);
     const pluginActionsTop = useSlot("form.actions.top", formActionTopProps);
 
     const defaultSelectedView = useMemo(() => resolveDefaultSelectedView(
@@ -230,15 +235,51 @@ export function EntityEditViewInner<M extends Record<string, unknown>>({
 
     const mainViewVisible = selectedTab === MAIN_TAB_VALUE || Boolean(selectedSecondaryForm);
 
-    const customViewsView: any[] | undefined = customViews && resolvedEntityViews
-        .filter(e => !e.includeActions)
+    // Track which custom view tabs have been visited so we keep them mounted
+    // (preserving their state) but don't eagerly mount tabs never visited.
+    const mountedTabsRef = useRef<Set<string>>(new Set());
+    if (selectedTab) {
+        mountedTabsRef.current.add(selectedTab);
+    }
+
+    // Memoize the read-only fallback form context to avoid recreating it every render
+    const readOnlyFormContext = useMemo<FormContext<M> | undefined>(() => {
+        if (formContext) return undefined; // not needed when real formContext exists
+        if (!entityId) return undefined;
+        const formexStub = createFormexStub<M>(usedEntity?.values ?? {} as M);
+        return {
+            entityId,
+            disabled: false,
+            openEntityMode: layout,
+            status: status,
+            values: usedEntity?.values ?? ({} as M),
+            setFieldValue: (key: string, value: any) => {
+                throw new Error("You can't update values in read only mode");
+            },
+            save: () => {
+                throw new Error("You can't save in read only mode");
+            },
+            collection,
+            path: path,
+            entity: usedEntity,
+            savingError: undefined,
+            formex: formexStub
+        };
+    }, [formContext, entityId, layout, status, usedEntity, collection, path]);
+
+    const nonActionCustomViews = useMemo(() =>
+        resolvedEntityViews.filter(e => !e.includeActions),
+        [resolvedEntityViews]
+    );
+
+    const customViewsView: any[] | undefined = customViews && nonActionCustomViews
         .map((customView) => {
 
             if (!customView)
                 return null;
-            const Builder = customView.Builder;
+            const Builder = resolveComponentRef<EntityCustomViewParams>(customView.Builder);
             if (!Builder) {
-                console.error("INTERNAL: customView.Builder is not defined");
+                console.error("INTERNAL: customView.Builder is not defined or could not be resolved");
                 return null;
             }
 
@@ -246,48 +287,41 @@ export function EntityEditViewInner<M extends Record<string, unknown>>({
                 return null;
             }
 
-            const formexStub = createFormexStub<M>(usedEntity?.values ?? {} as M);
-            const usedFormContext: FormContext<M> = formContext ?? {
-                entityId,
-                disabled: false,
-                openEntityMode: layout,
-                status: status,
-                values: usedEntity?.values ?? ({} as M),
-                setFieldValue: (key: string, value: any) => {
-                    throw new Error("You can't update values in read only mode");
-                },
-                save: () => {
-                    throw new Error("You can't save in read only mode");
-                },
-                collection,
-                path: path,
-                entity: usedEntity,
-                savingError: undefined,
-                formex: formexStub
-            };
+            // Only mount tabs that have been visited at least once
+            const isActive = selectedTab === customView.key;
+            const hasBeenMounted = mountedTabsRef.current.has(customView.key);
+            if (!isActive && !hasBeenMounted) {
+                return null;
+            }
+
+            const usedFormContext: FormContext<M> = formContext ?? readOnlyFormContext!;
 
             return <div
                 className={cls(defaultBorderMixin,
                     "relative flex-1 w-full h-full overflow-auto",
-                    { "hidden": selectedTab !== customView.key }
+                    { "hidden": !isActive }
                 )}
                 key={`custom_view_${customView.key}`}
                 role="tabpanel">
                 <ErrorBoundary>
-                    {usedFormContext && <Builder
-                        collection={collection}
-                        parentCollectionIds={parentCollectionIds}
-                        entity={usedEntity}
-                        modifiedValues={usedFormContext?.formex?.values ?? usedEntity?.values}
-                        formContext={usedFormContext as unknown as FormContext<Record<string, unknown>>}
-                    />}
+                    <Suspense fallback={<CircularProgressCenter />}>
+                        {usedFormContext && <Builder
+                            collection={collection}
+                            parentCollectionSlugs={parentCollectionSlugs} parentEntityIds={parentEntityIds}
+                            entity={usedEntity}
+                            modifiedValues={usedFormContext?.formex?.values ?? usedEntity?.values}
+                            formContext={usedFormContext as unknown as FormContext<Record<string, unknown>>}
+                        />}
+                    </Suspense>
                 </ErrorBoundary>
             </div>;
         }).filter(Boolean);
 
     const globalLoading = (dataLoading && !usedEntity) || (canEdit === undefined && (status === "existing" || status === "copy"));
 
-    const jsonView = <div
+    // Only mount JSON view when its tab is selected (or was previously selected)
+    const jsonTabMounted = mountedTabsRef.current.has(JSON_TAB_VALUE);
+    const jsonView = (selectedTab === JSON_TAB_VALUE || jsonTabMounted) ? <div
         className={cls("relative flex-1 h-full overflow-auto w-full",
             { "hidden": selectedTab !== JSON_TAB_VALUE })}
         key={"json_view"}
@@ -296,11 +330,11 @@ export function EntityEditViewInner<M extends Record<string, unknown>>({
             <EntityJsonPreview
                 values={formContext?.values ?? entity?.values ?? {}} />
         </ErrorBoundary>
-    </div>;
+    </div> : null;
 
-    const historyView = includeHistoryView ? <div
-        className={cls("relative flex-1 h-full overflow-auto w-full",
-            { "hidden": selectedTab !== HISTORY_TAB_VALUE })}
+    // Only mount history view when its tab is actually selected
+    const historyView = includeHistoryView && selectedTab === HISTORY_TAB_VALUE ? <div
+        className={"relative flex-1 h-full overflow-auto w-full"}
         key={"history_view"}
         role="tabpanel">
         <ErrorBoundary>
@@ -332,7 +366,8 @@ export function EntityEditViewInner<M extends Record<string, unknown>>({
                     (usedEntity && newFullPath
                         ? <EntityCollectionView
                             path={newFullPath}
-                            parentCollectionIds={[...parentCollectionIds, collection.slug]}
+                            parentCollectionSlugs={[...parentCollectionSlugs, collection.slug]}
+                            parentEntityIds={[...parentEntityIds, String(usedEntity?.id)]}
                             updateUrl={false}
                             {...subcollection}
                             openEntityMode={layout} />
@@ -348,7 +383,7 @@ export function EntityEditViewInner<M extends Record<string, unknown>>({
         );
     }).filter(Boolean);
 
-    const onSideTabClick = (value: string) => {
+    const onSideTabClick = useCallback((value: string) => {
         setSelectedTab(value);
         if (status === "existing") {
             onTabChange?.({
@@ -358,7 +393,7 @@ export function EntityEditViewInner<M extends Record<string, unknown>>({
                 collection
             });
         }
-    };
+    }, [status, onTabChange, path, entityId, collection]);
 
     const entityReadOnlyView = !canEdit && entity ? <div
         className={cls("flex-1 flex flex-row w-full overflow-y-auto justify-center", (canEdit || !mainViewVisible || selectedSecondaryForm) ? "hidden" : "")}>
@@ -410,7 +445,7 @@ export function EntityEditViewInner<M extends Record<string, unknown>>({
             onSaved?.(res);
             formProps?.onSaved?.(res);
         }}
-        Builder={selectedSecondaryForm?.Builder as React.ComponentType<EntityCustomViewParams<M>> | undefined}
+        Builder={resolveComponentRef(selectedSecondaryForm?.Builder as ComponentRef<EntityCustomViewParams<M>> | undefined) as React.ComponentType<EntityCustomViewParams<M>> | undefined}
     />;
 
     const subcollectionTabs = subcollections && subcollections.map((subcollection) =>
@@ -457,33 +492,6 @@ export function EntityEditViewInner<M extends Record<string, unknown>>({
         </Tooltip>
     ) : null;
 
-    // Compute contextual title for subcollection tabs, e.g. "Orders of James"
-    const subcollectionContextTitle = useMemo(() => {
-        if (selectedTab === MAIN_TAB_VALUE || selectedTab === JSON_TAB_VALUE || selectedTab === HISTORY_TAB_VALUE) {
-            return null;
-        }
-        // Check if the selected tab is a subcollection
-        const matchedSubcollection = subcollections.find(sc => sc.slug === selectedTab);
-        if (!matchedSubcollection) {
-            return null;
-        }
-        // Check if the selected tab is a custom view (not a subcollection)
-        const isCustomView = resolvedEntityViews.some(v => v.key === selectedTab);
-        if (isCustomView) {
-            return null;
-        }
-        // Resolve the parent entity's title
-        const titleKey = getEntityTitlePropertyKey(collection, customizationController.propertyConfigs);
-        const entityValues = usedEntity?.values;
-        if (!titleKey || !entityValues) {
-            return matchedSubcollection.name;
-        }
-        const titleValue = entityValues[titleKey as keyof M];
-        if (!titleValue || typeof titleValue !== "string") {
-            return matchedSubcollection.name;
-        }
-        return `${matchedSubcollection.name} of ${titleValue}`;
-    }, [selectedTab, subcollections, resolvedEntityViews, collection, customizationController.propertyConfigs, usedEntity?.values]);
 
     let result = <div className="relative flex flex-col h-full w-full bg-white dark:bg-surface-800">
 
@@ -499,14 +507,6 @@ export function EntityEditViewInner<M extends Record<string, unknown>>({
                 status
             })}
 
-            {subcollectionContextTitle && (
-                <Typography
-                    variant="label"
-                    className="truncate min-w-0 shrink ml-2 text-surface-600 dark:text-surface-400"
-                >
-                    {subcollectionContextTitle}
-                </Typography>
-            )}
 
             {pluginActionsTop}
 

package/src/components/EntitySidePanel.tsx

@@ -9,6 +9,7 @@ import { EntityEditView } from "./EntityEditView";
 import { useSideDialogContext } from "./SideDialogs";
 import { IconButton } from "@rebasepro/ui";
 import { useLocation, useNavigate } from "react-router-dom";
+import { removeInitialAndTrailingSlashes } from "@rebasepro/common";
 import { saveEntityToMemoryCache } from "@rebasepro/core";
 import { useCollectionRegistryController, useSideEntityController } from "../index";
 import { useUrlController } from "../index";
@@ -75,8 +76,12 @@ export function EntitySidePanel(props: EntitySidePanelProps) {
 
     }
 
-    const parentCollectionIds = useMemo(() => {
-        return collectionRegistryController.getParentCollectionIds(path);
+    const parentCollectionSlugs = useMemo(() => {
+        return collectionRegistryController.getParentCollectionSlugs(path);
+    }, [collectionRegistryController, path]);
+
+    const parentEntityIds = useMemo(() => {
+        return collectionRegistryController.getParentEntityIds(path);
     }, [collectionRegistryController, path]);
 
     const collection = collectionRegistryController.getCollection(path) ?? props.collection;
@@ -102,7 +107,7 @@ export function EntitySidePanel(props: EntitySidePanelProps) {
                     {...props}
                     layout={"side_panel"}
                     collection={collection as EntityCollection}
-                    parentCollectionIds={parentCollectionIds}
+                    parentCollectionSlugs={parentCollectionSlugs} parentEntityIds={parentEntityIds}
                     onValuesModified={onValuesModified}
                     onSaved={onUpdate}
                     barActions={({
@@ -143,13 +148,16 @@ export function EntitySidePanel(props: EntitySidePanelProps) {
                         selectedTab,
                         collection
                     }) => {
-                        sideEntityController.replace({
-                            path: path,
-                            entityId,
-                            selectedTab,
-                            updateUrl: true,
-                            collection
-                        });
+                        // Only update the URL to reflect the new tab — don't call
+                        // sideEntityController.replace() which would recreate the
+                        // entire EntitySidePanel component, causing a full
+                        // unmount/remount and expensive re-render of the form.
+                        if (entityId) {
+                            const collectionPath = removeInitialAndTrailingSlashes(path);
+                            const tabSuffix = selectedTab ? "/" + selectedTab : "";
+                            const fullUrl = urlController.buildUrlCollectionPath(`${collectionPath}/${entityId}${tabSuffix}#side`);
+                            navigate(fullUrl, { replace: true, state: location.state });
+                        }
                     }}
                     formProps={formProps}
                 />