zudoku 0.1.1-dev.5 → 0.1.1-dev.51

package/src/{app → lib/components}/DevPortal.tsx

@@ -1,25 +1,29 @@
+/* eslint-disable react/destructuring-assignment */
 import { MDXProvider } from "@mdx-js/react";
 import { QueryClientProvider } from "@tanstack/react-query";
 import { memo, Suspense, useEffect, useMemo } from "react";
-import { createBrowserRouter, RouterProvider } from "react-router-dom";
-import { type AuthProvider } from "./authentication/authentication.js";
-import {
-  ComponentsProvider,
-  DEFAULT_COMPONENTS,
-  type ComponentsContextType,
-} from "./components/context/ComponentsContext.js";
-import { DevPortalProvider } from "./components/context/DevPortalProvider.js";
-import { ThemeProvider } from "./components/context/ThemeContext.js";
-import { ViewportAnchorProvider } from "./components/context/ViewportAnchorContext.js";
-import { Layout } from "./components/Layout.js";
 import {
   DevPortalContext,
   queryClient,
   type NavigationItem,
-} from "./core/DevPortalContext.js";
-import { HelmetProvider } from "./core/helmet.js";
-import { isNavigationPlugin, type DevPortalPlugin } from "./core/plugins.js";
-import { MdxComponents, type MdxComponentsType } from "./util/MdxComponents.js";
+} from "../core/DevPortalContext.js";
+import { HelmetProvider } from "../core/helmet.js";
+import { type DevPortalPlugin } from "../core/plugins.js";
+
+import { AuthenticationProvider } from "../authentication/authentication.js";
+import {
+  MdxComponents,
+  type MdxComponentsType,
+} from "../util/MdxComponents.js";
+import {
+  ComponentsProvider,
+  DEFAULT_COMPONENTS,
+  type ComponentsContextType,
+} from "./context/ComponentsContext.js";
+import { DevPortalProvider } from "./context/DevPortalProvider.js";
+import { ThemeProvider } from "./context/ThemeContext.js";
+import { ViewportAnchorProvider } from "./context/ViewportAnchorContext.js";
+import { Router } from "./Router.js";
 
 export const DevPortalSystemPaths = {
   Settings: "/settings",
@@ -37,35 +41,14 @@ export type DevPortalProps = {
     logo: string;
     favicon: string;
   }>;
-  authentication?: AuthProvider;
+  authentication?: AuthenticationProvider;
   navigation: NavigationItem[];
   plugins?: DevPortalPlugin[];
   mdxComponents?: MdxComponentsType;
   overrides?: ComponentsContextType;
 };
 
-const DevPortal = (props: DevPortalProps) => {
-  const router = useMemo(() => {
-    const routes = (props.plugins ?? []).flatMap((plugin) =>
-      isNavigationPlugin(plugin) ? plugin.getRoutes() : [],
-    );
-
-    return createBrowserRouter([
-      {
-        path: "/",
-        element: <Layout />,
-        errorElement: (
-          <Layout>
-            <div className="h-[75vh] flex items-center justify-center">
-              Error, look at the console
-            </div>
-          </Layout>
-        ),
-        children: routes,
-      },
-    ]);
-  }, [props.plugins]);
-
+const DevPortalInner = (props: DevPortalProps) => {
   const components = useMemo(
     () => ({ ...DEFAULT_COMPONENTS, ...props.overrides }),
     [props.overrides],
@@ -97,7 +80,12 @@ const DevPortal = (props: DevPortalProps) => {
                       </div>
                     }
                   >
-                    <RouterProvider router={router} />
+                    <Router
+                      plugins={[
+                        ...(props.plugins ?? []),
+                        ...(props.authentication ? [props.authentication] : []),
+                      ]}
+                    />
                   </Suspense>
                 </ViewportAnchorProvider>
               </ComponentsProvider>
@@ -109,7 +97,7 @@ const DevPortal = (props: DevPortalProps) => {
   );
 };
 
-const MemoDevPortal = memo(DevPortal);
-MemoDevPortal.displayName = "DevPortal";
+const DevPortal = memo(DevPortalInner);
+DevPortal.displayName = "DevPortal";
 
-export default MemoDevPortal;
+export { DevPortal };

package/src/{app → lib}/components/Dialog.tsx

@@ -1,15 +1,15 @@
-import * as React from "react"
-import * as DialogPrimitive from "@radix-ui/react-dialog"
-import { XIcon } from "lucide-react"
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { XIcon } from "lucide-react";
+import * as React from "react";
 import { cn } from "../util/cn.js";
 
-const Dialog = DialogPrimitive.Root
+const Dialog = DialogPrimitive.Root;
 
-const DialogTrigger = DialogPrimitive.Trigger
+const DialogTrigger = DialogPrimitive.Trigger;
 
-const DialogPortal = DialogPrimitive.Portal
+const DialogPortal = DialogPrimitive.Portal;
 
-const DialogClose = DialogPrimitive.Close
+const DialogClose = DialogPrimitive.Close;
 
 const DialogOverlay = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Overlay>,
@@ -19,12 +19,12 @@ const DialogOverlay = React.forwardRef<
     ref={ref}
     className={cn(
       "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className
+      className,
     )}
     {...props}
   />
-))
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 
 const DialogContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
