@rebasepro/admin 0.13.0 → 0.13.1-canary.g394d868

package/src/components/CollectionViewBinding/CollectionListViewBinding.tsx

@@ -24,7 +24,8 @@ import { getEntityPreviewKeys } from "../../util/previews";
 import { IconForView } from "@rebasepro/app";
 import { getIcon } from "@rebasepro/app";
 import { getValueInPath } from "@rebasepro/utils";
-import { useCollectionSlotKeys, resolveEntitySlots, type CollectionSlotKeys } from "./usePreviewSlots";
+import { useCollectionSlotKeys, useEntitySlots, type CollectionSlotKeys } from "./usePreviewSlots";
+import { SlotValue, TagChips } from "./SlotValue";
 import { useAdminContext } from "../../hooks/useAdminContext";
 import { resolveEntityAction } from "../../util/resolutions";
 
@@ -78,8 +79,30 @@ type ListColumnDef = {
     isDate?: boolean;
     align: "left" | "center" | "right";
     width: string;
+    /**
+     * What {@link width} costs in pixels, so the fit calculation can budget in
+     * the same units the row lays out in. A flat per-column estimate treated a
+     * relation (w-64) as costing the same as a date (w-28), which is where a row
+     * ran out of width for the title while still claiming everything fit.
+     */
+    widthPx: number;
 };
 
+/**
+ * How wide a column of this property wants to be — the Tailwind class the cell
+ * gets, and the pixel cost of that class. The two are returned together because
+ * they must not drift: the budget is only meaningful if it describes the widths
+ * actually rendered. `lg:` variants key off the viewport, not this panel, so a
+ * narrow split on a wide screen gets the larger of the two — the cost we budget.
+ */
+function getIdealColumnWidth(prop: Property): { width: string, widthPx: number } {
+    if (prop.type === "string" && "enum" in prop) return { width: "flex-shrink-0 w-32", widthPx: 128 };
+    if (prop.type === "date" || prop.type === "number" || prop.type === "boolean") return { width: "flex-shrink-0 w-28", widthPx: 112 };
+    if (prop.type === "reference" || prop.type === "relation") return { width: "flex-shrink-0 w-56 lg:w-64", widthPx: 256 };
+    if (prop.type === "string") return { width: "flex-shrink-0 w-40 lg:w-48", widthPx: 192 };
+    return { width: "flex-shrink-0 w-40", widthPx: 160 };
+}
+
 /**
  * Get row padding/spacing classes based on size
  */
@@ -108,6 +131,30 @@ function getEstimatedRowHeight(size: CollectionSize): number {
     }
 }
 
+// ── Row layout budget ─────────────────────────────────────────────────
+// What the row spends before a single column is placed. These mirror the
+// classes on the row itself (`px-5`, `gap-4`, `w-8` checkbox, `w-10` image);
+// they are the same layout described twice, so a change to one is a change to
+// the other.
+
+/** `px-5` on both sides. */
+const ROW_PADDING_WIDTH = 40;
+/** The checkbox cell (`w-8`). */
+const CHECKBOX_WIDTH = 32;
+/** The thumbnail / icon square (`w-10`). */
+const IMAGE_WIDTH = 40;
+/** `gap-4` between every cell of the row. */
+const COLUMN_GAP = 16;
+
+/**
+ * The title's share of a row, taken before any column bids for width.
+ *
+ * A title is a name, and a name truncated to "Lider Sr. en…" has stopped being
+ * one. Columns are a scanner's convenience; the title is the row's identity, so
+ * a narrow list spends its width on the title and simply shows fewer columns.
+ */
+const TITLE_COMFORTABLE_WIDTH = 320;
+
 /** Number of extra rows rendered above/below the viewport. */
 const OVERSCAN_COUNT = 8;
 
@@ -293,14 +340,21 @@ export function CollectionListViewBinding<M extends Record<string, unknown> = Re
     const context = useAdminContext();
 
     const containerRef = useRef<HTMLDivElement>(null);
