@rebasepro/admin 0.13.0 → 0.13.1-canary.g06dbe5b

package/src/components/CollectionViewBinding/SplitListView.tsx

@@ -79,6 +79,21 @@ function isListShortcutTarget(target: HTMLElement | null, detailPanel: HTMLEleme
     return !detailPanel?.contains(target);
 }
 
+/**
+ * The list's share of the split, as a percentage, before anyone drags it.
+ *
+ * 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; 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. 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 = 22;
+
 function getSavedPanelSize(path: string): number {
     try {
         const saved = localStorage.getItem(`${PANEL_SIZE_KEY}_${path}`);
@@ -87,7 +102,7 @@ function getSavedPanelSize(path: string): number {
             if (!isNaN(val) && val > 0 && val < 100) return val;
         }
     } catch { /* ignore */ }
-    return 30;
+    return DEFAULT_PANEL_SIZE;
 }
 
 function savePanelSize(path: string, size: number) {
@@ -150,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]);
 
@@ -170,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.
@@ -366,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`));
                         }}
@@ -387,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);
@@ -431,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,9 +414,10 @@ values: { ...e.values,
 
         const fetchOnce = () => accessor.find({
             where: whereFilter,
-            limit: itemCount,
+            limit: requestedCount,
             orderBy: orderByParam,
-            include: includeParams
+            include: includeParams,
+            searchString: currentSearchString
         });
 
         const onError = (error: Error) => {
@@ -444,9 +453,14 @@ values: { ...e.values,
             let liveDataReceived = false;
             const unsubscribe = accessor.listen({
                 where: whereFilter,
-                limit: itemCount,
+                limit: requestedCount,
                 orderBy: orderByParam,
-                include: includeParams
+                include: includeParams,
+                // Read into a local at the top of this function and then used
+                // nowhere, in both places it was read. The board took a search
+                // term, re-subscribed every column when it changed, and
+                // returned the same rows.
+                searchString: currentSearchString
             }, res => {
                 liveDataReceived = true;
                 onUpdate(res.data as Entity<M>[]);
@@ -539,7 +553,10 @@ values: { ...e.values,
                     };
 
                     accessor.count({
-                        where: whereFilter
+                        where: whereFilter,
+                        // Or the column header counts the unsearched collection
+                        // while the column beneath it shows searched rows.
+                        searchString: currentSearchString
                     }).then(count => {
                         if (isCleaningUpRef.current) return;
                         setColumnData(prev => ({

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