@@ -35,8 +35,8 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
-        className
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg border-border",
+        className,
       )}
       {...props}
     >
@@ -47,36 +47,36 @@ const DialogContent = React.forwardRef<
       </DialogPrimitive.Close>
     </DialogPrimitive.Content>
   </DialogPortal>
-))
-DialogContent.displayName = DialogPrimitive.Content.displayName
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
 
 const DialogHeader = ({
-                        className,
-                        ...props
-                      }: React.HTMLAttributes<HTMLDivElement>) => (
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
   <div
     className={cn(
       "flex flex-col space-y-1.5 text-center sm:text-left",
-      className
+      className,
     )}
     {...props}
   />
-)
-DialogHeader.displayName = "DialogHeader"
+);
+DialogHeader.displayName = "DialogHeader";
 
 const DialogFooter = ({
-                        className,
-                        ...props
-                      }: React.HTMLAttributes<HTMLDivElement>) => (
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
   <div
     className={cn(
       "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
+      className,
     )}
     {...props}
   />
-)
-DialogFooter.displayName = "DialogFooter"
+);
+DialogFooter.displayName = "DialogFooter";
 
 const DialogTitle = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Title>,
@@ -86,12 +86,12 @@ const DialogTitle = React.forwardRef<
     ref={ref}
     className={cn(
       "text-lg font-semibold leading-none tracking-tight",
-      className
+      className,
     )}
     {...props}
   />
-))
-DialogTitle.displayName = DialogPrimitive.Title.displayName
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
 
 const DialogDescription = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Description>,
@@ -102,18 +102,18 @@ const DialogDescription = React.forwardRef<
     className={cn("text-sm text-muted-foreground", className)}
     {...props}
   />
-))
-DialogDescription.displayName = DialogPrimitive.Description.displayName
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
 
 export {
   Dialog,
-  DialogPortal,
-  DialogOverlay,
-  DialogTrigger,
   DialogClose,
   DialogContent,
-  DialogHeader,
+  DialogDescription,
   DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
   DialogTitle,
-  DialogDescription,
-}
+  DialogTrigger,
+};

package/src/{app → lib}/components/Header.tsx

@@ -5,7 +5,7 @@ import { TopNavigation } from "./TopNavigation.js";
 import { useDevPortal } from "./context/DevPortalProvider.js";
 import { useTheme } from "./context/ThemeContext.js";
 
