@rebasepro/admin 0.0.1-canary.09e5ec5

package/src/components/HomePage/HomePageDnD.tsx

@@ -0,0 +1,703 @@
+import type { NavigationEntry } from "@rebasepro/types";
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import {
+    Active,
+    closestCenter,
+    closestCorners,
+    CollisionDetection,
+    DropAnimation,
+    getFirstCollision,
+    KeyboardSensor,
+    MouseSensor,
+    pointerWithin,
+    rectIntersection,
+    TouchSensor,
+    UniqueIdentifier,
+    useDndMonitor,
+    useDroppable,
+    useSensor,
+    useSensors
+} from "@dnd-kit/core";
+import {
+    AnimateLayoutChanges,
+    arrayMove,
+    defaultAnimateLayoutChanges,
+    rectSortingStrategy,
+    SortableContext,
+    useSortable
+} from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+
+import { NavigationCardBinding } from "./NavigationCardBinding";
+;
+import { cls } from "@rebasepro/ui";
+
+const animateLayoutChanges: AnimateLayoutChanges = (args) =>
+    defaultAnimateLayoutChanges({
+        ...args,
+        wasDragging: true
+    });
+
+const dropAnimationConfig: DropAnimation = {};
+
+const cloneSerializableNavigationEntry = (entry: NavigationEntry): NavigationEntry => {
+    const clonedEntry: Partial<NavigationEntry> = {
+        id: entry.id,
+        slug: entry.slug,
+        url: entry.url,
+        name: entry.name,
+        type: entry.type,
+        collection: entry.collection ? { ...entry.collection } : undefined,
+        view: entry.view ? { ...entry.view } : undefined,
+        ...(entry.group && { group: entry.group }),
+        ...(entry.description && { description: entry.description })
+    };
+    return clonedEntry as NavigationEntry;
+};
+
+const cloneItemsForDnd = (items: { name: string; entries: NavigationEntry[] }[]) =>
+    items.map((g) => ({
+        name: g.name,
+        entries: g.entries.map(cloneSerializableNavigationEntry)
+    }));
+
+/* ─────────────────────────────────────────────────────────── */
+/* Sortable card & group                                       */
+
+/* ─────────────────────────────────────────────────────────── */
+export function SortableNavigationCard({
+    entry,
+    onClick
+}: {
+    entry: NavigationEntry;
+    onClick?: () => void;
+}) {
+    const {
+        setNodeRef,
+        listeners,
+        attributes,
+        transform,
+        transition,
+        isDragging
+    } =
+        useSortable({
+            id: entry.url,
+            animateLayoutChanges
+        });
+
+    const style = {
+        transform: transform ? CSS.Transform.toString(transform) : undefined,
+        transition,
+        opacity: isDragging ? 0 : 1
+    };
+
+    return (
+        <div ref={setNodeRef} style={style} {...attributes} {...listeners}>
+            <NavigationCardBinding {...entry} onClick={onClick}/>
+        </div>
+    );
+}
+
+export function NavigationGroupDroppable({
+    id,
+    itemIds,
+    children,
+    isPotentialCardDropTarget = false
+}: {
+    id: UniqueIdentifier;
+    itemIds: UniqueIdentifier[];
+    children: React.ReactNode;
+    isPotentialCardDropTarget?: boolean;
+}) {
+    const { setNodeRef } = useDroppable({ id });
+
+    return (
+        <div
+            ref={setNodeRef}
+            className={cls(
+                isPotentialCardDropTarget
+                    ? "p-2 bg-surface-accent-200 dark:bg-surface-accent-800 rounded-lg"
+                    : undefined,
+                "transition-all duration-200 ease-in-out"
+            )}
+        >
+            <SortableContext items={itemIds} strategy={rectSortingStrategy}>
+                {children}
+            </SortableContext>
+        </div>
+    );
+}
+
+export function SortableNavigationGroup({
+    groupName,
+    children,
+    disabled
+}: {
+    groupName: string;
+    children: React.ReactNode;
+    disabled?: boolean;
+}) {
+    const {
+        attributes,
+        listeners,
+        setNodeRef,
+        transform,
+        transition,
+        isDragging
+    } =
+        useSortable({
+            id: groupName,
+            animateLayoutChanges,
+            disabled
+        });
+
+    const style = {
+        transform: transform ? CSS.Transform.toString(transform) : undefined,
+        transition,
+        opacity: isDragging ? 0 : 1
+    };
+
+    return (
+        <div ref={setNodeRef} style={style} {...attributes} {...listeners}>
+            {children}
+        </div>
+    );
+}
+
+export function useHomePageDnd({
+    items,
+    setItems,
+    disabled,
+    onCardMovedBetweenGroups,
+    onGroupMoved,
+    onNewGroupDrop,
+    onPersist
+}: {
+    items: { name: string; entries: NavigationEntry[] }[];
+    setItems: (
+        newItemsOrUpdater:
+            | { name: string; entries: NavigationEntry[] }[]
+            | ((
+                currentItems: { name: string; entries: NavigationEntry[] }[]
+            ) => { name: string; entries: NavigationEntry[] }[])
+    ) => void;
+    disabled: boolean;
+    onCardMovedBetweenGroups?: (card: NavigationEntry) => void;
+    onGroupMoved?: (groupName: string, oldIndex: number, newIndex: number) => void;
+    onNewGroupDrop?: () => void;
+    onPersist?: (latest: { name: string; entries: NavigationEntry[] }[]) => void;
+}) {
+    /* ---------------- local state ---------------- */
+    const dndItems = items;
+    const setDndItems = setItems;
+
+    const [activeId, setActiveId] = useState<UniqueIdentifier | null>(null);
+    const [activeIsGroup, setActiveIsGroup] = useState(false);
+    const [currentDraggingGroupId, setCurrentDraggingGroupId] =
+        useState<UniqueIdentifier | null>(null);
+    const [dndKitActiveNode, setDndKitActiveNode] = useState<Active | null>(null);
+    const [isDraggingCardOnly, setIsDraggingCardOnly] = useState(false);
+    const [dialogOpenForGroup, setDialogOpenForGroup] = useState<string | null>(null);
+    const [isHoveringNewGroupDropZone, setIsHoveringNewGroupDropZone] =
+        useState(false);
+    const [pendingNewGroupName, setPendingNewGroupName] = useState<string | null>(null);
+    const [stateBeforeNewGroup, setStateBeforeNewGroup] = useState<
+        { name: string; entries: NavigationEntry[] }[] | null
+    >(null);
+
+    /* store the original state before any drag modifications */
+    const preDragItemsRef = useRef<
+        { name: string; entries: NavigationEntry[] }[] | null
+    >(null);
+
+    /* store interim state for cross-group moves */
+    const interimItemsRef = useRef<
+        { name: string; entries: NavigationEntry[] }[] | null
+    >(null);
+    useEffect(() => {
+        interimItemsRef.current = dndItems;
+    }, [dndItems]);
+
+    /* ---------------- sensors ---------------- */
+    const mouseSensor = useSensor(MouseSensor, { activationConstraint: { distance: 10 } });
+    const touchSensor = useSensor(TouchSensor, {
+        activationConstraint: {
+            delay: 150,
+            tolerance: 5
+        }
+    });
+    const keyboardSensor = useSensor(KeyboardSensor);
+    const sensors = useSensors(mouseSensor, touchSensor, keyboardSensor);
+
+    /* ---------------- helpers ---------------- */
+    const dndContainers = dndItems.map((g) => g.name);
+
+    const findDndContainer = useCallback(
+        (id: UniqueIdentifier): string | undefined => {
+            if (!id) return undefined;
+            const group = dndItems.find((g) => g.name === id);
+            if (group) return group.name;
+            for (const g of dndItems) {
+                if (g.entries.some((e) => e.url === id)) return g.name;
+            }
+            return undefined;
+        },
+        [dndItems]
+    );
+
+    /* ---------------- collision detection ---------------- */
+    const lastOverId = useRef<UniqueIdentifier | null>(null);
+    const recentlyMovedToNewContainer = useRef(false);
+
+    const collisionDetection: CollisionDetection = useCallback(
+        (args) => {
+            if (disabled || !activeId) return [];
+            if (activeIsGroup) {
+                const groups = args.droppableContainers.filter((c) =>
+                    dndItems.some((g) => g.name === c.id)
+                );
+                if (!groups.length) return [];
+                return closestCenter({
+                    ...args,
+                    droppableContainers: groups
+                });
+            }
+
+            const pointer = pointerWithin(args);
+            if (pointer.length) {
+                const zone = pointer.find((c) => c.id === "new-group-drop-zone");
+                if (zone) return [zone];
+
+                const container = pointer.find((c) =>
+                    dndItems.some((g) => g.name === c.id)
+                );
+                if (container) {
+                    const itemsIn = dndItems.find((g) => g.name === container.id)
+                        ?.entries;
+                    if (itemsIn?.length) {
+                        const closest = closestCorners({
+                            ...args,
+                            droppableContainers: args.droppableContainers.filter(
+                                (c) => itemsIn.some((e) => e.url === c.id)
+                            )
+                        });
+                        if (closest.length) return closest;
+                    }
+                    return [container];
+                }
+                const first = getFirstCollision(pointer, "id");
+                if (first) return [{ id: first }];
+            }
+
+            const rects = rectIntersection(args);
+            const zoneRect = rects.find((c) => c.id === "new-group-drop-zone");
+            if (zoneRect) return [zoneRect];
+
+            let overId = getFirstCollision(rects, "id");
+            if (overId != null) {
+                const overIsContainer = dndItems.some((g) => g.name === overId);
+                if (overIsContainer) {
+                    const itemsIn = dndItems.find((g) => g.name === overId)
+                        ?.entries;
+                    if (itemsIn?.length) {
+                        const closestItem = closestCorners({
+                            ...args,
+                            droppableContainers: args.droppableContainers.filter(
+                                (c) => itemsIn.some((e) => e.url === c.id)
+                            )
+                        })[0]?.id;
+                        if (closestItem) overId = closestItem;
+                    }
+                }
+                lastOverId.current = overId;
+                return [{ id: overId }];
+            }
+
+            if (
+                recentlyMovedToNewContainer.current &&
+                lastOverId.current &&
+                !activeIsGroup
+            )
+                return [{ id: lastOverId.current }];
+
+            return [];
+        },
+        [activeId, dndItems, disabled, activeIsGroup]
+    );
+
+    /* ---------------- drag handlers ---------------- */
+    const handleDragStart = ({ active }: { active: Active }) => {
+        setDndKitActiveNode(active);
+        if (disabled) return;
+
+        // Capture the original state before any drag modifications
+        preDragItemsRef.current = cloneItemsForDnd(dndItems);
+
+        const isGroup = dndItems.some((g) => g.name === active.id);
+        if (!active.data.current) active.data.current = {};
+        active.data.current.type = isGroup ? "group" : "item";
+
+        setActiveId(active.id);
+        setActiveIsGroup(isGroup);
+        setIsDraggingCardOnly(!isGroup);
+        if (isGroup) setCurrentDraggingGroupId(active.id);
+        recentlyMovedToNewContainer.current = false;
+    };
+
+    const handleDragOver = ({
+        active,
+        over
+    }: { active: Active; over: any }) => {
+        if (disabled || !over) return;
+
+        const activeIdNow = active.id;
+        const overIdNow = over.id;
+        if (activeIdNow === overIdNow) return;
+        if (activeIsGroup) return;
+
+        const activeCont = findDndContainer(activeIdNow);
+        const overCont = findDndContainer(overIdNow);
+        if (!activeCont) return;
+
+        if (overCont && activeCont !== overCont) {
+            recentlyMovedToNewContainer.current = true;
+            lastOverId.current = overIdNow;
+
+            // Update state for visual feedback during drag
+            setDndItems((current) => {
+                const newState = cloneItemsForDnd(current);
+                const srcIdx = newState.findIndex((g) => g.name === activeCont);
+                const tgtIdx = newState.findIndex((g) => g.name === overCont);
+                if (srcIdx === -1 || tgtIdx === -1) return current;
+                const src = newState[srcIdx];
+                const tgt = newState[tgtIdx];
+                const idxInSrc = src.entries.findIndex((e) => e.url === activeIdNow);
+                if (idxInSrc === -1) return current;
+                const [moved] = src.entries.splice(idxInSrc, 1);
+
+                // Calculate insertion position - SAME logic as handleDragEnd
+                const overIsContainer = overIdNow === overCont;
+                if (overIsContainer) {
+                    tgt.entries.push(moved);
+                } else {
+                    const overIdx = tgt.entries.findIndex((e) => e.url === overIdNow);
+                    if (overIdx !== -1) {
+                        tgt.entries.splice(overIdx, 0, moved);
+                    } else {
+                        tgt.entries.push(moved);
+                    }
+                }
+
+                return newState;
+            });
+        } else if (activeCont === overCont) {
+            recentlyMovedToNewContainer.current = false;
+        }
+    };
+
+    const handleDragEnd = ({
+        active,
+        over
+    }: { active: Active; over: any }) => {
+        if (disabled || !over) {
+            resetDragState();
+            return;
+        }
+
+        const activeIdNow = active.id;
+        const overIdNow = over.id;
+
+        /* ─── group reorder ─── */
+        if (activeIsGroup) {
+            if (
+                activeIdNow !== overIdNow &&
+                dndItems.some((g) => g.name === overIdNow)
+            ) {
+                const from = dndItems.findIndex((g) => g.name === activeIdNow);
+                const to = dndItems.findIndex((g) => g.name === overIdNow);
+                if (from !== -1 && to !== -1) {
+                    const newState = arrayMove(dndItems, from, to);
+                    setDndItems(newState);
+                    onPersist?.(newState);
+                    onGroupMoved?.(activeIdNow as string, from, to);
+                }
+            }
+        }
+        /* ─── card move ─── */
+        else {
+            // CRITICAL: Find source container from ORIGINAL pre-drag state, not current (potentially stale) dndItems
+            const findContainerInState = (id: string, state: { name: string; entries: NavigationEntry[] }[]): string | undefined => {
+                const group = state.find((g) => g.name === id);
+                if (group) return group.name;
+                for (const g of state) {
+                    if (g.entries.some((e) => e.url === id)) return g.name;
+                }
+                return undefined;
+            };
+
+            const sourceState = preDragItemsRef.current || dndItems;
+            const activeCont = findContainerInState(activeIdNow as string, sourceState);
+            const overCont = findDndContainer(overIdNow);
+
+            /* drop on new-group zone */
+            if (overIdNow === "new-group-drop-zone") {
+                if (activeCont) {
+                    // Save current state before making changes
+                    setStateBeforeNewGroup(cloneItemsForDnd(dndItems));
+
+                    const newState = cloneItemsForDnd(dndItems);
+                    const srcIdx = newState.findIndex((g) => g.name === activeCont);
+                    if (srcIdx !== -1) {
+                        const src = newState[srcIdx];
+                        const idxInSrc = src.entries.findIndex(
+                            (e) => e.url === activeIdNow
+                        );
+                        if (idxInSrc !== -1) {
+                            const [dragged] = src.entries.splice(idxInSrc, 1);
+                            if (src.entries.length === 0) newState.splice(srcIdx, 1);
+
+                            let tentative = "New Group";
+                            let counter = 1;
+                            while (newState.some((g) => g.name === tentative))
+                                tentative = `New Group ${counter++}`;
+
+                            newState.push({
+                                name: tentative,
+                                entries: [dragged]
+                            });
+
+                            // Update local state but DON'T persist yet
+                            setDndItems(newState);
+                            setPendingNewGroupName(tentative);
+                            setDialogOpenForGroup(tentative);
+                            onNewGroupDrop?.();
+                        }
+                    }
+                }
+            }
+            /* reorder inside same container */
+            else {
+                const overCont = findDndContainer(overIdNow);
+                if (activeCont === overCont) {
+                    const grpIdx = dndItems.findIndex((g) => g.name === activeCont);
+                    if (grpIdx !== -1) {
+                        const group = dndItems[grpIdx];
+                        const oldIdx = group.entries.findIndex(
+                            (e) => e.url === activeIdNow
+                        );
+                        let newIdx = group.entries.findIndex(
+                            (e) => e.url === overIdNow
+                        );
+                        if (newIdx === -1 && overIdNow === activeCont)
+                            newIdx = group.entries.length - 1;
+                        if (
+                            oldIdx !== -1 &&
+                            newIdx !== -1 &&
+                            oldIdx !== newIdx
+                        ) {
+                            const reordered = arrayMove(group.entries, oldIdx, newIdx);
+                            const newState = [...dndItems];
+                            newState[grpIdx] = {
+                                ...group,
+                                entries: reordered
+                            };
+                            setDndItems(newState);
+                            onPersist?.(newState);
+                        }
+                    }
+                } else if (overCont && activeCont !== overCont) {
+                    // Card moved between different groups - use CLEAN pre-drag state
+                    const finalState = cloneItemsForDnd(sourceState);
+
+                    // Find target container from clean state too
+                    const finalOverId = lastOverId.current || overIdNow;
+                    const cleanOverCont = findContainerInState(finalOverId as string, sourceState) || overCont;
+
+                    const srcIdx = finalState.findIndex((g) => g.name === activeCont);
+                    const tgtIdx = finalState.findIndex((g) => g.name === cleanOverCont);
+
+                    if (srcIdx !== -1 && tgtIdx !== -1) {
+                        const src = finalState[srcIdx];
+                        const tgt = finalState[tgtIdx];
+                        const idxInSrc = src.entries.findIndex((e) => e.url === activeIdNow);
+
+                        if (idxInSrc !== -1) {
+                            // Remove from source
+                            const [moved] = src.entries.splice(idxInSrc, 1);
+
+                            // Calculate insertion position in target
+                            const overIsContainer = finalOverId === cleanOverCont;
+                            if (overIsContainer) {
+                                tgt.entries.push(moved);
+                            } else {
+                                const overIdx = tgt.entries.findIndex((e) => e.url === finalOverId);
+                                if (overIdx !== -1) {
+                                    tgt.entries.splice(overIdx, 0, moved);
+                                } else {
+                                    tgt.entries.push(moved);
+                                }
+                            }
+
+                            // Remove empty source group if needed
+                            if (src.entries.length === 0) {
+                                finalState.splice(srcIdx, 1);
+                            }
+
+                            setDndItems(finalState);
+                            onPersist?.(finalState);
+
+                            onCardMovedBetweenGroups?.(moved);
+                        }
+                    }
+                } else if (recentlyMovedToNewContainer.current) {
+                    // This shouldn't happen but log it for debugging
+                    console.error("Move between containers detected but conditions not met", {
+                        activeCont,
+                        overCont,
+                        activeIdNow,
+                        overIdNow
+                    });
+                }
+            }
+        }
+
+        resetDragState();
+    };
+
+    const resetDragState = () => {
+        setDndKitActiveNode(null);
+        setActiveId(null);
+        setActiveIsGroup(false);
+        setCurrentDraggingGroupId(null);
+        setIsDraggingCardOnly(false);
+        recentlyMovedToNewContainer.current = false;
+    };
+
+    const handleDragCancel = () => resetDragState();
+
+    /* ---------------- group rename ---------------- */
+    const handleRenameGroup = (oldName: string, newName: string) => {
+        setDndItems((current) => {
+            const idx = current.findIndex((g) => g.name === oldName);
+            if (idx === -1) return current;
+            if (current.some((g) => g.name === newName && g.name !== oldName))
+                return current;
+
+            const updated = [...current];
+            updated[idx] = {
+                ...updated[idx],
+                name: newName
+            };
+
+            // Persist after successful rename
+            onPersist?.(updated);
+            return updated;
+        });
+
+        // Clear all pending state
+        setPendingNewGroupName(null);
+        setStateBeforeNewGroup(null);
+        setDialogOpenForGroup(null);
+    };
+
+    /* Handle dialog close without renaming */
+    const handleDialogClose = () => {
+        // If there's a pending new group that wasn't renamed, restore previous state
+        if (pendingNewGroupName && dialogOpenForGroup === pendingNewGroupName && stateBeforeNewGroup) {
+            // Restore the state from before the new group was created
+            setDndItems(stateBeforeNewGroup);
+        }
+
+        // Clear all pending state
+        setPendingNewGroupName(null);
+        setStateBeforeNewGroup(null);
+        setDialogOpenForGroup(null);
+    };
+
+    /* ---------------- public API ---------------- */
+    const activeItemForOverlay =
+        disabled || !activeId || activeIsGroup
+            ? null
+            : dndItems.flatMap((g) => g.entries).find((e) => e.url === activeId) || null;
+
+    const activeGroupData =
+        disabled || !activeId || !activeIsGroup
+            ? null
+            : dndItems.find((g) => g.name === activeId) || null;
+
+    return {
+        sensors,
+        collisionDetection,
+        onDragStart: handleDragStart,
+        onDragOver: handleDragOver,
+        onDragEnd: handleDragEnd,
+        onDragCancel: handleDragCancel,
+        dropAnimation: dropAnimationConfig,
+        activeItemForOverlay,
+        activeGroupData,
+        draggingGroupId: currentDraggingGroupId,
+        containers: dndContainers,
+        dndKitActiveNode,
+        isDraggingCardOnly,
+        dialogOpenForGroup,
+        setDialogOpenForGroup,
+        handleRenameGroup,
+        handleDialogClose,
+        isHoveringNewGroupDropZone,
+        setIsHoveringNewGroupDropZone
+    };
+}
+
+export function NewGroupDropZone({
+    disabled,
+    setIsHovering
+}: {
+    disabled: boolean;
+    setIsHovering: (v: boolean) => void;
+}) {
+    const {
+        setNodeRef,
+        isOver
+    } = useDroppable({
+        id: "new-group-drop-zone",
+        disabled
+    });
+    const [isVisible, setIsVisible] = useState(false);
+
+    useDndMonitor({
+        onDragStart({ active }) {
+            if (disabled) return;
+            const tp = active.data.current?.type;
+            setIsVisible(tp === "item");
+        },
+        onDragEnd() {
+            setIsVisible(false);
+        },
+        onDragCancel() {
+            setIsVisible(false);
+        }
+    });
+
+    useEffect(() => {
+        setIsHovering(isOver && isVisible);
+    }, [isOver, isVisible, setIsHovering]);
+
+    if (!isVisible || disabled) return null;
+
+    return (
+        <div
+            ref={setNodeRef}
+            className={cls(
+                "fixed right-8 top-1/2 -translate-y-1/2 w-[200px] h-[120px] border border-dashed rounded-lg flex items-center justify-center transition-all",
+                isOver
+                    ? "bg-surface-accent-100 dark:bg-surface-accent-800 border-surface-300 dark:border-surface-600"
+                    : "bg-surface-50 dark:bg-surface-900 border-surface-200 dark:border-surface-700"
+            )}>
+            <div className="text-center p-4">
+                <span className="block font-medium text-sm">
+                    Drop here to create a new group
+                </span>
+            </div>
+        </div>
+    );
+}