refactor: remove dead layouts, extract shared utilities, and deduplicate docs routes (#1248)

* refactor: remove dead ApiLayout, extract shared loader utilities

- Delete ApiLayout component (unused in production routes)
  - Inline makeBreadcrumbs into ApiRoute.res (its only consumer)
  - Remove test file that only tested the dead component
- Clean up DocsLayout: remove unused makeBreadcrumbs, NavItem/Category
  aliases, and StaticContent module type
- Extract FrontmatterUtils.getField to replace ~150 lines of duplicated
  frontmatter switch blocks across 6 route files
- Extract TocUtils.buildEntries to replace duplicated TOC construction
  logic across 4 route files

* refactor: introduce DocsLayoutRoute for shared NavbarSecondary

Add a React Router layout route that renders <NavbarSecondary /> and
<Outlet />, eliminating the duplicated <NavbarSecondary /> from 7 child
route modules.

- Create app/layouts/DocsLayoutRoute.res as a layout route
- Nest all docs, API, and syntax-lookup routes under the layout
- Remove <NavbarSecondary /> from ApiOverviewRoute, ApiRoute,
  DocsGuidelinesRoute, DocsManualRoute, DocsReactRoute,
  SyntaxLookupRoute, and SyntaxLookupDetailRoute
- DocsOverview remains a flat route (it uses MainLayout, not the
  docs sidebar pattern)

* refactor: inline ApiOverviewLayout into its route

- Move categories data directly into ApiOverviewRoute.res
- Replace <ApiOverviewLayout.Docs> with <DocsLayout categories theme=#Js>
- Update tests to use DocsLayout and MemoryRouter
- Delete src/layouts/ApiOverviewLayout.res and .resi

* refactor: rename LandingPageLayout to LandingPage

Move from src/layouts/ to src/components/ since it is a self-contained
page component, not a layout wrapper. It does not accept children and
does not provide structural wrapping like the other layouts do.

* refactor: consolidate dual sidebar into DocsLayout

DocsLayout now owns both the desktop sidebar (via SidebarLayout.Sidebar)
and the mobile sidebar (via NavbarTertiary dialog). Routes pass data
instead of constructing sidebar JSX inline.

- Add ~breadcrumbs and ~editHref props to DocsLayout
- DocsLayout renders NavbarTertiary internally with mobile sidebar
- Simplify DocsManualRoute, DocsReactRoute, ApiOverviewRoute, and
  DocsGuidelinesRoute by removing ~30 lines of duplicated sidebar
  construction and NavbarTertiary rendering from each
- ApiRoute is unchanged (uses a different sidebar structure)
- CommunityRoute is unchanged (already handles both sidebars internally)

* fix: update tests for DocsLayout NavbarTertiary integration

DocsLayout now renders NavbarTertiary internally, which creates a mobile
sidebar dialog. This caused two test issues:

- Duplicate element matches: sidebar text appeared in both the desktop
  sidebar and the mobile dialog. Fixed by scoping queries to the
  sidebar-content testId.
- Screenshot dimension mismatches: NavbarTertiary adds height to the
  rendered layout. Regenerated all affected reference screenshots.

Also fixed BrowserRouter -> MemoryRouter in DocsLayout tests per project
conventions.

* fix: extract DocsSidebar component, keep NavbarTertiary in routes

The previous approach of rendering NavbarTertiary inside DocsLayout
placed it in the wrong DOM position (inside the layout content area
instead of above it), causing visual bugs on mobile and desktop.

Fix by reverting DocsLayout to a simple SidebarLayout wrapper and
extracting the duplicated mobile sidebar JSX into a shared DocsSidebar
component. Routes keep rendering NavbarTertiary at the correct position
(above DocsLayout) but use DocsSidebar to avoid the 25-line copy-paste.

- Create src/components/DocsSidebar.res with shared sidebar content
- Revert DocsLayout to pre-NavbarTertiary state (remove breadcrumbs,
  editHref props and NavbarTertiary rendering)
- Update DocsManualRoute, DocsReactRoute, ApiOverviewRoute, and
  DocsGuidelinesRoute to use DocsSidebar with NavbarTertiary
- Scope ApiOverviewLayout test sidebar queries to sidebar-content
  testId to avoid matching pagination links
- Regenerate reference screenshots

Author: jderochervlk

__tests__/ApiLayout_.test.res

@@ -1,35 +1,54 @@
 open ReactRouter
 open Vitest
 
+let categories: array<SidebarLayout.Sidebar.Category.t> = [
+  {
+    name: "Overview",
+    items: [
+      {name: "Introduction", href: "/docs/manual/api"},
+      {name: "Stdlib", href: "/docs/manual/api/stdlib"},
+    ],
+  },
+  {
+    name: "Additional Libraries",
+    items: [
+      {name: "Belt", href: "/docs/manual/api/belt"},
+      {name: "Dom", href: "/docs/manual/api/dom"},
+    ],
+  },
+]
+
 test("desktop API overview shows sidebar categories and content", async () => {
   await viewport(1440, 900)
 
   let screen = await render(
-    <BrowserRouter>
+    <MemoryRouter initialEntries=["/docs/manual/api"]>
       <div dataTestId="api-overview-wrapper">
-        <ApiOverviewLayout.Docs>
+        <DocsLayout categories theme=#Js>
           <div> {React.string("API documentation content.")} </div>
-        </ApiOverviewLayout.Docs>
+        </DocsLayout>
       </div>
-    </BrowserRouter>,
+    </MemoryRouter>,
   )
 
-  let overview = await screen->getByText("Overview")
+  let sidebar = await screen->getByTestId("sidebar-content")
+
+  let overview = await sidebar->getByText("Overview")
   await element(overview)->toBeVisible
 
-  let introduction = await screen->getByText("Introduction")
+  let introduction = await sidebar->getByText("Introduction")
   await element(introduction)->toBeVisible
 
-  let stdlib = await screen->getByText("Stdlib")
+  let stdlib = await sidebar->getByText("Stdlib")
   await element(stdlib)->toBeVisible
 
-  let additionalLibraries = await screen->getByText("Additional Libraries")
+  let additionalLibraries = await sidebar->getByText("Additional Libraries")
   await element(additionalLibraries)->toBeVisible
 
-  let belt = await screen->getByText("Belt")
+  let belt = await sidebar->getByText("Belt")
   await element(belt)->toBeVisible
 
-  let dom = await screen->getByText("Dom")
+  let dom = await sidebar->getByText("Dom")
   await element(dom)->toBeVisible
 
   let mainContent = await screen->getByTestId("side-layout-children")
@@ -43,22 +62,24 @@ test("mobile API overview hides sidebar", async () => {
   await viewport(600, 1200)
 
   let screen = await render(
-    <BrowserRouter>
+    <MemoryRouter initialEntries=["/docs/manual/api"]>
       <div dataTestId="api-overview-wrapper">
-        <ApiOverviewLayout.Docs>
+        <DocsLayout categories theme=#Js>
           <div> {React.string("API documentation content.")} </div>
-        </ApiOverviewLayout.Docs>
+        </DocsLayout>
       </div>
-    </BrowserRouter>,
+    </MemoryRouter>,
   )
 
-  let introduction = await screen->getByText("Introduction")
+  let sidebar = await screen->getByTestId("sidebar-content")
+
+  let introduction = await sidebar->getByText("Introduction")
   await element(introduction)->notToBeVisible
 
-  let stdlib = await screen->getByText("Stdlib")
+  let stdlib = await sidebar->getByText("Stdlib")
   await element(stdlib)->notToBeVisible
 
-  let belt = await screen->getByText("Belt")
+  let belt = await sidebar->getByText("Belt")
   await element(belt)->notToBeVisible
 
   let wrapper = await screen->getByTestId("api-overview-wrapper")
@@ -69,16 +90,16 @@ test("desktop API overview shows all category items", async () => {
   await viewport(1440, 900)
 
   let screen = await render(
-    <BrowserRouter>
+    <MemoryRouter initialEntries=["/docs/manual/api"]>
       <div dataTestId="api-overview-wrapper">
-        <ApiOverviewLayout.Docs>
+        <DocsLayout categories theme=#Js>
           <div>
             <Markdown.H1> {React.string("API Reference")} </Markdown.H1>
             <Markdown.P> {React.string("Welcome to the ReScript API documentation.")} </Markdown.P>
           </div>
-        </ApiOverviewLayout.Docs>
+        </DocsLayout>
       </div>
-    </BrowserRouter>,
+    </MemoryRouter>,
   )
 
   let apiTitle = await screen->getByText("API Reference")
@@ -95,16 +116,18 @@ test("tablet API overview", async () => {
   await viewport(900, 900)
 
   let screen = await render(
-    <BrowserRouter>
+    <MemoryRouter initialEntries=["/docs/manual/api"]>
       <div dataTestId="api-overview-wrapper">
-        <ApiOverviewLayout.Docs>
+        <DocsLayout categories theme=#Js>
           <div> {React.string("API documentation content.")} </div>
-        </ApiOverviewLayout.Docs>
+        </DocsLayout>
       </div>
-    </BrowserRouter>,
+    </MemoryRouter>,
   )
 
-  let overview = await screen->getByText("Overview")
+  let sidebar = await screen->getByTestId("sidebar-content")
+
+  let overview = await sidebar->getByText("Overview")
   await element(overview)->toBeVisible
 
   let wrapper = await screen->getByTestId("api-overview-wrapper")

__tests__/ApiOverviewLayout_.test.res

@@ -32,13 +32,13 @@ test("desktop docs layout shows sidebar with categories", async () => {
   await viewport(1440, 900)
 
   let screen = await render(
-    <BrowserRouter>
+    <MemoryRouter initialEntries=["/docs/manual/introduction"]>
       <div dataTestId="docs-layout-wrapper">
         <DocsLayout categories=mockCategories activeToc=mockToc>
           <div> {React.string("This is the documentation content.")} </div>
         </DocsLayout>
       </div>
-    </BrowserRouter>,
+    </MemoryRouter>,
   )
 
   let overviewHeading = await screen->getByText("Overview")
@@ -61,13 +61,13 @@ test("desktop docs layout shows table of contents entries", async () => {
   await viewport(1440, 900)
 
   let screen = await render(
-    <BrowserRouter>
+    <MemoryRouter initialEntries=["/docs/manual/introduction"]>
       <div dataTestId="docs-layout-wrapper">
         <DocsLayout categories=mockCategories activeToc=mockToc>
           <div> {React.string("This is the documentation content.")} </div>
         </DocsLayout>
       </div>
-    </BrowserRouter>,
+    </MemoryRouter>,
   )
 
   // The TOC entries render inside the sidebar under the active nav item.
@@ -88,13 +88,13 @@ test("mobile docs layout hides sidebar by default", async () => {
   await viewport(600, 1200)
 
   let screen = await render(
-    <BrowserRouter>
+    <MemoryRouter initialEntries=["/docs/manual/introduction"]>
       <div dataTestId="docs-layout-wrapper">
         <DocsLayout categories=mockCategories activeToc=mockToc>
           <div> {React.string("This is the documentation content.")} </div>
         </DocsLayout>
       </div>
-    </BrowserRouter>,
+    </MemoryRouter>,
   )
 
   let introItem = await screen->getByText("Introduction")