@rebasepro/admin 0.13.1-canary.gef9608c → 0.14.0

package/src/components/EntityIdentityBar.tsx

@@ -6,6 +6,7 @@ import { useTranslation } from "@rebasepro/app";
 import {
     Button,
     CheckIcon,
+    ChevronDownIcon,
     cls,
     CodeIcon,
     CopyIcon,
@@ -21,7 +22,8 @@ import {
     MoreVerticalIcon,
     Separator,
     Tooltip,
-    Typography
+    Typography,
+    XIcon
 } from "@rebasepro/ui";
 
 export interface EntityIdentityBarProps {
@@ -55,6 +57,31 @@ export interface EntityIdentityBarProps {
      */
     onSaveAndClose?: () => void;
 
+    /**
+     * Where {@link onSaveAndClose} is offered.
+     *
+     * `"button"` — its own filled button, and Save demotes to text. For the
+     * overlays, where you opened the record to do one thing to it and closing is
+     * the dominant intent.
+     *
+     * `"menu"` — a `▾` welded to the Save button. For the split, where the list
+     * is right there and `j`/`k` walk from record to record: there, saving and
+     * *staying* is the common case, so it keeps the filled button and dismissing
+     * is one step further in. The gesture still exists, so muscle memory carried
+     * over from the side panel finds it.
+     */
+    saveAndClosePlacement?: "button" | "menu";
+
+    /**
+     * Dismiss this record, from the ✕ at the bar's trailing edge.
+     *
+     * Fenced off from Save by a separator: it is chrome, not the last item in
+     * the action row. The panel that supplies it decides what dismissing means —
+     * in the split it is a navigation, which the layout's unsaved-changes
+     * blocker already guards, so the ✕ cannot drop an edit without asking.
+     */
+    onClose?: () => void;
+
     onBack?: () => void;
     onInspect?: () => void;
     /** Opens the inspector straight on its history tab. */
@@ -114,6 +141,8 @@ export function EntityIdentityBar({
     saveDisabled,
     hasErrors,
     onSaveAndClose,
+    saveAndClosePlacement = "button",
+    onClose,
     onBack,
     onInspect,
     onViewHistory,
@@ -135,6 +164,15 @@ export function EntityIdentityBar({
     const hasMenu = Boolean(recordActions) || Boolean(onInspect) || Boolean(onViewHistory)
         || Boolean(externalLink);
 
+    // The two shapes "save and close" takes, so the Save button next to it knows
+    // whether it is still the primary action.
+    const saveAndCloseButton = Boolean(onSaveAndClose) && saveAndClosePlacement === "button";
+    const saveAndCloseMenu = Boolean(onSaveAndClose) && saveAndClosePlacement === "menu";
+
+    const saveTooltip = hasErrors
+        ? (t("fix_errors_before_saving") ?? "Fix highlighted errors before saving")
+        : undefined;
+
     return (
         <div className={cls(
             "h-[52px] shrink-0 flex items-center gap-2 pl-1.5 pr-2 border-b",
@@ -190,24 +228,66 @@ export function EntityIdentityBar({
             )}
 
             {onSave && (
-                <Tooltip title={hasErrors
-                    ? (t("fix_errors_before_saving") ?? "Fix highlighted errors before saving")
-                    : undefined}>
-                    <LoadingButton
-                        // Where there is something to close, closing is the
-                        // dominant intent and takes the filled treatment.
-                        variant={onSaveAndClose ? "text" : "filled"}
-                        color={"primary"}
-                        size={"small"}
-                        loading={saving && !onSaveAndClose}
-                        disabled={saveDisabled}
-                        onClick={onSave}>
-                        {saveLabel}
-                    </LoadingButton>
-                </Tooltip>
+                // `rounded-lg overflow-hidden`: the two halves of the split
+                // button are square inside and the group carries the radius, so
+                // there is one control with a seam rather than two buttons that
+                // happen to touch. Their borders match their own fill, so the
+                // seam has to be drawn — see the `▾` half for where and in what.
+                <div className={"flex items-stretch rounded-lg overflow-hidden"}>
+                    <Tooltip title={saveTooltip}>
+                        <LoadingButton
+                            // Where a separate close button carries it, closing
+                            // is the dominant intent and takes the filled
+                            // treatment. Under the `▾` the record is staying
+                            // open, so Save keeps it.
+                            variant={saveAndCloseButton ? "text" : "filled"}
+                            color={"primary"}
+                            size={"small"}
+                            loading={saving && !saveAndCloseButton}
+                            disabled={saveDisabled}
+                            onClick={onSave}
+                            className={saveAndCloseMenu ? "rounded-none" : undefined}>
+                            {saveLabel}
+                        </LoadingButton>
+                    </Tooltip>
+
+                    {saveAndCloseMenu && <>
+                        <Menu align={"end"}
+                            trigger={
+                                <Button variant={"filled"}
+                                    color={"primary"}
+                                    size={"small"}
+                                    disabled={saveDisabled}
+                                    aria-label={closeLabel}
+                                    // The seam is this half's own left border,
+                                    // tinted from `currentColor` — the ink the
+                                    // label is drawn in — so it holds on any
+                                    // button colour and dims with the control
+                                    // rather than needing a case per state. It
+                                    // was a `bg-white/25` span between the
+                                    // halves: a bright hairline scratched over a
+                                    // saturated blue, and, being a sibling of
+                                    // the buttons rather than part of one, it
+                                    // stayed at full strength while `disabled`
+                                    // dropped both halves to `opacity-40` — a
+                                    // rule brighter than the button it bisected.
+                                    // Inline because it has to beat the
+                                    // variant's `border-<color>` on one edge.
+                                    style={{ borderLeftColor: "color-mix(in oklab, currentColor 15%, transparent)" }}
+                                    className={"rounded-none px-1.5"}>
+                                    <ChevronDownIcon size={iconSize.smallest}/>
+                                </Button>
+                            }>
+                            <MenuItem onClick={onSaveAndClose}>
+                                <CheckIcon size={iconSize.smallest}/>
+                                {closeLabel}
+                            </MenuItem>
+                        </Menu>
+                    </>}
+                </div>
             )}
 
-            {onSaveAndClose && (
+            {saveAndCloseButton && (
                 <LoadingButton variant={"filled"}
                     color={"primary"}
                     size={"small"}
@@ -251,6 +331,18 @@ export function EntityIdentityBar({
             )}
 
             {trailing}
+
+            {/* Last, and behind a rule. A ✕ that sits flush against Save reads
+                as the next item in the action row, and the two adjacent controls
+                are then "commit this edit" and "abandon it". */}
+            {onClose && <>
+                <Separator orientation={"vertical"} className={"h-5 mx-1 shrink-0"}/>
+                <Tooltip title={`${t("close")} · Esc`}>
+                    <IconButton size={"small"} onClick={onClose} aria-label={t("close")}>
+                        <XIcon size={iconSize.smallest}/>
+                    </IconButton>
+                </Tooltip>
+            </>}
         </div>
     );
 }

package/src/components/EntityInspector.tsx

@@ -65,16 +65,34 @@ export function EntityInspector({
     const { t } = useTranslation();
     const open = tab !== null;
 
+    // Escape closes the inspector, and only the inspector.
+    //
+    // The split view holds its own Escape listener for as long as a record is
+    // selected, and closing the record panel is a navigation — so an Escape
+    // meant for this panel was taking the whole record with it. On `window` in
+    // the bubble phase, as this listener used to be, `stopPropagation` cannot
+    // prevent that: it governs an event's travel *between* elements and says
+    // nothing about the other listeners on the element it is called from. Both
+    // ran, and the split's ran first, because it registered first — this one
+    // only exists while the inspector is open, which is always later.
+    //
+    // Capture on `document` is the idiom that holds regardless of mount order:
+    // it runs on the way down, before anything bubbles back to `window`, and
+    // there `stopPropagation` is enough. It is what the relation and user
+    // selectors already use to own the key while their popovers are open.
+    // Pinned in escape_key_ownership.test.tsx; see docs/bug-classes.md.
     useEffect(() => {
         if (!open) return;
         const onKeyDown = (e: KeyboardEvent) => {
-            if (e.key === "Escape") {
-                e.stopPropagation();
-                onClose();
-            }
+            if (e.key !== "Escape") return;
+            // A Radix overlay opened from inside the inspector is above it and
+            // owns the key first — the same rule the split view applies.
+            if (document.querySelector('[role="dialog"][data-state="open"]')) return;
+            e.stopPropagation();
+            onClose();
         };
-        window.addEventListener("keydown", onKeyDown);
-        return () => window.removeEventListener("keydown", onKeyDown);
+        document.addEventListener("keydown", onKeyDown, true);
+        return () => document.removeEventListener("keydown", onKeyDown, true);
     }, [open, onClose]);
 
     if (!open) return null;

package/src/components/EntityViewBinding.tsx

@@ -346,14 +346,16 @@ export function EntityViewBinding<M extends Record<string, unknown>>(
     }
 
     return (
-        <div ref={containerRef} className={cls("flex-1 flex flex-row w-full min-h-0", className)}>
+        <div ref={containerRef} className={cls("@container/form flex-1 flex flex-row w-full min-h-0", className)}>
 
             {/* `items-start`: without it the cross-axis default stretches the
                 column to the scroller's height and its bottom padding lands at
                 the bottom of the viewport instead of after the last field. */}
             <div className={"flex-1 min-w-0 overflow-y-auto flex justify-center items-start"}>
                 <div className={cls(
-                    "@container/col w-full max-w-3xl 2xl:max-w-4xl flex flex-col",
+                    // Same widths as the editable form (see EntityForm) — toggling
+                    // between read-only and edit must not move the column.
+                    "@container/col w-full max-w-3xl @7xl/form:max-w-4xl 2xl:max-w-4xl flex flex-col",
                     openEntityMode === "dialog"
                         ? "pt-5 pb-8 px-6 sm:px-8"
                         : "pt-6 pb-12 px-5 sm:px-8"

package/src/components/ReferenceTable/SelectionTableBinding.tsx

@@ -14,7 +14,8 @@ import {
     useData,
     useDataTableController,
     useLargeLayout,
-    usePermissions
+    usePermissions,
+    useTranslation
 } from "@rebasepro/app";
 import { ErrorView } from "@rebasepro/app";
 import { Button, DialogActions, PlusIcon, Typography } from "@rebasepro/ui";
@@ -347,6 +348,7 @@ function EntitySelectionDialogActions({
     const { canCreate } = usePermissions();
 
     const largeLayout = useLargeLayout();
+    const { t } = useTranslation();
 
     const onClick: MouseEventHandler<HTMLButtonElement> | undefined = onNewClick
         ? (e) => {
@@ -359,7 +361,7 @@ function EntitySelectionDialogActions({
             ? <Button
                 onClick={onClick}
                 startIcon={<PlusIcon/>}>
-                Add {collection.singularName ?? collection.name}
+                {t("add_specific", { name: collection.singularName ?? collection.name })}
             </Button>
             : <Button
                 onClick={onClick}>

package/src/components/RelationSelector.tsx

@@ -18,7 +18,7 @@ import {
     SearchIcon,
     Separator,
     Tooltip,
-    useInjectStyles,
+    usePortalContainer,
     XIcon
 } from "@rebasepro/ui";
 import * as React from "react";
@@ -29,7 +29,6 @@ import { EntityPreviewBindingData } from "./EntityPreviewBinding";
 import { useData, useRelationSelector } from "@rebasepro/app";
 import { useSidePanel } from "../hooks/useSidePanel";
 import { normalizeToEntityRelation } from "@rebasepro/common";
-import { EmptyValue } from "../preview";
 
 /** Whether an authored relation yields many rows. Derived from its kind. */
 function relationCardinality(relation: { kind?: string; cardinality?: string } | undefined): "one" | "many" | undefined {
@@ -91,7 +90,20 @@ export interface RelationSelectorProps {
     pageSize?: number;
     emptyPlaceholder?: string;
     searchPlaceholder?: string;
+    /** Shown in the open list when a search matched nothing. */
     noResultsText?: string;
+    /**
+     * Shown on the closed trigger when nothing is selected. Says only that the
+     * field is empty — see the note by `resolvedPlaceholder` for why it cannot
+     * say whether there is anything to pick.
+     */
+    emptyText?: string;
+    /**
+     * Shown in the open list when the target collection turned out to hold no
+     * rows at all, as opposed to a search simply not matching. Defaults to a
+     * sentence naming the target collection.
+     */
+    emptyCollectionText?: string;
     loadingText?: string;
 }
 
@@ -115,7 +127,9 @@ export const RelationSelector = React.forwardRef<
             pageSize,
             emptyPlaceholder,
             searchPlaceholder = "Search...",
-            noResultsText = "No relations found.",
+            noResultsText = "No matches.",
+            emptyText = "Select…",
+            emptyCollectionText,
             loadingText = "Loading..."
         },
         ref
@@ -124,10 +138,16 @@ export const RelationSelector = React.forwardRef<
         const collection = relation.target();
         const dataClient = useData();
         const sidePanelController = useSidePanel();
+        const contextPortalContainer = usePortalContainer();
         const multiple = multipleOverride ?? relationCardinality(relation) === "many";
 
         const [isPopoverOpen, setIsPopoverOpen] = useState(false);
         const isPopoverOpenRef = useRef(false);
+        // The list is only worth fetching once the picker has been opened. A
+        // table cell mounts one of these per row, and the selected value is
+        // resolved by its own effect below, not from the list. Latches on the
+        // first open so a closed popover keeps its results.
+        const [listRequested, setListRequested] = useState(false);
         const [selectedItems, setSelectedItems] = useState<RelationItem[]>([]);
         const [isLoadingSelectedItems, setIsLoadingSelectedItems] = useState(false);
         const [searchString, setSearchString] = useState<string>("");
@@ -150,7 +170,8 @@ export const RelationSelector = React.forwardRef<
             path: getCollectionDataPath(collection),
             collection,
             fixedFilter,
-            pageSize
+            pageSize,
+            enabled: listRequested
         });
 
         const scrollContainerRef = useRef<HTMLDivElement>(null);
@@ -417,6 +438,7 @@ relation } as RelationItem;
             if (next) {
                 // Capture current selection so we can pin those items to the top of the list
                 pinnedIdsRef.current = new Set(selectedItems.map(i => String(i.id)));
+                setListRequested(true);
                 setIsPopoverOpen(true);
                 isPopoverOpenRef.current = true;
             }
@@ -455,18 +477,35 @@ relation } as RelationItem;
             };
         }, [isPopoverOpen]);
 
-        useInjectStyles("RelationSelector", " [cmdk-group] { max-height: 40vh; overflow-y: auto; } ");
-
         const closePopover = useCallback(() => {
             setIsPopoverOpen(false);
             isPopoverOpenRef.current = false;
             pinnedIdsRef.current = null;
         }, []);
 
-        const resolvedPlaceholder = placeholder || emptyPlaceholder || <EmptyValue className={"ml-2"}/>;
-
-        // Use Sheet portal container if available, otherwise document.body
-        const portalContainer = (typeof document !== "undefined" ? document.body : undefined);
+        // Text, not `EmptyValue`. That component draws a small grey rounded bar
+        // with no text in it, which is the same shape the `Skeleton` component
+        // uses while data is in flight — so a relation you simply had not filled
+        // in was indistinguishable from one that was still loading, and an empty
+        // Author or Tags field read as permanently stuck. It also left the trigger
+        // button with no accessible name, since the bar contains no text at all.
+        //
+        // This says "not filled in" rather than "nothing to choose from": which of
+        // those it is cannot be known here. The list is deliberately not fetched
+        // until the picker is first opened (`enabled: listRequested`, guarded by
+        // relation_cell_picker_gating.test.tsx, because a table renders one of
+        // these per row), so before that `availableItems` is empty because nobody
+        // asked, not because the target collection is. The genuine "nothing to
+        // pick yet" state is reported inside the popover below, where the fetch
+        // has actually happened.
+        const resolvedPlaceholder = placeholder || emptyPlaceholder || emptyText;
+
+        // Whatever dialog, side dialog or sheet we are inside offers as its
+        // portal host, falling back to `document.body`. This is not cosmetic:
+        // those are modal, and a modal locks scrolling everywhere outside its
+        // own content — a list portaled to the body opens and then refuses to
+        // scroll, because every wheel event over it is cancelled.
+        const portalContainer = (contextPortalContainer ?? (typeof document !== "undefined" ? document.body : undefined)) ?? undefined;
 
         return (
             <>
@@ -481,6 +520,10 @@ relation } as RelationItem;
                             disabled={disabled}
                             onClick={() => {
                                 if (disabled) return;
+                                // Unconditional: the toggle can only close a
+                                // popover that was opened, which requested the
+                                // list already.
+                                setListRequested(true);
                                 setIsPopoverOpen(o => {
                                     const next = !o;
                                     isPopoverOpenRef.current = next;
@@ -663,10 +706,17 @@ relation } as RelationItem;
                                                 className="ml-2 text-sm text-text-secondary dark:text-text-secondary-dark">{loadingText}</span>
                                         </div>
                                     )}
+                                    {/* Two different nothings, which used to share one
+                                        message ("No relations found.") even though the
+                                        fix for each is the opposite: clear the search, or
+                                        go and create the first row. With the fetch done,
+                                        the search string is what tells them apart. */}
                                     {!isLoading && availableItems.length === 0 && (
                                         <CommandPrimitive.Empty
                                             className="px-4 py-6 text-center text-text-secondary dark:text-text-secondary-dark">
-                                            {noResultsText}
+                                            {searchString
+                                                ? noResultsText
+                                                : (emptyCollectionText ?? `No ${collection.name ?? "entries"} yet.`)}
                                         </CommandPrimitive.Empty>
                                     )}
                                     <CommandPrimitive.Group>

package/src/components/SearchIconsView.tsx

@@ -4,9 +4,8 @@ import {
     coolIconKeys,
     debounce,
     IconButton,
-    iconKeys,
     iconSize,
-    lucideIcons,
+    LucideIconByName,
     SearchBar,
     Tooltip
 } from "@rebasepro/ui";
@@ -15,20 +14,6 @@ import { useTranslation } from "@rebasepro/app";
 
 const UPDATE_SEARCH_INDEX_WAIT_MS = 220;
 
-
-function toPascalCase(str: string): string {
-    return str.split(/[-_]/).map(word => word.charAt(0).toUpperCase() + word.slice(1)).join("");
-}
-
-function resolveIcon(iconKey: string): React.ComponentType<{ size: number }> | null {
-    const allIcons = lucideIcons as Record<string, React.ComponentType<{ size: number }>>;
-    let icon = allIcons[iconKey];
-    if (!icon) {
-        icon = allIcons[toPascalCase(iconKey)];
-    }
-    return icon ?? null;
-}
-
 export interface SearchIconsProps {
     selectedIcon?: string;
     onIconSelected?: (icon: string) => void;
@@ -74,23 +59,19 @@ export function SearchIconsView({
             />
 
             <div className={"flex max-w-full flex-wrap mt-4"}>
-                {icons.map((icon: string) => {
-                    const LucideIcon = resolveIcon(icon);
-                    if (!LucideIcon) return null;
-                    return (
-                        <Tooltip title={icon} key={icon}
-                            asChild={true}>
-                            <IconButton
-                                shape={"square"}
-                                toggled={selectedIcon === icon}
-                                onClick={onIconSelected ? () => onIconSelected(icon) : undefined}
-                                className="box-content m-1"
-                            >
-                                <LucideIcon size={iconSize.medium}/>
-                            </IconButton>
-                        </Tooltip>
-                    );
-                })}
+                {icons.map((icon: string) => (
+                    <Tooltip title={icon} key={icon}
+                        asChild={true}>
+                        <IconButton
+                            shape={"square"}
+                            toggled={selectedIcon === icon}
+                            onClick={onIconSelected ? () => onIconSelected(icon) : undefined}
+                            className="box-content m-1"
+                        >
+                            <LucideIconByName name={icon} size={iconSize.medium}/>
+                        </IconButton>
+                    </Tooltip>
+                ))}
             </div>
         </>
     );

package/src/components/SelectableTable/filters/StringNumberFilterField.tsx

@@ -190,6 +190,7 @@ export function StringNumberFilterField({
 
                 {!enumValues && <TextField
                     size={"medium"}
+                    aria-label={`${title ?? name} filter value`}
                     type={type === "number" ? "number" : undefined}
                     value={internalValue !== undefined && internalValue != null ? String(internalValue) : ""}
                     disabled={isNullOperation}

package/src/components/SidePanelBinding.tsx

@@ -9,7 +9,7 @@ import { EditViewBinding } from "./EditViewBinding";
 import { DetailViewBinding } from "./DetailViewBinding";
 import { useSideDialogContext } from "./SideDialogs";
 import { useNavigate } from "react-router";
-import { saveEntityToMemoryCache, useComponentOverride } from "@rebasepro/app";
+import { useComponentOverride } from "@rebasepro/app";
 import { useCollectionRegistryController } from "../hooks/navigation/contexts/CollectionRegistryContext";
 import { useSidePanel } from "../hooks/useSidePanel";
 import { useUrlController } from "../hooks/navigation/contexts/UrlContext";
@@ -76,12 +76,33 @@ export function SidePanelBinding(props: SidePanelBindingProps) {
         close(true);
     }
 
+    /**
+     * The panel's response to a save, and the one place it decides where the
+     * panel goes next.
+     *
+     * Exactly **one** panel navigation is raised here. These branches used to
+     * run independently — a `replace` onto the saved record's address *and* a
+     * close — and because the last navigation is the one that survives, which
+     * of them the user got was settled by statement order rather than by
+     * intent. Closing wins by construction now: moving a panel to a new address
+     * it is about to leave is work whose only effect is to fight the close.
+     *
+     * `props.onUpdate` runs last for the same reason. It belongs to whoever
+     * opened the panel and it is free to navigate — the reference picker's
+     * selects the record and closes the picker — so the opener's intent should
+     * be the final word, not something this panel overwrites on its way out.
+     */
     const onUpdate = (params: OnUpdateParams) => {
-        if (props.onUpdate) {
-            props.onUpdate(params);
-        }
         setEditInDialog(false);
-        if (params.status !== "existing") {
+
+        // Either "save and close" was clicked, or the opener asked for it when
+        // it opened the panel.
+        const closeRequested = sideDialogsController.pendingClose || props.closeOnSave;
+
+        if (closeRequested) {
+            sideDialogsController.setPendingClose(false);
+            closeAfterSave();
+        } else if (params.status !== "existing") {
             // A newly created entity replaces the panel with its own address,
             // which already leaves the edit view behind.
             sidePanelController.replace({
@@ -95,11 +116,7 @@ export function SidePanelBinding(props: SidePanelBindingProps) {
             closeEditView();
         }
 
-        if (sideDialogsController.pendingClose) {
-            sideDialogsController.setPendingClose(false);
-            closeAfterSave();
-        }
-
+        props.onUpdate?.(params);
     }
 
     const parentCollectionSlugs = useMemo(() => {
@@ -290,25 +307,19 @@ entityId }
                         onSaved={onUpdate}
                         navigateBack={closeEditView}
                         barActionsStart={barActionsStart}
-                        barActions={({
-                            status,
-                            values,
-                            dirty
-                        }) => windowControls(
+                        barActions={({ carryEdit }) => windowControls(
                             allowFullScreen && <IconButton
                                 className="self-center"
                                 size={"small"}
                                 onClick={() => {
-                                    // Only an edit in progress is worth carrying across.
-                                    // A record loaded from this cache opens dirty, so
-                                    // stashing a clean one made the full-screen view
-                                    // announce unsaved changes to someone who had only
-                                    // looked at it. A new record always carries: there
-                                    // is nothing on the server to fall back to.
-                                    if (dirty || status === "new" || status === "copy") {
-                                        const key = (status === "new" || status === "copy") ? path + "#new" : path + "/" + entityId;
-                                        saveEntityToMemoryCache(key, values);
-                                    }
+                                    // The form's own handoff, rather than a second
+                                    // copy of the rules for it here: only an edit in
+                                    // progress is worth carrying (a clean record
+                                    // stashed anyway arrived announcing unsaved
+                                    // changes to someone who had only looked at it),
+                                    // and only the fields that were edited (carrying
+                                    // the whole record marked every field touched).
+                                    carryEdit?.();
                                     setBlocked(false);
                                     setBlockedNavigationMessage(undefined);
                                     if (entityId) {