@rebasepro/admin 0.2.1 → 0.2.4

package/src/components/DefaultAppBar.tsx

@@ -44,8 +44,27 @@ export type DefaultAppBarProps<ADDITIONAL_PROPS = object> = {
 
     dropDownActions?: React.ReactNode;
 
+    /**
+     * Whether to render the dark/light/system mode toggle in the app bar.
+     * Set to `false` when the drawer owns this action.
+     * @default true
+     */
     includeModeToggle?: boolean;
 
+    /**
+     * Whether to render the language switcher in the app bar.
+     * Set to `false` when the drawer owns this action.
+     * @default true
+     */
+    includeLanguageToggle?: boolean;
+
+    /**
+     * Whether to render the user avatar / menu in the app bar.
+     * Set to `false` when the drawer owns this action.
+     * @default true
+     */
+    includeUserMenu?: boolean;
+
     className?: string;
 
     style?: React.CSSProperties;
@@ -67,6 +86,8 @@ export const DefaultAppBar = function DefaultAppBar({
     startAdornment,
     dropDownActions,
     includeModeToggle = true,
+    includeLanguageToggle = true,
+    includeUserMenu = true,
     className,
     style,
     user: userProp,
@@ -193,8 +214,6 @@ export const DefaultAppBar = function DefaultAppBar({
             </div>
             {startAdornment}
 
-            {startAdornment}
-
             <div className={"grow"}/>
 
             {endAdornment &&
@@ -202,7 +221,7 @@ export const DefaultAppBar = function DefaultAppBar({
                     {endAdornment}
                 </ErrorBoundary>}
 
-            <LanguageToggle/>
+            {includeLanguageToggle && <LanguageToggle/>}
 
             {includeModeToggle &&
                 <Menu
@@ -220,34 +239,36 @@ export const DefaultAppBar = function DefaultAppBar({
                         size={iconSize.smallest}/>{t("system_mode")}</MenuItem>
                 </Menu>}
 
-            <Menu trigger={<div aria-label="User menu" role="button">{avatarComponent}</div>}>
-                {user && <div className={"px-4 py-2 mb-2"}>
-                    {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("project_settings")}
-                    </MenuItem>
-                    <MenuItem onClick={async () => {
-                        await authController.signOut();
-                        // replace current route with home
-                        navigate("/");
-                    }}>
-                        <LogOutIcon/>
-                        {t("log_out")}
-                    </MenuItem>
-                </>}
-
-            </Menu>
+
+            {includeUserMenu &&
+                <Menu trigger={<div aria-label="User menu" role="button">{avatarComponent}</div>}>
+                    {user && <div className={"px-4 py-2 mb-2"}>
+                        {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();
+                            // replace current route with home
+                            navigate("/");
+                        }}>
+                            <LogOutIcon/>
+                            {t("log_out")}
+                        </MenuItem>
+                    </>}
+
+                </Menu>}
 
         </div>
     );

package/src/components/DefaultDrawer.tsx

@@ -1,32 +1,77 @@
 import type { NavigationEntry, NavigationResult } from "@rebasepro/types";
 import React, { useMemo } from "react";
 
-import { useCollapsedGroups, buildCollapsedDefaults, useLargeLayout, useAdminModeController, useTranslation, useSlot, useRebaseContext, useAnalyticsController, useRebaseRegistry } from "@rebasepro/core";
+import { useCollapsedGroups, buildCollapsedDefaults, useLargeLayout, useAdminModeController, useAuthController, useModeController, useTranslation, useSlot, useRebaseContext, useAnalyticsController, useRebaseRegistry } from "@rebasepro/core";
 import { useUrlController } from "../hooks/navigation/contexts/UrlContext";
 import { useNavigationStateController } from "../hooks/navigation/contexts/NavigationStateContext";
 
 
 import { Link, useNavigate } from "react-router-dom";
 import { AnalyticsEvent } from "@rebasepro/types";
-import { ChevronsLeftIcon, ChevronsRightIcon, cls, iconSize, Tooltip, Typography } from "@rebasepro/ui";
+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/core";
 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;
 }) {
@@ -36,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);
 
@@ -52,6 +95,64 @@ 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();
@@ -94,8 +195,6 @@ context });
     if (!navigationState.topLevelNavigation)
         return null;
 
-    const groups = navigationState.topLevelNavigation.groups;
-
     const onItemClick = (view: NavigationEntry) => {
         const eventName: AnalyticsEvent = view.type === "collection"
             ? "drawer_navigate_to_collection"
@@ -108,69 +207,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 (
+                    <DrawerNavigationGroup
+                        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 min-h-0 overflow-y-auto overflow-x-hidden 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 = filteredEntries.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}
-                            />
-                        );
-                    })}
-
-                </div>
-
-                {footerSlot}
-
-                <DrawerToggle
-                    drawerOpen={drawerOpen}
-                    drawerHovered={drawerHovered}
-                    openDrawer={openDrawer}
-                    closeDrawer={closeDrawer}
-                />
-            </div>
+                );
+            })}
 
+            {footerSlot}
         </>
     );
 }
