@pramen/cms-editor 0.0.56 → 0.0.57

package/src/routes/page.tsx

@@ -6,14 +6,14 @@ import { createPage, useNavigate } from "@buzola/router";
 import { Button } from "@podoba/react";
 import { useEffect, useState } from "react";
 import { useApp } from "../app-context";
-import { PageEditor, errMsg, visibleTabs, type InspectorTab } from "../components";
+import { Notice, PageEditor, errMsg, splitsByType, visibleTabs, type InspectorTab } from "../components";
 import type { BlockType, Page } from "../types";
 
 export default createPage()
   .params({ pageId: "string", tab: "?string" })
   .route("/pages/:pageId")
   .render(function PageEditorRoute({ params }) {
-    const { api, cms, setError, setNavGuard } = useApp();
+    const { api, cms, contentTypes, setError, setNavGuard } = useApp();
     const navigate = useNavigate();
     const [page, setPage] = useState<Page | null>(null);
     const [blockTypes, setBlockTypes] = useState<BlockType[]>([]);
@@ -22,12 +22,14 @@ export default createPage()
     useEffect(() => {
       let live = true;
       setMissing(false);
-      // No get-page-by-id handler; resolve the id against the page list.
-      api.listPages()
-        .then((rows) => {
+      // By id. Resolving it against `listPages` instead meant the editor could not open a row
+      // the list had just shown it: that list is capped, and since the editor lists ONE type
+      // per tab it isn't even the same list — 150 newer pages of another type were enough to
+      // push an article out of the pooled fetch and turn a click into "Page not found."
+      api.getPageById(params.pageId)
+        .then((found) => {
           if (!live) return;
-          const found = rows.find((p) => p.id === params.pageId) ?? null;
-          setPage(found);
+          setPage(found ?? null);
           setMissing(!found);
         })
         .catch((e) => setError(errMsg(e)));
@@ -35,6 +37,16 @@ export default createPage()
       return () => { live = false; };
     }, [api, params.pageId, setError]);
 
+    // Back goes to the list this page actually belongs to. `home` redirects to whichever type
+    // sorts FIRST BY NAME on a split deployment, so "← all pages" from an article landed the
+    // editor in some other type's list — with the `replace` overwriting `/`, so Back could not
+    // undo it either. Falls back to `home` when the type is unknown (not loaded, or gone).
+    const ownType = (contentTypes ?? []).find((t) => t.id === page?.typeId);
+    const backToList = () => {
+      if (splitsByType(contentTypes, cms) && ownType) navigate("type", { params: { slug: ownType.slug } });
+      else navigate("home");
+    };
+
     // The visible set comes from the server (`visibleTabs`), so a deep link to `?tab=i18n`
     // on a single-locale deployment falls back to settings — and the URL is REWRITTEN to
     // match. Rendering one tab under another tab's address means a refresh, a Back, or a
@@ -48,14 +60,10 @@ export default createPage()
     }, [params.tab, tab]);
 
     if (missing) {
-      return (
-        <div className="mx-auto flex max-w-[1200px] items-center gap-2 px-7 pt-8">
-          <p className="text-fg-subtle">Page not found.</p>
-          <Button variant="ghost" size="sm" onPress={() => navigate("home")}>← all pages</Button>
-        </div>
-      );
+      // No page ⇒ no type to go back to; `home` lands on the first list either way.
+      return <Notice action={<Button variant="ghost" size="sm" onPress={() => navigate("home")}>← all pages</Button>}>Page not found.</Notice>;
     }
-    if (!page) return <div className="mx-auto max-w-[1200px] px-7 pt-8"><p className="text-fg-subtle">Loading…</p></div>;
+    if (!page) return <Notice>Loading…</Notice>;
 
     return (
       <PageEditor
@@ -64,7 +72,7 @@ export default createPage()
         blockTypes={blockTypes}
         tab={tab}
         onTab={setTab}
-        onBack={() => navigate("home")}
+        onBack={backToList}
         onChange={setPage}
         registerGuard={setNavGuard}
       />

package/src/routes/type.tsx

@@ -6,50 +6,43 @@
 
 import { createPage, useNavigate } from "@buzola/router";
 import { Button } from "@podoba/react";
-import { useEffect, useState } from "react";
 import { useApp } from "../app-context";
-import { PageList, errMsg } from "../components";
-import type { BlockType, Page } from "../types";
+import { Notice, PageList, pagesHidden } from "../components";
 
 export default createPage()
   .params({ slug: "string" })
   .route("/types/:slug")
   .render(function ContentTypeRoute({ params }) {
-    const { api, contentTypes, setError } = useApp();
+    const { contentTypes, contentTypesFailed, refreshContentTypes, api, setError } = useApp();
     const navigate = useNavigate();
-    const [pages, setPages] = useState<Page[]>([]);
-    const [blockTypes, setBlockTypes] = useState<BlockType[]>([]);
-    const type = contentTypes.find((t) => t.slug === params.slug);
+    const type = (contentTypes ?? []).find((t) => t.slug === params.slug);
+    const back = <Button variant="ghost" size="sm" onPress={() => navigate("home")}>← Back</Button>;
 
-    // Filtered SERVER-side (`listPages` takes the slug), so this stays correct past the
-    // handler's 100-row cap — narrowing a pooled fetch here would quietly drop the tail.
-    // Keyed on the slug, not on `type`: the fetch must not wait on listContentTypes.
-    const refreshPages = () => api.listPages(params.slug).then(setPages).catch((e) => setError(errMsg(e)));
-    useEffect(() => {
-      refreshPages();
-      api.listBlockTypes().then(setBlockTypes).catch((e) => setError(errMsg(e)));
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [api, params.slug]);
+    // This route IS the block/page builder, so a deployment that hides it hides this too —
+    // otherwise the flag is bypassed by typing the URL, or by a stale link.
+    if (pagesHidden()) return <Notice action={back}>The page builder is not enabled on this deployment.</Notice>;
 
-    // Content types load async; before they arrive (or for a bad slug) show a neutral state
-    // rather than an unlabelled list — mirrors the collection route.
-    if (!type) {
-      return (
-        <div className="mx-auto flex max-w-[1200px] items-center gap-2 px-7 pt-8">
-          <p className="text-fg-subtle">{contentTypes.length === 0 ? "Loading…" : `Unknown content type: ${params.slug}`}</p>
-          {contentTypes.length > 0 ? <Button variant="ghost" size="sm" onPress={() => navigate("home")}>← Back</Button> : null}
-        </div>
-      );
+    // `null` = listContentTypes has not answered yet; `failed` = it answered with an error and
+    // this screen cannot name its own type. The two used to collapse into an empty array, so a
+    // 5xx (or a session outside `editorRoles ∪ reviewerRoles`, which cannot call
+    // listContentTypes at all) sat on "Loading…" forever with the way back suppressed.
+    if (contentTypesFailed) {
+      return <Notice action={<Button variant="ghost" size="sm" onPress={refreshContentTypes}>Retry</Button>}>Couldn&apos;t load the content types.</Notice>;
     }
+    if (contentTypes === null) return <Notice>Loading…</Notice>;
+    // Nothing is fetched for a slug that is not a content type — the list would be empty and
+    // the heading unlabelled, and both round trips are wasted.
+    if (!type) return <Notice action={back}>Unknown content type: {params.slug}</Notice>;
 
     return (
       <PageList
         api={api}
-        pages={pages}
-        blockTypes={blockTypes}
+        // Keyed on the slug so switching tabs REMOUNTS the list: buzola renders the same
+        // component instance across a params-only change, and PageList holds the rows,
+        // the paging offset and any open create-modal — all of which belong to one type.
+        key={type.slug}
         type={type}
         onOpen={(p) => navigate("page", { params: { pageId: p.id } })}
-        onCreated={refreshPages}
         onError={setError}
       />
     );

package/src/types.ts

@@ -146,12 +146,18 @@ export interface CmsCapabilities {
   defaultLocale: string;
   /** More than one declared locale. Gates the whole i18n surface. */
   multilingual: boolean;
+  /** The server's `listPages` understands `contentType` — the licence to give each content
+   * type its own tab and its own list. An older server ACCEPTS the argument and ignores it
+   * (an unknown input key is passed through, not rejected), answering with the pooled list:
+   * without this probe the editor renders N tabs that all show every type's pages under a
+   * heading claiming otherwise, and "New page" from any of them stamps that tab's type. */
+  pagesByType: boolean;
 }
 
 /** Used until `listCmsCapabilities` answers, and when it cannot (an older server). Assumes
  * MONOLINGUAL: a hidden i18n surface on a multilingual site is recoverable by reloading,
  * where a half-rendered one on a single-locale site is what this replaced. */
-export const DEFAULT_CAPABILITIES: CmsCapabilities = { locales: ["en"], defaultLocale: "en", multilingual: false };
+export const DEFAULT_CAPABILITIES: CmsCapabilities = { locales: ["en"], defaultLocale: "en", multilingual: false, pagesByType: false };
 
 /** Mirror of @pramen/cms `CollectionFeature`. */
 export type CollectionFeature = "drafts" | "scheduling" | "revisions" | "preview";