@rebasepro/admin 0.0.1-canary.eae7889 → 0.0.1-canary.eb08332

package/src/components/DefaultDrawer.tsx

@@ -1,31 +1,77 @@
 import type { NavigationEntry, NavigationResult } from "@rebasepro/types";
-import React from "react";
+import React, { useMemo } from "react";
+
+import { useCollapsedGroups, buildCollapsedDefaults, useLargeLayout, useAdminModeController, useAuthController, useModeController, useTranslation, useSlot, useRebaseContext, useAnalyticsController, useRebaseRegistry, useComponentOverride } from "@rebasepro/app";
+import { useUrlController } from "../hooks/navigation/contexts/UrlContext";
+import { useNavigationStateController } from "../hooks/navigation/contexts/NavigationStateContext";
 
-import { useCollapsedGroups, useLargeLayout, useAdminModeController, useEffectiveRoleController, useTranslation, useSlot, useRebaseContext, useAnalyticsController, useRebaseRegistry, STUDIO_NAVIGATION_GROUPS } from "@rebasepro/core";
-import { useNavigationStateController, useUrlController } from "../hooks";
 
 import { Link, useNavigate } from "react-router-dom";
 import { AnalyticsEvent } from "@rebasepro/types";
-import { cls, Tooltip, Typography , iconSize } from "@rebasepro/ui";
-import { ChevronsLeftIcon, ChevronsRightIcon } from "lucide-react";
+import {
+    Avatar,
+    ChevronsLeftIcon,
+    ChevronsRightIcon,
+    cls,
+    iconSize,
+    IconButton,
+    LanguagesIcon,
+    LogOutIcon,
+    Menu,
+    MenuItem,
+    MoonIcon,
+    Separator,
+    SettingsIcon,
+    Skeleton,
+    SunIcon,
+    SunMoonIcon,
+    Tooltip,
+    Typography
+} from "@rebasepro/ui";
 import { DrawerNavigationGroup } from "./DrawerNavigationGroup";
