@rebasepro/cms 0.0.1-canary.4d4fb3e

package/src/components/HomePage/ContentHomePage.tsx

@@ -0,0 +1,553 @@
+import type { HomePageSection, NavigationEntry, NavigationGroupMapping, PluginGenericProps } from "@rebasepro/types";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import Fuse from "fuse.js";
+import { Container, SearchBar } from "@rebasepro/ui";
+import { AnalyticsEvent } from "@rebasepro/types";
+import { FavouritesView } from "./FavouritesView";
+import { ErrorBoundary } from "@rebasepro/ui";
+import { NavigationGroup } from "./NavigationGroup";
+import {
+    NavigationGroupDroppable,
+    NewGroupDropZone,
+    SortableNavigationCard,
+    SortableNavigationGroup,
+    useHomePageDnd
+} from "./HomePageDnD";
+import { DndContext, DragOverlay, MeasuringStrategy } from "@dnd-kit/core";
+import { NavigationCardBinding } from "./NavigationCardBinding";
+import { SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable";
+import { restrictToVerticalAxis, restrictToWindowEdges } from "@dnd-kit/modifiers";
+import { RenameGroupDialog } from "./RenameGroupDialog";
+import { toArray } from "@rebasepro/utils";
+import { useCollapsedGroups, useCustomizationController, useTranslation, useSlot } from "@rebasepro/core";
+import { useRestoreScroll } from "@rebasepro/core";
+import { useBreadcrumbsController, useCMSContext } from "../../index";
+
+export const DEFAULT_GROUP_NAME = "Views";
+export const ADMIN_GROUP_NAME = "Admin";
+
+export function ContentHomePage({
+    additionalActions,
+    additionalChildrenStart,
+    additionalChildrenEnd,
+    sections,
+    hiddenGroups
+}: {
+    additionalActions?: React.ReactNode;
+    additionalChildrenStart?: React.ReactNode;
+    additionalChildrenEnd?: React.ReactNode;
+    sections?: HomePageSection[];
+    hiddenGroups?: string[];
+}) {
+
+    const context = useCMSContext();
+    const { navigationStateController } = context;
+    const customizationController = useCustomizationController();
+    const { resolvedSlots } = customizationController;
+    const breadcrumbs = useBreadcrumbsController();
+    const { t } = useTranslation();
+
+    useEffect(() => {
+        breadcrumbs.set({ breadcrumbs: [] });
+    }, [breadcrumbs.set]);
+
+    const {
+        allowDragAndDrop = false,
+        navigationEntries: rawNavigationEntries = [],
+        groups: groupOrderFromNavController = [],
+        onNavigationEntriesUpdate = () => {}
+    } = navigationStateController.topLevelNavigation || {};
+
+    const fuse = useRef<Fuse<NavigationEntry> | null>(null);
+    const [filteredUrls, setFilteredUrls] = useState<string[] | null>(null);
+    const performingSearch = Boolean(filteredUrls);
+
+    // Memoize filtered navigation entries to prevent unnecessary recalculations
+    const filteredNavigationEntries = useMemo(() => {
+        return filteredUrls
+            ? rawNavigationEntries.filter((e) => filteredUrls.includes(e.url))
+            : rawNavigationEntries;
+    }, [filteredUrls, rawNavigationEntries]);
+
+    useEffect(() => {
+        fuse.current = new Fuse(rawNavigationEntries, {
+            keys: ["name", "description", "group", "path"]
+        });
+    }, [rawNavigationEntries]);
+
+    const updateSearch = useCallback((v?: string) => {
+        if (!v?.trim()) {
+            setFilteredUrls(null);
+            return;
+        }
+        const results = fuse.current?.search(v.trim());
+        setFilteredUrls(results ? results.map((x) => x.item.url) : []);
+    }, []);
+
+    /* ───────────────────────────────────────────────────────────────
+       Build groups (all items) + isolate Admin
+       ─────────────────────────────────────────────────────────────── */
+    const [items, setItems] = useState<
+        { name: string; entries: NavigationEntry[] }[]
+    >([]);
+    const [adminGroupData, setAdminGroupData] = useState<{
+        name: string;
+        entries: NavigationEntry[];
+    } | null>(null);
+
+    // Flag to prevent useEffect from overwriting local DnD state
+    const isDndDirtyRef = useRef(false);
+    const dndDirtyTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+    // Memoize the processed groups to avoid unnecessary recalculations
+    const processedGroups = useMemo(() => {
+        const src = filteredNavigationEntries;
+        const entriesByGroup: Record<string, NavigationEntry[]> = {};
+
+        src.forEach((e) => {
+            const g =
+                e.type === "admin"
+                    ? ADMIN_GROUP_NAME
+                    : e.group ?? DEFAULT_GROUP_NAME;
+            (entriesByGroup[g] ??= []).push(e);
+        });
+
+        // Check if there are custom additional card components from plugins
+        const hasPluginAdditionalCards = customizationController.resolvedSlots.some(s => s.slot === "home.cards");
+
+        let allProcessed: { name: string; entries: NavigationEntry[] }[];
+
+        if (performingSearch) {
+            const ordered = [
+                ...new Set(src.map((e) => e.group ?? DEFAULT_GROUP_NAME))
+            ];
+            allProcessed = ordered
+                .filter(g => g === DEFAULT_GROUP_NAME || g === ADMIN_GROUP_NAME)
+                .map((name) => ({
+                    name,
+                    entries: entriesByGroup[name] || []
+                }))
+                .filter((g) => g.entries.length);
+        } else {
+            const filteredGroupOrder: string[] = groupOrderFromNavController.filter(g => g === DEFAULT_GROUP_NAME || g === ADMIN_GROUP_NAME);
+
+            allProcessed = filteredGroupOrder.map((g) => ({
+                name: g,
+                entries: entriesByGroup[g] || []
+            }));
+            Object.keys(entriesByGroup).forEach((g) => {
+                const shouldInclude = g === DEFAULT_GROUP_NAME || g === ADMIN_GROUP_NAME;
+                if (!filteredGroupOrder.includes(g) && shouldInclude)
+                    allProcessed.push({
+                        name: g,
+                        entries: entriesByGroup[g]
+                    });
+            });
+
+            // Ensure default group exists if there are plugin additional cards but no collections
+            if (hasPluginAdditionalCards && !allProcessed.some(g => g.name === DEFAULT_GROUP_NAME)) {
+                allProcessed.push({
+                    name: DEFAULT_GROUP_NAME,
+                    entries: []
+                });
+            }
+
+            allProcessed = allProcessed.filter(
+                (g) =>
+                    g.entries.length ||
+                    (g.name === DEFAULT_GROUP_NAME && hasPluginAdditionalCards)
+            );
+        }
+
+        const admin = allProcessed.find((g) => g.name === ADMIN_GROUP_NAME);
+        return {
+            adminGroupData: admin || null,
+            items: allProcessed.filter((g) => g.name !== ADMIN_GROUP_NAME && !hiddenGroups?.includes(g.name))
+        };
+    }, [filteredNavigationEntries, performingSearch, groupOrderFromNavController, customizationController.resolvedSlots, hiddenGroups]);
+
+    // Update state only when processedGroups actually changes
+    // Skip update if DnD just made a local change (dirty flag is set)
+    useEffect(() => {
+        if (isDndDirtyRef.current) {
+            // DnD just updated the state, skip this sync
+            return;
+        }
+        setAdminGroupData(processedGroups.adminGroupData);
+        setItems(processedGroups.items);
+    }, [processedGroups]);
+
+    /* ───────────────────────────────────────────────────────────────
+       Local update vs. persistence helpers
+       ─────────────────────────────────────────────────────────────── */
+    const updateItems = (
+        updater:
+            | { name: string; entries: NavigationEntry[] }[]
+            | ((
+                prev: { name: string; entries: NavigationEntry[] }[]
+            ) => { name: string; entries: NavigationEntry[] }[])
+    ) => {
+        setItems(updater); // local only
+    };
+
+    const persistNavigationGroups = (
+        latest: { name: string; entries: NavigationEntry[] }[]
+    ) => {
+        // Set dirty flag to prevent useEffect from overwriting local state
+        isDndDirtyRef.current = true;
+
+        // Clear any existing timeout
+        if (dndDirtyTimeoutRef.current) {
+            clearTimeout(dndDirtyTimeoutRef.current);
+        }
+
+        // Clear dirty flag after a delay to allow navigation to update
+        dndDirtyTimeoutRef.current = setTimeout(() => {
+            isDndDirtyRef.current = false;
+        }, 1000);
+
+        // Map ALL groups including "Views"
+        const draggable: NavigationGroupMapping[] = latest.map((g) => ({
+            name: g.name,
+            entries: g.entries.map((e) => e.slug)
+        }));
+
+        const all: NavigationGroupMapping[] = adminGroupData
+            ? [
+                ...draggable,
+                {
+                    name: adminGroupData.name,
+                    entries: adminGroupData.entries.map((e) => e.slug)
+                }
+            ]
+            : draggable;
+
+        onNavigationEntriesUpdate(all);
+    };
+
+    // Use custom hook for collapsed groups with localStorage persistence
+    const groupNames = useMemo(() => [
+        ...items.map(item => item.name),
+        ...(adminGroupData ? [adminGroupData.name] : [])
+    ], [items, adminGroupData]);
+
+    const { isGroupCollapsed, toggleGroupCollapsed } = useCollapsedGroups(groupNames, "home");
+
+    const {
+        sensors,
+        collisionDetection,
+        onDragStart,
+        onDragOver,
+        onDragEnd,
+        dropAnimation,
+        activeItemForOverlay,
+        activeGroupData,
+        draggingGroupId,
+        containers,
+        dndKitActiveNode,
+        onDragCancel,
+        isDraggingCardOnly,
+        dialogOpenForGroup,
+        setDialogOpenForGroup,
+        handleRenameGroup,
+        handleDialogClose,
+        isHoveringNewGroupDropZone,
+        setIsHoveringNewGroupDropZone
+    } = useHomePageDnd({
+        items,
+        setItems: updateItems,
+        disabled: !allowDragAndDrop || performingSearch,
+        onPersist: persistNavigationGroups,
+        onGroupMoved: (g) =>
+            context.analyticsController?.onAnalyticsEvent?.("home_move_group", {
+                name: g
+            }),
+        onCardMovedBetweenGroups: (card) =>
+            context.analyticsController?.onAnalyticsEvent?.("home_move_card", {
+                id: card.id
+            }),
+        onNewGroupDrop: () =>
+            context.analyticsController?.onAnalyticsEvent?.(
+                "home_drop_new_group"
+            )
+    });
+
+    const {
+        containerRef,
+        direction
+    } = useRestoreScroll();
+
+    const dndDisabled = !allowDragAndDrop || performingSearch;
+
+    const dndModifiers = dndKitActiveNode?.data.current?.type === "group"
+        ? [restrictToVerticalAxis, restrictToWindowEdges]
+        : [restrictToWindowEdges];
+
+    const sectionProps: PluginGenericProps = { context };
+    const additionalPluginChildrenStart = useSlot("home.children.start", sectionProps);
+    const additionalPluginChildrenEnd = useSlot("home.children.end", sectionProps);
+    const additionalPluginActions = useSlot("home.actions", sectionProps);
+
+    // Pre-compute home.cards slot contributions (cannot call useSlot inside .map loop)
+    const homeCardContributions = useMemo(() => {
+        return resolvedSlots
+            .filter(s => s.slot === "home.cards")
+            .sort((a, b) => (a.order ?? 50) - (b.order ?? 50));
+    }, [resolvedSlots]);
+
+    /* ───────────────────────────────────────────────────────────────
+       Render
+       ─────────────────────────────────────────────────────────────── */
+    return (
+        <div ref={containerRef} className="py-2 overflow-auto h-full w-full">
+            <Container maxWidth="6xl">
+                {/* search & actions */}
+                <div
+                    className="w-full sticky py-4 transition-all duration-400 ease-in-out top-0 z-10 flex flex-row gap-4"
+                    style={{ top: direction === "down" ? -84 : 0 }}
+                >
+                    <SearchBar
+                        onTextSearch={updateSearch}
+                        placeholder={t("search_collections")}
+                        autoFocus
+                        innerClassName="w-full"
+                        className="w-full grow"
+                    />
+                    {additionalActions}
+                    {additionalPluginActions}
+                </div>
+
+                <FavouritesView hidden={performingSearch} />
+
+                {additionalChildrenStart}
+                {additionalPluginChildrenStart}
+
+                {/* ─────── DND context ─────── */}
+                <DndContext
+                    sensors={sensors}
+                    collisionDetection={collisionDetection}
+                    measuring={{
+                        droppable: {
+                            strategy: MeasuringStrategy.Always,
+                            frequency: 500
+                        }
+                    }}
+                    onDragStart={onDragStart}
+                    onDragOver={onDragOver}
+                    onDragEnd={onDragEnd}
+                    onDragCancel={onDragCancel}
+                    modifiers={dndModifiers}
+                >
+                    <SortableContext
+                        key={JSON.stringify(containers)}
+                        items={containers}
+                        strategy={verticalListSortingStrategy}
+                    >
+                        {items.map((groupData, groupIndex) => {
+                            const groupKey = groupData.name;
+                            const entriesInGroup = groupData.entries;
+
+                            const homeCardsProps = {
+                                group:
+                                    groupKey === DEFAULT_GROUP_NAME
+                                        ? undefined
+                                        : groupKey,
+                                context
+                            };
+                            // Render home.cards contributions inline (no hook call inside loop)
+                            const additionalCards = homeCardContributions.map((s, i) => (
+                                <ErrorBoundary key={`home_cards_${groupKey}_${i}`}>
+                                    <s.Component {...homeCardsProps} {...(s.props ?? {})} />
+                                </ErrorBoundary>
+                            ));
+
+                            if (
+                                entriesInGroup.length === 0 &&
+                                (additionalCards.length === 0 || performingSearch)
+                            )
+                                return null;
+
+                            return (
+                                <SortableNavigationGroup
+                                    key={`group-${groupIndex}`}
+                                    groupName={groupKey}
+                                    disabled={dndDisabled}
+                                >
+                                    <NavigationGroup
+                                        group={
+                                            groupKey === DEFAULT_GROUP_NAME
+                                                ? undefined
+                                                : groupKey
+                                        }
+                                        minimised={
+                                            draggingGroupId === groupKey &&
+                                            !isDraggingCardOnly
+                                        }
+                                        isPotentialCardDropTarget={
+                                            isDraggingCardOnly
+                                        }
+                                        dndDisabled={dndDisabled}
+                                        onEditGroup={() => {
+                                            if (dndDisabled) return;
+                                            setDialogOpenForGroup(groupKey);
+                                        }}
+                                        collapsed={isGroupCollapsed(groupKey)}
+                                        onToggleCollapsed={() => toggleGroupCollapsed(groupKey)}
+                                    >
+                                        <NavigationGroupDroppable
+                                            id={groupKey}
+                                            itemIds={entriesInGroup.map(
+                                                (e) => e.url
+                                            )}
+                                            isPotentialCardDropTarget={
+                                                isDraggingCardOnly
+                                            }
+                                        >
+                                            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 ">
+                                                {entriesInGroup.map(
+                                                    (entry) => (
+                                                        <SortableNavigationCard
+                                                            key={entry.url}
+                                                            entry={entry}
+                                                            onClick={() => {
+                                                                let event: AnalyticsEvent =
+                                                                    "unmapped_event";
+                                                                if (
+                                                                    entry.type ===
+                                                                    "collection"
+                                                                )
+                                                                    event =
+                                                                        "home_navigate_to_collection";
+                                                                else if (
+                                                                    entry.type ===
+                                                                    "view"
+                                                                )
+                                                                    event =
+                                                                        "home_navigate_to_view";
+                                                                else if (
+                                                                    entry.type ===
+                                                                    "admin"
+                                                                )
+                                                                    event =
+                                                                        "home_navigate_to_admin_view";
+
+                                                                context.analyticsController?.onAnalyticsEvent?.(
+                                                                    event,
+                                                                    {
+                                                                        path: entry.slug
+                                                                    }
+                                                                );
+                                                            }}
+                                                        />
+                                                    )
+                                                )}
+                                                {!performingSearch &&
+                                                    groupKey.toLowerCase() !==
+                                                    ADMIN_GROUP_NAME.toLowerCase() &&
+                                                    additionalCards}
+                                            </div>
+                                        </NavigationGroupDroppable>
+                                    </NavigationGroup>
+                                </SortableNavigationGroup>
+                            );
+                        })}
+                    </SortableContext>
+
+                    <NewGroupDropZone
+                        disabled={dndDisabled}
+                        setIsHovering={setIsHoveringNewGroupDropZone}
+                    />
+
+                    <DragOverlay adjustScale={false} dropAnimation={dropAnimation}>
+                        {activeGroupData &&
+                            draggingGroupId === activeGroupData.name ? (
+                            <div
+                                className="rounded-lg bg-transparent"
+                                style={{
+                                    padding: 0,
+                                    margin: 0
+                                }}
+                            >
+                                <NavigationGroup
+                                    group={
+                                        activeGroupData.name ===
+                                            DEFAULT_GROUP_NAME
+                                            ? undefined
+                                            : activeGroupData.name
+                                    }
+                                    isPreview={false}
+                                    minimised
+                                />
+                            </div>
+                        ) : activeItemForOverlay ? (
+                            <NavigationCardBinding
+                                {...activeItemForOverlay}
+                                shrink={isHoveringNewGroupDropZone}
+                            />
+                        ) : null}
+                    </DragOverlay>
+                </DndContext>
+
+                {!performingSearch && adminGroupData && (
+                    <NavigationGroup
+                        group={adminGroupData.name}
+                        collapsed={isGroupCollapsed(adminGroupData.name)}
+                        onToggleCollapsed={() => toggleGroupCollapsed(adminGroupData.name)}
+                    >
+                        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 ">
+                            {adminGroupData.entries.map((entry) => (
+                                <NavigationCardBinding
+                                    key={entry.url}
+                                    {...entry}
+                                    onClick={() => {
+                                        let event: AnalyticsEvent =
+                                            "unmapped_event";
+                                        if (entry.type === "collection")
+                                            event =
+                                                "home_navigate_to_collection";
+                                        else if (entry.type === "view")
+                                            event = "home_navigate_to_view";
+                                        else if (entry.type === "admin")
+                                            event =
+                                                "home_navigate_to_admin_view";
+
+                                        context.analyticsController?.onAnalyticsEvent?.(
+                                            event,
+                                            { path: entry.slug }
+                                        );
+                                    }}
+                                />
+                            ))}
+                        </div>
+                    </NavigationGroup>
+                )}
+
+                {sections && sections.map((section) => (
+                    <NavigationGroup
+                        key={section.key}
+                        group={section.title}
+                    >
+                        {section.children}
+                    </NavigationGroup>
+                ))}
+
+                {additionalPluginChildrenEnd}
+                {additionalChildrenEnd}
+            </Container>
+
+            {dialogOpenForGroup && (
+                <RenameGroupDialog
+                    open
+                    initialName={dialogOpenForGroup}
+                    existingGroupNames={items
+                        .map((g) => g.name)
+                        .filter((n) => n !== dialogOpenForGroup)}
+                    onClose={handleDialogClose}
+                    onRename={(newName) => {
+                        handleRenameGroup(dialogOpenForGroup, newName);
+                    }}
+                />
+            )}
+        </div>
+    );
+}

package/src/components/HomePage/FavouritesView.tsx

@@ -0,0 +1,60 @@
+import type { NavigationEntry } from "@rebasepro/types";
+import { useNavigate } from "react-router-dom";
+;
+import { Chip, Collapse, StarIcon } from "@rebasepro/ui";
+import { useUserConfigurationPersistence } from "@rebasepro/core";
+import { useNavigationStateController } from "../../index";
+
+function NavigationChip({ entry }: { entry: NavigationEntry }) {
+
+    const navigate = useNavigate();
+    const userConfigurationPersistence = useUserConfigurationPersistence();
+
+    if (!userConfigurationPersistence)
+        return null;
+
+    const favourite = userConfigurationPersistence.favouritePaths.includes(entry.slug);
+    const onIconClick = (e: React.SyntheticEvent) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (favourite) {
+            userConfigurationPersistence.setFavouritePaths(
+                userConfigurationPersistence.favouritePaths.filter(p => p !== entry.slug)
+            );
+        } else {
+            userConfigurationPersistence.setFavouritePaths(
+                [...userConfigurationPersistence.favouritePaths, entry.slug]
+            );
+        }
+    };
+    return <Chip
+        key={entry.slug}
+        onClick={() => navigate(entry.url)}
+        icon={<StarIcon
+            onClick={onIconClick}
+            size={18}
+            className={favourite ? "text-secondary" : "text-surface-400 dark:text-surface-500"} />
+        }>
+        {entry.name}
+    </Chip>;
+}
+
+export function FavouritesView({ hidden }: { hidden: boolean }) {
+
+    const navigationStateController = useNavigationStateController();
+    const userConfigurationPersistence = useUserConfigurationPersistence();
+
+    if (!userConfigurationPersistence)
+        return null;
+
+    const favouriteCollections = (userConfigurationPersistence?.favouritePaths ?? [])
+        .map((path) => navigationStateController.topLevelNavigation?.navigationEntries.find((entry) => entry.slug === path))
+        .filter(Boolean) as NavigationEntry[];
+
+    return <Collapse in={favouriteCollections.length > 0}>
+        <div className="flex flex-row flex-wrap gap-2 pb-2 min-h-[32px]">
+            {favouriteCollections.map((entry) => <NavigationChip key={entry.slug}
+                entry={entry} />)}
+        </div>
+    </Collapse>;
+}