@rebasepro/admin 0.0.1-canary.4f204c2

package/src/components/EntityCollectionView/SplitListView.tsx

@@ -0,0 +1,314 @@
+import type { EntityCollection } from "@rebasepro/types";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { CollectionSize, Entity, EntityTableController, SelectionController } from "@rebasepro/types";
+import { EntityEditView } from "../EntityEditView";
+import {
+    cls,
+    defaultBorderMixin,
+    ResizablePanels
+} from "@rebasepro/ui";
+import { useLargeLayout } from "@rebasepro/core";
+import { useCollectionRegistryController } from "../../index";
+import { useNavigate } from "react-router-dom";
+import { useUrlController } from "../../index";
+import { ErrorBoundary } from "@rebasepro/ui";
+
+export type SplitListViewProps<M extends Record<string, unknown> = Record<string, unknown>> = {
+    collection: EntityCollection<M>;
+    tableController: EntityTableController<M>;
+    onEntityClick?: (entity: Entity<M>) => void;
+    onNewClick?: () => void;
+    selectionController?: SelectionController<M>;
+    selectionEnabled?: boolean;
+    highlightedEntities?: Entity<M>[];
+    emptyComponent?: React.ReactNode;
+    onScroll?: (props: {
+        scrollDirection: "forward" | "backward";
+        scrollOffset: number;
+        scrollUpdateWasRequested: boolean;
+    }) => void;
+    initialScroll?: number;
+    size?: CollectionSize;
+    path: string;
+    parentCollectionIds?: string[];
+    /**
+     * The entity ID to show in the detail panel.
+     * Comes from the URL path (e.g. /c/authors/14 → selectedEntityId = "14").
+     * When undefined, no detail panel is shown.
+     */
+    selectedEntityId?: string | number;
+    /**
+     * When provided, the detail panel will open this tab (e.g. a subcollection slug).
+     * Used by the router to pass the subcollection tab from the URL.
+     */
+    selectedTab?: string;
+    /**
+     * Toolbar to render above the content in the left panel.
+     */
+    toolbar?: React.ReactNode;
+    /**
+     * The collection view to render on the left side.
+     */
+    children: React.ReactNode;
+};
+
+const PANEL_SIZE_KEY = "rebase_split_list_panel_size";
+
+function getSavedPanelSize(path: string): number {
+    try {
+        const saved = localStorage.getItem(`${PANEL_SIZE_KEY}_${path}`);
+        if (saved !== null) {
+            const val = parseFloat(saved);
+            if (!isNaN(val) && val > 0 && val < 100) return val;
+        }
+    } catch { /* ignore */ }
+    return 30;
+}
+
+function savePanelSize(path: string, size: number) {
+    try {
+        localStorage.setItem(`${PANEL_SIZE_KEY}_${path}`, size.toString());
+    } catch { /* ignore */ }
+}
+
+/**
+ * Master-detail split view.
+ * Shows the list on the left and the entity edit view on the right.
+ *
+ * Animation approach:
+ * - The list always renders at full width.
+ * - When a detail opens, the list shrinks to `panelSize%` and the detail slides in.
+ * - On close, the reverse plays.
+ *
+ * State management:
+ * - The selected entity is driven by the URL path (e.g. /c/authors/14).
+ *   `selectedEntityId` comes from props via RebaseRoute, NOT from internal state.
+ * - Clicking an entity navigates to /c/authors/{id} via the standard onEntityClick handler.
+ * - Closing the detail navigates back to /c/authors.
+ */
+export function SplitListView<M extends Record<string, unknown> = Record<string, unknown>>({
+    collection,
+    tableController,
+    onEntityClick: externalOnEntityClick,
+    onNewClick: externalOnNewClick,
+    selectionController,
+    selectionEnabled = true,
+    highlightedEntities,
+    emptyComponent,
+    onScroll,
+    initialScroll,
+    size = "m",
+    path,
+    parentCollectionIds,
+    selectedEntityId,
+    selectedTab,
+    toolbar,
+    children
+}: SplitListViewProps<M>) {
+    const largeLayout = useLargeLayout();
+    const collectionRegistryController = useCollectionRegistryController();
+    const navigate = useNavigate();
+    const urlController = useUrlController();
+
+    const showDetail = selectedEntityId !== undefined;
+
+    // Panel size state with persistence
+    const [panelSize, setPanelSize] = useState(() => getSavedPanelSize(path));
+
+    useEffect(() => {
+        savePanelSize(path, panelSize);
+    }, [panelSize, path]);
+
+    // ── Animation state ──
+    // We track the "rendered" entity to keep the detail panel mounted during the exit animation.
+    const [renderedEntityId, setRenderedEntityId] = useState<string | number | undefined>(selectedEntityId);
+    const [animationPhase, setAnimationPhase] = useState<"idle" | "entering" | "entered" | "exiting">(
+        selectedEntityId !== undefined ? "entered" : "idle"
+    );
+    const animationTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+    // Transition duration (ms) — keep in sync with CSS
+    const TRANSITION_DURATION = 150;
+
+    useEffect(() => {
+        if (animationTimer.current) {
+            clearTimeout(animationTimer.current);
+            animationTimer.current = null;
+        }
+
+        if (selectedEntityId !== undefined) {
+            // Opening or switching entity
+            setRenderedEntityId(selectedEntityId);
+            if (animationPhase === "idle" || animationPhase === "exiting") {
+                // Fresh open — trigger enter
+                setAnimationPhase("entering");
+                // Use requestAnimationFrame to ensure the "entering" class is painted
+                // before transitioning to "entered".
+                requestAnimationFrame(() => {
+                    requestAnimationFrame(() => {
+                        setAnimationPhase("entered");
+                    });
+                });
+            }
+            // If already entered (switching entities), keep "entered"
+        } else {
+            // Closing
+            if (animationPhase === "entered" || animationPhase === "entering") {
+                setAnimationPhase("exiting");
+                animationTimer.current = setTimeout(() => {
+                    setAnimationPhase("idle");
+                    setRenderedEntityId(undefined);
+                }, TRANSITION_DURATION);
+            }
+        }
+
+        return () => {
+            if (animationTimer.current) clearTimeout(animationTimer.current);
+        };
+    }, [selectedEntityId]); // Intentionally only depend on selectedEntityId
+
+    // Close the detail panel: navigate back to the collection path
+    const handleCloseDetail = useCallback(() => {
+        const collectionUrl = urlController.buildUrlCollectionPath(path);
+        navigate(collectionUrl);
+    }, [navigate, urlController, path]);
+
+    // ── Keyboard navigation ──
+    const entityIds = useMemo(
+        () => tableController.data.map((e: Entity<M>) => e.id),
+        [tableController.data]
+    );
+
+    useEffect(() => {
+        const handleKeyDown = (e: KeyboardEvent) => {
+            // Don't intercept when user is typing in an input/textarea
+            const tag = (e.target as HTMLElement)?.tagName;
+            if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT" || (e.target as HTMLElement)?.isContentEditable) {
+                // Only intercept Escape when inside the detail panel
+                if (e.key === "Escape" && selectedEntityId) {
+                    handleCloseDetail();
+                    e.preventDefault();
+                }
+                return;
+            }
+
+            if (e.key === "Escape" && selectedEntityId) {
+                handleCloseDetail();
+                e.preventDefault();
+                return;
+            }
+
+            // Arrow down / j → next entity
+            if ((e.key === "ArrowDown" || e.key === "j") && !e.metaKey && !e.ctrlKey) {
+                e.preventDefault();
+                if (entityIds.length === 0) return;
+
+                if (selectedEntityId === undefined) {
+                    const firstEntity = tableController.data[0];
+                    if (firstEntity) externalOnEntityClick?.(firstEntity);
+                } else {
+                    const currentIndex = entityIds.indexOf(selectedEntityId);
+                    if (currentIndex >= 0 && currentIndex < entityIds.length - 1) {
+                        const nextEntity = tableController.data[currentIndex + 1];
+                        if (nextEntity) externalOnEntityClick?.(nextEntity);
+                    }
+                }
+                return;
+            }
+
+            // Arrow up / k → previous entity
+            if ((e.key === "ArrowUp" || e.key === "k") && !e.metaKey && !e.ctrlKey) {
+                e.preventDefault();
+                if (entityIds.length === 0) return;
+
+                if (selectedEntityId === undefined) {
+                    const lastEntity = tableController.data[tableController.data.length - 1];
+                    if (lastEntity) externalOnEntityClick?.(lastEntity);
+                } else {
+                    const currentIndex = entityIds.indexOf(selectedEntityId);
+                    if (currentIndex > 0) {
+                        const prevEntity = tableController.data[currentIndex - 1];
+                        if (prevEntity) externalOnEntityClick?.(prevEntity);
+                    }
+                }
+                return;
+            }
+
+            // n → new entity
+            if (e.key === "n" && !e.metaKey && !e.ctrlKey && !e.altKey) {
+                externalOnNewClick?.();
+                e.preventDefault();
+                return;
+            }
+        };
+
+        window.addEventListener("keydown", handleKeyDown);
+        return () => window.removeEventListener("keydown", handleKeyDown);
+    }, [selectedEntityId, handleCloseDetail, externalOnEntityClick, externalOnNewClick, entityIds, tableController.data]);
+
+    const usedParentCollectionIds = parentCollectionIds ?? collectionRegistryController.getParentCollectionIds(path);
+
+    const isDetailVisible = animationPhase !== "idle";
+
+    // ── Unified Layout: animated split using ResizablePanels ──
+
+    const listPanel = (
+        <div
+            className={cls(
+                "flex flex-col h-full overflow-y-auto overflow-x-hidden min-w-0 transition-all ease-out w-full",
+                (!largeLayout && isDetailVisible)
+                    ? "opacity-0 -translate-x-1/3 pointer-events-none"
+                    : "opacity-100 translate-x-0"
+            )}
+            style={{ transitionDuration: `${TRANSITION_DURATION}ms` }}
+        >
+            {toolbar}
+            {children}
+        </div>
+    );
+
+    const detailPanel = renderedEntityId !== undefined ? (
+        <div
+            className={cls(
+                "flex-1 flex flex-col min-w-0 h-full transition-all ease-out w-full",
+                animationPhase === "entered"
+                    ? "opacity-100 translate-x-0"
+                    : (largeLayout ? "opacity-0 translate-x-8" : "opacity-0 translate-x-1/3")
+            )}
+            style={{ transitionDuration: `${TRANSITION_DURATION}ms` }}
+        >
+            <ErrorBoundary>
+                <EntityEditView
+                    key={String(renderedEntityId)}
+                    path={path}
+                    collection={collection as EntityCollection<Record<string, unknown>>}
+                    entityId={renderedEntityId}
+                    parentCollectionIds={usedParentCollectionIds}
+                    selectedTab={selectedTab}
+                    layout="split"
+                    onTabChange={(params) => {
+                        const newSelectedTab = params.selectedTab;
+                        const entityUrl = urlController.buildUrlCollectionPath(
+                            newSelectedTab
+                                ? `${path}/${renderedEntityId}/${newSelectedTab}`
+                                : `${path}/${renderedEntityId}`
+                        );
+                        navigate(entityUrl);
+                    }}
+                />
+            </ErrorBoundary>
+        </div>
+    ) : <></>;
+
+    return (
+        <ResizablePanels
+            stacked={!largeLayout}
+            firstPanel={listPanel}
+            secondPanel={detailPanel}
+            showSecondPanel={isDetailVisible}
+            panelSizePercent={animationPhase === "entering" ? 100 : panelSize}
+            onPanelSizeChange={setPanelSize}
+            minPanelSizePx={240}
+        />
+    );
+}

