From 45c7a003a068376a53d614643b348ac47f32ba00 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Mon, 14 Jul 2025 07:27:56 +0000
Subject: [PATCH 1/2] Add next page button with dynamic navigation in
 documentation layout

Co-authored-by: joaquim.verges <joaquim.verges@gmail.com>
---
 .../Document/AutoNextPageButton.tsx           | 25 ++++++
 .../components/Document/NextPageButton.tsx    | 16 ++++
 .../src/components/Document/PageFooter.tsx    | 14 +++-
 .../Document/utils/getNextPageFromSidebar.ts  | 80 +++++++++++++++++++
 .../src/components/Layouts/DocLayout.tsx      | 11 ++-
 5 files changed, 142 insertions(+), 4 deletions(-)
 create mode 100644 apps/portal/src/components/Document/AutoNextPageButton.tsx
 create mode 100644 apps/portal/src/components/Document/NextPageButton.tsx
 create mode 100644 apps/portal/src/components/Document/utils/getNextPageFromSidebar.ts

diff --git a/apps/portal/src/components/Document/AutoNextPageButton.tsx b/apps/portal/src/components/Document/AutoNextPageButton.tsx
new file mode 100644
index 00000000000..6b47ef19853
--- /dev/null
+++ b/apps/portal/src/components/Document/AutoNextPageButton.tsx
@@ -0,0 +1,25 @@
+"use client";
+
+import { usePathname } from "next/navigation";
+import type { SidebarLink } from "@/components/others/Sidebar";
+import { NextPageButton } from "./NextPageButton";
+import { getNextPageFromSidebar } from "./utils/getNextPageFromSidebar";
+
+export function AutoNextPageButton({
+  sidebarLinks,
+}: { sidebarLinks: SidebarLink[] }) {
+  const pathname = usePathname();
+
+  // Don't show next button on home page
+  if (pathname === "/") {
+    return null;
+  }
+
+  const nextPage = getNextPageFromSidebar(sidebarLinks, pathname);
+
+  if (!nextPage) {
+    return null;
+  }
+
+  return <NextPageButton href={nextPage.href} name={nextPage.name} />;
+}
diff --git a/apps/portal/src/components/Document/NextPageButton.tsx b/apps/portal/src/components/Document/NextPageButton.tsx
new file mode 100644
index 00000000000..6fe845a6c13
--- /dev/null
+++ b/apps/portal/src/components/Document/NextPageButton.tsx
@@ -0,0 +1,16 @@
+import Link from "next/link";
+import { ArrowRightIcon } from "lucide-react";
+
+export function NextPageButton(props: { href: string; name: string }) {
+  return (
+    <Link
+      className="inline-flex items-center rounded-lg border text-sm duration-200 hover:border-active-border"
+      href={props.href}
+    >
+      <div className="border-r-2 p-2.5 font-semibold">Next: {props.name}</div>
+      <div className="p-2.5">
+        <ArrowRightIcon className="size-5" />
+      </div>
+    </Link>
+  );
+}
diff --git a/apps/portal/src/components/Document/PageFooter.tsx b/apps/portal/src/components/Document/PageFooter.tsx
index e79bd444dca..148ad0d3f9b 100644
--- a/apps/portal/src/components/Document/PageFooter.tsx
+++ b/apps/portal/src/components/Document/PageFooter.tsx
@@ -9,12 +9,22 @@ import { Feedback } from "../others/Feedback";
 import { Subscribe } from "../others/Subscribe";
 import { DocLink } from ".";
 import { AutoEditPageButton } from "./AutoEditPageButton";
+import { AutoNextPageButton } from "./AutoNextPageButton";
+import type { SidebarLink } from "../others/Sidebar";
 
