From b28dc01e6be42cd40faeb8acea7683fd261a42a4 Mon Sep 17 00:00:00 2001
From: Gregory Schier <gschier1990@gmail.com>
Date: Sun, 9 Apr 2023 23:15:51 -0700
Subject: [PATCH] Tweak response history

---
 src-web/components/ResponsePane.tsx  | 27 +++++++++++++++++++++------
 src-web/components/core/Dropdown.tsx |  2 +-
 2 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/src-web/components/ResponsePane.tsx b/src-web/components/ResponsePane.tsx
index 51ccedd4..662fdb88 100644
--- a/src-web/components/ResponsePane.tsx
+++ b/src-web/components/ResponsePane.tsx
@@ -111,11 +111,21 @@ export const ResponsePane = memo(function ResponsePane({ style, className }: Pro
             {activeResponse && (
               <HStack alignItems="center" className="w-full">
                 <div className="whitespace-nowrap px-3">
-                  <StatusTag showReason response={activeResponse} />
-                  {activeResponse.elapsed > 0 && <>&nbsp;&bull;&nbsp;{activeResponse.elapsed}ms</>}
-                  {activeResponse.body.length > 0 && (
-                    <>&nbsp;&bull;&nbsp;{(activeResponse.body.length / 1000).toFixed(1)} KB</>
-                  )}
+                  <HStack space={2}>
+                    <StatusTag showReason response={activeResponse} />
+                    {activeResponse.elapsed > 0 && (
+                      <>
+                        <span>&bull;</span>
+                        <span>{activeResponse.elapsed}ms</span>
+                      </>
+                    )}
+                    {activeResponse.body.length > 0 && (
+                      <>
+                        <span>&bull;</span>
+                        <span>{(activeResponse.body.length / 1000).toFixed(1)} KB</span>
+                      </>
+                    )}
+                  </HStack>
                 </div>
 
                 <Dropdown
@@ -133,7 +143,12 @@ export const ResponsePane = memo(function ResponsePane({ style, className }: Pro
                     },
                     { type: 'separator', label: 'History' },
                     ...responses.slice(0, 10).map((r) => ({
-                      label: r.status + ' - ' + r.elapsed + ' ms',
+                      label: (
+                        <HStack space={2}>
+                          <StatusTag className="text-xs" response={r} />
+                          <span>&bull;</span> <span>{r.elapsed}ms</span>
+                        </HStack>
+                      ),
                       leftSlot: activeResponse?.id === r.id ? <Icon icon="check" /> : <></>,
                       onSelect: () => setPinnedResponseId(r.id),
                     })),
diff --git a/src-web/components/core/Dropdown.tsx b/src-web/components/core/Dropdown.tsx
index 05c26bb2..fc58c5f5 100644
--- a/src-web/components/core/Dropdown.tsx
+++ b/src-web/components/core/Dropdown.tsx
@@ -26,7 +26,7 @@ export type DropdownItemSeparator = {
 export type DropdownItem =
   | {
       type?: 'default';
-      label: string;
+      label: ReactNode;
       variant?: 'danger';
       disabled?: boolean;
       hidden?: boolean;