@rebasepro/admin 0.0.1-canary.eae7889 → 0.1.0

package/src/components/EntityCollectionView/EntityBoardCard.tsx

@@ -147,29 +147,28 @@ function EntityBoardCardInner<M extends Record<string, unknown> = Record<string,
                         </div>
                     )}
 
-                    {/* Selection checkbox overlay — visible on hover or when selected */}
-                    {selectionEnabled && (
+                    {/* Selection checkbox overlay — always in the DOM, visibility controlled by CSS */}
+                    <div className={cls(
+                        "absolute inset-0 flex items-center justify-center rounded-md transition-[opacity,background-color] duration-200",
+                        !selectionEnabled && "invisible pointer-events-none",
+                        selectionEnabled && (selected
+                            ? "opacity-100 bg-primary/10 dark:bg-primary/20"
+                            : "opacity-0 group-hover/card:opacity-100")
+                    )}>
                         <div className={cls(
-                            "absolute inset-0 flex items-center justify-center rounded-md transition-all duration-200",
+                            "transition-transform duration-200",
                             selected
-                                ? "opacity-100 bg-primary/10 dark:bg-primary/20"
-                                : "opacity-0 group-hover/card:opacity-100"
+                                ? "scale-100"
+                                : "scale-75 group-hover/card:scale-100"
                         )}>
-                            <div className={cls(
-                                "transition-transform duration-200",
-                                selected
-                                    ? "scale-100"
-                                    : "scale-75 group-hover/card:scale-100"
-                            )}>
-                                <Checkbox
-                                    checked={selected ?? false}
-                                    onCheckedChange={handleSelectionChange}
-                                    size="small"
-                                    padding={false}
-                                />
-                            </div>
+                            <Checkbox
+                                checked={selected ?? false}
+                                onCheckedChange={handleSelectionChange}
+                                size="small"
+                                padding={false}
+                            />
                         </div>
-                    )}
+                    </div>
                 </div>
 
                 {/* Content */}

package/src/components/EntityCollectionView/EntityCard.tsx

@@ -94,8 +94,8 @@ export function EntityCard<M extends Record<string, unknown> = Record<string, un
                 "cursor-pointer overflow-hidden group relative",
                 "transition-all duration-200",
                 "hover:shadow-lg hover:-translate-y-0.5",
-                selected && "ring-2 ring-primary",
-                highlighted && !selected && "ring-2 ring-primary ring-opacity-50"
+                selected && "ring-2 ring-primary bg-surface-accent-50 dark:bg-surface-accent-950",
+                highlighted && !selected && "ring-2 ring-primary ring-opacity-50 bg-surface-accent-50/50 dark:bg-surface-accent-950/50"
             )}
             onClick={handleClick}
         >

package/src/components/EntityCollectionView/EntityCollectionBoardView.tsx

@@ -30,7 +30,7 @@ export type EntityCollectionBoardViewProps<M extends Record<string, unknown> = R
     collection: EntityCollection<M>;
     tableController: EntityTableController<M>;
     fullPath: string;
-    parentCollectionIds?: string[];
+    parentCollectionSlugs?: string[], parentEntityIds?: string[];
     columnProperty: string;
     onEntityClick?: (entity: Entity<M>) => void;
     selectionController?: SelectionController<M>;
@@ -48,7 +48,8 @@ export function EntityCollectionBoardView<M extends Record<string, unknown> = Re
     collection,
     tableController,
     fullPath,
-    parentCollectionIds = [],
+    parentCollectionSlugs = [],
+    parentEntityIds = [],
     columnProperty,
     onEntityClick,
     selectionController,
@@ -225,13 +226,13 @@ export function EntityCollectionBoardView<M extends Record<string, unknown> = Re
             .forEach(plugin => {
                 plugin.hooks!.onKanbanColumnsReorder!({
                     fullPath,
-                    parentCollectionIds,
+                    parentCollectionSlugs, parentEntityIds,
                     collection,
                     kanbanColumnProperty: columnProperty,
                     newColumnsOrder: newColumns
                 });
             });
