@rebasepro/cms 0.17.3 → 0.18.1

package/src/components/CollectionViewBinding/CollectionViewStartActions.tsx

@@ -1,240 +0,0 @@
-import type { Properties } from "@rebasepro/types";
-
-import React, { useState, useCallback } from "react";
-import { useAuthController, useLargeLayout, useTranslation, useSlot } from "@rebasepro/app";
-import { CollectionActionsProps, EntityTableController, SelectionController, AdminCollection, ViewMode } from "@rebasepro/cms-types";
-import { ErrorBoundary, iconSize } from "@rebasepro/ui";
-import { Badge, Button, cls, FilterIcon, IconButton, Skeleton, Tooltip, XIcon } from "@rebasepro/ui";
-import { ClearFilterSortButton } from "../ClearFilterSortButton";
-import { FiltersDialog } from "./FiltersDialog";
-import { FilterPresetsButton } from "./FilterPresetsButton";
-import { SortButton } from "./SortButton";
-import { toArray } from "@rebasepro/utils";
-import { useNavigate } from "react-router";
-import { useUrlController } from "../../hooks/navigation/contexts/UrlContext";
-import { useAdminContext } from "../../hooks/useAdminContext";
-import { withViewMode } from "../../util/view_mode";
-import { useSplitView } from "./SplitViewContext";
-
-export type CollectionViewStartActionsProps<M extends Record<string, unknown>> = {
-    collection: AdminCollection<M>;
-    path: string;
-    relativePath: string;
-    parentCollectionSlugs: string[], parentEntityIds: string[];
-    selectionController: SelectionController<M>;
-    tableController: EntityTableController<M>;
-    collectionEntitiesCount?: number;
-    /**
-     * Number of records the current filters and search resolve to, rendered at
-     * the end of this group.
-     * - `undefined`: not applicable
-     * - `null`: still counting
-     * - number: the count
-     */
-    entitiesCount?: number | null;
-    /**
-     * Resolved properties from the collection for the filters dialog
-     */
-    resolvedProperties?: Properties;
-    /**
-     * Which view is being displayed. Decides whether the sort control is
-     * offered — see `sortButton`.
-     */
-    viewMode?: ViewMode;
-    compact?: boolean;
-    openNewDocument: (defaultValues?: Record<string, unknown>) => void;
-}
-
-export function CollectionViewStartActions<M extends Record<string, unknown>>({
-    collection,
-    relativePath,
-    parentCollectionSlugs, parentEntityIds,
-    path,
-    selectionController,
-    tableController,
-    collectionEntitiesCount,
-    entitiesCount,
-    resolvedProperties,
-    viewMode,
-    compact,
-    openNewDocument
-}: CollectionViewStartActionsProps<M>) {
-
-    const context = useAdminContext();
-    const largeLayout = useLargeLayout();
-    const { t } = useTranslation();
-
-    const navigate = useNavigate();
-    const urlController = useUrlController();
-    const splitView = useSplitView();
-
-    // Filters dialog state
-    const [filtersDialogOpen, setFiltersDialogOpen] = useState(false);
-
-    // Count active filters (excluding force filters)
-    const filterValues = tableController.filterValues;
-    const fixedFilter = collection.fixedFilter;
-    const activeFilterCount = filterValues
-        ? Object.keys(filterValues).filter(key => !fixedFilter || !(key in fixedFilter)).length
-        : 0;
-
-    const actionProps: CollectionActionsProps<M> = {
-        path,
-        relativePath,
-        parentCollectionSlugs,
-parentEntityIds,
-        collection,
-        selectionController,
-        context,
-        tableController,
-        collectionEntitiesCount,
-        openNewDocument
-    };
-
-    const handleBackClick = useCallback(() => {
-        navigate(withViewMode(urlController.buildUrlCollectionPath(path)));
-    }, [navigate, urlController, path]);
-
-    // In a split view the control that closes the list lives at the leading
-    // edge of the record's app bar (`SplitListCloseButton`), not here.
-    //
-    // Outside one — a compact list with no record open beside it — the only
-    // thing this can mean is "leave the record behind".
-    const backButton = compact && !splitView?.detailOpen && (
-        <Tooltip title={t("close")} key={"close_tooltip"}>
-            <IconButton
-                size="small"
-                onClick={handleBackClick}
-                aria-label={t("close")}
-                className="mr-1"
-            >
-                <XIcon size={iconSize.smallest}/>
-            </IconButton>
-        </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"}>
-            <Badge
-                color="primary"
-                invisible={activeFilterCount === 0}
-            >
-                {largeLayout && !compact ? (
-                    <Button
-                        variant="text"
-                        size="small"
-                        onClick={() => setFiltersDialogOpen(true)}
-                        startIcon={<FilterIcon size={iconSize.small}/>}
-                        className={cls(activeFilterCount > 0 && "text-primary")}
-                    >
-                        {activeFilterCount > 0 ? `(${activeFilterCount})` : t("filters")}
-                    </Button>
-                ) : (
-                    <IconButton
-                        size={"small"}
-                        onClick={() => setFiltersDialogOpen(true)}
-                        className={cls(activeFilterCount > 0 && "text-primary")}
-                    >
-                        <FilterIcon size={iconSize.smallest}/>
-                    </IconButton>
-                )}
-            </Badge>
-        </Tooltip>
-    );
-
-    // Everywhere a `sortBy` means something — which is every view but the
-    // board, whose columns are ordered by their own order key and which ignores
-    // `sortBy` entirely, so the control would appear to do nothing.
-    //
-    // Including the table, whose headers were once thought to cover it. They
-    // build a multi-key sort (shift-click) and they show its ranks, but they
-    // cannot *re-rank* it: promoting the third key above the first means
-    // clearing the sort and shift-clicking all three back in the new order.
-    // Nor can they remove a middle key without cycling it through descending
-    // first. This popover is the only place either is one click, and a table
-    // with a three-key sort needs it more than a card grid does, not less.
-    const sortButton = resolvedProperties && viewMode !== "kanban" && (
-        <SortButton
-            key={"sort_button"}
-            tableController={tableController}
-            properties={resolvedProperties}
-            compact={iconOnlyToolbar}
-        />
-    );
-
-    // Not in the split view. The toolbar there is a strip a few hundred pixels
-    // wide above the list, and a row of preset chips crowded out the controls
-    // that act on what you are looking at. The presets are still one click away
-    // inside the filters dialog.
-    const filterPresetsButton = !compact && collection.filterPresets?.length ? (
-        <FilterPresetsButton
-            key={"filter_presets"}
-            filterPresets={collection.filterPresets}
-            tableController={tableController}
-            compact={compact}
-        />
-    ) : null;
-
-    // The count closes the group the filter, sort and preset controls open: it
-    // is what they resolve to. It used to live in the breadcrumb trail, which
-    // the app bar owns — and a collection rendered without an app bar has no
-    // breadcrumbs, so the number simply disappeared.
-    //
-    // Hidden on the same layouts the trail was (`hidden lg:block` there) and in
-    // the split view, where this toolbar is a few hundred pixels wide and
-    // scrolls: a passive readout is the first thing that should give up its
-    // room to the controls.
-    const countBadge = !iconOnlyToolbar && entitiesCount !== undefined ? (
-        <Tooltip title={t("records_in_view")} key={"entities_count"}>
-            {entitiesCount === null
-                ? <Skeleton className={"w-8 h-4 rounded-md mx-1"}/>
-                : <span
-                    className={"mx-1 text-xs text-surface-accent-600 dark:text-surface-accent-400 bg-surface-100 dark:bg-surface-800 px-1.5 py-0.5 rounded tabular-nums"}>
-                    {entitiesCount.toLocaleString()}
-                </span>}
-        </Tooltip>
-    ) : null;
-
-    const actions: React.ReactNode[] = [
-        backButton,
-        filtersButton,
-        sortButton,
-        <ClearFilterSortButton
-            key={"clear_filter"}
-            tableController={tableController}
-            compact={iconOnlyToolbar}
-            enabled={!collection.fixedFilter}/>,
-        filterPresetsButton,
-        countBadge
-    ];
-
-    const pluginActionsStart = useSlot("collection.actions.start", actionProps);
-
-    return (
-        <>
-            {actions}
-            {pluginActionsStart}
-
-            {/* Filters Dialog */}
-            {resolvedProperties && tableController.setFilterValues && (
-                <FiltersDialog
-                    open={filtersDialogOpen}
-                    onOpenChange={setFiltersDialogOpen}
-                    properties={resolvedProperties}
-                    filterValues={tableController.filterValues}
-                    setFilterValues={(filterValues) => tableController.setFilterValues?.(filterValues ?? {})}
-                    fixedFilter={collection.fixedFilter}
-                />
-            )}
-        </>
-    );
-}
-

