@firecms/core 3.0.0-canary.29 → 3.0.0-canary.292

package/src/hooks/useBuildNavigationController.tsx

@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import equal from "react-fast-compare"
+import { useBlocker, useNavigate } from "react-router-dom";
 
 import {
     AuthController,
@@ -9,10 +10,13 @@ import {
     EntityCollection,
     EntityCollectionsBuilder,
     EntityReference,
+    FireCMSPlugin,
+    NavigationBlocker,
     NavigationController,
+    NavigationEntry,
+    NavigationGroupMapping,
+    NavigationResult,
     PermissionsBuilder,
-    TopNavigationEntry,
-    TopNavigationResult,
     User,
     UserConfigurationPersistence
 } from "../types";
@@ -20,6 +24,7 @@ import {
     applyPermissionsFunctionIfEmpty,
     getCollectionByPathOrId,
     mergeDeep,
+    removeFunctions,
     removeInitialAndTrailingSlashes,
     resolveCollectionPathIds,
     resolvePermissions
@@ -29,28 +34,76 @@ import { getParentReferencesFromPath } from "../util/parent_references_from_path
 const DEFAULT_BASE_PATH = "/";
 const DEFAULT_COLLECTION_PATH = "/c";
 
-type BuildNavigationContextProps<EC extends EntityCollection, UserType extends User> = {
+export const NAVIGATION_DEFAULT_GROUP_NAME = "Views";
+export const NAVIGATION_ADMIN_GROUP_NAME = "Admin";
+
+export type BuildNavigationContextProps<EC extends EntityCollection, USER extends User> = {
+    /**
+     * Base path for the CMS, used to build the all the URLs.
+     * Defaults to "/".
+     */
     basePath?: string,
+    /**
+     * Base path for the collections, used to build the collection URLs.
+     * Defaults to "c" (e.g. "/c/products").
+     */
     baseCollectionPath?: string,
-    authController: AuthController<UserType>;
+    /**
+     * The auth controller used to manage the user authentication and permissions.
+     */
+    authController: AuthController<USER>;
+    /**
+     * The collections to be used in the CMS.
+     * This can be a static array of collections or a function that returns a promise
+     * resolving to an array of collections.
+     */
     collections?: EC[] | EntityCollectionsBuilder<EC>;
+    /**
+     * Optional permissions builder to be applied to the collections.
+     * If not provided, the permissions will be resolved from the collection configuration.
+     */
     collectionPermissions?: PermissionsBuilder;
+    /**
+     * Custom views to be added to the CMS, these will be available in the main navigation.
+     * This can be a static array of views or a function that returns a promise
+     * resolving to an array of views.
+     */
     views?: CMSView[] | CMSViewsBuilder;
+    /**
+     * Custom views to be added to the CMS admin navigation.
+     * This can be a static array of views or a function that returns a promise
+     * resolving to an array of views.
+     */
     adminViews?: CMSView[] | CMSViewsBuilder;
-    viewsOrder?: string[];
+    /**
+     * Controller for storing user preferences.
+     */
     userConfigPersistence?: UserConfigurationPersistence;
+    /**
+     * Delegate for data source operations, used to resolve collections and views.
+     */
     dataSourceDelegate: DataSourceDelegate;
     /**
-     * Use this method to inject collections to the CMS.
-     * You receive the current collections as a parameter, and you can return
-     * a new list of collections.
-     * @see {@link joinCollectionLists}
-     * @param collections
+     * Plugins to be used in the CMS.
+     */
+    plugins?: FireCMSPlugin[];
+    /**
+     * Used to define the name of groups and order of the navigation entries.
+     */
+    navigationGroupMappings?: NavigationGroupMapping[];
+    /**
+     * If true, the navigation logic will not be updated until this flag is false
+     */
+    disabled?: boolean;
+
+    /**
+     * @deprecated
+     * Use `navigationGroupMappings` instead.
      */
-    injectCollections?: (collections: EntityCollection[]) => EntityCollection[];
+    viewsOrder?: string[];
 };
 
-export function useBuildNavigationController<EC extends EntityCollection, UserType extends User>(props: BuildNavigationContextProps<EC, UserType>): NavigationController {
+export function useBuildNavigationController<EC extends EntityCollection, USER extends User>(props: BuildNavigationContextProps<EC, USER>): NavigationController {
     const {
         basePath = DEFAULT_BASE_PATH,
         baseCollectionPath = DEFAULT_COLLECTION_PATH,
@@ -60,18 +113,23 @@ export function useBuildNavigationController<EC extends EntityCollection, UserTy
         views: viewsProp,
         adminViews: adminViewsProp,
         viewsOrder,
+        plugins,
         userConfigPersistence,
         dataSourceDelegate,
-        injectCollections
+        disabled,
+        navigationGroupMappings
     } = props;
 
+    const navigate = useNavigate();
+
     const collectionsRef = useRef<EntityCollection[] | undefined>();
     const viewsRef = useRef<CMSView[] | undefined>();
     const adminViewsRef = useRef<CMSView[] | undefined>();
+    const navigationEntriesOrderRef = useRef<string[] | undefined>();
 
     const [initialised, setInitialised] = useState<boolean>(false);
 
-    const [topLevelNavigation, setTopLevelNavigation] = useState<TopNavigationResult | undefined>(undefined);
+    const [topLevelNavigation, setTopLevelNavigation] = useState<NavigationResult | undefined>(undefined);
     const [navigationLoading, setNavigationLoading] = useState<boolean>(true);
     const [navigationLoadingError, setNavigationLoadingError] = useState<Error | undefined>(undefined);
 
@@ -88,118 +146,246 @@ export function useBuildNavigationController<EC extends EntityCollection, UserTy
     const buildUrlCollectionPath = useCallback((path: string): string => `${removeInitialAndTrailingSlashes(baseCollectionPath)}/${encodePath(path)}`,
         [baseCollectionPath]);
 
-    const computeTopNavigation = useCallback((collections: EntityCollection[], views: CMSView[], adminViews: CMSView[], viewsOrder?: string[]): TopNavigationResult => {
-        let navigationEntries: TopNavigationEntry[] = [
-            ...(collections ?? []).map(collection => (!collection.hideFromNavigation
-                ? ({
-                    url: buildUrlCollectionPath(collection.id ?? collection.path),
+    const allPluginGroups = plugins?.flatMap(plugin => plugin.homePage?.navigationEntries ? plugin.homePage.navigationEntries.map(e => e.name) : []) ?? [];
+    const pluginGroups = [...new Set(allPluginGroups)];
+
+    const computeTopNavigation = useCallback((collections: EntityCollection[], views: CMSView[], adminViews: CMSView[], viewsOrder?: string[], navigationGroupMappingsOverride?: NavigationGroupMapping[], onNavigationEntriesUpdateCallback?: (entries: NavigationGroupMapping[]) => void): NavigationResult => {
+
+        const finalNavigationGroupMappings: NavigationGroupMapping[] = computeNavigationGroups({
+            navigationGroupMappings: navigationGroupMappingsOverride ?? navigationGroupMappings,
+            collections,
+            views,
+            plugins: plugins
+        });
+
+        const allPluginNavigationEntries = finalNavigationGroupMappings.map((g) => g.entries).flat() ?? [];
+        const navigationEntriesOrder = ([...new Set(allPluginNavigationEntries)]);
+
+        let navigationEntries: NavigationEntry[] = [
+            ...(collections ?? []).reduce((acc, collection) => {
+                if (collection.hideFromNavigation) return acc;
+
+                const pathKey = collection.id ?? collection.path;
+                let groupName = getGroup(collection); // Initial group
+
+                if (finalNavigationGroupMappings) {
+                    for (const pluginGroupDef of finalNavigationGroupMappings) {
+                        if (pluginGroupDef.entries.includes(pathKey)) {
+                            groupName = pluginGroupDef.name;
+                            break;
+                        }
+                    }
+                }
+
+                acc.push({
+                    id: `collection:${pathKey}`,
+                    url: buildUrlCollectionPath(pathKey),
                     type: "collection",
                     name: collection.name.trim(),
-                    path: collection.id ?? collection.path,
+                    path: pathKey,
                     collection,
                     description: collection.description?.trim(),
-                    group: getGroup(collection)
-                } satisfies TopNavigationEntry)
-                : undefined))
-                .filter(Boolean) as TopNavigationEntry[],
-            ...(views ?? []).map(view =>
-                !view.hideFromNavigation
-                    ? ({
-                        url: buildCMSUrlPath(Array.isArray(view.path) ? view.path[0] : view.path),
-                        name: view.name.trim(),
-                        type: "view",
-                        path: view.path,
-                        view,
-                        description: view.description?.trim(),
-                        group: getGroup(view)
-                    } satisfies TopNavigationEntry)
-                    : undefined)
-                .filter(Boolean) as TopNavigationEntry[],
-            ...(adminViews ?? []).map(view =>
-                !view.hideFromNavigation
-                    ? ({
-                        url: buildCMSUrlPath(Array.isArray(view.path) ? view.path[0] : view.path),
-                        name: view.name.trim(),
-                        type: "admin",
-                        path: view.path,
-                        view,
-                        description: view.description?.trim(),
-                        group: "Admin"
-                    } satisfies TopNavigationEntry)
-                    : undefined)
-                .filter(Boolean) as TopNavigationEntry[]
+                    group: groupName ?? NAVIGATION_DEFAULT_GROUP_NAME
+                });
+                return acc;
+            }, [] as NavigationEntry[]),
+
+            ...(views ?? []).reduce((acc, view) => {
+                if (view.hideFromNavigation) return acc;
+
+                const pathKey = view.path;
+                let groupName = getGroup(view); // Initial group
+
+                if (finalNavigationGroupMappings) {
+                    for (const pluginGroupDef of finalNavigationGroupMappings) {
+                        if (pluginGroupDef.entries.includes(pathKey)) {
+                            groupName = pluginGroupDef.name;
+                            break;
+                        }
+                    }
+                }
+
+                acc.push({
+                    id: `view:${pathKey}`,
+                    url: buildCMSUrlPath(pathKey),
+                    name: view.name.trim(),
+                    type: "view",
+                    path: view.path,
+                    view,
+                    description: view.description?.trim(),
+                    group: groupName ?? NAVIGATION_DEFAULT_GROUP_NAME
+                });
+                return acc;
+            }, [] as NavigationEntry[]),
+
+            ...(adminViews ?? []).reduce((acc, view) => {
+                if (view.hideFromNavigation) return acc;
+
+                const pathKey = view.path;
+                const groupName = NAVIGATION_ADMIN_GROUP_NAME;
+
+                acc.push({
+                    id: `admin:${pathKey}`,
+                    url: buildCMSUrlPath(pathKey),
+                    name: view.name.trim(),
+                    type: "admin",
+                    path: view.path,
+                    view,
+                    description: view.description?.trim(),
+                    group: groupName
+                });
+                return acc;
+            }, [] as NavigationEntry[])
         ];
 
-        if (viewsOrder) {
+        const groupOrderValue = (groupName?: string): number => {
+            if (groupName === NAVIGATION_ADMIN_GROUP_NAME) return 1;
+            return 0; // Other groups
+        };
+
+        navigationEntries = navigationEntries.sort((a, b) => {
+            return groupOrderValue(a.group) - groupOrderValue(b.group);
+        });
+
+        const usedViewsOrder = viewsOrder ?? navigationEntriesOrder;
+        if (usedViewsOrder) {
             navigationEntries = navigationEntries.sort((a, b) => {
-                const aIndex = viewsOrder.indexOf(a.path);
-                const bIndex = viewsOrder.indexOf(b.path);
-                if (aIndex === -1 && bIndex === -1) {
-                    return 0;
-                }
-                if (aIndex === -1) {
-                    return 1;
-                }
-                if (bIndex === -1) {
-                    return -1;
-                }
+                const getSortPath = (navEntry: NavigationEntry) => typeof navEntry.path === "string" ? navEntry.path : navEntry.path[0];
+                const aIndex = usedViewsOrder.indexOf(getSortPath(a));
+                const bIndex = usedViewsOrder.indexOf(getSortPath(b));
+                if (aIndex === -1 && bIndex === -1) return 0;
+                if (aIndex === -1) return 1;
+                if (bIndex === -1) return -1;
                 return aIndex - bIndex;
             });
         }
 
-        const groups: string[] = Object.values(navigationEntries)
+        const collectedGroupsFromEntries = navigationEntries
             .map(e => e.group)
-            .filter(Boolean)
-            .filter((value, index, array) => array.indexOf(value) === index) as string[];
+            .filter(Boolean) as string[];
+
+        // Preserve order from finalNavigationGroupMappings (persisted order)
+        const groupsFromMappings = finalNavigationGroupMappings.map(g => g.name);
+
+        // Add any additional groups not in mappings
+        const additionalGroups = collectedGroupsFromEntries.filter(g => !groupsFromMappings.includes(g));
+
+        const allDefinedGroups = [
+            ...(pluginGroups ?? []),
+            ...groupsFromMappings,
+            ...additionalGroups
+        ];
+
+        // Remove duplicates while preserving order, then separate admin to the end
+        const uniqueGroupsArray = [...new Set(allDefinedGroups)];
+        const adminGroups = uniqueGroupsArray.filter(g => g === NAVIGATION_ADMIN_GROUP_NAME);
+        const nonAdminGroups = uniqueGroupsArray.filter(g => g !== NAVIGATION_ADMIN_GROUP_NAME);
+        const uniqueGroups = [...nonAdminGroups, ...adminGroups];
 
         return {
+            allowDragAndDrop: plugins?.some(plugin => plugin.homePage?.allowDragAndDrop) ?? false,
             navigationEntries,
-            groups
+            groups: uniqueGroups,
+            onNavigationEntriesUpdate: onNavigationEntriesUpdateCallback!,
         };
-    }, [buildCMSUrlPath, buildUrlCollectionPath]);
+    }, [navigationGroupMappings, buildCMSUrlPath, buildUrlCollectionPath, pluginGroups]);
+
+    const onNavigationEntriesOrderUpdate = useCallback((entries: NavigationGroupMapping[]) => {
+        if (!plugins) {
+            return;
+        }
+        // remove all groups that have no entries
+        const filteredEntries = entries.filter(entry => entry.entries.length > 0);
+
+        // Immediately update the local topLevelNavigation with new mappings
+        if (collectionsRef.current && viewsRef.current) {
+            const updatedNav = computeTopNavigation(
+                collectionsRef.current,
+                viewsRef.current,
+                adminViewsRef.current ?? [],
+                viewsOrder,
+                filteredEntries,
+                onNavigationEntriesOrderUpdate
+            );
+            setTopLevelNavigation(updatedNav);
+        }
+
+        // Then persist to backend
+        if (plugins.some(plugin => plugin.homePage?.onNavigationEntriesUpdate)) {
+            plugins.forEach(plugin => {
+                if (plugin.homePage?.onNavigationEntriesUpdate) {
+                    plugin.homePage.onNavigationEntriesUpdate(filteredEntries);
+                }
+            });
+        }
+
+    }, [plugins, computeTopNavigation, viewsOrder]);
 
     const refreshNavigation = useCallback(async () => {
 
-        if (authController.initialLoading)
+        if (disabled || authController.initialLoading)
             return;
 
+        console.debug("Refreshing navigation");
+
         try {
 
             const [resolvedCollections = [], resolvedViews, resolvedAdminViews = []] = await Promise.all([
-                    resolveCollections(collectionsProp, collectionPermissions, authController, dataSourceDelegate, injectCollections),
+                    resolveCollections(collectionsProp, collectionPermissions, authController, dataSourceDelegate, plugins),
                     resolveCMSViews(viewsProp, authController, dataSourceDelegate),
                     resolveCMSViews(adminViewsProp, authController, dataSourceDelegate)
                 ]
             );
 
-            if (
-                !equal(collectionsRef.current, resolvedCollections) ||
-                !equal(viewsRef.current, resolvedViews) ||
-                !equal(adminViewsRef.current, resolvedAdminViews) ||
-                !equal(topLevelNavigation, computeTopNavigation(resolvedCollections, resolvedViews, resolvedAdminViews, viewsOrder))
-            ) {
+            const computedTopLevelNav = computeTopNavigation(resolvedCollections, resolvedViews, resolvedAdminViews, viewsOrder, undefined, onNavigationEntriesOrderUpdate);
+
+            let shouldUpdateTopLevelNav = false;
+            if (!areCollectionListsEqual(collectionsRef.current ?? [], resolvedCollections)) {
+                collectionsRef.current = resolvedCollections;
+                console.debug("Collections have changed", resolvedCollections);
+                shouldUpdateTopLevelNav = true;
+            }
+            if (collectionsRef.current === undefined) {
                 collectionsRef.current = resolvedCollections;
+                shouldUpdateTopLevelNav = true;
+            }
+            if (!equal(viewsRef.current, resolvedViews)) {
                 viewsRef.current = resolvedViews;
+                shouldUpdateTopLevelNav = true;
+            }
+            if (!equal(adminViewsRef.current, resolvedAdminViews)) {
                 adminViewsRef.current = resolvedAdminViews;
-                setTopLevelNavigation(computeTopNavigation(resolvedCollections ?? [], resolvedViews, resolvedAdminViews, viewsOrder));
+                shouldUpdateTopLevelNav = true;
+            }
+
+            const navigationEntriesOrder = computedTopLevelNav.navigationEntries.map(e => e.id);
+            if (!equal(navigationEntriesOrderRef.current, navigationEntriesOrder)) {
+                navigationEntriesOrderRef.current = navigationEntriesOrder;
+                shouldUpdateTopLevelNav = true;
+            }
+
+            if (shouldUpdateTopLevelNav && !equal(topLevelNavigation, computedTopLevelNav)) {
+                setTopLevelNavigation(computedTopLevelNav);
             }
         } catch (e) {
             console.error(e);
             setNavigationLoadingError(e as any);
         }
 
-        setNavigationLoading(false);
-        setInitialised(true);
+        if (navigationLoading)
+            setNavigationLoading(false);
+        if (!initialised)
+            setInitialised(true);
 
     }, [
         collectionsProp,
         collectionPermissions,
         authController.user,
         authController.initialLoading,
+        disabled,
         viewsProp,
         adminViewsProp,
         computeTopNavigation,
-        injectCollections
     ]);
 
     useEffect(() => {
@@ -208,7 +394,6 @@ export function useBuildNavigationController<EC extends EntityCollection, UserTy
 
     const getCollection = useCallback((
         idOrPath: string,
-        entityId?: string,
         includeUserOverride = false
     ): EC | undefined => {
         const collections = collectionsRef.current;
@@ -218,8 +403,7 @@ export function useBuildNavigationController<EC extends EntityCollection, UserTy
         const baseCollection = getCollectionByPathOrId(removeInitialAndTrailingSlashes(idOrPath), collections);
 
         const userOverride = includeUserOverride ? userConfigPersistence?.getCollectionConfig(idOrPath) : undefined;
-
-        const overriddenCollection = baseCollection ? mergeDeep(baseCollection, userOverride) : undefined;
+        const overriddenCollection = baseCollection ? mergeDeep(baseCollection, userOverride ?? {}) : undefined;
 
         let result: Partial<EntityCollection> | undefined = overriddenCollection;
 
@@ -241,12 +425,22 @@ export function useBuildNavigationController<EC extends EntityCollection, UserTy
 
     }, [userConfigPersistence]);
 
+    const getCollectionById = useCallback((id: string): EC | undefined => {
+        const collections = collectionsRef.current;
+        if (collections === undefined)
+            throw Error("getCollectionById: Collections have not been initialised yet");
+        const collection: EntityCollection | undefined = collections.find(c => c.id === id);
+        if (!collection)
+            return undefined;
+        return collection as EC;
+    }, []);
+
     const getCollectionFromPaths = useCallback(<EC extends EntityCollection>(pathSegments: string[]): EC | undefined => {
 
         const collections = collectionsRef.current;
+        if (collections === undefined)
+            throw Error("getCollectionFromPaths: Collections have not been initialised yet");
         let currentCollections: EntityCollection[] | undefined = [...(collections ?? [])];
-        if (!currentCollections)
-            throw Error("Collections have not been initialised yet");
 
         for (let i = 0; i < pathSegments.length; i++) {
             const pathSegment = pathSegments[i];
@@ -265,9 +459,9 @@ export function useBuildNavigationController<EC extends EntityCollection, UserTy
     const getCollectionFromIds = useCallback(<EC extends EntityCollection>(ids: string[]): EC | undefined => {
 
         const collections = collectionsRef.current;
+        if (collections === undefined)
+            throw Error("getCollectionFromIds: Collections have not been initialised yet");
         let currentCollections: EntityCollection[] | undefined = [...(collections ?? [])];
-        if (!currentCollections)
-            throw Error("Collections have not been initialised yet");
 
         for (let i = 0; i < ids.length; i++) {
             const id = ids[i];
@@ -288,24 +482,14 @@ export function useBuildNavigationController<EC extends EntityCollection, UserTy
         [fullCollectionPath]);
 
     const urlPathToDataPath = useCallback((path: string): string => {
-        if (path.startsWith(fullCollectionPath))
-            return path.replace(fullCollectionPath, "");
+        const decodedPath = decodeURIComponent(path);
+        if (decodedPath.startsWith(fullCollectionPath))
+            return decodedPath.replace(fullCollectionPath, "");
         throw Error("Expected path starting with " + fullCollectionPath);
     }, [fullCollectionPath]);
 
-    const buildUrlEditCollectionPath = useCallback(({
-                                                        path
-                                                    }: {
-            path: string
-        }): string => {
-            return `s/edit/${encodePath(path)}`;
-        },
-        []);
-
-    const resolveAliasesFrom = useCallback((path: string): string => {
-        const collections = collectionsRef.current;
-        if (!collections)
-            throw Error("Collections have not been initialised yet");
+    const resolveIdsFrom = useCallback((path: string): string => {
+        const collections = collectionsRef.current ?? [];
         return resolveCollectionPathIds(path, collections);
     }, []);
 
@@ -359,29 +543,23 @@ export function useBuildNavigationController<EC extends EntityCollection, UserTy
         baseCollectionPath,
         initialised,
         getCollection,
+        getCollectionById,
         getCollectionFromPaths,
         getCollectionFromIds,
         isUrlCollectionPath,
         urlPathToDataPath,
         buildUrlCollectionPath,
-        buildUrlEditCollectionPath,
-        buildCMSUrlPath,
-        resolveAliasesFrom,
+        resolveIdsFrom,
         topLevelNavigation,
         refreshNavigation,
         getParentReferencesFromPath: getAllParentReferencesForPath,
         getParentCollectionIds,
-        convertIdsToPaths
+        convertIdsToPaths,
+        navigate,
+        plugins
     };
 }
 
-export function getSidePanelKey(path: string, entityId?: string) {
-    if (entityId)
-        return `${removeInitialAndTrailingSlashes(path)}/${removeInitialAndTrailingSlashes(entityId)}`;
-    else
-        return removeInitialAndTrailingSlashes(path);
-}
-
 function encodePath(input: string) {
     return encodeURIComponent(removeInitialAndTrailingSlashes(input))
         .replaceAll("%2F", "/")
@@ -390,9 +568,10 @@ function encodePath(input: string) {
 
 function filterOutNotAllowedCollections(resolvedCollections: EntityCollection[], authController: AuthController<User>): EntityCollection[] {
     return resolvedCollections
+        .filter((c) => Boolean(c.path))
         .filter((c) => {
             if (!c.permissions) return true;
-            const resolvedPermissions = resolvePermissions(c, authController, c.path, null)
+            const resolvedPermissions = resolvePermissions(c, authController, c.path, null);
             return resolvedPermissions?.read !== false;
         })
         .map((c) => {
@@ -404,11 +583,24 @@ function filterOutNotAllowedCollections(resolvedCollections: EntityCollection[],
         });
 }
 
+function applyPluginModifyCollection(resolvedCollections: EntityCollection[], modifyCollection: (collection: EntityCollection) => EntityCollection) {
+    return resolvedCollections.map((collection: EntityCollection): EntityCollection => {
+        const modifiedCollection = modifyCollection(collection);
+        if (modifiedCollection.subcollections) {
+            return {
+                ...modifiedCollection,
+                subcollections: applyPluginModifyCollection(modifiedCollection.subcollections, modifyCollection)
+            } satisfies EntityCollection;
+        }
+        return modifiedCollection;
+    });
+}
+
 async function resolveCollections(collections: undefined | EntityCollection[] | EntityCollectionsBuilder<any>,
                                   collectionPermissions: PermissionsBuilder | undefined,
                                   authController: AuthController,
                                   dataSource: DataSourceDelegate,
-                                  injectCollections?: (collections: EntityCollection[]) => EntityCollection[]) {
+                                  plugins: FireCMSPlugin[] | undefined): Promise<EntityCollection[]> {
     let resolvedCollections: EntityCollection[] = [];
     if (typeof collections === "function") {
         resolvedCollections = await collections({
@@ -420,14 +612,20 @@ async function resolveCollections(collections: undefined | EntityCollection[] |
         resolvedCollections = collections;
     }
 
-    resolvedCollections = applyPermissionsFunctionIfEmpty(resolvedCollections, collectionPermissions);
-
-    resolvedCollections = filterOutNotAllowedCollections(resolvedCollections, authController);
+    if (plugins) {
+        for (const plugin of plugins) {
+            if (plugin.collection?.modifyCollection) {
+                resolvedCollections = applyPluginModifyCollection(resolvedCollections, plugin.collection.modifyCollection);
+            }
 
-    if (injectCollections) {
-        resolvedCollections = injectCollections(resolvedCollections ?? []);
+            if (plugin.collection?.injectCollections) {
+                resolvedCollections = plugin.collection.injectCollections(resolvedCollections ?? []);
+            }
+        }
     }
 
+    resolvedCollections = applyPermissionsFunctionIfEmpty(resolvedCollections, collectionPermissions);
+    resolvedCollections = filterOutNotAllowedCollections(resolvedCollections, authController);
     return resolvedCollections;
 }
 
@@ -448,7 +646,203 @@ async function resolveCMSViews(baseViews: CMSView[] | CMSViewsBuilder | undefine
 function getGroup(collectionOrView: EntityCollection<any, any> | CMSView) {
     const trimmed = collectionOrView.group?.trim();
     if (!trimmed || trimmed === "") {
-        return "Views";
+        return NAVIGATION_DEFAULT_GROUP_NAME;
+    }
+    return trimmed ?? NAVIGATION_DEFAULT_GROUP_NAME;
+}
+
+function areCollectionListsEqual(a: EntityCollection[], b: EntityCollection[]) {
+    if (a.length !== b.length) {
+        return false;
+    }
+    const aCopy = [...a];
+    const bCopy = [...b];
+    const aSorted = aCopy.sort((x, y) => x.id.localeCompare(y.id));
+    const bSorted = bCopy.sort((x, y) => x.id.localeCompare(y.id));
+    return aSorted.every((value, index) => areCollectionsEqual(value, bSorted[index]));
+}
+
+function areCollectionsEqual(a: EntityCollection, b: EntityCollection) {
+    const {
+        subcollections: subcollectionsA,
+        ...restA
+    } = a;
+    const {
+        subcollections: subcollectionsB,
+        ...restB
+    } = b;
+    if (!areCollectionListsEqual(subcollectionsA ?? [], subcollectionsB ?? [])) {
+        return false;
     }
-    return trimmed ?? "Views";
+    return equal(removeFunctions(restA), removeFunctions(restB));
+}
+
+function useCustomBlocker(): NavigationBlocker {
+    const [blockListeners, setBlockListeners] = useState<Record<string, {
+        block: boolean,
+        basePath?: string
+    }>>({});
+
+    const shouldBlock = Object.values(blockListeners).some(b => b.block);
+
+    let blocker: any;
+    try {
+        blocker = useBlocker(({
+                                  nextLocation
+                              }) => {
+            const allBasePaths = Object.values(blockListeners).map(b => b.basePath).filter(Boolean) as string[];
+            if (allBasePaths && allBasePaths.some(path => nextLocation.pathname.startsWith(path)))
+                return false;
+            return shouldBlock;
+        });
+    } catch (e) {
+        // console.warn("Blocker not available, navigation will not be blocked");
+    }
+
+    const updateBlockListener = (path: string, block: boolean, basePath?: string) => {
+        setBlockListeners(prev => ({
+            ...prev,
+            [path]: {
+                block,
+                basePath
+            }
+        }));
+        return () => setBlockListeners(prev => {
+            const {
+                [path]: removed,
+                ...rest
+            } = prev;
+            return rest;
+        })
+    };
+
+    const isBlocked = (path: string) => {
+        return (blockListeners[path]?.block ?? false) && blocker?.state === "blocked";
+    }
+
+    return {
+        updateBlockListener,
+        isBlocked,
+        proceed: blocker?.proceed,
+        reset: blocker?.reset
+    }
+}
+
+function computeNavigationGroups({
+                                     navigationGroupMappings,
+                                     collections,
+                                     views,
+                                     plugins
+                                 }: {
+    navigationGroupMappings?: NavigationGroupMapping[],
+    collections?: EntityCollection[],
+    views?: CMSView[],
+    plugins?: FireCMSPlugin[]
+}): NavigationGroupMapping[] {
+
+    let result = navigationGroupMappings;
+
+    // Merge plugin navigation entries
+    result = plugins ? plugins?.reduce((acc, plugin) => {
+        if (plugin.homePage?.navigationEntries) {
+            plugin.homePage.navigationEntries.forEach((entry) => {
+                const {
+                    name,
+                    entries
+                } = entry;
+                const existingGroup = acc.find(entry => entry.name === name);
+                if (existingGroup) {
+                    existingGroup.entries.push(...entries);
+                } else {
+                    acc.push({
+                        name,
+                        entries: [...entries]
+                    });
+                }
+            });
+
+        }
+        return acc;
+    }, [...(result ?? [])] as NavigationGroupMapping[]) : result;
+
+    // Track all entries that are already assigned to groups
+    const assignedEntries = new Set<string>();
+    if (result) {
+        result.forEach(group => {
+            group.entries.forEach(entry => assignedEntries.add(entry));
+        });
+    }
+
+    // Find collections and views that are NOT in any persisted group
+    const unassignedGroupMap: Record<string, string[]> = {};
+
+    // Check collections
+    (collections ?? []).forEach(collection => {
+        const entry = collection.id ?? collection.path;
+        if (!assignedEntries.has(entry)) {
+            const groupName = getGroup(collection);
+            if (!unassignedGroupMap[groupName]) unassignedGroupMap[groupName] = [];
+            unassignedGroupMap[groupName].push(entry);
+        }
+    });
+
+    // Check views
+    (views ?? []).forEach(view => {
+        const entry = view.path;
+        if (!assignedEntries.has(entry)) {
+            const groupName = getGroup(view);
+            if (!unassignedGroupMap[groupName]) unassignedGroupMap[groupName] = [];
+            unassignedGroupMap[groupName].push(entry);
+        }
+    });
+
+    // Merge unassigned entries into existing groups or create new groups
+    Object.entries(unassignedGroupMap).forEach(([groupName, entries]) => {
+        if (result) {
+            const existingGroup = result.find(g => g.name === groupName);
+            if (existingGroup) {
+                existingGroup.entries.push(...entries);
+            } else {
+                result.push({
+                    name: groupName,
+                    entries
+                });
+            }
+        }
+    });
+
+    if (!result) {
+        // No persisted data at all - create from scratch
+        result = [];
+        const groupMap: Record<string, string[]> = {};
+
+        // Add collections
+        (collections ?? []).forEach(collection => {
+            const name = getGroup(collection);
+            const entry = collection.id ?? collection.path;
+            if (!groupMap[name]) groupMap[name] = [];
+            groupMap[name].push(entry);
+        });
+
+        // Add views
+        (views ?? []).forEach(view => {
+            const name = getGroup(view);
+            const entry = view.path;
+            if (!groupMap[name]) groupMap[name] = [];
+            groupMap[name].push(entry);
+        });
+
+        // Convert groupMap to result array
+        result = Object.entries(groupMap).map(([name, entries]) => ({
+            name,
+            entries
+        }));
+    }
+
+    // Remove duplicates in entries
+    result.forEach(group => {
+        group.entries = [...new Set(group.entries)];
+    });
+
+    return result;
 }