@rebasepro/admin 0.4.0 → 0.6.0

package/src/components/EntityDetailView.tsx

@@ -3,7 +3,7 @@ import type { FormContext } from "../types/fields";
 import type { PluginFormActionProps } from "@rebasepro/types";
 import React, { lazy, Suspense, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Entity, EntityStatus, Property } from "@rebasepro/types";
-import { PluginProviderStack, resolveComponentRef } from "@rebasepro/core";
+import { PluginProviderStack, resolveComponentRef, useComponentOverride, CollectionComponentOverrideProvider } from "@rebasepro/core";
 
 import { EntityCollectionView, EntityView } from "../components";
 import { CircularProgressCenter, iconSize } from "@rebasepro/ui";
@@ -42,7 +42,7 @@ import {
 import { useUrlController, useCollectionRegistryController } from "../index";
 import { useNavigate } from "react-router-dom";
 import { getValueInPath } from "@rebasepro/utils";
-import { getEntityTitlePropertyKey } from "../util/previews";
+import { getEntityTitlePropertyKey, resolveTitleToString } from "../util/previews";
 import { EntityJsonPreview } from "../components/EntityJsonPreview";
 
 const EntityHistoryView = lazy(() => import("../components/history").then(m => ({ default: m.EntityHistoryView })));
@@ -104,12 +104,23 @@ export function EntityDetailView<M extends Record<string, unknown>>({
         </CenteredView>;
     }
 
-    return <EntityDetailViewInner<M>
-        {...props}
-        entityId={entityId}
-        entity={entity}
-        dataLoading={dataLoading}
-    />;
+    const content = (
+        <EntityDetailViewInner<M>
+            {...props}
+            entityId={entityId}
+            entity={entity}
+            dataLoading={dataLoading}
+        />
+    );
+
+    if (props.collection.components) {
+        return (
+            <CollectionComponentOverrideProvider overrides={props.collection.components}>
+                {content}
+            </CollectionComponentOverrideProvider>
+        );
+    }
+    return content;
 }
 
 function EntityDetailViewInner<M extends Record<string, unknown>>({
@@ -129,6 +140,7 @@ function EntityDetailViewInner<M extends Record<string, unknown>>({
     entity?: Entity<M>,
     dataLoading: boolean,
 }) {
+    const ResolvedCollectionView = useComponentOverride("Collection.View", EntityCollectionView);
     const { t } = useTranslation();
     const context = useRebaseContext();
     const urlController = useUrlController();
@@ -149,30 +161,27 @@ function EntityDetailViewInner<M extends Record<string, unknown>>({
 
     const defaultSelectedView = useMemo(() => resolveDefaultSelectedView(
         collection.defaultSelectedView,
-        { status: "existing", entityId }
+        { status: "existing",
+entityId }
     ), [collection, entityId]);
 
-    // Track whether we've applied the defaultSelectedView already.
-    // See EntityEditView for a full explanation of this pattern.
-    const hasAppliedDefault = useRef(false);
+    // Track whether the user has explicitly clicked a tab in this component
+    // instance. See EntityEditViewInner for full explanation.
+    const userHasChangedTab = useRef(false);
 
     const [selectedTab, setSelectedTab] = useState<string>(() => {
         const val = selectedTabProp ?? defaultSelectedView ?? MAIN_TAB_VALUE;
-        hasAppliedDefault.current = true;
         return val === "edit" ? MAIN_TAB_VALUE : val;
     });
     useEffect(() => {
-        const val = hasAppliedDefault.current
+        const val = userHasChangedTab.current
             ? (selectedTabProp ?? MAIN_TAB_VALUE)
             : (selectedTabProp ?? defaultSelectedView ?? MAIN_TAB_VALUE);
         const target = val === "edit" ? MAIN_TAB_VALUE : val;
-        if (!hasAppliedDefault.current) {
-            hasAppliedDefault.current = true;
-        }
         if (target !== selectedTab) {
             setSelectedTab(target);
         }
-    }, [selectedTabProp]);
+    }, [selectedTabProp, defaultSelectedView]);
 
     const subcollections = getSubcollections(collection).filter(c => !c.hideFromNavigation);
     const subcollectionsCount = subcollections?.length ?? 0;
@@ -183,16 +192,32 @@ function EntityDetailViewInner<M extends Record<string, unknown>>({
     const hasAdditionalViews = customViewsCount > 0 || subcollectionsCount > 0 || includeJsonView || includeHistoryView;
 
     const {
-        resolvedEntityViews,
+        resolvedEntityViews
+    } = resolvedSelectedEntityView(customViews, customizationController, undefined, canEdit);
+
+    const validTabValues = useMemo(() => {
+        const set = new Set<string>([
+            MAIN_TAB_VALUE,
+            ...(includeJsonView ? [JSON_TAB_VALUE] : []),
+            ...(includeHistoryView ? [HISTORY_TAB_VALUE] : []),
+            ...resolvedEntityViews.map(v => v.key),
+            ...subcollections.map(s => s.slug)
+        ]);
+        return set;
+    }, [includeJsonView, includeHistoryView, resolvedEntityViews, subcollections]);
+
+    const activeTab = validTabValues.has(selectedTab) ? selectedTab : MAIN_TAB_VALUE;
+
+    const {
         selectedEntityView
-    } = resolvedSelectedEntityView(customViews, customizationController, selectedTab, canEdit);
+    } = resolvedSelectedEntityView(customViews, customizationController, activeTab, canEdit);
 
-    const mainViewVisible = selectedTab === MAIN_TAB_VALUE;
+    const mainViewVisible = activeTab === MAIN_TAB_VALUE;
 
     // Track which custom view tabs have been visited
     const mountedTabsRef = useRef<Set<string>>(new Set());
-    if (selectedTab) {
-        mountedTabsRef.current.add(selectedTab);
+    if (activeTab) {
+        mountedTabsRef.current.add(activeTab);
     }
 
     // Read-only form context for custom entity views
@@ -212,6 +237,9 @@ function EntityDetailViewInner<M extends Record<string, unknown>>({
             save: () => {
                 throw new Error("Cannot save in read-only detail view");
             },
+            submit: () => {
+                throw new Error("Cannot submit in read-only detail view");
+            },
             collection,
             path,
             entity: usedEntity,
@@ -241,9 +269,10 @@ function EntityDetailViewInner<M extends Record<string, unknown>>({
 
     // Title resolution
     const titlePropertyKey = getEntityTitlePropertyKey(collection, customizationController.propertyConfigs);
-    const title = (usedEntity?.values && titlePropertyKey ? getValueInPath(usedEntity.values, titlePropertyKey) as React.ReactNode : undefined)
-        ?? collection.singularName
-        ?? collection.name;
+    const rawTitle = usedEntity?.values && titlePropertyKey ? getValueInPath(usedEntity.values, titlePropertyKey) : undefined;
+    const title = rawTitle !== undefined && rawTitle !== null
+        ? resolveTitleToString(rawTitle)
+        : (collection.singularName ?? collection.name);
 
     // Non-action custom views
     const nonActionCustomViews = useMemo(() =>
@@ -258,7 +287,7 @@ function EntityDetailViewInner<M extends Record<string, unknown>>({
             if (!Builder) return null;
             if (!entityId) return null;
 
-            const isActive = selectedTab === customView.key;
+            const isActive = activeTab === customView.key;
             const hasBeenMounted = mountedTabsRef.current.has(customView.key);
             if (!isActive && !hasBeenMounted) return null;
 
@@ -288,9 +317,9 @@ function EntityDetailViewInner<M extends Record<string, unknown>>({
 
     // JSON view
     const jsonTabMounted = mountedTabsRef.current.has(JSON_TAB_VALUE);
-    const jsonView = (selectedTab === JSON_TAB_VALUE || jsonTabMounted) ? <div
+    const jsonView = (activeTab === JSON_TAB_VALUE || jsonTabMounted) ? <div
         className={cls("relative flex-1 h-full overflow-auto w-full",
-            { "hidden": selectedTab !== JSON_TAB_VALUE })}
+            { "hidden": activeTab !== JSON_TAB_VALUE })}
         key={"json_view"}
         role="tabpanel">
         <ErrorBoundary>
@@ -299,7 +328,7 @@ function EntityDetailViewInner<M extends Record<string, unknown>>({
     </div> : null;
 
     // History view
-    const historyView = includeHistoryView && selectedTab === HISTORY_TAB_VALUE ? <div
+    const historyView = includeHistoryView && activeTab === HISTORY_TAB_VALUE ? <div
         className={"relative flex-1 h-full overflow-auto w-full"}
         key={"history_view"}
         role="tabpanel">
@@ -320,7 +349,7 @@ function EntityDetailViewInner<M extends Record<string, unknown>>({
         const subcollectionId = subcollection.slug;
         const newFullPath = usedEntity ? `${path}/${usedEntity?.id}/${removeInitialAndTrailingSlashes(subcollection.slug)}` : undefined;
 
-        if (selectedTab !== subcollectionId) return null;
+        if (activeTab !== subcollectionId) return null;
         return (
             <div
                 className={"relative flex-1 h-full overflow-auto w-full"}
@@ -329,7 +358,7 @@ function EntityDetailViewInner<M extends Record<string, unknown>>({
                 {globalLoading && <CircularProgressCenter />}
                 {!globalLoading &&
                     (usedEntity && newFullPath
-                        ? <EntityCollectionView
+                        ? <ResolvedCollectionView
                             path={newFullPath}
                             parentCollectionSlugs={[...parentCollectionSlugs, collection.slug]}
                             parentEntityIds={[...parentEntityIds, String(usedEntity?.id)]}
@@ -347,6 +376,7 @@ function EntityDetailViewInner<M extends Record<string, unknown>>({
     }).filter(Boolean);
 
     const onSideTabClick = useCallback((value: string) => {
+        userHasChangedTab.current = true;
         setSelectedTab(value);
         onTabChange?.({
             path,
@@ -386,7 +416,7 @@ function EntityDetailViewInner<M extends Record<string, unknown>>({
 
     // Tabs
     const subcollectionTabs = subcollections && subcollections.map((subcollection) => {
-        const icon = getIcon(subcollection.icon, undefined, undefined, "small");
+        const icon = getIcon(subcollection.icon, undefined, undefined, "smallest");
         return (
             <Tab
                 className="text-sm min-w-[90px]"
@@ -402,7 +432,7 @@ function EntityDetailViewInner<M extends Record<string, unknown>>({
 
     const customViewTabsStart = resolvedEntityViews.filter(view => view.position === "start")
         .map((view) => {
-            const icon = getIcon(view.icon, undefined, undefined, "small");
+            const icon = getIcon(view.icon, undefined, undefined, "smallest");
             return (
                 <Tab
                     className={!view.tabComponent ? "text-sm min-w-[90px]" : undefined}
@@ -419,7 +449,7 @@ function EntityDetailViewInner<M extends Record<string, unknown>>({
         });
     const customViewTabsEnd = resolvedEntityViews.filter(view => !view.position || view.position === "end")
         .map((view) => {
-            const icon = getIcon(view.icon, undefined, undefined, "small");
+            const icon = getIcon(view.icon, undefined, undefined, "smallest");
             return (
                 <Tab
                     className={!view.tabComponent ? "text-sm min-w-[90px]" : undefined}
@@ -541,7 +571,7 @@ function EntityDetailViewInner<M extends Record<string, unknown>>({
             {hasAdditionalViews && <div className={"flex-1 flex justify-end min-w-0 shrink-0"}>
                 <Tabs
                     className={"!w-fit max-w-full"}
-                    value={selectedTab}
+                    value={activeTab}
                     onValueChange={(value) => {
                         onSideTabClick(value);
                     }}>
@@ -550,21 +580,24 @@ function EntityDetailViewInner<M extends Record<string, unknown>>({
                         disabled={!hasAdditionalViews}
                         value={JSON_TAB_VALUE}
                         className={"text-sm"}>
-                        <CodeIcon size={iconSize.small} />
+                        <CodeIcon size={iconSize.smallest} />
                     </Tab>}
 
                     {includeHistoryView && <Tab
                         disabled={!hasAdditionalViews}
                         value={HISTORY_TAB_VALUE}
                         className={"text-sm"}>
-                        <HistoryIcon size={iconSize.small} />
+                        <HistoryIcon size={iconSize.smallest} />
                     </Tab>}
 
                     <Tab
                         disabled={!hasAdditionalViews}
                         value={MAIN_TAB_VALUE}
                         className={"text-sm min-w-[90px]"}>
-                        {collection.singularName ?? collection.name}
+                        <span className="flex items-center gap-1.5">
+                            {getIcon(collection.icon, undefined, undefined, "smallest")}
+                            {collection.singularName ?? collection.name}
+                        </span>
                     </Tab>
 
                     {customViewTabsStart}

package/src/components/EntityEditView.tsx

@@ -3,7 +3,7 @@ import type { FormContext } from "../types/fields";
 import type { PluginFormActionProps } from "@rebasepro/types";
 import React, { lazy, Suspense, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Entity, EntityStatus } from "@rebasepro/types";
-import { PluginProviderStack, resolveComponentRef } from "@rebasepro/core";
+import { PluginProviderStack, resolveComponentRef, useComponentOverride, CollectionComponentOverrideProvider } from "@rebasepro/core";
 
 import { EntityCollectionView, EntityView } from "../components";
 import { CircularProgressCenter, iconSize } from "@rebasepro/ui";
@@ -146,15 +146,26 @@ export function EntityEditView<M extends Record<string, unknown>>({
         </CenteredView>;
     }
 
-    return <EntityEditViewInner<M> {...props}
-        entityId={entityId}
-        entity={entity}
-        initialDirtyValues={initialDirtyValues as Partial<M>}
-        dataLoading={dataLoading}
-        status={status}
-        setStatus={setStatus}
-        canEdit={canEdit}
-    />;
+    const content = (
+        <EntityEditViewInner<M> {...props}
+            entityId={entityId}
+            entity={entity}
+            initialDirtyValues={initialDirtyValues as Partial<M>}
+            dataLoading={dataLoading}
+            status={status}
+            setStatus={setStatus}
+            canEdit={canEdit}
+        />
+    );
+
+    if (props.collection.components) {
+        return (
+            <CollectionComponentOverrideProvider overrides={props.collection.components}>
+                {content}
+            </CollectionComponentOverrideProvider>
+        );
+    }
+    return content;
 }
 
 export function EntityEditViewInner<M extends Record<string, unknown>>({
@@ -185,6 +196,10 @@ export function EntityEditViewInner<M extends Record<string, unknown>>({
     canEdit?: boolean,
 }) {
 
+    const ResolvedFormActions = useComponentOverride("Entity.FormActions", EntityEditViewFormActions);
+    const ResolvedEntityForm = useComponentOverride("Entity.Form", EntityForm) as typeof EntityForm;
+    const ResolvedCollectionView = useComponentOverride("Collection.View", EntityCollectionView);
+
     const context = useRebaseContext();
     const urlController = useUrlController();
     const navigate = useNavigate();
@@ -205,7 +220,8 @@ export function EntityEditViewInner<M extends Record<string, unknown>>({
 
     const formActionTopProps: PluginFormActionProps = useMemo(() => ({
         entityId,
-        parentCollectionSlugs, parentEntityIds,
+        parentCollectionSlugs,
+parentEntityIds,
         path: path,
         status,
         collection: collection!,
@@ -224,33 +240,26 @@ export function EntityEditViewInner<M extends Record<string, unknown>>({
         }
     ), [collection, status, entityId]);
 
-    // Track whether we've applied the defaultSelectedView already.
-    // On the initial render, selectedTabProp may be undefined because the URL
-    // has no tab segment — in that case we fall back to defaultSelectedView.
-    // But once the component is mounted, selectedTabProp=undefined means the
-    // user explicitly selected the form tab (which has no URL segment), so we
-    // must NOT re-apply defaultSelectedView.
-    const hasAppliedDefault = useRef(false);
+    // Track whether the user has explicitly clicked a tab in this component
+    // instance. When false, we fall back to defaultSelectedView (which may
+    // resolve asynchronously if the collection loads from the registry after
+    // mount). Once true, selectedTabProp=undefined means the user selected
+    // the form tab, so we must NOT re-apply defaultSelectedView.
+    const userHasChangedTab = useRef(false);
 
     const [selectedTab, setSelectedTab] = useState<string>(() => {
         const val = selectedTabProp ?? defaultSelectedView ?? MAIN_TAB_VALUE;
-        hasAppliedDefault.current = true;
         return val === "edit" ? MAIN_TAB_VALUE : val;
     });
     useEffect(() => {
-        // After initial mount, only sync from selectedTabProp — don't fall
-        // back to defaultSelectedView, because undefined now means "form tab".
-        const val = hasAppliedDefault.current
+        const val = userHasChangedTab.current
             ? (selectedTabProp ?? MAIN_TAB_VALUE)
             : (selectedTabProp ?? defaultSelectedView ?? MAIN_TAB_VALUE);
         const target = val === "edit" ? MAIN_TAB_VALUE : val;
-        if (!hasAppliedDefault.current) {
-            hasAppliedDefault.current = true;
-        }
         if (target !== selectedTab) {
             setSelectedTab(target);
         }
-    }, [selectedTabProp]);
+    }, [selectedTabProp, defaultSelectedView]);
 
     const subcollections = getSubcollections(collection).filter(c => !c.hideFromNavigation);
     const subcollectionsCount = subcollections?.length ?? 0;
@@ -261,20 +270,36 @@ export function EntityEditViewInner<M extends Record<string, unknown>>({
     const hasAdditionalViews = customViewsCount > 0 || subcollectionsCount > 0 || includeJsonView || includeHistoryView;
 
     const {
-        resolvedEntityViews,
+        resolvedEntityViews
+    } = resolvedSelectedEntityView(customViews, customizationController, undefined, canEdit);
+
+    const validTabValues = useMemo(() => {
+        const set = new Set<string>([
+            MAIN_TAB_VALUE,
+            ...(includeJsonView ? [JSON_TAB_VALUE] : []),
+            ...(includeHistoryView ? [HISTORY_TAB_VALUE] : []),
+            ...resolvedEntityViews.map(v => v.key),
+            ...subcollections.map(s => s.slug)
+        ]);
+        return set;
+    }, [includeJsonView, includeHistoryView, resolvedEntityViews, subcollections]);
+
+    const activeTab = validTabValues.has(selectedTab) ? selectedTab : MAIN_TAB_VALUE;
+
+    const {
         selectedEntityView,
         selectedSecondaryForm
-    } = resolvedSelectedEntityView(customViews, customizationController, selectedTab, canEdit);
+    } = resolvedSelectedEntityView(customViews, customizationController, activeTab, canEdit);
 
     const actionsAtTheBottom = layout === "side_panel" || layout === "dialog" || selectedEntityView?.includeActions === "bottom";
 
-    const mainViewVisible = selectedTab === MAIN_TAB_VALUE || Boolean(selectedSecondaryForm);
+    const mainViewVisible = activeTab === MAIN_TAB_VALUE || Boolean(selectedSecondaryForm);
 
     // 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);
+    if (activeTab) {
+        mountedTabsRef.current.add(activeTab);
     }
 
     // Memoize the read-only fallback form context to avoid recreating it every render
@@ -295,6 +320,9 @@ export function EntityEditViewInner<M extends Record<string, unknown>>({
             save: () => {
                 throw new Error("You can't save in read only mode");
             },
+            submit: () => {
+                throw new Error("You can't submit in read only mode");
+            },
             collection,
             path: path,
             entity: usedEntity,
@@ -324,7 +352,7 @@ export function EntityEditViewInner<M extends Record<string, unknown>>({
             }
 
             // Only mount tabs that have been visited at least once
-            const isActive = selectedTab === customView.key;
+            const isActive = activeTab === customView.key;
             const hasBeenMounted = mountedTabsRef.current.has(customView.key);
             if (!isActive && !hasBeenMounted) {
                 return null;
@@ -357,9 +385,9 @@ export function EntityEditViewInner<M extends Record<string, unknown>>({
 
     // 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
+    const jsonView = (activeTab === JSON_TAB_VALUE || jsonTabMounted) ? <div
         className={cls("relative flex-1 h-full overflow-auto w-full",
-            { "hidden": selectedTab !== JSON_TAB_VALUE })}
+            { "hidden": activeTab !== JSON_TAB_VALUE })}
         key={"json_view"}
         role="tabpanel">
         <ErrorBoundary>
@@ -369,7 +397,7 @@ export function EntityEditViewInner<M extends Record<string, unknown>>({
     </div> : null;
 
     // Only mount history view when its tab is actually selected
-    const historyView = includeHistoryView && selectedTab === HISTORY_TAB_VALUE ? <div
+    const historyView = includeHistoryView && activeTab === HISTORY_TAB_VALUE ? <div
         className={"relative flex-1 h-full overflow-auto w-full"}
         key={"history_view"}
         role="tabpanel">
@@ -389,7 +417,7 @@ export function EntityEditViewInner<M extends Record<string, unknown>>({
         const subcollectionId = subcollection.slug;
         const newFullPath = usedEntity ? `${path}/${usedEntity?.id}/${removeInitialAndTrailingSlashes(subcollection.slug)}` : undefined;
 
-        if (selectedTab !== subcollectionId) return null;
+        if (activeTab !== subcollectionId) return null;
         return (
             <div
                 className={"relative flex-1 h-full overflow-auto w-full"}
@@ -400,7 +428,7 @@ export function EntityEditViewInner<M extends Record<string, unknown>>({
 
                 {!globalLoading &&
                     (usedEntity && newFullPath
-                        ? <EntityCollectionView
+                        ? <ResolvedCollectionView
                             path={newFullPath}
                             parentCollectionSlugs={[...parentCollectionSlugs, collection.slug]}
                             parentEntityIds={[...parentEntityIds, String(usedEntity?.id)]}
@@ -420,6 +448,7 @@ export function EntityEditViewInner<M extends Record<string, unknown>>({
     }).filter(Boolean);
 
     const onSideTabClick = useCallback((value: string) => {
+        userHasChangedTab.current = true;
         setSelectedTab(value);
         if (status === "existing") {
             onTabChange?.({
@@ -485,7 +514,7 @@ export function EntityEditViewInner<M extends Record<string, unknown>>({
             </ErrorBoundary>
         </div>
     ) : (
-        <EntityForm<M>
+        <ResolvedEntityForm<M>
             collection={collection}
             path={path}
             entityId={entityId ?? usedEntity?.id}
@@ -496,7 +525,7 @@ export function EntityEditViewInner<M extends Record<string, unknown>>({
             forceActionsAtTheBottom={actionsAtTheBottom}
             initialStatus={status}
             className={cls((!mainViewVisible || !canEdit) && !selectedSecondaryForm ? "hidden" : "", formProps?.className)}
-            EntityFormActionsComponent={EntityEditViewFormActions}
+            EntityFormActionsComponent={ResolvedFormActions as React.FC<typeof ResolvedFormActions extends React.ComponentType<infer P> ? P : never>}
             disabled={!canEdit}
             navigateBack={navigateBack}
             {...formProps}
@@ -515,7 +544,7 @@ export function EntityEditViewInner<M extends Record<string, unknown>>({
             onSaved={(params) => {
                 const res = {
                     ...params,
-                    selectedTab: MAIN_TAB_VALUE === selectedTab ? undefined : selectedTab
+                    selectedTab: MAIN_TAB_VALUE === activeTab ? undefined : activeTab
                 };
                 onSaved?.(res);
                 formProps?.onSaved?.(res);
@@ -525,7 +554,7 @@ export function EntityEditViewInner<M extends Record<string, unknown>>({
     );
 
     const subcollectionTabs = subcollections && subcollections.map((subcollection) => {
-        const icon = getIcon(subcollection.icon, undefined, undefined, "small");
+        const icon = getIcon(subcollection.icon, undefined, undefined, "smallest");
         return (
             <Tab
                 className="text-sm min-w-[90px]"
@@ -541,7 +570,7 @@ export function EntityEditViewInner<M extends Record<string, unknown>>({
 
     const customViewTabsStart = resolvedEntityViews.filter(view => view.position === "start")
         .map((view) => {
-            const icon = getIcon(view.icon, undefined, undefined, "small");
+            const icon = getIcon(view.icon, undefined, undefined, "smallest");
             return (
                 <Tab
                     className={!view.tabComponent ? "text-sm min-w-[90px]" : undefined}
@@ -558,7 +587,7 @@ export function EntityEditViewInner<M extends Record<string, unknown>>({
         });
     const customViewTabsEnd = resolvedEntityViews.filter(view => !view.position || view.position === "end")
         .map((view) => {
-            const icon = getIcon(view.icon, undefined, undefined, "small");
+            const icon = getIcon(view.icon, undefined, undefined, "smallest");
             return (
                 <Tab
                     className={!view.tabComponent ? "text-sm min-w-[90px]" : undefined}
@@ -612,7 +641,7 @@ export function EntityEditViewInner<M extends Record<string, unknown>>({
             {hasAdditionalViews && <div className={"flex-1 flex justify-end min-w-0 shrink-0"}>
                 <Tabs
                     className={"!w-fit max-w-full"}
-                    value={selectedTab}
+                    value={activeTab}
                     onValueChange={(value) => {
                         onSideTabClick(value);
                     }}>
@@ -621,21 +650,24 @@ export function EntityEditViewInner<M extends Record<string, unknown>>({
                         disabled={!hasAdditionalViews}
                         value={JSON_TAB_VALUE}
                         className={"text-sm"}>
-                        <CodeIcon size={iconSize.small} />
+                        <CodeIcon size={iconSize.smallest} />
                     </Tab>}
 
                     {includeHistoryView && <Tab
                         disabled={!hasAdditionalViews}
                         value={HISTORY_TAB_VALUE}
                         className={"text-sm"}>
-                        <HistoryIcon size={iconSize.small} />
+                        <HistoryIcon size={iconSize.smallest} />
                     </Tab>}
 
                     <Tab
                         disabled={!hasAdditionalViews}
                         value={MAIN_TAB_VALUE}
                         className={"text-sm min-w-[90px]"}>
-                        {collection.singularName ?? collection.name}
+                        <span className="flex items-center gap-1.5">
+                            {getIcon(collection.icon, undefined, undefined, "smallest")}
+                            {collection.singularName ?? collection.name}
+                        </span>
                     </Tab>
 
                     {customViewTabsStart}

package/src/components/EntitySidePanel.tsx

@@ -9,7 +9,7 @@ import { EntityEditView } from "./EntityEditView";
 import { EntityDetailView } from "./EntityDetailView";
 import { useSideDialogContext } from "./SideDialogs";
 import { useNavigate } from "react-router-dom";
-import { saveEntityToMemoryCache } from "@rebasepro/core";
+import { saveEntityToMemoryCache, useComponentOverride } from "@rebasepro/core";
 import { useCollectionRegistryController, useSideEntityController } from "../index";
 import { useUrlController } from "../index";
 import { resolveDefaultSelectedView } from "@rebasepro/common";
@@ -32,6 +32,8 @@ export function EntitySidePanel(props: EntitySidePanelProps) {
         formProps
     } = props;
 
+    const ResolvedDetailView = useComponentOverride("Entity.DetailView", EntityDetailView);
+
     const {
         blocked,
         setBlocked,
@@ -102,6 +104,9 @@ export function EntitySidePanel(props: EntitySidePanelProps) {
     // editor / Studio and is not available on the collection object the
     // caller passed to sideEntityController.open().
     const hasCorrectedDefaultView = useRef(false);
+    useEffect(() => {
+        hasCorrectedDefaultView.current = false;
+    }, [entityId]);
     useEffect(() => {
         if (hasCorrectedDefaultView.current) return;
         if (selectedTab) return; // Already has a tab — no correction needed
@@ -109,7 +114,8 @@ export function EntitySidePanel(props: EntitySidePanelProps) {
 
         const effectiveDefault = resolveDefaultSelectedView(
             collection.defaultSelectedView,
-            { status: "existing", entityId }
+            { status: "existing",
+entityId }
         );
         if (effectiveDefault && effectiveDefault !== "edit") {
             hasCorrectedDefaultView.current = true;
@@ -141,7 +147,7 @@ export function EntitySidePanel(props: EntitySidePanelProps) {
         <>
             <ErrorBoundary>
                 {isDetailMode
-                    ? <EntityDetailView
+                    ? <ResolvedDetailView
                         path={path}
                         layout={collection?.openEntityMode === "dialog" ? "dialog" : "side_panel"}
                         collection={collection as EntityCollection}

package/src/components/HomePage/ContentHomePage.tsx

@@ -22,7 +22,7 @@ import { toArray } from "@rebasepro/utils";
 import { useCollapsedGroups, buildCollapsedDefaults, useCustomizationController, useTranslation, useSlot, useAdminModeController, useRebaseRegistry } from "@rebasepro/core";
 import { useRestoreScroll } from "@rebasepro/core";
 
-import { BootstrapAdminBanner } from "@rebasepro/core";
+import { SchemaDriftBanner } from "@rebasepro/core";
 import { useBreadcrumbsController, useCMSContext } from "../../index";
 
 export const DEFAULT_GROUP_NAME = "Views";
@@ -320,8 +320,8 @@ export function ContentHomePage({
     return (
         <div ref={containerRef} className="py-2 overflow-auto h-full w-full bg-surface-50 dark:bg-surface-800">
             <Container maxWidth="6xl">
-                <div className="mb-4">
-                    <BootstrapAdminBanner />
+                <div className="mb-4 flex flex-col gap-2">
+                    <SchemaDriftBanner />
                 </div>
                 {/* search & actions */}
                 <div