package/src/components/CollectionViewBinding/EntityCardBinding.tsx

@@ -1,239 +0,0 @@
-
-import React, { useMemo } from "react";
-import { Entity } from "@rebasepro/types";
-import { CollectionSize, AdminCollection } from "@rebasepro/cms-types";
-import {
-    Card,
-    Checkbox,
-    Chip,
-    cls,
-    Typography
-} from "@rebasepro/ui";
-import { PropertyPreview } from "../../preview";
-import {
-    useAuthController,
-    useCustomizationController
-} from "@rebasepro/app";
-import { useAnalyticsController } from "@rebasepro/app";
-import { IconForView } from "@rebasepro/app";
-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;
-    selected?: boolean;
-    highlighted?: boolean;
-    onSelectionChange?: (entity: Entity<M>, selected: boolean) => void;
-    selectionEnabled?: boolean;
-    /**
-     * Size of the card - affects checkbox styling
-     */
-    size?: CollectionSize;
-};
-
-/**
- * Card component for displaying a entity in a grid view.
- * Shows thumbnail, title, and preview properties via the shared slot system.
- */
-export function EntityCardBinding<M extends Record<string, unknown> = Record<string, unknown>>({
-    entity,
-    collection,
-    onClick,
-    selected,
-    highlighted,
-    onSelectionChange,
-    selectionEnabled,
-    size = "m",
-    searchString
-}: EntityCardBindingProps<M>) {
-    const authController = useAuthController();
-    const analyticsController = useAnalyticsController();
-    const customizationController = useCustomizationController();
-
-    const slotKeys = useCollectionSlotKeys(
-        collection as AdminCollection<Record<string, unknown>>,
-        authController,
-        customizationController.propertyConfigs
-    );
-
-    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) => {
-        // Cmd+click (Mac) or Ctrl+click (Windows) toggles selection
-        if (e && (e.metaKey || e.ctrlKey) && selectionEnabled) {
-            e.preventDefault();
-            onSelectionChange?.(entity, !selected);
-            return;
-        }
-        if (onClick) {
-            analyticsController.onAnalyticsEvent?.("card_view_entity_click", {
-                path: entity.path,
-                entityId: entity.id
-            });
-            onClick(entity);
-        }
-    };
-
-    const handleCheckboxClick = (e: React.MouseEvent) => {
-        e.stopPropagation();
-    };
-
-    const handleSelectionChange = (checked: boolean) => {
-        onSelectionChange?.(entity, checked);
-    };
-
-    return (
-        <Card
-            className={cls(
-                "cursor-pointer overflow-hidden group relative",
-                "transition-all duration-200",
-                "hover:shadow-lg hover:-translate-y-0.5",
-                selected && "ring-2 ring-primary bg-surface-accent-50 dark:bg-surface-accent-900",
-                highlighted && !selected && "ring-2 ring-primary ring-opacity-50 bg-surface-accent-50/50 dark:bg-surface-accent-900"
-            )}
-            onClick={handleClick}
-        >
-            {/* Thumbnail area — image slot */}
-            <div className="aspect-[4/3] relative overflow-hidden bg-surface-100 dark:bg-surface-900">
-                {slots.image ? (
-                    <div className="w-full h-full">
-                        <SlotValue slot={slots.image} size="medium" fill={true}/>
-                    </div>
-                ) : (
-                    <div className="w-full h-full flex items-center justify-center">
-                        <IconForView
-                            collectionOrView={collection}
-                            color="disabled"
-                        />
-                    </div>
-                )}
-
-                {/* Hover overlay */}
-                <div className={cls(
-                    "absolute inset-0 bg-black/0 group-hover:bg-black/10",
-                    "transition-colors duration-200"
-                )}/>
-
-                {/* Selection checkbox */}
-                {selectionEnabled && (
-                    <div
-                        className={cls(
-                            "absolute",
-                            size === "xs" || size === "s" ? "top-1 left-1" : "top-2 left-2"
-                        )}
-                        onClick={handleCheckboxClick}
-                    >
-                        <Checkbox
-                            checked={selected ?? false}
-                            onCheckedChange={handleSelectionChange}
-                            size={size === "xs" ? "smallest" : "small"}
-                        />
-                    </div>
-                )}
-
-            </div>
-
-            {/* Content area */}
-            <div className="p-3">
-                {/* No id line here.
-                    A card used to print the row id above its title, always —
-                    a truncated uuid (`isId: "uuid"` is the default) too short
-                    to copy and not what a card is read for. The list row and
-                    the board card show an id only when nothing else names the
-                    record; the card was the one surface that showed it even
-                    when it had a title, and the id is still the fallback below
-                    for a record that has none. The table's ID column, which is
-                    full width, copyable and governed by
-                    `hideIdFromCollection`, is where an id is actually read. */}
-
-                {/* Title slot */}
-                <div className="truncate my-1 text-sm font-medium min-h-[20px]">
-                    {slots.title ? (
-                        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}
-                        </Typography>
-                    )}
-                </div>
-
-                {/* 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">
-                        {terms.length > 0 && typeof slots.subtitle.value === "string"
-                            ? <Highlighted text={slots.subtitle.value} terms={terms}/>
-                            : <SlotValue slot={slots.subtitle} size="small"/>}
-                    </div>
-                )}
-
-                {/* Relation chips slot */}
-                {slots.relations.length > 0 && (
-                    <div className="flex items-center gap-1 mt-1 overflow-hidden max-w-full flex-wrap">
-                        {slots.relations.map((rel) => (
-                            rel.items.map((item) => (
-                                <Chip
-                                    key={`${rel.propertyKey}-${item.id}`}
-                                    size="smallest"
-                                    colorScheme={rel.colorScheme}
-                                    className="!text-[10px] !leading-tight !py-0 shrink-0 max-w-[100px] truncate"
-                                >
-                                    {item.displayName}
-                                </Chip>
-                            ))
-                        ))}
-                        {slots.relations.some(r => r.totalCount > r.items.length) && (
-                            <span className="text-[10px] text-surface-400 dark:text-surface-500 shrink-0">
-                                +{slots.relations.reduce((acc, r) => acc + Math.max(0, r.totalCount - r.items.length), 0)}
-                            </span>
-                        )}
-                    </div>
-                )}
-
-                {/* 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>
-        </Card>
-    );
-}