@rebasepro/admin 0.13.1-canary.gef9608c → 0.14.0

package/src/components/CollectionViewBinding/SlotValue.tsx

@@ -1,6 +1,9 @@
 import React from "react";
 import type { PreviewSize } from "../../types/components/PropertyPreviewProps";
 import { PropertyPreview } from "../../preview";
+import { StorageThumbnail } from "../../preview/components/StorageThumbnail";
+import { UrlComponentPreview } from "../../preview/components/UrlComponentPreview";
+import { Chip } from "@rebasepro/ui";
 import type { PreviewSlot } from "./usePreviewSlots";
 
 export interface SlotValueProps {
@@ -42,6 +45,15 @@ export function SlotValue({ slot, size, textOnly = true, fill }: SlotValueProps)
     if (!slot || slot.value === undefined || slot.value === null) return null;
 
     if (!slot.property || !slot.propertyKey) {
+        // A computed image is still an image. "There is no property, so all that
+        // can be said about it is that it is text" holds for a title and fails
+        // here: `display.image` accepts "a storage path or a URL … so a resolver
+        // may return either", and both used to be printed as their own string
+        // inside the image frame.
+        if (slot.role === "image" && typeof slot.value === "string" && slot.value.trim()) {
+            return <ComputedImage value={slot.value.trim()} size={size} fill={fill}/>;
+        }
+
         // Computed. Arrays (a `tags` resolver) join rather than rendering as
         // "[object Object]" via String().
         const text = Array.isArray(slot.value)
@@ -58,3 +70,87 @@ export function SlotValue({ slot, size, textOnly = true, fill }: SlotValueProps)
         textOnly={textOnly}
         fill={fill}/>;
 }
+
+/**
+ * The `tags` slot, as chips beside the status.
+ *
+ * Honours both arms the same way the rest of the file does. A declared **path**
+ * goes through {@link SlotValue}, so an array of enum values keeps its own
+ * colours — that is the stated advantage of naming a property. A **resolver**
+ * returns bare strings with no property to render them as, so they become plain
+ * chips; a single string is accepted as one tag, which the role's type documents.
+ *
+ * Lives here rather than in the list, the card and the board card because that is
+ * three copies of the same decision, and this file exists to hold exactly one.
+ */
+export function TagChips({ slot, max = 4 }: { slot: PreviewSlot, max?: number }) {
+
+    if (slot.property && slot.propertyKey) {
+        return <SlotValue slot={slot} size="small"/>;
+    }
+
+    const values = (Array.isArray(slot.value) ? slot.value : [slot.value])
+        .filter(item => item !== undefined && item !== null && String(item).trim() !== "")
+        .map(item => String(item));
+
+    if (values.length === 0) return null;
+
+    const shown = values.slice(0, max);
+    const hidden = values.length - shown.length;
+
+    return <>
+        {shown.map(value => (
+            <Chip key={value}
+                size="smallest"
+                className="!text-[10px] !leading-tight !py-0 shrink-0 max-w-[100px] truncate">
+                {value}
+            </Chip>
+        ))}
+        {hidden > 0 && (
+            <span className="text-[10px] text-surface-400 dark:text-surface-500 shrink-0">+{hidden}</span>
+        )}
+    </>;
+}
+
+/**
+ * Whether a computed image string can be fetched as-is, or has to be resolved
+ * through storage first.
+ *
+ * Exported because it is the whole decision: rendering either branch needs a
+ * provider (a storage source, a DOM), and the thing worth pinning is which
+ * branch a given string takes. `//host/x` is protocol-relative and equally
+ * fetchable; `data:` and `blob:` are already the bytes.
+ */
+export function isFetchableImageUrl(value: string): boolean {
+    return /^(https?:)?\/\//i.test(value) || /^(data|blob):/i.test(value);
+}
+
+/**
+ * A string a resolver returned for the `image` role, rendered as a picture.
+ *
+ * Two things can arrive here and they need different handling, which is the whole
+ * reason a property-path image is preferable: a storage property knows which
+ * backend holds it, and a bare string does not.
+ *
+ * - An **absolute URL** is already fetchable. Rendering it through the storage
+ *   layer would ask a bucket to sign a path that was never in it.
+ * - Anything else is read as a **storage path** on the default source, which is
+ *   the only source a value with no property can be attributed to. A resolver
+ *   pointing at a named source should name the property instead.
+ */
+function ComputedImage({ value, size, fill }: { value: string, size: PreviewSize, fill?: boolean }) {
+    const isAbsolute = isFetchableImageUrl(value);
+
+    if (isAbsolute) {
+        return <UrlComponentPreview previewType="image"
+            url={value}
+            size={size}
+            fill={fill}
+            hint={value}/>;
+    }
+
+    return <StorageThumbnail storagePathOrDownloadUrl={value}
+        storeUrl={false}
+        size={size}
+        fill={fill}/>;
+}

package/src/components/CollectionViewBinding/SortButton.tsx

@@ -24,6 +24,12 @@ export type SortButtonProps<M extends Record<string, unknown>> = {
      * the options offered.
      */
     properties: Properties;
+    /**
+     * Toolbar showing icon-only controls (split view, or a layout too narrow
+     * for the filters button's label). Only decides the icon size, which
+     * follows that button — see `CollectionViewStartActions`.
+     */
+    compact?: boolean;
 };
 
 /**
@@ -40,7 +46,8 @@ export type SortButtonProps<M extends Record<string, unknown>> = {
  */
 export function SortButton<M extends Record<string, unknown>>({
     tableController,
-    properties
+    properties,
+    compact
 }: SortButtonProps<M>) {
 
     const { t } = useTranslation();
@@ -97,6 +104,8 @@ export function SortButton<M extends Record<string, unknown>>({
     // `asChild` — is what toggles it. A handler of our own would toggle it a
     // second time in the same click and the popover would never open; a
     // `Tooltip` in between would swallow the trigger's ref.
+    const arrowSize = compact ? iconSize.smallest : iconSize.small;
+
     const trigger = (
         <IconButton
             size={"small"}
@@ -104,11 +113,14 @@ export function SortButton<M extends Record<string, unknown>>({
             title={label}
             className={cls(activeOption && "text-primary")}
         >
+            {/* Same icon size as the filter controls it sits between: 16 in the
+                split view's narrow toolbar, 20 everywhere else. It was a flat
+                16, which read as a smaller button next to them. */}
             {activeDirection === "desc"
-                ? <ArrowDownIcon size={iconSize.smallest}/>
+                ? <ArrowDownIcon size={arrowSize}/>
                 : activeDirection === "asc"
-                    ? <ArrowUpIcon size={iconSize.smallest}/>
-                    : <ArrowUpDownIcon size={iconSize.smallest}/>}
+                    ? <ArrowUpIcon size={arrowSize}/>
+                    : <ArrowUpDownIcon size={arrowSize}/>}
         </IconButton>
     );
 

package/src/components/CollectionViewBinding/SplitListCloseButton.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { ChevronsLeftIcon, IconButton, iconSize, Tooltip } from "@rebasepro/ui";
+import { IconButton, iconSize, PanelLeftCloseIcon, Tooltip } from "@rebasepro/ui";
 import { useTranslation } from "@rebasepro/app";
 
 import { useSplitView } from "./SplitViewContext";
@@ -9,13 +9,24 @@ import { useSplitView } from "./SplitViewContext";
  * Closes the list of a split view, leaving the open record on its own.
  *
  * It leads the record's own app bar, where the breadcrumb starts — this is the
- * entity pane's old "Open full screen" button, moved to that edge and wearing a
- * double chevron pointing at the list it folds away: closing the list and
- * opening the record full screen are the same thing, so there is one control
- * and one route (`#full`) rather than two. Full screen carries the mirrored
- * chevron to bring the list back.
+ * entity pane's old "Open full screen" button, moved to that edge: closing the
+ * list and opening the record full screen are the same thing, so there is one
+ * control and one route (`#full`) rather than two. Full screen carries the
+ * mirrored icon to bring the list back.
+ *
+ * A pane glyph rather than the double chevron it wore first. Now that the bar
+ * ends in a ✕ that dismisses the record, an arrow pointing off the left edge of
+ * the record's own bar was the other thing on it that read as "close me" — and
+ * it is the one control here that does not act on the record at all.
  */
-export function SplitListCloseButton() {
+export function SplitListCloseButton({ onBeforeHide }: {
+    /**
+     * Run before the layout changes, while this form is still mounted: the edit
+     * view uses it to hand its edit in progress to the full-screen form that is
+     * about to show the same record.
+     */
+    onBeforeHide?: () => void;
+} = {}) {
 
     const { t } = useTranslation();
     const splitView = useSplitView();
@@ -26,9 +37,12 @@ export function SplitListCloseButton() {
         <Tooltip title={t("hide_list")}>
             <IconButton
                 size="small"
-                onClick={splitView.openFullScreen}
+                onClick={() => {
+                    onBeforeHide?.();
+                    splitView.openFullScreen();
+                }}
                 aria-label={t("hide_list")}>
-                <ChevronsLeftIcon size={iconSize.smallest}/>
+                <PanelLeftCloseIcon size={iconSize.smallest}/>
             </IconButton>
         </Tooltip>
     );

package/src/components/CollectionViewBinding/SplitListShowButton.tsx

@@ -1,13 +1,13 @@
 import React from "react";
 
-import { ChevronsRightIcon, IconButton, iconSize, Tooltip } from "@rebasepro/ui";
+import { IconButton, iconSize, PanelLeftOpenIcon, Tooltip } from "@rebasepro/ui";
 import { useTranslation } from "@rebasepro/app";
 
 /**
  * Brings the list back beside a record that was opened full screen.
  *
  * The mirror of {@link SplitListCloseButton}: the same edge of the same bar,
- * the same double chevron pointing the other way, and the same single route —
+ * the same pane glyph opening rather than closing, and the same single route —
  * showing the list is dropping the `#full` hash. It replaces the back arrow
  * where it applies, because the list it unfolds already holds the record.
  */
@@ -21,7 +21,7 @@ export function SplitListShowButton({ onClick }: { onClick: () => void }) {
                 size="small"
                 onClick={onClick}
                 aria-label={t("show_list")}>
-                <ChevronsRightIcon size={iconSize.smallest}/>
+                <PanelLeftOpenIcon size={iconSize.smallest}/>
             </IconButton>
         </Tooltip>
     );

package/src/components/CollectionViewBinding/SplitListView.tsx

@@ -85,12 +85,14 @@ function isListShortcutTarget(target: HTMLElement | null, detailPanel: HTMLEleme
  * The list only has to identify a record — a title, a subtitle and a status
  * chip — while the detail beside it carries the whole record and its rail. At
  * 30% the list was taking width from the side that had four columns of fields
- * to lay out.
+ * to lay out; 26% still was, by about the width of one field.
  *
  * A default, not a constraint: {@link savePanelSize} remembers the drag per
- * collection, so anyone who has already sized this list keeps their size.
+ * collection, so anyone who has already sized this list keeps their size. The
+ * drag floor is `minPanelSizePx`, and it holds below ~1100px of split — at that
+ * width this percentage is already the floor.
  */
-const DEFAULT_PANEL_SIZE = 26;
+const DEFAULT_PANEL_SIZE = 22;
 
 function getSavedPanelSize(path: string): number {
     try {
@@ -163,8 +165,20 @@ export function SplitListView<M extends Record<string, unknown> = Record<string,
         dirty.current = modified;
     }, []);
 
-    // The form remounts per entity, so its dirty state must not leak into the next one.
+    // The form remounts per entity, so its dirty state must not leak into the
+    // next one — and it has to be cleared here rather than left to the next
+    // form's own first report, because that form spends the load in a skeleton
+    // and a navigation during it would prompt about the record before it.
+    //
+    // On a *change* of record only, never on this view's own mount: a record
+    // arriving from full screen carries its edit back in and opens dirty, and
+    // the form says so from its first effect — which runs before this one, being
+    // a child's. Clearing unconditionally overwrote that report with `false`,
+    // and the way out of the split stopped asking about a live edit.
+    const previousEntityId = useRef(selectedEntityId);
     useEffect(() => {
+        if (previousEntityId.current === selectedEntityId) return;
+        previousEntityId.current = selectedEntityId;
         dirty.current = false;
     }, [selectedEntityId]);
 
@@ -183,12 +197,19 @@ export function SplitListView<M extends Record<string, unknown> = Record<string,
         return true;
     }, []));
 
-    // Panel size state with persistence
+    // Panel size state with persistence.
+    //
+    // Written on drag, not on mount. An effect that saved on mount stored
+    // {@link DEFAULT_PANEL_SIZE} under this collection's key the first time
+    // anyone opened the split — after which the default was frozen in every
+    // browser that had ever seen it, and changing it here reached nobody but a
+    // new visitor. Only a size someone chose is a size worth remembering.
     const [panelSize, setPanelSize] = useState(() => getSavedPanelSize(path));
 
-    useEffect(() => {
-        savePanelSize(path, panelSize);
-    }, [panelSize, path]);
+    const handlePanelSizeChange = useCallback((size: number) => {
+        setPanelSize(size);
+        savePanelSize(path, size);
+    }, [path]);
 
     // ── Animation state ──
     // We track the "rendered" entity to keep the detail panel mounted during the exit animation.
@@ -379,6 +400,7 @@ export function SplitListView<M extends Record<string, unknown> = Record<string,
                         parentEntityIds={usedParentEntityIds}
                         selectedTab={selectedTab}
                         layout="split"
+                        onCloseRequest={handleCloseDetail}
                         onEditClick={() => {
                             navigate(buildUrl(`${path}/${renderedEntityId}/edit`));
                         }}
@@ -400,6 +422,11 @@ export function SplitListView<M extends Record<string, unknown> = Record<string,
                         parentEntityIds={usedParentEntityIds}
                         selectedTab={selectedTab}
                         layout="split"
+                        // The ✕, and where "save and close" lands. A plain
+                        // navigation: `useNavigationBlocker` above already
+                        // stands between it and an unsaved edit, so the ✕ asks
+                        // exactly what Escape and the browser's Back ask.
+                        onCloseRequest={handleCloseDetail}
                         onValuesModified={setDirty}
                         onSaved={() => {
                             setDirty(false);
@@ -444,7 +471,7 @@ export function SplitListView<M extends Record<string, unknown> = Record<string,
                 secondPanel={detailPanel}
                 showSecondPanel={isDetailVisible}
                 panelSizePercent={animationPhase === "entering" ? 100 : panelSize}
-                onPanelSizeChange={setPanelSize}
+                onPanelSizeChange={handlePanelSizeChange}
                 minPanelSizePx={240}
             />
 

package/src/components/CollectionViewBinding/ViewModeToggle.tsx

@@ -79,12 +79,17 @@ export function ViewModeToggle({
     const { t } = useTranslation();
 
 
-    // Get icon for current view mode
+    // Get icon for current view mode.
+    //
+    // `small` on the trigger, matching the filters button beside it — the two
+    // labelled buttons open the toolbar together, and at 16 against its 20 this
+    // one read as the smaller of the pair. The options inside the popover stay
+    // at `smallest`, which is the size every other menu icon uses.
     const getViewModeIcon = () => {
-        if (viewMode === "kanban") return <KanbanIcon size={iconSize.smallest}/>;
-        if (viewMode === "cards") return <LayoutGridIcon size={iconSize.smallest}/>;
-        if (viewMode === "table") return <TableIcon size={iconSize.smallest}/>;
-        return <ListIcon size={iconSize.smallest}/>;
+        if (viewMode === "kanban") return <KanbanIcon size={iconSize.small}/>;
+        if (viewMode === "cards") return <LayoutGridIcon size={iconSize.small}/>;
+        if (viewMode === "table") return <TableIcon size={iconSize.small}/>;
+        return <ListIcon size={iconSize.small}/>;
     };
 
     const getViewModeName = () => {

package/src/components/CollectionViewBinding/useBoardDataController.tsx

@@ -1,5 +1,5 @@
 
-import { Entity, FilterValues } from "@rebasepro/types";
+import { Entity, FilterValues, MAX_LIST_LIMIT } from "@rebasepro/types";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { getRelationIncludeParams, useData, useRebaseContext } from "@rebasepro/app";
 import type { AdminCollection } from "@rebasepro/admin-types";
@@ -220,6 +220,14 @@ export function useBoardDataController<M extends Record<string, unknown> = any,
         // Skip if we're in the middle of cleanup
         if (isCleaningUpRef.current) return;
 
+        // `itemCount` grows by one page per "load more" click with nothing
+        // stopping it, and a read above `MAX_LIST_LIMIT` is refused rather than
+        // trimmed — a column would stop loading with an error instead of
+        // stopping at the ceiling. Ask for what the platform serves; `hasMore`
+        // below still compares against the count the board asked for, so the
+        // column reports itself exhausted exactly where it did before.
+        const requestedCount = Math.min(itemCount, MAX_LIST_LIMIT);
+
         const currentDataClient = dataClientRef.current;
         const currentCollection = collectionRef.current;
         const currentContext = contextRef.current;
@@ -406,7 +414,7 @@ values: { ...e.values,
 
         const fetchOnce = () => accessor.find({
             where: whereFilter,
-            limit: itemCount,
+            limit: requestedCount,
             orderBy: orderByParam,
             include: includeParams,
             searchString: currentSearchString
@@ -445,7 +453,7 @@ values: { ...e.values,
             let liveDataReceived = false;
             const unsubscribe = accessor.listen({
                 where: whereFilter,
-                limit: itemCount,
+                limit: requestedCount,
                 orderBy: orderByParam,
                 include: includeParams,
                 // Read into a local at the top of this function and then used

package/src/components/CollectionViewBinding/usePreviewSlots.ts

@@ -1,13 +1,13 @@
 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";
@@ -38,6 +38,16 @@ export interface PreviewSlot {
     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;
 }
 
 /**
@@ -97,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;
 }
@@ -116,6 +139,8 @@ export interface CollectionSlotKeys {
     relationKeys: string[];
     statusKey: string | undefined;
     dateKey: string | undefined;
+    /** Declared only — see {@link EntityPreviewSlots.tags}. */
+    tagsKey: string | undefined;
 }
 
 /**
@@ -250,7 +275,8 @@ imageKey,
 subtitleKey,
 relationKeys,
 statusKey,
-dateKey };
+dateKey,
+tagsKey: getDisplayPropertyKey(collection, "tags") };
 }
 
 // ── Image unwrapping helper ───────────────────────────────────────────
@@ -281,6 +307,7 @@ function resolveImageSlot(
     if (resolvedValue === undefined || resolvedValue === null) return undefined;
 
     return {
+        role: "image",
         property: resolvedProperty as Property,
         propertyKey: imageKey,
         value: resolvedValue
@@ -319,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",
@@ -368,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;
@@ -381,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 };
     }
@@ -392,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 };
         }
@@ -468,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 };
         }
@@ -481,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,
@@ -489,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,
@@ -496,6 +540,7 @@ value: val };
         relations,
         status,
         date,
+        tags,
         entityId: entity.id
     };
 }
@@ -622,30 +667,37 @@ entity };
     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
-                ? { value: resolved.value }
+                ? { role,
+value: resolved.value }
                 : undefined;
 
-        const computedDate = computed(date);
+        const computedDate = computed("date", date);
 
         return {
             ...derived,
-            title: computed(title) ?? derived.title,
-            subtitle: computed(subtitle) ?? derived.subtitle,
-            image: computed(image) ?? derived.image,
-            status: computed(status) ?? derived.status,
+            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
+                : derived.date,
+            tags: computed("tags", tags) ?? derived.tags
         };
-    }, [derived, title, subtitle, image, status, date]);
+    }, [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

@@ -274,13 +274,20 @@ export function DrawerLogo({
 }) {
 
     const showFullContent = drawerOpen || drawerHovered;
+    const { t } = useTranslation();
 
     return (
         <div className="flex flex-row items-center shrink-0 pt-4 pb-0 px-2">
             {/* Logo — always visible */}
+            {/* Named explicitly because neither branch below carries text: the
+                stock `RebaseLogo` is a bare <svg> with no <title>, and a custom
+                `logo` only ever gets the generic alt "Logo", which names the image
+                rather than saying where the link goes. The title link beside it is
+                no help either — it renders only when a `title` is set. */}
             <Link
                 className="shrink-0 flex items-center justify-center w-[56px] h-[40px]"
                 to={logoDestination}
+                aria-label={t("home") || "Home"}
             >
                 {logo
                     ? <img src={logo} alt="Logo" className="w-[28px] h-[28px] object-contain"/>