feat: summary header

packages/ui/app/package.json

@@ -42,21 +42,23 @@
     "@fern-ui/components": "workspace:*",
     "@fern-ui/fdr-utils": "workspace:*",
     "@fern-ui/fern-docs-mdx": "workspace:*",
+    "@fern-ui/fern-docs-search-ui": "workspace:*",
     "@fern-ui/fern-docs-server": "workspace:*",
     "@fern-ui/fern-docs-syntax-highlighter": "workspace:*",
     "@fern-ui/fern-docs-utils": "workspace:*",
     "@fern-ui/loadable": "workspace:*",
     "@fern-ui/next-seo": "workspace:*",
     "@fern-ui/react-commons": "workspace:*",
     "@fern-ui/search-utils": "workspace:*",
-    "@fern-ui/fern-docs-search-ui": "workspace:*",
     "@inkeep/widgets": "^0.2.288",
     "@next/third-parties": "14.2.9",
     "@radix-ui/colors": "^3.0.0",
     "@radix-ui/react-accordion": "^1.2.1",
     "@radix-ui/react-collapsible": "^1.1.1",
     "@radix-ui/react-dialog": "^1.1.2",
     "@radix-ui/react-popover": "^1.1.2",
+    "@radix-ui/react-popper": "^1.2.0",
+    "@radix-ui/react-portal": "^1.1.2",
     "@radix-ui/react-select": "^2.1.2",
     "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-tabs": "^1.1.1",

packages/ui/app/src/api-reference/endpoints/EndpointContent.tsx

@@ -23,6 +23,7 @@ import { JsonPropertyPath } from "../examples/JsonPropertyPath";
 import { useApiPageCenterElement } from "../useApiPageCenterElement";
 import { EndpointContentHeader } from "./EndpointContentHeader";
 import { EndpointContentLeft, convertNameToAnchorPart } from "./EndpointContentLeft";