-    const [containerWidth, setContainerWidth] = useState(1200);
+    // `undefined` is "not measured yet", and it renders the title alone. The
+    // seed used to be a 1200px guess, which is a claim about a list that may be
+    // a 300px column of a split — and, because the ref below was never attached
+    // to anything, a guess nothing ever corrected.
+    const [containerWidth, setContainerWidth] = useState<number | undefined>(undefined);
 
     // Track container width for responsive column visibility
     useEffect(() => {
         const el = containerRef.current;
         if (!el) return;
+        const measure = (width: number) => setContainerWidth(width > 0 ? width : undefined);
+        measure(el.getBoundingClientRect().width);
+        if (typeof ResizeObserver === "undefined") return;
         const ro = new ResizeObserver(([entry]) => {
-            if (entry) setContainerWidth(entry.contentRect.width);
+            if (entry) measure(entry.contentRect.width);
         });
         ro.observe(el);
         return () => ro.disconnect();
@@ -343,14 +397,6 @@ export function CollectionListViewBinding<M extends Record<string, unknown> = Re
     const columns = useMemo(() => {
         const cols: ListColumnDef[] = [];
 
-        const getIdealColumnWidth = (prop: Property) => {
-            if (prop.type === "string" && "enum" in prop) return "flex-shrink-0 w-32";
-            if (prop.type === "date" || prop.type === "number" || prop.type === "boolean") return "flex-shrink-0 w-28";
-            if (prop.type === "reference" || prop.type === "relation") return "flex-shrink-0 w-56 lg:w-64";
-            if (prop.type === "string") return "flex-shrink-0 w-40 lg:w-48";
-            return "flex-shrink-0 w-40";
-        };
-
         if (resolvedCollection.listProperties && resolvedCollection.listProperties.length > 0) {
             resolvedCollection.listProperties.forEach((key, index) => {
                 const prop = resolvedCollection.properties[key] as Property;
@@ -362,7 +408,9 @@ export function CollectionListViewBinding<M extends Record<string, unknown> = Re
                     property: prop,
                     isTitle: index === 0,
                     align: prop.type === "number" || prop.type === "date" ? "right" : "left",
-                    width: index === 0 ? "flex-1 min-w-[200px]" : getIdealColumnWidth(prop)
+                    ...(index === 0
+                        ? { width: "flex-1 min-w-0", widthPx: TITLE_COMFORTABLE_WIDTH }
+                        : getIdealColumnWidth(prop))
                 });
             });
             return cols;
@@ -378,7 +426,8 @@ export function CollectionListViewBinding<M extends Record<string, unknown> = Re
                     property: prop,
                     isTitle: true,
                     align: "left",
-                    width: "flex-1 min-w-[200px]"
+                    width: "flex-1 min-w-0",
+                    widthPx: TITLE_COMFORTABLE_WIDTH
                 });
             }
         }
@@ -421,7 +470,7 @@ export function CollectionListViewBinding<M extends Record<string, unknown> = Re
                 label: prop.name || key,
                 property: prop,
                 align: prop.type === "number" || prop.type === "date" ? "right" : "left",
-                width: getIdealColumnWidth(prop)
+                ...getIdealColumnWidth(prop)
             });
         });
 
@@ -434,7 +483,8 @@ export function CollectionListViewBinding<M extends Record<string, unknown> = Re
                     property: prop,
                     isStatus: true,
                     align: "center",
-                    width: "flex-shrink-0 w-32"
+                    width: "flex-shrink-0 w-32",
+                    widthPx: 128
                 });
             }
         }
@@ -448,7 +498,8 @@ export function CollectionListViewBinding<M extends Record<string, unknown> = Re
                     property: prop,
                     isDate: true,
                     align: "right",
-                    width: "flex-shrink-0 w-28"
+                    width: "flex-shrink-0 w-28",
+                    widthPx: 112
                 });
             }
         }
@@ -458,33 +509,39 @@ export function CollectionListViewBinding<M extends Record<string, unknown> = Re
 
     const showImage = size !== "xs";
 
