@rebasepro/admin 0.9.1-canary.fd3754b → 0.10.0

package/src/hooks/useBuildSidePanel.tsx

@@ -7,6 +7,7 @@ import {
     getNavigationEntriesFromPath,
     NavigationViewInternal,
     removeInitialAndTrailingSlashes,
+    removeTrailingSlash,
     resolveDefaultSelectedView
 } from "@rebasepro/common";
 import { resolvedSelectedEntityView } from "../util/resolutions";
@@ -280,6 +281,13 @@ export function buildSidePanelsFromUrl(path: string, collections: CollectionConf
 
     }
 
+    // `edit` is not a registered view, so the navigation parser skips it. Pick it
+    // up from the raw path so that reloading an edit URL reopens the edit form
+    // rather than silently dropping the user back on the detail view.
+    if (sidePanel && !sidePanel.selectedTab && removeTrailingSlash(path).endsWith("/edit")) {
+        sidePanel.selectedTab = "edit";
+    }
+
     // When the URL doesn't contain a tab segment but the collection has a
     // defaultSelectedView, resolve it so the panel opens with the correct
     // width and the URL is updated on the next replace() cycle.

package/src/hooks/useResolvedNavigationFrom.tsx

@@ -86,11 +86,13 @@ export function resolveNavigationFrom<M extends Record<string, unknown>, USER ex
                     throw Error(`No collection defined in the navigation for the entity with path ${entry.slug}`);
                 }
                 // `context.data` is the flat SDK layer; re-wrap the row into the
-                // Entity view-model the navigation entry expects.
+                // Entity view-model the navigation entry expects. The address is
+                // the one we just fetched by — reading it back off the row would
+                // find nothing, since a row is only its columns.
                 return data.collection(entry.slug).findById(entry.entityId)
                     .then((row) => {
                         if (!row) return undefined;
-                        const entity = { id: row.id, path: entry.slug, values: row };
+                        const entity = { id: entry.entityId, path: entry.slug, values: row };
                         return { ...entry,
 entity };
                     });

package/src/hooks/useSelectionDialog.tsx

@@ -1,8 +1,8 @@
-import { SelectionProps, SelectionTableBinding } from "../components";
+import { SelectionProps, SelectionTableBinding } from "../components/ReferenceTable/SelectionTableBinding";
 import type { CollectionConfig } from "@rebasepro/types";
 import { useCallback, useMemo } from "react";
