UI: Redesign TOC popover

.changeset/tough-mayflies-tan.md

@@ -0,0 +1,5 @@
+---
+'fumadocs-ui': patch
+---
+
+Redesign TOC popover

.changeset/twenty-maps-remember.md

@@ -0,0 +1,5 @@
+---
+'fumadocs-openapi': patch
+---
+
+Support generating files per operation

packages/ui/src/components/layout/toc.tsx

@@ -1,4 +1,4 @@
-import { Text } from 'lucide-react';
+import { ArrowRight, Text } from 'lucide-react';
 import type { TOCItemType } from 'fumadocs-core/server';
 import * as Primitive from 'fumadocs-core/toc-internal';
 import {
@@ -61,11 +61,13 @@ export function TocPopover({
   return (
     <Popover>
       <PopoverTrigger {...props}>
-        <Text className="size-3" />
+        <Text className="size-4" />
         {text.toc}
+        <ArrowRight className="ms-auto size-4 text-muted-foreground" />
       </PopoverTrigger>
       <PopoverContent
         hideWhenDetached
+        alignOffset={16}
         align="start"
         side="bottom"
         className="flex max-h-[80vh] w-[260px] flex-col gap-4 p-3"

packages/ui/src/components/roll-button.tsx

@@ -56,7 +56,7 @@ export function RollButton({
         buttonVariants({
           color: 'secondary',
           className:
-            'fixed top-16 [&_svg]:size-4 gap-1 left-1/2 translate-x-[-50%] z-10 shadow-md rounded-full transition-all md:top-4',
+            'fixed top-20 [&_svg]:size-4 gap-1 left-1/2 translate-x-[-50%] z-10 shadow-md rounded-full transition-all md:top-6',
         }),
         !show && 'translate-y-20 opacity-0',
       )}

packages/ui/src/layout.tsx

@@ -176,7 +176,6 @@ export function DocsLayout({
                     </LinksMenu>
                   )}
                 </div>
-
                 {sidebar.banner}
               </>
             }

packages/ui/src/page.tsx

@@ -76,19 +76,22 @@ export function DocsPage({
   return (
     <TocProvider toc={toc}>
       <div className="flex min-w-0 flex-1 flex-col">
-        {replaceOrDefault(
-          tableOfContentPopover,
-          <TocPopover
-            items={toc}
-            header={tableOfContentPopover.header}
-            footer={tableOfContentPopover.footer}
-            className={cn(
-              'sticky top-12 z-10 inline-flex items-center gap-2 bg-background/60 p-3 text-left text-xs text-muted-foreground backdrop-blur-md transition-colors max-md:px-4 md:top-2 md:me-2 md:ms-auto md:rounded-md md:border',
-              'hover:text-accent-foreground md:hover:bg-accent',
-              !full && 'lg:hidden',
-            )}
-          />,
-        )}
+        <div
+          className={cn(
+            'sticky top-12 z-10 -mb-4 border-b bg-background/60 text-sm font-medium backdrop-blur-md md:top-0 md:bg-card',
+            !full && 'lg:hidden',
+          )}
+        >
+          {replaceOrDefault(
+            tableOfContentPopover,
+            <TocPopover
+              items={toc}
+              header={tableOfContentPopover.header}
+              footer={tableOfContentPopover.footer}
+              className="inline-flex items-center gap-2 px-4 py-2 text-left max-md:size-full md:ps-6"
+            />,
+          )}
+        </div>
         <article
           className={cn(
             'mx-auto flex w-full max-w-[840px] flex-1 flex-col gap-6 px-4 pt-10 md:px-6 md:pt-12',