@rebasepro/admin 0.9.1-canary.ff338b5 → 0.10.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rebasepro/admin",
   "type": "module",
-  "version": "0.9.1-canary.ff338b5",
+  "version": "0.10.0",
   "description": "Rebase CMS — content management views, forms, and routing",
   "funding": {
     "url": "https://github.com/sponsors/rebaseco"
@@ -83,13 +83,13 @@
     "react-dropzone": "^15.0.0",
     "react-use-measure": "^2.1.7",
     "zod": "^4.4.3",
-    "@rebasepro/app": "0.9.1-canary.ff338b5",
-    "@rebasepro/common": "0.9.1-canary.ff338b5",
-    "@rebasepro/forms": "0.9.1-canary.ff338b5",
-    "@rebasepro/types": "0.9.1-canary.ff338b5",
-    "@rebasepro/ui": "0.9.1-canary.ff338b5",
-    "@rebasepro/utils": "0.9.1-canary.ff338b5",
-    "@rebasepro/inference": "0.9.1-canary.ff338b5"
+    "@rebasepro/common": "0.10.0",
+    "@rebasepro/app": "0.10.0",
+    "@rebasepro/forms": "0.10.0",
+    "@rebasepro/inference": "0.10.0",
+    "@rebasepro/types": "0.10.0",
+    "@rebasepro/ui": "0.10.0",
+    "@rebasepro/utils": "0.10.0"
   },
   "peerDependencies": {
     "react": ">=19.0.0",

package/src/collection_editor/ui/collection_editor/CollectionRLSTab.tsx

@@ -132,6 +132,41 @@ export function CollectionRLSTab() {
         fetchLivePolicies();
     }, [databaseAdmin, values.id, values.table, values.alias]);
 
