@rebasepro/admin 0.0.1-canary.f81da60 → 0.1.2

package/src/components/EntityEditView.tsx

@@ -1,9 +1,9 @@
-import type { EntityCollection, EntityCustomViewParams } from "@rebasepro/types";
+import type { ComponentRef, EntityCollection, EntityCustomViewParams } from "@rebasepro/types";
 import type { FormContext } from "../types/fields";
 import type { PluginFormActionProps } from "@rebasepro/types";
-import React, { lazy, Suspense, useEffect, useMemo, useState } from "react";
+import React, { lazy, Suspense, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Entity, EntityStatus } from "@rebasepro/types";
-import { PluginProviderStack } from "@rebasepro/core";
+import { PluginProviderStack, resolveComponentRef } from "@rebasepro/core";
 
 import { EntityCollectionView, EntityView } from "../components";
 import { CircularProgressCenter, iconSize } from "@rebasepro/ui";
@@ -16,7 +16,6 @@ import {
     resolveDefaultSelectedView
 } from "@rebasepro/common";
 import { resolvedSelectedEntityView } from "../util/resolutions";
-import { getEntityTitlePropertyKey } from "../util/previews";
 import { CenteredView, CircularProgress, cls, defaultBorderMixin, IconButton, Tab, Tabs, Tooltip, Typography, Skeleton } from "@rebasepro/ui";
 import {
     useCustomizationController,
@@ -73,6 +72,12 @@ export interface EntityEditViewProps<M extends Record<string, unknown> = Record<
     layout?: "side_panel" | "full_screen" | "split";
     barActions?: (params: BarActionsParams) => any;
     formProps?: Partial<EntityFormProps<M>>,
+    /**
+     * Pre-populate the form with these values when creating a new entity.
+     * Only applied when the form is in "new" mode (no entityId).
+     * Sourced from EntitySidePanelProps (side panel) or location.state (full screen).
+     */
+    defaultValues?: Partial<M>;
 }
 
 /**
@@ -99,7 +104,7 @@ export function EntityEditView<M extends Record<string, unknown>>({
 
     const initialDirtyValues = entityId
         ? getEntityFromMemoryCache(props.path + "/" + entityId)
-        : getEntityFromMemoryCache(props.path + "#new");
+        : (props.defaultValues ?? getEntityFromMemoryCache(props.path + "#new"));
 
     const { canEdit: canEditHook } = usePermissions();
 
@@ -183,7 +188,7 @@ export function EntityEditViewInner<M extends Record<string, unknown>>({
     const customizationController = useCustomizationController();
     const plugins = customizationController.plugins;
 
-    const formActionTopProps: PluginFormActionProps = {
+    const formActionTopProps: PluginFormActionProps = useMemo(() => ({
         entityId,
         parentCollectionSlugs, parentEntityIds,
         path: path,
@@ -193,7 +198,7 @@ export function EntityEditViewInner<M extends Record<string, unknown>>({
         formContext: formContext as FormContext<Record<string, unknown>> | undefined,
         openEntityMode: layout,
         disabled: false
-    };
+    }), [entityId, parentCollectionSlugs, parentEntityIds, path, status, collection, context, formContext, layout]);
     const pluginActionsTop = useSlot("form.actions.top", formActionTopProps);
 
     const defaultSelectedView = useMemo(() => resolveDefaultSelectedView(
@@ -230,15 +235,51 @@ export function EntityEditViewInner<M extends Record<string, unknown>>({
 
     const mainViewVisible = selectedTab === MAIN_TAB_VALUE || Boolean(selectedSecondaryForm);
 
-    const customViewsView: any[] | undefined = customViews && resolvedEntityViews
-        .filter(e => !e.includeActions)
+    // Track which custom view tabs have been visited so we keep them mounted
+    // (preserving their state) but don't eagerly mount tabs never visited.
+    const mountedTabsRef = useRef<Set<string>>(new Set());
+    if (selectedTab) {
+        mountedTabsRef.current.add(selectedTab);
+    }
+
+    // Memoize the read-only fallback form context to avoid recreating it every render
+    const readOnlyFormContext = useMemo<FormContext<M> | undefined>(() => {
+        if (formContext) return undefined; // not needed when real formContext exists
+        if (!entityId) return undefined;
+        const formexStub = createFormexStub<M>(usedEntity?.values ?? {} as M);
+        return {
+            entityId,
+            disabled: false,
+            openEntityMode: layout,
+            status: status,
+            values: usedEntity?.values ?? ({} as M),
+            setFieldValue: (key: string, value: any) => {
+                throw new Error("You can't update values in read only mode");
+            },
+            save: () => {
+                throw new Error("You can't save in read only mode");
+            },
+            collection,
+            path: path,
+            entity: usedEntity,
+            savingError: undefined,
+            formex: formexStub
+        };
+    }, [formContext, entityId, layout, status, usedEntity, collection, path]);
+
+    const nonActionCustomViews = useMemo(() =>
+        resolvedEntityViews.filter(e => !e.includeActions),
+        [resolvedEntityViews]
+    );
+
+    const customViewsView: any[] | undefined = customViews && nonActionCustomViews
         .map((customView) => {
 
             if (!customView)
                 return null;
-            const Builder = customView.Builder;
+            const Builder = resolveComponentRef<EntityCustomViewParams>(customView.Builder);
             if (!Builder) {
-                console.error("INTERNAL: customView.Builder is not defined");
+                console.error("INTERNAL: customView.Builder is not defined or could not be resolved");
                 return null;
             }
 
@@ -246,48 +287,41 @@ export function EntityEditViewInner<M extends Record<string, unknown>>({
                 return null;
             }
 
-            const formexStub = createFormexStub<M>(usedEntity?.values ?? {} as M);
-            const usedFormContext: FormContext<M> = formContext ?? {
-                entityId,
-                disabled: false,
-                openEntityMode: layout,
-                status: status,
-                values: usedEntity?.values ?? ({} as M),
-                setFieldValue: (key: string, value: any) => {
-                    throw new Error("You can't update values in read only mode");
-                },
-                save: () => {
-                    throw new Error("You can't save in read only mode");
-                },
-                collection,
-                path: path,
-                entity: usedEntity,
-                savingError: undefined,
-                formex: formexStub
-            };
+            // Only mount tabs that have been visited at least once
+            const isActive = selectedTab === customView.key;
+            const hasBeenMounted = mountedTabsRef.current.has(customView.key);
+            if (!isActive && !hasBeenMounted) {
+                return null;
+            }
+
+            const usedFormContext: FormContext<M> = formContext ?? readOnlyFormContext!;
 
             return <div
                 className={cls(defaultBorderMixin,
                     "relative flex-1 w-full h-full overflow-auto",
-                    { "hidden": selectedTab !== customView.key }
+                    { "hidden": !isActive }
                 )}
                 key={`custom_view_${customView.key}`}
                 role="tabpanel">
                 <ErrorBoundary>
-                    {usedFormContext && <Builder
-                        collection={collection}
-                        parentCollectionSlugs={parentCollectionSlugs} parentEntityIds={parentEntityIds}
-                        entity={usedEntity}
-                        modifiedValues={usedFormContext?.formex?.values ?? usedEntity?.values}
-                        formContext={usedFormContext as unknown as FormContext<Record<string, unknown>>}
-                    />}
+                    <Suspense fallback={<CircularProgressCenter />}>
+                        {usedFormContext && <Builder
+                            collection={collection}
+                            parentCollectionSlugs={parentCollectionSlugs} parentEntityIds={parentEntityIds}
+                            entity={usedEntity}
+                            modifiedValues={usedFormContext?.formex?.values ?? usedEntity?.values}
+                            formContext={usedFormContext as unknown as FormContext<Record<string, unknown>>}
+                        />}
+                    </Suspense>
                 </ErrorBoundary>
             </div>;
         }).filter(Boolean);
 
     const globalLoading = (dataLoading && !usedEntity) || (canEdit === undefined && (status === "existing" || status === "copy"));
 
-    const jsonView = <div
+    // Only mount JSON view when its tab is selected (or was previously selected)
+    const jsonTabMounted = mountedTabsRef.current.has(JSON_TAB_VALUE);
+    const jsonView = (selectedTab === JSON_TAB_VALUE || jsonTabMounted) ? <div
         className={cls("relative flex-1 h-full overflow-auto w-full",
             { "hidden": selectedTab !== JSON_TAB_VALUE })}
         key={"json_view"}
@@ -296,11 +330,11 @@ export function EntityEditViewInner<M extends Record<string, unknown>>({
             <EntityJsonPreview
                 values={formContext?.values ?? entity?.values ?? {}} />
         </ErrorBoundary>
-    </div>;
+    </div> : null;
 
-    const historyView = includeHistoryView ? <div
-        className={cls("relative flex-1 h-full overflow-auto w-full",
-            { "hidden": selectedTab !== HISTORY_TAB_VALUE })}
+    // Only mount history view when its tab is actually selected
+    const historyView = includeHistoryView && selectedTab === HISTORY_TAB_VALUE ? <div
+        className={"relative flex-1 h-full overflow-auto w-full"}
         key={"history_view"}
         role="tabpanel">
         <ErrorBoundary>
@@ -349,7 +383,7 @@ export function EntityEditViewInner<M extends Record<string, unknown>>({
         );
     }).filter(Boolean);
 
-    const onSideTabClick = (value: string) => {
+    const onSideTabClick = useCallback((value: string) => {
         setSelectedTab(value);
         if (status === "existing") {
             onTabChange?.({
@@ -359,7 +393,7 @@ export function EntityEditViewInner<M extends Record<string, unknown>>({
                 collection
             });
         }
-    };
+    }, [status, onTabChange, path, entityId, collection]);
 
     const entityReadOnlyView = !canEdit && entity ? <div
         className={cls("flex-1 flex flex-row w-full overflow-y-auto justify-center", (canEdit || !mainViewVisible || selectedSecondaryForm) ? "hidden" : "")}>
@@ -411,7 +445,7 @@ export function EntityEditViewInner<M extends Record<string, unknown>>({
             onSaved?.(res);
             formProps?.onSaved?.(res);
         }}
-        Builder={selectedSecondaryForm?.Builder as React.ComponentType<EntityCustomViewParams<M>> | undefined}
+        Builder={resolveComponentRef(selectedSecondaryForm?.Builder as ComponentRef<EntityCustomViewParams<M>> | undefined) as React.ComponentType<EntityCustomViewParams<M>> | undefined}
     />;
 
     const subcollectionTabs = subcollections && subcollections.map((subcollection) =>
@@ -458,33 +492,6 @@ export function EntityEditViewInner<M extends Record<string, unknown>>({
         </Tooltip>
     ) : null;
 
-    // Compute contextual title for subcollection tabs, e.g. "Orders of James"
-    const subcollectionContextTitle = useMemo(() => {
-        if (selectedTab === MAIN_TAB_VALUE || selectedTab === JSON_TAB_VALUE || selectedTab === HISTORY_TAB_VALUE) {
-            return null;
-        }
-        // Check if the selected tab is a subcollection
-        const matchedSubcollection = subcollections.find(sc => sc.slug === selectedTab);
-        if (!matchedSubcollection) {
-            return null;
-        }
-        // Check if the selected tab is a custom view (not a subcollection)
-        const isCustomView = resolvedEntityViews.some(v => v.key === selectedTab);
-        if (isCustomView) {
-            return null;
-        }
-        // Resolve the parent entity's title
-        const titleKey = getEntityTitlePropertyKey(collection, customizationController.propertyConfigs);
-        const entityValues = usedEntity?.values;
-        if (!titleKey || !entityValues) {
-            return matchedSubcollection.name;
-        }
-        const titleValue = entityValues[titleKey as keyof M];
-        if (!titleValue || typeof titleValue !== "string") {
-            return matchedSubcollection.name;
-        }
-        return `${matchedSubcollection.name} of ${titleValue}`;
-    }, [selectedTab, subcollections, resolvedEntityViews, collection, customizationController.propertyConfigs, usedEntity?.values]);
 
     let result = <div className="relative flex flex-col h-full w-full bg-white dark:bg-surface-800">
 
@@ -500,14 +507,6 @@ export function EntityEditViewInner<M extends Record<string, unknown>>({
                 status
             })}
 
-            {subcollectionContextTitle && (
-                <Typography
-                    variant="label"
-                    className="truncate min-w-0 shrink ml-2 text-surface-600 dark:text-surface-400"
-                >
-                    {subcollectionContextTitle}
-                </Typography>
-            )}
 
             {pluginActionsTop}
 

package/src/components/EntitySidePanel.tsx

@@ -9,6 +9,7 @@ import { EntityEditView } from "./EntityEditView";
 import { useSideDialogContext } from "./SideDialogs";
 import { IconButton } from "@rebasepro/ui";
 import { useLocation, useNavigate } from "react-router-dom";
+import { removeInitialAndTrailingSlashes } from "@rebasepro/common";
 import { saveEntityToMemoryCache } from "@rebasepro/core";
 import { useCollectionRegistryController, useSideEntityController } from "../index";
 import { useUrlController } from "../index";
@@ -147,13 +148,16 @@ export function EntitySidePanel(props: EntitySidePanelProps) {
                         selectedTab,
                         collection
                     }) => {
-                        sideEntityController.replace({
-                            path: path,
-                            entityId,
-                            selectedTab,
-                            updateUrl: true,
-                            collection
-                        });
+                        // Only update the URL to reflect the new tab — don't call
+                        // sideEntityController.replace() which would recreate the
+                        // entire EntitySidePanel component, causing a full
+                        // unmount/remount and expensive re-render of the form.
+                        if (entityId) {
+                            const collectionPath = removeInitialAndTrailingSlashes(path);
+                            const tabSuffix = selectedTab ? "/" + selectedTab : "";
+                            const fullUrl = urlController.buildUrlCollectionPath(`${collectionPath}/${entityId}${tabSuffix}#side`);
+                            navigate(fullUrl, { replace: true, state: location.state });
+                        }
                     }}
                     formProps={formProps}
                 />

package/src/components/HomePage/ContentHomePage.tsx

@@ -19,9 +19,10 @@ import { SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable"
 import { restrictToVerticalAxis, restrictToWindowEdges } from "@dnd-kit/modifiers";
 import { RenameGroupDialog } from "./RenameGroupDialog";
 import { toArray } from "@rebasepro/utils";
-import { useCollapsedGroups, useCustomizationController, useTranslation, useSlot, useAdminModeController } from "@rebasepro/core";
+import { useCollapsedGroups, buildCollapsedDefaults, useCustomizationController, useTranslation, useSlot, useAdminModeController, useRebaseRegistry } from "@rebasepro/core";
 import { useRestoreScroll } from "@rebasepro/core";
-import { STUDIO_NAVIGATION_GROUPS } from "@rebasepro/core";
+
+import { BootstrapAdminBanner } from "@rebasepro/core";
 import { useBreadcrumbsController, useCMSContext } from "../../index";
 
 export const DEFAULT_GROUP_NAME = "Views";
@@ -45,7 +46,8 @@ export function ContentHomePage({
     const { navigationStateController } = context;
     const customizationController = useCustomizationController();
     const adminModeController = useAdminModeController();
-    const isStudioMode = adminModeController.mode === "studio";
+    const registry = useRebaseRegistry();
+
     const { resolvedSlots } = customizationController;
     const breadcrumbs = useBreadcrumbsController();
     const { t } = useTranslation();
@@ -61,19 +63,19 @@ export function ContentHomePage({
         onNavigationEntriesUpdate = () => {}
     } = navigationStateController.topLevelNavigation || {};
 
+    // Studio mode shows view-type entries (devViews) + admin entries (Users/Roles).
+    // Content mode shows collections, admin entries (Users/Roles), and custom entries — but not studio views.
     const rawNavigationEntries = useMemo(() => {
-        return unFilteredNavigationEntries.filter(e => {
-            const isStudioGroup = e.group ? STUDIO_NAVIGATION_GROUPS.includes(e.group) : false;
-            return isStudioMode ? isStudioGroup : !isStudioGroup;
-        });
-    }, [unFilteredNavigationEntries, isStudioMode]);
+        if (adminModeController.mode === "studio") {
+            return unFilteredNavigationEntries.filter(e => e.type === "view" || e.type === "admin");
+        }
+        return unFilteredNavigationEntries.filter(e => e.type !== "view");
+    }, [unFilteredNavigationEntries, adminModeController.mode]);
 
     const groupOrderFromNavController = useMemo(() => {
-        return unFilteredGroupOrder.filter(g => {
-            const isStudioGroup = STUDIO_NAVIGATION_GROUPS.includes(g);
-            return isStudioMode ? isStudioGroup : !isStudioGroup;
-        });
-    }, [unFilteredGroupOrder, isStudioMode]);
+        const entryGroups = new Set(rawNavigationEntries.map(e => e.group).filter(Boolean));
+        return unFilteredGroupOrder.filter(g => entryGroups.has(g));
+    }, [unFilteredGroupOrder, rawNavigationEntries]);
 
     const fuse = useRef<Fuse<NavigationEntry> | null>(null);
     const [filteredUrls, setFilteredUrls] = useState<string[] | null>(null);
@@ -244,7 +246,11 @@ export function ContentHomePage({
         ...(adminGroupData ? [adminGroupData.name] : [])
     ], [items, adminGroupData]);
 
-    const { isGroupCollapsed, toggleGroupCollapsed } = useCollapsedGroups(groupNames, "home");
+    const collapsedDefaults = useMemo(
+        () => buildCollapsedDefaults(registry.cmsConfig?.navigationGroupMappings, "home"),
+        [registry.cmsConfig?.navigationGroupMappings]
+    );
+    const { isGroupCollapsed, toggleGroupCollapsed } = useCollapsedGroups(groupNames, "home", collapsedDefaults);
 
     const {
         sensors,
@@ -312,8 +318,11 @@ export function ContentHomePage({
        Render
        ─────────────────────────────────────────────────────────────── */
     return (
-        <div ref={containerRef} className="py-2 overflow-auto h-full w-full bg-surface-100 dark:bg-surface-800">
+        <div ref={containerRef} className="py-2 overflow-auto h-full w-full bg-surface-50 dark:bg-surface-800">
             <Container maxWidth="6xl">
+                <div className="mb-4">
+                    <BootstrapAdminBanner />
+                </div>
                 {/* search & actions */}
                 <div
                     className="w-full sticky py-4 transition-all duration-400 ease-in-out top-0 z-10 flex flex-row gap-4"

package/src/components/HomePage/NavigationCard.tsx

@@ -26,10 +26,10 @@ export const NavigationCard = React.memo(function NavigationCard({
     return (
         <Card
             className={cls(
-                "group h-full p-5 cursor-pointer transition-all duration-200 ease-in-out",
-                "border-surface-200/40 dark:border-surface-700/40",
-                "hover:-translate-y-0.5 hover:shadow-md hover:shadow-primary/5",
-                "hover:border-primary/30 dark:hover:border-primary/20",
+                "group h-full p-4 cursor-pointer transition-all duration-150 ease-in-out",
+                "border-surface-200 dark:border-surface-700/40",
+                "hover:shadow-md hover:shadow-black/[0.04]",
+                "hover:border-surface-300 dark:hover:border-primary/20",
                 shrink && "w-full max-w-full min-h-0 scale-75"
             )}
             onClick={() => {

package/src/components/HomePage/NavigationGroup.tsx

@@ -40,8 +40,8 @@ export function NavigationGroup({
                 component={"h2"}
                 color="secondary"
                 className={cls(
-                    "p-4 py-2 rounded",
-                    "font-medium text-sm text-surface-600 dark:text-surface-400"
+                    "px-4 py-1 rounded",
+                    "font-semibold text-[11px] uppercase tracking-wider text-surface-400 dark:text-surface-400"
                 )}
             >
                 {currentGroupName}

package/src/components/RebaseAuthGate.tsx

@@ -27,6 +27,8 @@ export function RebaseAuthGate({ children }: { children: React.ReactNode }) {
     const registry = useRebaseRegistry();
     const authController = useAuthController();
 
+    console.log("[AuthGate] initialLoading:", authController?.initialLoading, "user:", authController?.user?.email ?? null);
+
     if (authController?.initialLoading) {
         return <CircularProgressCenter size={"large"}/>;
     }

package/src/components/RebaseCMS.tsx

@@ -10,7 +10,7 @@ import type { RebaseCMSConfig } from "@rebasepro/types";
  * is auto-wired as a native feature (slots, provider, Studio view) without
  * needing any external plugin.
  */
-export function RebaseCMS({ collections, homePage, entityViews, entityActions, plugins, collectionEditor }: RebaseCMSConfig) {
+export function RebaseCMS({ collections, homePage, entityViews, entityActions, plugins, collectionEditor, navigationGroupMappings }: RebaseCMSConfig) {
     const dispatch = useRebaseRegistryDispatch();
 
     useLayoutEffect(() => {
@@ -19,9 +19,10 @@ homePage,
 entityViews,
 entityActions,
 plugins,
-collectionEditor });
+collectionEditor,
+navigationGroupMappings });
         return () => dispatch.unregisterCMS();
-    }, [dispatch, collections, homePage, entityViews, entityActions, plugins, collectionEditor]);
+    }, [dispatch, collections, homePage, entityViews, entityActions, plugins, collectionEditor, navigationGroupMappings]);
 
     return null;
 }

package/src/components/RebaseNavigation.tsx

@@ -69,11 +69,14 @@ export function RebaseNavigation({ children }: RebaseNavigationProps) {
     const userConfigPersistence = useBuildLocalConfigurationPersistence();
 
     // ── Collection Editor resolution ──────────────────────────────────
+    // The collection editor is ALWAYS enabled when Studio is registered.
+    // The `collectionEditor` CMS config is for fine-tuning (readOnly, auth, etc.),
+    // not for opting-in. When omitted, the editor defaults to enabled
+    // (read-only in production).
     const collectionEditorConfig = registry.cmsConfig?.collectionEditor;
-    const collectionEditorEnabled = Boolean(collectionEditorConfig);
+    const collectionEditorEnabled = Boolean(collectionEditorConfig) || Boolean(registry.studioConfig);
     const collectionEditorOptions: CollectionEditorOptions | undefined = useMemo(() => {
-        if (!collectionEditorConfig) return undefined;
-        if (collectionEditorConfig === true) return {};
+        if (collectionEditorConfig === true || !collectionEditorConfig) return {};
         return collectionEditorConfig;
     }, [collectionEditorConfig]);
 
@@ -117,7 +120,6 @@ export function RebaseNavigation({ children }: RebaseNavigationProps) {
         return {
             slug: "schema",
             name: "Edit collections",
-            group: "Database",
             icon: "LayoutList",
             nestedRoutes: true,
             view: (
@@ -138,6 +140,7 @@ export function RebaseNavigation({ children }: RebaseNavigationProps) {
         plugins: registry.cmsConfig?.plugins ?? EMPTY_PLUGINS,
         collections: collectionsBuilder,
         views: devViews,
+        navigationGroupMappings: registry.cmsConfig?.navigationGroupMappings,
         authController: context.authController!,
         data: context.data,
         collectionRegistryController,

package/src/components/RelationSelector.tsx

@@ -83,6 +83,10 @@ export const RelationSelector = React.forwardRef<
         // Track IDs that were set via local user interaction (onItemClick / handleClear / handleRemoveItem).
         // When an incoming value change matches these IDs exactly, we skip async re-resolution.
         const localSelectionIdsRef = useRef<string | null>(null);
+        // Snapshot of selected IDs captured when the popover opens.
+        // Used to sort the dropdown list so selected items appear at the top.
+        // Stays stable for the entire popover session so items don't jump around.
+        const pinnedIdsRef = useRef<Set<string> | null>(null);
 
         const {
             items: availableItems,
@@ -323,6 +327,7 @@ relation } as RelationItem;
                 newSelected = [item];
                 setIsPopoverOpen(false);
                 isPopoverOpenRef.current = false;
+                pinnedIdsRef.current = null;
             }
             setSelectedItems(newSelected);
             // Mark this fingerprint so the resolution effect skips async work
@@ -348,11 +353,13 @@ relation } as RelationItem;
             if (disabled) return;
             // We control open manually; only allow opening attempts from Radix (e.g. trigger press)
             if (next) {
+                // Capture current selection so we can pin those items to the top of the list
+                pinnedIdsRef.current = new Set(selectedItems.map(i => String(i.id)));
                 setIsPopoverOpen(true);
                 isPopoverOpenRef.current = true;
             }
             // Ignore close attempts here; outside click/Escape handled manually; single select closes explicitly on selection.
-        }, [disabled]);
+        }, [disabled, selectedItems]);
 
         // Outside click + Escape handling (simple and reliable)
         useEffect(() => {
@@ -367,12 +374,14 @@ relation } as RelationItem;
                 // Outside
                 setIsPopoverOpen(false);
                 isPopoverOpenRef.current = false;
+                pinnedIdsRef.current = null;
             }
 
             function handleKey(ev: KeyboardEvent) {
                 if (ev.key === "Escape") {
                     setIsPopoverOpen(false);
                     isPopoverOpenRef.current = false;
+                    pinnedIdsRef.current = null;
                 }
             }
 
@@ -389,6 +398,7 @@ relation } as RelationItem;
         const closePopover = useCallback(() => {
             setIsPopoverOpen(false);
             isPopoverOpenRef.current = false;
+            pinnedIdsRef.current = null;
         }, []);
 
         const resolvedPlaceholder = placeholder || emptyPlaceholder || <EmptyValue className={"ml-2"}/>;
@@ -412,6 +422,11 @@ relation } as RelationItem;
                                 setIsPopoverOpen(o => {
                                     const next = !o;
                                     isPopoverOpenRef.current = next;
+                                    if (next) {
+                                        pinnedIdsRef.current = new Set(selectedItems.map(i => String(i.id)));
+                                    } else {
+                                        pinnedIdsRef.current = null;
+                                    }
                                     return next;
                                 });
                             }}
