@rebasepro/admin 0.5.0 → 0.6.1

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,7 +161,8 @@ function EntityDetailViewInner<M extends Record<string, unknown>>({
 
     const defaultSelectedView = useMemo(() => resolveDefaultSelectedView(
         collection.defaultSelectedView,
-        { status: "existing", entityId }
+        { status: "existing",
+entityId }
     ), [collection, entityId]);
 
     // Track whether the user has explicitly clicked a tab in this component
@@ -179,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
@@ -208,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,
@@ -237,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(() =>
@@ -254,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;
 
@@ -284,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>
@@ -295,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">
@@ -316,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"}
@@ -325,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)]}
@@ -383,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]"
@@ -399,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}
@@ -416,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}
@@ -538,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);
                     }}>
@@ -547,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!,
@@ -254,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
@@ -288,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,
@@ -317,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;
@@ -350,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>
@@ -362,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">
@@ -382,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"}
@@ -393,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)]}
@@ -479,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}
@@ -490,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}
@@ -509,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);
@@ -519,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]"
@@ -535,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}
@@ -552,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}
@@ -606,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);
                     }}>
@@ -615,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,
@@ -112,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;
@@ -144,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

package/src/components/HomePage/NavigationCard.tsx

@@ -1,4 +1,4 @@
-import { ArrowRightIcon, Card, cls, Markdown, Typography } from "@rebasepro/ui";
+import { ArrowRightIcon, Card, cls, iconSize, Markdown, Typography } from "@rebasepro/ui";
 import React from "react";
 
 export type NavigationCardProps = {
@@ -25,10 +25,8 @@ export const NavigationCard = React.memo(function NavigationCard({
     return (
         <Card
             className={cls(
-                "group h-full p-4 cursor-pointer transition-all duration-150 ease-in-out",
-                "border-surface-200 dark:border-surface-700/40",
-                "hover:shadow-md hover:shadow-black/[0.04]",
-                "hover:border-surface-300 dark:hover:border-primary/20",
+                "group h-full p-4 cursor-pointer transition-colors duration-150 ease-in-out",
+                "hover:bg-primary/5 dark:hover:bg-primary/5",
                 shrink && "w-full max-w-full min-h-0 scale-75"
             )}
             onClick={() => {
@@ -39,8 +37,8 @@ export const NavigationCard = React.memo(function NavigationCard({
             <div className="flex flex-col h-full">
                 {/* Header: title + icon left, actions right */}
                 <div className="flex items-center w-full justify-between mb-1">
-                    <div className="flex items-center gap-4">
-                        <div className="flex items-center justify-center w-7 h-7 rounded-lg bg-primary/8 dark:bg-primary/10 text-primary/70 dark:text-primary/60 transition-colors duration-200 group-hover:bg-primary/12 dark:group-hover:bg-primary/15 group-hover:text-primary dark:group-hover:text-primary/80">
+                    <div className="flex items-center gap-3">
+                        <div className="flex items-center justify-center w-5 h-5 text-surface-400 dark:text-surface-500 transition-colors duration-150 group-hover:text-primary dark:group-hover:text-primary">
                             {icon}
                         </div>
                         <Typography variant="subtitle1"
@@ -60,7 +58,7 @@ export const NavigationCard = React.memo(function NavigationCard({
                 </div>
 
                 {/* Description */}
-                <div className="grow pl-[44px]">
+                <div className="pl-8">
                     {description && <Typography variant="caption"
                         color="secondary"
                         component="div">
@@ -69,17 +67,13 @@ export const NavigationCard = React.memo(function NavigationCard({
                 </div>
 
                 {additionalContent && (
-                    <div className="pl-[44px] pointer-events-none">
+                    <div className="pl-8 pointer-events-none">
                         {additionalContent}
                     </div>
                 )}
 
-                {/* Arrow */}
-                <div className="self-end mt-1">
-                    <div className={"transition-transform duration-200 group-hover:translate-x-0.5"}>
-                        <ArrowRightIcon className="text-primary"/>
-                    </div>
-                </div>
+                {/* Spacer pushes content above to align at the top across grid siblings */}
+                <div className="grow"/>
 
             </div>
 

package/src/components/HomePage/NavigationCardBinding.tsx

@@ -38,7 +38,7 @@ export function NavigationCardBinding({
 }) {
 
     const userConfigurationPersistence = useUserConfigurationPersistence();
-    const collectionIcon = <IconForView collectionOrView={collection ?? view}/>;
+    const collectionIcon = <IconForView collectionOrView={collection ?? view} size={"small"}/>;
 
     const navigate = useNavigate();
     const context = useRebaseContext();

package/src/components/HomePage/NavigationGroup.tsx

@@ -40,7 +40,7 @@ export function NavigationGroup({
                 color="secondary"
                 className={cls(
                     "px-4 py-1 rounded",
-                    "font-semibold text-[11px] uppercase tracking-wider text-surface-400 dark:text-surface-400"
+                    "font-medium text-[10px] uppercase tracking-[0.08em] text-primary/50 dark:text-primary/70"
                 )}
             >
                 {currentGroupName}

package/src/components/HomePage/SmallNavigationCard.tsx

@@ -1,4 +1,4 @@
-import { ArrowRightIcon, cardClickableMixin, cardMixin, cls, Typography } from "@rebasepro/ui";
+import { cardClickableMixin, cardMixin, cls, Typography } from "@rebasepro/ui";
 
 import { Link } from "react-router-dom";
 
@@ -35,11 +35,7 @@ export function SmallNavigationCard({
                     </Typography>
                 </div>
 
-                <div className={"p-2"}>
-                    <ArrowRightIcon className="text-primary"/>
-                </div>
             </Link>
 
         </>);
 }
-