+    /**
+     * Application roles available to `SecurityRule.roles`.
+     *
+     * Deliberately NOT `fetchAvailableRoles` — that returns native pg_roles
+     * (postgres, rebase_user, …), which can never satisfy an application-role
+     * condition.
+     */
+    const [availableRoles, setAvailableRoles] = useState<string[]>([]);
+    const [rolesUnavailable, setRolesUnavailable] = useState(false);
+
+    useEffect(() => {
+        let mounted = true;
+        const fetchRoles = async () => {
+            if (!databaseAdmin?.fetchApplicationRoles) {
+                // Older backend, or a driver with no application-role concept.
+                if (mounted) setRolesUnavailable(true);
+                return;
+            }
+            try {
+                const fetched = await databaseAdmin.fetchApplicationRoles();
+                if (mounted) {
+                    setAvailableRoles(fetched);
+                    setRolesUnavailable(false);
+                }
+            } catch (e) {
+                console.error("Failed to fetch application roles", e);
+                if (mounted) setRolesUnavailable(true);
+            }
+        };
+        fetchRoles();
+        return () => {
+            mounted = false;
+        };
+    }, [databaseAdmin]);
+
     const tableName = values.id || values.table || values.alias;
 
     /**
@@ -219,7 +254,7 @@ export function CollectionRLSTab() {
                                         tablename: values.id || values.table || values.alias || "your_table",
                                         permissive: (rule.mode || "permissive").toUpperCase() as PostgresPolicy["permissive"],
                                         cmd: (rule.operation || "ALL").toUpperCase() as PostgresPolicy["cmd"],
-                                        roles: rule.roles || ["public"],
+                                        roles: rule.roles || [],
                                         qual: rule.using || null,
                                         with_check: rule.withCheck || null
                                     })}>
@@ -293,6 +328,8 @@ export function CollectionRLSTab() {
                         <InlinePolicyEditor
                             policy={editingPolicy === "new" ? undefined : editingPolicy}
                             table={values.id || values.table || values.alias || "your_table"}
+                            availableRoles={availableRoles}
+                            rolesUnavailable={rolesUnavailable}
                             onSave={handleSave}
                             onCancel={() => setEditingPolicy(null)}
                         />
@@ -307,30 +344,57 @@ export function CollectionRLSTab() {
 
 type PolicyCommand = "ALL" | "SELECT" | "INSERT" | "UPDATE" | "DELETE";
 const COMMAND_OPTIONS: PolicyCommand[] = ["ALL", "SELECT", "INSERT", "UPDATE", "DELETE"];
-const ROLE_OPTIONS = ["public", "authenticated", "anon", "admin"];
 
 function InlinePolicyEditor({
     policy,
     table,
+    availableRoles,
+    rolesUnavailable,
     onSave,
     onCancel
 }: {
     policy?: PostgresPolicy;
     table: string;
+    availableRoles: string[];
+    rolesUnavailable: boolean;
     onSave: (policyData: Partial<PostgresPolicy>) => void;
     onCancel: () => void;
 }) {
     const [name, setName] = useState(policy?.policyname || "");
     const [behavior, setBehavior] = useState<"PERMISSIVE" | "RESTRICTIVE">(policy?.permissive || "PERMISSIVE");
     const [command, setCommand] = useState<PolicyCommand>((policy?.cmd as PolicyCommand) || "ALL");
+    // No roles means "not restricted by role". Seeding a value here would
+    // silently narrow every new policy to it.
     const [roles, setRoles] = useState<string[]>(
-        policy?.roles ? (Array.isArray(policy.roles) ? policy.roles : [policy.roles]) : ["public"]
+        policy?.roles ? (Array.isArray(policy.roles) ? policy.roles : [policy.roles]) : []
     );
+    const [customRole, setCustomRole] = useState("");
     const [usingExpr, setUsingExpr] = useState(policy?.qual || "");
     const [checkExpr, setCheckExpr] = useState(policy?.with_check || "");
 
     const showCheck = command === "ALL" || command === "INSERT" || command === "UPDATE";
 
+    /**
+     * Roles offered in the dropdown: those in use in the project, plus any the
+     * rule already carries. The union matters — application roles are derived
+     * from what users hold, so a role that is referenced here but assigned to
+     * nobody would otherwise vanish from its own policy on the next save.
+     */
+    const roleOptions = useMemo(
+        () => Array.from(new Set([...availableRoles, ...roles])).sort(),
+        [availableRoles, roles]
+    );
+
+    const addCustomRole = () => {
+        const trimmed = customRole.trim();
+        if (!trimmed || roles.includes(trimmed)) {
+            setCustomRole("");
+            return;
+        }
+        setRoles([...roles, trimmed]);
+        setCustomRole("");
+    };
+
     return (
         <>
             <DialogTitle variant="h6">
@@ -365,21 +429,52 @@ function InlinePolicyEditor({
                         </div>
                     </div>
                     <div className="flex flex-col gap-1.5">
-                        <Typography variant="caption" className="uppercase tracking-wider text-text-secondary">Target Roles</Typography>
-                        <MultiSelect size="small" value={roles} onValueChange={setRoles} placeholder="Select roles">
-                            {ROLE_OPTIONS.map(r => <MultiSelectItem key={r} value={r}>{r}</MultiSelectItem>)}
-                        </MultiSelect>
+                        <Typography variant="caption" className="uppercase tracking-wider text-text-secondary">Application Roles</Typography>
+                        <Typography variant="caption" className="text-text-secondary opacity-80 -mt-1">
+                            Roles held by users of this project, matched via <span className="font-mono">auth.roles()</span>.
+                            These are not PostgreSQL roles — leave empty to apply the policy to everyone.
+                        </Typography>
+                        {roleOptions.length > 0 && (
+                            <MultiSelect size="small" value={roles} onValueChange={setRoles} placeholder="Select roles">
+                                {roleOptions.map(r => <MultiSelectItem key={r} value={r}>{r}</MultiSelectItem>)}
+                            </MultiSelect>
+                        )}
+                        {rolesUnavailable && roleOptions.length === 0 && (
+                            <Typography variant="caption" className="text-text-secondary opacity-80">
+                                Could not load the project&apos;s roles — enter them manually below.
+                            </Typography>
+                        )}
+                        {!rolesUnavailable && roleOptions.length === 0 && (
+                            <Typography variant="caption" className="text-text-secondary opacity-80">
+                                No roles are assigned to any user yet — enter one manually below.
+                            </Typography>
+                        )}
+                        <div className="flex gap-2 items-center">
+                            <TextField size="small" value={customRole}
+                                onChange={(e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => setCustomRole(e.target.value)}
+                                onKeyDown={(e: React.KeyboardEvent) => {
+                                    if (e.key === "Enter") {
+                                        e.preventDefault();
+                                        addCustomRole();
+                                    }
+                                }}
+                                placeholder="Add a role not listed, e.g. editor"/>
+                            <Button size="small" variant="outlined" color="neutral"
+                                disabled={!customRole.trim()} onClick={addCustomRole}>
+                                Add
+                            </Button>
+                        </div>
                     </div>
                     {command !== "INSERT" && (
                         <div className="flex flex-col gap-1.5">
                             <Typography variant="caption" className="uppercase tracking-wider text-text-secondary">USING expression</Typography>
-                            <TextField value={usingExpr} onChange={(e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => setUsingExpr(e.target.value)} placeholder="e.g. auth.uid() = user_id"/>
+                            <TextField value={usingExpr} onChange={(e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => setUsingExpr(e.target.value)} placeholder="e.g. auth.uid() = uid"/>
                         </div>
                     )}
                     {showCheck && (
                         <div className="flex flex-col gap-1.5">
                             <Typography variant="caption" className="uppercase tracking-wider text-text-secondary">WITH CHECK expression</Typography>
-                            <TextField value={checkExpr} onChange={(e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => setCheckExpr(e.target.value)} placeholder="e.g. auth.uid() = user_id"/>
+                            <TextField value={checkExpr} onChange={(e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => setCheckExpr(e.target.value)} placeholder="e.g. auth.uid() = uid"/>
                         </div>
                     )}
                 </Paper>

package/src/collection_editor/ui/collection_editor/properties/CommonPropertyFields.tsx

@@ -1,7 +1,7 @@
 import { FieldCaption } from "../../../_cms_internals";
 import { Field, getIn, useFormex } from "@rebasepro/forms";
 import { DebouncedTextField } from "@rebasepro/ui";
-import { PropertyWithId } from "../PropertyEditView";
+import type { PropertyWithId } from "../PropertyEditView";
 import React from "react";
 import { useTranslation } from "@rebasepro/app";
 ;

package/src/collection_editor/ui/collection_editor/properties/EnumPropertyField.tsx

@@ -9,7 +9,7 @@ import { EnumForm } from "../EnumForm";
 import { StringPropertyValidation } from "./validation/StringPropertyValidation";
 import { ArrayPropertyValidation } from "./validation/ArrayPropertyValidation";
 import { ValidationPanel } from "./validation/ValidationPanel";
-import { PropertyWithId } from "../PropertyEditView";
+import type { PropertyWithId } from "../PropertyEditView";
 
 export function EnumPropertyField({
     multiselect,

package/src/components/CollectionTableBinding/CollectionRowActions.tsx

@@ -17,7 +17,7 @@ import {
 import { useTranslation } from "@rebasepro/app";
 import { getEntityFromCache } from "@rebasepro/app";
 import { getLocalChangesBackup } from "@rebasepro/common";
-import { useCMSContext } from "../../index";
+import { useCMSContext } from "../../hooks/useCMSContext";
 
 /**
  *

package/src/components/CollectionTableBinding/fields/TableReferenceField.tsx

@@ -11,7 +11,7 @@ import { useComponentOverride, ErrorView, CollectionScopeProvider } from "@rebas
 import { cls, PencilIcon } from "@rebasepro/ui";
 import { EntityPreviewContainer } from "../../EntityPreviewBinding";
 import { getReferenceFrom } from "@rebasepro/common";
-import { useCollectionRegistryController } from "../../../index";
+import { useCollectionRegistryController } from "../../../hooks/navigation/contexts/CollectionRegistryContext";
 
 type TableReferenceFieldProps = {
     name: string;

package/src/components/CollectionViewBinding/CollectionBoardViewBinding.tsx

@@ -38,7 +38,7 @@ import { useAnalyticsController } from "@rebasepro/app";
 import { setIn } from "@rebasepro/forms";
 import { useBoardDataController } from "./useBoardDataController";
 import { useKanbanDragAndDrop } from "./hooks/useKanbanDragAndDrop";
-import { useSidePanel } from "../../index";
+import { useSidePanel } from "../../hooks/useSidePanel";
 import { generateNKeysBetween } from "fractional-indexing";
 
 export type CollectionBoardViewBindingProps<M extends Record<string, unknown> = Record<string, unknown>> = {

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 "../../index";
+import { useCMSContext } from "../../hooks/useCMSContext";
 
 export type CollectionViewActionsProps<M extends Record<string, unknown>> = {
     collection: CollectionConfig<M>;

package/src/components/CollectionViewBinding/CollectionViewBinding.tsx

@@ -69,28 +69,15 @@ import { DeleteEntityDialog } from "../DeleteEntityDialog";
 import { useSelectionController } from "./useSelectionController";
 import { CollectionViewStartActions } from "./CollectionViewStartActions";
 import { addRecentId, getRecentIds } from "./utils";
+import { isViewMode, OpenEntityMode, resolveOpenEntityMode, VIEW_MODE_PARAM } from "../../util/view_mode";
 import { mergeDeep } from "@rebasepro/utils";
-import {
-    useBreadcrumbsController,
-    useCMSContext,
-    useCollectionRegistryController,
-    useSidePanel,
-    useUrlController
-} from "../../index";
+import { useBreadcrumbsController } from "../../hooks/useBreadcrumbsController";
+import { useCMSContext } from "../../hooks/useCMSContext";
+import { useCollectionRegistryController } from "../../hooks/navigation/contexts/CollectionRegistryContext";
+import { useSidePanel } from "../../hooks/useSidePanel";
+import { useUrlController } from "../../hooks/navigation/contexts/UrlContext";
 
 const EMPTY_ARRAY: never[] = [];
-const DEFAULT_ENTITY_OPEN_MODE = "split";
-
-function getOpenEntityMode(
-    viewMode: ViewMode,
-    configuredMode?: "side_panel" | "full_screen" | "split" | "dialog"
-): "side_panel" | "full_screen" | "split" | "dialog" {
-    if (configuredMode) return configuredMode;
-    if (viewMode === "kanban") return "side_panel";
-    if (viewMode === "table" || viewMode === "cards") return "full_screen";
-    // "list" view defaults to split
-    return "split";
-}
 
 /**
  * @group Components
@@ -249,11 +236,8 @@ const CollectionViewBindingInner = React.memo(
 
         // Read view from React Router's searchParams (reactive on back/forward)
         const urlView = useMemo((): ViewMode | null => {
-            const v = searchParams.get("__view");
-            if (v && ["list", "table", "kanban", "cards"].includes(v)) {
-                return v as ViewMode;
-            }
-            return null;
+            const v = searchParams.get(VIEW_MODE_PARAM);
+            return isViewMode(v) ? v : null;
         }, [searchParams]);
 
         // Get saved view from local persistence
@@ -270,7 +254,10 @@ const CollectionViewBindingInner = React.memo(
             return defaultViewMode;
         });
 
-        const openEntityMode = getOpenEntityMode(viewMode, collection?.openEntityMode);
+        const openEntityMode = resolveOpenEntityMode({
+            collection,
+            viewMode
+        });
 
         // Sync URL with current view on init (if view came from saved config)
         useEffect(() => {
@@ -278,7 +265,7 @@ const CollectionViewBindingInner = React.memo(
                 // View came from saved config but URL doesn't have it - update URL without push
                 setSearchParams((prev) => {
                     const next = new URLSearchParams(prev);
-                    next.set("__view", viewMode);
+                    next.set(VIEW_MODE_PARAM, viewMode);
                     return next;
                 }, { replace: true });
             }
@@ -292,9 +279,9 @@ const CollectionViewBindingInner = React.memo(
             setSearchParams((prev) => {
                 const next = new URLSearchParams(prev);
                 if (newMode === defaultViewMode) {
-                    next.delete("__view");
+                    next.delete(VIEW_MODE_PARAM);
                 } else {
-                    next.set("__view", newMode);
+                    next.set(VIEW_MODE_PARAM, newMode);
                 }
                 return next;
             });
@@ -974,6 +961,7 @@ parentEntityIds,
                 highlightedEntities={highlightedEntity ? [highlightedEntity] : []}
                 size={listSize}
                 emptyComponent={emptyComponent}
+                selectedEntityId={selectedEntityIdProp}
                 getActionsForEntity={getActionsForEntity}
                 path={path}
                 openEntityMode={openEntityMode}
@@ -1008,12 +996,58 @@ parentEntityIds,
                 additionalIDHeaderWidget={<EntityIdHeaderWidget
                     path={path}
                     idPath={path}
-                    collection={collection}/>}
+                    collection={collection}
+                    openEntityMode={openEntityMode}/>}
                 openEntityMode={openEntityMode}
                 onColumnsOrderChange={onColumnsOrderChange}
             />
         );
 
+        const detailOpen = selectedEntityIdProp !== undefined;
+
+        // List view gets a centered, titled reading surface. Opening a detail
+        // panel collapses the title and drops the centering so the list can
+        // shrink into the master column.
+        const collectionSurface = viewMode === "list"
+            ? (
+                <div
+                    className={cls(
+                        "flex flex-col w-full",
+                        detailOpen ? "" : "max-w-6xl mx-auto px-3 md:px-4 lg:px-6 py-4"
+                    )}
+                >
+                    {/* Collapsible title — grid-rows for smooth height, transform for GPU */}
+                    <div
+                        className={cls(
+                            "grid transition-[grid-template-rows,transform,margin] duration-150 ease-out",
+                            detailOpen
+                                ? "grid-rows-[0fr] -translate-y-2 mt-0 mb-0"
+                                : "grid-rows-[1fr] translate-y-0 mt-12 mb-6"
+                        )}
+                    >
+                        <div className="overflow-hidden flex items-center gap-4">
+                            <Typography gutterBottom variant="h4" className="grow mb-0" component="h4">
+                                {collection.name}
+                            </Typography>
+                        </div>
+                    </div>
+                    {pluginInsights.length > 0 && (
+                        <div
+                            className={cls(
+                                "grid transition-[grid-template-rows] duration-150 ease-out",
+                                detailOpen ? "grid-rows-[0fr]" : "grid-rows-[1fr]"
+                            )}
+                        >
+                            <div className="overflow-hidden flex-shrink-0">
+                                {pluginInsights}
+                            </div>
+                        </div>
+                    )}
+                    {innerView}
+                </div>
+            )
+            : innerView;
+
         const mainContent = (
             <div className={cls("overflow-hidden h-full w-full rounded-md flex flex-col dark:bg-surface-800", className)}
                 ref={containerRef}>
@@ -1054,66 +1088,10 @@ parentEntityIds,
                         selectedTab={selectedTabProp}
                         toolbar={toolbarNode}
                     >
-                        {/* When detail panel is open, left panel is always the list
-                            view — regardless of which view mode triggered the entity
-                            click. When no detail, show the active view mode. */}
-                        {(selectedEntityIdProp !== undefined || viewMode === "list") ? (
-                            <div
-                                className={cls(
-                                    "flex flex-col w-full",
-                                    selectedEntityIdProp === undefined
-                                        ? "max-w-6xl mx-auto px-3 md:px-4 lg:px-6 py-4"
-                                        : ""
-                                )}
-                            >
-                                {/* Collapsible title — grid-rows for smooth height, transform for GPU */}
-                                <div
-                                    className={cls(
-                                        "grid transition-[grid-template-rows,transform,margin] duration-150 ease-out",
-                                        selectedEntityIdProp === undefined
-                                            ? "grid-rows-[1fr] translate-y-0 mt-12 mb-6"
-                                            : "grid-rows-[0fr] -translate-y-2 mt-0 mb-0"
-                                    )}
-                                >
-                                    <div className="overflow-hidden flex items-center gap-4">
-                                        <Typography gutterBottom variant="h4" className="grow mb-0" component="h4">
-                                            {collection.name}
-                                        </Typography>
-                                    </div>
-                                </div>
-                                {pluginInsights.length > 0 && (
-                                    <div
-                                        className={cls(
-                                            "grid transition-[grid-template-rows] duration-150 ease-out",
-                                            selectedEntityIdProp === undefined
-                                                ? "grid-rows-[1fr]"
-                                                : "grid-rows-[0fr]"
-                                        )}
-                                    >
-                                        <div className="overflow-hidden flex-shrink-0">
-                                            {pluginInsights}
-                                        </div>
-                                    </div>
-                                )}
-                                <CollectionListViewBinding
-                                    key={`list-view-${path}`}
-                                    collection={collection}
-                                    tableController={tableController}
-                                    onEntityClick={onEntityClick}
-                                    selectionController={usedSelectionController}
-                                    selectionEnabled={selectionEnabled}
-                                    highlightedEntities={highlightedEntity ? [highlightedEntity] : []}
-                                    size={listSize}
-                                    emptyComponent={emptyComponent}
-                                    selectedEntityId={selectedEntityIdProp}
-                                    getActionsForEntity={getActionsForEntity}
-                                    path={path}
-                                    openEntityMode={openEntityMode}
-                                />
-                            </div>
-                        ) : (
-                            innerView
-                        )}
+                        {/* The left panel keeps rendering whichever view mode is
+                            active. Swapping it to a list on selection would make
+                            a board or card grid vanish on every click. */}
+                        {collectionSurface}
                     </SplitListView>
                 ) : (
                     <div className="flex flex-col w-full h-full">
@@ -1122,39 +1100,7 @@ parentEntityIds,
                             "flex-1 flex flex-col",
                             (viewMode === "list" || viewMode === "cards") && "overflow-y-auto"
                         )}>
-                            {viewMode === "list" ? (
-                                <div
-                                    className={cls(
-                                        "flex flex-col w-full",
-                                        selectedEntityIdProp === undefined
-                                            ? "max-w-6xl mx-auto px-3 md:px-4 lg:px-6 py-4"
-                                            : ""
-                                    )}
-                                >
-                                    <div
-                                        className={cls(
-                                            "grid transition-[grid-template-rows,transform,margin] duration-150 ease-out",
-                                            selectedEntityIdProp === undefined
-                                                ? "grid-rows-[1fr] translate-y-0 mt-12 mb-6"
-                                                : "grid-rows-[0fr] -translate-y-2 mt-0 mb-0"
-                                        )}
-                                    >
-                                        <div className="overflow-hidden flex items-center gap-4">
-                                            <Typography gutterBottom variant="h4" className="grow mb-0" component="h4">
-                                                {collection.name}
-                                            </Typography>
-                                        </div>
-                                    </div>
-                                    {pluginInsights.length > 0 && (
-                                        <div className="flex-shrink-0">
-                                            {pluginInsights}
-                                        </div>
-                                    )}
-                                    {innerView}
-                                </div>
-                            ) : (
-                                innerView
-                            )}
+                            {collectionSurface}
                         </div>
                     </div>
                 )}
@@ -1358,11 +1304,17 @@ function buildPropertyWidthOverwrite(key: string, width: number): PartialCollect
 function EntityIdHeaderWidget({
     collection,
     path,
-    idPath
+    idPath,
+    openEntityMode
 }: {
     collection: CollectionConfig,
     path: string,
-    idPath: string
+    idPath: string,
+    /**
+     * Resolved by the parent so that finding an entity by id lands it in the
+     * same surface a row click would — not a different one.
+     */
+    openEntityMode: OpenEntityMode
 }) {
 
     const { t } = useTranslation();
@@ -1372,8 +1324,6 @@ function EntityIdHeaderWidget({
     const [recentIds, setRecentIds] = React.useState<string[]>(getRecentIds(collection.slug).map(String));
     const sidePanelController = useSidePanel();
 
-    const openEntityMode = collection?.openEntityMode ?? DEFAULT_ENTITY_OPEN_MODE;
-
     return (
         <Tooltip title={!openPopup ? t("find_by_id") : undefined} asChild={false}>
             <Popover

package/src/components/CollectionViewBinding/CollectionViewStartActions.tsx

@@ -10,7 +10,9 @@ import { FiltersDialog } from "./FiltersDialog";
 import { FilterPresetsButton } from "./FilterPresetsButton";
 import { toArray } from "@rebasepro/utils";
 import { useNavigate } from "react-router-dom";
-import { useUrlController, useCMSContext } from "../../index";
+import { useUrlController } from "../../hooks/navigation/contexts/UrlContext";
+import { useCMSContext } from "../../hooks/useCMSContext";
+import { withViewMode } from "../../util/view_mode";
 
 export type CollectionViewStartActionsProps<M extends Record<string, unknown>> = {
     collection: CollectionConfig<M>;
@@ -72,13 +74,7 @@ parentEntityIds,
     };
 
     const handleBackClick = useCallback(() => {
-        let collectionUrl = urlController.buildUrlCollectionPath(path);
-        // Preserve the __view query param so the view mode is retained
-        const currentViewParam = new URLSearchParams(window.location.search).get("__view");
-        if (currentViewParam) {
-            collectionUrl += `${collectionUrl.includes("?") ? "&" : "?"}__view=${currentViewParam}`;
-        }
-        navigate(collectionUrl);
+        navigate(withViewMode(urlController.buildUrlCollectionPath(path)));
     }, [navigate, urlController, path]);
 
     const backButton = compact && (