package/src/components/EntityCollectionView/ViewModeToggle.tsx

@@ -0,0 +1,199 @@
+
+import React, { useMemo } from "react";
+import { CollectionSize, ViewMode } from "@rebasepro/types";
+import { Button, Popover, Select, SelectItem, ToggleButtonGroup, ToggleButtonOption , iconSize } from "@rebasepro/ui";
+import { LayoutGridIcon, ListIcon, TableIcon, ColumnsIcon, KanbanIcon } from "lucide-react";
+import { useTranslation } from "@rebasepro/core";
+
+export type KanbanPropertyOption = {
+    key: string;
+    label: string;
+};
+
+export type ViewModeToggleProps = {
+    viewMode?: ViewMode;
+    onViewModeChange?: (mode: ViewMode) => void;
+    /**
+     * Which view modes are enabled for this collection.
+     * Only these modes will appear in the toggle.
+     * Defaults to all three: ["table", "cards", "kanban"].
+     */
+    enabledViews?: ViewMode[];
+    /**
+     * Current size for card/table views
+     */
+    size?: CollectionSize;
+    /**
+     * Callback when size changes
+     */
+    onSizeChanged?: (size: CollectionSize) => void;
+    /**
+     * Controlled open state for the popover
+     */
+    open?: boolean;
+    /**
+     * Callback when popover open state changes
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Available properties that can be used for kanban columns (enum properties)
+     */
+    kanbanPropertyOptions?: KanbanPropertyOption[];
+    /**
+     * Currently selected property for kanban columns
+     */
+    selectedKanbanProperty?: string;
+    /**
+     * Callback when the kanban column property changes
+     */
+    onKanbanPropertyChange?: (property: string) => void;
+}
+
+const ALL_VIEW_MODES: ViewMode[] = ["list", "table", "cards", "kanban"];
+
+export function ViewModeToggle({
+    viewMode = "table",
+    onViewModeChange,
+    enabledViews = ALL_VIEW_MODES,
+    size,
+    onSizeChanged,
+    open,
+    onOpenChange,
+    kanbanPropertyOptions,
+    selectedKanbanProperty,
+    onKanbanPropertyChange
+}: ViewModeToggleProps) {
+
+    const { t } = useTranslation();
+
+    if (!onViewModeChange) {
+        return null;
+    }
+
+    // Get icon for current view mode
+    const getViewModeIcon = () => {
+        if (viewMode === "kanban") return <KanbanIcon size={iconSize.smallest}/>;
+        if (viewMode === "cards") return <LayoutGridIcon size={iconSize.smallest}/>;
+        if (viewMode === "table") return <TableIcon size={iconSize.smallest}/>;
+        return <ListIcon size={iconSize.smallest}/>;
+    };
+
+    const getViewModeName = () => {
+        if (viewMode === "kanban") return t("board");
+        if (viewMode === "cards") return t("cards");
+        if (viewMode === "table") return t("table_view_mode");
+        return t("list");
+    };
+
+    const showSizeSelector = size && onSizeChanged && (viewMode === "list" || viewMode === "table" || viewMode === "cards");
+    const showKanbanPropertySelector = viewMode === "kanban" &&
+        kanbanPropertyOptions &&
+        kanbanPropertyOptions.length > 0 &&
+        onKanbanPropertyChange;
+
+    // Build toggle options
+    const viewModeOptions: ToggleButtonOption<ViewMode>[] = useMemo(() => {
+        const allOptions: ToggleButtonOption<ViewMode>[] = [
+            {
+                value: "list",
+                label: t("list"),
+                icon: <ListIcon size={iconSize.smallest}/>
+            },
+            {
+                value: "table",
+                label: t("table_view_mode"),
+                icon: <TableIcon size={iconSize.smallest}/>
+            },
+            {
+                value: "cards",
+                label: t("cards"),
+                icon: <LayoutGridIcon size={iconSize.smallest}/>
+            },
+            {
+                value: "kanban",
+                label: t("board"),
+                icon: <KanbanIcon size={iconSize.smallest}/>
+            }
+        ];
+
+        return allOptions;
+    }, []);
+
+
+
+    return (
+        <div className="overflow-visible">
+            <Popover
+                open={open}
+                onOpenChange={onOpenChange}
+                modal={false}
+                trigger={
+                    <Button size="small">
+                        {getViewModeIcon()}
+                        <span className="ml-1 text-sm">{getViewModeName()}</span>
+                    </Button>
+                }
+            >
+                <div className="p-3 flex flex-col gap-3 min-w-[240px]">
+                    {/* View mode toggle using ToggleButtonGroup */}
+                    {viewModeOptions.length > 1 && (
+                        <ToggleButtonGroup
+                            value={viewMode}
+                            onValueChange={onViewModeChange}
+                            options={viewModeOptions}
+                        />
+                    )}
+
+                    {/* Size selector */}
+                    {showSizeSelector && (
+                        <div className="flex flex-row items-center justify-between gap-2">
+                            <div className="flex items-center gap-2 text-sm text-surface-600 dark:text-surface-300">
+                                <ColumnsIcon size={iconSize.smallest}/>
+                                <span>{t("size_label")}</span>
+                            </div>
+                            <Select
+                                value={size}
+                                size="small"
+                                className="w-20"
+                                onValueChange={(v) => onSizeChanged?.(v as CollectionSize)}
+                                renderValue={(v) => <span className="font-medium">{v.toUpperCase()}</span>}
+                            >
+                                {["xs", "s", "m", "l", "xl"].map((s) => (
+                                    <SelectItem key={s} value={s} className="font-medium text-center">
+                                        {s.toUpperCase()}
+                                    </SelectItem>
+                                ))}
+                            </Select>
+                        </div>
+                    )}
+
+                    {/* KanbanIcon column property selector */}
+                    {showKanbanPropertySelector && (
+                        <div className="flex flex-row items-center justify-between gap-2">
+                            <div className="flex items-center gap-2 text-sm text-surface-600 dark:text-surface-300">
+                                <KanbanIcon size={iconSize.smallest}/>
+                                <span>{t("group_by")}</span>
+                            </div>
+                            <Select
+                                value={selectedKanbanProperty}
+                                size="small"
+                                className="w-32"
+                                onValueChange={(v) => onKanbanPropertyChange?.(v)}
+                                renderValue={(v) => {
+                                    const option = kanbanPropertyOptions?.find(o => o.key === v);
+                                    return <span className="font-medium truncate">{option?.label ?? v}</span>;
+                                }}
+                            >
+                                {kanbanPropertyOptions?.map((option) => (
+                                    <SelectItem key={option.key} value={option.key}>
+                                        {option.label}
+                                    </SelectItem>
+                                ))}
+                            </Select>
+                        </div>
+                    )}
+                </div>
+            </Popover>
+        </div>
+    );
+}