-    }, [plugins, fullPath, parentCollectionIds, collection, columnProperty, analyticsController]);
+    }, [plugins, fullPath, parentCollectionSlugs, parentEntityIds, collection, columnProperty, analyticsController]);
 
     // Collection-level count queries to detect missing order property
     // Just TWO counts: total and ordered (for the entire collection, not per column)
@@ -432,24 +433,51 @@ export function EntityCollectionBoardView<M extends Record<string, unknown> = Re
         return selectionController?.isEntitySelected(entity) ?? false;
     }, [selectionController]);
 
-    const ItemComponent = useCallback((props: BoardItemViewProps<M>) => {
-        return (
+    // Store latest callbacks in refs so the stable ItemComponent always
+    // reads fresh values without changing its own identity.
+    const handleEntityClickRef = useRef(handleEntityClick);
+    handleEntityClickRef.current = handleEntityClick;
+    const isEntitySelectedRef = useRef(isEntitySelected);
+    isEntitySelectedRef.current = isEntitySelected;
+    const handleSelectionChangeRef = useRef(handleSelectionChange);
+    handleSelectionChangeRef.current = handleSelectionChange;
+    const selectionEnabledRef = useRef(selectionEnabled);
+    selectionEnabledRef.current = selectionEnabled;
+
+    // Stable callback wrappers — identity never changes, delegates to refs.
+    const stableOnClick = useCallback((entity: Entity<M>) => {
+        handleEntityClickRef.current(entity);
+    }, []);
+    const stableOnSelectionChange = useCallback((entity: Entity<M>, sel: boolean) => {
+        handleSelectionChangeRef.current(entity, sel);
+    }, []);
+
+    // Build a single, truly stable component reference.
+    // Uses refs for ALL dynamic values so the component type never changes.
+    // When ItemComponent identity changes, React.memo'd SortableItem remounts
+    // the card → DOM is destroyed/recreated → CSS :hover state is lost → flicker.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const ItemComponent = useMemo(() => {
+        const Comp = (props: BoardItemViewProps<M>) => (
             <EntityBoardCard
                 {...props}
-                collection={collection}
-                onClick={handleEntityClick}
-                selected={isEntitySelected(props.item.entity)}
-                onSelectionChange={handleSelectionChange}
-                selectionEnabled={selectionEnabled}
+                collection={collectionRef.current as EntityCollection<M>}
+                onClick={stableOnClick}
+                selected={isEntitySelectedRef.current(props.item.entity)}
+                onSelectionChange={stableOnSelectionChange}
+                selectionEnabled={selectionEnabledRef.current}
             />
         );
-    }, [collection, handleEntityClick, isEntitySelected, handleSelectionChange, selectionEnabled]);
+        Comp.displayName = "KanbanItemComponent";
+        return Comp;
+    }, []);
 
     // Get KanbanSetupComponent from plugin slots
     const kanbanSetupSlots = useSlot("kanban.setup", {
         collection,
         fullPath,
-        parentCollectionIds
+        parentCollectionSlugs,
+        parentEntityIds
     });
     const KanbanSetupComponent = kanbanSetupSlots.length > 0 ? () => <>{kanbanSetupSlots[0]}</> : null;
 
@@ -457,7 +485,7 @@ export function EntityCollectionBoardView<M extends Record<string, unknown> = Re
     const addKanbanColumnSlots = useSlot("kanban.add-column", {
         collection,
         fullPath,
-        parentCollectionIds,
+        parentCollectionSlugs, parentEntityIds,
         columnProperty
     });
     const AddKanbanColumnComponent = addKanbanColumnSlots.length > 0 ? () => <>{addKanbanColumnSlots[0]}</> : null;

package/src/components/EntityCollectionView/EntityCollectionCardView.tsx