-import { useSideDialogsController } from "../index";
-import { useCollectionRegistryController } from "../index";
+import { useSideDialogsController } from "./useSideDialogsController";
+import { useCollectionRegistryController } from "./navigation/contexts/CollectionRegistryContext";
 
 /**
  * This hook is used to open a side dialog that allows the selection

package/src/preview/components/ImagePreview.tsx

@@ -3,7 +3,7 @@ import React, { CSSProperties, useMemo, useState, useEffect } from "react";impor
 import { PreviewSize } from "../../types/components/PropertyPreviewProps";
 import { getThumbnailMeasure } from "../util";
 import { useTranslation } from "@rebasepro/app";
-import { sanitizeUrl } from "./UrlComponentPreview";
+import { sanitizeUrl } from "../util";
 
 /**
  * @group Preview components

package/src/preview/components/ReferencePreview.tsx

@@ -8,7 +8,7 @@ import { Skeleton } from "@rebasepro/ui";
 import { ErrorBoundary } from "@rebasepro/ui";
 import { ErrorView } from "@rebasepro/app";
 import { EntityPreviewBinding, EntityPreviewContainer } from "../../components/EntityPreviewBinding";
-import { useCollectionRegistryController } from "../../index";
+import { useCollectionRegistryController } from "../../hooks/navigation/contexts/CollectionRegistryContext";
 import { getEntityTitlePropertyKey } from "../../util/previews";
 import { getValueInPath } from "@rebasepro/utils";
 

package/src/preview/components/RelationPreview.tsx

@@ -5,8 +5,8 @@ import { Entity, EntityRelation } from "@rebasepro/types";
 import type { PreviewSize } from "../../types/components/PropertyPreviewProps";
 import { useCustomizationController, useFetch, ErrorView, useComponentOverride, CollectionScopeProvider } from "@rebasepro/app";
 import { Skeleton } from "@rebasepro/ui";
-import { EntityPreviewBinding, EntityPreviewContainer } from "../../components";
-import { useCollectionRegistryController } from "../../index";
+import { EntityPreviewBinding, EntityPreviewContainer } from "../../components/EntityPreviewBinding";
+import { useCollectionRegistryController } from "../../hooks/navigation/contexts/CollectionRegistryContext";
 import { getEntityTitlePropertyKey } from "../../util/previews";
 import { getValueInPath } from "@rebasepro/utils";
 

package/src/preview/components/UrlComponentPreview.tsx

@@ -5,16 +5,9 @@ import { PreviewType } from "@rebasepro/types";
 import type { PreviewSize } from "../../types/components/PropertyPreviewProps";
 import { cls, ExternalLinkIcon, FileTextIcon, Tooltip, Typography } from "@rebasepro/ui";
 import { EmptyValue } from "./EmptyValue";
-import { getThumbnailMeasure } from "../util";
+import { getThumbnailMeasure, sanitizeUrl } from "../util";
 
-export function sanitizeUrl(url: string | undefined): string {
-    if (!url) return "about:blank";
-    const trimmed = url.trim();
-    if (/^(?:javascript|data|vbscript):/i.test(trimmed)) {
-        return "about:blank";
-    }
-    return trimmed;
-}
+export { sanitizeUrl };
 
 /**
  * @group Preview components

package/src/preview/property_previews/ArrayOfStringsPreview.tsx

@@ -1,7 +1,7 @@
 import type { ArrayProperty, StringProperty } from "@rebasepro/types";
 import React from "react";
 import type { PropertyPreviewProps } from "../../types/components/PropertyPreviewProps";
-import { StringPropertyPreview } from "../../preview";
+import { StringPropertyPreview } from "./StringPropertyPreview";
 import { ErrorBoundary } from "@rebasepro/ui";
 
 /**

package/src/preview/property_previews/NumberPropertyPreview.tsx

@@ -1,7 +1,7 @@
 import type { NumberProperty } from "@rebasepro/types";
 import React from "react";
 
-import { EnumValuesChip } from "../../preview";
+import { EnumValuesChip } from "../components/EnumValuesChip";
 import type { PropertyPreviewProps } from "../../types/components/PropertyPreviewProps";
 import { enumToObjectEntries } from "@rebasepro/common";
 

package/src/preview/util.ts

@@ -1,5 +1,14 @@
 import { CollectionSize } from "@rebasepro/types";
 import type { PreviewSize } from "../types/components/PropertyPreviewProps";
+export function sanitizeUrl(url: string | undefined): string {
+    if (!url) return "about:blank";
+    const trimmed = url.trim();
+    if (/^(?:javascript|data|vbscript):/i.test(trimmed)) {
+        return "about:blank";
+    }
+    return trimmed;
+}
+
 export const SMALL_THUMBNAIL = 40;
 export const MEDIUM_THUMBNAIL = 100;
 export const LARGE_THUMBNAIL = 200;

package/src/routes/CustomViewRoute.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useRef } from "react";
 import type { AppView } from "@rebasepro/types";
-import { useBreadcrumbsController, useUrlController } from "../index";
+import { useBreadcrumbsController } from "../hooks/useBreadcrumbsController";
+import { useUrlController } from "../hooks/navigation/contexts/UrlContext";
 
 export function CustomViewRoute({ view }: {
     view: AppView

package/src/routes/RebaseRoute.tsx

@@ -1,17 +1,19 @@
 import type { CollectionConfig, ViewMode } from "@rebasepro/types";
-import { Blocker, useBlocker, useLocation } from "react-router-dom";
+import { useLocation } from "react-router-dom";
 import { EditViewBinding } from "../components/EditViewBinding";
 import { DetailViewBinding } from "../components/DetailViewBinding";
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { useNavigate } from "react-router-dom";
-import { CollectionViewBinding } from "../components";
-import { NotFoundPage, useUserConfigurationPersistence, useComponentOverride } from "@rebasepro/app";
+import { CollectionViewBinding } from "../components/CollectionViewBinding/CollectionViewBinding";
+import { NotFoundPage, useUserConfigurationPersistence, useComponentOverride, useNavigationBlocker } from "@rebasepro/app";
+import { resolveOpenEntityMode, resolveViewMode } from "../util/view_mode";
 import { UnsavedChangesDialog } from "@rebasepro/app";
 import { CircularProgressCenter } from "@rebasepro/ui";
 import { getNavigationEntriesFromPath, NavigationViewCollectionInternal, NavigationViewEntityCustomInternal, NavigationViewInternal } from "@rebasepro/common";
 import { toArray } from "@rebasepro/utils";
-import { useCollectionRegistryController, useUrlController } from "../index";
-import { useBreadcrumbsController } from "../index";
+import { useCollectionRegistryController } from "../hooks/navigation/contexts/CollectionRegistryContext";
+import { useUrlController } from "../hooks/navigation/contexts/UrlContext";
+import { useBreadcrumbsController } from "../hooks/useBreadcrumbsController";
 
 export function RebaseRoute() {
 
@@ -145,23 +147,16 @@ export function RebaseRoute() {
         if (!collection)
             collection = collectionRegistry.getCollection(firstCollectionEntry.slug);
 
-        // Resolve the effective openEntityMode based on the current view mode.
-        // Priority: collection.openEntityMode (explicit) > view-mode-based default.
-        // View mode priority: URL __view param > saved user config > collection default.
-        let effectiveOpenMode: "side_panel" | "full_screen" | "split" | "dialog" | undefined = collection?.openEntityMode;
-        if (!effectiveOpenMode && collection) {
-            const urlViewParam = new URLSearchParams(location.search).get("__view");
-            let currentViewMode: ViewMode = collection.defaultViewMode ?? "list";
-            if (urlViewParam && ["list", "table", "kanban", "cards"].includes(urlViewParam)) {
-                currentViewMode = urlViewParam as ViewMode;
-            } else {
-                const savedView = userConfigPersistence?.getCollectionConfig(collection.slug)?.defaultViewMode;
-                if (savedView) currentViewMode = savedView as ViewMode;
-            }
-            if (currentViewMode === "kanban") effectiveOpenMode = "side_panel";
-            else if (currentViewMode === "table" || currentViewMode === "cards") effectiveOpenMode = "full_screen";
-            else effectiveOpenMode = "split";
-        }
+        const effectiveOpenMode = collection
+            ? resolveOpenEntityMode({
+                collection,
+                viewMode: resolveViewMode({
+                    collection,
+                    search: location.search,
+                    savedViewMode: userConfigPersistence?.getCollectionConfig(collection.slug)?.defaultViewMode as ViewMode | undefined
+                })
+            })
+            : undefined;
         if (collection && effectiveOpenMode === "split") {
             // Extract subcollection tab from the 3rd entry if present
             let selectedTab: string | undefined;
@@ -292,7 +287,7 @@ function EntityFullScreenRoute({
 
     const entityPath = basePath + `/${entityId}`;
 
-    const blocker = useBlocker(({
+    const blocker = useNavigationBlocker(useCallback(({
         currentLocation,
         nextLocation
     }) => {
@@ -315,7 +310,7 @@ function EntityFullScreenRoute({
             return false;
 
         return blocked.current;
-    });
+    }, [entityPath, basePath]));
 
     const lastCollectionEntry = [...navigationEntries].reverse().find((entry) => entry.type === "collection");
 

package/src/util/navigation_utils.ts

@@ -1,4 +1,5 @@
 import type { CollectionConfig, UrlController, SidePanelController, NavigateOptions } from "@rebasepro/types";
+import { withViewMode } from "./view_mode";
 
 // Canonical path utilities — single source of truth in @rebasepro/common
 export {
@@ -71,11 +72,7 @@ export function navigateToEntity({
         if (entityId && selectedTab) {
             to += `/${selectedTab}`;
         }
-        // Preserve the __view query param so the target route knows the current view mode
-        const currentViewParam = new URLSearchParams(window.location.search).get("__view");
-        if (currentViewParam) {
-            to += `${to.includes("?") ? "&" : "?"}__view=${currentViewParam}`;
-        }
+        to = withViewMode(to);
         if (!entityId) {
             to += "#new";
         }

package/src/util/view_mode.ts

@@ -0,0 +1,102 @@
+import type { CollectionConfig, ViewMode } from "@rebasepro/types";
+
+/**
+ * Query param that carries the active collection view mode across navigations.
+ */
+export const VIEW_MODE_PARAM = "__view";
+
+export const VIEW_MODES: ViewMode[] = ["list", "table", "cards", "kanban"];
+
+export const DEFAULT_VIEW_MODE: ViewMode = "list";
+
+export type OpenEntityMode = "side_panel" | "full_screen" | "split" | "dialog";
+
+export const DEFAULT_OPEN_ENTITY_MODE: OpenEntityMode = "split";
+
+export function isViewMode(value: string | null | undefined): value is ViewMode {
+    return Boolean(value) && VIEW_MODES.includes(value as ViewMode);
+}
+
+/**
+ * Read the active view mode from a query string, if it holds a valid one.
+ *
+ * @param search a query string (e.g. `location.search`). Falls back to the
+ *        current browser location when omitted.
+ */
+export function getViewModeFromSearch(search?: string): ViewMode | null {
+    const source = search ?? (typeof window !== "undefined" ? window.location.search : "");
+    const value = new URLSearchParams(source).get(VIEW_MODE_PARAM);
+    return isViewMode(value) ? value : null;
+}
+
+/**
+ * Append the active view mode to a URL so the target route keeps rendering the
+ * view the user was last looking at.
+ *
+ * Every entity/collection navigation must go through this — a missed call site
+ * silently resets the user's view mode mid-session.
+ *
+ * @param url the URL to decorate. May already contain a query string and/or hash.
+ * @param search query string to read the view mode from. Defaults to the
+ *        current browser location.
+ */
+export function withViewMode(url: string, search?: string): string {
+    const viewMode = getViewModeFromSearch(search);
+    if (!viewMode) return url;
+
+    // Preserve any hash — the param belongs to the query, which precedes it.
+    const hashIndex = url.indexOf("#");
+    const hash = hashIndex >= 0 ? url.substring(hashIndex) : "";
+    const base = hashIndex >= 0 ? url.substring(0, hashIndex) : url;
+
+    if (new URLSearchParams(base.split("?")[1] ?? "").has(VIEW_MODE_PARAM)) {
+        return url;
+    }
+
+    const separator = base.includes("?") ? "&" : "?";
+    return `${base}${separator}${VIEW_MODE_PARAM}=${viewMode}${hash}`;
+}
+
+/**
+ * Resolve the view mode for a collection, honouring the documented priority:
+ * URL param > saved user config > collection default.
+ */
+export function resolveViewMode({
+    collection,
+    search,
+    savedViewMode
+}: {
+    collection?: Pick<CollectionConfig<any>, "defaultViewMode">;
+    search?: string;
+    savedViewMode?: ViewMode | null;
+}): ViewMode {
+    const fromUrl = getViewModeFromSearch(search);
+    if (fromUrl) return fromUrl;
+    if (isViewMode(savedViewMode)) return savedViewMode;
+    return collection?.defaultViewMode ?? DEFAULT_VIEW_MODE;
+}
+
+/**
+ * Resolve how clicking an entity should present it.
+ *
+ * An explicit `collection.openEntityMode` always wins. Otherwise the mode is
+ * derived from the active view mode, so the presentation suits the surface the
+ * user is looking at: a board keeps its columns behind an overlay, a wide table
+ * hands the entity the full width, and list/card views use master-detail.
+ *
+ * This is the single source of truth — row clicks, find-by-id and the router
+ * must all resolve through it, otherwise the same entity opens differently
+ * depending on how it was reached.
+ */
+export function resolveOpenEntityMode({
+    collection,
+    viewMode
+}: {
+    collection?: Pick<CollectionConfig<any>, "openEntityMode">;
+    viewMode?: ViewMode;
+}): OpenEntityMode {
+    if (collection?.openEntityMode) return collection.openEntityMode;
+    if (viewMode === "kanban") return "side_panel";
+    if (viewMode === "table" || viewMode === "cards") return "full_screen";
+    return DEFAULT_OPEN_ENTITY_MODE;
+}