@rebasepro/admin 0.1.2 → 0.2.3

package/src/components/EntityCollectionView/EntityCollectionListView.tsx

@@ -1,14 +1,15 @@
 
 import type { EntityCollection, Property } from "@rebasepro/types";
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { CollectionSize, Entity, EntityTableController, SelectionController } from "@rebasepro/types";
-import { getEntityImagePreviewPropertyKey } from "@rebasepro/common";
+import { CollectionSize, Entity, EntityAction, EntityTableController, SelectionController } from "@rebasepro/types";
 import {
     Checkbox,
     Chip,
     CircularProgress,
     cls,
     defaultBorderMixin,
+    IconButton,
+    Tooltip,
     Typography
 } from "@rebasepro/ui";
 import { PropertyPreview } from "../../preview";
@@ -17,10 +18,12 @@ import {
     useCustomizationController
 } from "@rebasepro/core";
 import { useAnalyticsController } from "@rebasepro/core";
-import { getEntityTitlePropertyKey, getEntityPreviewKeys } from "../../util/previews";
+import { getEntityPreviewKeys } from "../../util/previews";
 import { IconForView } from "@rebasepro/core";
 import { getValueInPath } from "@rebasepro/utils";
 import { useCollectionSlotKeys, resolveEntitySlots, type CollectionSlotKeys } from "./useEntityPreviewSlots";
+import { useCMSContext } from "../../hooks/useCMSContext";
+import { resolveEntityAction } from "../../util/resolutions";
 
 export type EntityCollectionListViewProps<M extends Record<string, unknown> = Record<string, unknown>> = {
     collection: EntityCollection<M>;
@@ -45,6 +48,22 @@ export type EntityCollectionListViewProps<M extends Record<string, unknown> = Re
      * row is visually highlighted with a primary accent.
      */
     selectedEntityId?: string | number;
+
+    /**
+     * Callback to get entity actions for a given entity.
+     * Only actions with `showActionsInListView: true` will be rendered.
+     */
+    getActionsForEntity?: (params: { entity?: Entity<M>, customEntityActions?: EntityAction[] }) => EntityAction[];
+
+    /**
+     * Full path of the collection, used as context for action handlers.
+     */
+    path?: string;
+
+    /**
+     * How entities open when an action triggers navigation.
+     */
+    openEntityMode?: "side_panel" | "full_screen" | "split" | "dialog";
 };
 
 type ListColumnDef = {
@@ -58,19 +77,6 @@ type ListColumnDef = {
     width: string;
 };
 
-/**
- * Get the number of preview property lines to show based on size
- */
-function getPreviewCount(size: CollectionSize): number {
-    switch (size) {
-        case "xs": return 0;
-        case "s": return 1;
-        case "m": return 2;
-        case "l": return 3;
-        case "xl": return 4;
-        default: return 2;
-    }
-}
 
 
 /**
@@ -107,6 +113,9 @@ const OVERSCAN_COUNT = 8;
 /** Threshold in pixels from the bottom of the scroll area to trigger loading more. */
 const LOAD_MORE_THRESHOLD = 400;
 
+/** Stable empty array for when no list-view actions are available. */
+const EMPTY_LIST_VIEW_ACTIONS: EntityAction[] = [];
+
 /**
  * Walk up the DOM from `element` to find the nearest scrollable ancestor.
  */
@@ -262,11 +271,15 @@ export function EntityCollectionListView<M extends Record<string, unknown> = Rec
     emptyComponent,
 
     size = "m",
-    selectedEntityId
+    selectedEntityId,
+    getActionsForEntity,
+    path,
+    openEntityMode
 }: EntityCollectionListViewProps<M>) {
     const authController = useAuthController();
     const customizationController = useCustomizationController();
     const analyticsController = useAnalyticsController();
+    const context = useCMSContext();
 
     const containerRef = useRef<HTMLDivElement>(null);
     const [containerWidth, setContainerWidth] = useState(1200);
@@ -475,6 +488,15 @@ export function EntityCollectionListView<M extends Record<string, unknown> = Rec
         return highlightedEntities?.some(e => e.id === entity.id && e.path === entity.path) ?? false;
     }, [highlightedEntities]);
 
+    // ── Compute list-view-visible actions per entity ──
+    const getListViewActions = useCallback((entity: Entity<M>): EntityAction[] => {
+        if (!getActionsForEntity) return EMPTY_LIST_VIEW_ACTIONS;
+        const customEntityActions = (collection.entityActions ?? [])
+            .map(action => resolveEntityAction(action, customizationController.entityActions))
+            .filter(Boolean) as EntityAction<M>[];
+        const allActions = getActionsForEntity({ entity, customEntityActions });
+        return allActions.filter(a => a.showActionsInListView);
+    }, [getActionsForEntity, collection.entityActions, customizationController.entityActions]);
 
     const rowClasses = getRowClasses(size);
 
