@rebasepro/admin 0.11.1-canary.gfd39654 → 0.12.0

package/src/components/CollectionEditorDialogs.tsx

@@ -16,12 +16,12 @@ const PropertyFormDialog = lazy(() =>
 
 /**
  * Renders the CollectionEditorDialog and PropertyFormDialog inside
- * the RebaseShell tree where CMS-internal contexts
+ * the RebaseShell tree where admin-internal contexts
  * (CollectionRegistryContext, NavigationStateContext, UrlContext)
  * are available.
  *
  * Both dialog components are loaded dynamically via React.lazy so that
- * production CMS bundles that never open the collection editor don't pay
+ * production admin bundles that never open the collection editor don't pay
  * the download/parse cost up-front.
  *
  * The dialog state (open/close, props) is managed by ConfigControllerProvider

package/src/components/CollectionTableBinding/CollectionRowActions.tsx

@@ -16,9 +16,10 @@ import {
     Tooltip
 } from "@rebasepro/ui";
 import { useTranslation } from "@rebasepro/app";
+import { getIcon } from "@rebasepro/app";
 import { getEntityFromCache } from "@rebasepro/app";
 import { getLocalChangesBackup } from "@rebasepro/app";
-import { useCMSContext } from "../../hooks/useCMSContext";
+import { useAdminContext } from "../../hooks/useAdminContext";
 
 /**
  *
@@ -79,7 +80,7 @@ export const CollectionRowActions = function CollectionRowActions({
         isDraggable?: boolean;
     }) {
 
-    const context = useCMSContext();
+    const context = useAdminContext();
     const sidePanelCtrl = context.sidePanelController;
     const { t } = useTranslation();
 
@@ -140,7 +141,7 @@ export const CollectionRowActions = function CollectionRowActions({
                                 });
                             }}
                             size={iconSize}>
-                            {action.icon}
+                            {getIcon(action.icon, undefined, undefined, "smallest")}
                         </IconButton>;
                         if (isEditAction && hasDraft) {
                             iconButton = (
@@ -183,7 +184,7 @@ export const CollectionRowActions = function CollectionRowActions({
                                             openEntityMode: openEntityMode ?? collection?.openEntityMode
                                         });
                                     }}>
-                                    {action.icon}
+                                    {getIcon(action.icon, undefined, undefined, "smallest")}
                                     {action.name}
                                 </MenuItem>
                             ))}

package/src/components/CollectionTableBinding/CollectionTableBinding.tsx

@@ -4,7 +4,7 @@ import { Entity, User, Property } from "@rebasepro/types";
 import { CollectionSize, RebaseContext } from "@rebasepro/admin-types";
 import { PropertyTableCell } from "./PropertyTableCell";
 import { ErrorBoundary } from "@rebasepro/ui";
-import { useRebaseContext, useLargeLayout } from "@rebasepro/app";
+import { useRebaseContext, useLargeLayout, useCollectionScope } from "@rebasepro/app";
 import { CellRendererParams, VirtualTableColumn } from "@rebasepro/ui";
 import { CollectionRowActions } from "./CollectionRowActions";
 import { CollectionTableToolbar } from "./internal/CollectionTableToolbar";
@@ -248,11 +248,17 @@ export const CollectionTableBinding = function CollectionTableBinding<M extends
 
     }, [size]);
 
+    // Same source the filter fields read their engine from, so the header's
+    // filter control and the field it opens cannot disagree about what the
+    // collection's driver can answer.
+    const engine = useCollectionScope()?.engine;
+
     const collectionColumns: VirtualTableColumn[] = useMemo(() => {
         const columnsResult: VirtualTableColumn[] = propertiesToColumns({
             properties,
             sortable,
             fixedFilter,
+            engine,
             AdditionalHeaderWidget
         });
 
@@ -273,7 +279,7 @@ export const CollectionTableBinding = function CollectionTableBinding<M extends
                 }))
             : [];
         return [...columnsResult, ...additionalTableColumns];
-    }, [properties, sortable, fixedFilter, AdditionalHeaderWidget, additionalFields]);
+    }, [properties, sortable, fixedFilter, engine, AdditionalHeaderWidget, additionalFields]);
 
     const idColumn: VirtualTableColumn = useMemo(() => ({
         key: "id_ewcfedcswdf3",

package/src/components/CollectionTableBinding/column_utils.tsx

@@ -4,7 +4,7 @@ import { getTableCellAlignment, getTablePropertyColumnWidth } from "./internal/c
 import { FilterValues } from "@rebasepro/types";
 import { VirtualTableColumn } from "@rebasepro/ui";
 import { getIconForProperty, getResolvedPropertyInPath } from "../../util/property_utils";
-import { getColumnKeysForProperty } from "@rebasepro/app";
+import { getColumnKeysForProperty, isFilterableRelation } from "@rebasepro/app";
 
 export function buildIdColumn(largeLayout?: boolean): VirtualTableColumn {
     return {
@@ -22,6 +22,12 @@ export interface PropertiesToColumnsParams<M extends Record<string, unknown>> {
     properties: Properties;
     sortable?: boolean;
     fixedFilter?: FilterValues<keyof M extends string ? keyof M : never>;
+    /**
+     * The engine backing the collection (`collection.engine`). Decides which
+     * relation kinds can be filtered — see `isFilterableRelation`. Omitted
+     * falls back to the default engine's capabilities.
+     */
+    engine?: string;
     AdditionalHeaderWidget?: React.ComponentType<{
         property: Property,
         propertyKey: string,
@@ -29,7 +35,7 @@ export interface PropertiesToColumnsParams<M extends Record<string, unknown>> {
     }>;
 }
 
-export function propertiesToColumns<M extends Record<string, unknown>>({ properties, sortable, fixedFilter, AdditionalHeaderWidget }: PropertiesToColumnsParams<M>): VirtualTableColumn[] {
+export function propertiesToColumns<M extends Record<string, unknown>>({ properties, sortable, fixedFilter, engine, AdditionalHeaderWidget }: PropertiesToColumnsParams<M>): VirtualTableColumn[] {
     const disabledFilter = Boolean(fixedFilter);
     return Object.entries<Property>(properties)
         .flatMap(([key, property]) => getColumnKeysForProperty(property, key))
@@ -40,7 +46,7 @@ export function propertiesToColumns<M extends Record<string, unknown>>({ propert
             const property = getResolvedPropertyInPath(properties, key) as Property;
             if (!property)
                 throw Error("Internal error: no property found in path " + key);
-            const filterable = filterableProperty(property);
+            const filterable = filterableProperty(property, false, engine);
             return {
                 key: key as string,
                 align: getTableCellAlignment(property),
@@ -61,13 +67,21 @@ export function propertiesToColumns<M extends Record<string, unknown>>({ propert
         });
 }
 
-function filterableProperty(property: Property, partOfArray = false): boolean {
+function filterableProperty(property: Property, partOfArray = false, engine?: string): boolean {
+    // A relation this engine's driver cannot compile into a `WHERE` has
+    // nothing to filter on, so the header's filter control would open onto a
+    // field that renders nothing (`FilterFieldBinding` returns null on an
+    // empty operator list) — and, before the driver started failing closed,
+    // sending one silently returned every row. Same authority as the operator
+    // resolution, and engine-aware for the same reason: this table renders
+    // over Postgres, Mongo, Firestore and anything a developer registers.
+    if (!isFilterableRelation(property, engine)) return false;
     if (partOfArray) {
         return ["string", "number", "date", "reference", "relation"].includes(property.type);
     }
     if (property.type === "array") {
         if (property.of && !Array.isArray(property.of))
-            return filterableProperty(property.of, true);
+            return filterableProperty(property.of, true, engine);
         else
             return false;
     }

package/src/components/CollectionTableBinding/table_bindings.tsx

@@ -222,10 +222,10 @@ export function getTableBindingForProperty(
                         path={(property as ReferenceProperty).path!}
                         multiselect={false}
                         previewProperties={(property as ReferenceProperty).admin?.previewProperties}
-                        includeId={(property as ReferenceProperty).includeId}
-                        includeEntityLink={(property as ReferenceProperty).includeEntityLink}
+                        includeId={(property as ReferenceProperty).admin?.includeId}
+                        includeEntityLink={(property as ReferenceProperty).admin?.includeEntityLink}
                         title={property.name ?? propertyKey}
-                        fixedFilter={(property as ReferenceProperty).fixedFilter}
+                        fixedFilter={(property as ReferenceProperty).admin?.fixedFilter}
                     />
                     );
                 },
@@ -290,9 +290,9 @@ export function getTableBindingForProperty(
                                 path={refOfProp.path!}
                                 previewProperties={refOfProp.admin?.previewProperties}
                                 title={arrayProperty.name}
-                                fixedFilter={refOfProp.fixedFilter}
-                                includeId={refOfProp.includeId}
-                                includeEntityLink={refOfProp.includeEntityLink}
+                                fixedFilter={refOfProp.admin?.fixedFilter}
+                                includeId={refOfProp.admin?.includeId}
+                                includeEntityLink={refOfProp.admin?.includeEntityLink}
                             />
                         ),
                         allowScroll: false
@@ -318,10 +318,10 @@ function RelationDialogBindingComponent({ propertyKey, internalValue, updateValu
             multiselect={false}
             relation={relProp.relation!}
             previewProperties={relProp.admin?.previewProperties}
-            includeId={relProp.includeId}
-            includeEntityLink={relProp.includeEntityLink}
+            includeId={relProp.admin?.includeId}
+            includeEntityLink={relProp.admin?.includeEntityLink}
             title={relProp.name ?? propertyKey}
-            fixedFilter={relProp.fixedFilter}
+            fixedFilter={relProp.admin?.fixedFilter}
         />
     );
 }
@@ -337,7 +337,7 @@ function RelationSelectorBindingComponent({ propertyKey, internalValue, updateVa
             disabled={disabled}
             size={"small"}
             relation={relProp.relation!}
-            fixedFilter={relProp.fixedFilter}
+            fixedFilter={relProp.admin?.fixedFilter}
         />
     );
 }

package/src/components/CollectionViewBinding/CollectionListViewBinding.tsx

@@ -22,9 +22,10 @@ import {
 import { useAnalyticsController } from "@rebasepro/app";
 import { getEntityPreviewKeys } from "../../util/previews";
 import { IconForView } from "@rebasepro/app";
+import { getIcon } from "@rebasepro/app";
 import { getValueInPath } from "@rebasepro/utils";
 import { useCollectionSlotKeys, resolveEntitySlots, type CollectionSlotKeys } from "./usePreviewSlots";
-import { useCMSContext } from "../../hooks/useCMSContext";
+import { useAdminContext } from "../../hooks/useAdminContext";
 import { resolveEntityAction } from "../../util/resolutions";
 
 export type CollectionListViewBindingProps<M extends Record<string, unknown> = Record<string, unknown>> = {
@@ -265,8 +266,8 @@ year: diffDays > 365 ? "numeric" : undefined });
 }
 
 /**
- * Classic CMS list view for displaying entities.
- * Designed to be the most familiar, stereotypical CMS content management view:
+ * Classic admin list view for displaying entities.
+ * Designed to be the most familiar, stereotypical admin content management view:
  * - Clean rows with checkbox, icon/avatar, title, metadata, and actions
  * - Column-sortable headers
  * - Infinite scroll
@@ -289,7 +290,7 @@ export function CollectionListViewBinding<M extends Record<string, unknown> = Re
     const authController = useAuthController();
     const customizationController = useCustomizationController();
     const analyticsController = useAnalyticsController();
-    const context = useCMSContext();
+    const context = useAdminContext();
 
     const containerRef = useRef<HTMLDivElement>(null);
     const [containerWidth, setContainerWidth] = useState(1200);
@@ -622,7 +623,7 @@ const ListRow = React.memo(function ListRow<M extends Record<string, unknown>>({
     isLast: boolean;
     isActive?: boolean;
     listViewActions?: EntityAction[];
-    context?: ReturnType<typeof useCMSContext>;
+    context?: ReturnType<typeof useAdminContext>;
     path?: string;
     selectionController?: SelectionController<M>;
     openEntityMode?: "side_panel" | "full_screen" | "split" | "dialog";
@@ -864,7 +865,7 @@ const ListRow = React.memo(function ListRow<M extends Record<string, unknown>>({
                                         openEntityMode: openEntityMode ?? collection?.openEntityMode ?? "full_screen"
                                     });
                                 }}>
-                                {action.icon}
+                                {getIcon(action.icon, undefined, undefined, "smallest")}
                             </IconButton>
                         </Tooltip>
                     ))}
@@ -888,7 +889,7 @@ const ListRow = React.memo(function ListRow<M extends Record<string, unknown>>({
     isLast: boolean;
     isActive?: boolean;
     listViewActions?: EntityAction[];
-    context?: ReturnType<typeof useCMSContext>;
+    context?: ReturnType<typeof useAdminContext>;
     path?: string;
     selectionController?: SelectionController<M>;
     openEntityMode?: "side_panel" | "full_screen" | "split" | "dialog";

package/src/components/CollectionViewBinding/CollectionViewActions.tsx

@@ -13,7 +13,7 @@ const ImportCollectionAction = lazy(() => import("../../data_import/import").the
 const ExportCollectionAction = lazy(() => import("../../data_export/export").then(m => ({ default: m.ExportCollectionAction })));
 import { EditorCollectionAction } from "../../collection_editor/ui/EditorCollectionAction";
 import { useCollectionEditorController } from "../../collection_editor/useCollectionEditorController";
-import { useCMSContext } from "../../hooks/useCMSContext";
+import { useAdminContext } from "../../hooks/useAdminContext";
 
 export type CollectionViewActionsProps<M extends Record<string, unknown>> = {
     collection: AdminCollection<M>;
@@ -52,7 +52,7 @@ export function CollectionViewActions<M extends Record<string, unknown>>({
     children,
     openNewDocument
 }: CollectionViewActionsProps<M>) {
-    const context = useCMSContext();
+    const context = useAdminContext();
 
     const { canCreate, canDelete } = usePermissions();
 

package/src/components/CollectionViewBinding/CollectionViewBinding.tsx

@@ -75,7 +75,7 @@ import { addRecentId, getRecentIds } from "./utils";
 import { isViewMode, OpenEntityMode, resolveOpenEntityMode, VIEW_MODE_PARAM } from "../../util/view_mode";
 import { mergeDeep } from "@rebasepro/utils";
 import { useBreadcrumbsController } from "../../hooks/useBreadcrumbsController";
-import { useCMSContext } from "../../hooks/useCMSContext";
+import { useAdminContext } from "../../hooks/useAdminContext";
 import { useCollectionRegistryController } from "../../hooks/navigation/contexts/CollectionRegistryContext";
 import { useSidePanel } from "../../hooks/useSidePanel";
 import { useUrlController } from "../../hooks/navigation/contexts/UrlContext";
@@ -167,7 +167,7 @@ const CollectionViewBindingInner = React.memo(
     ) {
 
         const { t } = useTranslation();
-        const context = useCMSContext();
+        const context = useAdminContext();
         const collectionRegistry = useCollectionRegistryController();
         const urlController = useUrlController();
         const breadcrumbs = useBreadcrumbsController();

package/src/components/CollectionViewBinding/CollectionViewStartActions.tsx

@@ -11,7 +11,7 @@ import { FilterPresetsButton } from "./FilterPresetsButton";
 import { toArray } from "@rebasepro/utils";
 import { useNavigate } from "react-router-dom";
 import { useUrlController } from "../../hooks/navigation/contexts/UrlContext";
-import { useCMSContext } from "../../hooks/useCMSContext";
+import { useAdminContext } from "../../hooks/useAdminContext";
 import { withViewMode } from "../../util/view_mode";
 
 export type CollectionViewStartActionsProps<M extends Record<string, unknown>> = {
@@ -43,7 +43,7 @@ export function CollectionViewStartActions<M extends Record<string, unknown>>({
     openNewDocument
 }: CollectionViewStartActionsProps<M>) {
 
-    const context = useCMSContext();
+    const context = useAdminContext();
     const largeLayout = useLargeLayout();
     const { t } = useTranslation();
 

package/src/components/DefaultDrawer.tsx

@@ -33,9 +33,9 @@ import { LanguageToggle, RebaseLogo } from "@rebasepro/app";
 import { useApp } from "./app/useApp";
 
 /**
- * Default drawer used in the CMS.
+ * Default drawer used in the admin.
  *
- * When no `children` are provided, renders the full CMS navigation
+ * When no `children` are provided, renders the full admin navigation
  * (collection groups, mode switch, plugin slots).
  *
  * When `children` **are** provided, renders the shared drawer shell
@@ -60,7 +60,7 @@ export function DefaultDrawer({
     logoDestination?: string;
     /**
      * Custom navigation content for the drawer.
-     * When provided, replaces the default CMS navigation (collection groups,
+     * When provided, replaces the default admin navigation (collection groups,
      * mode switch, slots). The shared shell (logo, scroll area, footer
      * actions, collapse toggle) is still rendered around it.
      */
@@ -115,7 +115,7 @@ export function DefaultDrawer({
                         ? "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 />}
+                {children ?? <AdminNavigationContent />}
             </div>
 
             {footerActions !== null && (
@@ -138,11 +138,11 @@ export function DefaultDrawer({
 }
 
 /**
- * Default CMS navigation content — rendered inside DefaultDrawer when no
+ * Default admin navigation content — rendered inside DefaultDrawer when no
  * custom `children` are provided.  Contains the mode switch, navigation
  * groups, and header / footer plugin slots.
  */
-function CMSNavigationContent() {
+function AdminNavigationContent() {
 
     const {
         drawerHovered,
@@ -166,7 +166,7 @@ function CMSNavigationContent() {
     const allNavigationEntries = navigationState.topLevelNavigation?.navigationEntries ?? [];
 
     // Build a set of Studio-only dev view slugs so we can distinguish them from
-    // CMS custom views added via <RebaseAdmin views={...}> or plugins.
+    // admin custom views added via <RebaseAdmin views={...}> or plugins.
     const studioViewSlugs = useMemo(() => {
         const slugs = new Set<string>();
         (registry.studioConfig?.devViews ?? []).forEach(v => slugs.add(v.slug));
@@ -176,7 +176,7 @@ function CMSNavigationContent() {
     }, [registry.studioConfig, registry.cmsConfig?.collectionEditor]);
 
     // Studio mode shows Studio dev views + admin entries (Users/Roles).
-    // Content mode shows collections, CMS custom views, and admin entries — but not Studio dev views.
+    // Content mode shows collections, admin custom views, and admin entries — but not Studio dev views.
     const filteredEntries = adminModeController.mode === "studio"
         ? allNavigationEntries.filter(e => (e.type === "view" && studioViewSlugs.has(e.slug)) || e.type === "admin")
         : allNavigationEntries.filter(e => e.type !== "view" || !studioViewSlugs.has(e.slug));
@@ -189,6 +189,16 @@ function CMSNavigationContent() {
         ...[...entryGroups].filter(g => !orderedGroups.includes(g))
     ];
 
+    // Group header icons, declared on `navigationGroupMappings`. Keyed by name
+    // because that is what a navigation entry's `group` holds.
+    const groupIcons = useMemo(() => {
+        const icons = new Map<string, string>();
+        (registry.cmsConfig?.navigationGroupMappings ?? []).forEach(mapping => {
+            if (mapping.icon) icons.set(mapping.name, mapping.icon);
+        });
+        return icons;
+    }, [registry.cmsConfig?.navigationGroupMappings]);
+
     // Collapsible groups state - using "drawer" namespace for independent state from home page
     const collapsedDefaults = useMemo(
         () => buildCollapsedDefaults(registry.cmsConfig?.navigationGroupMappings, "drawer"),
@@ -244,6 +254,7 @@ context });
                         tooltipsOpen={tooltipsOpen}
                         adminMenuOpen={adminMenuOpen}
                         onItemClick={onItemClick}
+                        icon={groupIcons.get(group)}
                     />
                 );
             })}

package/src/components/DeleteEntityDialog.tsx

@@ -10,7 +10,7 @@ import {
     useSnackbarController,
     useTranslation
 } from "@rebasepro/app";
-import { useCMSContext } from "../hooks";
+import { useAdminContext } from "../hooks";
 import { EntityViewBinding } from "./EntityViewBinding";
 import type { AdminCollection } from "@rebasepro/admin-types";
 
@@ -54,7 +54,7 @@ export function DeleteEntityDialog<M extends Record<string, unknown>>({
     const { t } = useTranslation();
     const [loading, setLoading] = useState(false);
 
-    const context = useCMSContext();
+    const context = useAdminContext();
     const entityOrEntities = Array.isArray(entityOrEntitiesToDelete) && entityOrEntitiesToDelete.length === 1
         ? entityOrEntitiesToDelete[0]
         : entityOrEntitiesToDelete;

package/src/components/DetailViewBinding.tsx

@@ -11,6 +11,7 @@ import { EntityViewBinding } from "./EntityViewBinding";
 import { CircularProgressCenter, iconSize } from "@rebasepro/ui";
 import {
     Alert,
+    ArrowLeftIcon,
     Button,
     CenteredView,
     cls,
@@ -470,7 +471,24 @@ entityId }
             );
         });
 
-    const shouldShowTopBar = Boolean(barActions) || hasAdditionalViews || layout === "side_panel" || layout === "dialog";
+    // Full screen is the one layout with no way out of its own: a side panel and a
+    // dialog can be dismissed, and a split keeps the list beside it, but opening an
+    // entity full screen replaces the collection entirely and left browser Back as
+    // the only route back to it — which is not an affordance the page shows, and is
+    // wrong anyway once the user has moved between tabs inside the entity.
+    const backToCollectionButton = layout === "full_screen" ? (
+        <Tooltip title={t("back")}>
+            <IconButton
+                size="small"
+                aria-label={t("back")}
+                onClick={() => navigate(urlController.buildUrlCollectionPath(path))}
+            >
+                <ArrowLeftIcon size={iconSize.smallest} />
+            </IconButton>
+        </Tooltip>
+    ) : null;
+
+    const shouldShowTopBar = Boolean(barActions) || hasAdditionalViews || layout === "side_panel" || layout === "dialog" || Boolean(backToCollectionButton);
 
     const fullScreenButton = !barActions && (layout === "side_panel" || layout === "split" || layout === "dialog") && entityId ? (
         <Tooltip title={"Open full screen"}>
@@ -562,6 +580,8 @@ entityId }
         {shouldShowTopBar && <div
             className={cls("h-[52px] items-center flex overflow-hidden w-full border-b pl-2 pr-2 flex bg-surface-50 dark:bg-surface-900", defaultBorderMixin)}>
 
+            {backToCollectionButton}
+
             {fullScreenButton}
 
             {barActions?.({

package/src/components/DrawerNavigationGroup.tsx

@@ -2,7 +2,7 @@ import type { NavigationEntry } from "@rebasepro/admin-types";
 import React from "react";
 import { ChevronDownIcon, cls, iconSize, Typography } from "@rebasepro/ui";
 
-import { IconForView } from "@rebasepro/app";
+import { IconForView, getIcon } from "@rebasepro/app";
 import { DrawerNavigationItem } from "./DrawerNavigationItem";
 import { useTranslation, useComponentOverride } from "@rebasepro/app";
 
@@ -47,6 +47,13 @@ export interface DrawerNavigationGroupProps {
      * Hide the group header (title and expandable panel)
      */
     hideHeader?: boolean;
+    /**
+     * Lucide icon name for the group header, from `NavigationGroupMapping.icon`.
+     *
+     * Supplying one moves the visual anchor from the rows to the group: the header
+     * gets the icon, and the entries below trade theirs for an indent.
+     */
+    icon?: string;
 }
 
 /**
@@ -63,10 +70,23 @@ export function DrawerNavigationGroup({
     adminMenuOpen,
     headerActions,
     onItemClick,
-    hideHeader
+    hideHeader,
+    icon
 }: DrawerNavigationGroupProps) {
     const { t } = useTranslation();
     const ResolvedDrawerNavigationItem = useComponentOverride("Shell.DrawerNavigationItem", DrawerNavigationItem);
+
+    // Opt-in, per group: declaring `icon` on a `NavigationGroupMapping` switches
+    // this group to the categorised treatment — icon on the header, entries
+    // indented beneath it without their own. A group that declares no icon renders
+    // exactly as it did before, so an existing project sees no change at all.
+    //
+    // Two cases stay on the flat rendering regardless: with no header there is
+    // nothing to indent under, and collapsed to a rail the entry icons are the only
+    // affordance left to click.
+    const groupIcon = !hideHeader && drawerOpen ? getIcon(icon, undefined, undefined, "small") : undefined;
+    const categorised = Boolean(groupIcon);
+    const indentEntries = categorised;
     return (
         <div
             className={"my-2 mx-2 flex flex-col"}
@@ -83,14 +103,36 @@ export function DrawerNavigationGroup({
                     <ChevronDownIcon
                         size={iconSize.small}
                         className={cls(
-                            "text-surface-400 dark:text-surface-400 transition-transform duration-200 mr-1",
+                            categorised
+                                ? "text-surface-500 dark:text-surface-400"
+                                : "text-surface-400 dark:text-surface-400",
+                            "transition-transform duration-200 mr-1",
                             collapsed ? "-rotate-90" : "rotate-0"
                         )}
                     />
+                    {groupIcon && (
+                        <span className="shrink-0 mr-2 flex items-center text-surface-600 dark:text-surface-300 [&>svg]:size-4">
+                            {groupIcon}
+                        </span>
+                    )}
                     <Typography
                         variant={"caption"}
                         color={"secondary"}
-                        className="font-semibold text-[11px] uppercase tracking-wider flex-grow line-clamp-1 text-surface-400 dark:text-surface-400"
+                        // Two treatments, and which one applies is decided by the group
+                        // itself. Without an icon this is byte-for-byte the original: the
+                        // drawer is a flat list of same-weight rows, and a louder header
+                        // would just compete with them.
+                        //
+                        // With one, the group becomes the thing you scan — its rows have
+                        // given up their icons to indent beneath it — so the label steps up
+                        // to match. At 11px in surface-400 it sat *below* the contrast of
+                        // the rows it labels, which is backwards once it is the anchor.
+                        className={cls(
+                            "font-semibold uppercase flex-grow line-clamp-1",
+                            categorised
+                                ? "text-[12px] tracking-wide text-surface-600 dark:text-surface-300"
+                                : "text-[11px] tracking-wider text-surface-400 dark:text-surface-400"
+                        )}
                     >
                         {(group || t("views_group"))}
                     </Typography>
@@ -122,6 +164,7 @@ export function DrawerNavigationGroup({
                         onClick={() => onItemClick?.(entry)}
                         url={entry.url}
                         name={entry.name}
+                        indented={indentEntries}
                     />
                 ))}
             </div>

package/src/components/DrawerNavigationItem.tsx

@@ -10,7 +10,8 @@ export function DrawerNavigationItem({
     adminMenuOpen,
     tooltipsOpen,
     url,
-    onClick
+    onClick,
+    indented = false
 }: {
     icon: React.ReactElement,
     name: string,
@@ -19,12 +20,25 @@ export function DrawerNavigationItem({
     adminMenuOpen?: boolean,
     url: string,
     onClick?: () => void,
+    /**
+     * Render as a child of an icon-bearing group: no icon of its own, indented to
+     * sit under the group's label. Set by {@link DrawerNavigationGroup} only when
+     * the group actually has an icon and the drawer is expanded.
+     */
+    indented?: boolean,
 }) {
 
-    const iconWrap = <div
-        className={"shrink-0 flex items-center justify-center w-[44px] h-[30px] text-surface-500 dark:text-text-secondary-dark [&>svg]:size-4 group-hover/nav:text-primary transition-colors duration-150"}>
-        {icon}
-    </div>;
+    // Indented rows give up the icon rather than keeping it *and* indenting: a
+    // per-row icon repeated down a group is what flattens the hierarchy, since
+    // every row then reads at the weight of the category above it. The indent is
+    // the same 44px the icon occupied, so labels stay on the original grid and the
+    // rail width does not change.
+    const iconWrap = indented
+        ? <div className={"shrink-0 w-[44px] h-[30px]"} aria-hidden={true}/>
+        : <div
+            className={"shrink-0 flex items-center justify-center w-[44px] h-[30px] text-surface-500 dark:text-text-secondary-dark [&>svg]:size-4 group-hover/nav:text-primary transition-colors duration-150"}>
+            {icon}
+        </div>;
 
     const listItem = <div>
         <NavLink

package/src/components/EditFormActions.tsx

@@ -20,7 +20,8 @@ import { SideDialogController, useSideDialogContext } from "./SideDialogs";
 import { FormexController } from "@rebasepro/forms";
 import { ErrorTooltip } from "@rebasepro/app";
 import { usePermissions } from "@rebasepro/app";
-import { useCMSContext } from "../hooks/useCMSContext";
+import { getIcon } from "@rebasepro/app";
+import { useAdminContext } from "../hooks/useAdminContext";
 import { useChildViewSource } from "../hooks/useChildViewSource";
 
 export function EditFormActions({
@@ -40,7 +41,7 @@ export function EditFormActions({
 }: EntityFormActionsProps) {
 
     const { canCreate, canDelete } = usePermissions();
-    const context = useCMSContext();
+    const context = useAdminContext();
     const sidePanelController = context.sidePanelController;
     const sideDialogContext = useSideDialogContext();
     const customizationController = useCustomizationController();
@@ -371,7 +372,7 @@ function EntityActionButton({
                     });
                 }
             }}>
-            {loading ? <CircularProgress size={"smallest"}/> : action.icon}
+            {loading ? <CircularProgress size={"smallest"}/> : getIcon(action.icon, undefined, undefined, "smallest")}
         </IconButton>
     </Tooltip>;
 }

package/src/components/EditViewBinding.tsx

@@ -70,7 +70,7 @@ export type OnTabChangeParams<M extends Record<string, unknown>> = {
 
 export interface EditViewBindingProps<M extends Record<string, unknown> = Record<string, unknown>> {
     /**
-     * The CMS path of the entity, e.g. "users" or "products".
+     * The admin path of the entity, e.g. "users" or "products".
      */
     path: string;
     collection: AdminCollection<M>;