-import { RebaseLogo } from "@rebasepro/core";
+import { LanguageToggle, RebaseLogo } from "@rebasepro/app";
 import { useApp } from "./app/useApp";
 
 /**
- * Default drawer used in the CMS
+ * Default drawer used in the CMS.
+ *
+ * When no `children` are provided, renders the full CMS navigation
+ * (collection groups, mode switch, plugin slots).
+ *
+ * When `children` **are** provided, renders the shared drawer shell
+ * (logo, scrollable area, footer actions, collapse toggle) with the
+ * custom content injected in the scrollable area. This lets consumers
+ * like the SaaS dashboard reuse the identical structural layout while
+ * supplying their own navigation items.
+ *
  * @group Core
  */
 export function DefaultDrawer({
     title,
     logo,
     logoDestination,
+    children,
+    footerActions,
     className,
     style
 }: {
     title?: React.ReactNode;
     logo?: string;
     logoDestination?: string;
+    /**
+     * Custom navigation content for the drawer.
+     * When provided, replaces the default CMS navigation (collection groups,
+     * mode switch, slots). The shared shell (logo, scroll area, footer
+     * actions, collapse toggle) is still rendered around it.
+     */
+    children?: React.ReactNode;
+    /**
+     * Custom content for the drawer footer actions area (language, theme, user menu).
+     * - `undefined` — renders the default `DrawerFooterActions`.
+     * - `null` — renders nothing (hides the footer actions).
+     * - `ReactNode` — renders the provided custom content.
+     */
+    footerActions?: React.ReactNode | null;
     className?: string;
     style?: React.CSSProperties;
 }) {
@@ -35,13 +81,11 @@ export function DefaultDrawer({
         drawerOpen,
         openDrawer,
         closeDrawer,
-        closeHover,
         logo: appLogo
     } = useApp();
 
     const resolvedLogo = logo ?? appLogo;
 
-    const [adminMenuOpen, setAdminMenuOpen] = React.useState(false);
     const scrollRef = React.useRef<HTMLDivElement>(null);
     const [scrolled, setScrolled] = React.useState(false);
 
@@ -51,28 +95,106 @@ export function DefaultDrawer({
         }
     };
 
+    return (
+        <div role="navigation" aria-label="Main navigation" className={cls("flex flex-col h-full relative grow w-full", className)} style={style}>
+
+            <DrawerLogo
+                logo={resolvedLogo}
+                title={title}
+                logoDestination={logoDestination}
+                drawerOpen={drawerOpen}
+                drawerHovered={drawerHovered}
+            />
+
+            <div
+                ref={scrollRef}
+                onScroll={handleScroll}
+                className={"flex-grow min-h-0 overflow-y-auto overflow-x-hidden no-scrollbar px-2"}
+                style={{
+                    maskImage: scrolled
+                        ? "linear-gradient(to bottom, transparent 0, black 20px, black calc(100% - 20px), transparent 100%)"
+                        : "linear-gradient(to bottom, black 0, black calc(100% - 20px), transparent 100%)"
+                }}>
+                {children ?? <CMSNavigationContent />}
+            </div>
+
+            {footerActions !== null && (
+                footerActions !== undefined
+                    ? footerActions
+                    : <DrawerFooterActions
+                        drawerOpen={drawerOpen}
+                        drawerHovered={drawerHovered}
+                    />
+            )}
+
+            <DrawerToggle
+                drawerOpen={drawerOpen}
+                drawerHovered={drawerHovered}
+                openDrawer={openDrawer}
+                closeDrawer={closeDrawer}
+            />
+        </div>
+    );
+}
+
+/**
+ * Default CMS navigation content — rendered inside DefaultDrawer when no
+ * custom `children` are provided.  Contains the mode switch, navigation
+ * groups, and header / footer plugin slots.
+ */
+function CMSNavigationContent() {
+
+    const {
+        drawerHovered,
+        drawerOpen,
+        closeDrawer,
+        closeHover
+    } = useApp();
+
+    const [adminMenuOpen, setAdminMenuOpen] = React.useState(false);
+
     const analyticsController = useAnalyticsController();
     const navigationState = useNavigationStateController();
     const context = useRebaseContext();
 
     const tooltipsOpen = drawerHovered && !drawerOpen && !adminMenuOpen;
     const largeLayout = useLargeLayout();
-    const navigate = useNavigate();
     const adminModeController = useAdminModeController();
-    const effectiveRoleController = useEffectiveRoleController();
     const registry = useRebaseRegistry();
-
-    const adminViews = navigationState.topLevelNavigation?.navigationEntries.filter(e => e.type === "admin") ?? [];
-
-    let groupsToRender = navigationState.topLevelNavigation?.groups ?? [];
-    if (adminModeController.mode === "studio") {
-        groupsToRender = groupsToRender.filter(g => STUDIO_NAVIGATION_GROUPS.includes(g));
-    } else {
-        groupsToRender = groupsToRender.filter(g => !STUDIO_NAVIGATION_GROUPS.includes(g));
-    }
+    const ResolvedDrawerNavigationGroup = useComponentOverride("Shell.DrawerNavigationGroup", DrawerNavigationGroup);
+
+    const allNavigationEntries = navigationState.topLevelNavigation?.navigationEntries ?? [];
+
+    // Build a set of Studio-only dev view slugs so we can distinguish them from
+    // CMS custom views added via <RebaseAdmin views={...}> or plugins.
+    const studioViewSlugs = useMemo(() => {
+        const slugs = new Set<string>();
+        (registry.studioConfig?.devViews ?? []).forEach(v => slugs.add(v.slug));
+        // The schema view is also a Studio dev view (auto-injected when collectionEditor is enabled)
+        if (registry.studioConfig && registry.cmsConfig?.collectionEditor) slugs.add("schema");
+        return slugs;
+    }, [registry.studioConfig, registry.cmsConfig?.collectionEditor]);
+
+    // Studio mode shows Studio dev views + admin entries (Users/Roles).
+    // Content mode shows collections, CMS custom views, and admin entries — but not Studio dev views.
+    const filteredEntries = adminModeController.mode === "studio"
+        ? allNavigationEntries.filter(e => (e.type === "view" && studioViewSlugs.has(e.slug)) || e.type === "admin")
+        : allNavigationEntries.filter(e => e.type !== "view" || !studioViewSlugs.has(e.slug));
+
+    // Derive groups from the filtered entries, preserving the order from topLevelNavigation.groups
+    const entryGroups = new Set(filteredEntries.map(e => e.group).filter(Boolean));
+    const orderedGroups = navigationState.topLevelNavigation?.groups ?? [];
+    const groupsToRender = [
+        ...orderedGroups.filter(g => entryGroups.has(g)),
+        ...[...entryGroups].filter(g => !orderedGroups.includes(g))
+    ];
 
     // Collapsible groups state - using "drawer" namespace for independent state from home page
-    const { isGroupCollapsed, toggleGroupCollapsed } = useCollapsedGroups(groupsToRender, "drawer");
+    const collapsedDefaults = useMemo(
+        () => buildCollapsedDefaults(registry.cmsConfig?.navigationGroupMappings, "drawer"),
+        [registry.cmsConfig?.navigationGroupMappings]
+    );
+    const { isGroupCollapsed, toggleGroupCollapsed } = useCollapsedGroups(groupsToRender, "drawer", collapsedDefaults);
 
     const headerSlot = useSlot("navigation.header", { drawerOpen,
 drawerHovered,
@@ -84,9 +206,6 @@ context });
     if (!navigationState.topLevelNavigation)
         return null;
 
-    const navigationEntries = navigationState.topLevelNavigation.navigationEntries;
-    const groups = navigationState.topLevelNavigation.groups;
-
     const onItemClick = (view: NavigationEntry) => {
         const eventName: AnalyticsEvent = view.type === "collection"
             ? "drawer_navigate_to_collection"
@@ -99,70 +218,37 @@ context });
         }
     };
 
