@rebasepro/admin 0.12.0 → 0.12.1-canary.g009ed95

package/src/components/CollectionViewBinding/hooks/useKanbanDragAndDrop.ts

@@ -7,6 +7,42 @@ import { BoardItem } from "@rebasepro/ui";
 import { BoardDataController } from "../useBoardDataController";
 import { generateKeyBetween } from "fractional-indexing";
 
+/**
+ * The digits a board order key is built from: base36, lower case only.
+ *
+ * The library's default alphabet is base62, and its keys only sort correctly
+ * under byte ordering. The column is sorted by the *database*, and Postgres'
+ * default collation is not byte ordering — under `en_US.UTF-8`, `"aa"` sorts
+ * before `"aC"`, so as soon as a board had been dragged around enough to reach
+ * the upper-case digits its order stopped matching the keys. One case has no
+ * such ambiguity: digits before letters is true of every collation in use.
+ *
+ * A key written with the old alphabet no longer validates, which is what makes
+ * the board offer to initialise the column — one click, and the order is
+ * rewritten in a form the database can sort.
+ */
+export const ORDER_KEY_DIGITS = "0123456789abcdefghijklmnopqrstuvwxyz";
+
+/**
+ * Whether a stored order value is a key `fractional-indexing` can interpolate
+ * against.
+ *
+ * Anything else — a plain `"12"` from a seed or a migration, an empty string —
+ * makes `generateKeyBetween` throw, and the fallback below then hands out the
+ * same first key to every card, so each drag lands at the bottom of the column
+ * on top of the last one that did. Asking the library itself is the only
+ * definition of "valid" worth trusting.
+ */
+export function isValidOrderKey(value: unknown): value is string {
+    if (typeof value !== "string" || value.length === 0) return false;
+    try {
+        generateKeyBetween(value, null, ORDER_KEY_DIGITS);
+        return true;
+    } catch {
+        return false;
+    }
+}
+
 export interface UseKanbanDragAndDropParams<M extends Record<string, unknown>> {
     collection: AdminCollection<M>;
     fullPath: string;
@@ -63,13 +99,16 @@ export function useKanbanDragAndDrop<M extends Record<string, unknown>>({
 
             const movedIndex = targetColumnItems.findIndex(item => item.id === moveInfo.itemId);
 
-            // Get the order keys of the neighbours
-            const prevKey = movedIndex > 0
-                ? (targetColumnItems[movedIndex - 1].data.values?.[orderProperty] as string | null) ?? null
-                : null;
-            const nextKey = movedIndex < targetColumnItems.length - 1
-                ? (targetColumnItems[movedIndex + 1].data.values?.[orderProperty] as string | null) ?? null
-                : null;
+            // The order keys of the neighbours. A neighbour whose key is not a
+            // valid one counts as no neighbour at all: interpolating against it
+            // throws, and the whole move then falls back to a key that ignores
+            // where the card was actually dropped.
+            const keyAt = (index: number): string | null => {
+                const value = targetColumnItems[index]?.data.values?.[orderProperty];
+                return isValidOrderKey(value) ? value : null;
+            };
+            const prevKey = movedIndex > 0 ? keyAt(movedIndex - 1) : null;
+            const nextKey = movedIndex < targetColumnItems.length - 1 ? keyAt(movedIndex + 1) : null;
 
             try {
                 const a = prevKey;
@@ -78,12 +117,12 @@ export function useKanbanDragAndDrop<M extends Record<string, unknown>>({
                     // Handle duplicate or out-of-order keys to prevent fractional-indexing crash
                     b = null;
                 }
-                const newKey = generateKeyBetween(a, b);
+                const newKey = generateKeyBetween(a, b, ORDER_KEY_DIGITS);
                 updatedValues = setIn(updatedValues, orderProperty, newKey) as Record<string, unknown>;
             } catch (e) {
                 // Fallback: if keys are somehow invalid, generate from scratch
                 console.warn("fractional-indexing error, falling back:", e);
-                const newKey = generateKeyBetween(null, null);
+                const newKey = generateKeyBetween(null, null, ORDER_KEY_DIGITS);
                 updatedValues = setIn(updatedValues, orderProperty, newKey) as Record<string, unknown>;
             }
         }

package/src/components/CollectionViewBinding/useBoardDataController.tsx

@@ -6,6 +6,13 @@ import type { AdminCollection } from "@rebasepro/admin-types";
 
 const DEFAULT_PAGE_SIZE = 20;
 
+/**
+ * How long a column waits for its subscription's first payload before reading
+ * once over HTTP instead. Long enough that a healthy socket always wins the
+ * race, short enough that a dead one does not hold a blank board.
+ */
+const LIVE_FIRST_PAINT_TIMEOUT_MS = 2500;
+
 /**
  * Shallow equality for entity value records.
  * Handles primitives and reference equality for nested values.
@@ -392,46 +399,94 @@ values: { ...e.values,
             });
         };
 
+        const accessor = currentDataClient.collection(currentResolvedPath);
+
+        // Eagerly include relations to avoid N+1 fetches.
+        const includeParams = getRelationIncludeParams(currentCollection);
+
+        const fetchOnce = () => accessor.find({
+            where: whereFilter,
+            limit: itemCount,
+            orderBy: orderByParam,
+            include: includeParams
+        });
+
         const onError = (error: Error) => {
             // Skip error handling if we're cleaning up
             if (isCleaningUpRef.current) return;
 
             console.error(`Error loading column ${column}:`, error);
-            setColumnData(prev => ({
-                ...prev,
-                [column]: {
-                    ...prev[column],
-                    entities: [],
-                    loading: false,
-                    hasMore: false,
-                    error
-                }
-            }));
-        };
 
-        // Set up listener or fetch
-        const accessor = currentDataClient.collection(currentResolvedPath);
-
-        // Eagerly include relations to avoid N+1 fetches.
-        const includeParams = getRelationIncludeParams(currentCollection);
+            // A live subscription that fails is not the same thing as a column
+            // with nothing in it, but that is exactly what this used to render:
+            // entities cleared, no error surfaced, and a column reading "No
+            // items" above a header still counting eleven of them. Read once
+            // over HTTP instead — the board loses its live updates, not its
+            // contents — and only report the failure if that fails too.
+            fetchOnce()
+                .then(res => onUpdate(res.data as Entity<M>[]))
+                .catch(() => {
+                    if (isCleaningUpRef.current) return;
+                    setColumnData(prev => ({
+                        ...prev,
+                        [column]: {
+                            ...prev[column],
+                            entities: prev[column]?.entities ?? [],
+                            loading: false,
+                            hasMore: false,
+                            error
+                        }
+                    }));
+                });
+        };
 
         if (accessor.listen) {
+            let liveDataReceived = false;
             const unsubscribe = accessor.listen({
                 where: whereFilter,
                 limit: itemCount,
                 orderBy: orderByParam,
                 include: includeParams
-            }, res => onUpdate(res.data as Entity<M>[]), onError);
-            unsubscribersRef.current[column] = unsubscribe;
+            }, res => {
+                liveDataReceived = true;
+                onUpdate(res.data as Entity<M>[]);
+            }, onError);
+
+            // A subscription that is never going to answer takes the client's
+            // full 30s watchdog to say so, and the board spins the whole time.
+            // If the socket has not delivered shortly after mount, read once
+            // over HTTP and paint that; the live data still wins whenever it
+            // arrives. Costs nothing when realtime is healthy.
+            const firstPaintFallback = setTimeout(() => {
+                if (liveDataReceived || isCleaningUpRef.current) return;
+                fetchOnce()
+                    .then(res => {
+                        if (liveDataReceived || isCleaningUpRef.current) return;
+                        onUpdate(res.data as Entity<M>[]);
+                    })
+                    .catch(() => undefined);
+            }, LIVE_FIRST_PAINT_TIMEOUT_MS);
+
+            unsubscribersRef.current[column] = () => {
+                clearTimeout(firstPaintFallback);
+                unsubscribe?.();
+            };
         } else {
-            accessor.find({
-                where: whereFilter,
-                limit: itemCount,
-                orderBy: orderByParam,
-                include: includeParams
-            })
+            fetchOnce()
                 .then(res => onUpdate(res.data as Entity<M>[]))
-                .catch(onError);
+                .catch((error: Error) => {
+                    if (isCleaningUpRef.current) return;
+                    setColumnData(prev => ({
+                        ...prev,
+                        [column]: {
+                            ...prev[column],
+                            entities: prev[column]?.entities ?? [],
+                            loading: false,
+                            hasMore: false,
+                            error
+                        }
+                    }));
+                });
         }
     }, []); // No dependencies - uses refs for all values
 

package/src/components/CollectionViewBinding/usePreviewSlots.ts

@@ -3,12 +3,12 @@ import type { Property, RelationProperty } from "@rebasepro/types";
 import type { Entity, EntityRelation } from "@rebasepro/types";
 import type { PropertyConfig, AdminCollection } from "@rebasepro/admin-types";
 import { getEntityImagePreviewPropertyKey } from "@rebasepro/app";
-import { getTitlePropertyCandidates, looksLikeIdentifierValue } from "@rebasepro/app";
+import { getLeadingRelationTitleKey, getTitlePropertyCandidates, looksLikeIdentifierValue } from "@rebasepro/app";
 import { getEntityFromCache } from "@rebasepro/app";
 import { getEntityPreviewKeys } from "../../util/previews";
 import { getValueInPath } from "@rebasepro/utils";
 import type { AuthController } from "@rebasepro/admin-types";
-import { ChipColorScheme, CHIP_COLORS } from "@rebasepro/ui";
+import { ChipColorScheme, CHIP_COLORS, CHIP_SEED_KEYS } from "@rebasepro/ui";
 
 /** Whether an authored relation yields many rows. Derived from its kind. */
 function relationCardinality(relation: { kind?: string; cardinality?: string } | undefined): "one" | "many" | undefined {
@@ -119,7 +119,15 @@ export function resolveCollectionSlotKeys(
     authController: AuthController,
     propertyConfigs: Record<string, PropertyConfig>
 ): CollectionSlotKeys {
-    const titleKeyCandidates = getTitlePropertyCandidates(collection);
+    // One row per entity: when the collection leads with a relation and holds no
+    // name of its own, that relation *is* what the row is called. See
+    // `getLeadingRelationTitleKey` — the general ranking keeps relations last,
+    // which is right for a detail header but leaves a junction row titleless.
+    const rankedCandidates = getTitlePropertyCandidates(collection);
+    const leadingRelationKey = getLeadingRelationTitleKey(collection);
+    const titleKeyCandidates = leadingRelationKey
+        ? [leadingRelationKey, ...rankedCandidates.filter(key => key !== leadingRelationKey)]
+        : rankedCandidates;
     const titleKey = titleKeyCandidates[0];
     const imageKey = getEntityImagePreviewPropertyKey(collection);
 
@@ -188,7 +196,9 @@ export function resolveCollectionSlotKeys(
     if (!hasExplicitOrder) {
         for (const [key, prop] of Object.entries(collection.properties)) {
             const p = prop as Property;
-            if (p.type === "relation") {
+            // The relation filling the title slot is already the row's headline;
+            // repeating it as a chip below says the same thing twice.
+            if (p.type === "relation" && key !== titleKey) {
                 relationKeys.push(key);
             }
         }
@@ -417,8 +427,10 @@ id: relation.id });
 
         if (items.length > 0) {
             const relIndex = relationKeys.indexOf(relKey);
-            const chipColors = Object.values(CHIP_COLORS);
-            const colorScheme = chipColors[relIndex % chipColors.length];
+            // Walking the seed keys rather than `Object.values`: the table also
+            // holds a bare-hue alias per hue, so raw values would hand the first
+            // two relations the same scheme.
+            const colorScheme = CHIP_COLORS[CHIP_SEED_KEYS[relIndex % CHIP_SEED_KEYS.length]];
             relations.push({
                 property: prop,
                 propertyKey: relKey,

package/src/components/DefaultAppBar.tsx

@@ -1,7 +1,7 @@
 
 import React from "react";
 
-import { Link, useNavigate } from "react-router-dom";
+import { Link, useNavigate } from "react-router";
 import { RebaseLogo, LanguageToggle } from "@rebasepro/app";
 import { ErrorBoundary, iconSize } from "@rebasepro/ui";
 import {

package/src/components/DefaultDrawer.tsx

@@ -6,7 +6,7 @@ import { useUrlController } from "../hooks/navigation/contexts/UrlContext";
 import { useNavigationStateController } from "../hooks/navigation/contexts/NavigationStateContext";
 
 
-import { Link, useNavigate } from "react-router-dom";
+import { Link, useNavigate } from "react-router";
 import { AnalyticsEvent } from "@rebasepro/admin-types";
 import {
     Avatar,

package/src/components/DetailViewBinding.tsx

@@ -8,6 +8,9 @@ import { PluginProviderStack, resolveComponentRef, useComponentOverride, Collect
 
 import { CollectionViewBinding } from "./CollectionViewBinding/CollectionViewBinding";
 import { EntityViewBinding } from "./EntityViewBinding";
+import { EntityIdentityBar } from "./EntityIdentityBar";
+import { SplitListCloseButton } from "./CollectionViewBinding/SplitListCloseButton";
+import { EntityInspector, InspectorTab } from "./EntityInspector";
 import { CircularProgressCenter, iconSize } from "@rebasepro/ui";
 import {
     Alert,
@@ -41,13 +44,11 @@ import {
 } from "@rebasepro/app";
 import { useUrlController } from "../hooks/navigation/contexts/UrlContext";
 import { useCollectionRegistryController } from "../hooks/navigation/contexts/CollectionRegistryContext";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 import { getValueInPath } from "@rebasepro/utils";
 import { getEntityTitlePropertyKeyForEntity, isUserSelectProperty, resolveTitleToString } from "../util/previews";
 import { getUserLabel, useResolvedUser } from "../hooks/useResolvedUsers";
-import { JsonPreviewBinding } from "../components/JsonPreviewBinding";
 
-const EntityHistoryView = lazy(() => import("../components/history").then(m => ({ default: m.EntityHistoryView })));
 
 import { MAIN_TAB_VALUE, JSON_TAB_VALUE, HISTORY_TAB_VALUE } from "../util/view_constants";
 
@@ -76,6 +77,11 @@ export interface DetailViewBindingProps<M extends Record<string, unknown> = Reco
     onEditClick?: () => void;
     layout?: "side_panel" | "full_screen" | "split" | "dialog";
     barActions?: (params: BarActionsParams) => React.ReactNode;
+    /**
+     * Controls the owning panel puts at the identity bar's leading edge, ahead
+     * of the breadcrumb — the side panel's close button.
+     */
+    barActionsStart?: React.ReactNode;
 }
 
 export function DetailViewBinding<M extends Record<string, unknown>>({
@@ -134,7 +140,8 @@ function DetailViewBindingInner<M extends Record<string, unknown>>({
     entity,
     dataLoading,
     layout = "full_screen",
-    barActions
+    barActions,
+    barActionsStart
 }: DetailViewBindingProps<M> & {
     entity?: Entity<M>,
     dataLoading: boolean,
@@ -189,7 +196,18 @@ entityId }
     const customViewsCount = customViews?.length ?? 0;
     const includeJsonView = collection.includeJsonView === undefined ? true : collection.includeJsonView;
     const includeHistoryView = Boolean(collection.history);
-    const hasAdditionalViews = customViewsCount > 0 || subcollectionsCount > 0 || includeJsonView || includeHistoryView;
+    // Same split as the edit view: the strip is for destinations, the inspector
+    // for the developer tools that used to sit in front of them.
+    const hasAdditionalViews = customViewsCount > 0 || subcollectionsCount > 0;
+
+    const [inspectorTab, setInspectorTab] = useState<InspectorTab | null>(null);
+
+    const legacyInspectorTab: InspectorTab | undefined = selectedTab === JSON_TAB_VALUE
+        ? "json"
+        : selectedTab === HISTORY_TAB_VALUE ? "history" : undefined;
+    useEffect(() => {
+        if (legacyInspectorTab) setInspectorTab(legacyInspectorTab);
+    }, [legacyInspectorTab]);
 
     const {
         resolvedEntityViews
@@ -198,13 +216,11 @@ entityId }
     const validTabValues = useMemo(() => {
         const set = new Set<string>([
             MAIN_TAB_VALUE,
-            ...(includeJsonView ? [JSON_TAB_VALUE] : []),
-            ...(includeHistoryView ? [HISTORY_TAB_VALUE] : []),
             ...resolvedEntityViews.map(v => v.key),
             ...subcollections.map(s => s.slug)
         ]);
         return set;
-    }, [includeJsonView, includeHistoryView, resolvedEntityViews, subcollections]);
+    }, [resolvedEntityViews, subcollections]);
 
     const activeTab = validTabValues.has(selectedTab) ? selectedTab : MAIN_TAB_VALUE;
 
@@ -321,35 +337,6 @@ entityId }
 
     const globalLoading = dataLoading && !usedEntity;
 
-    // JSON view
-    const jsonTabMounted = mountedTabsRef.current.has(JSON_TAB_VALUE);
-    const jsonView = (activeTab === JSON_TAB_VALUE || jsonTabMounted) ? <div
-        className={cls("relative flex-1 h-full overflow-auto w-full",
-            { "hidden": activeTab !== JSON_TAB_VALUE })}
-        key={"json_view"}
-        role="tabpanel">
-        <ErrorBoundary>
-            <JsonPreviewBinding values={usedEntity?.values ?? {}} />
-        </ErrorBoundary>
-    </div> : null;
-
-    // History view
-    const historyView = includeHistoryView && activeTab === HISTORY_TAB_VALUE ? <div
-        className={"relative flex-1 h-full overflow-auto w-full"}
-        key={"history_view"}
-        role="tabpanel">
-        <ErrorBoundary>
-            <Suspense fallback={<CircularProgressCenter />}>
-                <EntityHistoryView
-                    collection={collection}
-                    entity={usedEntity}
-                    formContext={readOnlyFormContext as FormContext<Record<string, unknown>>}
-                    modifiedValues={usedEntity?.values}
-                />
-            </Suspense>
-        </ErrorBoundary>
-    </div> : null;
-
     // Subcollection views
     const subCollectionsViews = childViews && childViews.map(({ collection: subcollection }) => {
         const subcollectionId = subcollection.slug;
@@ -490,7 +477,9 @@ entityId }
 
     const shouldShowTopBar = Boolean(barActions) || hasAdditionalViews || layout === "side_panel" || layout === "dialog" || Boolean(backToCollectionButton);
 
-    const fullScreenButton = !barActions && (layout === "side_panel" || layout === "split" || layout === "dialog") && entityId ? (
+    const fullScreenButton = !barActions && // Not in split: the list panel beside it carries the close control,
+    // and an expand button there competes with it.
+    (layout === "side_panel" || layout === "dialog") && entityId ? (
         <Tooltip title={"Open full screen"}>
             <IconButton
                 size="small"
@@ -516,131 +505,99 @@ entityId }
         </Button>
     ) : null;
 
-    // Main content view with title and properties
+    // Main content view. The title, the `path/id` chip and the empty band under
+    // them have moved into the identity bar, and the `w-80 2xl:w-96` rail that
+    // held a single Edit button is gone — the bar holds it now.
     const mainView = <div
         className={cls(
             "flex-1 flex flex-row w-full overflow-y-auto justify-center",
             !mainViewVisible ? "hidden" : ""
         )}>
-        <div
-            className={cls("relative flex flex-row max-w-4xl lg:max-w-3xl xl:max-w-4xl 2xl:max-w-6xl w-full h-fit")}>
-            <div className={cls(
-                "flex flex-col w-full",
-                layout === "dialog"
-                    ? "pt-4 pb-12 px-6 sm:px-8"
-                    : "pt-12 pb-16 px-4 sm:px-8 md:px-10"
-            )}>
-                {/* Title and entity path */}
-                <div className={"w-full flex flex-col items-start my-4 lg:my-6"}>
-                    <div className="flex items-center justify-between w-full">
-                        <Typography
-                            className={cls("my-4 grow line-clamp-1", collection.hideIdFromForm ? "mb-6" : "")}
-                            variant={"h4"}>
-                            {title}
-                        </Typography>
-                        {editButton}
-                    </div>
-
-                    <Alert color={"base"} outerClassName={"w-full"} size={"small"}>
-                        <code
-                            className={"text-xs select-all text-text-secondary dark:text-text-secondary-dark"}>
-                            {usedEntity?.path ?? path}/{entityId}
-                        </code>
-                    </Alert>
-                </div>
-
-                {/* Property detail display */}
-                <div className="mt-12 flex flex-col gap-8">
-                    {propertyDetailView()}
-                </div>
-
-                <div className="h-16" />
-            </div>
-
-            {/* Side action bar for large screens */}
-            {canEdit && onEditClick && layout === "full_screen" && <div
-                className={cls(
-                    "overflow-auto h-full hidden @6xl:flex flex-col gap-2 w-80 2xl:w-96 px-4 py-16 sticky top-0 border-l",
-                    defaultBorderMixin
-                )}>
-                <Button
-                    fullWidth={true}
-                    variant="filled"
-                    color="primary"
-                    startIcon={<PencilIcon size={iconSize.small} />}
-                    onClick={onEditClick}>
-                    {t("edit_entity")}
-                </Button>
-            </div>}
+        <div className={cls(
+            "w-full max-w-3xl 2xl:max-w-4xl flex flex-col",
+            layout === "dialog"
+                ? "pt-5 pb-12 px-6 sm:px-8"
+                : "pt-6 pb-16 px-5 sm:px-8"
+        )}>
+            {propertyDetailView()}
         </div>
     </div>;
 
     let result = <div className="relative flex flex-col h-full w-full bg-white dark:bg-surface-800">
 
-        {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?.({
-                path,
-                entityId,
-                values: usedEntity?.values ?? {},
-                status: "existing"
-            })}
-
-            {pluginActionsTop}
-
-            {hasAdditionalViews && <div className={"flex-1 flex justify-end min-w-0 shrink-0"}>
-                <Tabs
-                    className={"!w-fit max-w-full"}
-                    value={activeTab}
-                    onValueChange={(value) => {
-                        onSideTabClick(value);
-                    }}>
-
-                    {includeJsonView && <Tab
-                        disabled={!hasAdditionalViews}
-                        value={JSON_TAB_VALUE}
-                        className={"text-sm"}>
-                        <CodeIcon size={iconSize.smallest} />
-                    </Tab>}
-
-                    {includeHistoryView && <Tab
-                        disabled={!hasAdditionalViews}
-                        value={HISTORY_TAB_VALUE}
-                        className={"text-sm"}>
-                        <HistoryIcon size={iconSize.smallest} />
-                    </Tab>}
-
-                    <Tab
-                        disabled={!hasAdditionalViews}
-                        value={MAIN_TAB_VALUE}
-                        className={"text-sm min-w-[90px]"}>
-                        <span className="flex items-center gap-1.5">
-                            {getIcon(collection.icon, undefined, undefined, "smallest")}
-                            {collection.singularName ?? collection.name}
-                        </span>
-                    </Tab>
+        <EntityIdentityBar
+            collection={collection as AdminCollection}
+            title={title}
+            entityId={entityId}
+            status={"existing"}
+            dirty={false}
+            saving={false}
+            onInspect={includeJsonView ? () => setInspectorTab("json") : undefined}
+            onViewHistory={includeHistoryView ? () => setInspectorTab("history") : undefined}
+            leading={<>
+                {barActionsStart}
+                {/* Split view: closing the list is opening this record
+                    full screen, and the control for it belongs at this
+                    bar's leading edge. */}
+                {layout === "split" && <SplitListCloseButton/>}
+            </>}
+            trailing={<>
+                {editButton}
+                {pluginActionsTop}
+                {backToCollectionButton}
+                {fullScreenButton}
+                {barActions?.({
+                    path,
+                    entityId,
+                    values: usedEntity?.values ?? {},
+                    status: "existing"
+                })}
+            </>}
+        />
 
-                    {customViewTabsStart}
-                    {customViewTabsEnd}
-                    {subcollectionTabs}
-                </Tabs>
-            </div>}
+        {hasAdditionalViews && <div className={cls(
+            "h-10 shrink-0 flex items-stretch border-b px-2 min-w-0",
+            defaultBorderMixin
+        )}>
+            <Tabs
+                className={"!w-full"}
+                innerClassName={"h-full"}
+                variant={"boxy"}
+                value={activeTab}
+                onValueChange={(value) => {
+                    onSideTabClick(value);
+                }}>
+
+                <Tab value={MAIN_TAB_VALUE}>
+                    <span className="flex items-center gap-1.5">
+                        {getIcon(collection.icon, undefined, undefined, "smallest")}
+                        {collection.singularName ?? collection.name}
+                    </span>
+                </Tab>
+
+                {customViewTabsStart}
+                {customViewTabsEnd}
+                {subcollectionTabs}
+            </Tabs>
         </div>}
 
         {globalLoading
             ? <DetailViewSkeleton collection={collection} />
             : mainView}
 
-        {jsonView}
-        {historyView}
         {customViewsView}
         {subCollectionsViews}
 
+        <EntityInspector
+            tab={inspectorTab}
+            onTabChange={setInspectorTab}
+            onClose={() => setInspectorTab(null)}
+            collection={collection as AdminCollection}
+            entity={usedEntity as Entity<Record<string, unknown>> | undefined}
+            formContext={readOnlyFormContext as FormContext<Record<string, unknown>> | undefined}
+            values={usedEntity?.values}
+            includeHistory={includeHistoryView}/>
+
     </div>;
 
     if (plugins && plugins.length > 0) {

package/src/components/DrawerNavigationItem.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { NavLink } from "react-router-dom";
+import { NavLink } from "react-router";
 import { cls, Tooltip } from "@rebasepro/ui";
 
 export function DrawerNavigationItem({