@rebasepro/cms 0.0.1-canary.4d4fb3e

package/src/components/DefaultAppBar.tsx

@@ -0,0 +1,280 @@
+import React from "react";
+
+import { Link, useNavigate } from "react-router-dom";
+import { RebaseLogo, LanguageToggle } from "@rebasepro/core";
+import { ErrorBoundary } from "@rebasepro/ui";
+import {
+    Avatar,
+    BrightnessMediumIcon,
+    cls,
+    DarkModeIcon,
+    IconButton,
+    LightModeIcon,
+    LogoutIcon,
+    Menu,
+    MenuItem,
+    Skeleton,
+    Typography,
+    SettingsIcon
+} from "@rebasepro/ui";
+import { useAuthController, useLargeLayout, useModeController, useAdminModeController, useTranslation } from "@rebasepro/core";
+import { useUrlController } from "../hooks";
+import { User } from "@rebasepro/types";
+import { useApp } from "./app/useApp";
+import { useBreadcrumbsController } from "../hooks/useBreadcrumbsController";
+import { UserSettingsView } from "@rebasepro/core";
+
+
+export type DefaultAppBarProps<ADDITIONAL_PROPS = object> = {
+
+    /**
+     * The content of the app bar, usually a title or logo. This includes a link to the home page.
+     */
+    title?: React.ReactNode;
+
+    /**
+     * A component that gets rendered on the upper side to the end of the main toolbar
+     */
+    endAdornment?: React.ReactNode;
+
+    /**
+     * A component that gets rendered on the upper side to the start of the main toolbar
+     */
+    startAdornment?: React.ReactNode;
+
+    dropDownActions?: React.ReactNode;
+
+    includeModeToggle?: boolean;
+
+    className?: string;
+
+    style?: React.CSSProperties;
+
+    logo?: string;
+
+    user?: User;
+} & ADDITIONAL_PROPS;
+
+/**
+ * This component renders the main app bar of Rebase.
+ * You will likely not need to use this component directly.
+ *
+
+ */
+export const DefaultAppBar = function DefaultAppBar({
+    title,
+    endAdornment,
+    startAdornment,
+    dropDownActions,
+    includeModeToggle = true,
+    className,
+    style,
+    user: userProp,
+    logo: logoProp,
+}: DefaultAppBarProps) {
+
+    const {
+        hasDrawer,
+        drawerOpen,
+        logo: appLogo
+    } = useApp();
+
+    const logo = logoProp ?? appLogo;
+
+    const navigation = useUrlController();
+
+    const breadcrumbs = useBreadcrumbsController();
+
+    const authController = useAuthController();
+    const adminModeController = useAdminModeController();
+    const {
+        mode,
+        setMode
+    } = useModeController();
+
+    const navigate = useNavigate();
+
+    const largeLayout = useLargeLayout();
+
+    const user = userProp ?? authController.user;
+    const { t } = useTranslation();
+
+    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}>
+            {initial}
+        </Avatar>;
+    } else if (user === undefined || authController.initialLoading) {
+        avatarComponent = <div className={"p-1 flex justify-center"}>
+            <Skeleton className={"w-10 h-10 rounded-full"} />
+        </div>;
+    } else {
+        avatarComponent = null;
+    }
+
+    const isStudioDark = adminModeController.mode === "studio";
+
+    return (
+        <div
+            style={style}
+            className={cls("w-full h-16 transition-all ease-in duration-75 absolute top-0 max-w-full overflow-x-auto no-scrollbar",
+                "flex flex-row gap-2 px-4 items-center",
+                isStudioDark ? "dark:bg-surface-950" : "",
+                {
+                    "pl-[19rem]": drawerOpen && largeLayout,
+                    "pl-24": hasDrawer && !(drawerOpen && largeLayout),
+                    "z-10": largeLayout,
+                    "duration-100": drawerOpen && largeLayout,
+                },
+                className)}>
+
+
+            {navigation && (!hasDrawer || title) && <div className="mr-2 hidden lg:block">
+                <Link
+                    className="visited:text-inherit dark:visited:text-inherit block"
+                    to={navigation?.basePath ?? "/"}
+                >
+                    <div className={"flex flex-row gap-4"}>
+                        {!hasDrawer && (logo
+                            ? <img src={logo}
+                                alt="Logo"
+                                className={cls("w-[32px] h-[32px] object-contain")} />
+                            : <RebaseLogo width={"32px"} height={"32px"} />)}
+
+                        {typeof title === "string"
+                            ? <Typography variant="subtitle1"
+                                noWrap>
+                                {title}
+                            </Typography>
+                            : title}
+                    </div>
+                </Link>
+            </div>}
+
+
+
+            <div className="mr-8 hidden lg:block">
+                <div className={"flex flex-row gap-2 items-center"}>
+                    {breadcrumbs.breadcrumbs.map((breadcrumb, index) => {
+                        return <React.Fragment key={breadcrumb.url + "_" + index}>
+                            {index > 0 && (
+                                <Typography variant={"caption"} color={"secondary"}>
+                                    /
+                                </Typography>
+                            )}
+                            <Link
+                                key={index}
+                                className="visited:text-inherit dark:visited:text-inherit block"
+                                to={breadcrumb.url}
+                            >
+                                <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}
+
+
+            {startAdornment}
+
+            <div className={"grow"} />
+
+
+
+            {endAdornment &&
+                <ErrorBoundary>
+                    {endAdornment}
+                </ErrorBoundary>}
+
+            {navigation && (
+                <div className="mr-2 hidden sm:flex bg-surface-100 dark:bg-surface-800 rounded-lg p-0.5 border border-surface-200 dark:border-surface-700">
+                    <button
+                        onClick={() => {
+                            adminModeController.setMode("content");
+                            navigate(navigation?.basePath ?? "/");
+                        }}
+                        className={cls("px-3 py-1 text-xs font-semibold rounded-md transition-all", adminModeController.mode === "content" ? "bg-white dark:bg-surface-900 shadow-sm text-primary dark:text-primary-400" : "text-surface-500 hover:text-surface-900 dark:hover:text-white")}
+                    >
+                        Content
+                    </button>
+                    <button
+                        onClick={() => {
+                            adminModeController.setMode("studio");
+                            navigate(navigation?.basePath === "/" ? "/s" : `${navigation?.basePath ?? ""}/s`);
+                        }}
+                        className={cls("px-3 py-1 text-xs font-semibold rounded-md transition-all", adminModeController.mode === "studio" ? "bg-white dark:bg-surface-900 shadow-sm text-primary dark:text-primary-400" : "text-surface-500 hover:text-surface-900 dark:hover:text-white")}
+                    >
+                        Studio
+                    </button>
+                </div>
+            )}
+
+            <LanguageToggle />
+
+            {includeModeToggle &&
+                <Menu
+                    trigger={<IconButton
+                        color="inherit"
+                        aria-label="Open drawer"
+>
+                        {mode === "dark"
+                            ? <DarkModeIcon />
+                            : <LightModeIcon />}
+                    </IconButton>}>
+                    <MenuItem onClick={() => setMode("dark")}><DarkModeIcon size={"smallest"} /> {t("dark_mode")}</MenuItem>
+                    <MenuItem onClick={() => setMode("light")}><LightModeIcon size={"smallest"} /> {t("light_mode")} </MenuItem>
+                    <MenuItem onClick={() => setMode("system")}> <BrightnessMediumIcon
+                        size={"smallest"} />{t("system_mode")}</MenuItem>
+                </Menu>}
+
+            <Menu trigger={avatarComponent}>
+                {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>
+
+        </div>
+    );
+}

package/src/components/DefaultDrawer.tsx

@@ -0,0 +1,276 @@
+import type { NavigationEntry, NavigationResult } from "@rebasepro/types";
+import React from "react";
+
+import { useCollapsedGroups, useLargeLayout, useAdminModeController, useEffectiveRoleController, useTranslation, useSlot, useRebaseContext, useAnalyticsController } from "@rebasepro/core";
+import { useNavigationStateController, useUrlController } from "../hooks";
+
+import { Link, useNavigate } from "react-router-dom";
+import { AnalyticsEvent } from "@rebasepro/types";
+import { cls, Tooltip, Typography } from "@rebasepro/ui";
+import { DrawerNavigationGroup } from "./DrawerNavigationGroup";
+import { RebaseLogo } from "@rebasepro/core";import { useApp } from "./app/useApp";
+
+/**
+ * Default drawer used in the CMS
+ * @group Core
+ */
+export function DefaultDrawer({
+    title,
+    logo,
+    logoDestination,
+    className,
+    style,
+}: {
+    title?: React.ReactNode;
+    logo?: string;
+    logoDestination?: string;
+    className?: string;
+    style?: React.CSSProperties;
+}) {
+
+    const {
+        drawerHovered,
+        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);
+
+    const handleScroll = () => {
+        if (scrollRef.current) {
+            setScrolled(scrollRef.current.scrollTop > 0);
+        }
+    };
+
+    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 adminViews = navigationState.topLevelNavigation?.navigationEntries.filter(e => e.type === "admin") ?? [];
+
+    let groupsToRender = navigationState.topLevelNavigation?.groups ?? [];
+    if (adminModeController.mode === "studio") {
+        groupsToRender = groupsToRender.filter(g => g === "Database" || g === "Schema" || g === "Admin" || g === "Storage");
+    } else {
+        groupsToRender = groupsToRender.filter(g => g !== "Database" && g !== "Schema" && g !== "Storage");
+    }
+
+    // Collapsible groups state - using "drawer" namespace for independent state from home page
+    const { isGroupCollapsed, toggleGroupCollapsed } = useCollapsedGroups(groupsToRender, "drawer");
+
+    const headerSlot = useSlot("navigation.header", { drawerOpen, drawerHovered, context });
+    const footerSlot = useSlot("navigation.footer", { drawerOpen, drawerHovered, 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"
+            : (view.type === "view" ? "drawer_navigate_to_view" : "unmapped_event");
+        analyticsController.onAnalyticsEvent?.(eventName, { url: view.url });
+        if (!largeLayout) {
+            closeDrawer();
+        } else if (!drawerOpen) {
+            closeHover();
+        }
+    };
+
+    const isStudioDark = adminModeController.mode === "studio";
+    const drawerVisuallyOpen = drawerOpen || drawerHovered;
+
+    return (
+        <>
+            <div className={cls("flex flex-col h-full relative grow w-full", isStudioDark ? "dark:bg-surface-950" : "", className)} style={style}>
+
+                <DrawerLogo
+                    logo={resolvedLogo}
+                    title={title}
+                    logoDestination={logoDestination}
+                    drawerOpen={drawerOpen}
+                    drawerHovered={drawerHovered}
+                />
+
+                {headerSlot}
+
+                <div
+                    ref={scrollRef}
+                    onScroll={handleScroll}
+                    className={"mt-1 flex-grow overflow-scroll 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>
+
+        </>
+    );
+}
+
+/**
+ * Logo section at the top of the drawer.
+ * The logo is always visible (even when collapsed). Title appears on open/hover.
+ */
+import { KeyboardDoubleArrowLeftIcon, KeyboardDoubleArrowRightIcon } from "@rebasepro/ui";
+
+export function DrawerLogo({
+    logo,
+    title,
+    logoDestination,
+    drawerOpen,
+    drawerHovered,
+}: {
+    logo?: string;
+    title?: React.ReactNode;
+    logoDestination?: string;
+    drawerOpen: boolean;
+    drawerHovered: boolean;
+}) {
+
+    const urlController = useUrlController();
+    const showFullContent = drawerOpen || (drawerHovered && !drawerOpen);
+
+    return (
+        <div className="flex flex-row items-center shrink-0 pt-4 pb-0 px-2">
+            {/* Logo — always visible */}
+            <Link
+                className="shrink-0 flex items-center justify-center w-[56px] h-[40px]"
+                to={logoDestination || urlController.basePath}
+            >
+                {logo
+                    ? <img src={logo} alt="Logo" className="w-[28px] h-[28px] object-contain" />
+                    : <RebaseLogo width="28px" height="28px" />
+                }
+            </Link>
+
+            {/* Title (fades in when expanded or hovered) */}
+            <div
+                className={cls(
+                    "flex flex-row items-center overflow-hidden transition-all duration-200 ease-in-out",
+                    showFullContent ? "opacity-100 w-full ml-1" : "opacity-0 w-0 ml-0"
+                )}
+            >
+                {title && (
+                    <Link
+                        className="visited:text-inherit dark:visited:text-inherit block truncate"
+                        to={logoDestination || urlController.basePath}
+                    >
+                        {typeof title === "string"
+                            ? <Typography variant="subtitle1" noWrap className="truncate">{title}</Typography>
+                            : title
+                        }
+                    </Link>
+                )}
+            </div>
+        </div>
+    );
+}
+
+/**
+ * Toggle button at the bottom of the drawer.
+ * Uses double-chevron icons to indicate collapse/expand direction.
+ */
+export function DrawerToggle({
+    drawerOpen,
+    drawerHovered,
+    openDrawer,
+    closeDrawer,
+}: {
+    drawerOpen: boolean;
+    drawerHovered: boolean;
+    openDrawer: () => void;
+    closeDrawer: () => void;
+}) {
+    const isExpanded = drawerOpen;
+    const isHovered = drawerHovered && !drawerOpen;
+    const isFloating = isHovered;
+    const showFullContent = isExpanded || isHovered;
+
+    const { t } = useTranslation();
+
+    return (
+        <div className="shrink-0 mt-auto px-2 py-2">
+            <Tooltip
+                title={isExpanded ? t("collapse") : t("expand")}
+                side="right"
+                sideOffset={12}
+                asChild={true}
+                open={isFloating ? false : undefined}
+            >
+                <div
+                    className={cls(
+                        "flex flex-row items-center rounded-lg cursor-pointer",
+                        "hover:bg-surface-accent-100 dark:hover:bg-surface-800",
+                        "transition-colors duration-150",
+                        "py-2"
+                    )}
+                    onClick={() => isExpanded ? closeDrawer() : openDrawer()}
+                >
+                    <div className="shrink-0 flex items-center justify-center w-[56px] h-[24px] text-surface-500 dark:text-surface-400">
+                        {isExpanded
+                            ? <KeyboardDoubleArrowLeftIcon size="small" />
+                            : <KeyboardDoubleArrowRightIcon size="small" />
+                        }
+                    </div>
+                    <div className={cls(
+                        "overflow-hidden transition-all duration-200 ease-in-out",
+                        showFullContent ? "opacity-100 w-auto" : "opacity-0 w-0"
+                    )}>
+                        <Typography
+                            variant="body2"
+                            className="text-surface-500 dark:text-surface-400 select-none whitespace-nowrap"
+                        >
+                            {isExpanded ? t("collapse") : t("expand")}
+                        </Typography>
+                    </div>
+                </div>
+            </Tooltip>
+        </div>
+    );
+}