-    const isStudioDark = adminModeController.mode === "studio";
     const drawerVisuallyOpen = drawerOpen || drawerHovered;
 
     return (
         <>
-            <div role="navigation" aria-label="Main navigation" className={cls("flex flex-col h-full relative grow w-full", className)} style={style}>
-
-                <DrawerLogo
-                    logo={resolvedLogo}
-                    title={title}
-                    logoDestination={logoDestination}
+            {registry.studioConfig && (
+                <DrawerModeSwitch
                     drawerOpen={drawerOpen}
                     drawerHovered={drawerHovered}
                 />
+            )}
 
-                {registry.studioConfig && (
-                    <DrawerModeSwitch
-                        drawerOpen={drawerOpen}
-                        drawerHovered={drawerHovered}
+            {headerSlot}
+
+            {groupsToRender.map((group) => {
+                const entriesInGroup = filteredEntries.filter(e => e.group === group);
+                return (
+                    <ResolvedDrawerNavigationGroup
+                        key={`drawer_group_${group}`}
+                        group={group}
+                        entries={entriesInGroup}
+                        collapsed={isGroupCollapsed(group)}
+                        onToggleCollapsed={() => toggleGroupCollapsed(group)}
+                        drawerOpen={drawerVisuallyOpen}
+                        tooltipsOpen={tooltipsOpen}
+                        adminMenuOpen={adminMenuOpen}
+                        onItemClick={onItemClick}
                     />
-                )}
-
-                {headerSlot}
-
-                <div
-                    ref={scrollRef}
-                    onScroll={handleScroll}
-                    className={"flex-grow overflow-y-auto overflow-x-visible no-scrollbar"}
-                    style={{
-                        maskImage: scrolled
-                            ? "linear-gradient(to bottom, transparent 0, black 20px, black calc(100% - 20px), transparent 100%)"
-                            : "linear-gradient(to bottom, black 0, black calc(100% - 20px), transparent 100%)"
-                    }}>
-
-                    {groupsToRender.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={drawerVisuallyOpen}
-                                tooltipsOpen={tooltipsOpen}
-                                adminMenuOpen={adminMenuOpen}
-                                onItemClick={onItemClick}
-                                hideHeader={adminModeController.mode === "studio"}
-                            />
-                        );
-                    })}
-
-                </div>
-
-                {footerSlot}
-
-                <DrawerToggle
-                    drawerOpen={drawerOpen}
-                    drawerHovered={drawerHovered}
-                    openDrawer={openDrawer}
-                    closeDrawer={closeDrawer}
-                />
-            </div>
+                );
+            })}
 
+            {footerSlot}
         </>
     );
 }