+import { EndpointContentSummary } from "./EndpointContentSummary";
 import { useExampleSelection } from "./useExampleSelection";
 
 const EndpointContentCodeSnippets = dynamic(
@@ -251,6 +252,8 @@ export const EndpointContent = memo<EndpointContent.Props>((props) => {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [initialExampleHeight]);
 
+    const summaryRef = useRef<HTMLDivElement>(null);
+
     return (
         <section className="fern-endpoint-content" ref={ref} id={useHref(node.slug)}>
             <div
@@ -261,12 +264,14 @@ export const EndpointContent = memo<EndpointContent.Props>((props) => {
                 <EndpointContentHeader context={context} breadcrumb={breadcrumb} streamToggle={props.streamToggle} />
                 <div className="md:grid md:grid-cols-2 md:gap-8 lg:gap-12">
                     <div
+                        ref={summaryRef}
                         className="flex min-w-0 max-w-content-width flex-1 flex-col pt-8 md:py-8"
                         style={{
                             // TODO: do we still need to set minHeight here?
                             minHeight: `${minHeight}px`,
                         }}
                     >
+                        <EndpointContentSummary context={context} boundary={summaryRef.current} />
                         <EndpointContentLeft
                             context={context}
                             // TODO: remove this code call

packages/ui/app/src/api-reference/endpoints/EndpointContentHeader.tsx

@@ -37,7 +37,7 @@ export const EndpointContentHeader = memo<EndpointContentHeaderProps>(({ context
                 method={endpoint.method}
                 options={endpoint.environments}
                 showEnvironment
-                large
+                size="lg"
             />
         </header>
     );

packages/ui/app/src/api-reference/endpoints/EndpointContentSummary.tsx

@@ -0,0 +1,74 @@
+import { EndpointContext } from "@fern-api/fdr-sdk/api-definition";
+import { AvailabilityBadge, cn } from "@fern-ui/components";
+import * as Popper from "@radix-ui/react-popper";
+import { Portal } from "@radix-ui/react-portal";
+import { forwardRef, useEffect, useRef } from "react";
+import { BgImageGradient } from "../../components/BgImageGradient";
+
+export const EndpointContentSummary = forwardRef<
+    HTMLDivElement,
+    Omit<Popper.PopperContentProps, "ref" | "asChild"> & {
+        context: EndpointContext;
+        boundary: HTMLElement | null;
+    }
+>(({ context, boundary, ...rest }, ref) => {
+    const { endpoint, node } = context;
+    const anchorRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        if (anchorRef.current == null) {
+            return;
+        }
+        const observer = new IntersectionObserver(
+            (entries) => {
+                console.log(entries);
+            },
+            {
+                root: boundary,
+            },
+        );
+
+        observer.observe(anchorRef.current);
+        return () => observer.disconnect();
+    }, [boundary]);
+
+    return (
+        <Popper.Root>
+            <Popper.Anchor className="sticky top-header-height" ref={anchorRef}></Popper.Anchor>
+            <Portal asChild container={boundary}>
+                <Popper.Content
+                    side="bottom"
+                    align="center"
+                    collisionBoundary={boundary}
+                    {...rest}
+                    className={cn(
+                        "backdrop-blur-lg lg:backdrop-blur relative overflow-hidden",
+                        "w-[calc(var(--radix-popper-anchor-width)+64px)]",
+                        "-mx-8",
+                        rest.className,
+                    )}
+                    ref={ref}
+                >
+                    <div className="clipped-background">
+                        <BgImageGradient className="h-screen opacity-60 dark:opacity-80" />
+                    </div>
+                    <div className="mx-8 py-4 border-b border-[var(--grayscale-a5)]">
+                        <span>
+                            <h4 className="fern-page-heading">{node.title}</h4>
+                            {endpoint.availability != null && (
+                                <AvailabilityBadge
+                                    availability={endpoint.availability}
+                                    rounded
+                                    size="sm"
+                                    className="ms-1"
+                                />
+                            )}
+                        </span>
+                    </div>
+                </Popper.Content>
+            </Portal>
+        </Popper.Root>
+    );
+});
+
+EndpointContentSummary.displayName = "EndpointContentSummary";

packages/ui/app/src/api-reference/endpoints/EndpointUrl.tsx

@@ -17,14 +17,14 @@ export declare namespace EndpointUrl {
         environmentId?: ApiDefinition.EnvironmentId;
         options?: APIV1Read.Environment[];
         showEnvironment?: boolean;
-        large?: boolean;
+        size?: "sm" | "md" | "lg";
         className?: string;
     }>;
 }
 
 // TODO: this component needs a refresh
 export const EndpointUrl = React.forwardRef<HTMLDivElement, PropsWithChildren<EndpointUrl.Props>>(function EndpointUrl(
-    { path, method, baseUrl, environmentId, large, className, showEnvironment, options },
+    { path, method, baseUrl, environmentId, size = "md", className, showEnvironment, options },
     parentRef,
 ) {
     const ref = useRef<HTMLDivElement>(null);
@@ -86,7 +86,7 @@ export const EndpointUrl = React.forwardRef<HTMLDivElement, PropsWithChildren<En
 
     return (
         <div ref={ref} className={cn("flex items-center gap-1 pr-2", className)}>
-            <HttpMethodTag method={method} />
+            <HttpMethodTag method={method} size={size === "sm" ? "sm" : "lg"} />
 
             <div className={cn("flex items-center")}>
                 <span
@@ -108,8 +108,8 @@ export const EndpointUrl = React.forwardRef<HTMLDivElement, PropsWithChildren<En
                             >
                                 <span
                                     className={cn("font-mono", {
-                                        "text-xs": !large,
-                                        "text-sm": large,
+                                        "text-xs": size === "sm" || size === "md",
+                                        "text-sm": size === "lg",
                                     })}
                                 >
                                     {showEnvironment && (

packages/ui/components/src/index.ts

@@ -24,6 +24,7 @@ export * from "./FernTextarea";
 export * from "./FernToast";
 export * from "./FernTooltip";
 export * from "./FontAwesomeIcon";
-export * from "./badges/badge";
+export * from "./badges";
+export * from "./cn";
 export * from "./kbd";
 export * from "./util/shared-component-types";