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

package/src/components/{SideEntityProvider.tsx → SidePanelProvider.tsx}

@@ -1,22 +1,23 @@
+import type { SidePanelController } from "@rebasepro/types";
 import React from "react";
-import { useBuildSideEntityController } from "../hooks/useBuildSideEntityController";
+import { useBuildSidePanel } from "../hooks/useBuildSidePanel";
 import { useBuildSideDialogsController } from "../hooks/useBuildSideDialogsController";
-import { SideEntityControllerContext } from "../hooks/useSideEntityController";
+import { SidePanelControllerContext } from "../hooks/useSidePanel";
 import { SideDialogsControllerContext } from "../contexts/SideDialogsControllerContext";
 import { BreadcrumbsProvider } from "../contexts/BreacrumbsContext";
 import { useBreadcrumbsController } from "../hooks/useBreadcrumbsController";
 import { useCollectionRegistryController, useUrlController } from "../index";
 import { useNavigationStateController } from "../index";
-import { useAuthController, useBridgeRegistration } from "@rebasepro/core";
+import { useAuthController, useBridgeRegistration } from "@rebasepro/app";
 
 /**
- * Provider that builds the SideEntityController and makes it available
- * via the SideEntityControllerContext from @rebasepro/core.
+ * Provider that builds the SidePanelController and makes it available
+ * via the SidePanelControllerContext from @rebasepro/app.
  *
- * After the CMS extraction refactor, `useBuildSideEntityController` lives
+ * After the CMS extraction refactor, `useBuildSidePanel` lives
  * in the CMS package while the context it feeds into lives in core.
  * This provider bridges the two: place it inside the `<Rebase>` tree and
- * above any component that calls `useSideEntityController()`.
+ * above any component that calls `useSidePanel()`.
  *
  * Also auto-registers the side entity controller and breadcrumbs into the
  * self-assembling Studio bridge (when a StudioBridgeRegistryProvider is
@@ -26,25 +27,25 @@ import { useAuthController, useBridgeRegistration } from "@rebasepro/core";
  * ```tsx
  * <Rebase ...>
  *   {({ loading }) => (
- *     <SideEntityProvider>
+ *     <SidePanelProvider>
  *       <RebaseRoutes>
  *         ...
  *       </RebaseRoutes>
- *     </SideEntityProvider>
+ *     </SidePanelProvider>
  *   )}
  * </Rebase>
  * ```
  *
  * @group Components
  */
