Improve response history menu (#492)

apps/yaak-client/components/core/DismissibleBanner.tsx

@@ -2,21 +2,26 @@ import type { Color } from "@yaakapp-internal/plugins";
 import type { BannerProps } from "@yaakapp-internal/ui";
 import { Banner } from "@yaakapp-internal/ui";
 import classNames from "classnames";
+import type { MouseEvent } from "react";
 import { useEffect } from "react";
 import { useKeyValue } from "../../hooks/useKeyValue";
 import type { ButtonProps } from "./Button";
 import { Button } from "./Button";
 
+type DismissibleBannerSize = "sm" | "xs";
+
 export function DismissibleBanner({
   children,
   className,
   id,
+  size = "sm",
   onDismiss,
   onShow,
   actions,
   ...props
 }: BannerProps & {
   id: string;
+  size?: DismissibleBannerSize;
   onDismiss?: () => void | Promise<void>;
   onShow?: () => void | Promise<void>;
   actions?: {
@@ -46,17 +51,36 @@ export function DismissibleBanner({
 
   if (!shouldShow) return null;
 
+  const actionSize: ButtonProps["size"] = size === "xs" ? "2xs" : "xs";
+  const stopParentClick = (event: MouseEvent) => {
+    event.preventDefault();
+    event.stopPropagation();
+  };
+
   return (
-    <Banner className={classNames(className, "relative")} {...props}>
+    <Banner
+      className={classNames(
+        className,
+        "relative",
+        size === "xs" && "!px-2 !py-2 text-xs",
+      )}
+      {...props}
+    >
       <div className="@container">
-        <div className="grid gap-2 @[34rem]:grid-cols-[minmax(0,1fr)_auto] @[34rem]:items-center @[34rem]:gap-3">
+        <div
+          className={classNames(
+            "grid @[34rem]:grid-cols-[minmax(0,1fr)_auto] @[34rem]:items-center",
+            size === "xs" ? "gap-1.5 @[34rem]:gap-2" : "gap-2 @[34rem]:gap-3",
+          )}
+        >
           {children}
           <div className="flex flex-wrap gap-1.5 @[34rem]:justify-end">
             <Button
               variant="border"
               color={props.color}
-              size="xs"
-              onClick={() => {
+              size={actionSize}
+              onClick={(event) => {
+                stopParentClick(event);
                 setDismissed(true).catch(console.error);
                 Promise.resolve(onDismiss?.()).catch(console.error);
               }}
@@ -69,8 +93,11 @@ export function DismissibleBanner({
                 key={a.label}
                 variant={a.variant ?? "border"}
                 color={a.color ?? props.color}
-                size="xs"
-                onClick={a.onClick}
+                size={actionSize}
+                onClick={(event) => {
+                  stopParentClick(event);
+                  a.onClick();
+                }}
                 title={a.label}
               >
                 {a.label}

apps/yaak-client/components/core/HttpResponseDurationTag.tsx

@@ -31,7 +31,7 @@ export function HttpResponseDurationTag({ response }: Props) {
   );
 }
 
-function formatMillis(ms: number) {
+export function formatMillis(ms: number) {
   if (ms < 1000) {
     return `${ms} ms`;
   }

apps/yaak-client/components/core/SizeTag.tsx

@@ -1,14 +1,16 @@
 import { formatSize } from "@yaakapp-internal/lib/formatSize";
+import classNames from "classnames";
 
 interface Props {
+  className?: string;
   contentLength: number;
   contentLengthCompressed?: number | null;
 }
 
-export function SizeTag({ contentLength, contentLengthCompressed }: Props) {
+export function SizeTag({ className, contentLength, contentLengthCompressed }: Props) {
   return (
     <span
-      className="font-mono"
+      className={classNames("font-mono", className)}
       title={
         `${contentLength} bytes` +
         (contentLengthCompressed ? `\n${contentLengthCompressed} bytes compressed` : "")