@gogitcms/design-system 0.16.0-next.12 → 0.16.0-next.14

package/README.md

@@ -42,8 +42,11 @@ same components render:
 ## Responsive across all three targets
 
 `ContentBrowser` is the whole story: it calls `useResponsive()` and renders
-`AppShell` (sidebar → entries → editor panes) at desktop widths or `MobileScreen`
-(drill-down list → entries → entry) below the breakpoint.
+`AppShell` (a master pane → editor panes) at desktop widths or `MobileScreen`
+(drill-down list → entries → entry) below the breakpoint. The master pane lists
+the sections at rest; selecting a collection pushes its entries in, headed by a
+Back control and a title that switches between collections. A singleton has no
+list, so it opens straight into a pane and the sections stay put.
 
 ```tsx
 import { ThemeProvider, ContentBrowser } from "@gogitcms/design-system";

package/css/tokens.css

@@ -181,6 +181,7 @@
 
   /* Layout dims */
   --sidebar-w: 260px;
+  --master-w: 340px;
   --column-w: 300px;
   --topbar-h: 48px;
   --container: 1200px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gogitcms/design-system",
-  "version": "0.16.0-next.12",
+  "version": "0.16.0-next.14",
   "main": "src/index.ts",
   "types": "src/index.ts",
   "// exports": "The root entry is the react-native source the SPAs, desktop app and mobile app consume. ./web is the plain-DOM build for server-rendered surfaces (the Astro docs site) that don't run react-native-web, and ./css ships the tokens as custom properties. The trailing wildcard keeps deep paths resolvable — plugin bundling and the Vite aliases reach into src/ directly.",

package/src/__tests__/BranchMenu.test.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+import { render, screen, fireEvent, act } from "@testing-library/react";
+import { ThemeProvider } from "../ThemeProvider";
+import { BranchMenu } from "../components/BranchMenu";
+
+const wrap = (ui: React.ReactElement) => <ThemeProvider>{ui}</ThemeProvider>;
+
+// The create form names the branch under the repository's prefix. The prefix is
+// rendered as a fixed part of the field, not a placeholder or a hint, so the
+// author cannot omit it — and the host receives the full name.
+test("a branch prefix is shown read-only and applied to the created name", async () => {
+  const onCreate = jest.fn().mockResolvedValue(undefined);
+  render(wrap(<BranchMenu current="main" branches={[{ id: "1", name: "main" }]} prefix="cms/" onCreate={onCreate} />));
+
+  fireEvent.click(screen.getByTestId("branch-menu"));
+  fireEvent.click(screen.getByTestId("branch-create"));
+  expect(screen.getByTestId("branch-create-input-prefix")).toHaveTextContent("cms/");
+
+  fireEvent.change(screen.getByTestId("branch-create-input"), { target: { value: "spring" } });
+  await act(async () => {
+    fireEvent.click(screen.getByTestId("branch-create-submit"));
+  });
+  expect(onCreate).toHaveBeenCalledWith("cms/spring");
+});
+
+test("without a prefix the name is sent as typed", async () => {
+  const onCreate = jest.fn().mockResolvedValue(undefined);
+  render(wrap(<BranchMenu current="main" branches={[{ id: "1", name: "main" }]} onCreate={onCreate} />));
+
+  fireEvent.click(screen.getByTestId("branch-menu"));
+  fireEvent.click(screen.getByTestId("branch-create"));
+  expect(screen.queryByTestId("branch-create-input-prefix")).not.toBeInTheDocument();
+  fireEvent.change(screen.getByTestId("branch-create-input"), { target: { value: "feat/next" } });
+  await act(async () => {
+    fireEvent.click(screen.getByTestId("branch-create-submit"));
+  });
+  expect(onCreate).toHaveBeenCalledWith("feat/next");
+});

package/src/__tests__/ContentBrowser.changes.test.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { render, screen, fireEvent, act } from "@testing-library/react";
+import { render, screen, fireEvent, act, within } from "@testing-library/react";
 import { ThemeProvider } from "../ThemeProvider";
 import { ContentBrowser, type CmsEntry, type CmsNavSection, type ContentBrowserProps } from "../components/ContentBrowser";
 import { MEDIA_NAV_KEY } from "../media";
@@ -57,7 +57,8 @@ const base = {
 test("the changes surface lists changed entries with their status and diff stat", () => {
   render(wrap(<ContentBrowser {...base} />));
 
-  expect(screen.getByTestId("pane-changes")).toBeInTheDocument();
+  // The changed entries are pushed into the master pane, like a collection's.
+  expect(within(screen.getByTestId("pane-master")).getByTestId("entries-list")).toBeInTheDocument();
   expect(screen.getByText("2 changed")).toBeInTheDocument();
 
   // Status letters and line counts come from the entry rows the editor already
@@ -233,13 +234,14 @@ test("the changes nav does not derive Media from the media api", () => {
     sets: [{ name: "images", label: "Images", count: 12 }],
   } as unknown as ContentBrowserProps["media"];
 
-  const { rerender } = render(wrap(<ContentBrowser {...base} surface="edit" media={media} />));
+  // Nothing pushed into the master pane, so the sections are what it shows.
+  const { rerender } = render(wrap(<ContentBrowser {...base} activeNavKey="" surface="edit" media={media} />));
   // The editor derives it: all 12 files, regardless of any comparison.
   expect(screen.getByTestId(`nav-${MEDIA_NAV_KEY}`)).toBeInTheDocument();
 
   // Same media api, changes surface, no media section supplied → no row, because
   // nothing said any asset changed.
-  rerender(wrap(<ContentBrowser {...base} surface="changes" media={media} />));
+  rerender(wrap(<ContentBrowser {...base} activeNavKey="" surface="changes" media={media} />));
   expect(screen.queryByTestId(`nav-${MEDIA_NAV_KEY}`)).not.toBeInTheDocument();
 });
 
@@ -253,7 +255,7 @@ test("the changes nav shows Media when the host reports changed assets", () => {
     { title: "", items: [{ key: MEDIA_NAV_KEY, label: "Media", icon: "image", count: 2 }] },
   ];
 
-  render(wrap(<ContentBrowser {...base} surface="changes" sections={withMedia} media={media} />));
+  render(wrap(<ContentBrowser {...base} activeNavKey="" surface="changes" sections={withMedia} media={media} />));
 
   const row = screen.getByTestId(`nav-${MEDIA_NAV_KEY}`);
   expect(row).toBeInTheDocument();
@@ -284,8 +286,8 @@ test("the changes surface lists changed assets rather than opening the media bro
     ),
   );
 
-  expect(screen.getByTestId("pane-changes")).toBeInTheDocument();
-  expect(screen.queryByTestId("pane-media-sets")).not.toBeInTheDocument();
+  expect(within(screen.getByTestId("pane-master")).getByTestId("entries-list")).toBeInTheDocument();
+  expect(screen.queryByTestId("media-set-list")).not.toBeInTheDocument();
   expect(screen.getByText("public/images/logo.png")).toBeInTheDocument();
   expect(screen.getByText("2 changed")).toBeInTheDocument();
 });
@@ -306,9 +308,12 @@ test("the edit surface is unchanged when no surface is given", () => {
     ),
   );
 
-  // No surface prop → the editor panes, not the changes ones.
-  expect(screen.getByTestId("pane-entries")).toBeInTheDocument();
-  expect(screen.queryByTestId("pane-changes")).not.toBeInTheDocument();
+  // No surface prop → the editor's list (counted as entries), not the
+  // changes one (counted as changed), and document columns beside it.
+  expect(screen.getByTestId("entries-list")).toBeInTheDocument();
+  expect(screen.getByText("2 entries")).toBeInTheDocument();
+  expect(screen.queryByText("2 changed")).not.toBeInTheDocument();
+  expect(screen.getByTestId("pane-detail")).toBeInTheDocument();
   expect(screen.queryByTestId("surface-segment")).not.toBeInTheDocument();
 });
 
@@ -593,7 +598,7 @@ test("override reveals an input and saves the entered value", () => {
   expect(onResolveConflict).toHaveBeenCalledWith(expect.objectContaining({ id: "c1" }), "override", "archived");
 });
 
-test("the sidebar shows a conflict count and the list highlights conflicted rows", () => {
+test("the sections show a conflict count and the list highlights conflicted rows", () => {
   const withConflicts: CmsNavSection[] = [
     { title: "Changed content", items: [{ key: "posts", label: "Blog posts", icon: "newspaper", count: 2, conflicts: 1 }] },
   ];
@@ -601,11 +606,15 @@ test("the sidebar shows a conflict count and the list highlights conflicted rows
     { id: "a", path: "content/blog/git-content.md", title: "Editing content in Git", body: "", status: "M", conflicted: true },
     { id: "b", path: "content/blog/other.md", title: "Other", body: "", status: "M" },
   ];
-  render(wrap(<ContentBrowser {...base} sections={withConflicts} entries={conflictedEntries} />));
+  const { rerender } = render(
+    wrap(<ContentBrowser {...base} activeNavKey="" sections={withConflicts} entries={conflictedEntries} />),
+  );
 
-  // Sidebar: a red conflict pill on the collection.
+  // Sections: a red conflict pill on the collection.
   expect(screen.getByTestId("nav-posts-conflicts")).toHaveTextContent("1");
-  // List: the conflicted row carries a Conflict badge; the clean one doesn't.
+  // List (pushed in once the collection is active): the conflicted row carries
+  // a Conflict badge; the clean one doesn't.
+  rerender(wrap(<ContentBrowser {...base} sections={withConflicts} entries={conflictedEntries} />));
   const badges = screen.getAllByText("Conflict");
   expect(badges.length).toBe(1);
 });

package/src/__tests__/ContentBrowser.contentslot.test.tsx

@@ -27,7 +27,7 @@ const base = {
   userInitials: "ED",
 } as const;
 
-test("contentSlot replaces the list/detail panes and keeps the sidebar", () => {
+test("contentSlot takes the detail region and keeps the sections on screen", () => {
   render(
     wrap(
       <ContentBrowser
@@ -39,15 +39,19 @@ test("contentSlot replaces the list/detail panes and keeps the sidebar", () => {
   // The plugin pane renders the slot…
   expect(screen.getByTestId("pane-plugin")).toBeInTheDocument();
   expect(screen.getByTestId("plugin-screen")).toBeInTheDocument();
-  // …the sidebar (with the plugin link) stays…
-  expect(screen.getByText("Hello plugin")).toBeInTheDocument();
+  // …the master pane stays on the sections, with the plugin's row lit — a
+  // plugin screen has no list to push in…
+  expect(screen.getByTestId("nav-plugin:hello/hello")).toHaveAttribute("aria-current", "page");
   expect(screen.getByText("Posts")).toBeInTheDocument();
-  // …and the entry list/detail panes are gone.
-  expect(screen.queryByTestId("pane-entries")).not.toBeInTheDocument();
+  expect(screen.queryByTestId("master-back")).not.toBeInTheDocument();
+  // …and no entry list or document columns render.
+  expect(screen.queryByTestId("entries-list")).not.toBeInTheDocument();
+  expect(screen.queryByTestId("pane-detail")).not.toBeInTheDocument();
 });
 
 test("without contentSlot the normal panes render", () => {
   render(wrap(<ContentBrowser {...base} activeNavKey="posts" />));
   expect(screen.queryByTestId("pane-plugin")).not.toBeInTheDocument();
-  expect(screen.getByTestId("pane-entries")).toBeInTheDocument();
+  expect(screen.getByTestId("entries-list")).toBeInTheDocument();
+  expect(screen.getByTestId("pane-detail")).toBeInTheDocument();
 });

package/src/__tests__/ContentBrowser.expand.test.tsx

@@ -0,0 +1,170 @@
+import React from "react";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { ThemeProvider } from "../ThemeProvider";
+import {
+  ContentBrowser,
+  type CmsEntry,
+  type CmsNavSection,
+  type EntryField,
+} from "../components/ContentBrowser";
+
+// Force the desktop layout (jsdom reports width 0 → mobile otherwise).
+jest.mock("../ThemeProvider", () => {
+  const actual = jest.requireActual("../ThemeProvider");
+  return { ...actual, useResponsive: () => ({ width: 1300, height: 900, isDesktop: true, isMobile: false }) };
+});
+
+const wrap = (ui: React.ReactElement) => <ThemeProvider>{ui}</ThemeProvider>;
+
+const sections: CmsNavSection[] = [
+  { title: "Content", items: [{ key: "posts", label: "Posts", icon: "newspaper" }] },
+];
+const entries: CmsEntry[] = [
+  { id: "a", path: "posts/a.md", title: "Alpha", body: "" },
+  { id: "b", path: "posts/b.md", title: "Beta", body: "" },
+];
+
+const base = {
+  workspace: { name: "acme/site", initials: "AC", branch: "main", changed: 0 },
+  sections,
+  activeNavKey: "posts",
+  onSelectNav: () => {},
+  entries,
+  userInitials: "ED",
+} as const;
+
+// Shift-click is the "open in a new column" chord, so this leaves two columns.
+const openSecondColumn = () => fireEvent.click(screen.getByText("Beta"), { shiftKey: true });
+
+describe("expanding the master pane", () => {
+  it("takes the whole screen and gives the layout back", () => {
+    render(wrap(<ContentBrowser {...base} />));
+    expect(screen.getByTestId("pane-master")).toBeInTheDocument();
+    expect(screen.getByTestId("pane-detail")).toBeInTheDocument();
+
+    fireEvent.click(screen.getByTestId("master-expand"));
+    expect(screen.getByTestId("pane-master")).toBeInTheDocument();
+    expect(screen.queryByTestId("pane-detail")).not.toBeInTheDocument();
+    // Nothing left to resize against once one pane holds the screen.
+    expect(screen.queryByTestId("resize-master")).not.toBeInTheDocument();
+
+    // The same control, now pointing the other way.
+    const control = screen.getByTestId("master-expand");
+    expect(control).toHaveAttribute("aria-label", "Collapse pane");
+    fireEvent.click(control);
+    expect(screen.getByTestId("pane-detail")).toBeInTheDocument();
+    expect(screen.getByTestId("resize-master")).toBeInTheDocument();
+    expect(screen.getByTestId("master-expand")).toHaveAttribute("aria-label", "Expand pane");
+  });
+
+  it("is offered on the sections too, and stays expanded while a collection is pushed in", () => {
+    const { rerender } = render(wrap(<ContentBrowser {...base} activeNavKey="" entriesEmpty="Choose a collection" onSelectEntry={() => {}} />));
+    expect(screen.getByTestId("nav-posts")).toBeInTheDocument();
+    fireEvent.click(screen.getByTestId("master-expand"));
+    expect(screen.queryByTestId("pane-detail")).not.toBeInTheDocument();
+
+    // The host answers the row press by making the collection active. The
+    // pane the author enlarged is the one the list arrives in, so it holds.
+    rerender(wrap(<ContentBrowser {...base} entriesEmpty="Choose a collection" onSelectEntry={() => {}} />));
+    expect(screen.getByTestId("entries-list")).toBeInTheDocument();
+    expect(screen.queryByTestId("pane-detail")).not.toBeInTheDocument();
+    expect(screen.getByTestId("master-expand")).toHaveAttribute("aria-label", "Collapse pane");
+  });
+
+  it("collapses when a document is opened from it, since the column it opens in was hidden", () => {
+    render(wrap(<ContentBrowser {...base} />));
+    fireEvent.click(screen.getByTestId("master-expand"));
+    expect(screen.queryByTestId("pane-detail")).not.toBeInTheDocument();
+
+    fireEvent.click(screen.getByText("Beta"));
+    expect(screen.getByTestId("pane-detail")).toBeInTheDocument();
+    expect(screen.getByTestId("pane-master")).toBeInTheDocument();
+    expect(screen.getByTestId("column-b")).toBeInTheDocument();
+  });
+
+  it("collapses when a direct item is selected, since it opens in the hidden region", () => {
+    const withSingleton: CmsNavSection[] = [
+      ...sections,
+      { title: "Configure", items: [{ key: "settings", label: "Settings", icon: "settings", direct: true }] },
+    ];
+    const { rerender } = render(
+      wrap(<ContentBrowser {...base} sections={withSingleton} activeNavKey="" entriesEmpty="Choose a collection" onSelectEntry={() => {}} />),
+    );
+    fireEvent.click(screen.getByTestId("master-expand"));
+    expect(screen.queryByTestId("pane-detail")).not.toBeInTheDocument();
+
+    // The host answers the Settings row by making the singleton active.
+    rerender(
+      wrap(<ContentBrowser {...base} sections={withSingleton} activeNavKey="settings" entriesEmpty="Choose a collection" onSelectEntry={() => {}} />),
+    );
+    expect(screen.getByTestId("pane-detail")).toBeInTheDocument();
+    expect(screen.getByTestId("nav-settings")).toHaveAttribute("aria-current", "page");
+  });
+
+  it("collapses when a create starts, since the form opens in the hidden region", () => {
+    const createFields: EntryField[] = [{ name: "title", type: "string", label: "Title", value: "" }];
+    const { rerender } = render(wrap(<ContentBrowser {...base} canCreate onStartCreate={() => {}} />));
+    fireEvent.click(screen.getByTestId("master-expand"));
+    expect(screen.queryByTestId("pane-detail")).not.toBeInTheDocument();
+
+    rerender(
+      wrap(
+        <ContentBrowser
+          {...base}
+          canCreate
+          onStartCreate={() => {}}
+          creating
+          createFields={createFields}
+          onSubmitCreate={() => {}}
+        />
+      )
+    );
+    expect(screen.getByTestId("column-create")).toBeInTheDocument();
+    expect(screen.getByTestId("pane-detail")).toBeInTheDocument();
+  });
+});
+
+describe("expanding a document column", () => {
+  it("hides the master pane and the sibling columns, then restores them", () => {
+    render(wrap(<ContentBrowser {...base} />));
+    openSecondColumn();
+    expect(screen.getByTestId("column-a")).toBeInTheDocument();
+    expect(screen.getByTestId("column-b")).toBeInTheDocument();
+
+    // The first column's control; the second column's disappears with it.
+    fireEvent.click(screen.getAllByTestId("column-expand")[0]);
+    expect(screen.getByTestId("column-a")).toBeInTheDocument();
+    expect(screen.queryByTestId("column-b")).not.toBeInTheDocument();
+    expect(screen.queryByTestId("pane-master")).not.toBeInTheDocument();
+    expect(screen.queryByTestId("resize-master")).not.toBeInTheDocument();
+
+    const control = screen.getByTestId("column-expand");
+    expect(control).toHaveAttribute("aria-label", "Collapse column");
+    fireEvent.click(control);
+    // The hidden columns were never closed — they come back as they were.
+    expect(screen.getByTestId("column-b")).toBeInTheDocument();
+    expect(screen.getByTestId("pane-master")).toBeInTheDocument();
+    expect(screen.getByTestId("resize-master")).toBeInTheDocument();
+  });
+
+  it("has no reorder grip while it is alone on screen", () => {
+    render(wrap(<ContentBrowser {...base} />));
+    openSecondColumn();
+    expect(screen.getByTestId("col-grip-a")).toBeInTheDocument();
+
+    fireEvent.click(screen.getAllByTestId("column-expand")[0]);
+    expect(screen.queryByTestId("col-grip-a")).not.toBeInTheDocument();
+  });
+
+  it("restores the layout when the expanded column is closed", () => {
+    render(wrap(<ContentBrowser {...base} />));
+    openSecondColumn();
+    fireEvent.click(screen.getAllByTestId("column-expand")[0]);
+
+    fireEvent.click(screen.getByTestId("column-close"));
+    expect(screen.getByTestId("pane-master")).toBeInTheDocument();
+    expect(screen.getByTestId("entries-list")).toBeInTheDocument();
+    expect(screen.getByTestId("column-b")).toBeInTheDocument();
+    expect(screen.queryByTestId("column-a")).not.toBeInTheDocument();
+  });
+});

package/src/__tests__/ContentBrowser.forms.test.tsx

@@ -66,20 +66,23 @@ function renderForms(activeNavKey: string, onSelectNav = jest.fn()) {
   return onSelectNav;
 }
 
-// The forms list is a content column, like the documents of a collection or the
-// sets under Media — not the whole area after the sidebar. jsdom computes no
-// layout, so this asserts the mechanism: a fixed width rather than a flex.
-test("the forms list sits in a content column, not the full content area", () => {
+// The forms list is pushed into the master pane, like the documents of a
+// collection or the sets under Media — not the whole area beside it. jsdom
+// computes no layout, so this asserts the mechanism: a fixed width rather than
+// a flex.
+test("the forms list sits in the master pane, not the full content area", () => {
   renderForms(FORMS_NAV_KEY);
 
-  const pane = screen.getByTestId("pane-forms");
+  const pane = screen.getByTestId("pane-master");
   expect(pane).toHaveStyle({ width: "340px" });
-  // A flexing pane is the bug: it would fill everything after the sidebar.
+  // A flexing pane is the bug: it would fill everything.
   expect(pane).not.toHaveStyle({ flexGrow: 1 });
 
-  // Headed like every other content pane, and with the seam that resizes it.
-  expect(screen.getByText("Forms")).toBeInTheDocument();
-  expect(screen.getByTestId("resize-forms")).toBeInTheDocument();
+  // Headed like every other pushed list — Back, the title — with the seam
+  // that resizes it.
+  expect(screen.getByTestId("master-back")).toBeInTheDocument();
+  expect(within(pane).getByText("Forms")).toBeInTheDocument();
+  expect(screen.getByTestId("resize-master")).toBeInTheDocument();
 
   // And the area beside it says what to do, the way Media and Changes do.
   expect(screen.getByTestId("forms-empty")).toBeInTheDocument();
@@ -95,10 +98,11 @@ test("the column lists the forms and opens one through the nav key", () => {
   expect(onSelectNav).toHaveBeenCalledWith(formsNavKey("contact"));
 });
 
-// The other half of the rule: submissions are two levels deeper than a content
-// column can express, so opening a form does hand the whole area to
-// FormsBrowser. Pinned so the fix above is not later applied to both states.
-test("an open form takes the whole content area", async () => {
+// The other half of the rule: submissions are two levels deeper than the
+// master pane can express, so opening a form hands the whole detail region to
+// FormsBrowser. The forms list stays in the master pane so another form is a
+// click away. Pinned so the fix above is not later applied to both states.
+test("an open form takes the whole detail region, the list still beside it", async () => {
   renderForms(formsNavKey("contact"));
   // Let the submissions load settle before asserting, so the empty inbox — not
   // a pending fetch — is what is on screen.
@@ -107,12 +111,14 @@ test("an open form takes the whole content area", async () => {
   const pane = screen.getByTestId("pane-forms");
   expect(pane).not.toHaveStyle({ width: "340px" });
   expect(screen.queryByTestId("forms-empty")).not.toBeInTheDocument();
-  expect(screen.queryByTestId("resize-forms")).not.toBeInTheDocument();
+  // The list of forms is still pushed into the master pane, headed as Forms.
+  expect(within(screen.getByTestId("pane-master")).getByText("Forms")).toBeInTheDocument();
+  expect(screen.getByTestId("form-row-newsletter")).toBeInTheDocument();
 });
 
-// Media, Forms and Changes head their content pane with PaneTitle; a collection
-// heads the same pane with its own header. They have to be the same heading, or
-// the title moves and changes size as you switch between them.
+// Media, Forms, Changes and a collection all head the master pane with the
+// same title. They have to be the same heading, or the title moves and changes
+// size as you switch between them.
 test("the forms heading matches a collection's, not a smaller indented one", () => {
   const { unmount } = render(
     wrap(
@@ -127,8 +133,7 @@ test("the forms heading matches a collection's, not a smaller indented one", ()
       />,
     ),
   );
-  // Scoped to the pane: "Forms" is also the nav item that got us here.
-  const formsHeading = within(screen.getByTestId("pane-forms")).getByText("Forms");
+  const formsHeading = within(screen.getByTestId("pane-master")).getByText("Forms");
   // The heading sits directly in Pane's header row — the row with the pane's
   // height and the rule under it. A padded wrapper of its own in between is
   // what used to push this title a step right of every collection's.
@@ -148,7 +153,7 @@ test("the forms heading matches a collection's, not a smaller indented one", ()
       />,
     ),
   );
-  const collectionHeading = within(screen.getByTestId("pane-entries")).getByText("Posts");
+  const collectionHeading = within(screen.getByTestId("pane-master")).getByText("Posts");
   const collectionStyle = window.getComputedStyle(collectionHeading);
 
   expect(formsStyle.fontSize).toBe(collectionStyle.fontSize);

package/src/__tests__/ContentBrowser.listrow.test.tsx

@@ -0,0 +1,57 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import { ThemeProvider } from "../ThemeProvider";
+import { ContentBrowser, type CmsEntry, type CmsNavSection } from "../components/ContentBrowser";
+
+// Force the desktop layout (jsdom reports width 0 → mobile otherwise).
+jest.mock("../ThemeProvider", () => {
+  const actual = jest.requireActual("../ThemeProvider");
+  return { ...actual, useResponsive: () => ({ width: 1300, height: 900, isDesktop: true, isMobile: false }) };
+});
+
+const wrap = (ui: React.ReactElement) => <ThemeProvider>{ui}</ThemeProvider>;
+
+const sections: CmsNavSection[] = [
+  { title: "Content", items: [{ key: "posts", label: "Posts", icon: "newspaper" }] },
+];
+
+const base = {
+  workspace: { name: "acme/site", initials: "AC", branch: "main", changed: 0 },
+  sections,
+  activeNavKey: "posts",
+  onSelectNav: () => {},
+  userInitials: "ED",
+} as const;
+
+const daysAgo = (n: number) => new Date(Date.now() - n * 24 * 60 * 60 * 1000).toISOString();
+
+test("a list row reads as its title and how long ago it changed", () => {
+  const entries: CmsEntry[] = [
+    { id: "a", path: "posts/a.md", title: "Alpha", body: "", updatedAt: daysAgo(3) },
+  ];
+  render(wrap(<ContentBrowser {...base} entries={entries} />));
+
+  // More than once: the list row, plus the column it auto-opened into.
+  expect(screen.getAllByText("Alpha").length).toBeGreaterThan(0);
+  expect(screen.getByTestId("entry-subtitle")).toHaveTextContent("Updated 3d ago");
+  // The path was what this line used to carry.
+  expect(screen.queryByText("posts/a.md")).not.toBeInTheDocument();
+});
+
+test("falls back to the path when the host tracks no timestamp", () => {
+  // The changes surface builds its rows from a diff, where the file is the
+  // subject and there is no document timestamp to show.
+  const entries: CmsEntry[] = [{ id: "a", path: "posts/a.md", title: "Alpha", body: "" }];
+  render(wrap(<ContentBrowser {...base} entries={entries} />));
+
+  expect(screen.getByTestId("entry-subtitle")).toHaveTextContent("posts/a.md");
+});
+
+test("falls back to the path when the timestamp doesn't parse", () => {
+  const entries: CmsEntry[] = [
+    { id: "a", path: "posts/a.md", title: "Alpha", body: "", updatedAt: "not a date" },
+  ];
+  render(wrap(<ContentBrowser {...base} entries={entries} />));
+
+  expect(screen.getByTestId("entry-subtitle")).toHaveTextContent("posts/a.md");
+});