-export function SideEntityProvider({ children }: { children: React.ReactNode }) {
+export function SidePanelProvider({ children }: { children: React.ReactNode }) {
     const collectionRegistryController = useCollectionRegistryController();
     const urlController = useUrlController();
     const navigationStateController = useNavigationStateController();
     const sideDialogsController = useBuildSideDialogsController();
     const authController = useAuthController();
 
-    const sideEntityController = useBuildSideEntityController(
+    const sidePanelController = useBuildSidePanel(
         collectionRegistryController,
         urlController,
         navigationStateController,
@@ -55,10 +56,10 @@ export function SideEntityProvider({ children }: { children: React.ReactNode })
     return (
         <BreadcrumbsProvider>
             <SideDialogsControllerContext.Provider value={sideDialogsController}>
-                <SideEntityControllerContext.Provider value={sideEntityController}>
-                    <BridgeAutoRegistrar sideEntityController={sideEntityController}/>
+                <SidePanelControllerContext.Provider value={sidePanelController}>
+                    <BridgeAutoRegistrar sidePanelController={sidePanelController}/>
                     {children}
-                </SideEntityControllerContext.Provider>
+                </SidePanelControllerContext.Provider>
             </SideDialogsControllerContext.Provider>
         </BreadcrumbsProvider>
     );
@@ -68,9 +69,9 @@ export function SideEntityProvider({ children }: { children: React.ReactNode })
  * Internal component that auto-registers side entity and breadcrumbs
  * into the Studio bridge. Must be a child of BreadcrumbsProvider.
  */
-function BridgeAutoRegistrar({ sideEntityController }: { sideEntityController: any }) {
+function BridgeAutoRegistrar({ sidePanelController }: { sidePanelController: SidePanelController }) {
     const breadcrumbs = useBreadcrumbsController();
-    useBridgeRegistration("sideEntityController", sideEntityController);
+    useBridgeRegistration("sidePanelController", sidePanelController);
     useBridgeRegistration("breadcrumbs", breadcrumbs);
     return null;
 }

package/src/components/UserSelector.tsx

@@ -1,15 +1,120 @@
 
-import * as PopoverPrimitive from "@radix-ui/react-popover";
+import {
+    ChevronDownIcon,
+    CircularProgress,
+    cls,
+    defaultBorderMixin,
+    fieldBackgroundDisabledMixin,
+    fieldBackgroundHoverMixin,
+    fieldBackgroundInvisibleMixin,
+    fieldBackgroundMixin,
+    focusedDisabled,
+    IconButton,
+    iconSize,
+    PopoverPrimitive,
+    SearchIcon,
+    Separator,
+    useInjectStyles,
+    XIcon
+} from "@rebasepro/ui";
 import * as React from "react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { Command as CommandPrimitive } from "cmdk";
-import { CircularProgress, cls, defaultBorderMixin, fieldBackgroundDisabledMixin, fieldBackgroundHoverMixin, fieldBackgroundInvisibleMixin, fieldBackgroundMixin, focusedDisabled, IconButton, Separator, useInjectStyles , iconSize } from "@rebasepro/ui";
-import { XIcon, ChevronDownIcon, SearchIcon } from "lucide-react";
 import { User } from "@rebasepro/types";
-import { useUserSelector, UserSelectorItem } from "@rebasepro/core";
-import { UserDisplay } from "@rebasepro/core";
+import { useRebaseClient, useAuthController, UserDisplay } from "@rebasepro/app";
 import { EmptyValue } from "../preview";
 
+interface UserSelectorItem {
+    uid: string;
+    label: string;
+    description?: string;
+    user: User;
+}
+
+const DEFAULT_PAGE_SIZE = 10;
+
+/**
+ * Local hook to fetch users from the collection REST API with search and pagination.
+ */
+function useUserSelector({ pageSize = DEFAULT_PAGE_SIZE }: { pageSize?: number } = {}) {
+    const client = useRebaseClient<{ baseUrl?: string }>();
+    const { getAuthToken } = useAuthController();
+
+    const [items, setItems] = useState<UserSelectorItem[]>([]);
+    const [isLoading, setIsLoading] = useState(false);
+    const [hasMore, setHasMore] = useState(true);
+    const [currentSearch, setCurrentSearch] = useState("");
+    const offsetRef = useRef(0);
+    const userCacheRef = useRef<Map<string, User>>(new Map());
+
+    const fetchUsers = useCallback(async (searchStr: string, offset: number, append: boolean) => {
+        if (!client?.baseUrl) return;
+        setIsLoading(true);
+        try {
+            const token = await getAuthToken?.();
+            const params = new URLSearchParams({
+                limit: String(pageSize),
+                offset: String(offset)
+            });
+            if (searchStr) params.set("search", searchStr);
+            const response = await fetch(`${client.baseUrl}/api/users?${params}`, {
+                headers: token ? { Authorization: `Bearer ${token}` } : {}
+            });
+            if (!response.ok) throw new Error("Failed to fetch users");
+            const data = await response.json();
+            const rows: Record<string, unknown>[] = data.data ?? data.users ?? [];
+            const newItems: UserSelectorItem[] = rows.map((r: Record<string, unknown>) => {
+                const user: User = {
+                    uid: (r.id as string) ?? "",
+                    email: (r.email as string) ?? "",
+                    displayName: (r.displayName as string) ?? (r.display_name as string) ?? null,
+                    photoURL: (r.photoURL as string) ?? (r.photo_url as string) ?? null,
+                    providerId: "custom",
+                    isAnonymous: false,
+                    roles: (r.roles as string[]) ?? []
+                };
+                userCacheRef.current.set(user.uid, user);
+                return { uid: user.uid,
+label: user.displayName ?? user.email ?? user.uid,
+user };
+            });
+            setItems(prev => append ? [...prev, ...newItems] : newItems);
+            setHasMore(newItems.length >= pageSize);
+            offsetRef.current = offset + newItems.length;
+        } catch {
+            setHasMore(false);
+        } finally {
+            setIsLoading(false);
+        }
+    }, [client?.baseUrl, getAuthToken, pageSize]);
+
+    useEffect(() => {
+        offsetRef.current = 0;
+        fetchUsers("", 0, false);
+    }, [fetchUsers]);
+
+    const search = useCallback((searchStr: string) => {
+        setCurrentSearch(searchStr);
+        offsetRef.current = 0;
+        fetchUsers(searchStr, 0, false);
+    }, [fetchUsers]);
+
+    const loadMore = useCallback(() => {
+        fetchUsers(currentSearch, offsetRef.current, true);
+    }, [fetchUsers, currentSearch]);
+
+    const getUser = useCallback((uid: string): User | null => {
+        return userCacheRef.current.get(uid) ?? null;
+    }, []);
+
+    return { items,
+isLoading,
+hasMore,
+search,
+loadMore,
+getUser };
+}
+
 export interface UserSelectorProps {
     className?: string;
     name?: string;
@@ -42,7 +147,7 @@ export const UserSelector = React.forwardRef<
             clearable = true,
             className,
             pageSize,
-            searchPlaceholder = "SearchIcon users...",
+            searchPlaceholder = "Search users...",
             noResultsText = "No users found.",
             loadingText = "Loading..."
         },
@@ -64,7 +169,16 @@ export const UserSelector = React.forwardRef<
         const scrollContainerRef = useRef<HTMLDivElement>(null);
         const sentinelRef = useRef<HTMLDivElement>(null);
         const observerRef = useRef<IntersectionObserver | null>(null);
-        const triggerRef = (ref as React.RefObject<HTMLButtonElement>) || useRef<HTMLButtonElement>(null);
+        const localTriggerRef = useRef<HTMLButtonElement | null>(null);
+
+        const handleButtonRef = useCallback((node: HTMLButtonElement | null) => {
+            localTriggerRef.current = node;
+            if (typeof ref === "function") {
+                ref(node);
+            } else if (ref) {
+                ref.current = node;
+            }
+        }, [ref]);
         const contentRef = useRef<HTMLDivElement | null>(null);
         const searchInputRef = useRef<HTMLInputElement | null>(null);
 
@@ -155,7 +269,7 @@ export const UserSelector = React.forwardRef<
 
             function handlePointerDown(ev: MouseEvent) {
                 const target = ev.target as Node;
-                const triggerEl = triggerRef.current;
+                const triggerEl = localTriggerRef.current;
                 const contentEl = contentRef.current;
                 if (triggerEl?.contains(target)) return;
                 if (contentEl?.contains(target)) return;
@@ -184,7 +298,7 @@ export const UserSelector = React.forwardRef<
                 <PopoverPrimitive.Root open={isPopoverOpen} onOpenChange={handleRootOpenChange} modal={false}>
                     <PopoverPrimitive.Trigger asChild>
                         <button
-                            ref={triggerRef as React.Ref<HTMLButtonElement>}
+                            ref={handleButtonRef}
                             type="button"
                             aria-haspopup="listbox"
                             aria-expanded={isPopoverOpen}

package/src/components/admin/CreationResultDialog.tsx

@@ -0,0 +1,138 @@
+import React, { useState } from "react";
+import {
+    Alert,
+    Button,
+    CheckCircleIcon,
+    CopyIcon,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogTitle,
+    IconButton,
+    MailIcon,
+    Tooltip,
+    Typography
+} from "@rebasepro/ui";
+import { useSnackbarController, useTranslation } from "@rebasepro/app";
+import { UserCreationResult } from "@rebasepro/types";
+
+export function CreationResultDialog({
+    result,
+    onClose
+}: {
+    result: UserCreationResult;
+    onClose: () => void;
+}) {
+    const { t } = useTranslation();
+    const snackbarController = useSnackbarController();
+    const [copied, setCopied] = useState(false);
+
+    const handleCopyPassword = async () => {
+        if (!result.temporaryPassword) return;
+        try {
+            await navigator.clipboard.writeText(result.temporaryPassword);
+            setCopied(true);
+            snackbarController.open({
+                type: "success",
+                message: t("password_copied") ?? "Password copied to clipboard"
+            });
+            setTimeout(() => setCopied(false), 3000);
+        } catch {
+            // Fallback for older browsers
+            const textArea = document.createElement("textarea");
+            textArea.value = result.temporaryPassword;
+            document.body.appendChild(textArea);
+            textArea.select();
+            document.execCommand("copy");
+            document.body.removeChild(textArea);
+            setCopied(true);
+            setTimeout(() => setCopied(false), 3000);
+        }
+    };
+
+    if (result.invitationSent) {
+        // Invitation sent via email
+        return (
+            <Dialog open={true} onOpenChange={(open) => !open ? onClose() : undefined} maxWidth="xl">
+                <DialogTitle variant="h5" gutterBottom={false}>
+                    <div className="flex items-center gap-3">
+                        <MailIcon/>
+                        {t("invitation_sent_title") ?? "Invitation Sent"}
+                    </div>
+                </DialogTitle>
+                <DialogContent>
+                    <div className="flex flex-col gap-4 py-2">
+                        <Alert color="success">
+                            <Typography>
+                                {(t("invitation_sent") ?? "An invitation email has been sent to {{email}}. They can use the link to set their password.")
+                                    .replace("{{email}}", result.user.email ?? "")}
+                            </Typography>
+                        </Alert>
+                    </div>
+                </DialogContent>
+                <DialogActions>
+                    <Button variant="filled" onClick={onClose}>
+                        {t("ok")}
+                    </Button>
+                </DialogActions>
+            </Dialog>
+        );
+    }
+
+    if (result.temporaryPassword) {
+        // No email — show temporary password
+        return (
+            <Dialog open={true} onOpenChange={(open) => !open ? onClose() : undefined} maxWidth="xl">
+                <DialogTitle variant="h5" gutterBottom={false}>
+                    {t("temporary_password") ?? "Temporary Password"}
+                </DialogTitle>
+                <DialogContent>
+                    <div className="flex flex-col gap-4 py-2">
+                        <Alert color="warning">
+                            <Typography variant="body2">
+                                {result.emailDeliveryFailed
+                                    ? (t("temporary_password_email_failed_description") ??
+                                        "The email could not be delivered. Share this temporary password with the user securely. It will not be shown again.")
+                                    : (t("temporary_password_description") ??
+                                        "Email is not configured. Share this temporary password with the user securely. It will not be shown again.")}
+                            </Typography>
+                        </Alert>
+
+                        <div>
+                            <Typography variant="caption" color="secondary" className="mb-1">
+                                {t("email")}
+                            </Typography>
+                            <Typography>
+                                {result.user.email}
+                            </Typography>
+                        </div>
+
+                        <div>
+                            <Typography variant="caption" color="secondary" className="mb-1">
+                                {t("temporary_password") ?? "Temporary Password"}
+                            </Typography>
+                            <div className="flex items-center gap-2 mt-1">
+                                <code className="flex-grow bg-surface-100 dark:bg-surface-900 border border-surface-300 dark:border-surface-600 rounded px-3 py-2 font-mono text-base select-all">
+                                    {result.temporaryPassword}
+                                </code>
+                                <Tooltip title={t("copy_password") ?? "Copy password"} asChild>
+                                    <IconButton onClick={handleCopyPassword}>
+                                        {copied ? <CheckCircleIcon className="text-green-600"/> : <CopyIcon/>}
+                                    </IconButton>
+                                </Tooltip>
+                            </div>
+                        </div>
+                    </div>
+                </DialogContent>
+                <DialogActions>
+                    <Button variant="filled" onClick={onClose}>
+                        {t("ok")}
+                    </Button>
+                </DialogActions>
+            </Dialog>
+        );
+    }
+
+    // Shouldn't happen, but fallback
+    return null;
+}

package/src/components/admin/index.ts

@@ -1,3 +1 @@
-export * from "./UsersView";
-export * from "./RolesView";
-export * from "./RoleChip";
+export * from "./CreationResultDialog";

package/src/components/app/Drawer.tsx

@@ -13,6 +13,7 @@ export function Drawer({
                            title,
                            logo,
                            logoDestination,
+                           footerActions,
                            className,
                            style
                        }: {
@@ -20,10 +21,17 @@ export function Drawer({
     title?: React.ReactNode,
     logo?: string,
     logoDestination?: string,
+    /**
+     * 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
 }) {
-    const usedChildren = children ?? <DefaultDrawer title={title} logo={logo} logoDestination={logoDestination} className={className} style={style}/>;
+    const usedChildren = children ?? <DefaultDrawer title={title} logo={logo} logoDestination={logoDestination} footerActions={footerActions} className={className} style={style}/>;
     return <>{usedChildren}</>;
 }
 

package/src/components/app/Scaffold.tsx

@@ -1,10 +1,9 @@
 import React, { PropsWithChildren, useCallback, useMemo } from "react";
 import { cls, defaultBorderMixin, IconButton, Sheet, Tooltip } from "@rebasepro/ui";
-import { ChevronLeftIcon, MenuIcon } from "lucide-react";
+import { ChevronLeftIcon, ErrorBoundary, MenuIcon } from "@rebasepro/ui";
 import { deepEqual as equal } from "fast-equals"
 
-import { useLargeLayout, useAdminModeController, useTranslation } from "@rebasepro/core";
-import { ErrorBoundary } from "@rebasepro/ui";
+import { useLargeLayout, useAdminModeController, useTranslation } from "@rebasepro/app";
 import { AppContext } from "./useApp";
 
 export const DRAWER_WIDTH = 280;
@@ -75,7 +74,11 @@ export const Scaffold = React.memo<PropsWithChildren<ScaffoldProps>>(
         const [onHover, setOnHover] = React.useState(false);
 
         const setOnHoverTrue = useCallback(() => setOnHover(true), []);
-        const setOnHoverFalse = useCallback(() => setOnHover(false), []);
+        const setOnHoverFalse = useCallback(() => {
+            // Don't collapse the drawer while a popover/dropdown is open
+            if (document.querySelector("[data-radix-popper-content-wrapper]")) return;
+            setOnHover(false);
+        }, []);
 
         const handleDrawerOpen = useCallback(() => {
             setDrawerOpen(true);
@@ -137,9 +140,13 @@ export const Scaffold = React.memo<PropsWithChildren<ScaffoldProps>>(
                         {hasAppBar && <DrawerHeader/>}
 
                         <div
-                            className={cls(defaultBorderMixin, "bg-white dark:bg-surface-800", "grow overflow-auto m-0", {
-                                "lg:mt-4": !hasAppBar,
+                            className={cls(defaultBorderMixin, "bg-surface-50 dark:bg-surface-800", "grow overflow-auto m-0", {
                                 "mt-1 lg:m-0 lg:mx-2 lg:mb-2 lg:rounded-lg lg:border-t lg:border-x lg:border-solid": padding,
+                                // No app bar means no DrawerHeader spacer above, so inset the
+                                // panel by the same amount as its sides and bottom.
+                                // Must come after the padding classes, which reset lg margins.
+                                "lg:mt-2": !hasAppBar && padding,
+                                "lg:mt-4": !hasAppBar && !padding,
                                 "border-t": hasAppBar && !padding
                             })}>
 
@@ -158,7 +165,7 @@ export const Scaffold = React.memo<PropsWithChildren<ScaffoldProps>>(
 
 const DrawerHeader = () => {
     return (
-        <div className="flex flex-col min-h-16"></div>
+        <div className="flex flex-col min-h-14"></div>
     );
 };
 
@@ -184,8 +191,8 @@ function DrawerWrapper(props: {
     const { t } = useTranslation();
 
     const innerDrawer = <div
-        className={cls("h-full no-scrollbar overflow-y-auto overflow-x-clip", defaultBorderMixin,
-            isFloating ? `absolute top-0 left-0 bottom-0 z-50 bg-surface-50 ${darkBgFloating} shadow-2xl border-r` : `relative bg-surface-50 ${darkBg}`)}
+        className={cls("h-full overflow-hidden", defaultBorderMixin,
+            isFloating ? `absolute top-0 left-0 bottom-0 z-50 bg-surface-50 ${darkBgFloating} shadow-lg border-r` : `relative bg-surface-50 ${darkBg}`)}
         style={{
             width: visualWidth,
             transition: "left 75ms cubic-bezier(0.4, 0, 0.6, 1) 0ms, opacity 75ms cubic-bezier(0.4, 0, 0.6, 1) 0ms, width 75ms cubic-bezier(0.4, 0, 0.6, 1) 0ms"