@@ -178,7 +245,7 @@ context });
 export function DrawerLogo({
     logo,
     title,
-    logoDestination,
+    logoDestination = "/",
     drawerOpen,
     drawerHovered
 }: {
@@ -189,7 +256,6 @@ export function DrawerLogo({
     drawerHovered: boolean;
 }) {
 
-    const urlController = useUrlController();
     const showFullContent = drawerOpen || (drawerHovered && !drawerOpen);
 
     return (
@@ -197,7 +263,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"/>
@@ -215,7 +281,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>
@@ -271,8 +337,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}/>
@@ -353,3 +429,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 pb-1" 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/DrawerNavigationItem.tsx

@@ -33,7 +33,7 @@ export function DrawerNavigationItem({
                 width: "100%",
                 transition: drawerOpen ? "width 150ms ease-in" : undefined
             }}
-            className={({ isActive }: any) => cls("rounded-md truncate",
+            className={({ isActive }: { isActive: boolean }) => cls("rounded-md truncate",
                 "hover:bg-surface-100 dark:hover:bg-surface-800/60 text-surface-700 dark:text-surface-300 hover:text-surface-900 dark:hover:text-white",
                 "flex flex-row items-center",
                 drawerOpen ? "pr-4 h-[30px]" : "h-[30px]",

package/src/components/EntityCollectionTable/EntityCollectionTable.tsx

@@ -1,6 +1,6 @@
 import type { AdditionalFieldDelegate } from "@rebasepro/types";
 import React, { useCallback, useMemo, useRef } from "react";
-import { CollectionSize, Entity, RebaseContext, User } from "@rebasepro/types";
+import { CollectionSize, Entity, RebaseContext, User, Property } from "@rebasepro/types";
 import { PropertyTableCell } from "./PropertyTableCell";
 import { ErrorBoundary } from "@rebasepro/ui";
 import { useRebaseContext, useLargeLayout } from "@rebasepro/core";
@@ -138,11 +138,12 @@ export const EntityCollectionTable = function EntityCollectionTable<M extends Re
 
         const propertyKey = column.key;
 
-        let disabled = column.custom?.disabled;
+        const columnCustom = column.custom as { disabled?: boolean; resolvedProperty?: Property } | undefined;
+        let disabled: boolean = columnCustom?.disabled ?? false;
         const property = getPropertyFor?.({
             propertyKey,
             entity
-        }) ?? column.custom.resolvedProperty;
+        }) ?? columnCustom?.resolvedProperty;
         if (!property?.ui?.disabled) {
             disabled = false;
         }
@@ -231,7 +232,7 @@ export const EntityCollectionTable = function EntityCollectionTable<M extends Re
                 disabledTooltip={"This column can't be edited directly"}
                 sortableNodeRef={sortableNodeRef}
                 sortableStyle={sortableStyle}
-                sortableAttributes={sortableAttributes}
+                sortableAttributes={sortableAttributes as Record<string, string | number | undefined>}
                 isDragging={isDragging}
                 isDraggable={isDraggable}
                 frozen={frozen}
@@ -337,7 +338,7 @@ export const EntityCollectionTable = function EntityCollectionTable<M extends Re
                 disabled={true}
                 sortableNodeRef={props.sortableNodeRef}
                 sortableStyle={props.sortableStyle}
-                sortableAttributes={props.sortableAttributes}
+                sortableAttributes={props.sortableAttributes as Record<string, string | number | undefined>}
                 isDragging={props.isDragging}
                 isDraggable={props.isDraggable}
                 frozen={props.frozen}>

package/src/components/EntityCollectionTable/PropertyTableCell.tsx

@@ -1,4 +1,4 @@
-import { useCellSelected } from "../SelectableTable/SelectionStore";
+import { useCellSelected, createSelectionStore } from "../SelectableTable/SelectionStore";
 import type { ArrayProperty, NumberProperty, Property, ReferenceProperty, StringProperty } from "@rebasepro/types";
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { deepEqual as equal } from "fast-equals"
@@ -76,7 +76,9 @@ export const PropertyTableCell = React.memo<PropertyTableCellProps<any>>(
             setPopupCell
         } = useSelectableTableController();
 
-        const selected = useCellSelected(selectionStore, propertyKey, entity.path, entity.id);
+        const dummySelectionStore = useMemo(() => createSelectionStore(), []);
+        const activeSelectionStore = selectionStore || dummySelectionStore;
+        const selected = useCellSelected(activeSelectionStore, propertyKey, entity.path, entity.id);
 
         const [internalValue, setInternalValue] = useState<any | null>(value);
         const internalValueRef = useRef(value);
@@ -114,13 +116,13 @@ export const PropertyTableCell = React.memo<PropertyTableCellProps<any>>(
             [onValueUpdated, value]
         );
 
-        const saveValues = async (value: any) => {
+        const saveValues = async (value: unknown) => {
             if (equal(value, internalValueRef.current))
                 return;
             const result = await validation.safeParseAsync(value);
             if (result.success) {
                     setValidationError(undefined);
-                    internalValueRef.current = value;
+                    internalValueRef.current = value as T;
                     if (onValueChange) {
                         try {
                             onValueChange({
@@ -153,9 +155,9 @@ export const PropertyTableCell = React.memo<PropertyTableCellProps<any>>(
                 });
         }, [internalValue, validation, propertyKey, property, entity]);
 
-        const updateValue = (newValue: any | null) => {
+        const updateValue = (newValue: unknown | null) => {
 
-            let updatedValue: any;
+            let updatedValue: unknown;
             if (newValue === undefined) {
                 updatedValue = null;
             } else {
@@ -165,7 +167,7 @@ export const PropertyTableCell = React.memo<PropertyTableCellProps<any>>(
             saveValues(updatedValue);
         };
 
-        useClearRestoreValue<any>({
+        useClearRestoreValue<unknown>({
             property,
             value: internalValue,
             setValue: updateValue