@rebasepro/admin 0.13.0 → 0.13.1-canary.g18cfeb7

package/src/components/CollectionViewBinding/usePreviewSlots.ts

@@ -1,14 +1,16 @@
 import { useMemo } from "react";
 import type { Property, RelationProperty } from "@rebasepro/types";
 import type { Entity, EntityRelation } from "@rebasepro/types";
-import type { PropertyConfig, AdminCollection } from "@rebasepro/admin-types";
+import type { PropertyConfig, AdminCollection, EntityDisplayRole } 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 { formatRelativeTime, 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,13 +25,29 @@ 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;
+    /**
+     * Which display role this slot fills.
+     *
+     * Load-bearing for the computed case. Without a property there is nothing to
+     * infer from, and "render it as text" is right for a title and wrong for an
+     * image: a resolver that returned a URL had that URL printed inside the card's
+     * image frame. The role is the one thing that distinguishes them, so it
+     * travels with the slot rather than being re-derived at each call site.
+     */
+    role?: EntityDisplayRole;
 }
 
 /**
@@ -89,6 +107,19 @@ export interface EntityPreviewSlots {
     status: PreviewSlot | undefined;
     /** META — date / timestamp */
     date: DatePreviewSlot | undefined;
+    /**
+     * TAGS — free chips beside the status.
+     *
+     * Declared only. Every other role has an inference ladder behind it, and
+     * this one deliberately does not: there is no "first enum" or "looks like a
+     * timestamp" that means *labels*, so guessing would scatter arbitrary chips
+     * across every row of every panel that never asked for them.
+     *
+     * The role existed on `EntityDisplay` and in `useEntityDisplay` before this
+     * field did, which is why a declared `display.tags` resolved correctly and
+     * then had nowhere to go.
+     */
+    tags: PreviewSlot | undefined;
     /** Entity ID (always available) */
     entityId: string | number;
 }