-    // Responsive: determine visible columns based on container width.
-    // The first extra column requires significantly more available space (600px)
-    // to ensure the title area has generous room before columns appear.
-    // Each subsequent column needs 160px.
+    // Responsive: keep only the columns the row can actually pay for.
+    //
+    // The title is what a row is *for* — it is the one cell that identifies the
+    // record — so it is not one competitor among the columns: it takes its
+    // comfortable share off the top, and the columns divide what is left. Each
+    // one is charged its own rendered width, and the first that cannot be
+    // afforded ends the row: dropping a column and keeping the narrower one
+    // after it would reorder the row as it resizes.
     const visibleColumns = useMemo(() => {
         if (columns.length <= 1) return columns;
 
         const titleCol = columns.find(c => c.isTitle);
         const extraCols = columns.filter(c => !c.isTitle);
-
-        // Base width consumed by fixed-width elements (padding + checkbox + image + min title)
-        const baseWidth = 40 + (selectionEnabled ? 40 : 0) + (showImage ? 56 : 0) + 200;
-        const availableForExtra = Math.max(0, containerWidth - baseWidth);
-
-        // First extra column needs 500px; each additional needs 160px
-        const FIRST_COL_THRESHOLD = 500;
-        const EXTRA_COL_WIDTH = 160;
-
-        let maxExtraCols = 0;
-        if (availableForExtra >= FIRST_COL_THRESHOLD) {
-            maxExtraCols = 1 + Math.floor((availableForExtra - FIRST_COL_THRESHOLD) / EXTRA_COL_WIDTH);
+        const withTitle = (kept: ListColumnDef[]) => [...(titleCol ? [titleCol] : []), ...kept];
+
+        // Unmeasured: the title alone, which is the answer we would rather flash
+        // than a row of columns squeezing it down to an ellipsis.
+        if (containerWidth === undefined) return withTitle([]);
+
+        const chrome = ROW_PADDING_WIDTH
+            + (selectionEnabled ? CHECKBOX_WIDTH + COLUMN_GAP : 0)
+            + (showImage ? IMAGE_WIDTH + COLUMN_GAP : 0);
+        let remaining = containerWidth - chrome - TITLE_COMFORTABLE_WIDTH;
+
+        const kept: ListColumnDef[] = [];
+        for (const col of extraCols) {
+            const cost = col.widthPx + COLUMN_GAP;
+            if (cost > remaining) break;
+            remaining -= cost;
+            kept.push(col);
         }
 
-        return [
-            ...(titleCol ? [titleCol] : []),
-            ...extraCols.slice(0, maxExtraCols)
-        ];
+        return withTitle(kept);
     }, [columns, containerWidth, selectionEnabled, showImage]);
 
     const handleEntityClick = useCallback((entity: Entity<M>) => {
@@ -528,54 +585,56 @@ customEntityActions });
     }, [handleSelectionChange]);
 
     return (
-        <ListView<Entity<M>>
-            data={data}
-            dataLoading={dataLoading}
-            noMoreToLoad={noMoreToLoad}
-            dataLoadingError={dataLoadingError}
-            itemCount={itemCount}
-            setItemCount={setItemCount}
-            pageSize={pageSize}
-            paginationEnabled={paginationEnabled}
-            onItemClick={handleEntityClick}
-            selectedIds={selectedIds}
-            highlightedIds={highlightedIds}
-            selectionEnabled={selectionEnabled}
-            emptyComponent={emptyComponent}
-            size={size}
-            selectedEntityId={selectedEntityId}
-            renderRow={useCallback(({ item: entity, style, className, selected, highlighted, isLast, onClick, onSelectionChange }) => {
-                return (
-                    <div
-                        key={entity.id}
-                        style={style}
-                        className={className}
-                    >
-                        <ListRow
-                            entity={entity}
-                            collection={resolvedCollection}
-                            onClick={handleEntityClick}
-                            selected={selected}
-                            highlighted={highlighted}
-                            onSelectionChange={handleRowSelectionChange}
-                            selectionEnabled={selectionEnabled}
-                            columns={visibleColumns}
-                            slotKeys={slotKeys}
-                            rowClasses={rowClasses}
-                            showImage={showImage}
-                            size={size}
-                            isLast={isLast}
-                            isActive={selectedEntityId !== undefined && entity.id === selectedEntityId}
-                            listViewActions={getListViewActions(entity)}
-                            context={context}
-                            path={path}
-                            selectionController={selectionController}
-                            openEntityMode={openEntityMode}
-                        />
-                    </div>
-                );
-            }, [resolvedCollection, selectionEnabled, visibleColumns, slotKeys, rowClasses, showImage, size, selectedEntityId, getListViewActions, context, path, selectionController, openEntityMode, handleRowSelectionChange, handleEntityClick])}
-        />
+        <div ref={containerRef} className="w-full">
+            <ListView<Entity<M>>
+                data={data}
+                dataLoading={dataLoading}
+                noMoreToLoad={noMoreToLoad}
+                dataLoadingError={dataLoadingError}
+                itemCount={itemCount}
+                setItemCount={setItemCount}
+                pageSize={pageSize}
+                paginationEnabled={paginationEnabled}
+                onItemClick={handleEntityClick}
+                selectedIds={selectedIds}
+                highlightedIds={highlightedIds}
+                selectionEnabled={selectionEnabled}
+                emptyComponent={emptyComponent}
+                size={size}
+                selectedEntityId={selectedEntityId}
+                renderRow={useCallback(({ item: entity, style, className, selected, highlighted, isLast, onClick, onSelectionChange }) => {
+                    return (
+                        <div
+                            key={entity.id}
+                            style={style}
+                            className={className}
+                        >
+                            <ListRow
+                                entity={entity}
+                                collection={resolvedCollection}
+                                onClick={handleEntityClick}
+                                selected={selected}
+                                highlighted={highlighted}
+                                onSelectionChange={handleRowSelectionChange}
+                                selectionEnabled={selectionEnabled}
+                                columns={visibleColumns}
+                                slotKeys={slotKeys}
+                                rowClasses={rowClasses}
+                                showImage={showImage}
+                                size={size}
+                                isLast={isLast}
+                                isActive={selectedEntityId !== undefined && entity.id === selectedEntityId}
+                                listViewActions={getListViewActions(entity)}
+                                context={context}
+                                path={path}
+                                selectionController={selectionController}
+                                openEntityMode={openEntityMode}
+                            />
+                        </div>
+                    );
+                }, [resolvedCollection, selectionEnabled, visibleColumns, slotKeys, rowClasses, showImage, size, selectedEntityId, getListViewActions, context, path, selectionController, openEntityMode, handleRowSelectionChange, handleEntityClick])}
+            />
+        </div>
     );
 }
 
