fix: sidebar navigation scrolling bug + housecleaning

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;

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],

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);
+    }
 }

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;

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>
+    );
+}

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,23 +9,14 @@ 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}
             nodeId={node.id}
             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}
         />
     );

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);
+    }
 }

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}

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;
     }