@rebasepro/admin 0.13.0 → 0.13.1-canary.gcd6689e

package/src/components/CollectionViewBinding/usePreviewSlots.ts

@@ -3,12 +3,14 @@ import type { Property, RelationProperty } from "@rebasepro/types";
 import type { Entity, EntityRelation } from "@rebasepro/types";
 import type { PropertyConfig, AdminCollection } from "@rebasepro/admin-types";
 import { getEntityImagePreviewPropertyKey } from "@rebasepro/app";
+import { getDisplayPropertyKey } from "@rebasepro/app";
 import { getLeadingRelationTitleKey, getTitlePropertyCandidates, looksLikeIdentifierValue } from "@rebasepro/app";
 import { getEntityFromCache } from "@rebasepro/app";
 import { getEntityPreviewKeys } from "../../util/previews";
 import { getValueInPath } from "@rebasepro/utils";
 import type { AuthController } from "@rebasepro/admin-types";
 import { ChipColorScheme, CHIP_COLORS, CHIP_SEED_KEYS } from "@rebasepro/ui";
+import { useEntityDisplay } from "../../hooks/useEntityDisplay";
 
 /** Whether an authored relation yields many rows. Derived from its kind. */
 function relationCardinality(relation: { kind?: string; cardinality?: string } | undefined): "one" | "many" | undefined {
@@ -23,12 +25,18 @@ function relationCardinality(relation: { kind?: string; cardinality?: string } |
 // ── Slot types ────────────────────────────────────────────────────────
 
 /**
- * A resolved "slot" containing the property definition, key, and the
- * concrete value extracted from a entity.
+ * A resolved "slot": what fills one display role for one record.
+ *
+ * `property` and `propertyKey` are set when the value was read off the record,
+ * and absent when a `display` resolver computed it — a computed title has no
+ * column behind it, so there is nothing to render it *as*. Renderers must go
+ * through {@link SlotValue}, which makes that choice once: a property renders
+ * with its own preview (an enum keeps its coloured chip, a date its format), a
+ * computed value renders as text.
  */
 export interface PreviewSlot {
-    property: Property;
-    propertyKey: string;
+    property?: Property;
+    propertyKey?: string;
     value: unknown;
 }
 
@@ -129,10 +137,19 @@ export function resolveCollectionSlotKeys(
         ? [leadingRelationKey, ...rankedCandidates.filter(key => key !== leadingRelationKey)]
         : rankedCandidates;
     const titleKey = titleKeyCandidates[0];
+    // `getEntityImagePreviewPropertyKey` prefers `display.image` itself, so
+    // every caller of it — this, the reference card, the board — agrees.
     const imageKey = getEntityImagePreviewPropertyKey(collection);
 
-    // Status: first string-enum that isn't the title
-    let statusKey: string | undefined;
+    // Status: declared, else the first string-enum that isn't the title.
+    //
+    // Everything below this line is inference — "the first enum", "a key that
+    // looks like a timestamp", "the longest remaining string". It is a good
+    // guess and it is only a guess, so a collection that states the role wins
+    // outright and the ladder is skipped. That is the whole point of
+    // `admin.display`: the heuristics stay for the collections that never say
+    // anything, and stop overruling the ones that do.
+    let statusKey: string | undefined = getDisplayPropertyKey(collection, "status");
 
     // 1. Explicitly defined in previewProperties
     if (!statusKey && collection.previewProperties) {
@@ -169,13 +186,15 @@ export function resolveCollectionSlotKeys(
         }
     }
 
-    // Date: prefer well-known timestamp fields, fallback to any date
-    let dateKey: string | undefined;
+    // Date: declared, else a well-known timestamp field, else any date
+    let dateKey: string | undefined = getDisplayPropertyKey(collection, "date");
     const dateCandidates = ["updated_at", "updatedAt", "modified_at", "modifiedAt", "created_at", "createdAt"];
-    for (const candidate of dateCandidates) {
-        if (collection.properties[candidate]) {
-            dateKey = candidate;
-            break;
+    if (!dateKey) {
+        for (const candidate of dateCandidates) {
+            if (collection.properties[candidate]) {
+                dateKey = candidate;
+                break;
+            }
         }
     }
     if (!dateKey) {
@@ -222,7 +241,8 @@ export function resolveCollectionSlotKeys(
             const scoreB = propB?.type === "string" ? (propB.admin?.multiline ? 2 : 1) : 0;
             return scoreB - scoreA;
         });
-    const subtitleKey = sortedPreviewKeys.length > 0 ? sortedPreviewKeys[0] : undefined;
+    const subtitleKey = getDisplayPropertyKey(collection, "subtitle")
+        ?? (sortedPreviewKeys.length > 0 ? sortedPreviewKeys[0] : undefined);
 
     return { titleKey,
 titleKeyCandidates,
@@ -506,43 +526,26 @@ function resolveRelationDisplayName(
     }
 
     // Helper: extract display name from entity values using the target collection
+    //
+    // This used to carry a ranking of its own — priority keys `name/title/label/
+    // displayName`, then the first visible non-id string — which is a *seventh*
+    // answer to "what is this record called", and one that disagreed with the
+    // shared one: it read `titleProperty` with a flat lookup (so a dotted path
+    // was ignored), never saw `display.title`, and ranked by key name where the
+    // shared ranking excludes identifiers structurally. A chip and the record it
+    // points at could therefore be labelled differently on the same screen.
+    //
+    // What is left here is the part that is genuinely local: a relation carries
+    // *eagerly loaded* values, not an entity, so a resolver cannot run against
+    // it — a computed title falls back to the ranked property, which is the same
+    // thing the list row shows while its own resolver is in flight.
     const extractDisplayName = (values: Record<string, unknown>): string | undefined => {
         if (targetCollection) {
-            const targetTitleKey = targetCollection.titleProperty as string | undefined;
-            if (targetTitleKey && values[targetTitleKey] !== undefined) {
-                return String(values[targetTitleKey]);
-            }
-
-            // Helper to check if a property is hidden/internal
-            const isHiddenProp = (p: Property): boolean => {
-                if (p.admin?.hideFromCollection) return true;
-                if (typeof p.admin?.disabled === "object" && p.admin.disabled.hidden) return true;
-                return false;
-            };
-
-            // Helper to check if a property is a visible, non-id string
-            const isDisplayCandidate = (p: Property): boolean => {
-                return p.type === "string" && !p.admin?.multiline && !p.admin?.markdown && !p.storage
-                    && !("isId" in p && p.isId) && !isHiddenProp(p);
-            };
-
-            // Prioritize common title-like fields: name, title, label, displayName
-            const priorityKeys = ["name", "title", "label", "displayName"];
-            for (const pk of priorityKeys) {
-                const p = targetCollection.properties[pk] as Property | undefined;
-                if (p && isDisplayCandidate(p) && values[pk] !== undefined && values[pk] !== null) {
-                    return String(values[pk]);
-                }
-            }
-
-            // Fallback: find first visible, non-id string property in target
-            for (const [k, p] of Object.entries(targetCollection.properties)) {
-                const tp = p as Property;
-                if (isDisplayCandidate(tp)) {
-                    if (values[k] !== undefined && values[k] !== null) {
-                        return String(values[k]);
-                    }
-                }
+            for (const key of getTitlePropertyCandidates(targetCollection)) {
+                const value = getValueInPath(values, key);
+                if (value === undefined || value === null || value === "") continue;
+                if (typeof value === "string" && looksLikeIdentifierValue(value)) continue;
+                return String(value);
             }
         }
         // Generic fallback: walk entity values for any short string.
@@ -582,3 +585,67 @@ function resolveRelationDisplayName(
     // 3. Final fallback: show the ID
     return id !== undefined ? String(id) : undefined;
 }
+
+/**
+ * The slots for one record, with `admin.display` resolvers applied.
+ *
+ * {@link resolveEntitySlots} answers the question from values already in hand —
+ * which is everything a slot filled by a property needs, and nothing a slot
+ * filled by a *resolver* can use. A computed title may have to be fetched, so it
+ * arrives after the first render; this hook is where the two meet.
+ *
+ * Until a resolver lands, the derived slot shows. That is deliberate: a list of
+ * fifty rows must not blank its titles for a beat while fifty promises settle,
+ * and the derived answer — the best-ranked property carrying a readable value —
+ * is a reasonable thing to be looking at meanwhile. When the resolved value
+ * arrives it replaces the slot outright, property and all, because there is no
+ * property behind a computed value (see {@link PreviewSlot}).
+ *
+ * Every role is hooked unconditionally, so the hook order is fixed regardless of
+ * what a given collection declares.
+ */
+export function useEntitySlots(
+    entity: Entity<Record<string, unknown>>,
+    collection: AdminCollection<Record<string, unknown>>,
+    slotKeys: CollectionSlotKeys
+): EntityPreviewSlots {
+
+    const derived = useMemo(
+        () => resolveEntitySlots(entity, collection, slotKeys),
+        [entity, collection, slotKeys]
+    );
+
+    const params = { collection,
+entity };
+    const title = useEntityDisplay<string>("title", params);
+    const subtitle = useEntityDisplay<string>("subtitle", params);
+    const image = useEntityDisplay<string>("image", params);
+    const status = useEntityDisplay<string>("status", params);
+    const date = useEntityDisplay<Date | string | number>("date", params);
+
+    return useMemo(() => {
+        // `source` is set only when the value came from a property, so its
+        // absence is exactly the "this was computed" signal — no second flag to
+        // keep in step with the first.
+        const computed = (
+            resolved: { value: unknown, source?: unknown }
+        ): PreviewSlot | undefined =>
+            resolved.value !== undefined && resolved.source === undefined
+                ? { value: resolved.value }
+                : undefined;
+
+        const computedDate = computed(date);
+
+        return {
+            ...derived,
+            title: computed(title) ?? derived.title,
+            subtitle: computed(subtitle) ?? derived.subtitle,
+            image: computed(image) ?? derived.image,
+            status: computed(status) ?? derived.status,
+            date: computedDate
+                ? { ...computedDate,
+formatted: formatDateValue(computedDate.value) }
+                : derived.date
+        };
+    }, [derived, title, subtitle, image, status, date]);
+}

package/src/components/DetailViewBinding.tsx

@@ -10,11 +10,11 @@ import { CollectionViewBinding } from "./CollectionViewBinding/CollectionViewBin
 import { EntityViewBinding } from "./EntityViewBinding";
 import { EntityIdentityBar } from "./EntityIdentityBar";
 import { SplitListCloseButton } from "./CollectionViewBinding/SplitListCloseButton";
+import { SplitListShowButton } from "./CollectionViewBinding/SplitListShowButton";
 import { EntityInspector, InspectorTab } from "./EntityInspector";
 import { CircularProgressCenter, iconSize } from "@rebasepro/ui";
 import {
     Alert,
-    ArrowLeftIcon,
     Button,
     CenteredView,
     cls,
@@ -34,6 +34,7 @@ import { ErrorBoundary } from "@rebasepro/ui";
 import { ErrorView, createFormexStub, usePermissions, useTranslation, getIcon } from "@rebasepro/app";
 
 import { removeInitialAndTrailingSlashes, resolveDefaultSelectedView } from "@rebasepro/app";
+import { withViewMode } from "../util/view_mode";
 import { resolvedSelectedEntityView } from "../util/resolutions";
 import {
     useCustomizationController,
@@ -45,9 +46,7 @@ import {
 import { useUrlController } from "../hooks/navigation/contexts/UrlContext";
 import { useCollectionRegistryController } from "../hooks/navigation/contexts/CollectionRegistryContext";
 import { useNavigate } from "react-router";
-import { getValueInPath } from "@rebasepro/utils";
-import { getEntityTitlePropertyKeyForEntity, isUserSelectProperty, resolveTitleToString } from "../util/previews";
-import { getUserLabel, useResolvedUser } from "../hooks/useResolvedUsers";
+import { useEntityDisplayTitle } from "../hooks/useEntityDisplayTitle";
 
 
 import { MAIN_TAB_VALUE, JSON_TAB_VALUE, HISTORY_TAB_VALUE } from "../util/view_constants";
@@ -82,6 +81,12 @@ export interface DetailViewBindingProps<M extends Record<string, unknown> = Reco
      * of the breadcrumb — the side panel's close button.
      */
     barActionsStart?: React.ReactNode;
+    /**
+     * Full screen only: bring the list back beside this record. Set when the
+     * record was opened out of a split collection, so folding the list away is
+     * reversible; it takes the place of the back arrow when present.
+     */
+    onShowList?: () => void;
 }
 
 export function DetailViewBinding<M extends Record<string, unknown>>({
@@ -141,7 +146,8 @@ function DetailViewBindingInner<M extends Record<string, unknown>>({
     dataLoading,
     layout = "full_screen",
     barActions,
-    barActionsStart
+    barActionsStart,
+    onShowList
 }: DetailViewBindingProps<M> & {
     entity?: Entity<M>,
     dataLoading: boolean,
@@ -283,18 +289,13 @@ entityId }
     const formViewConfig = (collection as AdminCollection<M> & { formView?: FormViewConfig<M> }).formView;
     const FormViewBuilder = formViewConfig?.Builder ? resolveComponentRef<EntityCustomViewParams>(formViewConfig.Builder as ComponentRef<EntityCustomViewParams>) : null;
 
-    // Title resolution
-    const titlePropertyKey = getEntityTitlePropertyKeyForEntity(collection, usedEntity?.values, usedEntity?.id);
-    const rawTitle = usedEntity?.values && titlePropertyKey ? getValueInPath(usedEntity.values, titlePropertyKey) : undefined;
-    // A user picker stores an id: resolve it to the person, like a relation.
-    const titleUser = useResolvedUser(isUserSelectProperty(collection, titlePropertyKey) && typeof rawTitle === "string"
-        ? rawTitle
-        : undefined);
-    const title = titleUser
-        ? getUserLabel(titleUser)
-        : (rawTitle !== undefined && rawTitle !== null
-            ? resolveTitleToString(rawTitle)
-            : (collection.singularName ?? collection.name));
+    // The heading, resolved the one way — this used to be a copy of
+    // `useEntityDisplayTitle`'s body, and the two had already drifted.
+    const title = useEntityDisplayTitle({
+        collection,
+        entity: usedEntity,
+        status: "existing"
+    });
 
     // Non-action custom views
     const nonActionCustomViews = useMemo(() =>
@@ -380,20 +381,31 @@ entityId }
     }, [onTabChange, path, entityId, collection]);
 
     const propertyDetailView = () => {
-        // formView.Builder replaces the default property display
+        // formView.Builder replaces the default property display. It gets the
+        // centred column the record used to be given here; the default display
+        // now lays itself out, rail included.
         if (FormViewBuilder && usedEntity) {
-            return <ErrorBoundary>
-                <Suspense fallback={<CircularProgressCenter />}>
-                    <FormViewBuilder
-                        collection={collection}
-                        parentCollectionSlugs={parentCollectionSlugs}
-                        parentEntityIds={parentEntityIds}
-                        entity={usedEntity}
-                        modifiedValues={usedEntity?.values}
-                        formContext={readOnlyFormContext as FormContext<Record<string, unknown>>}
-                    />
-                </Suspense>
-            </ErrorBoundary>;
+            return <div className={"flex-1 min-w-0 overflow-y-auto flex justify-center items-start"}>
+                <div className={cls(
+                    "w-full max-w-3xl 2xl:max-w-4xl flex flex-col",
+                    layout === "dialog"
+                        ? "pt-5 pb-12 px-6 sm:px-8"
+                        : "pt-6 pb-16 px-5 sm:px-8"
+                )}>
+                    <ErrorBoundary>
+                        <Suspense fallback={<CircularProgressCenter />}>
+                            <FormViewBuilder
+                                collection={collection}
+                                parentCollectionSlugs={parentCollectionSlugs}
+                                parentEntityIds={parentEntityIds}
+                                entity={usedEntity}
+                                modifiedValues={usedEntity?.values}
+                                formContext={readOnlyFormContext as FormContext<Record<string, unknown>>}
+                            />
+                        </Suspense>
+                    </ErrorBoundary>
+                </div>
+            </div>;
         }
 
         return (
@@ -402,6 +414,9 @@ entityId }
                     entity={usedEntity}
                     collection={collection}
                     path={path}
+                    asPage
+                    openEntityMode={layout}
+                    formContext={readOnlyFormContext}
                 />}
             </>
         );
@@ -458,24 +473,27 @@ entityId }
             );
         });
 
+    // The breadcrumb's destination, and the back arrow's when it renders. Both
+    // keep the view mode: a collection reached from one of its own records must
+    // come back as the user left it.
+    const collectionUrl = withViewMode(urlController.buildUrlCollectionPath(path));
+
     // Full screen is the one layout with no way out of its own: a side panel and a
     // dialog can be dismissed, and a split keeps the list beside it, but opening an
     // entity full screen replaces the collection entirely and left browser Back as
     // the only route back to it — which is not an affordance the page shows, and is
     // wrong anyway once the user has moved between tabs inside the entity.
-    const backToCollectionButton = layout === "full_screen" ? (
-        <Tooltip title={t("back")}>
-            <IconButton
-                size="small"
-                aria-label={t("back")}
-                onClick={() => navigate(urlController.buildUrlCollectionPath(path))}
-            >
-                <ArrowLeftIcon size={iconSize.smallest} />
-            </IconButton>
-        </Tooltip>
-    ) : null;
-
-    const shouldShowTopBar = Boolean(barActions) || hasAdditionalViews || layout === "side_panel" || layout === "dialog" || Boolean(backToCollectionButton);
+    //
+    // Unless the list can be unfolded back beside the record: that chevron
+    // leads to the same collection while keeping the record open, so it stands
+    // alone rather than beside an arrow going almost the same place.
+    //
+    // It goes to the bar's leading edge — where a back control reads as back,
+    // and where the edit view has always put the same arrow — rather than to
+    // the trailing edge among the record's own actions.
+    const backToCollection = layout === "full_screen" && !onShowList
+        ? () => navigate(collectionUrl)
+        : undefined;
 
     const fullScreenButton = !barActions && // Not in split: the list panel beside it carries the close control,
     // and an expand button there competes with it.
@@ -508,43 +526,42 @@ entityId }
     // Main content view. The title, the `path/id` chip and the empty band under
     // them have moved into the identity bar, and the `w-80 2xl:w-96` rail that
     // held a single Edit button is gone — the bar holds it now.
+    //
+    // The scroll now lives on the record's own column rather than on this row,
+    // so the metadata rail beside it stays put while the record scrolls — the
+    // same arrangement the form uses.
     const mainView = <div
         className={cls(
-            "flex-1 flex flex-row w-full overflow-y-auto justify-center",
+            "flex-1 flex flex-row w-full min-h-0",
             !mainViewVisible ? "hidden" : ""
         )}>
-        <div className={cls(
-            "w-full max-w-3xl 2xl:max-w-4xl flex flex-col",
-            layout === "dialog"
-                ? "pt-5 pb-12 px-6 sm:px-8"
-                : "pt-6 pb-16 px-5 sm:px-8"
-        )}>
-            {propertyDetailView()}
-        </div>
+        {propertyDetailView()}
     </div>;
 
     let result = <div className="relative flex flex-col h-full w-full bg-white dark:bg-surface-800">
 
         <EntityIdentityBar
             collection={collection as AdminCollection}
+            collectionUrl={layout === "full_screen" || layout === "split" ? collectionUrl : undefined}
             title={title}
             entityId={entityId}
             status={"existing"}
             dirty={false}
             saving={false}
+            onBack={backToCollection}
             onInspect={includeJsonView ? () => setInspectorTab("json") : undefined}
             onViewHistory={includeHistoryView ? () => setInspectorTab("history") : undefined}
             leading={<>
                 {barActionsStart}
                 {/* Split view: closing the list is opening this record
                     full screen, and the control for it belongs at this
-                    bar's leading edge. */}
+                    bar's leading edge. Full screen carries its mirror. */}
                 {layout === "split" && <SplitListCloseButton/>}
+                {layout === "full_screen" && onShowList && <SplitListShowButton onClick={onShowList}/>}
             </>}
             trailing={<>
                 {editButton}
                 {pluginActionsTop}
-                {backToCollectionButton}
                 {fullScreenButton}
                 {barActions?.({
                     path,

package/src/components/EditViewBinding.tsx

@@ -45,6 +45,7 @@ import type { OnUpdateParams } from "../types/components/EntityFormProps";
 import { EditFormActions } from "./EditFormActions";
 import { EntityIdentityBar } from "./EntityIdentityBar";
 import { SplitListCloseButton } from "./CollectionViewBinding/SplitListCloseButton";
+import { SplitListShowButton } from "./CollectionViewBinding/SplitListShowButton";
 import { useRecordActions } from "../hooks/useRecordActions";
 import { useSideDialogContext } from "./SideDialogs";
 import { useAdminContext } from "../hooks/useAdminContext";
@@ -96,6 +97,12 @@ export interface EditViewBindingProps<M extends Record<string, unknown> = Record
      * of the breadcrumb — the side panel's close button.
      */
     barActionsStart?: React.ReactNode;
+    /**
+     * Full screen only: bring the list back beside this record. Set when the
+     * record was opened out of a split collection, so folding the list away is
+     * reversible; it takes the place of the back arrow when present.
+     */
+    onShowList?: () => void;
     formProps?: Partial<EntityFormBindingProps<M>>,
     /**
      * Pre-populate the form with these values when creating a new entity.
@@ -192,6 +199,7 @@ export function EditViewBindingInner<M extends Record<string, unknown>>({
     layout = "side_panel",
     barActions,
     barActionsStart,
+    onShowList,
     status,
     setStatus,
     formProps,
@@ -405,8 +413,8 @@ parentEntityIds,
 
     const displayTitle = useEntityDisplayTitle({
         collection,
+        entity: usedEntity,
         values: (formContext?.values ?? usedEntity?.values) as Record<string, unknown> | undefined,
-        entityId,
         status
     });
 
@@ -524,35 +532,39 @@ parentEntityIds,
     const FormViewBuilder = formViewConfig?.Builder ? resolveComponentRef<EntityCustomViewParams>(formViewConfig.Builder as ComponentRef<EntityCustomViewParams>) : null;
     const formViewIncludeActions = formViewConfig?.includeActions !== false;
 
-    const entityReadOnlyView = !canEdit && entity ? <div
-        className={cls("flex-1 flex flex-row w-full overflow-y-auto justify-center", (canEdit || !mainViewVisible || selectedSecondaryForm) ? "hidden" : "")}>
-        <div
-            className={cls("relative flex flex-col max-w-4xl lg:max-w-3xl xl:max-w-4xl 2xl:max-w-6xl w-full h-fit")}>
-            <Typography className={"mt-16 mb-8 mx-8"} variant={"h4"}>
-                {collection.singularName ?? collection.name}
-            </Typography>
-            {FormViewBuilder && readOnlyFormContext ? (
-                <ErrorBoundary>
-                    <Suspense fallback={<CircularProgressCenter />}>
-                        <FormViewBuilder
-                            collection={collection}
-                            parentCollectionSlugs={parentCollectionSlugs} parentEntityIds={parentEntityIds}
-                            entity={usedEntity}
-                            modifiedValues={usedEntity?.values}
-                            formContext={readOnlyFormContext as FormContext<Record<string, unknown>>}
-                        />
-                    </Suspense>
-                </ErrorBoundary>
-            ) : (
-                <EntityViewBinding
-                    className={"px-8 h-full overflow-auto"}
-                    entity={entity}
-                    path={path}
-                    collection={collection} />
-            )}
-            <div className="h-16" />
-        </div>
-    </div> : null;
+    // Without edit permission the record is rendered read-only — the same
+    // sections, spans and rail as the form, so losing the permission changes the
+    // controls and nothing else. The `h4` that used to head this repeated the
+    // collection name the identity bar above it already carries.
+    const entityReadOnlyView = !canEdit && entity ? (
+        FormViewBuilder && readOnlyFormContext
+            ? <div className={cls(
+                "flex-1 flex flex-row w-full overflow-y-auto justify-center",
+                (canEdit || !mainViewVisible || selectedSecondaryForm) ? "hidden" : ""
+            )}>
+                <div className={"w-full max-w-3xl 2xl:max-w-4xl flex flex-col pt-6 pb-16 px-5 sm:px-8"}>
+                    <ErrorBoundary>
+                        <Suspense fallback={<CircularProgressCenter />}>
+                            <FormViewBuilder
+                                collection={collection}
+                                parentCollectionSlugs={parentCollectionSlugs} parentEntityIds={parentEntityIds}
+                                entity={usedEntity}
+                                modifiedValues={usedEntity?.values}
+                                formContext={readOnlyFormContext as FormContext<Record<string, unknown>>}
+                            />
+                        </Suspense>
+                    </ErrorBoundary>
+                </div>
+            </div>
+            : <EntityViewBinding
+                className={cls((canEdit || !mainViewVisible || selectedSecondaryForm) ? "hidden" : "")}
+                entity={entity}
+                path={path}
+                collection={collection}
+                asPage
+                openEntityMode={layout}
+                formContext={readOnlyFormContext}/>
+    ) : null;
 
     const entityView = FormViewBuilder ? (
         // formView.Builder replaces the default form
@@ -687,6 +699,9 @@ parentEntityIds,
 
         <EntityIdentityBar
             collection={collection as AdminCollection}
+            collectionUrl={layout === "full_screen" || layout === "split"
+                ? withViewMode(urlController.buildUrlCollectionPath(path))
+                : undefined}
             title={displayTitle}
             entityId={status === "existing" ? entityId : undefined}
             status={status}
@@ -696,8 +711,10 @@ parentEntityIds,
             saveDisabled={!canEdit || saveDisabled}
             // Full screen replaces the collection entirely, leaving browser Back
             // as the only route to it. The detail view has carried this arrow
-            // for that reason; the edit view is reached the same way.
-            onBack={layout === "full_screen"
+            // for that reason; the edit view is reached the same way. Where the
+            // list can be unfolded back beside the record, that chevron reaches
+            // the same collection and the arrow beside it is noise.
+            onBack={layout === "full_screen" && !onShowList
                 ? () => navigate(withViewMode(urlController.buildUrlCollectionPath(path)))
                 : undefined}
             onSave={canEdit && formContext ? () => {
@@ -717,8 +734,9 @@ parentEntityIds,
                 {barActionsStart}
                 {/* Split view: closing the list is opening this record
                     full screen, and the control for it belongs at this
-                    bar's leading edge. */}
+                    bar's leading edge. Full screen carries its mirror. */}
                 {layout === "split" && <SplitListCloseButton/>}
+                {layout === "full_screen" && onShowList && <SplitListShowButton onClick={onShowList}/>}
             </>}
             trailing={<>
                 {pluginActionsTop}

package/src/components/EntityIdentityBar.tsx

@@ -1,6 +1,7 @@
 import type { AdminCollection } from "@rebasepro/admin-types";
 import type { EntityStatus } from "@rebasepro/types";
 import React, { useState } from "react";
+import { Link } from "react-router";
 import { useTranslation } from "@rebasepro/app";
 import {
     Button,
@@ -25,6 +26,15 @@ import {
 export interface EntityIdentityBarProps {
     /** Plural collection name, shown as the breadcrumb ahead of the title. */
     collection: AdminCollection;
+    /**
+     * Where the breadcrumb points. Without it the collection name is inert text
+     * that still reads as a breadcrumb — worse than no breadcrumb at all, and
+     * the only way back once a layout drops its back arrow.
+     *
+     * Left unset by the overlays (side panel, dialog), where the collection is
+     * already underneath and navigating would dismiss the record instead.
+     */
+    collectionUrl?: string;
     /** Resolved record title, already guarded against showing a field default. */
     title: string;
     entityId?: string | number;
@@ -81,6 +91,7 @@ export interface EntityIdentityBarProps {
  */
 export function EntityIdentityBar({
     collection,
+    collectionUrl,
     title,
     entityId,
     status,
@@ -126,10 +137,21 @@ export function EntityIdentityBar({
                 </Tooltip>
             )}
 
-            <Typography variant={"caption"}
-                className={"text-text-disabled dark:text-text-disabled-dark whitespace-nowrap hidden sm:block"}>
-                {collection.name}&nbsp;/
-            </Typography>
+            {collectionUrl
+                ? <Link to={collectionUrl}
+                    className={"visited:text-inherit dark:visited:text-inherit hidden sm:block"}>
+                    <Typography variant={"caption"}
+                        className={cls(
+                            "text-text-disabled dark:text-text-disabled-dark whitespace-nowrap",
+                            "hover:text-text-primary dark:hover:text-text-primary-dark transition-colors"
+                        )}>
+                        {collection.name}&nbsp;/
+                    </Typography>
+                </Link>
+                : <Typography variant={"caption"}
+                    className={"text-text-disabled dark:text-text-disabled-dark whitespace-nowrap hidden sm:block"}>
+                    {collection.name}&nbsp;/
+                </Typography>}
 
             <span className={"font-headers font-semibold text-[15px] tracking-tight truncate min-w-0"}
                 title={title}>