-export const Header = memo(() => {
+export const Header = memo(function HeaderInner() {
   const [isDark, toggleTheme] = useTheme();
   const { isLoggedIn, email } = useDevPortalState();
   const { login, logout, meta } = useDevPortal();
@@ -25,7 +25,7 @@ export const Header = memo(() => {
             </span>
           </div>
           <div className="grid grid-cols-[--sidecar-grid-cols] items-center gap-8">
-            <div className="w-full max-w-prose mx-auto">
+            <div className="w-full max-w-prose">
               <button className="flex items-center border border-input hover:bg-accent hover:text-accent-foreground p-4 relative h-8 justify-start rounded-lg bg-background text-sm text-muted-foreground shadow-none w-40 sm:w-72">
                 <div className="flex items-center gap-2 flex-grow">
                   <SearchIcon size={14} />
@@ -37,9 +37,9 @@ export const Header = memo(() => {
               </button>
             </div>
             <div className="items-center justify-self-end text-sm hidden lg:flex">
-              {!isLoggedIn ? (
+              {isLoggedIn ? (
                 <button
-                  className="cursor-pointer hover:bg-secondary p-1 px-2 mx-2 rounded"
+                  className="cursor-pointer hover:bg-secondary p-1 px-2 mx-2 rounded text-nowrap"
                   onClick={logout}
                 >
                   Logout {email ? `(${email})` : null}

package/src/{app → lib/components}/Heading.tsx

@@ -1,6 +1,6 @@
 import { type ReactNode } from "react";
-import { useRegisterAnchorElement } from "./components/context/ViewportAnchorContext.js";
-import { cn } from "./util/cn.js";
+import { cn } from "../util/cn.js";
+import { useRegisterAnchorElement } from "./context/ViewportAnchorContext.js";
 
 const getComponent = (level: number) => {
   switch (level) {

package/src/{app → lib}/components/Layout.tsx

@@ -3,20 +3,16 @@ import { Outlet, useLocation } from "react-router-dom";
 import { Helmet } from "../core/helmet.js";
 import { useScrollToAnchor } from "../util/useScrollToAnchor.js";
 import { useScrollToTop } from "../util/useScrollToTop.js";
-import { Header } from "./Header.js";
 import { useDevPortal } from "./context/DevPortalProvider.js";
 import { useViewportAnchor } from "./context/ViewportAnchorContext.js";
+import { Header } from "./Header.js";
 import { SideNavigation } from "./navigation/SideNavigation.js";
-import { SideNavigationWrapper } from "./navigation/SideNavigationWrapper.js";
+import { Spinner } from "./Spinner.js";
 
 export const Layout = ({ children }: { children?: ReactNode }) => {
   const location = useLocation();
   const { setActiveAnchor } = useViewportAnchor();
-  const { meta, handleAuthenticationResponse } = useDevPortal();
-
-  useEffect(() => {
-    void handleAuthenticationResponse(location);
-  }, [handleAuthenticationResponse, location]);
+  const { meta } = useDevPortal();
 
   useScrollToAnchor();
   useScrollToTop();
@@ -41,15 +37,25 @@ export const Layout = ({ children }: { children?: ReactNode }) => {
         {meta?.favicon && <link rel="icon" href={meta.favicon} />}
       </Helmet>
       <Header />
-      <div className="max-w-screen-2xl mx-auto pt-[--header-height] px-10 lg:px-12">
+
+      <div className="max-w-screen-2xl mx-auto pt-[--header-height] px-10 lg:px-12 h-full">
         <Suspense
-          fallback={<SideNavigationWrapper>Loading...</SideNavigationWrapper>}
+          fallback={
+            <div className="grid h-full place-items-center">
+              <Spinner />
+            </div>
+          }
         >
           <SideNavigation />
+          <main
+            className="dark:border-white/10 translate-x-0
+          lg:overflow-visible
+          lg:peer-data-[navigation=true]:w-[calc(100%-var(--side-nav-width))]
+          lg:peer-data-[navigation=true]:translate-x-[--side-nav-width] peer-data-[navigation=true]:pl-12"
+          >
+            {children ?? <Outlet />}
+          </main>
         </Suspense>
-        <main className="dark:border-white/10 lg:overflow-visible translate-x-0 lg:w-[calc(100%-var(--side-nav-width))] lg:translate-x-[--side-nav-width] pl-12">
-          {children ?? <Outlet />}
-        </main>
       </div>
     </>
   );

package/src/lib/components/Link.tsx

@@ -0,0 +1 @@
+export { Link } from "../core/router.js";

package/src/lib/components/Router.tsx

@@ -0,0 +1,28 @@
+import { useMemo } from "react";
+import { createBrowserRouter, RouterProvider } from "react-router-dom";
+import { DevPortalPlugin, isNavigationPlugin } from "../core/plugins.js";
+import { Layout } from "./Layout.js";
+
+export function Router({ plugins }: { plugins?: DevPortalPlugin[] }) {
+  const router = useMemo(() => {
+    const routes = (plugins ?? []).flatMap((plugin) =>
+      isNavigationPlugin(plugin) ? plugin.getRoutes() : [],
+    );
+
+    return createBrowserRouter([
+      {
+        path: "/",
+        element: <Layout />,
+        errorElement: (
+          <Layout>
+            <div className="h-[75vh] flex items-center justify-center">
+              Error, look at the console
+            </div>
+          </Layout>
+        ),
+        children: routes,
+      },
+    ]);
+  }, [plugins]);
+  return <RouterProvider router={router} />;
+}

package/src/lib/components/Select.tsx

@@ -0,0 +1,157 @@
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { Check, ChevronDown, ChevronUp } from "lucide-react";
+import * as React from "react";
+import { cn } from "../util/cn.js";
+
+const Select = SelectPrimitive.Root;
+
+const SelectGroup = SelectPrimitive.Group;
+
+const SelectValue = SelectPrimitive.Value;
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+      className,
+    )}
+    {...props}
+  >
+    <span className="truncate">{children}</span>
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown className="flex-shrink-0 h-4 w-4 opacity-50" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className,
+    )}
+    {...props}
+  >
+    <ChevronUp className="h-4 w-4" />
+  </SelectPrimitive.ScrollUpButton>
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className,
+    )}
+    {...props}
+  >
+    <ChevronDown className="h-4 w-4" />
+  </SelectPrimitive.ScrollDownButton>
+));
+SelectScrollDownButton.displayName =
+  SelectPrimitive.ScrollDownButton.displayName;
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = "popper", ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        position === "popper" &&
+          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        className,
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(
+          "p-1",
+          position === "popper" &&
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
+    {...props}
+  />
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className,
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+};

package/src/lib/components/Spinner.tsx

@@ -0,0 +1,5 @@
+import { LoaderCircle } from "lucide-react";
+
+export const Spinner = ({ size = 16 }: { size?: number }) => (
+  <LoaderCircle size={size} className="animate-spin" />
+);

package/src/{app → lib}/components/SyntaxHighlight.tsx

@@ -32,6 +32,7 @@ type SyntaxHighlightProps = {
   noBackground?: boolean;
   wrapLines?: boolean;
   copyable?: boolean;
+  showLanguageIndicator?: boolean;
 } & Omit<HighlightProps, "children">;
 
 export const SyntaxHighlight = ({
@@ -41,6 +42,10 @@ export const SyntaxHighlight = ({
   const [isDark] = useTheme();
   const [isCopied, setIsCopied] = useState(false);
 
+  if (!props.code) {
+    return null;
+  }
+
   return (
     <Highlight theme={isDark ? themes.vsDark : themes.github} {...props}>
       {({ className, style, tokens, getLineProps, getTokenProps }) => (
@@ -77,9 +82,11 @@ export const SyntaxHighlight = ({
               )}
             </button>
           )}
-          <span className="absolute top-1.5 right-3 text-[11px] font-mono text-muted-foreground transition group-hover:opacity-0">
-            {props.language}
-          </span>
+          {props.showLanguageIndicator && (
+            <span className="absolute top-1.5 right-3 text-[11px] font-mono text-muted-foreground transition group-hover:opacity-0">
+              {props.language}
+            </span>
+          )}
           {tokens.map((line, i) => (
             <div key={i} {...getLineProps({ line })}>
               {line.map((token, key) => (

package/src/{app → lib}/components/context/DevPortalProvider.ts

@@ -23,7 +23,7 @@ export const useApiIdentities = () => {
   const { getApiIdentities } = useDevPortal();
   return useSuspenseQuery({
     queryFn: getApiIdentities,
-    queryKey: ["api-keys"],
+    queryKey: ["api-identities"],
   });
 };
 

package/src/lib/components/index.ts

@@ -0,0 +1,3 @@
+export { useMDXComponents } from "@mdx-js/react";
+export { DevPortal } from "./DevPortal.js";
+export { Link } from "./Link.js";

package/src/{app → lib}/components/navigation/SideNavigation.tsx

@@ -9,7 +9,10 @@ export const SideNavigation = () => {
   const navigation = useNavigation();
 
   return (
-    <SideNavigationWrapper ref={navRef}>
+    <SideNavigationWrapper
+      ref={navRef}
+      pushMainContent={navigation.data.items.length > 0}
+    >
       {navigation.data.items.map((category) => (
         <SideNavigationCategory key={category.label} category={category} />
       ))}

package/src/{app → lib}/components/navigation/SideNavigationCategory.tsx

@@ -36,7 +36,7 @@ export const SideNavigationCategory = ({
       open={isOpen}
       onOpenChange={() => setIsOpen((prev) => !prev)}
     >
-      {category.label.length > 0 && (
+      {category.label.length > 0 ? (
         <Collapsible.Trigger asChild={isCollapsible} disabled={!isCollapsible}>
           <h5
             className={cn(
@@ -53,6 +53,8 @@ export const SideNavigationCategory = ({
             )}
           </h5>
         </Collapsible.Trigger>
+      ) : (
+        "Endpoints"
       )}
       <Collapsible.Content className="CollapsibleContent -mx-[--padding-nav-item]">
         {/* margin on Collapsible.Content will lead jumpiness when animating because it's not added to the calculated height */}