From 8536bfeba3629beb03183196246e64fa72047ac9 Mon Sep 17 00:00:00 2001
From: Andrew Jiang <andrew@buildwithfern.com>
Date: Thu, 10 Oct 2024 13:48:50 -0400
Subject: [PATCH 1/2] fix: sidebar navigation scrolling bug + housecleaning
 (#1638)

---
 .../ui/app/src/sidebar/DismissableSidebar.tsx |  2 +-
 packages/ui/app/src/sidebar/SidebarLink.tsx   |  5 +-
 .../src/sidebar/nodes/SidebarApiGroupNode.tsx | 18 -----
 .../sidebar/nodes/SidebarApiPackageChild.tsx  | 32 ++++++---
 .../sidebar/nodes/SidebarApiPackageNode.tsx   | 41 ++---------
 .../nodes/SidebarGroupApiReferenceNode.tsx    | 22 ++++++
 .../app/src/sidebar/nodes/SidebarLinkNode.tsx | 12 +---
 .../sidebar/nodes/SidebarNavigationChild.tsx  | 35 +++++----
 .../app/src/sidebar/nodes/SidebarPageNode.tsx | 12 +++-
 .../nodes/SidebarRootApiPackageNode.tsx       | 32 +++------
 .../nodes/SidebarRootApiReferenceNode.tsx     | 57 ---------------
 .../src/sidebar/nodes/SidebarRootChild.tsx    | 24 +++++++
 .../src/sidebar/nodes/SidebarRootHeading.tsx  | 36 ++++------
 .../app/src/sidebar/nodes/SidebarRootNode.tsx | 72 +++++++++++++------
 .../sidebar/nodes/SidebarRootSectionNode.tsx  | 34 ++-------
 .../src/sidebar/nodes/SidebarSectionNode.tsx  | 21 ++----
 packages/ui/app/src/util/scrollToCenter.ts    | 32 ++++++++-
 17 files changed, 222 insertions(+), 265 deletions(-)
 delete mode 100644 packages/ui/app/src/sidebar/nodes/SidebarApiGroupNode.tsx
 create mode 100644 packages/ui/app/src/sidebar/nodes/SidebarGroupApiReferenceNode.tsx
 delete mode 100644 packages/ui/app/src/sidebar/nodes/SidebarRootApiReferenceNode.tsx
 create mode 100644 packages/ui/app/src/sidebar/nodes/SidebarRootChild.tsx

diff --git a/packages/ui/app/src/sidebar/DismissableSidebar.tsx b/packages/ui/app/src/sidebar/DismissableSidebar.tsx
index c5165f3690..cc3df64168 100644
--- a/packages/ui/app/src/sidebar/DismissableSidebar.tsx
+++ b/packages/ui/app/src/sidebar/DismissableSidebar.tsx
@@ -28,7 +28,7 @@ export function DismissableSidebar({ className }: { className?: string }): React
                 set(DESKTOP_SIDEBAR_OPEN_ATOM, (prev) => {
                     if (event.clientX < 20) {
                         return true;
-                    } else if (prev && event.target instanceof HTMLElement) {
+                    } else if (prev && event.target instanceof Node) {
                         return sidebarRef.current?.contains(event.target) ?? false;
                     } else {
                         return false;
diff --git a/packages/ui/app/src/sidebar/SidebarLink.tsx b/packages/ui/app/src/sidebar/SidebarLink.tsx
index a9f8a96393..fa5490351a 100644
--- a/packages/ui/app/src/sidebar/SidebarLink.tsx
+++ b/packages/ui/app/src/sidebar/SidebarLink.tsx
@@ -18,6 +18,7 @@ import {
     useImperativeHandle,
     useRef,
 } from "react";
+import { useCallbackOne } from "use-memo-one";
 import { IS_READY_ATOM, SIDEBAR_SCROLL_CONTAINER_ATOM, useAtomEffect, useCloseMobileSidebar } from "../atoms";
 import { FernLink } from "../components/FernLink";
 import { useHref } from "../hooks/useHref";
@@ -205,10 +206,10 @@ export const SidebarSlugLink = forwardRef<HTMLDivElement, PropsWithChildren<Side
         const closeMobileSidebar = useCloseMobileSidebar();
 
         useAtomEffect(
-            useCallback(
+            useCallbackOne(
                 (get) => {
                     if (props.selected) {
-                        scrollToCenter(get(SIDEBAR_SCROLL_CONTAINER_ATOM), ref.current, !get(IS_READY_ATOM));
+                        scrollToCenter(get.peek(SIDEBAR_SCROLL_CONTAINER_ATOM), ref.current, get.peek(IS_READY_ATOM));
                     }
                 },
                 [props.selected],
diff --git a/packages/ui/app/src/sidebar/nodes/SidebarApiGroupNode.tsx b/packages/ui/app/src/sidebar/nodes/SidebarApiGroupNode.tsx
deleted file mode 100644
index cfbb22a70e..0000000000
--- a/packages/ui/app/src/sidebar/nodes/SidebarApiGroupNode.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import type * as FernNavigation from "@fern-api/fdr-sdk/navigation";
-import { SidebarApiPackageChild } from "./SidebarApiPackageChild";
-
-interface SidebarApiGroupNodeProps {
-    nodeChildren: (FernNavigation.ApiPackageChild | FernNavigation.ChangelogNode)[];
-    shallow: boolean;
-}
-export function SidebarApiGroupNode({ nodeChildren, shallow }: SidebarApiGroupNodeProps): React.ReactElement {
-    return (
-        <ul className="fern-sidebar-group">
-            {nodeChildren.map((child) => (
-                <li key={child.id}>
-                    <SidebarApiPackageChild node={child} depth={0} shallow={shallow} />
-                </li>
-            ))}
-        </ul>
-    );
-}
diff --git a/packages/ui/app/src/sidebar/nodes/SidebarApiPackageChild.tsx b/packages/ui/app/src/sidebar/nodes/SidebarApiPackageChild.tsx
index 8bb27966b2..0da0ef68a5 100644
--- a/packages/ui/app/src/sidebar/nodes/SidebarApiPackageChild.tsx
+++ b/packages/ui/app/src/sidebar/nodes/SidebarApiPackageChild.tsx
@@ -1,5 +1,5 @@
 import type * as FernNavigation from "@fern-api/fdr-sdk/navigation";
-import { visitDiscriminatedUnion } from "@fern-api/ui-core-utils";
+import { UnreachableCaseError } from "ts-essentials";
 import { SidebarApiLeafNode } from "./SidebarApiLeafNode";
 import { SidebarApiPackageNode } from "./SidebarApiPackageNode";
 import { SidebarChangelogNode } from "./SidebarChangelogNode";
@@ -14,14 +14,24 @@ interface SidebarApiPackageChild {
 }
 
 export function SidebarApiPackageChild({ node, depth, shallow }: SidebarApiPackageChild): React.ReactElement {
-    return visitDiscriminatedUnion(node)._visit({
-        page: (node) => <SidebarPageNode node={node} depth={depth} shallow={shallow} />,
-        link: (node) => <SidebarLinkNode node={node} depth={depth} />,
-        endpoint: (node) => <SidebarApiLeafNode node={node} depth={depth} shallow={shallow} />,
-        endpointPair: (node) => <SidebarEndpointPairNode node={node} depth={depth} shallow={shallow} />,
-        webSocket: (node) => <SidebarApiLeafNode node={node} depth={depth} shallow={shallow} />,
-        webhook: (node) => <SidebarApiLeafNode node={node} depth={depth} shallow={shallow} />,
-        apiPackage: (node) => <SidebarApiPackageNode node={node} depth={depth} />,
-        changelog: (node) => <SidebarChangelogNode node={node} depth={depth} />,
-    });
+    switch (node.type) {
+        case "page":
+            return <SidebarPageNode node={node} depth={depth} shallow={shallow} />;
+        case "link":
+            return <SidebarLinkNode node={node} depth={depth} />;
+        case "endpoint":
+            return <SidebarApiLeafNode node={node} depth={depth} shallow={shallow} />;
+        case "endpointPair":
+            return <SidebarEndpointPairNode node={node} depth={depth} shallow={shallow} />;
+        case "webSocket":
+            return <SidebarApiLeafNode node={node} depth={depth} shallow={shallow} />;
+        case "webhook":
+            return <SidebarApiLeafNode node={node} depth={depth} shallow={shallow} />;
+        case "apiPackage":
+            return <SidebarApiPackageNode node={node} depth={depth} />;
+        case "changelog":
+            return <SidebarChangelogNode node={node} depth={depth} />;
+        default:
+            throw new UnreachableCaseError(node);
+    }
 }
diff --git a/packages/ui/app/src/sidebar/nodes/SidebarApiPackageNode.tsx b/packages/ui/app/src/sidebar/nodes/SidebarApiPackageNode.tsx
index ac04752f96..791a872a77 100644
--- a/packages/ui/app/src/sidebar/nodes/SidebarApiPackageNode.tsx
+++ b/packages/ui/app/src/sidebar/nodes/SidebarApiPackageNode.tsx
@@ -1,4 +1,4 @@
-import type * as FernNavigation from "@fern-api/fdr-sdk/navigation";
+import * as FernNavigation from "@fern-api/fdr-sdk/navigation";
 import { useCallback } from "react";
 import {
     useIsApiReferenceShallowLink,
@@ -10,6 +10,8 @@ import {
 import { CollapsibleSidebarGroup } from "../CollapsibleSidebarGroup";
 import { SidebarSlugLink } from "../SidebarLink";
 import { SidebarApiPackageChild } from "./SidebarApiPackageChild";
+import { SidebarGroupApiReferenceNode } from "./SidebarGroupApiReferenceNode";
+import { SidebarPageNode } from "./SidebarPageNode";
 
 export interface SidebarApiPackageNodeProps {
     node: FernNavigation.ApiReferenceNode | FernNavigation.ApiPackageNode;
@@ -35,45 +37,16 @@ export function SidebarApiPackageNode({
         [depth, shallow],
     );
 
-    if (node.children.length === 0) {
-        if (node.overviewPageId == null) {
-            return null;
-        }
-
-        if (node.hidden && !selected) {
-            return null;
-        }
-
-        return (
-            <SidebarSlugLink
-                nodeId={node.id}
-                className={className}
-                slug={node.slug}
-                depth={Math.max(depth - 1, 0)}
-                title={node.title}
-                authed={node.authed}
-                selected={selected}
-                icon={node.icon}
-                hidden={node.hidden}
-                shallow={shallow}
-            />
-        );
+    if (node.children.length === 0 && FernNavigation.hasMarkdown(node)) {
+        return <SidebarPageNode node={node} depth={depth} className={className} shallow={shallow} />;
     }
 
-    if (node.hidden && !childSelected) {
+    if (node.children.length === 0 || (node.hidden && !childSelected)) {
         return null;
     }
 
     if (node.type === "apiReference" && node.hideTitle) {
-        return (
-            <ul className="fern-sidebar-group">
-                {node.children.map((child) => (
-                    <li key={child.id}>
-                        <SidebarApiPackageChild node={child} depth={depth} shallow={shallow} />
-                    </li>
-                ))}
-            </ul>
-        );
+        return <SidebarGroupApiReferenceNode node={node} depth={depth} />;
     }
 
     const showIndicator = childSelected && !expanded;
diff --git a/packages/ui/app/src/sidebar/nodes/SidebarGroupApiReferenceNode.tsx b/packages/ui/app/src/sidebar/nodes/SidebarGroupApiReferenceNode.tsx
new file mode 100644
index 0000000000..4e7cf8a16e
--- /dev/null
+++ b/packages/ui/app/src/sidebar/nodes/SidebarGroupApiReferenceNode.tsx
@@ -0,0 +1,22 @@
+import { FernNavigation } from "@fern-api/fdr-sdk";
+import { useIsApiReferenceShallowLink } from "../../atoms";
+import { SidebarApiPackageChild } from "./SidebarApiPackageChild";
+
+interface SidebarGroupApiReferenceNodeProps {
+    node: FernNavigation.ApiReferenceNode;
+    depth: number;
+}
+
+export function SidebarGroupApiReferenceNode({ node, depth }: SidebarGroupApiReferenceNodeProps): React.ReactElement {
+    const shallow = useIsApiReferenceShallowLink(node);
+
+    return (
+        <ul className="fern-sidebar-group">
+            {node.children.map((child) => (
+                <li key={child.id}>
+                    <SidebarApiPackageChild node={child} depth={depth} shallow={shallow} />
+                </li>
+            ))}
+        </ul>
+    );
+}
diff --git a/packages/ui/app/src/sidebar/nodes/SidebarLinkNode.tsx b/packages/ui/app/src/sidebar/nodes/SidebarLinkNode.tsx
index 6e1109a886..91c3ef4934 100644
--- a/packages/ui/app/src/sidebar/nodes/SidebarLinkNode.tsx
+++ b/packages/ui/app/src/sidebar/nodes/SidebarLinkNode.tsx
@@ -1,6 +1,5 @@
 import type * as FernNavigation from "@fern-api/fdr-sdk/navigation";
 import { OpenNewWindow } from "iconoir-react";
-import { useEffect, useState } from "react";
 import { SidebarLink } from "../SidebarLink";
 
 interface SidebarLinkNodeProps {
@@ -10,12 +9,6 @@ interface SidebarLinkNodeProps {
 }
 
 export function SidebarLinkNode({ node, depth, className }: SidebarLinkNodeProps): React.ReactElement {
-    // TODO: handle this more gracefully, and make this SSG-friendly
-    const [origin, setOrigin] = useState<string>("xxx");
-    useEffect(() => {
-        setOrigin(window.location.origin);
-    }, []);
-
     return (
         <SidebarLink
             icon={node.icon}
@@ -23,10 +16,7 @@ export function SidebarLinkNode({ node, depth, className }: SidebarLinkNodeProps
             className={className}
             depth={Math.max(depth - 1, 0)}
             title={node.title}
-            rightElement={
-                node.url.startsWith("http") &&
-                !node.url.startsWith(origin) && <OpenNewWindow className="size-4 self-center text-faded" />
-            }
+            rightElement={<OpenNewWindow className="size-4 self-center text-faded" />}
             href={node.url}
         />
     );
diff --git a/packages/ui/app/src/sidebar/nodes/SidebarNavigationChild.tsx b/packages/ui/app/src/sidebar/nodes/SidebarNavigationChild.tsx
index 41747ea5f6..f0dbe9650f 100644
--- a/packages/ui/app/src/sidebar/nodes/SidebarNavigationChild.tsx
+++ b/packages/ui/app/src/sidebar/nodes/SidebarNavigationChild.tsx
@@ -1,7 +1,7 @@
 import type * as FernNavigation from "@fern-api/fdr-sdk/navigation";
-import { visitDiscriminatedUnion } from "@fern-api/ui-core-utils";
 import clsx from "clsx";
 import dynamic from "next/dynamic";
+import { UnreachableCaseError } from "ts-essentials";
 import { SidebarApiPackageNode } from "./SidebarApiPackageNode";
 import { SidebarLinkNode } from "./SidebarLinkNode";
 import { SidebarPageNode } from "./SidebarPageNode";
@@ -19,17 +19,24 @@ interface SidebarNavigationChildProps {
 }
 
 export function SidebarNavigationChild({ node, depth, root }: SidebarNavigationChildProps): React.ReactElement {
-    return visitDiscriminatedUnion(node)._visit({
-        apiReference: (apiRef) => <SidebarApiPackageNode node={apiRef} depth={depth} />,
-        section: (section) => (
-            <SidebarSectionNode
-                node={section}
-                depth={depth}
-                className={clsx({ "font-semibold !text-text-default": root })}
-            />
-        ),
-        page: (page) => <SidebarPageNode node={page} depth={depth} />,
-        link: (link) => <SidebarLinkNode node={link} depth={depth} />,
-        changelog: (changelog) => <SidebarChangelogNode node={changelog} depth={depth} />,
-    });
+    switch (node.type) {
+        case "apiReference":
+            return <SidebarApiPackageNode node={node} depth={depth} />;
+        case "section":
+            return (
+                <SidebarSectionNode
+                    node={node}
+                    depth={depth}
+                    className={clsx({ "font-semibold !text-text-default": root })}
+                />
+            );
+        case "page":
+            return <SidebarPageNode node={node} depth={depth} />;
+        case "link":
+            return <SidebarLinkNode node={node} depth={depth} />;
+        case "changelog":
+            return <SidebarChangelogNode node={node} depth={depth} />;
+        default:
+            throw new UnreachableCaseError(node);
+    }
 }
diff --git a/packages/ui/app/src/sidebar/nodes/SidebarPageNode.tsx b/packages/ui/app/src/sidebar/nodes/SidebarPageNode.tsx
index 73cda0fd29..e4cd960e39 100644
--- a/packages/ui/app/src/sidebar/nodes/SidebarPageNode.tsx
+++ b/packages/ui/app/src/sidebar/nodes/SidebarPageNode.tsx
@@ -3,13 +3,20 @@ import { useIsSelectedSidebarNode } from "../../atoms";
 import { SidebarSlugLink } from "../SidebarLink";
 
 interface SidebarPageNodeProps {
-    node: FernNavigation.PageNode;
+    node: FernNavigation.NavigationNodeWithMarkdown;
     depth: number;
     className?: string;
+    linkClassName?: string;
     shallow?: boolean;
 }
 
-export function SidebarPageNode({ node, depth, className, shallow }: SidebarPageNodeProps): React.ReactElement | null {
+export function SidebarPageNode({
+    node,
+    depth,
+    className,
+    linkClassName,
+    shallow,
+}: SidebarPageNodeProps): React.ReactElement | null {
     const selected = useIsSelectedSidebarNode(node.id);
 
     if (node.hidden && !selected) {
@@ -20,6 +27,7 @@ export function SidebarPageNode({ node, depth, className, shallow }: SidebarPage
         <SidebarSlugLink
             nodeId={node.id}
             className={className}
+            linkClassName={linkClassName}
             slug={node.slug}
             depth={Math.max(depth - 1, 0)}
             title={node.title}
diff --git a/packages/ui/app/src/sidebar/nodes/SidebarRootApiPackageNode.tsx b/packages/ui/app/src/sidebar/nodes/SidebarRootApiPackageNode.tsx
index 9f0f2f0861..792f841aa1 100644
--- a/packages/ui/app/src/sidebar/nodes/SidebarRootApiPackageNode.tsx
+++ b/packages/ui/app/src/sidebar/nodes/SidebarRootApiPackageNode.tsx
@@ -1,8 +1,8 @@
-import type * as FernNavigation from "@fern-api/fdr-sdk/navigation";
+import * as FernNavigation from "@fern-api/fdr-sdk/navigation";
 import clsx from "clsx";
-import { useIsApiReferenceShallowLink, useIsChildSelected, useIsSelectedSidebarNode } from "../../atoms";
-import { SidebarSlugLink } from "../SidebarLink";
+import { useIsApiReferenceShallowLink, useIsChildSelected } from "../../atoms";
 import { SidebarApiPackageChild } from "./SidebarApiPackageChild";
+import { SidebarPageNode } from "./SidebarPageNode";
 import { SidebarRootHeading } from "./SidebarRootHeading";
 
 export interface SidebarRootApiPackageNodeProps {
@@ -14,36 +14,22 @@ export function SidebarRootApiPackageNode({
     node,
     className,
 }: SidebarRootApiPackageNodeProps): React.ReactElement | null {
-    const selected = useIsSelectedSidebarNode(node.id);
     const childSelected = useIsChildSelected(node.id);
     const shallow = useIsApiReferenceShallowLink(node);
 
-    if (node.children.length === 0) {
-        if (node.overviewPageId == null) {
-            return null;
-        }
-
-        if (node.hidden && !selected) {
-            return null;
-        }
-
+    if (node.children.length === 0 && FernNavigation.hasMarkdown(node)) {
         return (
-            <SidebarSlugLink
-                nodeId={node.id}
-                linkClassName="font-semibold !text-text-default"
+            <SidebarPageNode
+                node={node}
+                depth={0}
                 className={className}
-                slug={node.slug}
-                title={node.title}
-                selected={selected}
-                icon={node.icon}
-                hidden={node.hidden}
-                authed={node.authed}
+                linkClassName="font-semibold !text-text-default"
                 shallow={shallow}
             />
         );
     }
 
-    if (node.hidden && !childSelected) {
+    if (node.children.length === 0 || (node.hidden && !childSelected)) {
         return null;
     }
 
diff --git a/packages/ui/app/src/sidebar/nodes/SidebarRootApiReferenceNode.tsx b/packages/ui/app/src/sidebar/nodes/SidebarRootApiReferenceNode.tsx
deleted file mode 100644
index 44a6ebe11f..0000000000
--- a/packages/ui/app/src/sidebar/nodes/SidebarRootApiReferenceNode.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import type * as FernNavigation from "@fern-api/fdr-sdk/navigation";
-import { last } from "lodash-es";
-import { ReactElement } from "react";
-import { useIsApiReferenceShallowLink } from "../../atoms";
-import { SidebarApiGroupNode } from "./SidebarApiGroupNode";
-import { SidebarRootApiPackageNode } from "./SidebarRootApiPackageNode";
-
-interface SidebarRootApiReferenceNodeProps {
-    node: FernNavigation.ApiReferenceNode;
-}
-
-type ApiGroupOrSection =
-    | { type: "apiGroup"; children: (FernNavigation.ApiPackageChild | FernNavigation.ChangelogNode)[] }
-    | FernNavigation.ApiPackageNode;
-
-export function SidebarRootApiReferenceNode({ node }: SidebarRootApiReferenceNodeProps): ReactElement {
-    const shallow = useIsApiReferenceShallowLink(node);
-
-    if (!node.hideTitle) {
-        return (
-            <li key={node.id} className="mt-6">
-                <SidebarRootApiPackageNode node={node} />
-            </li>
-        );
-    }
-
-    const groups: ApiGroupOrSection[] = [];
-
-    [...node.children, ...(node.changelog != null ? [node.changelog] : [])].forEach((child) => {
-        if (child.type === "apiPackage") {
-            groups.push(child);
-        } else {
-            const lastGroup = last(groups);
-            if (lastGroup?.type === "apiGroup") {
-                lastGroup.children.push(child);
-            } else {
-                groups.push({ type: "apiGroup", children: [child] });
-            }
-        }
-    });
-
-    return (
-        <>
-            {groups.map((child, idx) =>
-                child.type === "apiPackage" ? (
-                    <li key={idx} className="mt-6">
-                        <SidebarRootApiPackageNode node={child} />
-                    </li>
-                ) : (
-                    <li key={idx} className="mt-6">
-                        <SidebarApiGroupNode nodeChildren={child.children} shallow={shallow} />
-                    </li>
-                ),
-            )}
-        </>
-    );
-}
diff --git a/packages/ui/app/src/sidebar/nodes/SidebarRootChild.tsx b/packages/ui/app/src/sidebar/nodes/SidebarRootChild.tsx
new file mode 100644
index 0000000000..3791e52792
--- /dev/null
+++ b/packages/ui/app/src/sidebar/nodes/SidebarRootChild.tsx
@@ -0,0 +1,24 @@
+import type * as FernNavigation from "@fern-api/fdr-sdk/navigation";
+import { ReactElement } from "react";
+import { UnreachableCaseError } from "ts-essentials";
+import { SidebarGroupNode } from "./SidebarGroupNode";
+import { SidebarRootApiPackageNode } from "./SidebarRootApiPackageNode";
+import { SidebarRootSectionNode } from "./SidebarRootSectionNode";
+
+export interface SidebarRootChildProps {
+    node: FernNavigation.SidebarRootChild | FernNavigation.ApiPackageNode;
+}
+
+export function SidebarRootChild({ node }: SidebarRootChildProps): ReactElement {
+    switch (node.type) {
+        case "sidebarGroup":
+            return <SidebarGroupNode node={node} />;
+        case "apiReference":
+        case "apiPackage":
+            return <SidebarRootApiPackageNode node={node} />;
+        case "section":
+            return <SidebarRootSectionNode node={node} />;
+        default:
+            throw new UnreachableCaseError(node);
+    }
+}
diff --git a/packages/ui/app/src/sidebar/nodes/SidebarRootHeading.tsx b/packages/ui/app/src/sidebar/nodes/SidebarRootHeading.tsx
index 996e8d1d99..adc032857c 100644
--- a/packages/ui/app/src/sidebar/nodes/SidebarRootHeading.tsx
+++ b/packages/ui/app/src/sidebar/nodes/SidebarRootHeading.tsx
@@ -1,9 +1,8 @@
-import type * as FernNavigation from "@fern-api/fdr-sdk/navigation";
+import * as FernNavigation from "@fern-api/fdr-sdk/navigation";
 import { RemoteFontAwesomeIcon } from "@fern-ui/components";
 import clsx from "clsx";
 import { ReactElement } from "react";
-import { useIsSelectedSidebarNode } from "../../atoms";
-import { SidebarSlugLink } from "../SidebarLink";
+import { SidebarPageNode } from "./SidebarPageNode";
 
 interface SidebarRootHeadingProps {
     node: FernNavigation.NavigationNodeSection;
@@ -12,29 +11,22 @@ interface SidebarRootHeadingProps {
 }
 
 export function SidebarRootHeading({ node, className, shallow }: SidebarRootHeadingProps): ReactElement {
-    const selected = useIsSelectedSidebarNode(node.id);
-
-    if (node.overviewPageId == null) {
+    if (FernNavigation.hasMarkdown(node)) {
         return (
-            <div className={clsx("fern-sidebar-heading", className)}>
-                {node.icon != null && <RemoteFontAwesomeIcon icon={node.icon} />}
-                <span className="fern-sidebar-heading-content">{node.title}</span>
-            </div>
+            <SidebarPageNode
+                node={node}
+                depth={0}
+                className={className}
+                linkClassName="font-semibold !text-text-default"
+                shallow={shallow}
+            />
         );
     }
 
     return (
-        <SidebarSlugLink
-            nodeId={node.id}
-            linkClassName="font-semibold !text-text-default"
-            icon={node.icon}
-            className={className}
-            title={node.title}
-            hidden={node.hidden}
-            authed={node.authed}
-            slug={node.slug}
-            selected={selected}
-            shallow={shallow}
-        />
+        <div className={clsx("fern-sidebar-heading", className)}>
+            {node.icon != null && <RemoteFontAwesomeIcon icon={node.icon} />}
+            <span className="fern-sidebar-heading-content">{node.title}</span>
+        </div>
     );
 }
diff --git a/packages/ui/app/src/sidebar/nodes/SidebarRootNode.tsx b/packages/ui/app/src/sidebar/nodes/SidebarRootNode.tsx
index 81e27c44ad..8fe2b83e90 100644
--- a/packages/ui/app/src/sidebar/nodes/SidebarRootNode.tsx
+++ b/packages/ui/app/src/sidebar/nodes/SidebarRootNode.tsx
@@ -1,33 +1,59 @@
-import type * as FernNavigation from "@fern-api/fdr-sdk/navigation";
-import { visitDiscriminatedUnion } from "@fern-api/ui-core-utils";
-import { memo } from "react";
-import { SidebarGroupNode } from "./SidebarGroupNode";
-import { SidebarRootApiReferenceNode } from "./SidebarRootApiReferenceNode";
-import { SidebarRootSectionNode } from "./SidebarRootSectionNode";
+import * as FernNavigation from "@fern-api/fdr-sdk/navigation";
+import { ReactElement, memo } from "react";
+import { SidebarRootChild, SidebarRootChildProps } from "./SidebarRootChild";
 
 interface SidebarRootNodeProps {
     node: FernNavigation.SidebarRootNode | undefined;
 }
 
-export const SidebarRootNode = memo(function SidebarRootNode({ node }: SidebarRootNodeProps): React.ReactElement {
+export const SidebarRootNode = memo(function SidebarRootNode({ node }: SidebarRootNodeProps): ReactElement | null {
+    if (!node) {
+        return null;
+    }
+
+    const children = node.children.flatMap((child): SidebarRootChildProps["node"][] => {
+        if (child.type !== "apiReference" || !child.hideTitle) {
+            return [child];
+        }
+
+        const groups: (FernNavigation.ApiReferenceNode | FernNavigation.ApiPackageNode)[] = [];
+
+        // if the ApiReference is set to `hideTitle=true`, we need to re-group the children
+        // such that the root node appears to contain a collection of api references rather than a single one
+        [...child.children, ...(child.changelog != null ? [child.changelog] : [])].forEach((innerChild) => {
+            if (innerChild.type === "apiPackage") {
+                groups.push(innerChild);
+            } else {
+                let lastGroup = groups[groups.length - 1];
+                if (lastGroup?.type !== "apiReference") {
+                    lastGroup = {
+                        ...child,
+                        // Generate a unique ID for the group
+                        id: FernNavigation.NodeId(`${child.id}-${groups.length}`),
+                        children: [],
+                        changelog: undefined,
+                    };
+                    groups.push(lastGroup);
+                }
+
+                if (innerChild.type === "changelog") {
+                    lastGroup.changelog = innerChild;
+                } else {
+                    lastGroup.children.push(innerChild);
+                }
+            }
+        });
+
+        return groups;
+    });
+
     return (
         <ul className="fern-sidebar-group">
-            {node?.children.map((child) =>
-                visitDiscriminatedUnion(child, "type")._visit({
-                    sidebarGroup: (group) => (
-                        <li key={child.id} className="mt-6">
-                            <SidebarGroupNode node={group} />
-                        </li>
-                    ),
-                    apiReference: (apiRef) => <SidebarRootApiReferenceNode key={child.id} node={apiRef} />,
-                    section: (section) => (
-                        <li key={child.id} className="mt-6">
-                            <SidebarRootSectionNode node={section} />
-                        </li>
-                    ),
-                    _other: () => null,
-                }),
-            )}
+            {children.map((child) => (
+                <li key={child.id} className="mt-6">
+                    <SidebarRootChild node={child} />
+                </li>
+            ))}
         </ul>
     );
 });
diff --git a/packages/ui/app/src/sidebar/nodes/SidebarRootSectionNode.tsx b/packages/ui/app/src/sidebar/nodes/SidebarRootSectionNode.tsx
index 636dd5d342..e9692fed59 100644
--- a/packages/ui/app/src/sidebar/nodes/SidebarRootSectionNode.tsx
+++ b/packages/ui/app/src/sidebar/nodes/SidebarRootSectionNode.tsx
@@ -1,8 +1,8 @@
-import type * as FernNavigation from "@fern-api/fdr-sdk/navigation";
+import * as FernNavigation from "@fern-api/fdr-sdk/navigation";
 import clsx from "clsx";
-import { useIsChildSelected, useIsSelectedSidebarNode } from "../../atoms";
-import { SidebarSlugLink } from "../SidebarLink";
+import { useIsChildSelected } from "../../atoms";
 import { SidebarNavigationChild } from "./SidebarNavigationChild";
+import { SidebarPageNode } from "./SidebarPageNode";
 import { SidebarRootHeading } from "./SidebarRootHeading";
 
 interface SidebarRootSectionNodeProps {
@@ -11,34 +11,14 @@ interface SidebarRootSectionNodeProps {
 }
 
 export function SidebarRootSectionNode({ node, className }: SidebarRootSectionNodeProps): React.ReactElement | null {
-    const selected = useIsSelectedSidebarNode(node.id);
     const childSelected = useIsChildSelected(node.id);
 
-    if (node.children.length === 0) {
-        if (node.overviewPageId == null) {
-            return null;
-        }
-
-        if (node.hidden && !selected) {
-            return null;
-        }
-
-        return (
-            <SidebarSlugLink
-                nodeId={node.id}
-                linkClassName="font-semibold !text-text-default"
-                className={className}
-                slug={node.slug}
-                title={node.title}
-                selected={selected}
-                icon={node.icon}
-                hidden={node.hidden}
-                authed={node.authed}
-            />
-        );
+    // If the node has no children, it is a page node.
+    if (node.children.length === 0 && FernNavigation.hasMarkdown(node)) {
+        return <SidebarPageNode node={node} depth={0} className={className} />;
     }
 
-    if (node.hidden && !childSelected) {
+    if (node.children.length === 0 || (node.hidden && !childSelected)) {
         return null;
     }
 
diff --git a/packages/ui/app/src/sidebar/nodes/SidebarSectionNode.tsx b/packages/ui/app/src/sidebar/nodes/SidebarSectionNode.tsx
index 84f1329b91..19bb34c932 100644
--- a/packages/ui/app/src/sidebar/nodes/SidebarSectionNode.tsx
+++ b/packages/ui/app/src/sidebar/nodes/SidebarSectionNode.tsx
@@ -1,4 +1,4 @@
-import type * as FernNavigation from "@fern-api/fdr-sdk/navigation";
+import * as FernNavigation from "@fern-api/fdr-sdk/navigation";
 import { useCallback } from "react";
 import {
     useIsChildSelected,
@@ -28,24 +28,11 @@ export function SidebarSectionNode({ node, className, depth }: SidebarSectionNod
         [depth],
     );
 
-    if (node.children.length === 0) {
-        if (node.overviewPageId != null) {
-            return (
-                <SidebarPageNode
-                    node={{
-                        ...node,
-                        type: "page",
-                        pageId: node.overviewPageId,
-                    }}
-                    depth={depth}
-                    className={className}
-                />
-            );
-        }
-        return null;
+    if (node.children.length === 0 && FernNavigation.hasMarkdown(node)) {
+        return <SidebarPageNode node={node} depth={depth} className={className} />;
     }
 
-    if (node.hidden && !childSelected) {
+    if (node.children.length === 0 || (node.hidden && !childSelected)) {
         return null;
     }
 
diff --git a/packages/ui/app/src/util/scrollToCenter.ts b/packages/ui/app/src/util/scrollToCenter.ts
index 0339041113..dc44b2e364 100644
--- a/packages/ui/app/src/util/scrollToCenter.ts
+++ b/packages/ui/app/src/util/scrollToCenter.ts
@@ -14,18 +14,44 @@ export function scrollToCenter(
     setTimeout(() => {
         fastdom.clear(stopMeasuring);
         stopMeasuring = fastdom.measure(() => {
+            const offsetTop = getOffsetTopRelativeToScrollContainer(target, scrollContainer);
+
+            // if the target is not a child of the scroll container, bail
+            if (offsetTop == null) {
+                return;
+            }
+
             // if the target is already in view, don't scroll
             if (
-                target.offsetTop >= scrollContainer.scrollTop &&
-                target.offsetTop + target.clientHeight <= scrollContainer.scrollTop + scrollContainer.clientHeight
+                offsetTop >= scrollContainer.scrollTop &&
+                offsetTop + target.clientHeight <= scrollContainer.scrollTop + scrollContainer.clientHeight
             ) {
                 return;
             }
             // if the target is outside of the scroll container, scroll to it (centered)
             scrollContainer.scrollTo({
-                top: target.offsetTop - scrollContainer.clientHeight / 3,
+                top: offsetTop - scrollContainer.clientHeight / 3,
                 behavior: smooth ? "smooth" : "auto",
             });
         });
     }, 0);
 }
+
+function getOffsetTopRelativeToScrollContainer(targetElement: HTMLElement, scrollContainer: HTMLElement) {
+    if (targetElement === scrollContainer) {
+        return 0;
+    }
+
+    if (!scrollContainer.contains(targetElement)) {
+        return undefined;
+    }
+
+    let offsetTop = 0;
+    let currentElement: HTMLElement | null = targetElement;
+    while (currentElement && currentElement !== scrollContainer) {
+        offsetTop += currentElement.offsetTop;
+        currentElement = currentElement.offsetParent as HTMLElement | null;
+    }
+
+    return offsetTop;
+}

From 040cccef0c09cd191b79a025333deabc93a48297 Mon Sep 17 00:00:00 2001
From: Rohin Bhargava <rohinbharg@gmail.com>
Date: Thu, 10 Oct 2024 10:53:58 -0700
Subject: [PATCH 2/2] debug: add debug statement for fdr deploy (#1639)

---
 servers/fdr/src/services/docs-cache/DocsDefinitionCache.ts | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/servers/fdr/src/services/docs-cache/DocsDefinitionCache.ts b/servers/fdr/src/services/docs-cache/DocsDefinitionCache.ts
index 6c82cd24d8..fe105d88f7 100644
--- a/servers/fdr/src/services/docs-cache/DocsDefinitionCache.ts
+++ b/servers/fdr/src/services/docs-cache/DocsDefinitionCache.ts
@@ -248,7 +248,12 @@ export class DocsDefinitionCacheImpl implements DocsDefinitionCache {
 
     private async cacheResponse({ url, value }: { url: URL; value: CachedDocsResponse }): Promise<void> {
         if (this.redisDocsCache) {
-            await this.redisDocsCache.set({ url, value });
+            try {
+                await this.redisDocsCache.set({ url, value });
+            } catch (e) {
+                console.error("failed cache replaceDocsForInstanceId", new Error().stack, JSON.stringify(value).length);
+                throw e;
+            }
         }
         this.localDocsCache.set({ url, value });
     }