@firecms/core 3.0.0 → 3.1.0-canary.1df3b2c

package/src/contexts/BreacrumbsContext.tsx

@@ -1,11 +1,11 @@
-import React, { useState } from "react";
+import React, { useCallback, useState } from "react";
 import { BreadcrumbEntry, BreadcrumbsController } from "../hooks/useBreadcrumbsController";
 
-const DEFAULT_BREADCRUMBS_CONTROLLER = {
+const DEFAULT_BREADCRUMBS_CONTROLLER: BreadcrumbsController = {
     breadcrumbs: [],
-    set: (props: {
-        breadcrumbs: BreadcrumbEntry[];
-    }) => {
+    set: () => {
+    },
+    updateCount: () => {
     }
 };
 
@@ -19,17 +19,24 @@ export const BreadcrumbsProvider: React.FC<BreadcrumbsProviderProps> = ({ childr
 
     const [breadcrumbs, setBreadcrumbs] = useState<BreadcrumbEntry[]>([]);
 
-    const set = (props: {
+    const set = useCallback((props: {
         breadcrumbs: BreadcrumbEntry[];
     }) => {
         setBreadcrumbs(props.breadcrumbs);
-    };
+    }, []);
+
+    const updateCount = useCallback((id: string, count: number | null | undefined) => {
+        setBreadcrumbs(prev => prev.map(entry =>
+            entry.id === id ? { ...entry, count } : entry
+        ));
+    }, []);
 
     return (
         <BreadcrumbContext.Provider
             value={{
                 breadcrumbs,
-                set
+                set,
+                updateCount
             }}
         >
             {children}

package/src/contexts/index.ts

@@ -1,3 +1,13 @@
 export * from "./SnackbarProvider";
 export * from "./ModeController";
 export * from "./AuthControllerContext";
+export * from "./DataSourceContext";
+export * from "./NavigationContext";
+export * from "./CustomizationControllerContext";
+export * from "./SideEntityControllerContext";
+export * from "./SideDialogsControllerContext";
+export * from "./AnalyticsContext";
+export * from "./StorageSourceContext";
+export * from "./UserConfigurationPersistenceContext";
+export * from "./DialogsProvider";
+export * from "./InternalUserManagementContext";

package/src/core/DefaultAppBar.tsx

@@ -57,16 +57,16 @@ export type DefaultAppBarProps<ADDITIONAL_PROPS = object> = {
 
  */
 export const DefaultAppBar = function DefaultAppBar({
-                                                        title,
-                                                        endAdornment,
-                                                        startAdornment,
-                                                        dropDownActions,
-                                                        includeModeToggle = true,
-                                                        className,
-                                                        style,
-                                                        user: userProp,
-                                                        logo: logoProp,
-                                                    }: DefaultAppBarProps) {
+    title,
+    endAdornment,
+    startAdornment,
+    dropDownActions,
+    includeModeToggle = true,
+    className,
+    style,
+    user: userProp,
+    logo: logoProp,
+}: DefaultAppBarProps) {
 
     const {
         hasDrawer,
@@ -103,7 +103,7 @@ export const DefaultAppBar = function DefaultAppBar({
         </Avatar>;
     } else if (user === undefined || authController.initialLoading) {
         avatarComponent = <div className={"p-1 flex justify-center"}>
-            <Skeleton className={"w-10 h-10 rounded-full"}/>
+            <Skeleton className={"w-10 h-10 rounded-full"} />
         </div>;
     } else {
         avatarComponent = null;
@@ -131,13 +131,13 @@ export const DefaultAppBar = function DefaultAppBar({
                     <div className={"flex flex-row gap-4"}>
                         {!hasDrawer && (logo
                             ? <img src={logo}
-                                   alt="Logo"
-                                   className={cls("w-[32px] h-[32px] object-contain")}/>
-                            : <FireCMSLogo width={"32px"} height={"32px"}/>)}
+                                alt="Logo"
+                                className={cls("w-[32px] h-[32px] object-contain")} />
+                            : <FireCMSLogo width={"32px"} height={"32px"} />)}
 
                         {typeof title === "string"
                             ? <Typography variant="subtitle1"
-                                          noWrap>
+                                noWrap>
                                 {title}
                             </Typography>
                             : title}
@@ -146,7 +146,7 @@ export const DefaultAppBar = function DefaultAppBar({
             </div>}
 
             {(breadcrumbs.breadcrumbs ?? []).length > 0 && <div className="mr-8 hidden lg:block">
-                <div className={"flex flex-row gap-2"}>
+                <div className={"flex flex-row gap-2 items-center"}>
                     {breadcrumbs.breadcrumbs.map((breadcrumb, index) => {
                         return <React.Fragment key={breadcrumb.url + "_" + index}>
                             <Typography variant={"caption"} color={"secondary"}>
@@ -157,18 +157,31 @@ export const DefaultAppBar = function DefaultAppBar({
                                 className="visited:text-inherit visited:dark:text-inherit block"
                                 to={breadcrumb.url}
                             >
-                                <Typography variant={"caption"} color={"secondary"}>
-                                    {breadcrumb.title}
-                                </Typography>
+                                <div className="flex flex-row items-center gap-2 whitespace-nowrap">
+                                    <Typography variant={"body2"}>
+                                        {breadcrumb.title}
+                                    </Typography>
+                                    {/* Show count badge for collection breadcrumbs: undefined = not applicable, null = loading, number = count */}
+                                    {breadcrumb.count !== undefined && (
+                                        breadcrumb.count !== null ? (
+                                            <span className="text-xs text-surface-accent-500 dark:text-surface-accent-400 bg-surface-100 dark:bg-surface-700 px-1 py-0 rounded">
+                                                {breadcrumb.count}
+                                            </span>
+                                        ) : (
+                                            <Skeleton className="w-8 h-4 rounded-md" />
+                                        )
+                                    )}
+                                </div>
                             </Link>
                         </React.Fragment>;
                     })}
                 </div>
             </div>}
 
+
             {startAdornment}
 
-            <div className={"flex-grow"}/>
+            <div className={"flex-grow"} />
 
             {endAdornment &&
                 <ErrorBoundary>
@@ -182,13 +195,13 @@ export const DefaultAppBar = function DefaultAppBar({
                         aria-label="Open drawer"
                         size="large">
                         {mode === "dark"
-                            ? <DarkModeIcon/>
-                            : <LightModeIcon/>}
+                            ? <DarkModeIcon />
+                            : <LightModeIcon />}
                     </IconButton>}>
-                    <MenuItem onClick={() => setMode("dark")}><DarkModeIcon size={"smallest"}/> Dark</MenuItem>
-                    <MenuItem onClick={() => setMode("light")}><LightModeIcon size={"smallest"}/> Light </MenuItem>
+                    <MenuItem onClick={() => setMode("dark")}><DarkModeIcon size={"smallest"} /> Dark</MenuItem>
+                    <MenuItem onClick={() => setMode("light")}><LightModeIcon size={"smallest"} /> Light </MenuItem>
                     <MenuItem onClick={() => setMode("system")}> <BrightnessMediumIcon
-                        size={"smallest"}/>System</MenuItem>
+                        size={"smallest"} />System</MenuItem>
                 </Menu>}
 
             <Menu trigger={avatarComponent}>
@@ -208,7 +221,7 @@ export const DefaultAppBar = function DefaultAppBar({
                     // replace current route with home
                     navigate("/");
                 }}>
-                    <LogoutIcon/>
+                    <LogoutIcon />
                     Log Out
                 </MenuItem>}
 

package/src/core/DefaultDrawer.tsx

@@ -1,13 +1,13 @@
-import React, { useCallback } from "react";
+import React from "react";
 
-import { useLargeLayout, useNavigationController } from "../hooks";
+import { useCollapsedGroups, useLargeLayout, useNavigationController } from "../hooks";
 
 import { Link, useNavigate } from "react-router-dom";
 import { CMSAnalyticsEvent, NavigationEntry, NavigationResult } from "../types";
 import { IconForView } from "../util";
-import { cls, IconButton, Menu, MenuItem, MoreVertIcon, Tooltip, Typography } from "@firecms/ui";
+import { cls, IconButton, Menu, MenuItem, MoreVertIcon, Tooltip } from "@firecms/ui";
 import { useAnalyticsController } from "../hooks/useAnalyticsController";
-import { DrawerNavigationItem } from "./DrawerNavigationItem";
+import { DrawerNavigationGroup } from "./DrawerNavigationGroup";
 import { FireCMSLogo } from "../components";
 import { useApp } from "../app/useApp";
 
@@ -16,9 +16,9 @@ import { useApp } from "../app/useApp";
  * @group Core
  */
 export function DefaultDrawer({
-                                  className,
-                                  style,
-                              }: {
+    className,
+    style,
+}: {
     className?: string
     style?: React.CSSProperties,
 }) {
@@ -50,20 +50,10 @@ export function DefaultDrawer({
     const adminViews = navigationEntries.filter(e => e.type === "admin") ?? [];
     const groupsWithoutAdmin = groups.filter(g => g !== "Admin");
 
-    const buildGroupHeader = useCallback((group?: string) => {
-        if (!drawerOpen) return <div className="w-full"/>;
-        return <div
-            className="pl-6 pr-8 py-4 flex flex-row items-center">
-            <Typography variant={"caption"}
-                        color={"secondary"}
-                        className="font-medium flex-grow line-clamp-1">
-                {group ? group.toUpperCase() : "Views".toUpperCase()}
-            </Typography>
+    // Collapsible groups state - using "drawer" namespace for independent state from home page
+    const { isGroupCollapsed, toggleGroupCollapsed } = useCollapsedGroups(groupsWithoutAdmin, "drawer");
 
-        </div>;
-    }, [drawerOpen]);
-
-    const onClick = (view: NavigationEntry) => {
+    const onItemClick = (view: NavigationEntry) => {
         const eventName: CMSAnalyticsEvent = view.type === "collection"
             ? "drawer_navigate_to_collection"
             : (view.type === "view" ? "drawer_navigate_to_view" : "unmapped_event");
@@ -76,33 +66,29 @@ export function DefaultDrawer({
         <>
             <div className={cls("flex flex-col h-full relative flex-grow w-full", className)} style={style}>
 
-                <DrawerLogo logo={logo}/>
+                <DrawerLogo logo={logo} />
 
                 <div className={"mt-4 flex-grow overflow-scroll no-scrollbar"}
-                     style={{
-                         maskImage: "linear-gradient(to bottom, transparent 0, black 20px, black calc(100% - 20px), transparent 100%)",
-                     }}>
-
-                    {groupsWithoutAdmin.map((group) => (
-                        <div
-                            className={"bg-surface-50 dark:bg-surface-800 dark:bg-opacity-30 my-4 rounded-lg ml-3 mr-1"}
-                            key={`drawer_group_${group}`}>
-                            {buildGroupHeader(group)}
-                            {Object.values(navigationEntries)
-                                .filter(e => e.group === group)
-                                .map((view) =>
-                                    <DrawerNavigationItem
-                                        key={view.id}
-                                        icon={<IconForView collectionOrView={view.collection ?? view.view}
-                                                           size={"small"}/>}
-                                        tooltipsOpen={tooltipsOpen}
-                                        adminMenuOpen={adminMenuOpen}
-                                        drawerOpen={drawerOpen}
-                                        onClick={() => onClick(view)}
-                                        url={view.url}
-                                        name={view.name}/>)}
-                        </div>
-                    ))}
+                    style={{
+                        maskImage: "linear-gradient(to bottom, transparent 0, black 20px, black calc(100% - 20px), transparent 100%)",
+                    }}>
+
+                    {groupsWithoutAdmin.map((group) => {
+                        const entriesInGroup = Object.values(navigationEntries).filter(e => e.group === group);
+                        return (
+                            <DrawerNavigationGroup
+                                key={`drawer_group_${group}`}
+                                group={group}
+                                entries={entriesInGroup}
+                                collapsed={isGroupCollapsed(group)}
+                                onToggleCollapsed={() => toggleGroupCollapsed(group)}
+                                drawerOpen={drawerOpen}
+                                tooltipsOpen={tooltipsOpen}
+                                adminMenuOpen={adminMenuOpen}
+                                onItemClick={onItemClick}
+                            />
+                        );
+                    })}
 
                 </div>
 
@@ -115,9 +101,9 @@ export function DefaultDrawer({
                             shape={"square"}
                             className={"m-4 text-surface-900 dark:text-white w-fit"}>
                             <Tooltip title={"Admin"}
-                                     open={tooltipsOpen}
-                                     side={"right"} sideOffset={28}>
-                                <MoreVertIcon/>
+                                open={tooltipsOpen}
+                                side={"right"} sideOffset={28}>
+                                <MoreVertIcon />
                             </Tooltip>
                             {drawerOpen && <div
                                 className={cls(
@@ -132,10 +118,10 @@ export function DefaultDrawer({
                         <MenuItem
                             onClick={(event) => {
                                 event.preventDefault();
-                                navigate(entry.url); // Consistent use of entry.url for navigation
+                                navigate(entry.url);
                             }}
                             key={entry.id}>
-                            {<IconForView collectionOrView={entry.view}/>}
+                            {<IconForView collectionOrView={entry.view} />}
                             {entry.name}
                         </MenuItem>)}
 
@@ -167,17 +153,17 @@ export function DrawerLogo({ logo }: {
         className={cls("cursor-pointer rounded ml-3 mr-1")}>
 
         <Tooltip title={"Home"}
-                 sideOffset={20}
-                 side="right">
+            sideOffset={20}
+            side="right">
             <Link
                 className={"block"}
                 to={navigation.basePath}>
                 {logo
                     ? <img src={logo}
-                           alt="Logo"
-                           className={cls("max-w-full max-h-full transition-all object-contain",
-                               drawerOpen ? "w-[96px] h-[96px]" : "w-[32px] h-[32px]")}/>
-                    : <FireCMSLogo/>}
+                        alt="Logo"
+                        className={cls("max-w-full max-h-full transition-all object-contain",
+                            drawerOpen ? "w-[96px] h-[96px]" : "w-[32px] h-[32px]")} />
+                    : <FireCMSLogo />}
 
             </Link>
         </Tooltip>

package/src/core/DrawerNavigationGroup.tsx

@@ -0,0 +1,118 @@
+import React from "react";
+import { cls, ExpandMoreIcon, Typography } from "@firecms/ui";
+import { NavigationEntry } from "../types";
+import { IconForView } from "../util";
+import { DrawerNavigationItem } from "./DrawerNavigationItem";
+
+export interface DrawerNavigationGroupProps {
+    /**
+     * Group name to display in header
+     */
+    group: string;
+    /**
+     * Navigation entries in this group
+     */
+    entries: NavigationEntry[];
+    /**
+     * Whether the group is collapsed
+     */
+    collapsed: boolean;
+    /**
+     * Callback when collapse state should toggle
+     */
+    onToggleCollapsed: () => void;
+    /**
+     * Whether the drawer is in open (expanded) state
+     */
+    drawerOpen: boolean;
+    /**
+     * Whether tooltips should be shown (drawer closed + hovered)
+     */
+    tooltipsOpen: boolean;
+    /**
+     * Whether admin menu is open (used to control tooltip visibility)
+     */
+    adminMenuOpen?: boolean;
+    /**
+     * Optional actions to render in the group header (e.g., "Add collection" button)
+     */
+    headerActions?: React.ReactNode;
+    /**
+     * Optional callback when a navigation item is clicked
+     */
+    onItemClick?: (entry: NavigationEntry) => void;
+}
+
+/**
+ * Shared drawer navigation group component used by both DefaultDrawer and FireCMSCloudDrawer.
+ * Renders a collapsible group with header and navigation items.
+ */
+export function DrawerNavigationGroup({
+    group,
+    entries,
+    collapsed,
+    onToggleCollapsed,
+    drawerOpen,
+    tooltipsOpen,
+    adminMenuOpen,
+    headerActions,
+    onItemClick
+}: DrawerNavigationGroupProps) {
+    return (
+        <div
+            className={"bg-surface-50 dark:bg-surface-800/30 my-4 rounded-lg ml-3 mr-1"}
+            key={`drawer_group_${group}`}
+        >
+            {/* Group Header */}
+            {drawerOpen ? (
+                <div
+                    className="pl-4 pr-2 py-2 flex flex-row items-center cursor-pointer hover:bg-surface-100 dark:hover:bg-surface-700/50 rounded-t-lg transition-colors"
+                    onClick={onToggleCollapsed}
+                >
+                    <ExpandMoreIcon
+                        size={"smallest"}
+                        className={cls(
+                            "text-surface-500 dark:text-surface-400 transition-transform duration-200 mr-1",
+                            collapsed ? "-rotate-90" : "rotate-0"
+                        )}
+                    />
+                    <Typography
+                        variant={"caption"}
+                        color={"secondary"}
+                        className="font-medium flex-grow line-clamp-1"
+                    >
+                        {(group || "Views").toUpperCase()}
+                    </Typography>
+                    {headerActions && (
+                        <div onClick={(e) => e.stopPropagation()}>
+                            {headerActions}
+                        </div>
+                    )}
+                </div>
+            ) : (
+                <div className="w-full" />
+            )}
+
+            {/* Collapsible Content */}
+            <div
+                className={cls(
+                    "overflow-hidden transition-all duration-200 ease-in-out",
+                    collapsed ? "max-h-0 opacity-0" : "max-h-[2000px] opacity-100"
+                )}
+            >
+                {entries.map((entry) => (
+                    <DrawerNavigationItem
+                        key={entry.id}
+                        icon={<IconForView collectionOrView={entry.collection ?? entry.view} size={18} />}
+                        tooltipsOpen={!collapsed && tooltipsOpen}
+                        adminMenuOpen={adminMenuOpen}
+                        drawerOpen={drawerOpen}
+                        onClick={() => onItemClick?.(entry)}
+                        url={entry.url}
+                        name={entry.name}
+                    />
+                ))}
+            </div>
+        </div>
+    );
+}

package/src/core/DrawerNavigationItem.tsx

@@ -34,13 +34,13 @@ export function DrawerNavigationItem({
                 transition: drawerOpen ? "width 150ms ease-in" : undefined
             }}
             className={({ isActive }: any) => cls("rounded-lg truncate",
-                "hover:bg-surface-accent-300 hover:bg-opacity-75 dark:hover:bg-surface-accent-800 dark:hover:bg-opacity-75 text-text-primary dark:text-surface-200 hover:text-surface-900 hover:dark:text-white",
+                "hover:bg-surface-accent-300 hover:bg-opacity-75 hover:bg-surface-accent-300/75 dark:hover:bg-surface-accent-800 dark:hover:bg-opacity-75 dark:hover:bg-surface-accent-800/75 text-text-primary dark:text-surface-200 hover:text-surface-900 hover:dark:text-white hover:bg-surface-accent-300/75 dark:hover:bg-surface-accent-800/75",
                 "flex flex-row items-center mr-8",
                 // "transition-all ease-in-out delay-100 duration-300",
                 // drawerOpen ? "w-full" : "w-18",
                 drawerOpen ? "pl-4 h-10" : "pl-4 h-9",
                 "font-semibold text-xs",
-                isActive ? "bg-surface-accent-200 bg-opacity-60 dark:bg-surface-800 dark:bg-opacity-50" : ""
+                isActive ? "bg-surface-accent-200 bg-opacity-60 dark:bg-surface-800 dark:bg-opacity-50 bg-surface-accent-200/60 dark:bg-surface-800/50" : ""
             )}
             to={url}
         >
@@ -49,8 +49,9 @@ export function DrawerNavigationItem({
 
             <div
                 className={cls(
+                    "text-text-primary dark:text-surface-200",
                     drawerOpen ? "opacity-100" : "opacity-0 hidden",
-                    "ml-4 font-inherit text-inherit"
+                    "ml-4 font-inherit"
                 )}>
                 {name.toUpperCase()}
             </div>