@rebasepro/admin 0.13.0 → 0.13.1-canary.g06dbe5b

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,
@@ -281,8 +282,15 @@ const CollectionViewBindingInner = React.memo(
         useEffect(() => {
             if (!urlView && viewMode !== defaultViewMode) {
                 // View came from saved config but URL doesn't have it - update URL without push
-                setSearchParams((prev) => {
-                    const next = new URLSearchParams(prev);
+                // Built from `window.location.search`, not React Router's
+                // `prev`. The table controller writes the filter, sort and
+                // search params with `history.replaceState`, which React Router
+                // never observes — so `prev` is a stale snapshot, and merging
+                // into it silently dropped whatever it had not seen. Switching
+                // view mode after typing a search wiped `search=` from the URL,
+                // and the next reload came back unfiltered.
+                setSearchParams(() => {
+                    const next = new URLSearchParams(window.location.search);
                     next.set(VIEW_MODE_PARAM, viewMode);
                     return next;
                 }, { replace: true });
@@ -294,8 +302,10 @@ const CollectionViewBindingInner = React.memo(
             setViewModeState(newMode);
 
             // Update URL with __view param via React Router
-            setSearchParams((prev) => {
-                const next = new URLSearchParams(prev);
+            setSearchParams(() => {
+                // See the note above: the live URL is the only writer both
+                // this and the table controller agree on.
+                const next = new URLSearchParams(window.location.search);
                 if (newMode === defaultViewMode) {
                     next.delete(VIEW_MODE_PARAM);
                 } else {
@@ -687,7 +697,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 +739,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 +842,7 @@ parentEntityIds: parentEntityIds ?? EMPTY_ARRAY,
             collection={collection}
             filter={tableController.filterValues}
             sortBy={tableController.sortBy}
+            searchString={tableController.searchString}
             onCountChange={setDocsCount}
         />;
 
@@ -1126,13 +1146,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 +1327,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 +1378,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 +1403,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/CollectionViewStartActions.tsx

@@ -104,6 +104,13 @@ parentEntityIds,
         </Tooltip>
     );
 
+    // Whether the toolbar is showing icon-only controls. The filters button
+    // drops its label — and its icon a size with it — on a narrow layout as
+    // well as in the split view, and the sort and clear controls beside it
+    // follow: keyed on `compact` alone they stayed 20px next to a 16px filter
+    // icon at every width below `largeLayout`.
+    const iconOnlyToolbar = !largeLayout || Boolean(compact);
+
     const filtersButton = resolvedProperties && tableController.setFilterValues && (
         <Tooltip title={t("filters")}
             key={"filters_tooltip"}>
@@ -147,6 +154,7 @@ parentEntityIds,
             key={"sort_button"}
             tableController={tableController}
             properties={resolvedProperties}
+            compact={iconOnlyToolbar}
         />
     );
 
@@ -170,6 +178,7 @@ parentEntityIds,
         <ClearFilterSortButton
             key={"clear_filter"}
             tableController={tableController}
+            compact={iconOnlyToolbar}
             enabled={!collection.fixedFilter}/>,
         filterPresetsButton
     ];

package/src/components/CollectionViewBinding/EntityCardBinding.tsx

@@ -16,9 +16,14 @@ 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 { Highlighted } from "./SearchHighlight";
+import { useSearchExplanation, MatchExplanation, fieldLabel } from "./SearchExplanation";
+import { SlotValue, TagChips } from "./SlotValue";
 
 export type EntityCardBindingProps<M extends Record<string, unknown> = Record<string, unknown>> = {
+    /** The active search, so a card can mark the hit and say where it was. */
+    searchString?: string;
     entity: Entity<M>;
     collection: AdminCollection<M>;
     onClick?: (entity: Entity<M>) => void;
@@ -44,7 +49,8 @@ export function EntityCardBinding<M extends Record<string, unknown> = Record<str
     highlighted,
     onSelectionChange,
     selectionEnabled,
-    size = "m"
+    size = "m",
+    searchString
 }: EntityCardBindingProps<M>) {
     const authController = useAuthController();
     const analyticsController = useAnalyticsController();
@@ -56,13 +62,19 @@ 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
+    );
+
+    // Same explanation the list shows, so a reader switching view modes does
+    // not lose the reason a card is in front of them.
+    const { terms, offSlot } = useSearchExplanation(
+        entity,
+        collection.properties as Record<string, unknown>,
+        [slotKeys.titleKey, slotKeys.subtitleKey],
+        searchString
     );
 
     const handleClick = (e?: React.MouseEvent) => {
@@ -104,13 +116,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 +166,9 @@ 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"
-                        />
+                        terms.length > 0 && typeof slots.title.value === "string"
+                            ? <Highlighted text={slots.title.value} terms={terms}/>
+                            : <SlotValue slot={slots.title} size="small"/>
                     ) : (
                         <Typography variant="body2" className="text-surface-500">
                             {entity.id}
@@ -173,15 +176,19 @@ export function EntityCardBinding<M extends Record<string, unknown> = Record<str
                     )}
                 </div>
 
-                {/* Subtitle slot */}
-                {slots.subtitle && (
+                {/* Subtitle slot — or, while searching, where the hit was. A
+                    card whose match is in a field it does not show looks as
+                    arbitrary as a list row does. */}
+                {offSlot ? (
+                    <MatchExplanation
+                        match={offSlot}
+                        label={fieldLabel(collection.properties as Record<string, unknown>, offSlot.field)}
+                    />
+                ) : 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"
-                        />
+                        {terms.length > 0 && typeof slots.subtitle.value === "string"
+                            ? <Highlighted text={slots.subtitle.value} terms={terms}/>
+                            : <SlotValue slot={slots.subtitle} size="small"/>}
                     </div>
                 )}
 
@@ -208,15 +215,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>

package/src/components/CollectionViewBinding/SearchExplanation.tsx

@@ -0,0 +1,106 @@
+import React, { useMemo } from "react";
+import type { SearchMatch } from "@rebasepro/types";
+import { Snippet, searchTerms, offSlotMatch, localRowMatch } from "./SearchHighlight";
+
+/**
+ * The one place a view asks "why is this row here?" and gets something to draw.
+ *
+ * List, cards and board all render the same title-and-subtitle slots over the
+ * same machinery. An explanation that shows up in one of them and not the others
+ * reads as randomness rather than as a feature, so the decision and the markup
+ * live here and each view calls them.
+ */
+
+/**
+ * Terms to mark inside values the row already shows, plus the single match
+ * worth putting where the subtitle would go — or nothing, when the row is not
+ * the product of a search or the hit is already visible.
+ *
+ * Prefers the server's `_matches`, which knows the stemming the index used, and
+ * falls back to reading the row directly. That fallback is not belt-and-braces:
+ * rows reach the panel over REST, the realtime socket and the offline cache,
+ * and only one of those carries query metadata.
+ */
+export function useSearchExplanation(
+    entity: { values?: Record<string, unknown>; searchMatches?: SearchMatch[] },
+    properties: Record<string, unknown> | undefined,
+    shownKeys: (string | undefined)[],
+    searchString: string | undefined
+): { terms: string[]; offSlot: SearchMatch | undefined } {
+    const terms = useMemo(() => searchTerms(searchString), [searchString]);
+
+    // Joined so the memo compares by value: the caller builds this array inline,
+    // so its identity changes every render and would defeat the memo entirely.
+    //
+    // `|` is the separator because a property path is identifiers and dots — it
+    // cannot contain one, so the round trip is lossless. (A NUL would also be
+    // unambiguous and is what this first used; a raw control byte in a source
+    // file makes grep treat the whole file as binary, and the repo rejects it.)
+    const shownKey = shownKeys.map(k => k ?? "").join("|");
+
+    const offSlot = useMemo(
+        () => {
+            if (terms.length === 0) return undefined;
+            const shown = shownKey.split("|").map(k => k || undefined);
+            return offSlotMatch(entity.searchMatches, shown)
+                ?? localRowMatch(entity.values, properties, terms, shown);
+        },
+        [entity.searchMatches, entity.values, properties, shownKey, terms]
+    );
+
+    return { terms, offSlot };
+}
+
+/**
+ * Which field the hit was in, and the text around it.
+ *
+ * Sits where the subtitle would have gone. Deliberately quiet — a small amber
+ * caption and one line — because it is context for a result, not the result. It
+ * has to survive a narrow column, so it truncates rather than wraps.
+ */
+export function MatchExplanation({ match, label }: { match: SearchMatch; label: string }) {
+    return (
+        <div className="mt-0.5 flex items-baseline gap-1.5 min-w-0">
+            <span
+                className="shrink-0 text-[10px] uppercase tracking-wide font-semibold text-amber-700 dark:text-amber-500/90"
+                title={match.field}
+            >
+                {label}
+            </span>
+            <span className="truncate text-xs text-surface-500 dark:text-surface-400 min-w-0">
+                <Snippet text={match.snippet}/>
+            </span>
+        </div>
+    );
+}
+
+/**
+ * What to call a matched field on screen.
+ *
+ * The path is what the config and the server speak — `questionnaire.
+ * certifications` — and is unreadable in a list. Resolve it to the property's
+ * declared `name`, walking into `map` properties for a dotted path, and fall
+ * back to the last segment humanised, so an unnamed field still reads as words
+ * rather than as a path.
+ */
+export function fieldLabel(properties: Record<string, unknown> | undefined, path: string): string {
+    const segments = path.split(".");
+    let node = properties;
+    let named: string | undefined;
+
+    for (const segment of segments) {
+        const property = node?.[segment] as { name?: string; properties?: Record<string, unknown> } | undefined;
+        // A path can run deeper than the schema describes — `content.value`,
+        // where `content` is an array of blocks whose shape is not declared
+        // property-by-property. Keep the last name that *was* declared rather
+        // than discarding it: "Content" is the answer a reader wants, and
+        // resetting to undefined here labelled that field "Value".
+        if (!property) break;
+        named = property.name ?? named;
+        node = property.properties;
+    }
+
+    if (named) return named;
+    const last = segments[segments.length - 1] ?? path;
+    return last.replace(/[_-]+/g, " ").replace(/^./, c => c.toUpperCase());
+}