@rebasepro/admin 0.13.0 → 0.13.1-canary.g394d868

package/src/components/EntityIdentityBar.tsx

@@ -1,14 +1,17 @@
 import type { AdminCollection } from "@rebasepro/admin-types";
 import type { EntityStatus } from "@rebasepro/types";
 import React, { useState } from "react";
+import { Link } from "react-router";
 import { useTranslation } from "@rebasepro/app";
 import {
     Button,
     CheckIcon,
+    ChevronDownIcon,
     cls,
     CodeIcon,
     CopyIcon,
     defaultBorderMixin,
+    ExternalLinkIcon,
     HistoryIcon,
     IconButton,
     iconSize,
@@ -19,12 +22,22 @@ import {
     MoreVerticalIcon,
     Separator,
     Tooltip,
-    Typography
+    Typography,
+    XIcon
 } from "@rebasepro/ui";
 
 export interface EntityIdentityBarProps {
     /** Plural collection name, shown as the breadcrumb ahead of the title. */
     collection: AdminCollection;
+    /**
+     * Where the breadcrumb points. Without it the collection name is inert text
+     * that still reads as a breadcrumb — worse than no breadcrumb at all, and
+     * the only way back once a layout drops its back arrow.
+     *
+     * Left unset by the overlays (side panel, dialog), where the collection is
+     * already underneath and navigating would dismiss the record instead.
+     */
+    collectionUrl?: string;
     /** Resolved record title, already guarded against showing a field default. */
     title: string;
     entityId?: string | number;
@@ -44,11 +57,47 @@ 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. */
     onViewHistory?: () => void;
 
+    /**
+     * Where this record appears on the live site, from `entityLinkBuilder`.
+     *
+     * Here rather than above the record, where it used to be a single unlabelled
+     * icon alone on its own right-aligned row — the only thing between the bar
+     * and the first field, and the only control in the view that did not say
+     * what it was. It is a thing you do *to* a record, so it belongs with the
+     * others.
+     */
+    externalLink?: string;
+
     /**
      * Actions performed *on* the record — copy, delete, whatever the collection
      * adds — as menu items under the overflow button. They live here rather
@@ -81,6 +130,7 @@ export interface EntityIdentityBarProps {
  */
 export function EntityIdentityBar({
     collection,
+    collectionUrl,
     title,
     entityId,
     status,
@@ -91,9 +141,12 @@ export function EntityIdentityBar({
     saveDisabled,
     hasErrors,
     onSaveAndClose,
+    saveAndClosePlacement = "button",
+    onClose,
     onBack,
     onInspect,
     onViewHistory,
+    externalLink,
     recordActions,
     pluginActions,
     trailing,
@@ -108,7 +161,17 @@ export function EntityIdentityBar({
     const closeLabel = status === "existing"
         ? t("save_and_close")
         : status === "copy" ? t("create_copy_and_close") : t("create_and_close");
-    const hasMenu = Boolean(recordActions) || Boolean(onInspect) || Boolean(onViewHistory);
+    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(
@@ -126,10 +189,21 @@ export function EntityIdentityBar({
                 </Tooltip>
             )}
 
-            <Typography variant={"caption"}
-                className={"text-text-disabled dark:text-text-disabled-dark whitespace-nowrap hidden sm:block"}>
-                {collection.name}&nbsp;/
-            </Typography>
+            {collectionUrl
+                ? <Link to={collectionUrl}
+                    className={"visited:text-inherit dark:visited:text-inherit hidden sm:block"}>
+                    <Typography variant={"caption"}
+                        className={cls(
+                            "text-text-disabled dark:text-text-disabled-dark whitespace-nowrap",
+                            "hover:text-text-primary dark:hover:text-text-primary-dark transition-colors"
+                        )}>
+                        {collection.name}&nbsp;/
+                    </Typography>
+                </Link>
+                : <Typography variant={"caption"}
+                    className={"text-text-disabled dark:text-text-disabled-dark whitespace-nowrap hidden sm:block"}>
+                    {collection.name}&nbsp;/
+                </Typography>}
 
             <span className={"font-headers font-semibold text-[15px] tracking-tight truncate min-w-0"}
                 title={title}>
@@ -154,24 +228,52 @@ 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 are `border-primary` over
+                // `bg-primary` — the same colour — so the seam has to be drawn.
+                <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 && <>
+                        <span className={"w-px self-stretch bg-white/25 z-10"} aria-hidden={true}/>
+                        <Menu align={"end"}
+                            trigger={
+                                <Button variant={"filled"}
+                                    color={"primary"}
+                                    size={"small"}
+                                    disabled={saveDisabled}
+                                    aria-label={closeLabel}
+                                    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"}
@@ -189,6 +291,14 @@ export function EntityIdentityBar({
                             <MoreVerticalIcon size={iconSize.smallest}/>
                         </IconButton>
                     }>
+                    {externalLink && (
+                        <MenuItem onClick={() => window.open(externalLink, "_blank", "noopener,noreferrer")}>
+                            <ExternalLinkIcon size={iconSize.smallest}/>
+                            {t("open_in_live_site") ?? "Open in the live site"}
+                        </MenuItem>
+                    )}
+                    {externalLink && (recordActions || onInspect || onViewHistory) &&
+                        <Separator orientation={"horizontal"}/>}
                     {recordActions}
                     {recordActions && (onInspect || onViewHistory) && <Separator orientation={"horizontal"}/>}
                     {onViewHistory && (
@@ -207,6 +317,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>
     );
 }
@@ -275,7 +397,11 @@ function IdChip({ value }: { value: string }) {
                 onClick={copy}
                 aria-label={`${t("copy_id")} ${value}`}
                 className={cls(
-                    "hidden md:inline-flex items-center gap-1.5 shrink-0 px-2 py-0.5 rounded-md",
+                    // `whitespace-nowrap`: the middle of the id is elided with a
+                    // `…`, and a line break is allowed after one. In the dialog,
+                    // where the bar is narrow and every button is on it, the
+                    // chip broke across two lines inside a 52px row.
+                    "hidden md:inline-flex items-center gap-1.5 shrink-0 whitespace-nowrap px-2 py-0.5 rounded-md",
                     "font-mono text-[11px] text-text-secondary dark:text-text-secondary-dark",
                     "bg-surface-accent-200/50 dark:bg-white/[0.055]",
                     "hover:bg-surface-accent-200/75 dark:hover:bg-white/[0.09] transition-colors"

package/src/components/EntityPreviewBinding.tsx

@@ -25,7 +25,8 @@ import {
 import { useAnalyticsController } from "@rebasepro/app";
 import { IconForView } from "@rebasepro/app";
 import { getPropertyInPath } from "../util/property_utils";
-import { getEntityPreviewKeys, getEntityTitlePropertyKeyForEntity } from "../util/previews";
+import { resolveCollectionSlotKeys } from "./CollectionViewBinding/usePreviewSlots";
+import { useEntityTitle } from "../hooks/useEntityDisplay";
 import { getValueInPath } from "@rebasepro/utils";
 import { useCollectionRegistryController } from "../hooks/navigation/contexts/CollectionRegistryContext";
 import { useSidePanel } from "../hooks/useSidePanel";
@@ -87,10 +88,33 @@ export function EntityPreviewBindingData({
 
     const collection = collectionProp ?? collectionRegistryController.getCollection(entity.path);
 
+    // Above the `!collection` return, because hooks are. `useEntityTitle`
+    // tolerates a missing collection for exactly this reason.
+    const title = useEntityTitle({
+        collection,
+        entity
+    });
+
+    // What the card says under the title.
+    //
+    // A stated list wins outright — `previewProperties` is the one place a
+    // developer says "show these", and nothing here is allowed to second-guess
+    // it. Failing that, the card fills the same slots as every other surface
+    // that renders one record in a row: a supporting line and a status. It used
+    // to take the first few properties in declaration order instead, which is
+    // how an author card ended up rendering an entire Markdown biography.
+    const statedKeys = previewKeys ?? (collection?.previewProperties as string[] | undefined);
     const listProperties = useMemo(() => {
         if (!collection) return [];
-        return previewKeys ?? getEntityPreviewKeys(authController, collection, customizationController.propertyConfigs, previewKeys, size === "medium" || size === "large" ? 3 : 2);
-    }, [previewKeys, collection, size, authController, customizationController.propertyConfigs]);
+        if (statedKeys && statedKeys.length > 0) {
+            return statedKeys.filter(key => getPropertyInPath(collection.properties, key));
+        }
+        const slotKeys = resolveCollectionSlotKeys(
+            collection as AdminCollection<Record<string, unknown>>,
+            authController,
+            customizationController.propertyConfigs);
+        return [slotKeys.subtitleKey, slotKeys.statusKey].filter(Boolean) as string[];
+    }, [statedKeys, collection, authController, customizationController.propertyConfigs]);
 
     if (!collection) {
         return (
@@ -100,7 +124,7 @@ export function EntityPreviewBindingData({
         );
     }
 
-    const titleProperty = includeTitle ? getEntityTitlePropertyKeyForEntity(collection, entity.values, entity.id) : undefined;
+    const titleProperty = includeTitle ? title.source?.key : undefined;
     const imagePropertyKey = includeImage ? getEntityImagePreviewPropertyKey(collection) : undefined;
     const imageProperty = imagePropertyKey ? collection.properties[imagePropertyKey] : undefined;
     const ofProp = imageProperty && "of" in imageProperty ? imageProperty.of : undefined;
@@ -119,7 +143,10 @@ export function EntityPreviewBindingData({
         // relation among the preview properties collapses to one line instead
         // of nesting another bordered card with its own id and action button.
         <NestedEntityPreviewBoundary>
-            <div className={cls("flex  shrink-0", {
+            {/* `overflow-hidden`: the image slot is a fixed box, and a thumbnail
+                that fails to load renders a "file not found" message sized for a
+                full preview — which spilled across the title beside it. */}
+            <div className={cls("flex shrink-0 overflow-hidden", {
                 "w-6 h-6 mx-1 my-0.5": size === "small" || size === "smallest",
                 "w-8 h-8 ml-1 mr-2 m-2 self-start": size === "medium",
                 "w-10 h-10 ml-2 mr-2 m-2 self-start": size === "large"
@@ -148,20 +175,24 @@ export function EntityPreviewBindingData({
                         </div>
                         : <Skeleton/>)}
 
-                {titleProperty && (
+                {/* A title that came from a property keeps that property's own
+                    rendering — an enum stays its coloured chip, a relation stays
+                    a link. A computed one is text, because that is all a
+                    resolver returns. */}
+                {includeTitle && (titleProperty || title.value) && (
                     <div
                         className={"truncate my-0.5 text-sm font-medium text-text-primary dark:text-text-primary-dark"}>
-                        {
-                            entity
+                        {!entity && titleProperty
+                            ? <SkeletonPropertyComponent
+                                property={getPropertyInPath(collection.properties, titleProperty) as Property}
+                                size={"medium"}/>
+                            : titleProperty
                                 ? <PropertyPreview
-                                    propertyKey={titleProperty as string}
-                                    value={getValueInPath(entity.values, titleProperty) as never}
-                                    property={collection.properties[titleProperty as string] as Property}
-                                    size={"medium"}/>
-                                : <SkeletonPropertyComponent
-                                    property={collection.properties[titleProperty as string] as Property}
+                                    propertyKey={titleProperty}
+                                    value={title.source?.value as never}
+                                    property={getPropertyInPath(collection.properties, titleProperty) as Property}
                                     size={"medium"}/>
-                        }
+                                : title.value}
                     </div>
                 )}
 
@@ -171,8 +202,14 @@ export function EntityPreviewBindingData({
 
                     const valueInPath = getValueInPath(entity.values, key);
                     return (
+                        // `truncate` clamps a line of text; it does nothing to a
+                        // preview that renders blocks. Custom `admin.Preview`
+                        // components can render anything at all, so the height
+                        // is capped here as well — a card that loses the tail of
+                        // an unusual value beats a card the size of a document.
                         <div key={"ref_prev_" + key}
-                            className={cls("truncate", restProperties.length > 1 ? "my-0.5" : "my-0")}>
+                            className={cls("truncate min-w-0 max-h-8 overflow-hidden",
+                                restProperties.length > 1 ? "my-0.5" : "my-0")}>
                             {
                                 entity
                                     ? <PropertyPreview
@@ -362,9 +399,12 @@ export const EntityPreviewContainer = React.forwardRef<HTMLDivElement, EntityPre
         style={style}
         className={cls(
             "bg-white dark:bg-surface-900",
-            size === "small" ? "min-h-[32px]" : "min-h-[44px]",
+            // On the shared 28/32/40/48 control scale. `44px` was between two
+            // steps of it, so a reference in a form was 4px short of the field
+            // next to it and their boxes never quite agreed.
+            size === "small" ? "min-h-[32px]" : "min-h-[48px]",
             fullwidth ? "w-full" : "",
-            "items-center",
+            "items-center overflow-hidden",
             hover ? "hover:bg-surface-accent-50 dark:hover:bg-surface-800 group-hover:bg-surface-accent-50 dark:group-hover:bg-surface-800" : "",
             size === "small" ? "p-1" : "px-2 py-1",
             "flex border rounded-lg",