@@ -5,7 +5,6 @@ import { EntityCard } from "./EntityCard";
 import {
     cls,
     CircularProgress,
-    CircularProgressCenter,
     Typography
 } from "@rebasepro/ui";
 import { useAuthController, useCustomizationController } from "@rebasepro/core";
@@ -213,9 +212,11 @@ export function EntityCollectionCardView<M extends Record<string, unknown> = Rec
                     </Typography>
                 </div>
             ) : isInitialLoading ? (
-                <CircularProgressCenter/>
+                <div className="flex items-center justify-center py-12 px-8">
+                    <CircularProgress size="small"/>
+                </div>
             ) : isEmpty ? (
-                <div className="h-full flex items-center justify-center p-8">
+                <div className="flex items-center justify-center py-12 px-8">
                     {emptyComponent ?? (
                         <Typography variant="label" color="secondary">
                             No entries found

package/src/components/EntityCollectionView/EntityCollectionListView.tsx

@@ -7,7 +7,6 @@ import {
     Checkbox,
     Chip,
     CircularProgress,
-    CircularProgressCenter,
     cls,
     defaultBorderMixin,
     Typography
@@ -88,6 +87,44 @@ function getRowClasses(size: CollectionSize): string {
     }
 }
 
+/**
+ * Estimated row height in pixels for virtualization, based on size.
+ */
+function getEstimatedRowHeight(size: CollectionSize): number {
+    switch (size) {
+        case "xs": return 44;
+        case "s": return 52;
+        case "m": return 64;
+        case "l": return 76;
+        case "xl": return 88;
+        default: return 64;
+    }
+}
+
+/** Number of extra rows rendered above/below the viewport. */
+const OVERSCAN_COUNT = 8;
+
+/** Threshold in pixels from the bottom of the scroll area to trigger loading more. */
+const LOAD_MORE_THRESHOLD = 400;
+
+/**
+ * Walk up the DOM from `element` to find the nearest scrollable ancestor.
+ */
+function getScrollParent(element: HTMLElement | null): HTMLElement | null {
+    let parent = element?.parentElement ?? null;
+    while (parent) {
+        const style = getComputedStyle(parent);
+        if (
+            style.overflowY === "auto" || style.overflowY === "scroll" ||
+            style.overflow === "auto" || style.overflow === "scroll"
+        ) {
+            return parent;
+        }
+        parent = parent.parentElement;
+    }
+    return document.documentElement;
+}
+
 /**
  * Returns true if a property type should NOT be rendered via
  * PropertyPreview in list row columns (because it would blow up height).
@@ -446,22 +483,77 @@ export function EntityCollectionListView<M extends Record<string, unknown> = Rec
     // Empty state
     const isEmpty = !dataLoading && data.length === 0 && !dataLoadingError;
 
+    // ── Virtualization: scroll-parent windowing ──
+    const estimatedRowHeight = getEstimatedRowHeight(size);
+    const [effectiveScrollTop, setEffectiveScrollTop] = useState(0);
+    const [viewportHeight, setViewportHeight] = useState(800);
+
+    // Keep mutable refs for values used in the scroll handler to avoid
+    // re-attaching the listener every time pagination state changes.
+    const paginationStateRef = useRef({ paginationEnabled, noMoreToLoad, itemCount, pageSize });
+    useEffect(() => {
+        paginationStateRef.current = { paginationEnabled, noMoreToLoad, itemCount, pageSize };
+    }, [paginationEnabled, noMoreToLoad, itemCount, pageSize]);
 
-    // Sentinel ref for IntersectionObserver-based infinite scroll
-    const sentinelRef = useRef<HTMLDivElement | null>(null);
     useEffect(() => {
-        if (!paginationEnabled || noMoreToLoad || dataLoading) return;
-        const sentinel = sentinelRef.current;
-        if (!sentinel) return;
-        const observer = new IntersectionObserver((entries) => {
-            if (entries[0]?.isIntersecting && !isLoadingMore.current) {
+        const el = containerRef.current;
+        if (!el) return;
+        const scrollEl = getScrollParent(el);
+        if (!scrollEl) return;
+
+        let rafId: number | null = null;
+
+        const update = () => {
+            rafId = null;
+            const scrollRect = scrollEl.getBoundingClientRect();
+            const listRect = el.getBoundingClientRect();
+
+            // How much of the list has scrolled past the viewport top
+            const listTopRelative = listRect.top - scrollRect.top;
+            setEffectiveScrollTop(Math.max(0, -listTopRelative));
+            setViewportHeight(scrollRect.height);
+
+            // Infinite scroll: trigger load-more when near the bottom
+            const { paginationEnabled: pe, noMoreToLoad: nm, itemCount: ic, pageSize: ps } = paginationStateRef.current;
+            if (
+                pe &&
+                !nm &&
+                !isLoadingMore.current &&
+                scrollEl.scrollHeight - scrollEl.scrollTop - scrollEl.clientHeight < LOAD_MORE_THRESHOLD
+            ) {
                 isLoadingMore.current = true;
-                setItemCount?.((itemCount ?? pageSize) + pageSize);
+                setItemCount?.((ic ?? ps) + ps);
             }
-        }, { rootMargin: "200px" });
-        observer.observe(sentinel);
-        return () => observer.disconnect();
-    }, [paginationEnabled, noMoreToLoad, dataLoading, data.length, itemCount, pageSize, setItemCount]);
+        };
+
+        const onScroll = () => {
+            if (rafId === null) rafId = requestAnimationFrame(update);
+        };
+
+        scrollEl.addEventListener("scroll", onScroll, { passive: true });
+        const ro = new ResizeObserver(() => update());
+        ro.observe(scrollEl);
+        update(); // initial measurement
+
+        return () => {
+            scrollEl.removeEventListener("scroll", onScroll);
+            ro.disconnect();
+            if (rafId !== null) cancelAnimationFrame(rafId);
+        };
+    }, [setItemCount]); // stable deps only — mutable state via refs
+
+    // Compute the visible window of rows
+    const totalHeight = data.length * estimatedRowHeight;
+    const startIndex = Math.max(0, Math.floor(effectiveScrollTop / estimatedRowHeight) - OVERSCAN_COUNT);
+    const endIndex = Math.min(
+        data.length,
+        Math.ceil((effectiveScrollTop + viewportHeight) / estimatedRowHeight) + OVERSCAN_COUNT
+    );
+    const visibleData = data.slice(startIndex, endIndex);
+    const offsetY = startIndex * estimatedRowHeight;
+
+    // Footer height for loading/end indicators
+    const footerHeight = dataLoading ? 48 : (!dataLoading && noMoreToLoad && data.length > 0) ? 32 : 0;
 
     return (
         <div
@@ -479,9 +571,11 @@ export function EntityCollectionListView<M extends Record<string, unknown> = Rec
                     </Typography>
                 </div>
             ) : isInitialLoading ? (
-                <CircularProgressCenter/>
+                <div className="flex items-center justify-center py-12 px-8">
+                    <CircularProgress size="small"/>
+                </div>
             ) : isEmpty ? (
-                <div className="flex items-center justify-center p-8">
+                <div className="flex items-center justify-center py-12 px-8">
                     {emptyComponent ?? (
                         <Typography variant="label" color="secondary">
                             No entries found
@@ -489,55 +583,64 @@ export function EntityCollectionListView<M extends Record<string, unknown> = Rec
                     )}
                 </div>
             ) : (
-                <>
-                    {data.map((entity, index) => {
-                        const isLast = index === data.length - 1;
-                        return (
-                            <div
-                                key={entity.id}
-                                className={cls(
-                                    !isLast && "border-b",
-                                    !isLast && defaultBorderMixin
-                                )}
-                            >
-                                <ListRow
-                                    entity={entity}
-                                    collection={resolvedCollection}
-                                    onClick={handleEntityClick}
-                                    selected={isEntitySelected(entity)}
-                                    highlighted={isEntityHighlighted(entity)}
-                                    onSelectionChange={handleSelectionChange}
-                                    selectionEnabled={selectionEnabled}
-                                    columns={visibleColumns}
-                                    slotKeys={slotKeys}
-                                    rowClasses={rowClasses}
-                                    showImage={showImage}
-                                    size={size}
-                                    isLast={isLast}
-                                    isActive={selectedEntityId !== undefined && entity.id === selectedEntityId}
-                                />
-                            </div>
-                        );
-                    })}
-
-                    {/* Sentinel for infinite scroll pagination */}
-                    {paginationEnabled && !noMoreToLoad && (
-                        <div ref={sentinelRef} className="h-1"/>
-                    )}
+                /* Spacer with total height — no internal scroll.
+                   The nearest scrollable ancestor provides the scrollbar. */
+                <div style={{ height: totalHeight + footerHeight, position: "relative" }}>
+                    {/* Windowed rows */}
+                    <div style={{ position: "absolute", top: offsetY, left: 0, right: 0 }}>
+                        {visibleData.map((entity, i) => {
+                            const actualIndex = startIndex + i;
+                            const isLast = actualIndex === data.length - 1;
+                            return (
+                                <div
+                                    key={entity.id}
+                                    style={{ height: estimatedRowHeight }}
+                                    className={cls(
+                                        !isLast && "border-b",
+                                        !isLast && defaultBorderMixin
+                                    )}
+                                >
+                                    <ListRow
+                                        entity={entity}
+                                        collection={resolvedCollection}
+                                        onClick={handleEntityClick}
+                                        selected={isEntitySelected(entity)}
+                                        highlighted={isEntityHighlighted(entity)}
+                                        onSelectionChange={handleSelectionChange}
+                                        selectionEnabled={selectionEnabled}
+                                        columns={visibleColumns}
+                                        slotKeys={slotKeys}
+                                        rowClasses={rowClasses}
+                                        showImage={showImage}
+                                        size={size}
+                                        isLast={isLast}
+                                        isActive={selectedEntityId !== undefined && entity.id === selectedEntityId}
+                                    />
+                                </div>
+                            );
+                        })}
+                    </div>
 
+                    {/* Loading / end indicators pinned at the bottom */}
                     {dataLoading && (
-                        <div className="flex items-center justify-center py-4">
+                        <div
+                            className="flex items-center justify-center py-3"
+                            style={{ position: "absolute", top: totalHeight, left: 0, right: 0 }}
+                        >
                             <CircularProgress size="small"/>
                         </div>
                     )}
                     {!dataLoading && noMoreToLoad && data.length > 0 && (
-                        <div className="flex items-center justify-center py-2">
+                        <div
+                            className="flex items-center justify-center py-2 dark:bg-surface-900"
+                            style={{ position: "absolute", top: totalHeight, left: 0, right: 0 }}
+                        >
                             <Typography variant="caption" color="secondary">
                                 All {data.length} entries loaded
                             </Typography>
                         </div>
                     )}
-                </>
+                </div>
             )}
         </div>
     );
@@ -619,7 +722,7 @@ const ListRow = React.memo(function ListRow<M extends Record<string, unknown>>({
                 isActive
                     ? "bg-surface-accent-100 dark:bg-surface-accent-950 hover:bg-surface-accent-200 dark:hover:bg-surface-accent-900"
                     : selected
-                        ? "bg-primary-50 dark:bg-primary-900/20 hover:bg-surface-50 dark:hover:bg-surface-800/40"
+                        ? "bg-surface-accent-50 dark:bg-surface-accent-950 hover:bg-surface-accent-100 dark:hover:bg-surface-accent-900"
                         : highlighted
                             ? "bg-surface-accent-50 dark:bg-surface-accent-950 hover:bg-surface-50 dark:hover:bg-surface-800/40"
                             : "bg-white dark:bg-surface-900 hover:bg-surface-50 dark:hover:bg-surface-800/40"