@@ -615,6 +637,11 @@ export function EntityCollectionListView<M extends Record<string, unknown> = Rec
                                         size={size}
                                         isLast={isLast}
                                         isActive={selectedEntityId !== undefined && entity.id === selectedEntityId}
+                                        listViewActions={getListViewActions(entity)}
+                                        context={context}
+                                        path={path}
+                                        selectionController={selectionController}
+                                        openEntityMode={openEntityMode}
                                     />
                                 </div>
                             );
@@ -668,7 +695,12 @@ const ListRow = React.memo(function ListRow<M extends Record<string, unknown>>({
     showImage,
     size,
     isLast,
-    isActive = false
+    isActive = false,
+    listViewActions = [],
+    context,
+    path,
+    selectionController,
+    openEntityMode
 }: {
     entity: Entity<M>;
     collection: EntityCollection<M>;
@@ -684,6 +716,11 @@ const ListRow = React.memo(function ListRow<M extends Record<string, unknown>>({
     size: CollectionSize;
     isLast: boolean;
     isActive?: boolean;
+    listViewActions?: EntityAction[];
+    context?: ReturnType<typeof useCMSContext>;
+    path?: string;
+    selectionController?: SelectionController<M>;
+    openEntityMode?: "side_panel" | "full_screen" | "split" | "dialog";
 }) {
     // ── Resolve slots (pure function, no hooks) ──
     const slots = resolveEntitySlots(
@@ -898,6 +935,33 @@ const ListRow = React.memo(function ListRow<M extends Record<string, unknown>>({
                     )}
                 </div>
             )}
+
+            {/* LIST VIEW ACTIONS — always visible on each row */}
+            {listViewActions.length > 0 && (
+                <div className="flex items-center gap-0.5 flex-shrink-0 ml-auto" onClick={(e) => e.stopPropagation()}>
+                    {listViewActions.map((action, index) => (
+                        <Tooltip key={action.key ?? index} title={action.name} asChild>
+                            <IconButton
+                                size="small"
+                                onClick={(e: React.MouseEvent) => {
+                                    e.stopPropagation();
+                                    action.onClick({
+                                        view: "collection",
+                                        entity,
+                                        path,
+                                        collection,
+                                        context: context!,
+                                        sideEntityController: context?.sideEntityController,
+                                        selectionController,
+                                        openEntityMode: openEntityMode ?? collection?.openEntityMode ?? "full_screen"
+                                    });
+                                }}>
+                                {action.icon}
+                            </IconButton>
+                        </Tooltip>
+                    ))}
+                </div>
+            )}
         </div>
     );
 }) as <M extends Record<string, unknown>>(props: {
@@ -915,5 +979,10 @@ const ListRow = React.memo(function ListRow<M extends Record<string, unknown>>({
     size: CollectionSize;
     isLast: boolean;
     isActive?: boolean;
+    listViewActions?: EntityAction[];
+    context?: ReturnType<typeof useCMSContext>;
+    path?: string;
+    selectionController?: SelectionController<M>;
+    openEntityMode?: "side_panel" | "full_screen" | "split" | "dialog";
 }) => React.ReactElement;
 

package/src/components/EntityCollectionView/EntityCollectionView.tsx

@@ -5,10 +5,11 @@ import React, { useCallback, useEffect, useMemo, useState } from "react";
 
 import { deepEqual as equal } from "fast-equals"
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- used as fallback for many array types
 const EMPTY_ARRAY: any[] = [];
 const DEFAULT_ENTITY_OPEN_MODE = "split";
 
-import { CollectionSize, Entity, EntityReference, EntityTableController, FilterValues, PartialEntityCollection, SaveEntityProps, ViewMode } from "@rebasepro/types";
+import { CollectionSize, Entity, EntityReference, EntityTableController, FilterValues, PartialEntityCollection, ViewMode } from "@rebasepro/types";
 import {
     EntityCollectionRowActions,
     EntityCollectionTable
@@ -22,7 +23,6 @@ import { resolveEntityAction } from "../../util/resolutions";
 import { getPropertyInPath } from "../../util/property_utils";
 import { ReferencePreview } from "../../preview";
 import {
-    saveEntityWithCallbacks,
     useAuthController,
     useCustomizationController,
     useData,
@@ -41,7 +41,7 @@ import { SplitListView } from "./SplitListView";
 import { EntityCollectionBoardView } from "./EntityCollectionBoardView";
 import { ViewModeToggle, KanbanPropertyOption } from "./ViewModeToggle";
 import { Button, cls, focusedDisabled, IconButton, Markdown, Popover, Skeleton, Tooltip, Typography, VirtualTableColumn , iconSize } from "@rebasepro/ui";
-import { PlusIcon, ArrowRightToLineIcon, SearchIcon } from "lucide-react";
+import { ArrowRightToLineIcon, ErrorBoundary, PlusIcon, SearchIcon } from "@rebasepro/ui";
 import { setIn } from "@rebasepro/formex";
 import { getSubcollectionColumnId } from "../EntityCollectionTable/internal/common";
 import {
@@ -59,15 +59,14 @@ import { useSelectionController } from "./useSelectionController";
 import { EntityCollectionViewStartActions } from "./EntityCollectionViewStartActions";
 import { addRecentId, getRecentIds } from "./utils";
 import { useScrollRestoration } from "@rebasepro/core";
-import { ErrorBoundary } from "@rebasepro/ui";
 import { mergeDeep } from "@rebasepro/utils";
 import { useCollectionRegistryController, useUrlController, useSideEntityController, useCMSContext } from "../../index";
 import { useBreadcrumbsController } from "../../index";
 
 function getOpenEntityMode(
     viewMode: ViewMode,
-    configuredMode?: "side_panel" | "full_screen" | "split"
-): "side_panel" | "full_screen" | "split" {
+    configuredMode?: "side_panel" | "full_screen" | "split" | "dialog"
+): "side_panel" | "full_screen" | "split" | "dialog" {
     if (configuredMode) return configuredMode;
     if (viewMode === "kanban") return "side_panel";
     if (viewMode === "table" || viewMode === "cards") return "full_screen";
@@ -671,10 +670,14 @@ export const EntityCollectionView = React.memo(
             customEntityActions?: EntityAction[]
         }): EntityAction[] => {
             const deleteEnabled = entity ? canDelete(collection, path, entity) : true;
-            const actions: EntityAction[] = [editEntityAction];
-            if (createEnabled)
+            const disableActions = collection.disableDefaultActions ?? [];
+            const actions: EntityAction[] = [];
+            if (!disableActions.includes("edit")) {
+                actions.push(editEntityAction);
+            }
+            if (createEnabled && !disableActions.includes("copy"))
                 actions.push(copyEntityAction);
-            if (deleteEnabled)
+            if (deleteEnabled && !disableActions.includes("delete"))
                 actions.push(deleteEntityAction);
             if (customEntityActions)
                 return mergeEntityActions(actions, customEntityActions);
@@ -771,8 +774,8 @@ export const EntityCollectionView = React.memo(
                 propertyKey,
                 onHover,
                 path,
-                collection: collection as unknown as EntityCollection,
-                tableController: tableController as unknown as EntityTableController,
+                collection: collection as EntityCollection,
+                tableController: tableController as EntityTableController,
                 parentCollectionSlugs: parentCollectionSlugs ?? EMPTY_ARRAY, parentEntityIds: parentEntityIds ?? EMPTY_ARRAY
             };
             return <>{headerActionContributions.map((s, i) => (
@@ -953,6 +956,9 @@ export const EntityCollectionView = React.memo(
                 highlightedEntities={highlightedEntity ? [highlightedEntity] : []}
                 size={listSize}
                 emptyComponent={emptyComponent}
+                getActionsForEntity={getActionsForEntity}
+                path={path}
+                openEntityMode={openEntityMode}
             />
         ) : (
             <EntityCollectionTable
@@ -1074,6 +1080,9 @@ export const EntityCollectionView = React.memo(
                                     size={listSize}
                                     emptyComponent={emptyComponent}
                                     selectedEntityId={selectedEntityIdProp}
+                                    getActionsForEntity={getActionsForEntity}
+                                    path={path}
+                                    openEntityMode={openEntityMode}
                                 />
                             </div>
                         ) : (

package/src/components/EntityCollectionView/EntityCollectionViewActions.tsx

@@ -5,11 +5,10 @@ import React, { lazy, Suspense } from "react";
 import { useLargeLayout, useTranslation, useSlot, resolveComponentRef } from "@rebasepro/core";
 import { CollectionActionsProps, EntityTableController, SelectionController } from "@rebasepro/types";
 import { Button, IconButton, Tooltip, Popover, iconSize } from "@rebasepro/ui";
-import { PlusIcon, Trash2Icon, MoreVerticalIcon } from "lucide-react";
-import { ErrorBoundary } from "@rebasepro/ui";
+import { ErrorBoundary, MoreVerticalIcon, PlusIcon, Trash2Icon } from "@rebasepro/ui";
 import { usePermissions } from "@rebasepro/core";
 import { toArray } from "@rebasepro/utils";
-// Lazy-load import/export — pulls in xlsx (~800KB) only on demand
+// Lazy-load import/export — pulls in exceljs only on demand
 const ImportCollectionAction = lazy(() => import("../../data_import/import").then(m => ({ default: m.ImportCollectionAction })));
 const ExportCollectionAction = lazy(() => import("../../data_export/export").then(m => ({ default: m.ExportCollectionAction })));
 import { EditorCollectionAction } from "../../collection_editor/ui/EditorCollectionAction";
@@ -135,7 +134,7 @@ export function EntityCollectionViewActions<M extends Record<string, unknown>>({
             );
         });
 
-    const pluginActions = useSlot("collection.actions", actionProps as any);
+    const pluginActions = useSlot("collection.actions", actionProps as CollectionActionsProps);
 
     const secondaryActions = (
         <>
@@ -146,17 +145,17 @@ export function EntityCollectionViewActions<M extends Record<string, unknown>>({
             </ErrorBoundary>
             <ErrorBoundary>
                 <Suspense fallback={null}>
-                    <ImportCollectionAction {...(actionProps as any)}/>
+                    <ImportCollectionAction {...(actionProps as CollectionActionsProps)}/>
                 </Suspense>
             </ErrorBoundary>
             <ErrorBoundary>
                 <Suspense fallback={null}>
-                    <ExportCollectionAction {...(actionProps as any)}/>
+                    <ExportCollectionAction {...(actionProps as CollectionActionsProps)}/>
                 </Suspense>
             </ErrorBoundary>
             {hasCollectionEditor && (
                 <ErrorBoundary>
-                    <EditorCollectionAction {...(actionProps as any)}/>
+                    <EditorCollectionAction {...(actionProps as CollectionActionsProps)}/>
                 </ErrorBoundary>
             )}
         </>

package/src/components/EntityCollectionView/EntityCollectionViewStartActions.tsx

@@ -4,10 +4,10 @@ import React, { useState, useCallback } from "react";
 import { useAuthController, useLargeLayout, useTranslation, useSlot } from "@rebasepro/core";
 import { CollectionActionsProps, EntityTableController, SelectionController } from "@rebasepro/types";
 import { ErrorBoundary , iconSize } from "@rebasepro/ui";
-import { ArrowLeftIcon, FilterIcon } from "lucide-react";
+import { ArrowLeftIcon, Badge, Button, cls, FilterIcon, IconButton, Tooltip } from "@rebasepro/ui";
 import { ClearFilterSortButton } from "../ClearFilterSortButton";
 import { FiltersDialog } from "./FiltersDialog";
-import { Badge, Button, cls, IconButton, Tooltip } from "@rebasepro/ui";
+import { FilterPresetsButton } from "./FilterPresetsButton";
 import { toArray } from "@rebasepro/utils";
 import { useNavigate } from "react-router-dom";
 import { useUrlController, useCMSContext } from "../../index";
@@ -92,7 +92,6 @@ export function EntityCollectionViewStartActions<M extends Record<string, unknow
         </Tooltip>
     );
 
-    // Filters button
     const filtersButton = resolvedProperties && tableController.setFilterValues && (
         <Tooltip title={t("filters")}
             key={"filters_tooltip"}>
@@ -108,7 +107,7 @@ export function EntityCollectionViewStartActions<M extends Record<string, unknow
                         startIcon={<FilterIcon size={iconSize.small}/>}
                         className={cls(activeFilterCount > 0 && "text-primary")}
                     >
-                        {t("filters")}{activeFilterCount > 0 ? ` (${activeFilterCount})` : ""}
+                        {activeFilterCount > 0 ? `(${activeFilterCount})` : t("filters")}
                     </Button>
                 ) : (
                     <Button
@@ -124,13 +123,23 @@ export function EntityCollectionViewStartActions<M extends Record<string, unknow
         </Tooltip>
     );
 
+    const filterPresetsButton = collection.filterPresets?.length ? (
+        <FilterPresetsButton
+            key={"filter_presets"}
+            filterPresets={collection.filterPresets}
+            tableController={tableController}
+            compact={compact}
+        />
+    ) : null;
+
     const actions: React.ReactNode[] = [
         backButton,
         filtersButton,
         <ClearFilterSortButton
             key={"clear_filter"}
             tableController={tableController}
-            enabled={!collection.fixedFilter}/>
+            enabled={!collection.fixedFilter}/>,
+        filterPresetsButton
     ];
 
     const pluginActionsStart = useSlot("collection.actions.start", actionProps);