@firecms/core 3.5.2-canary.16bf7bb → 3.5.2-canary.a36570e

package/dist/internal/useLeavePageConfirmation.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Asks the browser to confirm leaving the page (reload, tab close, a link that
+ * loads another document) while `when` is true.
+ *
+ * Navigation inside the app is not intercepted: unsaved entity values are kept
+ * in the dirty entity cache, so they survive it. Cancelling link clicks here
+ * used to leave plain and new-tab links doing nothing, with no dialog shown.
+ *
+ * @param when - Whether leaving the page should be confirmed.
+ */
+export declare function useLeavePageConfirmation(when: boolean): void;

package/dist/types/side_dialogs_controller.d.ts

@@ -5,9 +5,11 @@ import React from "react";
  */
 export interface SideDialogsController {
     /**
-     * Close the last panel
+     * Close the last panel.
+     * When the `key` of a panel without a URL is given, that panel is closed
+     * instead, even if other panels are open on top of it.
      */
-    close: () => void;
+    close: (key?: string) => void;
     /**
      * List of side panels currently open
      */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@firecms/core",
   "type": "module",
-  "version": "3.5.2-canary.16bf7bb",
+  "version": "3.5.2-canary.a36570e",
   "description": "Awesome Firebase/Firestore-based headless open-source CMS",
   "funding": {
     "url": "https://github.com/sponsors/firecmsco"
@@ -53,8 +53,8 @@
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/modifiers": "^9.0.0",
     "@dnd-kit/sortable": "^10.0.0",
-    "@firecms/formex": "3.5.2-canary.16bf7bb",
-    "@firecms/ui": "3.5.2-canary.16bf7bb",
+    "@firecms/formex": "3.5.2-canary.a36570e",
+    "@firecms/ui": "3.5.2-canary.a36570e",
     "@floating-ui/dom": "^1.7.4",
     "@radix-ui/react-portal": "^1.1.10",
     "@radix-ui/react-slot": "^1.2.4",

package/src/components/EntityCollectionView/CollectionCountBadge.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { Skeleton } from "@firecms/ui";
+
+/**
+ * Number of entities in a collection, as shown next to its name.
+ * `undefined` renders nothing, `null` a loading placeholder.
+ */
+export function CollectionCountBadge({ count }: { count: number | null | undefined }) {
+    if (count === undefined)
+        return null;
+    if (count === null)
+        return <Skeleton className="w-8 h-4 rounded-md"/>;
+    return <span
+        className="text-xs text-surface-accent-500 dark:text-surface-accent-400 bg-surface-100 dark:bg-surface-700 px-1 py-0 rounded">
+        {count}
+    </span>;
+}

package/src/components/EntityCollectionView/CollectionPathTitle.tsx

@@ -0,0 +1,68 @@
+import React, { useMemo } from "react";
+import { cls, Typography } from "@firecms/ui";
+import { useNavigationController } from "../../hooks/useNavigationController";
+import { getNavigationEntriesFromPath } from "../../util/navigation_from_path";
+import { CollectionCountBadge } from "./CollectionCountBadge";
+
+/**
+ * A name and its entity count, under what is above it: breadcrumbs folded on two lines
+ * for where a row of them would not fit.
+ */
+export function PathTitle({
+    parents,
+    name,
+    count,
+    className
+}: {
+    parents: string[],
+    name: string,
+    /** `undefined` shows no count, `null` a loading one. */
+    count: number | null | undefined,
+    className?: string
+}) {
+    return <div className={cls("flex flex-col", className)}>
+        {parents.length > 0 && <Typography variant={"caption"} color={"secondary"} noWrap>
+            {parents.join(" / ")}
+        </Typography>}
+        <div className="flex flex-row items-center gap-2 min-w-0">
+            <Typography variant={"body2"} noWrap className={"font-medium"}>
+                {name}
+            </Typography>
+            <CollectionCountBadge count={count}/>
+        </div>
+    </div>;
+}
+
+/**
+ * A collection's name and entity count, under the collections and entities above it,
+ * the same things the app bar's breadcrumbs show. A side panel covers those, so it
+ * shows a subcollection's in its own top bar.
+ */
+export function CollectionPathTitle({
+    path,
+    name,
+    count
+}: {
+    /** The escaped chain, as in `fullIdPath`. */
+    path: string,
+    name: string,
+    /** `undefined` shows no count, `null` a loading one. */
+    count: number | null | undefined
+}) {
+    const navigation = useNavigationController();
+    const parents = useMemo(() => getNavigationEntriesFromPath({
+        path,
+        collections: navigation.collections ?? []
+    })
+        .slice(0, -1)
+        .map(entry => entry.type === "entity"
+            ? entry.entityId
+            : entry.type === "collection" ? entry.collection.name : entry.view.name),
+    [path, navigation.collections]);
+
+    // it keeps its width, up to the cap, and the tabs next to it scroll instead
+    return <PathTitle parents={parents}
+                      name={name}
+                      count={count}
+                      className={"shrink-0 mx-2 max-w-[140px] sm:max-w-[240px] lg:max-w-[320px]"}/>;
+}

package/src/components/EntityCollectionView/EntityCollectionView.tsx

@@ -8,7 +8,6 @@ import {
     Entity,
     EntityAction,
     EntityCollection,
-    EntityReference,
     EntityTableController,
     FilterValues,
     PartialEntityCollection,
@@ -59,14 +58,9 @@ import {
     AddIcon,
     Button,
     cls,
-    focusedDisabled,
-    IconButton,
     KeyboardTabIcon,
     Markdown,
-    Popover,
-    SearchIcon,
     Skeleton,
-    Tooltip,
     Typography
 } from "@firecms/ui";
 import { setIn } from "@firecms/formex";
@@ -88,7 +82,8 @@ import { DeleteEntityDialog } from "../DeleteEntityDialog";
 import { useAnalyticsController } from "../../hooks/useAnalyticsController";
 import { useSelectionController } from "./useSelectionController";
 import { EntityCollectionViewStartActions } from "./EntityCollectionViewStartActions";
-import { addRecentId, getRecentIds } from "./utils";
+import { addRecentId } from "./utils";
+import { EntityIdHeaderWidget } from "./EntityIdHeaderWidget";
 import { useScrollRestoration } from "../common/useScrollRestoration";
 import { entityCacheKey } from "../../util/entity_cache";
 
@@ -131,6 +126,12 @@ export type EntityCollectionViewProps<M extends Record<string, any>> = {
      */
     updateUrl?: boolean;
 
+    /**
+     * Called with the number of entities in the collection, with the current filters
+     * applied, each time it is counted: the count the breadcrumbs show.
+     */
+    onCountChange?: (count: number) => void;
+
 } & EntityCollection<M>;
 
 /**
@@ -166,6 +167,7 @@ export const EntityCollectionView = React.memo(
         isSubCollection,
         className,
         updateUrl,
+        onCountChange,
         ...collectionProp
     }: EntityCollectionViewProps<M>
     ) {
@@ -350,7 +352,7 @@ export const EntityCollectionView = React.memo(
             });
 
             if (collection) {
-                addRecentId(collection.id, clickedEntity.id);
+                addRecentId(fullIdPath ?? fullPath, clickedEntity.id);
             }
 
             // In a collection group the row's own path is the real one, so the row's segments
@@ -795,8 +797,9 @@ export const EntityCollectionView = React.memo(
         useEffect(() => {
             if (docsCount !== undefined) {
                 breadcrumbs.updateCount(fullPath, docsCount);
+                onCountChange?.(docsCount);
             }
-        }, [docsCount, fullPath, breadcrumbs.updateCount]);
+        }, [docsCount, fullPath, breadcrumbs.updateCount, onCountChange]);
 
         // EntitiesCount fetches count and updates breadcrumb - no visual rendering needed here
         const countFetcher = <EntitiesCount
@@ -1198,105 +1201,3 @@ function buildPropertyWidthOverwrite(key: string, width: number): PartialEntityC
     }
     return { properties: { [key]: { columnWidth: width } } } as PartialEntityCollection;
 }
-
-function EntityIdHeaderWidget({
-    collection,
-    path,
-    pathSegments,
-    fullIdPath
-}: {
-    collection: EntityCollection,
-    path: string,
-    /** `path` split at its real segment boundaries, when the caller knows them. */
-    pathSegments?: string[],
-    fullIdPath: string
-}) {
-
-    const navigation = useNavigationController();
-    const [openPopup, setOpenPopup] = React.useState(false);
-    const [searchString, setSearchString] = React.useState("");
-    const [recentIds, setRecentIds] = React.useState<string[]>(getRecentIds(collection.id));
-    const sideEntityController = useSideEntityController();
-    const { t } = useTranslation();
-
-    const openEntityMode = collection?.openEntityMode ?? DEFAULT_ENTITY_OPEN_MODE;
-
-    return (
-        <Tooltip title={!openPopup ? t("find_by_id") : undefined} asChild={false}>
-            <Popover
-                open={openPopup}
-                onOpenChange={setOpenPopup}
-                sideOffset={0}
-                align={"start"}
-                alignOffset={-117}
-                trigger={
-                    <IconButton size={"small"}>
-                        <SearchIcon size={"small"} />
-                    </IconButton>
-                }>
-                <div
-                    className={cls("my-2 rounded-lg bg-surface-50 dark:bg-surface-950 text-surface-900 dark:text-white")}>
-                    <form noValidate={true}
-                        onSubmit={(e) => {
-                            e.preventDefault();
-                            if (!searchString) return;
-                            setOpenPopup(false);
-                            const entityId = searchString.trim();
-                            setRecentIds(addRecentId(collection.id, entityId));
-                            navigateToEntity({
-                                openEntityMode,
-                                collection,
-                                entityId,
-                                path,
-                                pathSegments,
-                                fullIdPath,
-                                sideEntityController,
-                                navigation
-                            })
-                        }}
-                        className={"w-96 max-w-full"}>
-
-                        <div className="flex p-2 w-full gap-2">
-                            <input
-                                autoFocus={openPopup}
-                                placeholder={t("find_entity_by_id")}
-                                // size={"small"}
-                                onChange={(e) => {
-                                    setSearchString(e.target.value);
-                                }}
-                                value={searchString}
-                                className={"rounded-lg bg-white dark:bg-surface-800 flex-grow bg-transparent outline-none p-2 " + focusedDisabled} />
-                            <Button variant={"text"}
-                                disabled={!(searchString.trim())}
-                                type={"submit"}
-                            ><KeyboardTabIcon /></Button>
-                        </div>
-                    </form>
-                    {recentIds && recentIds.length > 0 && <div className="flex flex-col gap-2 p-2">
-                        {recentIds.map(id => (
-                            <ReferencePreview reference={new EntityReference(id, path, undefined, pathSegments)}
-                                key={id}
-                                hover={true}
-                                onClick={() => {
-                                    setOpenPopup(false);
-                                    navigateToEntity({
-                                        openEntityMode,
-                                        collection,
-                                        entityId: id,
-                                        path,
-                                        pathSegments,
-                                        fullIdPath,
-                                        sideEntityController,
-                                        navigation
-                                    })
-                                }}
-                                includeEntityLink={false}
-                                size={"small"} />
-                        ))}
-                    </div>}
-                </div>
-            </Popover>
-
-        </Tooltip>
-    );
-}

package/src/components/EntityCollectionView/EntityIdHeaderWidget.tsx

@@ -0,0 +1,166 @@
+import React, { useCallback, useRef } from "react";
+import { Button, cls, focusedDisabled, IconButton, KeyboardTabIcon, Popover, SearchIcon, Tooltip } from "@firecms/ui";
+import { EntityCollection, EntityReference } from "../../types";
+import { navigateToEntity } from "../../util/navigation_utils";
+import { ReferencePreview } from "../../preview";
+import { useNavigationController } from "../../hooks/useNavigationController";
+import { useSideEntityController } from "../../hooks/useSideEntityController";
+import { useTranslation } from "../../hooks/useTranslation";
+import { useDataSource } from "../../hooks/data/useDataSource";
+import { addRecentId, getRecentIds, removeRecentIds } from "./utils";
+
+const DEFAULT_ENTITY_OPEN_MODE: "side_panel" | "full_screen" = "side_panel";
+
+/**
+ * "Find by id" in the header of a collection's id column, listing the ids opened in it lately.
+ */
+export function EntityIdHeaderWidget({
+    collection,
+    path,
+    pathSegments,
+    fullIdPath
+}: {
+    collection: EntityCollection,
+    path: string,
+    /** `path` split at its real segment boundaries, when the caller knows them. */
+    pathSegments?: string[],
+    fullIdPath: string
+}) {
+
+    const navigation = useNavigationController();
+    const dataSource = useDataSource(collection);
+    const [openPopup, setOpenPopup] = React.useState(false);
+    const [searchString, setSearchString] = React.useState("");
+    // The recent ids are kept per full path rather than per collection: a subcollection has
+    // the same id under every parent, and an id found under one parent does not exist under
+    // the others. Only the ones known to exist are listed.
+    const [recentIds, setRecentIds] = React.useState<string[]>([]);
+    const latestCheck = useRef(0);
+    const sideEntityController = useSideEntityController();
+    const { t } = useTranslation();
+
+    // Resolved as useEntityFetch resolves them, so the check reads what the preview shows.
+    const resolvedPath = navigation.resolveIdsFrom(path, pathSegments);
+    const resolvedPathSegments = pathSegments
+        ? (navigation.resolveSegmentsFrom?.(pathSegments) ?? pathSegments)
+        : undefined;
+
+    /** Whether the entity exists, or `undefined` when that could not be told. */
+    const entityExists = useCallback(async (entityId: string): Promise<boolean | undefined> => {
+        try {
+            const entity = await dataSource.fetchEntity({
+                path: resolvedPath,
+                pathSegments: resolvedPathSegments,
+                entityId,
+                collection
+            });
+            return Boolean(entity?.values);
+        } catch (e) {
+            return undefined;
+        }
+    }, [dataSource, resolvedPath, resolvedPathSegments, collection]);
+
+    // A recent id that no longer exists would be fetched and shown as "not found" on every
+    // opening, so it is forgotten. One that could not be checked is kept for next time.
+    const refreshRecentIds = () => {
+        const ids = getRecentIds(fullIdPath);
+        const check = ++latestCheck.current;
+        Promise.all(ids.map(entityExists)).then((results) => {
+            if (check !== latestCheck.current) return;
+            const missing = ids.filter((_, i) => results[i] === false);
+            if (missing.length > 0)
+                removeRecentIds(fullIdPath, missing);
+            setRecentIds(ids.filter((_, i) => results[i] === true));
+        });
+    };
+
+    const openEntityMode = collection?.openEntityMode ?? DEFAULT_ENTITY_OPEN_MODE;
+
+    return (
+        <Tooltip title={!openPopup ? t("find_by_id") : undefined} asChild={false}>
+            <Popover
+                open={openPopup}
+                onOpenChange={(open) => {
+                    // read on each opening: rows opened since the last one are recent too
+                    if (open) refreshRecentIds();
+                    setOpenPopup(open);
+                }}
+                sideOffset={0}
+                align={"start"}
+                alignOffset={-117}
+                trigger={
+                    <IconButton size={"small"}>
+                        <SearchIcon size={"small"} />
+                    </IconButton>
+                }>
+                <div
+                    className={cls("my-2 rounded-lg bg-surface-50 dark:bg-surface-950 text-surface-900 dark:text-white")}>
+                    <form noValidate={true}
+                        onSubmit={(e) => {
+                            e.preventDefault();
+                            const entityId = searchString.trim();
+                            // Enter submits even while the button is disabled, and an empty
+                            // id would open a new entity instead
+                            if (!entityId) return;
+                            setOpenPopup(false);
+                            // remembered only once found, or every opening would fetch it again
+                            entityExists(entityId).then((exists) => {
+                                if (exists) addRecentId(fullIdPath, entityId);
+                            });
+                            navigateToEntity({
+                                openEntityMode,
+                                collection,
+                                entityId,
+                                path,
+                                pathSegments,
+                                fullIdPath,
+                                sideEntityController,
+                                navigation
+                            })
+                        }}
+                        className={"w-96 max-w-full"}>
+
+                        <div className="flex p-2 w-full gap-2">
+                            <input
+                                autoFocus={openPopup}
+                                placeholder={t("find_entity_by_id")}
+                                // size={"small"}
+                                onChange={(e) => {
+                                    setSearchString(e.target.value);
+                                }}
+                                value={searchString}
+                                className={"rounded-lg bg-white dark:bg-surface-800 flex-grow bg-transparent outline-none p-2 " + focusedDisabled} />
+                            <Button variant={"text"}
+                                disabled={!(searchString.trim())}
+                                type={"submit"}
+                            ><KeyboardTabIcon /></Button>
+                        </div>
+                    </form>
+                    {recentIds && recentIds.length > 0 && <div className="flex flex-col gap-2 p-2">
+                        {recentIds.map(id => (
+                            <ReferencePreview reference={new EntityReference(id, path, undefined, pathSegments)}
+                                key={id}
+                                hover={true}
+                                onClick={() => {
+                                    setOpenPopup(false);
+                                    navigateToEntity({
+                                        openEntityMode,
+                                        collection,
+                                        entityId: id,
+                                        path,
+                                        pathSegments,
+                                        fullIdPath,
+                                        sideEntityController,
+                                        navigation
+                                    })
+                                }}
+                                includeEntityLink={false}
+                                size={"small"} />
+                        ))}
+                    </div>}
+                </div>
+            </Popover>
+
+        </Tooltip>
+    );
+}

package/src/components/EntityCollectionView/utils.ts

@@ -1,19 +1,25 @@
 import { getLocalStorageJSON, setLocalStorageItem } from "../../util/local_storage";
 
-export function addRecentId(collectionId: string, id: string) {
-    const recentIds = getRecentIds(collectionId);
+export function addRecentId(key: string, id: string) {
+    const recentIds = getRecentIds(key);
     const newRecentIds = [id, ...recentIds.filter(i => i !== id)];
     if (newRecentIds.length > 5) {
         newRecentIds.pop();
     }
-    saveSearchedIdsLocally(collectionId, newRecentIds);
+    saveSearchedIdsLocally(key, newRecentIds);
     return newRecentIds;
 }
 
-export function saveSearchedIdsLocally(collectionId: string, ids: string[]) {
-    setLocalStorageItem("recent_id_searches::" + collectionId, JSON.stringify(ids));
+export function saveSearchedIdsLocally(key: string, ids: string[]) {
+    setLocalStorageItem("recent_id_searches::" + key, JSON.stringify(ids));
 }
 
-export function getRecentIds(collectionId: string): string[] {
-    return getLocalStorageJSON("recent_id_searches::" + collectionId, []);
+export function getRecentIds(key: string): string[] {
+    return getLocalStorageJSON("recent_id_searches::" + key, []);
+}
+
+export function removeRecentIds(key: string, ids: string[]) {
+    const remaining = getRecentIds(key).filter(id => !ids.includes(id));
+    saveSearchedIdsLocally(key, remaining);
+    return remaining;
 }

package/src/components/common/default_entity_actions.tsx

@@ -38,7 +38,8 @@ export const editEntityAction: EntityAction = {
         });
 
         if (collection) {
-            addRecentId(collection.id, entity.id);
+            // the same key the collection view's "find by id" reads them with
+            addRecentId(fullIdPath ?? fullPath ?? collection.id, entity.id);
         }
 
         const path = collection?.collectionGroup ? entity.path : (fullPath ?? collection?.path ?? entity.path);

package/src/core/DefaultAppBar.tsx

@@ -21,6 +21,8 @@ import { User } from "../types";
 import { useApp } from "../app/useApp";
 import { useBreadcrumbsController } from "../hooks/useBreadcrumbsController";
 import { DrawerLogo } from "./DefaultDrawer";
+import { CollectionCountBadge } from "../components/EntityCollectionView/CollectionCountBadge";
+import { PathTitle } from "../components/EntityCollectionView/CollectionPathTitle";
 
 export type DefaultAppBarProps<ADDITIONAL_PROPS = object> = {
 
@@ -81,6 +83,7 @@ export const DefaultAppBar = function DefaultAppBar({
     const navigation = useNavigationController();
 
     const breadcrumbs = useBreadcrumbsController();
+    const lastBreadcrumb = breadcrumbs.breadcrumbs?.[breadcrumbs.breadcrumbs.length - 1];
 
     const authController = useAuthController();
     const {
@@ -177,15 +180,7 @@ export const DefaultAppBar = function DefaultAppBar({
                                         {breadcrumb.title}
                                     </Typography>
                                     {/* Show count badge for collection breadcrumbs: undefined = not applicable, null = loading, number = count */}
-                                    {breadcrumb.count !== undefined && (
-                                        breadcrumb.count !== null ? (
-                                            <span className="text-xs text-surface-accent-500 dark:text-surface-accent-400 bg-surface-100 dark:bg-surface-700 px-1 py-0 rounded">
-                                                {breadcrumb.count}
-                                            </span>
-                                        ) : (
-                                            <Skeleton className="w-8 h-4 rounded-md" />
-                                        )
-                                    )}
+                                    <CollectionCountBadge count={breadcrumb.count}/>
                                 </div>
                             </Link>
                         </React.Fragment>;
@@ -193,6 +188,14 @@ export const DefaultAppBar = function DefaultAppBar({
                 </div>
             </div>}
 
+            {/* A row of breadcrumbs does not fit a small screen, but where you are and how
+                many entities are there still matter, so they are folded on two lines. */}
+            {lastBreadcrumb && <PathTitle
+                className={"lg:hidden min-w-0 mr-2"}
+                parents={breadcrumbs.breadcrumbs.slice(0, -1).map(breadcrumb => breadcrumb.title)}
+                name={lastBreadcrumb.title}
+                count={lastBreadcrumb.count}/>}
+
 
             {startAdornment}
 

package/src/core/EntityEditView.tsx

@@ -24,6 +24,7 @@ import {
 import {
     useAuthController,
     useCustomizationController,
+    useDataSource,
     useEntityFetch,
     useFireCMSContext,
     useLargeLayout
@@ -35,6 +36,7 @@ import { EntityEditViewFormActions } from "./EntityEditViewFormActions";
 import { EntityJsonPreview } from "../components/EntityJsonPreview";
 import { createFormexStub } from "../util/createFormexStub";
 import { useTranslation } from "../hooks/useTranslation";
+import { CollectionPathTitle } from "../components/EntityCollectionView/CollectionPathTitle";
 
 export const MAIN_TAB_VALUE = "__main_##Q$SC^#S6";
 export const JSON_TAB_VALUE = "__json";
@@ -238,6 +240,11 @@ export function EntityEditViewInner<M extends Record<string, any>>({
 
     const subcollections = (collection.subcollections ?? []).filter(c => !c.hideFromNavigation);
     const subcollectionsCount = subcollections?.length ?? 0;
+
+    // The number of entities in each subcollection tab, as its collection view counts them.
+    const [subcollectionCounts, setSubcollectionCounts] = useState<Record<string, number>>({});
+    const selectedSubcollection = subcollections.find(subcollection => (subcollection.id ?? subcollection.path) === selectedTab);
+    const selectedSubcollectionDataSource = useDataSource(selectedSubcollection ?? collection);
     const customViews = collection.entityViews ?? [];
     const customViewsCount = customViews?.length ?? 0;
     const includeJsonView = collection.includeJsonView === undefined ? true : collection.includeJsonView;
@@ -386,7 +393,9 @@ export function EntityEditViewInner<M extends Record<string, any>>({
                             isSubCollection={true}
                             updateUrl={false}
                             {...subcollection}
-                            openEntityMode={layout} />
+                            openEntityMode={layout}
+                            onCountChange={(count) => setSubcollectionCounts(counts =>
+                                counts[subcollectionId] === count ? counts : { ...counts, [subcollectionId]: count })} />
                         : <div className="flex items-center justify-center w-full h-full p-3">
                             <Typography variant={"label"}>
                                 {t("youd_need_to_save_before_additional_collections")}
@@ -534,6 +543,20 @@ export function EntityEditViewInner<M extends Record<string, any>>({
 
     const shouldShowTopBar = Boolean(barActions) || hasAdditionalViews;
 
+    // A side panel covers the app bar's breadcrumbs, which show where a collection is and
+    // how many entities it has, so the panel shows its subcollection's in its own top bar.
+    const subcollectionTitle = layout === "side_panel" && selectedSubcollection && usedEntity
+        ? (() => {
+            const subcollectionId = selectedSubcollection.id ?? selectedSubcollection.path;
+            return <CollectionPathTitle
+                path={fullIdPath
+                    ? `${fullIdPath}/${encodeEntityId(usedEntity.id)}/${removeInitialAndTrailingSlashes(subcollectionId)}`
+                    : `${path}/${usedEntity.id}/${removeInitialAndTrailingSlashes(selectedSubcollection.path)}`}
+                name={selectedSubcollection.name}
+                count={subcollectionCounts[subcollectionId] ?? (selectedSubcollectionDataSource.countEntities ? null : undefined)}/>;
+        })()
+        : null;
+
     let result = <div className="relative flex flex-col h-full w-full bg-white dark:bg-surface-900">
 
         {shouldShowTopBar && <div
@@ -546,6 +569,8 @@ export function EntityEditViewInner<M extends Record<string, any>>({
                 status
             })}
 
+            {subcollectionTitle}
+
             <div className={"flex-grow"} />
 
             {pluginActionsTop}