@rebasepro/admin 0.13.0 → 0.13.1-canary.g18cfeb7

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>

package/src/components/CollectionViewBinding/SlotValue.tsx

@@ -0,0 +1,156 @@
+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 {
+    slot: PreviewSlot | undefined;
+    size: PreviewSize;
+    /**
+     * Relations and references render as one line of linked text rather than as
+     * a card. Defaults to true: a slot is a line in a row or a card, and a
+     * relation that renders its own bordered card there — with its own id line
+     * and its own side-panel button — is a card inside a card.
+     *
+     * Pass `false` only for a slot with room for one, which in practice is
+     * none of them.
+     */
+    textOnly?: boolean;
+    /** Images only: fill the container rather than fitting inside it. */
+    fill?: boolean;
+}
+
+/**
+ * One display slot, rendered.
+ *
+ * A slot's value arrives one of two ways and they cannot be rendered the same:
+ *
+ * - **From a property** — render it with that property's own preview, so an
+ *   enum status keeps its colour, a date keeps its format and a storage path
+ *   becomes a thumbnail. This is why a declared path beats a resolver whenever
+ *   the value is actually on the record.
+ * - **From a resolver** — there is no property, because the value was computed
+ *   or fetched. All that can be said about it is that it is text.
+ *
+ * The branch lives here, once, rather than at each of the fourteen places the
+ * list row, the card and the board card render a slot. That count is the reason:
+ * the last time a rule like this was inlined per call site, it drifted into
+ * seven versions.
+ */
+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)
+            ? slot.value.map(item => String(item)).join(", ")
+            : String(slot.value);
+        return <>{text}</>;
+    }
+
+    return <PropertyPreview
+        propertyKey={slot.propertyKey}
+        value={slot.value as never}
+        property={slot.property}
+        size={size}
+        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/SplitListCloseButton.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { IconButton, iconSize, Tooltip, XIcon } from "@rebasepro/ui";
+import { IconButton, iconSize, PanelLeftCloseIcon, Tooltip } from "@rebasepro/ui";
 import { useTranslation } from "@rebasepro/app";
 
 import { useSplitView } from "./SplitViewContext";
@@ -9,11 +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 an
- * X: 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.
+ * 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();
@@ -24,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")}>
-                <XIcon size={iconSize.smallest}/>
+                <PanelLeftCloseIcon size={iconSize.smallest}/>
             </IconButton>
         </Tooltip>
     );

package/src/components/CollectionViewBinding/SplitListShowButton.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+
+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 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.
+ */
+export function SplitListShowButton({ onClick }: { onClick: () => void }) {
+
+    const { t } = useTranslation();
+
+    return (
+        <Tooltip title={t("show_list")}>
+            <IconButton
+                size="small"
+                onClick={onClick}
+                aria-label={t("show_list")}>
+                <PanelLeftOpenIcon size={iconSize.smallest}/>
+            </IconButton>
+        </Tooltip>
+    );
+}

package/src/components/CollectionViewBinding/SplitListView.tsx

@@ -79,6 +79,19 @@ 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.
+ *
+ * A default, not a constraint: {@link savePanelSize} remembers the drag per
+ * collection, so anyone who has already sized this list keeps their size.
+ */
+const DEFAULT_PANEL_SIZE = 26;
+
 function getSavedPanelSize(path: string): number {
     try {
         const saved = localStorage.getItem(`${PANEL_SIZE_KEY}_${path}`);
@@ -87,7 +100,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 +163,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]);
 
@@ -366,6 +391,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 +413,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);

package/src/components/CollectionViewBinding/useBoardDataController.tsx

@@ -408,7 +408,8 @@ values: { ...e.values,
             where: whereFilter,
             limit: itemCount,
             orderBy: orderByParam,
-            include: includeParams
+            include: includeParams,
+            searchString: currentSearchString
         });
 
         const onError = (error: Error) => {
@@ -446,7 +447,12 @@ values: { ...e.values,
                 where: whereFilter,
                 limit: itemCount,
                 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 +545,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 => ({