@@ -108,6 +139,8 @@ export interface CollectionSlotKeys {
     relationKeys: string[];
     statusKey: string | undefined;
     dateKey: string | undefined;
+    /** Declared only — see {@link EntityPreviewSlots.tags}. */
+    tagsKey: string | undefined;
 }
 
 /**
@@ -129,10 +162,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 +211,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 +266,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,
@@ -230,7 +275,8 @@ imageKey,
 subtitleKey,
 relationKeys,
 statusKey,
-dateKey };
+dateKey,
+tagsKey: getDisplayPropertyKey(collection, "tags") };
 }
 
 // ── Image unwrapping helper ───────────────────────────────────────────
@@ -261,6 +307,7 @@ function resolveImageSlot(
     if (resolvedValue === undefined || resolvedValue === null) return undefined;
 
     return {
+        role: "image",
         property: resolvedProperty as Property,
         propertyKey: imageKey,
         value: resolvedValue
@@ -299,15 +346,11 @@ function formatDateValue(value: unknown): string {
     if (isNaN(date.getTime())) return String(value);
 
     const now = new Date();
-    const diffMs = now.getTime() - date.getTime();
-    const diffMins = Math.floor(diffMs / 60000);
-    const diffHours = Math.floor(diffMs / 3600000);
-    const diffDays = Math.floor(diffMs / 86400000);
-
-    if (diffMins < 1) return "Just now";
-    if (diffMins < 60) return `${diffMins}m ago`;
-    if (diffHours < 24) return `${diffHours}h ago`;
-    if (diffDays < 7) return `${diffDays}d ago`;
+    // A date slot holds whatever property the collection points it at, which is
+    // as often a due or publish date as a `updated_at`. `formatRelativeTime`
+    // reads the sign, so a scheduled date says "in 3d" instead of "Just now".
+    const relative = formatRelativeTime(date, { now });
+    if (relative) return relative;
 
     return date.toLocaleDateString(undefined, {
         month: "short",
@@ -348,7 +391,7 @@ export function resolveEntitySlots(
     collection: AdminCollection<Record<string, unknown>>,
     slotKeys: CollectionSlotKeys
 ): EntityPreviewSlots {
-    const { titleKey, titleKeyCandidates, imageKey, subtitleKey, relationKeys, statusKey, dateKey } = slotKeys;
+    const { titleKey, titleKeyCandidates, imageKey, subtitleKey, relationKeys, statusKey, dateKey, tagsKey } = slotKeys;
 
     // Image
     const image = imageKey ? resolveImageSlot(collection, imageKey, entity) : undefined;
@@ -361,7 +404,8 @@ export function resolveEntitySlots(
     if (resolvedTitleKey) {
         const prop = collection.properties[resolvedTitleKey] as Property | undefined;
         const val = getValueInPath(entity.values, resolvedTitleKey);
-        if (prop) title = { property: prop,
+        if (prop) title = { role: "title",
+property: prop,
 propertyKey: resolvedTitleKey,
 value: val };
     }
@@ -372,7 +416,8 @@ value: val };
         const prop = collection.properties[subtitleKey] as Property | undefined;
         const val = getValueInPath(entity.values, subtitleKey);
         if (prop && val !== undefined && val !== null && val !== "") {
-            subtitle = { property: prop,
+            subtitle = { role: "subtitle",
+property: prop,
 propertyKey: subtitleKey,
 value: val };
         }
@@ -448,7 +493,8 @@ id: relation.id });
         const prop = collection.properties[statusKey] as Property | undefined;
         const val = getValueInPath(entity.values, statusKey);
         if (prop && val !== undefined && val !== null) {
-            status = { property: prop,
+            status = { role: "status",
+property: prop,
 propertyKey: statusKey,
 value: val };
         }
@@ -461,6 +507,7 @@ value: val };
         const val = getValueInPath(entity.values, dateKey);
         if (prop && val !== undefined && val !== null) {
             date = {
+                role: "date",
                 property: prop,
                 propertyKey: dateKey,
                 value: val,
@@ -469,6 +516,23 @@ value: val };
         }
     }
 
+    // Tags — declared only, and empty means absent: an empty array is "this
+    // record has no labels", which must render as nothing rather than as an
+    // empty chip row that shifts every other slot down.
+    let tags: PreviewSlot | undefined;
+    if (tagsKey) {
+        const prop = collection.properties[tagsKey] as Property | undefined;
+        const val = getValueInPath(entity.values, tagsKey);
+        const empty = val === undefined || val === null || val === ""
+            || (Array.isArray(val) && val.length === 0);
+        if (prop && !empty) {
+            tags = { role: "tags",
+property: prop,
+propertyKey: tagsKey,
+value: val };
+        }
+    }
+
     return {
         image,
         title,
@@ -476,6 +540,7 @@ value: val };
         relations,
         status,
         date,
+        tags,
         entityId: entity.id
     };
 }
@@ -506,43 +571,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 +630,74 @@ 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);
+    const tags = useEntityDisplay<string[] | string>("tags", 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.
+        // The role travels with the computed slot too. It is the only thing left
+        // to say about a value with no property behind it, and `SlotValue` needs
+        // it to tell a computed image from a computed title.
+        const computed = (
+            role: EntityDisplayRole,
+            resolved: { value: unknown, source?: unknown }
+        ): PreviewSlot | undefined =>
+            resolved.value !== undefined && resolved.source === undefined
+                ? { role,
+value: resolved.value }
+                : undefined;
+
+        const computedDate = computed("date", date);
+
+        return {
+            ...derived,
+            title: computed("title", title) ?? derived.title,
+            subtitle: computed("subtitle", subtitle) ?? derived.subtitle,
+            image: computed("image", image) ?? derived.image,
+            status: computed("status", status) ?? derived.status,
+            date: computedDate
+                ? { ...computedDate,
+formatted: formatDateValue(computedDate.value) }
+                : derived.date,
+            tags: computed("tags", tags) ?? derived.tags
+        };
+    }, [derived, title, subtitle, image, status, date, tags]);
+}

package/src/components/CollectionViewBinding/utils.ts

@@ -1,3 +1,5 @@
+import { isArrayValue, readStoredJson, writeStoredJson } from "@rebasepro/utils";
+
 export function addRecentId(collectionId: string, id: string | number) {
     const recentIds = getRecentIds(collectionId);
     const newRecentIds = [id, ...recentIds.filter(i => i !== id)];
@@ -9,11 +11,12 @@ export function addRecentId(collectionId: string, id: string | number) {
 }
 
 export function saveSearchedIdsLocally(collectionId: string, ids: (string | number)[]) {
-    localStorage.setItem("recent_id_searches::" + collectionId, JSON.stringify(ids));
+    writeStoredJson("recent_id_searches::" + collectionId, ids);
 }
 
 export function getRecentIds(collectionId: string): (string | number)[] {
-    const stored = localStorage.getItem("recent_id_searches::" + collectionId);
-    if (!stored) return [];
-    return JSON.parse(stored);
+    return readStoredJson<(string | number)[]>(
+        "recent_id_searches::" + collectionId,
+        { fallback: [], accept: isArrayValue }
+    );
 }

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>
     );