package/src/components/EntityCollectionView/board_types.ts

@@ -0,0 +1,113 @@
+import { CSSProperties } from "react";
+import { ChipColorKey, ChipColorScheme } from "@rebasepro/ui";
+import { Entity } from "@rebasepro/types";
+
+/**
+ * Item wrapper for entities in the Board component
+ */
+export interface BoardItem<M extends Record<string, unknown> = Record<string, unknown>> {
+    id: string;
+    entity: Entity<M>;
+}
+
+/**
+ * Map of column keys to arrays of board items
+ */
+export interface BoardItemMap<M extends Record<string, unknown> = Record<string, unknown>> {
+    [columnKey: string]: BoardItem<M>[];
+}
+
+/**
+ * Props passed to custom item render components
+ */
+export interface BoardItemViewProps<M extends Record<string, unknown> = Record<string, unknown>> {
+    item: BoardItem<M>;
+    isDragging: boolean;
+    isClone?: boolean;
+    isGroupedOver?: boolean;
+    style?: CSSProperties;
+    index?: number;
+}
+
+/**
+ * Per-column loading state
+ */
+export interface ColumnLoadingState {
+    [columnKey: string]: {
+        loading: boolean;
+        hasMore: boolean;
+        itemCount: number;
+        /** Total count of entities in column (may differ from itemCount if some lack orderProperty) */
+        totalCount?: number;
+    };
+}
+
+/**
+ * Props for the Board component
+ */
+export interface BoardProps<M extends Record<string, unknown>, COLUMN extends string> {
+    /**
+     * Array of board items (entities wrapped with id)
+     */
+    data: BoardItem<M>[];
+    /**
+     * Array of column keys/identifiers
+     */
+    columns: COLUMN[];
+    /**
+     * Labels for each column (optional, uses column key if not provided)
+     */
+    columnLabels?: Record<COLUMN, string>;
+    /**
+     * Colors for each column from enum values (optional)
+     */
+    columnColors?: Record<COLUMN, ChipColorKey | ChipColorScheme | undefined>;
+    /**
+     * CSS class name for the board container
+     */
+    className?: string;
+    /**
+     * Function to determine which column an item belongs to
+     */
+    assignColumn: (item: BoardItem<M>) => COLUMN;
+    /**
+     * Whether column reordering is allowed.
+     * Set to true only when a plugin provides persistence for column order.
+     */
+    allowColumnReorder?: boolean;
+    /**
+     * Callback when columns are reordered
+     */
+    onColumnReorder?: (columns: COLUMN[]) => void;
+    /**
+     * Callback when items are reordered or moved between columns
+     */
+    onItemsReorder?: (
+        items: BoardItem<M>[],
+        moveInfo?: {
+            itemId: string;
+            sourceColumn: COLUMN;
+            targetColumn: COLUMN;
+        }
+    ) => void;
+    /**
+     * Component to render individual items
+     */
+    ItemComponent: React.ComponentType<BoardItemViewProps<M>>;
+    /**
+     * Per-column loading state for pagination
+     */
+    columnLoadingState?: ColumnLoadingState;
+    /**
+     * Callback to load more items for a column
+     */
+    onLoadMoreColumn?: (column: COLUMN) => void;
+    /**
+     * Callback to add a new item to a specific column
+     */
+    onAddItemToColumn?: (column: COLUMN) => void;
+    /**
+     * Optional component to render at the end of the board for adding new columns
+     */
+    AddColumnComponent?: React.ReactNode;
+}