@pramen/cms-editor 0.0.54 → 0.0.55

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pramen/cms-editor",
-  "version": "0.0.54",
+  "version": "0.0.55",
   "description": "Visual block/page editor for @pramen/cms \u2014 a standalone React SPA that talks to the CMS handlers over HTTP.",
   "license": "MIT",
   "repository": {

package/src/api.ts

@@ -132,7 +132,10 @@ export class Api {
   listBlockTypes = () => this.call<BlockType[]>("listBlockTypes");
   listContentTypes = () => this.call<ContentType[]>("listContentTypes");
   getContentType = (id: string) => this.call<ContentType | null>("getContentType", { id });
-  listPages = () => this.call<Page[]>("listPages");
+  /** All pages, or just one content type's (by SLUG). The server does the filtering — see
+   * `listPages` in @pramen/cms; it caps at 100 rows, so narrowing client-side would drop the
+   * tail of every type on a busy deployment. */
+  listPages = (contentType?: string) => this.call<Page[]>("listPages", contentType ? { contentType } : undefined);
   getPagePreview = (slug: string, locale?: string) => this.call<AssembledPage>("getPage", { slug, locale, preview: true });
   listPageAudit = (pageId: string) => this.call<AuditEntry[]>("listPageAudit", { pageId });
 

package/src/app-context.tsx

@@ -8,7 +8,7 @@ import { createContext, use, useCallback, useEffect, useMemo, useRef, useState }
 import { Api, clearConfig, isTokenExpired, loadConfig, saveConfig, type Config } from "./api";
 import { BRAND, SETUP_TITLE, type BrandConfig } from "./brand";
 import { readBackend, type BackendHost } from "./mount";
-import { DEFAULT_CAPABILITIES, type CmsCapabilities, type CollectionMeta, type JsonValue } from "./types";
+import { DEFAULT_CAPABILITIES, type CmsCapabilities, type CollectionMeta, type ContentType, type JsonValue } from "./types";
 
 declare global {
   interface Window {
@@ -72,6 +72,10 @@ interface AppContextValue {
   /** Collections registered on the server (from `listCollections`) — drives the nav + the
    * generic list/edit routes. Empty when the server registers none. */
   collections: CollectionMeta[];
+  /** Content types registered on the server (from `listContentTypes`). More than one ⇒ each
+   * gets its own nav tab and its own list route, instead of one pooled "Pages" list where a
+   * page and an article sit in the same column with nothing to tell them apart. */
+  contentTypes: ContentType[];
   /** What the SERVER says this deployment supports (from `listCmsCapabilities`) — today,
    * its declared locales. The editor renders its i18n surface off this rather than a local
    * flag, so the UI and the data can never disagree about whether the site is multilingual. */
@@ -102,6 +106,7 @@ export function AppProvider({ children }: { children: React.ReactNode }) {
   const [cfg, setCfg] = useState<Config>(() => loadConfig(BACKEND));
   const [me, setMe] = useState<Me | null>(null);
   const [collections, setCollections] = useState<CollectionMeta[]>([]);
+  const [contentTypes, setContentTypes] = useState<ContentType[]>([]);
   const [cms, setCms] = useState<CmsCapabilities>(DEFAULT_CAPABILITIES);
   const [error, setError] = useState("");
   // A usable session = somewhere to call + a token that is NOT expired. An expired token
@@ -144,6 +149,9 @@ export function AppProvider({ children }: { children: React.ReactNode }) {
     // Collections drive the nav + list/edit routes. An app that registers none (or an older
     // server without the handler) just leaves the nav as-is — a failure is non-fatal.
     api.call<CollectionMeta[]>("listCollections").then(setCollections).catch(() => setCollections([]));
+    // Drives the per-type nav + list routes. A failure leaves it empty, which falls back to
+    // the single pooled "Pages" tab — the layout before types had tabs of their own.
+    api.listContentTypes().then(setContentTypes).catch(() => setContentTypes([]));
     // A server older than this handler leaves the monolingual default, which is the safe
     // way round: the i18n surface stays hidden rather than half-rendered.
     api.call<CmsCapabilities>("listCmsCapabilities").then(setCms).catch(() => setCms(DEFAULT_CAPABILITIES));
@@ -161,6 +169,7 @@ export function AppProvider({ children }: { children: React.ReactNode }) {
     me,
     isAdmin: (me?.roles ?? []).includes("admin"),
     collections,
+    contentTypes,
     cms,
     error,
     setError,

package/src/buzola.gen.ts

@@ -12,8 +12,9 @@ const Route3 = () => import('./routes/home').then(m => ({ default: m.default.com
 const Route4 = () => import('./routes/media').then(m => ({ default: m.default.component })) as Promise<{ default: ComponentType }>;
 const Route5 = () => import('./routes/page').then(m => ({ default: m.default.component })) as Promise<{ default: ComponentType }>;
 const Route6 = () => import('./routes/settings').then(m => ({ default: m.default.component })) as Promise<{ default: ComponentType }>;
-const Route7 = () => import('./routes/users').then(m => ({ default: m.default.component })) as Promise<{ default: ComponentType }>;
-const Route8 = () => import('./routes/_404').then(m => ({ default: m.default.component })) as Promise<{ default: ComponentType }>;
+const Route7 = () => import('./routes/type').then(m => ({ default: m.default.component })) as Promise<{ default: ComponentType }>;
+const Route8 = () => import('./routes/users').then(m => ({ default: m.default.component })) as Promise<{ default: ComponentType }>;
+const Route9 = () => import('./routes/_404').then(m => ({ default: m.default.component })) as Promise<{ default: ComponentType }>;
 
 // Module augmentation for type-safe page-centric routing
 declare module '@buzola/router' {
@@ -24,6 +25,7 @@ declare module '@buzola/router' {
     'media': {};
     'page': { pageId: string; tab?: string };
     'settings': {};
+    'type': { slug: string };
     'users': {};
   }
 }
@@ -36,6 +38,7 @@ export const pageRegistry: Record<string, string> = {
   'media': '/media',
   'page': '/pages/:pageId',
   'settings': '/settings',
+  'type': '/types/:slug',
   'users': '/users',
 };
 
@@ -80,15 +83,21 @@ const routeConfigs: RouteConfig[] = [
         preload: Route6,
       },
       {
-        path: '/users',
+        path: '/type',
+        matchPath: '/types/:slug',
         component: lazy(Route7),
         preload: Route7,
       },
       {
-        path: '/:__notFound+',
+        path: '/users',
         component: lazy(Route8),
         preload: Route8,
       },
+      {
+        path: '/:__notFound+',
+        component: lazy(Route9),
+        preload: Route9,
+      },
     ],
   },
 ];

package/src/components.tsx

@@ -108,13 +108,17 @@ const Dim = ({ children }: { children: ReactNode }) => <span className="text-fg-
 
 // --- pages list --------------------------------------------------------------
 
-export function PageList({ api, pages, blockTypes, onOpen, onCreated, onError }: { api: Api; pages: Page[]; blockTypes: BlockType[]; onOpen: (p: Page) => void; onCreated: () => void; onError: (s: string) => void }) {
+/** The page list. `type` scopes it to one content type — the list is already filtered by the
+ * caller, this is what makes the SCREEN say so: the heading is the type's name and the create
+ * modal opens on that type instead of asking again. Omitted ⇒ the pooled list over every type,
+ * which is what a single-type deployment should keep seeing. */
+export function PageList({ api, pages, blockTypes, type, onOpen, onCreated, onError }: { api: Api; pages: Page[]; blockTypes: BlockType[]; type?: ContentType; onOpen: (p: Page) => void; onCreated: () => void; onError: (s: string) => void }) {
   // From the SERVER (listCmsCapabilities), not a local flag — see `CmsCapabilities`.
   const { cms: { multilingual } } = useApp();
   const [creating, setCreating] = useState(false);
   return (
     <>
-      <Hero lead="Pages" em={pages.length === 0 ? "None yet" : pages.length === 1 ? "1 page total" : `${pages.length} pages total`}>
+      <Hero lead={type?.name ?? "Pages"} em={pages.length === 0 ? "None yet" : pages.length === 1 ? "1 entry total" : `${pages.length} entries total`}>
         <Cta text="Let's" em="create something">
           <Button className="shrink-0" onPress={() => setCreating(true)}>+ New page</Button>
         </Cta>
@@ -129,22 +133,26 @@ export function PageList({ api, pages, blockTypes, onOpen, onCreated, onError }:
               <Pill status={p.status}>{p.status}</Pill>
             </div>
           ))}
-          {pages.length === 0 ? <p className="text-fg-subtle">No pages yet. {blockTypes.length === 0 ? "Define block types + a content type first (via the API/admin)." : "Create one."}</p> : null}
+          {pages.length === 0 ? <p className="text-fg-subtle">No entries yet. {blockTypes.length === 0 ? "Define block types + a content type first (via the API/admin)." : "Create one."}</p> : null}
         </div>
       </div>
-      {creating ? <CreatePage api={api} onClose={() => setCreating(false)} onCreated={() => { setCreating(false); onCreated(); }} onError={onError} /> : null}
+      {creating ? <CreatePage api={api} type={type} onClose={() => setCreating(false)} onCreated={() => { setCreating(false); onCreated(); }} onError={onError} /> : null}
     </>
   );
 }
 
-function CreatePage({ api, onClose, onCreated, onError }: { api: Api; onClose: () => void; onCreated: () => void; onError: (s: string) => void }) {
+function CreatePage({ api, type, onClose, onCreated, onError }: { api: Api; type?: ContentType; onClose: () => void; onCreated: () => void; onError: (s: string) => void }) {
   const [cts, setCts] = useState<ContentType[]>([]);
-  const [typeId, setTypeId] = useState("");
+  const [typeId, setTypeId] = useState(type?.id ?? "");
   const [title, setTitle] = useState("");
   const [slug, setSlug] = useState("");
   useEffect(() => {
+    // On a type-scoped list the type is already decided by the screen you are on, so don't
+    // ask — and don't fetch the other types just to render a picker that must not move the
+    // entry out from under that screen.
+    if (type) return;
     api.listContentTypes().then((r) => { setCts(r); if (r[0]) setTypeId(r[0].id); }).catch((e) => onError(errMsg(e)));
-  }, [api, onError]);
+  }, [api, type, onError]);
   const create = async () => {
     try {
       await api.call("createPage", { typeId, title, slug: slug || slugify(title) });
@@ -157,7 +165,7 @@ function CreatePage({ api, onClose, onCreated, onError }: { api: Api; onClose: (
     <Modal onClose={onClose}>
       <ModalTitle>Create a <Dim>new page</Dim> and define the essentials<Dim>.</Dim></ModalTitle>
       <div className="flex flex-col gap-4">
-        <div className="flex w-full flex-col gap-2">
+        <div className={`w-full flex-col gap-2 ${type ? "hidden" : "flex"}`}>
           <span className="text-sm font-medium text-fg">Content type</span>
           {/* Visible cards, not a dropdown: the type is an easy-to-miss choice, and picking the
               wrong one puts the entry under a different route. Cards make the selection deliberate. */}

package/src/routes/_layout.tsx

@@ -12,7 +12,7 @@ import { opensInSameTab } from "../mount";
 const THEME_KEY = "pramen.cms.theme";
 
 export default function RootLayout() {
-  const { isAdmin, collections, error, reconfigure, confirmNavigation } = useApp();
+  const { isAdmin, collections, contentTypes, error, reconfigure, confirmNavigation } = useApp();
   const navigate = useNavigate();
   const { pathname } = useRoute();
 
@@ -35,9 +35,15 @@ export default function RootLayout() {
 
   // The active collection slug, if we're under /collections/:slug(/...).
   const collectionSlug = pathname.startsWith("/collections/") ? pathname.split("/")[2] : undefined;
+  // …and the active content type, under /types/:slug.
+  const typeSlug = pathname.startsWith("/types/") ? pathname.split("/")[2] : undefined;
 
-  // "Pages" stays lit while editing a page (/pages/:id) too.
+  // "Pages" stays lit while editing a page (/pages/:id) too — but only on a deployment that
+  // still HAS a pooled Pages tab. Split by type, the page editor lights nothing: the route
+  // carries a page id and nothing else, so which type's tab to light isn't knowable here
+  // without fetching the page the editor is already fetching.
   const active = collectionSlug ? `col:${collectionSlug}`
+    : typeSlug ? `type:${typeSlug}`
     : pathname.startsWith("/pages") || pathname === "/" ? "pages"
     : pathname.startsWith("/media") ? "media"
     : pathname.startsWith("/users") ? "users"
@@ -77,7 +83,25 @@ export default function RootLayout() {
           </button>
         </Topbar.Brand>
         <Topbar.Nav aria-label="Primary">
-          {hidePages ? null : (
+          {/* One tab per content type once a deployment declares more than one: a CMS holding
+              pages AND articles pooled them into a single "Pages" list where the only thing
+              distinguishing a landing page from a news item was the slug. A single type keeps
+              the plain "Pages" tab — there is nothing there to separate, and splitting it
+              would put the deployment's own type name where a generic label reads better.
+              The label is the type's `name`, so a host that wants a plural tab writes one. */}
+          {hidePages ? null : contentTypes.length > 1 ? (
+            contentTypes.map((t) => (
+              <Button
+                key={t.slug}
+                variant="ghost"
+                size="sm"
+                className={tabCls(`type:${t.slug}`)}
+                onPress={guarded(() => navigate("type", { params: { slug: t.slug } }))}
+              >
+                {t.name}
+              </Button>
+            ))
+          ) : (
             <Button variant="ghost" size="sm" className={tabCls("pages")} onPress={guarded(() => navigate("home"))}>
               Pages
             </Button>

package/src/routes/home.tsx

@@ -9,7 +9,7 @@ import type { BlockType, Page } from "../types";
 export default createPage()
   .route("/")
   .render(function Home() {
-    const { api, setError, collections } = useApp();
+    const { api, setError, collections, contentTypes } = useApp();
     const navigate = useNavigate();
     const [pages, setPages] = useState<Page[]>([]);
     const [blockTypes, setBlockTypes] = useState<BlockType[]>([]);
@@ -20,20 +20,28 @@ export default createPage()
     // deployment that never spread cmsSchema.
     const hidePages = typeof window !== "undefined" && window.PRAMEN_CMS_EDITOR?.hidePages === true;
     const firstCollection = collections[0]?.slug;
+    // With more than one content type each gets its own tab and its own list (`/types/:slug`),
+    // so the pooled list here has no tab of its own to be reached from and would just be a
+    // fourth way to see the same rows. Land on the first type instead. One type (or none, on a
+    // server too old to answer) keeps the pooled list — that IS the whole CMS there.
+    const splitByType = !hidePages && contentTypes.length > 1;
+    const firstType = contentTypes[0]?.slug;
 
     useEffect(() => {
       if (hidePages && firstCollection) navigate("collection", { params: { slug: firstCollection }, replace: true });
-    }, [hidePages, firstCollection, navigate]);
+      else if (splitByType && firstType) navigate("type", { params: { slug: firstType }, replace: true });
+    }, [hidePages, firstCollection, splitByType, firstType, navigate]);
 
     const refreshPages = () => api.listPages().then(setPages).catch((e) => setError(errMsg(e)));
     useEffect(() => {
-      if (hidePages) return;
+      if (hidePages || splitByType) return;
       refreshPages();
       api.listBlockTypes().then(setBlockTypes).catch((e) => setError(errMsg(e)));
       // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [api, hidePages]);
+    }, [api, hidePages, splitByType]);
 
     if (hidePages && firstCollection) return null;
+    if (splitByType) return null;
 
     return (
       <PageList

package/src/routes/type.tsx

@@ -0,0 +1,56 @@
+// One content type's page list (`/types/:slug`). The pooled list at `/` is what a
+// single-type deployment wants; the moment a deployment declares two (pages AND articles,
+// say) that list stops being a list of anything in particular — same column, same rows,
+// nothing to tell a landing page from a news item. This route is that list scoped to one
+// type, and `_layout` gives each type a tab pointing at it.
+
+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";
+
+export default createPage()
+  .params({ slug: "string" })
+  .route("/types/:slug")
+  .render(function ContentTypeRoute({ params }) {
+    const { api, contentTypes, setError } = useApp();
+    const navigate = useNavigate();
+    const [pages, setPages] = useState<Page[]>([]);
+    const [blockTypes, setBlockTypes] = useState<BlockType[]>([]);
+    const type = contentTypes.find((t) => t.slug === params.slug);
+
+    // 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]);
+
+    // 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>
+      );
+    }
+
+    return (
+      <PageList
+        api={api}
+        pages={pages}
+        blockTypes={blockTypes}
+        type={type}
+        onOpen={(p) => navigate("page", { params: { pageId: p.id } })}
+        onCreated={refreshPages}
+        onError={setError}
+      />
+    );
+  });