@firecms/core 3.0.0-canary.269 → 3.0.0-canary.270

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@firecms/core",
   "type": "module",
-  "version": "3.0.0-canary.269",
+  "version": "3.0.0-canary.270",
   "description": "Awesome Firebase/Firestore-based headless open-source CMS",
   "funding": {
     "url": "https://github.com/sponsors/firecmsco"
@@ -53,9 +53,9 @@
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/modifiers": "^9.0.0",
     "@dnd-kit/sortable": "^10.0.0",
-    "@firecms/editor": "^3.0.0-canary.269",
-    "@firecms/formex": "^3.0.0-canary.269",
-    "@firecms/ui": "^3.0.0-canary.269",
+    "@firecms/editor": "^3.0.0-canary.270",
+    "@firecms/formex": "^3.0.0-canary.270",
+    "@firecms/ui": "^3.0.0-canary.270",
     "@radix-ui/react-portal": "^1.1.9",
     "clsx": "^2.1.1",
     "date-fns": "^3.6.0",
@@ -108,7 +108,7 @@
     "dist",
     "src"
   ],
-  "gitHead": "a6558e6ef9de00858888fb9b69d276921cc28da8",
+  "gitHead": "ce08b2d307b70de5897d32f14a340f1601ea22a4",
   "publishConfig": {
     "access": "public"
   },

package/src/components/ErrorView.tsx