@@ -589,7 +604,20 @@ relation } as RelationItem;
                                         </CommandPrimitive.Empty>
                                     )}
                                     <CommandPrimitive.Group>
-                                        {availableItems.map((item) => {
+                                        {(() => {
+                                            // Sort items so that initially-selected (pinned) items appear first.
+                                            // We use the snapshot taken when the popover opened so items don't
+                                            // jump around as the user checks/unchecks.
+                                            const pinned = pinnedIdsRef.current;
+                                            const sortedItems = pinned && pinned.size > 0
+                                                ? [...availableItems].sort((a, b) => {
+                                                    const aP = pinned.has(String(a.id)) ? 0 : 1;
+                                                    const bP = pinned.has(String(b.id)) ? 0 : 1;
+                                                    return aP - bP;
+                                                })
+                                                : availableItems;
+                                            return sortedItems;
+                                        })().map((item) => {
                                             const isSelected = selectedItems.some(v => String(v.id) === String(item.id));
                                             return (
                                                 <CommandPrimitive.Item

package/src/components/SelectableTable/SelectableTable.tsx

@@ -239,7 +239,7 @@ export const SelectableTable = function SelectableTable<M extends Record<string,
     return (
         <SelectableTableContext.Provider
             value={contextValue}>
-            <div className="h-full w-full flex flex-col bg-white dark:bg-surface-800"
+            <div className="h-full w-full flex flex-col bg-white dark:bg-surface-900"
                 ref={ref}>
 
                 <VirtualTable
@@ -264,7 +264,7 @@ export const SelectableTable = function SelectableTable<M extends Record<string,
                     checkFilterCombination={checkFilterCombination}
                     createFilterField={filterable ? createFilterField : undefined}
                     rowClassName={useCallback((entity: Entity<M>) => {
-                        return highlightedRow?.(entity) ? "bg-surface-50/75 bg-surface-100/75 dark:!bg-surface-800/60" : "";
+                        return highlightedRow?.(entity) ? "bg-surface-accent-50 dark:!bg-surface-accent-900" : "";
                     }, [highlightedRow])}
                     className="grow"
                     emptyComponent={emptyComponent}

package/src/components/UserSelector.tsx

@@ -42,7 +42,7 @@ export const UserSelector = React.forwardRef<
             clearable = true,
             className,
             pageSize,
-            searchPlaceholder = "SearchIcon users...",
+            searchPlaceholder = "Search users...",
             noResultsText = "No users found.",
             loadingText = "Loading..."
         },

package/src/components/admin/UsersView.tsx

@@ -7,7 +7,7 @@ import { Button, Container, Dialog, DialogActions, DialogContent, DialogTitle, I
 import { MailIcon, KeyRoundIcon, PlusIcon, Trash2Icon, CopyIcon, CheckCircleIcon, ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
 import { RoleChip } from "./RoleChip";
 import { UserManagementDelegate, Role, UserCreationResult } from "@rebasepro/types";
-import { ConfirmationDialog } from "@rebasepro/core";
+import { ConfirmationDialog, BootstrapAdminBanner } from "@rebasepro/core";
 
 const PAGE_SIZE = 25;
 
@@ -249,22 +249,7 @@ message: error instanceof Error ? error.message : t("error_resetting_password")
 
     return (
         <Container className="w-full flex flex-col py-4 gap-4" maxWidth={"6xl"}>
-            {/* Bootstrap warning when no admins */}
-            {!delegateLoading && !hasAdmin && !usersError && loggedInUser && bootstrapAdmin && (
-                <div className="bg-yellow-100 dark:bg-yellow-900 border border-yellow-400 dark:border-yellow-700 rounded p-4 flex items-center justify-between">
-                    <div>
-                        <Typography variant="label" className="text-yellow-800 dark:text-yellow-200">
-                            {t("no_users_or_roles_defined")}
-                        </Typography>
-                    </div>
-                    <Button
-                        onClick={handleBootstrap}
-                        disabled={bootstrapping}
-                    >
-                        {bootstrapping ? <CircularProgress size="small"/> : t("add_logged_user_as_admin")}
-                    </Button>
-                </div>
-            )}
+            <BootstrapAdminBanner className="mb-4" />
 
             <div className="flex items-center mt-12 mb-4 gap-4">
                 <Typography gutterBottom variant="h4" className="grow mb-0" component="h4">