@carlonicora/nextjs-jsonapi 5.3.0 → 5.5.0

package/messages/it.json

@@ -736,6 +736,99 @@
       }
     }
   },
+  "blog": {
+    "admin": {
+      "title": "Blog",
+      "newPost": "Nuovo articolo",
+      "editPost": "Modifica articolo",
+      "newCategory": "Nuova categoria",
+      "editCategory": "Modifica categoria",
+      "empty": "Nessun articolo. Scrivi il primo.",
+      "emptyCategories": "Nessuna categoria."
+    },
+    "tabs": {
+      "posts": "Articoli",
+      "categories": "Categorie",
+      "layout": "Impaginazione"
+    },
+    "fields": {
+      "title": "Titolo",
+      "slug": "Slug",
+      "slugHelp": "L'ultima parte dell'indirizzo dell'articolo. Cambiarlo rompe i link che puntano già all'articolo.",
+      "summary": "Sommario",
+      "summaryHelp": "Lascialo vuoto e lo scriverà l'AI a partire dal testo.",
+      "body": "Testo",
+      "coverImage": "Immagine di copertina",
+      "coverImageAlt": "Descrizione dell'immagine di copertina",
+      "categories": "Categorie",
+      "originalLanguage": "Lingua originale",
+      "name": "Nome",
+      "description": "Descrizione",
+      "image": "Immagine",
+      "status": "Stato",
+      "publishedAt": "Pubblicato",
+      "languages": "Lingue pronte"
+    },
+    "status": {
+      "draft": "Bozza",
+      "published": "Pubblicato",
+      "unpublished": "Ritirato"
+    },
+    "actions": {
+      "publish": "Pubblica",
+      "unpublish": "Ritira",
+      "edit": "Modifica",
+      "translateAgain": "Traduci di nuovo",
+      "compareWithOriginal": "Confronta con l'originale",
+      "hideComparison": "Nascondi confronto"
+    },
+    "translation": {
+      "original": "Originale",
+      "translatedFrom": "Lingua originale: {language}, tradotto il {date}",
+      "editedByHand": "Modificato a mano",
+      "overwriteWarning": "Modificare l'originale lo farà tradurre di nuovo e sostituirà queste modifiche.",
+      "translating": "Traduzione in corso…",
+      "failed": "Traduzione non riuscita",
+      "pending": "In attesa di traduzione"
+    },
+    "layout": {
+      "title": "Impaginazione dell'elenco pubblico",
+      "featured": "In evidenza",
+      "featuredDescription": "L'articolo più recente in grande, poi una griglia di schede su tre colonne.",
+      "column": "Colonna",
+      "columnDescription": "Una colonna di lettura stretta, una riga per articolo con l'immagine accanto al testo.",
+      "rail": "Barra laterale",
+      "railDescription": "Ricerca e categorie in una barra laterale, l'articolo più recente in grande, gli altri su due colonne.",
+      "saved": "Impaginazione salvata"
+    },
+    "public": {
+      "eyebrow": "Blog",
+      "title": "Note e guide",
+      "subtitle": "Idee, guide e novità dal team.",
+      "all": "Tutti",
+      "search": "Cerca",
+      "searchPlaceholder": "Cerca negli articoli",
+      "loadMore": "Carica altri",
+      "readingTime": "{minutes} min di lettura",
+      "updated": "Aggiornato il {date}",
+      "by": "Di {author}",
+      "back": "Tutti gli articoli",
+      "moreIn": "Altro in {category}",
+      "empty": "Ancora nessun articolo.",
+      "noResults": "Nessun articolo corrisponde alla ricerca."
+    },
+    "entities": {
+      "post": "Articolo",
+      "posts": "Articoli",
+      "category": "Categoria",
+      "categories": "Categorie"
+    },
+    "errors": {
+      "title": "Il titolo è obbligatorio",
+      "name": "Il nome è obbligatorio",
+      "language": "Scegli la lingua originale"
+    }
+  },
   "canvas": {
     "toolbar": {
       "fitView": "Adatta alla vista",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carlonicora/nextjs-jsonapi",
-  "version": "5.3.0",
+  "version": "5.5.0",
   "description": "Next.js JSON:API client with server/client support and caching",
   "author": "Carlo Nicora",
   "license": "GPL-3.0-or-later",
@@ -49,6 +49,11 @@
       "require": "./dist/contexts/index.js"
     },
     "./contexts/styles.css": "./dist/contexts/index.css",
+    "./blocknote/server": {
+      "types": "./dist/components/editors/server.d.ts",
+      "import": "./dist/components/editors/server.mjs",
+      "require": "./dist/components/editors/server.js"
+    },
     "./testing": {
       "types": "./dist/testing/index.d.ts",
       "import": "./dist/testing/index.mjs",
@@ -74,6 +79,16 @@
       "import": "./dist/features/help/server.mjs",
       "require": "./dist/features/help/server.js"
     },
+    "./blog": {
+      "types": "./dist/features/blog/index.d.ts",
+      "import": "./dist/features/blog/index.mjs",
+      "require": "./dist/features/blog/index.js"
+    },
+    "./blog/server": {
+      "types": "./dist/features/blog/server.d.ts",
+      "import": "./dist/features/blog/server.mjs",
+      "require": "./dist/features/blog/server.js"
+    },
     "./tokenusage": {
       "types": "./dist/features/tokenusage/index.d.ts",
       "import": "./dist/features/tokenusage/index.mjs",
@@ -154,6 +169,7 @@
     "@base-ui/react": "1.8.0",
     "@blocknote/core": "^0.55.0",
     "@blocknote/react": "^0.55.0",
+    "@blocknote/server-util": "^0.55.0",
     "@blocknote/shadcn": "^0.55.0",
     "@blocknote/xl-ai": "^0.55.0",
     "@dnd-kit/core": "^6.3.1",
@@ -203,6 +219,8 @@
     "tw-animate-css": "^1.4.0",
     "uuid": "^14.0.2",
     "vaul": "^1.1.2",
+    "y-prosemirror": "^1.3.7",
+    "y-protocols": "^1.0.6",
     "zod": "^4.6.5"
   },
   "devDependencies": {

package/src/components/editors/BlockNoteEditor.tsx

@@ -78,6 +78,13 @@ export type BlockNoteEditorProps = {
   diffContent?: PartialBlock[];
   placeholder?: string;
   bordered?: boolean;
+  /**
+   * Storage folder for pasted images, used instead of the current company's
+   * `companies/<companyId>/<type>` folder: the image key becomes
+   * `<uploadKeyPrefix>/<id>/<file name>`. For platform content edited by users
+   * who belong to no company (the blog). Omitted: the company folder, as before.
+   */
+  uploadKeyPrefix?: string;
   inlineContentSpecs?: Record<string, any>;
   renderOverlays?: (editor: any) => React.ReactNode;
   enableMentions?: boolean;
@@ -405,6 +412,7 @@ export default function BlockNoteEditor({
   diffContent,
   placeholder,
   bordered,
+  uploadKeyPrefix,
   inlineContentSpecs,
   renderOverlays,
   enableMentions,
@@ -547,7 +555,7 @@ export default function BlockNoteEditor({
 
   const uploadImage = useCallback(
     async (file: File): Promise<string> => {
-      if (!company) {
+      if (!company && !uploadKeyPrefix) {
         errorToast({
           title: t(`common.errors.upload`),
           error: t(`common.errors.upload_description`),
@@ -556,7 +564,9 @@ export default function BlockNoteEditor({
       }
 
       const fileType = file.type;
-      const key = `companies/${company.id}/${type}/${id}/${file.name}`;
+      const key = uploadKeyPrefix
+        ? `${uploadKeyPrefix}/${id}/${file.name}`
+        : `companies/${company!.id}/${type}/${id}/${file.name}`;
 
       const s3: S3Interface = await S3Service.getPreSignedUrl({
         key: key,
@@ -577,7 +587,7 @@ export default function BlockNoteEditor({
 
       return signedImage.url;
     },
-    [company, id, t],
+    [company, id, t, type, uploadKeyPrefix],
   );
 
   // Utility: Remove trailing empty blocks for read-only display

package/src/components/editors/server/BlockNoteServerContent.tsx

@@ -0,0 +1,28 @@
+import type { PartialBlock } from "@blocknote/core";
+import "@blocknote/shadcn/style.css";
+// Imported through the package's own client subpath, like the analytics server
+// pages: the built server entry must reach the viewer through the "use client"
+// bundle, not inline it.
+import { BlockNoteStaticViewer } from "@carlonicora/nextjs-jsonapi/components";
+import { renderBlockNoteHTML } from "./renderBlockNoteHTML";
+
+/**
+ * Read-only rich text rendered on the server, so the text is in the HTML that
+ * crawlers read. For public read-only pages only: everywhere else, display goes
+ * through BlockNoteEditorContainer.
+ */
+export async function BlockNoteServerContent({
+  content,
+  size,
+  className,
+}: {
+  content?: PartialBlock[];
+  size?: "default" | "sm";
+  className?: string;
+}) {
+  if (!Array.isArray(content) || content.length === 0) return null;
+
+  const html = await renderBlockNoteHTML(content);
+
+  return <BlockNoteStaticViewer html={html} size={size} className={className} />;
+}

package/src/components/editors/server/__tests__/renderBlockNoteHTML.spec.ts

@@ -0,0 +1,44 @@
+// @vitest-environment node
+// The server render runs in Node, where there is no window or document of our own:
+// BlockNote's ServerBlockNoteEditor brings its JSDOM.
+import type { PartialBlock } from "@blocknote/core";
+import { describe, expect, it } from "vitest";
+import { renderBlockNoteHTML } from "../renderBlockNoteHTML";
+
+const blocks: PartialBlock[] = [
+  { type: "heading", props: { level: 2 }, content: "Prep situations" },
+  {
+    type: "paragraph",
+    content: [
+      { type: "text", text: "A scene that can go ", styles: {} },
+      { type: "text", text: "three ways", styles: { bold: true } },
+    ],
+  },
+  { type: "bulletListItem", content: "First clue" },
+  { type: "bulletListItem", content: "Second clue" },
+  {
+    type: "paragraph",
+    content: [{ type: "link", href: "https://example.com/guide", content: "Read the guide" }],
+  },
+];
+
+describe("renderBlockNoteHTML", () => {
+  it("renders the blocks' text into HTML on the server", async () => {
+    const html = await renderBlockNoteHTML(blocks);
+
+    expect(html).toContain("Prep situations");
+    expect(html).toMatch(/<h2[^>]*>.*Prep situations.*<\/h2>/s);
+    expect(html).toMatch(/<strong[^>]*>three ways<\/strong>/);
+    expect(html).toContain("First clue");
+    expect(html).toContain("Second clue");
+    expect(html).toContain('href="https://example.com/guide"');
+    expect(html).toContain("Read the guide");
+  });
+
+  it("leaves the server globals as they were", async () => {
+    await Promise.all([renderBlockNoteHTML(blocks), renderBlockNoteHTML(blocks)]);
+
+    expect(typeof (globalThis as { window?: unknown }).window).toBe("undefined");
+    expect(typeof (globalThis as { document?: unknown }).document).toBe("undefined");
+  });
+});

package/src/components/editors/server/renderBlockNoteHTML.ts

@@ -0,0 +1,26 @@
+import type { PartialBlock } from "@blocknote/core";
+import { ServerBlockNoteEditor } from "@blocknote/server-util";
+
+// Default schema only, the same one BlockNoteViewer uses: the editor's mention
+// and diff inline specs are React specs from "use client" modules (next/link,
+// hover cards), so they cannot run here.
+let editor: ServerBlockNoteEditor | undefined;
+
+// ServerBlockNoteEditor swaps globalThis.window/document for its JSDOM around
+// each call and restores them after an await. Two overlapping calls would
+// restore each other's values and could leave the JSDOM window on the server's
+// globals, so calls run one at a time.
+let queue: Promise<unknown> = Promise.resolve();
+
+/**
+ * Renders a BlockNote blocks array to the HTML the editor itself would render,
+ * through BlockNote's own server editor (`blocksToFullHTML`). Server only.
+ */
+export function renderBlockNoteHTML(blocks: PartialBlock[]): Promise<string> {
+  const run = queue.then(() => {
+    editor ??= ServerBlockNoteEditor.create();
+    return editor.blocksToFullHTML(blocks);
+  });
+  queue = run.catch(() => undefined);
+  return run;
+}

package/src/components/editors/server-entry.ts

@@ -0,0 +1,7 @@
+// Server-only barrel for BlockNote rendering.
+// Consumed via `@carlonicora/nextjs-jsonapi/blocknote/server`. Must NOT receive a
+// "use client" directive: it loads @blocknote/server-util (and its JSDOM), which
+// must never reach a client bundle. The app lists @blocknote/server-util in
+// `serverExternalPackages` so Node loads it instead of the bundler.
+
+export { BlockNoteServerContent } from "./server/BlockNoteServerContent";

package/src/components/forms/FormBlockNote.tsx

@@ -41,6 +41,7 @@ export function FormBlockNote({
   aiConfig,
   aiHandleRef,
   headerAction,
+  uploadKeyPrefix,
 }: {
   form: any;
   id: string;
@@ -74,6 +75,8 @@ export function FormBlockNote({
   aiHandleRef?: React.MutableRefObject<import("../editors/BlockNoteEditor").BlockNoteAiHandle | null>;
   /** Rendered on the label row, right-aligned — e.g. a "Suggest impression" button. */
   headerAction?: React.ReactNode;
+  /** See `BlockNoteEditorProps.uploadKeyPrefix`. */
+  uploadKeyPrefix?: string;
 }) {
   const initialContentRef = useRef<any>(null);
   const lastEditorContentRef = useRef<any>(undefined);
@@ -133,6 +136,7 @@ export function FormBlockNote({
               bordered
               inlineContentSpecs={inlineContentSpecs}
               renderOverlays={renderOverlays}
+              uploadKeyPrefix={uploadKeyPrefix}
               enableMentions={enableMentions}
               mentionSearchFn={mentionSearchFn}
               mentionSearchParams={mentionSearchParams}

package/src/components/index.ts

@@ -7,6 +7,7 @@ export * from "./contents";
 export * from "./details";
 export * from "./editors";
 export { BlockNoteViewerContainer } from "./viewers/BlockNoteViewerContainer";
+export { BlockNoteStaticViewer } from "./viewers/BlockNoteStaticViewer";
 export * from "./errors";
 export * from "./forms";
 export * from "./navigations";

package/src/components/navigations/ContentTitle.tsx

@@ -11,9 +11,20 @@ type TitleProps = {
   className?: string;
   module?: ModuleWithPermissions;
   prioritizeFunctions?: boolean;
+  /** Renders the title line as a real heading (public SEO pages). Omitted: a plain div, as before. */
+  headingLevel?: 1 | 2;
 };
 
-export function ContentTitle({ module, type, element, functions, className, prioritizeFunctions }: TitleProps) {
+export function ContentTitle({
+  module,
+  type,
+  element,
+  functions,
+  className,
+  prioritizeFunctions,
+  headingLevel,
+}: TitleProps) {
+  const ElementTag = headingLevel === 1 ? "h1" : headingLevel === 2 ? "h2" : "div";
   const [clientFunctions, setClientFunctions] = useState<ReactNode>(null);
   const [isClient, setIsClient] = useState(false);
 
@@ -43,9 +54,9 @@ export function ContentTitle({ module, type, element, functions, className, prio
           </div>
         )}
         {/* Element (name) - truncates with ellipsis when space is limited */}
-        <div className={cn("text-primary text-3xl font-semibold", prioritizeFunctions ? "truncate" : "w-full")}>
+        <ElementTag className={cn("text-primary text-3xl font-semibold", prioritizeFunctions ? "truncate" : "w-full")}>
           {element}
-        </div>
+        </ElementTag>
       </div>
       {/* Functions section - doesn't shrink when prioritizeFunctions is true */}
       {isClient && clientFunctions && (

package/src/components/viewers/BlockNoteStaticViewer.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import { useTheme } from "next-themes";
+import { useEffect, useState } from "react";
+import { cn } from "../../utils";
+
+/**
+ * Shows HTML produced by BlockNoteServerContent inside the same container
+ * markup BlockNoteView renders, so BlockNote's stylesheet and the app's
+ * `.BlockNoteView` rules apply as they do to BlockNoteViewer.
+ */
+export function BlockNoteStaticViewer({
+  html,
+  size,
+  className,
+}: {
+  html: string;
+  size?: "default" | "sm";
+  className?: string;
+}) {
+  // The server cannot know the theme: render light until mounted, then follow
+  // the app theme like BlockNoteViewer, so hydration never mismatches.
+  const [mounted, setMounted] = useState(false);
+  const { resolvedTheme } = useTheme();
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  const theme = mounted && resolvedTheme === "dark" ? "dark" : "light";
+
+  return (
+    <div
+      className={cn("bn-root bn-container", theme, "bn-shadcn BlockNoteView", size === "sm" && "small", className)}
+      data-color-scheme={theme}
+    >
+      <div
+        className="bn-editor bn-default-styles ProseMirror"
+        contentEditable={false}
+        dangerouslySetInnerHTML={{ __html: html }}
+      />
+    </div>
+  );
+}

package/src/core/index.ts

@@ -75,6 +75,10 @@ export * from "../features/email-automation/EmailAutomationTriggerModule";
 // server page can wrap EmailAutomationService.findOne in cache(). The client-marked
 // ./email-automations entry carries only components, contexts and hooks.
 export * from "../features/email-automation/data";
+// Blog modules and data: server-safe, same placement as email automation above.
+// The client-marked ./blog entry carries only components, contexts and hooks.
+export * from "../features/blog/BlogModules";
+export * from "../features/blog/data";
 export * from "../features/handbook/HandbookPageModule";
 export * from "../features/handbook/HandbookSectionModule";
 export * from "../features/handbook/HandbookThreadMessageModule";

package/src/core/registry/ModuleRegistry.ts

@@ -46,6 +46,12 @@ export interface FoundationModuleDefinitions {
   EmailAutomationStep: ModuleWithPermissions;
   EmailAutomationEnrollment: ModuleWithPermissions;
   EmailAutomationTrigger: ModuleWithPermissions;
+  // Blog modules
+  BlogPost: ModuleWithPermissions;
+  BlogPostTranslation: ModuleWithPermissions;
+  BlogCategory: ModuleWithPermissions;
+  BlogCategoryTranslation: ModuleWithPermissions;
+  BlogSettings: ModuleWithPermissions;
   // Referral modules
   Referral: ModuleWithPermissions;
   ReferralStats: ModuleWithPermissions;

package/src/features/administration/components/AdminIndexContainer.tsx

@@ -8,14 +8,21 @@ import { Link } from "../../../shadcnui";
 import { AdministrationProvider } from "../contexts/AdministrationContext";
 import type { AdminGroup, AdminSection } from "../data/admin-section.types";
 
+/** Keys of the built-in platform sections, for `hiddenSections`. */
+export type PlatformSectionKey = "companies" | "users" | "token-usage" | "ai-connections" | "rbac" | "billing";
+
 /**
- * The sections every NJA project has. Hrefs are constants rather than props:
- * the path convention IS the contract that makes this component reusable, and
- * it already exists in the package (see TOKEN_USAGE_ADMIN_PAGE_URL in
- * features/tokenusage/contexts/TokenUsageAdminContext.tsx).
+ * The sections every NJA project has, by key. Hrefs are constants rather than
+ * props: the path convention IS the contract that makes this component
+ * reusable. Exported so an app that passes its own `groups` places these
+ * entries without retyping their keys, icons and copy.
+ *
+ * `billing` is the only conditional entry: the default platform group shows it
+ * only when Stripe is configured (see AdminIndexGrid). An app that places it in
+ * its own `groups` applies the same check itself.
  */
-const PLATFORM_SECTIONS: AdminSection[] = [
-  {
+export const ADMIN_PLATFORM_SECTIONS: Record<PlatformSectionKey, AdminSection> = {
+  companies: {
     key: "companies",
     icon: Building2Icon,
     labelKey: "entities.companies",
@@ -23,7 +30,7 @@ const PLATFORM_SECTIONS: AdminSection[] = [
     descriptionKey: "administration.companies.description",
     href: "/administration/companies",
   },
-  {
+  users: {
     key: "users",
     icon: UsersIcon,
     labelKey: "entities.users",
@@ -31,21 +38,21 @@ const PLATFORM_SECTIONS: AdminSection[] = [
     descriptionKey: "administration.users.description",
     href: "/administration/users",
   },
-  {
+  "token-usage": {
     key: "token-usage",
     icon: CoinsIcon,
     labelKey: "token_usage.admin.title",
     descriptionKey: "administration.token_usage.description",
     href: "/administration/token-usage",
   },
-  {
+  "ai-connections": {
     key: "ai-connections",
     icon: PlugZapIcon,
     labelKey: "ai_connections.admin.title",
     descriptionKey: "administration.ai_connections.description",
     href: "/administration/ai-connections",
   },
-  {
+  rbac: {
     key: "rbac",
     icon: ShieldCheckIcon,
     labelKey: "entities.rbac",
@@ -53,27 +60,33 @@ const PLATFORM_SECTIONS: AdminSection[] = [
     descriptionKey: "administration.rbac.description",
     href: "/administration/rbac",
   },
-];
-
-/**
- * The only conditional entry. getStripePublishableKey comes from /client rather
- * than isStripeConfigured() from /billing on purpose: /billing exists to keep
- * Stripe.js out of the global bundle, and isStripeConfigured lives in
- * StripeProvider.tsx, which imports @stripe/stripe-js at module scope. The two
- * are the same check — isStripeConfigured is a one-line wrapper over this call.
- */
-const BILLING_SECTION: AdminSection = {
-  key: "billing",
-  icon: CreditCardIcon,
-  labelKey: "billing.admin.products.title",
-  descriptionKey: "administration.billing.description",
-  href: "/administration/products",
+  billing: {
+    key: "billing",
+    icon: CreditCardIcon,
+    labelKey: "billing.admin.products.title",
+    descriptionKey: "administration.billing.description",
+    href: "/administration/products",
+  },
 };
 
-/** Keys of the built-in platform sections, for `hiddenSections`. */
-export type PlatformSectionKey = "companies" | "users" | "token-usage" | "ai-connections" | "rbac" | "billing";
+/** The unconditional platform entries, in the default group's order. */
+const PLATFORM_SECTIONS: AdminSection[] = [
+  ADMIN_PLATFORM_SECTIONS.companies,
+  ADMIN_PLATFORM_SECTIONS.users,
+  ADMIN_PLATFORM_SECTIONS["token-usage"],
+  ADMIN_PLATFORM_SECTIONS["ai-connections"],
+  ADMIN_PLATFORM_SECTIONS.rbac,
+];
 
 type AdminIndexProps = {
+  /**
+   * Replaces the default groups (the built-in platform group plus
+   * `additionalGroups`) with exactly these, in this order. For an app that
+   * arranges its administration by its own headings; it places the platform
+   * entries it wants from ADMIN_PLATFORM_SECTIONS. When set, `additionalGroups`
+   * is ignored and the Stripe check on `billing` is the app's to apply.
+   */
+  groups?: AdminGroup[];
   /** Project-specific groups, appended after the built-in platform group. */
   additionalGroups?: AdminGroup[];
   /**
@@ -90,10 +103,12 @@ type AdminIndexProps = {
  * The grid itself, with no page shell — this is what the specs render, because
  * RoundPageContainer pulls in the app Header and its four header contexts.
  */
-export function AdminIndexGrid({ additionalGroups = [], hiddenSections = [] }: AdminIndexProps) {
+export function AdminIndexGrid({ groups: customGroups, additionalGroups = [], hiddenSections = [] }: AdminIndexProps) {
   const t = useTranslations();
 
-  const available = getStripePublishableKey() ? [...PLATFORM_SECTIONS, BILLING_SECTION] : PLATFORM_SECTIONS;
+  const available = getStripePublishableKey()
+    ? [...PLATFORM_SECTIONS, ADMIN_PLATFORM_SECTIONS.billing]
+    : PLATFORM_SECTIONS;
 
   const platformGroup: AdminGroup = {
     key: "platform",
@@ -101,7 +116,16 @@ export function AdminIndexGrid({ additionalGroups = [], hiddenSections = [] }: A
     sections: available.filter((section) => !hiddenSections.includes(section.key as PlatformSectionKey)),
   };
 
-  const groups = [platformGroup, ...additionalGroups].filter((group) => group.sections.length > 0);
+  // Custom groups still honour hiddenSections, so a project that cannot serve
+  // a platform route drops it the same way in either mode.
+  const groups = (
+    customGroups
+      ? customGroups.map((group) => ({
+          ...group,
+          sections: group.sections.filter((section) => !hiddenSections.includes(section.key as PlatformSectionKey)),
+        }))
+      : [platformGroup, ...additionalGroups]
+  ).filter((group) => group.sections.length > 0);
 
   return (
     <div className="mx-auto flex w-full max-w-5xl flex-1 flex-col gap-8 py-8">
@@ -146,11 +170,15 @@ export function AdminIndexGrid({ additionalGroups = [], hiddenSections = [] }: A
  * and its own page chrome (AdministrationProvider), so it does not inherit the
  * title and breadcrumb of whatever page rendered before it.
  */
-export function AdminIndexContainer({ additionalGroups, hiddenSections }: AdminIndexProps) {
+export function AdminIndexContainer({ groups, additionalGroups, hiddenSections }: AdminIndexProps) {
+  const t = useTranslations();
+
+  // The index is the "Administration" page itself, so it names itself in the
+  // breadcrumb like every administration page does ("Home > Companies").
   return (
-    <AdministrationProvider>
+    <AdministrationProvider section={t("administration.title")}>
       <RoundPageContainer>
-        <AdminIndexGrid additionalGroups={additionalGroups} hiddenSections={hiddenSections} />
+        <AdminIndexGrid groups={groups} additionalGroups={additionalGroups} hiddenSections={hiddenSections} />
       </RoundPageContainer>
     </AdministrationProvider>
   );