@rebasepro/admin 0.13.0 → 0.13.1-canary.g3660bd5

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/DefaultDrawer.tsx

@@ -151,13 +151,10 @@ function AdminNavigationContent() {
         closeHover
     } = useApp();
 
-    const [adminMenuOpen, setAdminMenuOpen] = React.useState(false);
-
     const analyticsController = useAnalyticsController();
     const navigationState = useNavigationStateController();
     const context = useRebaseContext();
 
-    const tooltipsOpen = drawerHovered && !drawerOpen && !adminMenuOpen;
     const largeLayout = useLargeLayout();
     const adminModeController = useAdminModeController();
     const registry = useRebaseRegistry();
@@ -251,8 +248,6 @@ context });
                         collapsed={isGroupCollapsed(group)}
                         onToggleCollapsed={() => toggleGroupCollapsed(group)}
                         drawerOpen={drawerVisuallyOpen}
-                        tooltipsOpen={tooltipsOpen}
-                        adminMenuOpen={adminMenuOpen}
                         onItemClick={onItemClick}
                         icon={groupIcons.get(group)}
                     />
@@ -278,7 +273,7 @@ export function DrawerLogo({
     drawerHovered: boolean;
 }) {
 
-    const showFullContent = drawerOpen || (drawerHovered && !drawerOpen);
+    const showFullContent = drawerOpen || drawerHovered;
 
     return (
         <div className="flex flex-row items-center shrink-0 pt-4 pb-0 px-2">
@@ -333,42 +328,43 @@ export function DrawerToggle({
 }) {
     const isExpanded = drawerOpen;
     const isHovered = drawerHovered && !drawerOpen;
-    const isFloating = isHovered;
     const showFullContent = isExpanded || isHovered;
 
+    const [wantsTooltip, setWantsTooltip] = React.useState(false);
+    // See {@link DrawerNavigationItem}: a masked tooltip never hears the pointer
+    // leave, so the stale state is dropped as the mask goes on.
+    if (showFullContent && wantsTooltip) setWantsTooltip(false);
+
     const { t } = useTranslation();
 
     return (
         <div className="shrink-0 mt-auto px-4 pt-0.5 pb-2">
             <Tooltip
                 title={isExpanded ? t("collapse") : t("expand")}
+                // The row spells out "Collapse"/"Expand" itself whenever it is wide
+                // enough to show the label — expanded, or floating open under the
+                // pointer. A tooltip repeating that word is noise; it earns its
+                // place only on a bare rail, where the chevron stands alone.
+                //
+                // Masked, not withheld: see {@link DrawerNavigationItem} for why
+                // this stays controlled in both states.
+                open={!showFullContent && wantsTooltip}
+                onOpenChange={setWantsTooltip}
                 side="right"
                 sideOffset={12}
                 asChild={true}
-                open={isFloating ? false : undefined}
             >
-                <div
+                <button
+                    type="button"
                     className={cls(
-                        "flex flex-row items-center rounded-lg cursor-pointer",
+                        "flex flex-row items-center rounded-lg cursor-pointer w-full",
                         "hover:bg-surface-accent-100 dark:hover:bg-surface-800",
                         "transition-colors duration-150",
                         "py-2"
                     )}
-                    role="button"
-                    tabIndex={0}
                     aria-expanded={isExpanded}
                     aria-label={isExpanded ? t("collapse") : t("expand")}
                     onClick={() => isExpanded ? closeDrawer() : openDrawer()}
-                    onKeyDown={(e) => {
-                        if (e.key === "Enter" || e.key === " ") {
-                            e.preventDefault();
-                            if (isExpanded) {
-                                closeDrawer();
-                            } else {
-                                openDrawer();
-                            }
-                        }
-                    }}
                 >
                     <div className="shrink-0 flex items-center justify-center w-[44px] h-[24px] text-surface-500 dark:text-surface-400">
                         {isExpanded
@@ -387,7 +383,7 @@ export function DrawerToggle({
                             {isExpanded ? t("collapse") : t("expand")}
                         </Typography>
                     </div>
-                </div>
+                </button>
             </Tooltip>
         </div>
     );

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,45 @@ 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}
+            externalLink={usedEntity
+                ? customizationController?.entityLinkBuilder?.({ entity: usedEntity })
+                : 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/DrawerNavigationGroup.tsx

@@ -28,11 +28,12 @@ export interface DrawerNavigationGroupProps {
      */
     drawerOpen: boolean;
     /**
-     * Whether tooltips should be shown (drawer closed + hovered)
+     * @deprecated No longer read. Entry tooltips are uncontrolled — they follow the
+     * pointer and focus, and are suppressed wherever the label is already visible.
      */
-    tooltipsOpen: boolean;
+    tooltipsOpen?: boolean;
     /**
-     * Whether admin menu is open (used to control tooltip visibility)
+     * @deprecated No longer read. See {@link tooltipsOpen}.
      */
     adminMenuOpen?: boolean;
     /**
@@ -66,8 +67,6 @@ export function DrawerNavigationGroup({
     collapsed,
     onToggleCollapsed,
     drawerOpen,
-    tooltipsOpen,
-    adminMenuOpen,
     headerActions,
     onItemClick,
     hideHeader,
@@ -158,8 +157,6 @@ export function DrawerNavigationGroup({
                     <ResolvedDrawerNavigationItem
                         key={entry.id}
                         icon={<IconForView collectionOrView={entry.collection ?? entry.view} size={"small"}/>}
-                        tooltipsOpen={!collapsed && tooltipsOpen}
-                        adminMenuOpen={adminMenuOpen}
                         drawerOpen={drawerOpen}
                         onClick={() => onItemClick?.(entry)}
                         url={entry.url}

package/src/components/DrawerNavigationItem.tsx

@@ -7,16 +7,16 @@ export function DrawerNavigationItem({
     name,
     icon,
     drawerOpen,
-    adminMenuOpen,
-    tooltipsOpen,
     url,
     onClick,
     indented = false
 }: {
     icon: React.ReactElement,
     name: string,
-    tooltipsOpen: boolean,
+    /** @deprecated No longer read: the tooltip is uncontrolled. */
+    tooltipsOpen?: boolean,
     drawerOpen: boolean,
+    /** @deprecated No longer read: the tooltip is uncontrolled. */
     adminMenuOpen?: boolean,
     url: string,
     onClick?: () => void,
@@ -40,6 +40,15 @@ export function DrawerNavigationItem({
             {icon}
         </div>;
 
+    const [wantsTooltip, setWantsTooltip] = React.useState(false);
+
+    // Radix will not report a close it never noticed: while the tooltip is masked
+    // the pointer can leave the row without `onOpenChange(false)` ever firing. So
+    // the stale `true` is dropped on the way *into* the masked state — otherwise
+    // it surfaces the moment the mask lifts, as a tooltip hanging over a rail the
+    // pointer left long ago.
+    if (drawerOpen && wantsTooltip) setWantsTooltip(false);
+
     const listItem = <div>
         <NavLink
             onClick={onClick}
@@ -70,8 +79,18 @@ export function DrawerNavigationItem({
         </NavLink>
     </div>;
 
+    // Per row, and always controlled. The old shared flag could only say "every
+    // tooltip" or "none", and the state it needed was unreachable, so no entry
+    // tooltip ever opened — leaving a bare rail of unlabelled icons. Radix decides
+    // when this one wants to be open, from the pointer and from focus; the drawer
+    // only masks it once the label says the same thing.
+    //
+    // Masked rather than withheld: dropping `open`, or the title, would move the
+    // tooltip between controlled and uncontrolled as the drawer opens, which
+    // strands the old state — a tooltip left up over a pointer nowhere near it.
     return <Tooltip
-        open={drawerOpen || adminMenuOpen ? false : tooltipsOpen}
+        open={!drawerOpen && wantsTooltip}
+        onOpenChange={setWantsTooltip}
         side="right"
         title={name}>
         {listItem}