-export function PageFooter(props: { editPageButton?: true }) {
+export function PageFooter(props: {
+  editPageButton?: true;
+  sidebarLinks?: SidebarLink[];
+}) {
   return (
     <footer className="flex flex-col gap-7 pb-20" data-noindex>
       <div className="flex flex-col justify-between gap-7 md:flex-row md:items-center">
-        {props.editPageButton && <AutoEditPageButton />}
+        <div className="flex gap-4">
+          {props.editPageButton && <AutoEditPageButton />}
+          {props.sidebarLinks && (
+            <AutoNextPageButton sidebarLinks={props.sidebarLinks} />
+          )}
+        </div>
         <Feedback />
       </div>
       <div className="h-1 border-t" />
diff --git a/apps/portal/src/components/Document/utils/getNextPageFromSidebar.ts b/apps/portal/src/components/Document/utils/getNextPageFromSidebar.ts
new file mode 100644
index 00000000000..3990cdbd14d
--- /dev/null
+++ b/apps/portal/src/components/Document/utils/getNextPageFromSidebar.ts
@@ -0,0 +1,80 @@
+import type { SidebarLink } from "@/components/others/Sidebar";
+
+export interface NextPageInfo {
+  href: string;
+  name: string;
+}
+
+// Helper function to flatten sidebar links into a linear array
+function flattenSidebarLinks(
+  links: SidebarLink[],
+): Array<{ href: string; name: string }> {
+  const result: Array<{ href: string; name: string }> = [];
+
+  for (const link of links) {
+    if ("separator" in link) {
+      // Skip separators
+      continue;
+    }
+
+    if ("links" in link) {
+      // Handle LinkGroup
+      if (link.href) {
+        result.push({ href: link.href, name: link.name });
+      }
+      // Recursively flatten nested links
+      result.push(...flattenSidebarLinks(link.links));
+    } else {
+      // Handle LinkMeta
+      result.push({ href: link.href, name: link.name });
+    }
+  }
+
+  return result;
+}
+
+// Helper function to check if two paths are the same
+function isSamePage(pathname: string, pathOrHref: string): boolean {
+  try {
+    if (pathOrHref === pathname) {
+      return true;
+    }
+
+    // Handle relative URLs by creating full URLs
+    const currentUrl = new URL(pathname, "http://localhost");
+    const linkUrl = new URL(pathOrHref, "http://localhost");
+
+    return currentUrl.pathname === linkUrl.pathname;
+  } catch {
+    return false;
+  }
+}
+
+export function getNextPageFromSidebar(
+  sidebarLinks: SidebarLink[],
+  currentPathname: string,
+): NextPageInfo | null {
+  // Flatten all sidebar links into a linear array
+  const flatLinks = flattenSidebarLinks(sidebarLinks);
+
+  // Find the current page index
+  const currentIndex = flatLinks.findIndex((link) =>
+    isSamePage(currentPathname, link.href),
+  );
+
+  // If current page is not found or is the last page, return null
+  if (currentIndex === -1 || currentIndex === flatLinks.length - 1) {
+    return null;
+  }
+
+  // Return the next page
+  const nextPage = flatLinks[currentIndex + 1];
+  if (!nextPage) {
+    return null;
+  }
+
+  return {
+    href: nextPage.href,
+    name: nextPage.name,
+  };
+}
diff --git a/apps/portal/src/components/Layouts/DocLayout.tsx b/apps/portal/src/components/Layouts/DocLayout.tsx
index 9d2e78f1df4..ad1b3fdf1f1 100644
--- a/apps/portal/src/components/Layouts/DocLayout.tsx
+++ b/apps/portal/src/components/Layouts/DocLayout.tsx
@@ -25,7 +25,11 @@ type DocLayoutProps = {
 export function DocLayout(props: DocLayoutProps) {
   return (
     <div
-      className={`container relative flex flex-col gap-6 xl:grid ${props.showTableOfContents !== false ? "xl:grid-cols-[280px_820px_1fr]" : "xl:grid-cols-[280px_1100px]"}`}
+      className={`container relative flex flex-col gap-6 xl:grid ${
+        props.showTableOfContents !== false
+          ? "xl:grid-cols-[280px_820px_1fr]"
+          : "xl:grid-cols-[280px_1100px]"
+      }`}
       style={{
         minHeight: "calc(100vh - var(--sticky-top-height))",
       }}
@@ -48,7 +52,10 @@ export function DocLayout(props: DocLayoutProps) {
       >
         <div className="grow xl:mt-6">{props.children}</div>
         <div className="mt-16 xl:mt-20">
-          <PageFooter editPageButton={props.editPageButton} />
+          <PageFooter
+            editPageButton={props.editPageButton}
+            sidebarLinks={props.sideBar.links}
+          />
         </div>
       </main>
       {props.showTableOfContents !== false && <TableOfContentsSideBar />}

From daa92dde9152a13b84befbc8dc3c7de5d30f071e Mon Sep 17 00:00:00 2001
From: Joaquim Verges <joaquim.verges@gmail.com>
Date: Tue, 15 Jul 2025 10:12:17 +1200
Subject: [PATCH 2/2] lint

---
 apps/portal/src/components/Document/AutoNextPageButton.tsx    | 4 +++-
 apps/portal/src/components/Document/NextPageButton.tsx        | 2 +-
 apps/portal/src/components/Document/PageFooter.tsx            | 2 +-
 .../src/components/Document/utils/getNextPageFromSidebar.ts   | 2 +-
 4 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/apps/portal/src/components/Document/AutoNextPageButton.tsx b/apps/portal/src/components/Document/AutoNextPageButton.tsx
index 6b47ef19853..8cb726b5b18 100644
--- a/apps/portal/src/components/Document/AutoNextPageButton.tsx
+++ b/apps/portal/src/components/Document/AutoNextPageButton.tsx
@@ -7,7 +7,9 @@ import { getNextPageFromSidebar } from "./utils/getNextPageFromSidebar";
 
 export function AutoNextPageButton({
   sidebarLinks,
-}: { sidebarLinks: SidebarLink[] }) {
+}: {
+  sidebarLinks: SidebarLink[];
+}) {
   const pathname = usePathname();
 
   // Don't show next button on home page
diff --git a/apps/portal/src/components/Document/NextPageButton.tsx b/apps/portal/src/components/Document/NextPageButton.tsx
index 6fe845a6c13..0e9925ce29a 100644
--- a/apps/portal/src/components/Document/NextPageButton.tsx
+++ b/apps/portal/src/components/Document/NextPageButton.tsx
@@ -1,5 +1,5 @@
-import Link from "next/link";
 import { ArrowRightIcon } from "lucide-react";
+import Link from "next/link";
 
 export function NextPageButton(props: { href: string; name: string }) {
   return (
diff --git a/apps/portal/src/components/Document/PageFooter.tsx b/apps/portal/src/components/Document/PageFooter.tsx
index 148ad0d3f9b..3e059c90287 100644
--- a/apps/portal/src/components/Document/PageFooter.tsx
+++ b/apps/portal/src/components/Document/PageFooter.tsx
@@ -6,11 +6,11 @@ import {
   VideoIcon,
 } from "lucide-react";
 import { Feedback } from "../others/Feedback";
+import type { SidebarLink } from "../others/Sidebar";
 import { Subscribe } from "../others/Subscribe";
 import { DocLink } from ".";
 import { AutoEditPageButton } from "./AutoEditPageButton";
 import { AutoNextPageButton } from "./AutoNextPageButton";
-import type { SidebarLink } from "../others/Sidebar";
 
 export function PageFooter(props: {
   editPageButton?: true;
diff --git a/apps/portal/src/components/Document/utils/getNextPageFromSidebar.ts b/apps/portal/src/components/Document/utils/getNextPageFromSidebar.ts
index 3990cdbd14d..3256a01f4df 100644
--- a/apps/portal/src/components/Document/utils/getNextPageFromSidebar.ts
+++ b/apps/portal/src/components/Document/utils/getNextPageFromSidebar.ts
@@ -1,6 +1,6 @@
 import type { SidebarLink } from "@/components/others/Sidebar";
 
-export interface NextPageInfo {
+interface NextPageInfo {
   href: string;
   name: string;
 }