@@ -26,7 +26,7 @@ export function ErrorView({
                               tooltip
                           }: ErrorViewProps): React.ReactElement {
     const component = error instanceof Error ? error.message : error;
-    // console.warn("ErrorView", error)
+    console.warn("ErrorView", JSON.stringify(error))
 
     const body = (
         <div

package/src/components/HomePage/DefaultHomePage.tsx

@@ -2,6 +2,7 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from "react"
 import Fuse from "fuse.js";
 import { Container, SearchBar } from "@firecms/ui";
 import { useCustomizationController, useFireCMSContext, useNavigationController } from "../../hooks";
+import { useCollapsedGroups } from "../../hooks/useCollapsedGroups";
 import {
     CMSAnalyticsEvent,
     NavigationEntry,
@@ -194,9 +195,15 @@ export function DefaultHomePage({
         onNavigationEntriesUpdate(all);
     };
 
-    /* ─────────────────────────────────────────────────────���─────────
-       Hook for DnD
-       ───�����────────────────────────────────────────────────────────── */
+    // 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);
+
+
     const {
         sensors,
         collisionDetection,
@@ -303,7 +310,7 @@ export function DefaultHomePage({
 
     /* ───────────────────────────────────────────────────────────────
        Render
-       ─────────���───────────────────────────────────────────────────── */
+       ─────────────────────────────────────────────────────────────── */
     return (
         <div ref={containerRef} className="py-2 overflow-auto h-full w-full">
             <Container maxWidth="6xl">
@@ -400,6 +407,8 @@ export function DefaultHomePage({
                                             if (dndDisabled) return;
                                             setDialogOpenForGroup(groupKey);
                                         }}
+                                        collapsed={isGroupCollapsed(groupKey)}
+                                        onToggleCollapsed={() => toggleGroupCollapsed(groupKey)}
                                     >
                                         <NavigationGroupDroppable
                                             id={groupKey}
@@ -503,7 +512,11 @@ export function DefaultHomePage({
                 </DndContext>
 
                 {!performingSearch && adminGroupData && (
-                    <NavigationGroup group={adminGroupData.name}>
+                    <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

package/src/components/HomePage/NavigationGroup.tsx

@@ -1,5 +1,5 @@
 import React, { PropsWithChildren, useState } from "react";
-import { cls, EditIcon, IconButton, Typography } from "@firecms/ui";
+import { cls, EditIcon, IconButton, Typography, ExpandablePanel } from "@firecms/ui";
 
 export function NavigationGroup({
                                     children,
@@ -7,66 +7,146 @@ export function NavigationGroup({
                                     minimised,
                                     isPreview,
                                     isPotentialCardDropTarget,
-                                    onEditGroup, // New prop to handle editing
-                                    dndDisabled // New prop to disable editing when D&D is off
+                                    onEditGroup,
+                                    dndDisabled,
+                                    collapsed,
+                                    onToggleCollapsed
                                 }: PropsWithChildren<{
     group: string | undefined,
     minimised?: boolean,
     isPreview?: boolean,
     isPotentialCardDropTarget?: boolean,
-    onEditGroup?: (groupName: string) => void; // Callback to open dialog
-    dndDisabled?: boolean; // Added dndDisabled prop
+    onEditGroup?: (groupName: string) => void;
+    dndDisabled?: boolean;
+    collapsed?: boolean;
+    onToggleCollapsed?: () => void;
 }>) {
 
     const [isHovered, setIsHovered] = useState(false);
     const currentGroupName = group ?? "Views";
 
+    // Show caret only when not in preview and there is a toggle handler
+    const showCaret = !isPreview && !!onToggleCollapsed;
+
+    // Helper for the title content (left side)
+    const TitleContent = (
+        <div className={cls("flex items-center", isPreview ? "px-1 py-0.5" : "")}
+        >
+            <Typography
+                variant={isPreview ? "body2" : "caption"}
+                component={"h2"}
+                color="secondary"
+                className={cls(
+                    "p-4 py-2 rounded",
+                    "font-medium uppercase text-sm text-surface-600 dark:text-surface-400"
+                )}
+            >
+                {currentGroupName}
+            </Typography>
+            {!isPreview && onEditGroup && !dndDisabled && (
+                <IconButton
+                    size="smallest"
+                    onClick={(e) => {
+                        e.stopPropagation(); // Prevent toggle on click
+                        onEditGroup(currentGroupName);
+                    }}
+                    className={cls("ml-2 ", isHovered ? "opacity-100" : "opacity-0", "transition-opacity duration-100")}
+                >
+                    <EditIcon size="smallest"/>
+                </IconButton>
+            )}
+        </div>
+    );
+
     return (
         <div className={cls(
             !isPotentialCardDropTarget ? "my-10" : "my-6",
             "transition-all duration-200 ease-in-out"
         )}
         >
-            <div className={`flex items-center ${isPreview ? "px-1 py-0.5 m-0" : "ml-3.5 mt-6"} `}
+            {/* Preview: static header + content (no caret / no collapse) */}
+            {isPreview && (
+                <>
+                    <div
+                        className={cls(
+                            "flex items-center justify-between w-full",
+                          "p-4 py-2"
+                        )}
+                        onMouseEnter={() => setIsHovered(true)}
+                        onMouseLeave={() => setIsHovered(false)}
+                    >
+                        {TitleContent}
+                    </div>
+                    {children}
+                </>
+            )}
 
-                 onMouseEnter={() => setIsHovered(true)}
-                 onMouseLeave={() => setIsHovered(false)}>
-                <Typography
-                    variant={isPreview ? "body2" : "caption"}
-                    component={"h2"}
-                    color="secondary"
-                    // Minimal padding and no margin for preview title
-                    className={`${isPreview ? "px-1 py-0.5" : "ml-3.5"} font-medium uppercase text-sm text-surface-600 dark:text-surface-400`}
+            {/* Interactive collapsible version when a toggle handler is provided */}
+            {!isPreview && showCaret && (
+                <ExpandablePanel
+                    invisible
+                    expanded={!collapsed}
+                    onExpandedChange={(open) => {
+                        if (open !== !collapsed) {
+                            onToggleCollapsed?.();
+                        }
+                    }}
+                    className={cls("mt-6")}
+                    titleClassName={cls(
+                        "min-h-0 p-0 border-none",
+                        "rounded-t flex items-center justify-between w-full",
+                        "hover:bg-transparent",
+                        "cursor-pointer select-none"
+                    )}
+                    innerClassName={cls("mt-4", !minimised ? "pt-0" : "")}
+                    title={
+                        <div
+                            onMouseEnter={() => setIsHovered(true)}
+                            onMouseLeave={() => setIsHovered(false)}
+                            className="flex items-center"
+                        >
+                            {TitleContent}
+                        </div>
+                    }
                 >
-                    {currentGroupName}
-                </Typography>
-                {!isPreview && onEditGroup && !dndDisabled && (
-                    <IconButton
-                        size="smallest"
-                        onClick={(e) => {
-                            e.stopPropagation(); // Prevent other click events
-                            onEditGroup(currentGroupName);
-                        }}
-                        className={cls("ml-2 ", isHovered ? "opacity-100" : "opacity-0", "transition-opacity duration-100")}
+                    {minimised ? (
+                        <div className={cls("mt-4 p-8 bg-surface-accent-200 dark:bg-surface-accent-800 rounded-lg")}
+                             style={{ minHeight: "50px" }}>
+                        </div>
+                    ) : (
+                        <div className={cls("mt-4", !minimised ? "pt-0" : "")}>
+                            {children}
+                        </div>
+                    )}
+                </ExpandablePanel>
+            )}
+
+            {/* Non-collapsible (no caret) runtime, keep old behavior */}
+            {!isPreview && !showCaret && (
+                <>
+                    <div
+                        className={cls(
+                            "flex items-center justify-between w-full",
+                            "mt-6"
+                        )}
+                        onMouseEnter={() => setIsHovered(true)}
+                        onMouseLeave={() => setIsHovered(false)}
                     >
-                        <EditIcon size="smallest"/>
-                    </IconButton>
-                )}
-            </div>
+                        {TitleContent}
+                    </div>
 
-            {isPreview ? (
-                children
-            ) : minimised ? (
-                // For minimised view in the main list
-                <div className={cls("mt-4 p-8 bg-surface-accent-200 dark:bg-surface-accent-800 rounded-lg")}
-                     style={{ minHeight: "50px" }}>
-                </div>
-            ) : (
-                // If highlighted, the parent div already has padding, so children (NavigationGroupDroppable) don't need extra margin top as much.
-                // The inner content of NavigationGroupDroppable will define its own padding if needed when active.
-                <div className={cls("mt-4", !minimised ? "pt-0" : "")}>
-                    {children}
-                </div>
+                    {!collapsed && (
+                        minimised ? (
+                            <div className={cls("mt-4 p-8 bg-surface-accent-200 dark:bg-surface-accent-800 rounded-lg")}
+                                 style={{ minHeight: "50px" }}>
+                            </div>
+                        ) : (
+                            <div className={cls("mt-4", !minimised ? "pt-0" : "")}>
+                                {children}
+                            </div>
+                        )
+                    )}
+                </>
             )}
         </div>
     );

package/src/hooks/index.tsx

@@ -18,6 +18,7 @@ export * from "./useSnackbarController";
 export * from "./useModeController";
 export * from "./useClipboard";
 export * from "./useLargeLayout";
+export * from "./useCollapsedGroups";
 
 export * from "./useReferenceDialog";
 export * from "./useBrowserTitleAndIcon";

package/src/hooks/useBrowserTitleAndIcon.tsx

@@ -1,6 +1,6 @@
 import { useEffect } from "react";
 
-const fireCMSLogo = "data:image/png;base64,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\n";
+const fireCMSLogo = "data:image/png;base64,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";
 
 /**
  * Internal hook to handle the browser title and icon

package/src/hooks/useCollapsedGroups.ts

@@ -0,0 +1,64 @@
+import { useCallback, useEffect, useState } from "react";
+
+/**
+ * Custom hook for managing collapsed/expanded state of navigation groups
+ * with localStorage persistence. Automatically cleans up stale group entries
+ * when groups are removed from the navigation.
+ */
+export function useCollapsedGroups(groupNames: string[]) {
+    // Load collapsed groups from localStorage on mount
+    const [collapsedGroups, setCollapsedGroups] = useState<Record<string, boolean>>(() => {
+        try {
+            const stored = localStorage.getItem('firecms-collapsed-groups');
+            return stored ? JSON.parse(stored) : {};
+        } catch {
+            return {};
+        }
+    });
+
+    // Save to localStorage whenever collapsedGroups changes
+    useEffect(() => {
+        try {
+            localStorage.setItem('firecms-collapsed-groups', JSON.stringify(collapsedGroups));
+        } catch {
+            // Silently fail if localStorage is not available
+        }
+    }, [collapsedGroups]);
+
+    // Clean up collapsed groups state when groups change - remove entries for groups that no longer exist
+    useEffect(() => {
+        // Only clean up if we have actual groups loaded (avoid cleaning up during initial load)
+        if (groupNames.length === 0) return;
+
+        const currentGroupNames = new Set(groupNames);
+
+        setCollapsedGroups(prev => {
+            const cleaned = Object.fromEntries(
+                Object.entries(prev).filter(([groupName]) => currentGroupNames.has(groupName))
+            );
+
+            // Only update if something actually changed
+            const prevKeys = Object.keys(prev);
+            const cleanedKeys = Object.keys(cleaned);
+
+            if (prevKeys.length === cleanedKeys.length && prevKeys.every(key => cleanedKeys.includes(key))) {
+                return prev;
+            }
+
+            return cleaned;
+        });
+    }, [groupNames]);
+
+    const isGroupCollapsed = useCallback((name: string) => {
+        return !!collapsedGroups[name];
+    }, [collapsedGroups]);
+
+    const toggleGroupCollapsed = useCallback((name: string) => {
+        setCollapsedGroups(prev => ({ ...prev, [name]: !prev[name] }));
+    }, []);
+
+    return {
+        isGroupCollapsed,
+        toggleGroupCollapsed
+    };
+}