fix: move stream in sidebar to right-side

fern-api · Mar 26, 2024 · 32cc517 · 32cc517
1 parent 0eb140f
commit 32cc517
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 18 deletions.
diff --git a/packages/ui/app/src/commons/HttpMethodTag.tsx b/packages/ui/app/src/commons/HttpMethodTag.tsx
@@ -12,7 +12,7 @@ export declare namespace HttpMethodTag {
 const UnmemoizedHttpMethodTag: React.FC<HttpMethodTag.Props> = ({ method, small = false, className }) => {
     return (
         <span
-            className={cn(className, "uppercase font-mono flex items-center", {
+            className={cn(className, "uppercase font-mono flex items-center leading-none", {
                 ["bg-method-get/10 text-method-get dark:bg-method-get-dark/10 dark:text-method-get-dark"]:
                     method === FdrAPI.api.v1.read.HttpMethod.Get,
                 ["bg-method-post/10 text-method-post dark:bg-method-post-dark/10 dark:text-method-post-dark"]:
@@ -23,11 +23,10 @@ const UnmemoizedHttpMethodTag: React.FC<HttpMethodTag.Props> = ({ method, small
                     method === FdrAPI.api.v1.read.HttpMethod.Put,
                 ["bg-method-patch/10 text-method-patch dark:bg-method-patch-dark/10 dark:text-method-patch-dark"]:
                     method === FdrAPI.api.v1.read.HttpMethod.Patch,
-                ["py-1 px-1.5 rounded-md h-5"]: small,
-                ["py-1 px-2 rounded-lg h-6"]: !small,
+                ["py-1 px-1.5 rounded-md h-5 text-[10px]"]: small,
+                ["py-1 px-2 rounded-lg h-6 text-xs"]: !small,
             })}
             style={{
-                fontSize: small ? "10px" : "12px",
                 lineHeight: 1,
             }}
         >

diff --git a/packages/ui/app/src/commons/withStream.tsx b/packages/ui/app/src/commons/withStream.tsx
@@ -1,17 +1,27 @@
 import cn from "clsx";
-import { ReactNode } from "react";
+import { ReactElement, ReactNode } from "react";
 
-export function withStream(text: ReactNode): ReactNode {
+export function StreamTag({ small = false }: { small?: boolean }): ReactElement {
+    return (
+        <span
+            className={cn(
+                "uppercase font-mono flex items-center leading-none bg-accent-primary/10 dark:bg-accent-primary-dark/10 text-accent-primary dark:text-accent-primary-dark",
+                {
+                    ["py-1 px-1.5 rounded-md h-5 text-[10px]"]: small,
+                    ["py-1 px-2 rounded-lg h-6 text-xs"]: !small,
+                },
+            )}
+        >
+            {"STREAM"}
+        </span>
+    );
+}
+
+export function withStream(text: ReactNode, small?: boolean): ReactNode {
     return (
         <span className="inline-flex items-baseline gap-2">
             <span>{text}</span>
-            <span
-                className={cn(
-                    "uppercase font-mono flex items-center text-xs leading-none bg-accent-primary/10 dark:bg-accent-primary-dark/10 text-accent-primary dark:text-accent-primary-dark p-0.5 rounded-[4px]",
-                )}
-            >
-                {"STREAM"}
-            </span>
+            <StreamTag small={small} />
         </span>
     );
 }
diff --git a/packages/ui/app/src/sidebar/SidebarApiSection.tsx b/packages/ui/app/src/sidebar/SidebarApiSection.tsx
@@ -1,13 +1,13 @@
 import { APIV1Read, DocsV1Read } from "@fern-api/fdr-sdk";
-import { joinUrlSlugs, SidebarNode } from "@fern-ui/fdr-utils";
+import { SidebarNode, joinUrlSlugs } from "@fern-ui/fdr-utils";
 import { ActivityLogIcon } from "@radix-ui/react-icons";
 import cn from "clsx";
 import { isEqual, last, sortBy } from "lodash-es";
 import moment from "moment";
-import { memo, ReactElement, ReactNode, useCallback, useMemo } from "react";
+import { ReactElement, ReactNode, memo, useCallback, useMemo } from "react";
 import { areApiArtifactsNonEmpty } from "../api-page/artifacts/areApiArtifactsNonEmpty";
 import { HttpMethodTag } from "../commons/HttpMethodTag";
-import { withStream } from "../commons/withStream";
+import { StreamTag } from "../commons/withStream";
 import { FernTooltip } from "../components/FernTooltip";
 import { API_ARTIFACTS_TITLE } from "../config";
 import { useNavigationContext } from "../contexts/navigation-context";
@@ -106,13 +106,17 @@ const InnerSidebarApiSection = memo<InnerSidebarApiSectionProps>(function InnerS
                         key={joinUrlSlugs(...item.slug)}
                         slug={item.slug}
                         shallow={shallow}
-                        title={item.apiType === "endpoint" && item.stream ? withStream(item.title) : item.title}
+                        title={item.title}
                         registerScrolledToPathListener={registerScrolledToPathListener}
                         selected={isEqual(item.slug, selectedSlug)}
                         depth={Math.max(0, depth - 1)}
                         rightElement={
                             item.apiType === "endpoint" ? (
-                                HTTP_METHOD_TAGS[item.method]
+                                item.stream ? (
+                                    <StreamTag small />
+                                ) : (
+                                    HTTP_METHOD_TAGS[item.method]
+                                )
                             ) : item.apiType === "websocket" ? (
                                 <FernTooltip content="WebSocket Channel">
                                     <span className="rounded-md font-mono text-xs uppercase leading-none">wss</span>