@rebasepro/admin 0.8.0 → 0.9.1-canary.09aaf62

package/src/components/SelectableTable/filters/ReferenceFilterField.tsx

@@ -1,12 +1,12 @@
-import { useEntitySelectionDialog } from "../../../hooks/useEntitySelectionDialog";
-import type { EntityCollection } from "@rebasepro/types";
+import { useSelectionDialog } from "../../../hooks/useSelectionDialog";
+import type { CollectionConfig } from "@rebasepro/types";
 import React, { useMemo, useState } from "react";
 import { VirtualTableWhereFilterOp } from "@rebasepro/ui";
 import { Entity, EntityReference } from "@rebasepro/types";
 import { ReferencePreview } from "../../../preview";
 import { Button, Checkbox, Label, Select, SelectItem } from "@rebasepro/ui";
 import { getReferenceFrom } from "@rebasepro/common";
-import { useTranslation } from "@rebasepro/core";
+import { useTranslation } from "@rebasepro/app";
 import { useCollectionRegistryController } from "../../../index";
 
 interface ReferenceFilterFieldProps {
@@ -20,6 +20,12 @@ interface ReferenceFilterFieldProps {
     previewProperties?: string[];
     hidden: boolean;
     setHidden: (hidden: boolean) => void;
+    /**
+     * Restrict the offered operators (already resolved against engine
+     * capabilities and property config). When omitted, all operators this
+     * field can render are offered.
+     */
+    operators?: readonly VirtualTableWhereFilterOp[];
 }
 
 const operationLabels = {
@@ -44,11 +50,12 @@ export function ReferenceFilterField({
     path,
     includeId = true,
     previewProperties,
-    setHidden
+    setHidden,
+    operators
 }: ReferenceFilterFieldProps) {
     const { t } = useTranslation();
 
-    const possibleOperations: (keyof typeof operationLabels)[] = isArray
+    let possibleOperations: (keyof typeof operationLabels)[] = isArray
         ? ["array-contains"]
         : ["==", "!=", ">", "<", ">=", "<="];
 
@@ -58,6 +65,10 @@ export function ReferenceFilterField({
         possibleOperations.push("in", "not-in");
     }
 
+    if (operators) {
+        possibleOperations = possibleOperations.filter(op => (operators as readonly string[]).includes(op));
+    }
+
     const [fieldOperation, fieldValue] = value || [possibleOperations[0], undefined];
     const [operation, setOperation] = useState<VirtualTableWhereFilterOp>(fieldOperation);
     const [internalValue, setInternalValue] = useState<EntityReference | EntityReference[] | undefined | null>(fieldValue as EntityReference | EntityReference[] | undefined | null);
@@ -100,7 +111,7 @@ export function ReferenceFilterField({
     }
 
     const collectionRegistryController = useCollectionRegistryController();
-    const collection: EntityCollection | undefined = useMemo(() => {
+    const collection: CollectionConfig | undefined = useMemo(() => {
         return path ? collectionRegistryController.getCollection(path) : undefined;
     }, [path]);
 
@@ -114,7 +125,7 @@ export function ReferenceFilterField({
 
     const multiple = multipleSelectOperations.includes(operation);
 
-    const referenceDialogController = useEntitySelectionDialog({
+    const referenceDialogController = useSelectionDialog({
         multiselect: multiple,
         path,
         collection,
@@ -147,6 +158,9 @@ export function ReferenceFilterField({
         );
     };
 
+    // All renderable operators were filtered out (engine/property narrowing).
+    if (possibleOperations.length === 0) return null;
+
     return (
 
         <div className="flex w-full flex-row">
@@ -157,7 +171,7 @@ export function ReferenceFilterField({
                     onValueChange={(value) => {
                         updateFilter(value as VirtualTableWhereFilterOp, internalValue);
                     }}
-                    renderValue={(op) => operationLabels[op as VirtualTableWhereFilterOp]}>
+                    renderValue={(op) => operationLabels[op as keyof typeof operationLabels]}>
                     {possibleOperations.map((op) => (
                         <SelectItem key={op} value={op}>
                             {operationLabels[op]}

package/src/components/SelectableTable/filters/RelationFilterField.tsx

@@ -11,6 +11,12 @@ interface RelationFilterFieldProps {
     relation: Relation; // relation config provided externally
     hidden: boolean;
     setHidden: (value: boolean) => void;
+    /**
+     * Restrict the offered operators (already resolved against engine
+     * capabilities and property config). When omitted, all operators this
+     * field can render are offered.
+     */
+    operators?: readonly VirtualTableWhereFilterOp[];
 }
 
 const operationLabels = {
@@ -34,15 +40,20 @@ export function RelationFilterField({
     relation,
     name: _name,
     hidden: _hidden,
-    setHidden: _setHidden
+    setHidden: _setHidden,
+    operators
 }: RelationFilterFieldProps) {
 
     const manyRelation = relation.cardinality === "many";
 
-    const possibleOperations: (keyof typeof operationLabels)[] = manyRelation
+    let possibleOperations: (keyof typeof operationLabels)[] = manyRelation
         ? ["array-contains", "array-contains-any"]
         : ["==", "!=", ">", "<", ">=", "<=", "in", "not-in"];
 
+    if (operators) {
+        possibleOperations = possibleOperations.filter(op => (operators as readonly string[]).includes(op));
+    }
+
     const [fieldOperation, fieldValue] = value || [possibleOperations[0], undefined];
     const [operation, setOperation] = useState<VirtualTableWhereFilterOp>(fieldOperation);
     const [internalValue, setInternalValue] = useState<EntityRelation | EntityRelation[] | undefined | null>(fieldValue);
@@ -89,6 +100,9 @@ export function RelationFilterField({
         updateFilter(operation, newVal);
     };
 
+    // All renderable operators were filtered out (engine/property narrowing).
+    if (possibleOperations.length === 0) return null;
+
     return (
         <div className="flex flex-row">
             <div className="">
@@ -98,7 +112,7 @@ export function RelationFilterField({
                     onValueChange={(newOp) => {
                         updateFilter(newOp as VirtualTableWhereFilterOp, internalValue);
                     }}
-                    renderValue={(op) => operationLabels[op as VirtualTableWhereFilterOp]}
+                    renderValue={(op) => operationLabels[op as keyof typeof operationLabels]}
                 >
                     {possibleOperations.map((op) => (
                         <SelectItem key={op} value={op}>

package/src/components/SelectableTable/filters/StringNumberFilterField.tsx

@@ -11,7 +11,7 @@ import {
     XIcon
 } from "@rebasepro/ui";
 import { EnumValueConfig } from "@rebasepro/types";
-import { useTranslation } from "@rebasepro/core";
+import { useTranslation } from "@rebasepro/app";
 
 interface StringNumberFilterFieldProps {
     name: string,
@@ -21,6 +21,12 @@ interface StringNumberFilterFieldProps {
     isArray?: boolean;
     enumValues?: EnumValueConfig[];
     title?: string;
+    /**
+     * Restrict the offered operators (already resolved against engine
+     * capabilities and property config). When omitted, all operators this
+     * field can render are offered.
+     */
+    operators?: readonly VirtualTableWhereFilterOp[];
 }
 
 const operationLabels = {
@@ -34,11 +40,23 @@ const operationLabels = {
     "not-in": "Not in",
     "array-contains": "Contains",
     "array-contains-any": "Any",
-    "is-null": "Is null"
+    "ilike": "Contains",
+    "not-ilike": "Not contains",
+    "is-null": "Is null",
+    "is-not-null": "Is not null"
 };
 
 const multipleSelectOperations = ["array-contains-any", "in", "not-in"];
 
+/** Operators that match a substring, wrapped in SQL wildcards (`%value%`). */
+const containsOperations = ["ilike", "not-ilike"];
+
+/** Strip the surrounding `%` wildcards a contains-filter adds, for display. */
+function unwrapContains(value: unknown): string {
+    if (typeof value !== "string") return "";
+    return value.replace(/^%/, "").replace(/%$/, "");
+}
+
 export function StringNumberFilterField({
                                             name,
                                             value,
@@ -46,13 +64,20 @@ export function StringNumberFilterField({
                                             type,
                                             isArray,
                                             enumValues,
-                                            title
+                                            title,
+                                            operators
                                         }: StringNumberFilterFieldProps) {
     const { t } = useTranslation();
 
-    const possibleOperations: (keyof typeof operationLabels)[] = isArray
+    let possibleOperations: (keyof typeof operationLabels)[] = isArray
         ? ["array-contains"]
-        : ["==", "!=", ">", "<", ">=", "<=", "is-null"];
+        : ["==", "!=", ">", "<", ">=", "<=", "is-null", "is-not-null"];
+
+    // Case-insensitive substring matching is only meaningful for free-text
+    // string columns (not numbers, arrays, or enums).
+    if (!isArray && !enumValues && type === "string") {
+        possibleOperations.push("ilike", "not-ilike");
+    }
 
     if (enumValues) {
         if (isArray) {
@@ -62,18 +87,47 @@ export function StringNumberFilterField({
         }
     }
 
+    if (operators) {
+        possibleOperations = possibleOperations.filter(op => (operators as readonly string[]).includes(op));
+    }
+
     const [fieldOperation, fieldValue] = value || [possibleOperations[0], undefined];
-    const [operation, setOperation] = useState<VirtualTableWhereFilterOp | "is-null">(fieldOperation === "==" && fieldValue === null ? "is-null" : fieldOperation);
-    const [internalValue, setInternalValue] = useState<string | number | string[] | number[] | null | undefined>(fieldValue as string | number | string[] | number[] | null | undefined);
+    // Read back both the canonical null operators and the legacy `["==", null]` /
+    // `["!=", null]` form saved by older filter presets.
+    const [operation, setOperation] = useState<VirtualTableWhereFilterOp>(
+        fieldOperation === "==" && fieldValue === null ? "is-null"
+            : fieldOperation === "!=" && fieldValue === null ? "is-not-null"
+                : fieldOperation
+    );
+    const [internalValue, setInternalValue] = useState<string | number | string[] | number[] | null | undefined>(
+        containsOperations.includes(fieldOperation) ? unwrapContains(fieldValue) : (fieldValue as string | number | string[] | number[] | null | undefined)
+    );
+
+    const isNullOperation = operation === "is-null" || operation === "is-not-null";
 
-    const isNullOperation = operation === "is-null";
+    // All renderable operators were filtered out (engine/property narrowing).
+    if (possibleOperations.length === 0) return null;
 
-    function updateFilter(op: VirtualTableWhereFilterOp | "is-null", val: string | number | string[] | number[] | null | undefined) {
-        // Handle "is null" operation
-        if (op === "is-null") {
+    function updateFilter(op: VirtualTableWhereFilterOp, val: string | number | string[] | number[] | null | undefined) {
+        // Null-testing operators ignore their value.
+        if (op === "is-null" || op === "is-not-null") {
             setOperation(op);
             setInternalValue(null);
-            setValue(["==", null]);
+            setValue([op, null]);
+            return;
+        }
+
+        // Substring matching: keep the raw text in the field, emit it wrapped
+        // in SQL wildcards so the backend runs `column ILIKE '%value%'`.
+        if (op === "ilike" || op === "not-ilike") {
+            const raw = typeof val === "string" ? val : "";
+            setOperation(op);
+            setInternalValue(raw);
+            if (raw.length > 0) {
+                setValue([op, `%${raw}%`]);
+            } else {
+                setValue(undefined);
+            }
             return;
         }
 
@@ -121,7 +175,7 @@ export function StringNumberFilterField({
                         fullWidth={true}
                         position={"item-aligned"}
                         onValueChange={(value) => {
-                            updateFilter(value as VirtualTableWhereFilterOp | "is-null", internalValue);
+                            updateFilter(value as VirtualTableWhereFilterOp, internalValue);
                         }}
                         renderValue={(op) => operationLabels[op as keyof typeof operationLabels]}>
                     {possibleOperations.map((op) => (

package/src/components/SideDialogs.tsx

@@ -2,9 +2,9 @@ import type { SideDialogPanelProps } from "../hooks/useSideDialogsController";
 import React, { useCallback, useContext, useEffect, useState, useMemo } from "react";
 import { useSideDialogsController } from "../hooks";
 import { Sheet, Dialog } from "@rebasepro/ui";
-import { useUnsavedChangesDialog, UnsavedChangesDialog } from "@rebasepro/core";
+import { useUnsavedChangesDialog, UnsavedChangesDialog } from "@rebasepro/app";
 import { ErrorBoundary } from "@rebasepro/ui";
-import type { EntitySidePanelProps } from "@rebasepro/types";
+import type { SidePanelBindingProps } from "@rebasepro/types";
 
 
 export type SideDialogController = {
@@ -41,7 +41,7 @@ export const useSideDialogContext = () => useContext<SideDialogController>(SideD
 
 /**
  * This is the component in charge of rendering the side dialogs used
- * for editing entities. Use the {@link useSideEntityController} to open
+ * for editing entities. Use the {@link useSidePanel} to open
  * and control the dialogs.
  * This component needs a parent {@link Rebase}
  * {@link useSideDialogsController}
@@ -146,7 +146,7 @@ function SideDialogView({
         setPendingClose
     }), [blocked, setBlockedNavigationMessage, width, onCloseRequest, pendingClose]);
 
-    const additionalProps = panel?.additional as EntitySidePanelProps | undefined;
+    const additionalProps = panel?.additional as SidePanelBindingProps | undefined;
     const isDialogMode = additionalProps?.collection?.openEntityMode === "dialog";
 
     return (

package/src/components/{EntitySidePanel.tsx → SidePanelBinding.tsx}

@@ -1,28 +1,28 @@
-import type { EntityCollection } from "@rebasepro/types";
-import type { EntitySidePanelProps } from "@rebasepro/types";
+import type { CollectionConfig } from "@rebasepro/types";
+import type { SidePanelBindingProps } from "@rebasepro/types";
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
 import type { OnUpdateParams } from "../types/components/EntityFormProps";
 import { ErrorBoundary } from "@rebasepro/ui";
 import { IconButton, Maximize2Icon, XIcon } from "@rebasepro/ui";
-import { EntityEditView } from "./EntityEditView";
-import { EntityDetailView } from "./EntityDetailView";
+import { EditViewBinding } from "./EditViewBinding";
+import { DetailViewBinding } from "./DetailViewBinding";
 import { useSideDialogContext } from "./SideDialogs";
 import { useNavigate } from "react-router-dom";
-import { saveEntityToMemoryCache, useComponentOverride } from "@rebasepro/core";
-import { useCollectionRegistryController, useSideEntityController } from "../index";
+import { saveEntityToMemoryCache, useComponentOverride } from "@rebasepro/app";
+import { useCollectionRegistryController, useSidePanel } from "../index";
 import { useUrlController } from "../index";
 import { resolveDefaultSelectedView } from "@rebasepro/common";
 
 /**
  * This is the component in charge of rendering the side dialog used
- * for editing entities. Use the {@link useSideEntityController} to open
+ * for editing entities. Use the {@link useSidePanel} to open
  * and control the dialogs.
  * This component needs a parent {@link Rebase}
- * {@link useSideEntityController}
+ * {@link useSidePanel}
  * @group Components
  */
-export function EntitySidePanel(props: EntitySidePanelProps) {
+export function SidePanelBinding(props: SidePanelBindingProps) {
 
     const {
         allowFullScreen = true,
@@ -32,7 +32,7 @@ export function EntitySidePanel(props: EntitySidePanelProps) {
         formProps
     } = props;
 
-    const ResolvedDetailView = useComponentOverride("Entity.DetailView", EntityDetailView);
+    const ResolvedDetailView = useComponentOverride("DetailView", DetailViewBinding);
 
     const {
         blocked,
@@ -43,7 +43,7 @@ export function EntitySidePanel(props: EntitySidePanelProps) {
 
     const navigate = useNavigate();
 
-    const sideEntityController = useSideEntityController();
+    const sidePanelController = useSidePanel();
     const collectionRegistryController = useCollectionRegistryController();
     const sideDialogsController = useSideDialogContext();
     const urlController = useUrlController();
@@ -63,7 +63,7 @@ export function EntitySidePanel(props: EntitySidePanelProps) {
         }
         setShowEditInPanel(false);
         if (params.status !== "existing") {
-            sideEntityController.replace({
+            sidePanelController.replace({
                 path: params.path,
                 entityId: params.entityId,
                 selectedTab: params.selectedTab,
@@ -102,7 +102,7 @@ export function EntitySidePanel(props: EntitySidePanelProps) {
     // defaultSelectedView, update the panel width and URL to match.
     // This handles cases where defaultSelectedView is set via the collection
     // editor / Studio and is not available on the collection object the
-    // caller passed to sideEntityController.open().
+    // caller passed to sidePanelController.open().
     const hasCorrectedDefaultView = useRef(false);
     useEffect(() => {
         hasCorrectedDefaultView.current = false;
@@ -119,7 +119,7 @@ entityId }
         );
         if (effectiveDefault && effectiveDefault !== "edit") {
             hasCorrectedDefaultView.current = true;
-            sideEntityController.replace({
+            sidePanelController.replace({
                 path,
                 entityId,
                 selectedTab: effectiveDefault,
@@ -127,7 +127,7 @@ entityId }
                 collection
             });
         }
-    }, [selectedTab, entityId, collection, path, sideEntityController]);
+    }, [selectedTab, entityId, collection, path, sidePanelController]);
 
     // Note: beforeunload is handled by useUnsavedChangesDialog in SideDialogView,
     // which listens to the same `blocked` state via SideDialogContext.
@@ -150,7 +150,7 @@ entityId }
                     ? <ResolvedDetailView
                         path={path}
                         layout={collection?.openEntityMode === "dialog" ? "dialog" : "side_panel"}
-                        collection={collection as EntityCollection}
+                        collection={collection as CollectionConfig}
                         entityId={entityId!}
                         parentCollectionSlugs={parentCollectionSlugs}
                         parentEntityIds={parentEntityIds}
@@ -186,7 +186,7 @@ entityId }
                                 return;
                             }
                             if (tabEntityId) {
-                                sideEntityController.replace({
+                                sidePanelController.replace({
                                     path,
                                     entityId: tabEntityId,
                                     selectedTab,
@@ -196,10 +196,10 @@ entityId }
                             }
                         }}
                     />
-                    : <EntityEditView
+                    : <EditViewBinding
                         {...props}
                         layout={collection?.openEntityMode === "dialog" ? "dialog" : "side_panel"}
-                        collection={collection as EntityCollection}
+                        collection={collection as CollectionConfig}
                         parentCollectionSlugs={parentCollectionSlugs} parentEntityIds={parentEntityIds}
                         onValuesModified={onValuesModified}
                         onSaved={onUpdate}
@@ -242,7 +242,7 @@ entityId }
                                 return;
                             }
                             if (tabEntityId) {
-                                sideEntityController.replace({
+                                sidePanelController.replace({
                                     path,
                                     entityId: tabEntityId,
                                     selectedTab,

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

@@ -1,23 +1,23 @@
-import type { SideEntityController } from "@rebasepro/types";
+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
@@ -27,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,
@@ -56,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>
     );
@@ -69,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: SideEntityController }) {
+function BridgeAutoRegistrar({ sidePanelController }: { sidePanelController: SidePanelController }) {
     const breadcrumbs = useBreadcrumbsController();
-    useBridgeRegistration("sideEntityController", sideEntityController);
+    useBridgeRegistration("sidePanelController", sidePanelController);
     useBridgeRegistration("breadcrumbs", breadcrumbs);
     return null;
 }

package/src/components/UserSelector.tsx

@@ -21,7 +21,7 @@ import * as React from "react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { Command as CommandPrimitive } from "cmdk";
 import { User } from "@rebasepro/types";
-import { useRebaseClient, useAuthController, UserDisplay } from "@rebasepro/core";
+import { useRebaseClient, useAuthController, UserDisplay } from "@rebasepro/app";
 import { EmptyValue } from "../preview";
 
 interface UserSelectorItem {

package/src/components/admin/CreationResultDialog.tsx

@@ -13,7 +13,7 @@ import {
     Tooltip,
     Typography
 } from "@rebasepro/ui";
-import { useSnackbarController, useTranslation } from "@rebasepro/core";
+import { useSnackbarController, useTranslation } from "@rebasepro/app";
 import { UserCreationResult } from "@rebasepro/types";
 
 export function CreationResultDialog({
@@ -90,8 +90,11 @@ export function CreationResultDialog({
                     <div className="flex flex-col gap-4 py-2">
                         <Alert color="warning">
                             <Typography variant="body2">
-                                {t("temporary_password_description") ??
-                                    "Email is not configured. Share this temporary password with the user securely. It will not be shown again."}
+                                {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>
 

package/src/components/app/Scaffold.tsx

@@ -3,7 +3,7 @@ import { cls, defaultBorderMixin, IconButton, Sheet, Tooltip } from "@rebasepro/
 import { ChevronLeftIcon, ErrorBoundary, MenuIcon } from "@rebasepro/ui";
 import { deepEqual as equal } from "fast-equals"
 
-import { useLargeLayout, useAdminModeController, useTranslation } from "@rebasepro/core";
+import { useLargeLayout, useAdminModeController, useTranslation } from "@rebasepro/app";
 import { AppContext } from "./useApp";
 
 export const DRAWER_WIDTH = 280;
@@ -141,8 +141,12 @@ export const Scaffold = React.memo<PropsWithChildren<ScaffoldProps>>(
 
                         <div
                             className={cls(defaultBorderMixin, "bg-surface-50 dark:bg-surface-800", "grow overflow-auto m-0", {
-                                "lg:mt-4": !hasAppBar,
                                 "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
                             })}>