@@ -170,7 +256,7 @@ context });
 export function DrawerLogo({
     logo,
     title,
-    logoDestination,
+    logoDestination = "/",
     drawerOpen,
     drawerHovered
 }: {
@@ -181,7 +267,6 @@ export function DrawerLogo({
     drawerHovered: boolean;
 }) {
 
-    const urlController = useUrlController();
     const showFullContent = drawerOpen || (drawerHovered && !drawerOpen);
 
     return (
@@ -189,7 +274,7 @@ export function DrawerLogo({
             {/* Logo — always visible */}
             <Link
                 className="shrink-0 flex items-center justify-center w-[56px] h-[40px]"
-                to={logoDestination || urlController.basePath}
+                to={logoDestination}
             >
                 {logo
                     ? <img src={logo} alt="Logo" className="w-[28px] h-[28px] object-contain"/>
@@ -207,7 +292,7 @@ export function DrawerLogo({
                 {title && (
                     <Link
                         className="visited:text-inherit dark:visited:text-inherit block truncate"
-                        to={logoDestination || urlController.basePath}
+                        to={logoDestination}
                     >
                         {typeof title === "string"
                             ? <Typography variant="subtitle1" noWrap className="truncate">{title}</Typography>
@@ -243,7 +328,7 @@ export function DrawerToggle({
     const { t } = useTranslation();
 
     return (
-        <div className="shrink-0 mt-auto px-2 py-2">
+        <div className="shrink-0 mt-auto px-4 pt-0.5 pb-2">
             <Tooltip
                 title={isExpanded ? t("collapse") : t("expand")}
                 side="right"
@@ -263,8 +348,18 @@ export function DrawerToggle({
                     aria-expanded={isExpanded}
                     aria-label={isExpanded ? t("collapse") : t("expand")}
                     onClick={() => isExpanded ? closeDrawer() : openDrawer()}
+                    onKeyDown={(e) => {
+                        if (e.key === "Enter" || e.key === " ") {
+                            e.preventDefault();
+                            if (isExpanded) {
+                                closeDrawer();
+                            } else {
+                                openDrawer();
+                            }
+                        }
+                    }}
                 >
-                    <div className="shrink-0 flex items-center justify-center w-[56px] h-[24px] text-surface-500 dark:text-surface-400">
+                    <div className="shrink-0 flex items-center justify-center w-[44px] h-[24px] text-surface-500 dark:text-surface-400">
                         {isExpanded
                             ? <ChevronsLeftIcon size={iconSize.small}/>
                             : <ChevronsRightIcon size={iconSize.small}/>
@@ -306,7 +401,7 @@ function DrawerModeSwitch({
     return (
         <div
             className={cls(
-                "overflow-hidden transition-all duration-200 ease-in-out px-3",
+                "shrink-0 overflow-hidden transition-all duration-200 ease-in-out px-3",
                 showSwitch ? "opacity-100 h-7 mt-2 mb-0" : "opacity-0 pointer-events-none h-7 mt-2 mb-0"
             )}
         >
@@ -345,3 +440,140 @@ function DrawerModeSwitch({
         </div>
     );
 }
+
+/**
+ * Footer actions rendered at the bottom of the drawer, above the collapse/expand toggle.
+ * Replaces the app bar icons (language, theme, user avatar) with a drawer-native layout
+ * that adapts between collapsed (icons only) and expanded (full labels + user bar) states.
+ *
+ * @group Core
+ */
+export function DrawerFooterActions({
+    drawerOpen,
+    drawerHovered,
+    /**
+     * Custom content to render inside the user dropdown menu.
+     * When provided, these items are appended after the user info header
+     * and before the default Sign Out item.
+     */
+    dropDownActions,
+    /**
+     * Override the user object displayed in the footer.
+     * When omitted, falls back to `authController.user`.
+     */
+    user: userProp
+}: {
+    drawerOpen: boolean;
+    drawerHovered: boolean;
+    dropDownActions?: React.ReactNode;
+    user?: import("@rebasepro/types").User;
+}) {
+    const authController = useAuthController();
+    const {
+        mode,
+        setMode
+    } = useModeController();
+    const navigate = useNavigate();
+    const { t } = useTranslation();
+
+    const user = userProp ?? authController.user;
+    const showFullContent = drawerOpen || drawerHovered;
+    const isFloating = drawerHovered && !drawerOpen;
+    const portalRef = React.useRef<HTMLDivElement>(null);
+
+    // User avatar
+    let avatarComponent: React.ReactElement | null;
+    if (user) {
+        const initial = user?.displayName
+            ? user.displayName[0].toUpperCase()
+            : (user?.email ? user.email[0].toUpperCase() : "A");
+        avatarComponent = <Avatar src={user.photoURL ?? undefined} className="w-8 h-8 text-xs">
+            {initial}
+        </Avatar>;
+    } else if (user === undefined || authController.initialLoading) {
+        avatarComponent = <Skeleton className="w-8 h-8 rounded-full"/>;
+    } else {
+        avatarComponent = null;
+    }
+
+    return (
+        <div className="shrink-0 pt-2 pb-0" ref={portalRef}>
+            {avatarComponent && (
+                <div className="flex items-center px-[16px] py-1">
+                    <Menu
+                        trigger={
+                            <div
+                                className={cls(
+                                    "shrink-0 flex items-center justify-center w-[44px] cursor-pointer",
+                                    "rounded-md py-1",
+                                    "hover:bg-surface-accent-100 dark:hover:bg-surface-800",
+                                    "transition-colors duration-150"
+                                )}
+                                role="button"
+                                tabIndex={0}
+                                aria-label={t("user_menu") || "User menu"}
+                            >
+                                {avatarComponent}
+                            </div>
+                        }
+                        side="top"
+                        align="start"
+                    >
+                        {user && <div className="px-4 py-2 mb-1">
+                            {user.displayName && <Typography variant="body1" color="secondary">
+                                {user.displayName}
+                            </Typography>}
+                            {user.email && <Typography variant="body2" color="secondary">
+                                {user.email}
+                            </Typography>}
+                        </div>}
+
+                        {dropDownActions}
+
+                        {!dropDownActions && <>
+                            <MenuItem onClick={() => navigate("/settings")}>
+                                <SettingsIcon/>
+                                {t("account_settings")}
+                            </MenuItem>
+                            <MenuItem onClick={async () => {
+                                await authController.signOut();
+                                navigate("/");
+                            }}>
+                                <LogOutIcon/>
+                                {t("log_out")}
+                            </MenuItem>
+                        </>}
+                    </Menu>
+
+                    {/* Language + Theme — only when expanded */}
+                    {showFullContent && (
+                        <div className="flex items-center gap-0">
+                            <LanguageToggle/>
+                            <Menu
+                                trigger={
+                                    <IconButton
+                                        color="inherit"
+                                        aria-label={t("toggle_theme") || "Toggle theme"}
+                                        className="text-surface-500 dark:text-surface-400"
+                                    >
+                                        {mode === "dark"
+                                            ? <MoonIcon size={iconSize.small}/>
+                                            : mode === "light"
+                                                ? <SunIcon size={iconSize.small}/>
+                                                : <SunMoonIcon size={iconSize.small}/>}
+                                    </IconButton>
+                                }
+                                portalContainer={portalRef.current}
+                                side="top"
+                            >
+                                <MenuItem onClick={() => setMode("dark")}><MoonIcon size={iconSize.smallest}/> {t("dark_mode")}</MenuItem>
+                                <MenuItem onClick={() => setMode("light")}><SunIcon size={iconSize.smallest}/> {t("light_mode")}</MenuItem>
+                                <MenuItem onClick={() => setMode("system")}><SunMoonIcon size={iconSize.smallest}/> {t("system_mode")}</MenuItem>
+                            </Menu>
+                        </div>
+                    )}
+                </div>
+            )}
+        </div>
+    );
+}

package/src/components/DeleteEntityDialog.tsx

@@ -1,5 +1,5 @@
-import type { EntityCollection } from "@rebasepro/types";
-import { Entity, EntityCallbacks } from "@rebasepro/types";
+import type { CollectionConfig } from "@rebasepro/types";
+import { Entity, CollectionCallbacks } from "@rebasepro/types";
 import React, { useCallback, useMemo, useState } from "react";
 import { Button, CircularProgress, Dialog, DialogActions, DialogContent, DialogTitle } from "@rebasepro/ui";
 import {
@@ -9,17 +9,17 @@ import {
     useData,
     useSnackbarController,
     useTranslation
-} from "@rebasepro/core";
+} from "@rebasepro/app";
 import { useCMSContext } from "../hooks";
-import { EntityView } from "./EntityView";
+import { EntityViewBinding } from "./EntityViewBinding";
 
 export interface DeleteEntityDialogProps<M extends Record<string, unknown>> {
     entityOrEntitiesToDelete?: Entity<M> | Entity<M>[],
     path: string,
-    collection: EntityCollection<M>
+    collection: CollectionConfig<M>
     open: boolean;
     onClose: () => void;
-    callbacks?: EntityCallbacks<M>,
+    callbacks?: CollectionCallbacks<M>,
 
     onEntityDelete?(path: string, entity: Entity<M>): void;
 
@@ -135,7 +135,7 @@ export function DeleteEntityDialog<M extends Record<string, unknown>>({
     } else {
         const entity = entityOrEntities as Entity<M> | undefined;
         content = entity
-            ? <EntityView
+            ? <EntityViewBinding
                 entity={entity}
                 collection={collection}
                 path={path}/>