@@ -628,8 +687,11 @@ const ListRow = React.memo(function ListRow<M extends Record<string, unknown>>({
     selectionController?: SelectionController<M>;
     openEntityMode?: "side_panel" | "full_screen" | "split" | "dialog";
 }) {
-    // ── Resolve slots (pure function, no hooks) ──
-    const slots = resolveEntitySlots(
+    // ── Resolve slots ──
+    // A hook now, not a pure call: a `display` resolver may have to fetch what
+    // fills a slot, so the row subscribes to the result and re-renders when it
+    // lands. `ListRow` is memoized, which is what keeps that to the one row.
+    const slots = useEntitySlots(
         entity as Entity<Record<string, unknown>>,
         collection as AdminCollection<Record<string, unknown>>,
         slotKeys
@@ -696,7 +758,7 @@ const ListRow = React.memo(function ListRow<M extends Record<string, unknown>>({
                 <div className="flex-shrink-0">
                     {slots.image ? (
                         <div className={cls("w-10 h-10 rounded-lg border relative overflow-hidden bg-surface-100 dark:bg-surface-900", defaultBorderMixin)}>
-                            <PropertyPreview propertyKey={slots.image.propertyKey} value={slots.image.value} property={slots.image.property} size="small" fill={true}/>
+                            <SlotValue slot={slots.image} size="small" fill={true}/>
                         </div>
                     ) : (
                         <div className={cls("w-10 h-10 rounded-lg bg-surface-100 dark:bg-surface-900 flex items-center justify-center border", defaultBorderMixin)}>
@@ -715,13 +777,7 @@ const ListRow = React.memo(function ListRow<M extends Record<string, unknown>>({
                 <div className="truncate">
                     {slots.title?.value !== undefined ? (
                         <Typography component="div" variant="body2" className="font-semibold text-surface-900 dark:text-surface-50 truncate transition-colors group-hover:text-primary-600 dark:group-hover:text-primary-400">
-                            <PropertyPreview
-                                propertyKey={slots.title.propertyKey}
-                                value={slots.title.value}
-                                property={slots.title.property}
-                                size="small"
-                                textOnly={true}
-                            />
+                            <SlotValue slot={slots.title} size="small"/>
                         </Typography>
                     ) : (
                         <Typography component="div" variant="body2" className="font-semibold text-surface-500 dark:text-surface-400 font-mono text-xs transition-colors group-hover:text-primary-600 dark:group-hover:text-primary-400">
@@ -734,13 +790,7 @@ const ListRow = React.memo(function ListRow<M extends Record<string, unknown>>({
                 {slots.subtitle && (
                     <div className="truncate mt-0.5">
                         <Typography variant="caption" component="div" className="text-surface-500 dark:text-surface-400 truncate">
-                            <PropertyPreview
-                                propertyKey={slots.subtitle.propertyKey}
-                                value={slots.subtitle.value}
-                                property={slots.subtitle.property}
-                                size="small"
-                                textOnly={true}
-                            />
+                            <SlotValue slot={slots.subtitle} size="small"/>
                         </Typography>
                     </div>
                 )}
@@ -820,23 +870,33 @@ const ListRow = React.memo(function ListRow<M extends Record<string, unknown>>({
                     })}
                 </>
             ) : (
-                /* ── SLOT MODE (editorial scanner layout) ── */
+                /* ── SLOT MODE (editorial scanner layout) ──
+                   The slots give up the row from the right inwards, the same
+                   rule the columns follow above: whatever sits furthest from
+                   the title is furthest from what the row is about, so it is
+                   the first thing a narrowing row can afford to lose. Reading
+                   the thresholds in source order gives the reverse of the
+                   order they vanish in — they are written left to right, and
+                   they disappear right to left. */
                 <div className="flex items-center gap-4 flex-shrink-0 ml-auto">
-                    {/* STATUS slot — hidden when row is narrow */}
+                    {/* TAGS slot — "free chips beside the status", so beside it.
+                        Leftmost of the three, so the last to go. */}
+                    {slots.tags && (
+                        <div className="flex items-center gap-1 flex-shrink-0 @max-[360px]:hidden">
+                            <TagChips slot={slots.tags} max={3}/>
+                        </div>
+                    )}
+
+                    {/* STATUS slot */}
                     {slots.status && (
-                        <div className="flex-shrink-0 @max-[400px]:hidden">
-                            <PropertyPreview
-                                propertyKey={slots.status.propertyKey}
-                                value={slots.status.value}
-                                property={slots.status.property}
-                                size="small"
-                            />
+                        <div className="flex-shrink-0 @max-[460px]:hidden">
+                            <SlotValue slot={slots.status} size="small"/>
                         </div>
                     )}
 
-                    {/* DATE slot */}
+                    {/* DATE slot — rightmost, so the first to go. */}
                     {slots.date && (
-                        <div className="flex-shrink-0 text-right w-[80px] @max-[500px]:hidden">
+                        <div className="flex-shrink-0 text-right w-[80px] @max-[560px]:hidden">
                             <Typography variant="caption" className="whitespace-nowrap text-surface-400 dark:text-surface-500 font-medium">
                                 {slots.date.formatted ?? "—"}
                             </Typography>

package/src/components/CollectionViewBinding/CollectionViewActions.tsx

@@ -74,7 +74,7 @@ export function CollectionViewActions<M extends Record<string, unknown>>({
                 size="small"
                 variant="filled"
                 color="primary">
-                Add {collection.singularName ?? collection.name}
+                {t("add_specific", { name: collection.singularName ?? collection.name })}
             </Button>
             : <Button
                 id={`add_entity_${path}`}

package/src/components/CollectionViewBinding/CollectionViewBinding.tsx

@@ -28,6 +28,7 @@ import { ReferencePreview } from "../../preview";
 import {
     CollectionScopeProvider,
     OnColumnResizeParams,
+    getRedundantChildViewColumnIds,
     useAnalyticsController,
     useAuthController,
     useColumnIds,
@@ -687,7 +688,16 @@ parentEntityIds: parentEntityIds ?? EMPTY_ARRAY,
             // Each child view gets a column that jumps to its tab. Keyed by the
             // view's collection slug, which is the relation key — two relations
             // to the same target used to collapse onto one column id here.
-            const subcollectionsList = getEntityChildViews(collection).map(v => v.collection as AdminCollection);
+            //
+            // Except where the relation was declared as a property and so already
+            // has a column showing the child rows: the button then repeated that
+            // column's heading verbatim. Filtered here as well as in
+            // `useColumnIds` so no id is displayed without a delegate to build it,
+            // and so the column picker does not offer the one back.
+            const redundant = getRedundantChildViewColumnIds(collectionWithLocalOrder);
+            const subcollectionsList = getEntityChildViews(collection)
+                .map(v => v.collection as AdminCollection)
+                .filter(child => !redundant.has(getSubcollectionColumnId(child)));
             const subcollectionColumns: AdditionalFieldDelegate<M, any>[] = subcollectionsList.map((subcollection: AdminCollection) => {
                 return {
                     key: getSubcollectionColumnId(subcollection),
@@ -720,7 +730,7 @@ parentEntityIds: parentEntityIds ?? EMPTY_ARRAY,
                 ...(collection.additionalFields ?? EMPTY_ARRAY),
                 ...subcollectionColumns
             ];
-        }, [collection, path, sidePanelController]);
+        }, [collection, collectionWithLocalOrder, path, sidePanelController]);
 
         const updateLastDeleteTimestamp = useCallback(() => {
             setLastDeleteTimestamp(Date.now());
@@ -823,6 +833,7 @@ parentEntityIds: parentEntityIds ?? EMPTY_ARRAY,
             collection={collection}
             filter={tableController.filterValues}
             sortBy={tableController.sortBy}
+            searchString={tableController.searchString}
             onCountChange={setDocsCount}
         />;
 
@@ -1126,13 +1137,18 @@ parentEntityIds,
 
                 {countFetcher}
 
-                {tableController.dataLoadingError && tableController.data.length > 0 && (
+                {/* A plugin's error view takes priority over the built-in
+                    banner, the same precedence the empty state uses. This was
+                    computed above and then rendered nowhere, so `collection.error`
+                    — a declared, documented slot with its own props interface —
+                    did nothing at all, and a plugin author had no way to tell. */}
+                {pluginErrorView ?? (tableController.dataLoadingError && tableController.data.length > 0 && (
                     <div className="flex items-center gap-4 px-4 py-2 bg-red-50 dark:bg-red-900/20 border-b border-red-200 dark:border-red-800 flex-shrink-0">
                         <Typography variant="body2" className="text-red-700 dark:text-red-300 flex-1">
                             <strong>Warning:</strong> {tableController.dataLoadingError.message || "Failed to update data."}
                         </Typography>
                     </div>
-                )}
+                ))}
 
                 {/* When isSplitLayout, SplitListView is ALWAYS mounted — regardless
                     of viewMode. The toolbar + current view live in the left panel;
@@ -1302,17 +1318,26 @@ function DefaultCollectionEmptyState({
  */
 const inflightCountRequests = new Map<string, Promise<number>>();
 
-function EntitiesCount({
+export function EntitiesCount({
     path,
     collection,
     filter,
     sortBy,
+    searchString,
     onCountChange
 }: {
     path: string,
     collection: AdminCollection,
     filter?: FilterValues<any>,
     sortBy?: [string, "asc" | "desc"],
+    /**
+     * Required, not optional. The term sits in the same scope as the element
+     * that mounts this and is passed to the toolbar and the empty state beside
+     * it — it was simply not passed here, so a searched list showed the count
+     * of the unsearched collection. A required prop is what stops the next
+     * caller doing the same; there is no useful "count without the search".
+     */
+    searchString: string | undefined,
     onCountChange?: (count: number | null | undefined) => void,
 }) {
 
@@ -1344,12 +1369,17 @@ function EntitiesCount({
         const orderByParams: [string, "asc" | "desc"] | undefined = sortByProperty && currentSort ? [String(sortByProperty), currentSort] : undefined;
 
         // Deduplicate inflight count requests (e.g. React StrictMode double-mount)
-        const cacheKey = `${path}|${filterKey}|${sortByProperty ?? ""}|${currentSort ?? ""}`;
+        // The search term is part of the query, so it is part of the key. The
+        // cache is module-level and outlives an unmount, so a key that omits it
+        // does not merely lose precision — it answers one search with a
+        // different search's total.
+        const cacheKey = `${path}|${filterKey}|${sortByProperty ?? ""}|${currentSort ?? ""}|${searchString ?? ""}`;
         let countPromise = inflightCountRequests.get(cacheKey);
         if (!countPromise) {
             countPromise = accessor.count({
                 where: whereParams,
-                orderBy: orderByParams
+                orderBy: orderByParams,
+                searchString
             });
             inflightCountRequests.set(cacheKey, countPromise);
             // Clean up the inflight entry once resolved/rejected
@@ -1364,7 +1394,7 @@ function EntitiesCount({
         });
 
         return () => { cancelled = true; };
-    }, [path, filterKey, sortByProperty, currentSort]);
+    }, [path, filterKey, sortByProperty, currentSort, searchString]);
 
     // Count is now displayed in the breadcrumb bar, this component only fetches and reports
     return null;

package/src/components/CollectionViewBinding/EntityCardBinding.tsx

@@ -16,7 +16,8 @@ import {
 } from "@rebasepro/app";
 import { useAnalyticsController } from "@rebasepro/app";
 import { IconForView } from "@rebasepro/app";
-import { useCollectionSlotKeys, resolveEntitySlots } from "./usePreviewSlots";
+import { useCollectionSlotKeys, useEntitySlots } from "./usePreviewSlots";
+import { SlotValue, TagChips } from "./SlotValue";
 
 export type EntityCardBindingProps<M extends Record<string, unknown> = Record<string, unknown>> = {
     entity: Entity<M>;
@@ -56,13 +57,10 @@ export function EntityCardBinding<M extends Record<string, unknown> = Record<str
         customizationController.propertyConfigs
     );
 
-    const slots = useMemo(
-        () => resolveEntitySlots(
-            entity as Entity<Record<string, unknown>>,
-            collection as AdminCollection<Record<string, unknown>>,
-            slotKeys
-        ),
-        [entity, collection, slotKeys]
+    const slots = useEntitySlots(
+        entity as Entity<Record<string, unknown>>,
+        collection as AdminCollection<Record<string, unknown>>,
+        slotKeys
     );
 
     const handleClick = (e?: React.MouseEvent) => {
@@ -104,13 +102,7 @@ export function EntityCardBinding<M extends Record<string, unknown> = Record<str
             <div className="aspect-[4/3] relative overflow-hidden bg-surface-100 dark:bg-surface-900">
                 {slots.image ? (
                     <div className="w-full h-full">
-                        <PropertyPreview
-                            property={slots.image.property}
-                            propertyKey={slots.image.propertyKey}
-                            size="medium"
-                            value={slots.image.value}
-                            fill={true}
-                        />
+                        <SlotValue slot={slots.image} size="medium" fill={true}/>
                     </div>
                 ) : (
                     <div className="w-full h-full flex items-center justify-center">
@@ -160,12 +152,7 @@ export function EntityCardBinding<M extends Record<string, unknown> = Record<str
                 {/* Title slot */}
                 <div className="truncate my-1 text-sm font-medium min-h-[20px]">
                     {slots.title ? (
-                        <PropertyPreview
-                            propertyKey={slots.title.propertyKey}
-                            value={slots.title.value}
-                            property={slots.title.property}
-                            size="small"
-                        />
+                        <SlotValue slot={slots.title} size="small"/>
                     ) : (
                         <Typography variant="body2" className="text-surface-500">
                             {entity.id}
@@ -176,12 +163,7 @@ export function EntityCardBinding<M extends Record<string, unknown> = Record<str
                 {/* Subtitle slot */}
                 {slots.subtitle && (
                     <div className="line-clamp-3 [&_div]:line-clamp-3 text-xs text-surface-600 dark:text-surface-400 [&_p]:!my-1 [&_p:first-child]:!mt-0 [&_p:last-child]:!mb-0">
-                        <PropertyPreview
-                            propertyKey={slots.subtitle.propertyKey}
-                            value={slots.subtitle.value}
-                            property={slots.subtitle.property}
-                            size="small"
-                        />
+                        <SlotValue slot={slots.subtitle} size="small"/>
                     </div>
                 )}
 
@@ -208,15 +190,20 @@ export function EntityCardBinding<M extends Record<string, unknown> = Record<str
                     </div>
                 )}
 
-                {/* Status slot */}
-                {slots.status && (
-                    <div className="mt-1">
-                        <PropertyPreview
-                            propertyKey={slots.status.propertyKey}
-                            value={slots.status.value}
-                            property={slots.status.property}
-                            size="small"
-                        />
+                {/* Status + tags slot — "free chips beside the status" */}
+                {(slots.status || slots.tags) && (
+                    <div className="flex items-center gap-1 mt-1 flex-wrap">
+                        {slots.status && <SlotValue slot={slots.status} size="small"/>}
+                        {slots.tags && <TagChips slot={slots.tags}/>}
+                    </div>
+                )}
+
+                {/* Date slot — a card is a list row with the image on top, and the
+                    row has always shown it. It was the one slot the card resolved
+                    and never rendered. */}
+                {slots.date && (
+                    <div className="mt-1 text-[10px] text-surface-500 dark:text-surface-400">
+                        {slots.date.formatted}
                     </div>
                 )}
             </div>