From bb1ba9367653a5119d36c6a86ec8e79e51f871bf Mon Sep 17 00:00:00 2001
From: Gregory Schier <gschier1990@gmail.com>
Date: Wed, 2 Oct 2024 11:22:20 -0700
Subject: [PATCH] Better KeyValueRow sizing

---
 src-web/components/RequestPane.tsx      | 13 +++++++------
 src-web/components/ResponsePane.tsx     | 11 ++++++-----
 src-web/components/core/KeyValueRow.tsx | 10 ++++++----
 3 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/src-web/components/RequestPane.tsx b/src-web/components/RequestPane.tsx
index 0f6b1db6..2cbe8c9f 100644
--- a/src-web/components/RequestPane.tsx
+++ b/src-web/components/RequestPane.tsx
@@ -2,12 +2,12 @@ import type { HttpRequest, HttpRequestHeader, HttpUrlParameter } from '@yaakapp-
 import classNames from 'classnames';
 import type { CSSProperties } from 'react';
 import React, { memo, useCallback, useMemo, useState } from 'react';
-import { createGlobalState } from 'react-use';
+import { useLocalStorage } from 'react-use';
 import { useCancelHttpResponse } from '../hooks/useCancelHttpResponse';
 import { useContentTypeFromHeaders } from '../hooks/useContentTypeFromHeaders';
 import { useImportCurl } from '../hooks/useImportCurl';
-import { useIsResponseLoading } from '../hooks/useIsResponseLoading';
 import { useImportQuerystring } from '../hooks/useImportQuerystring';
+import { useIsResponseLoading } from '../hooks/useIsResponseLoading';
 import { usePinnedHttpResponse } from '../hooks/usePinnedHttpResponse';
 import { useRequestEditor, useRequestEditorEvent } from '../hooks/useRequestEditor';
 import { useRequests } from '../hooks/useRequests';
@@ -55,8 +55,6 @@ interface Props {
   activeRequest: HttpRequest;
 }
 
-const useActiveTab = createGlobalState<Record<string, string>>({});
-
 const TAB_BODY = 'body';
 const TAB_PARAMS = 'params';
 const TAB_HEADERS = 'headers';
@@ -73,7 +71,10 @@ export const RequestPane = memo(function RequestPane({
   const requests = useRequests();
   const activeRequestId = activeRequest.id;
   const updateRequest = useUpdateAnyHttpRequest();
-  const [activeTabs, setActiveTabs] = useActiveTab();
+  const [activeTabs, setActiveTabs] = useLocalStorage<Record<string, string>>(
+    'requestPaneActiveTabs',
+    {},
+  );
   const [forceUpdateHeaderEditorKey, setForceUpdateHeaderEditorKey] = useState<number>(0);
   const { updateKey: forceUpdateKey } = useRequestUpdateKey(activeRequest.id ?? null);
   const [{ urlKey }] = useRequestEditor();
@@ -299,7 +300,7 @@ export const RequestPane = memo(function RequestPane({
   const importCurl = useImportCurl();
   const importQuerystring = useImportQuerystring(activeRequestId);
 
-  const activeTab = activeTabs[activeRequestId] ?? DEFAULT_TAB;
+  const activeTab = activeTabs?.[activeRequestId] ?? DEFAULT_TAB;
   const setActiveTab = useCallback(
     (tab: string) => {
       setActiveTabs((r) => ({ ...r, [activeRequest.id]: tab }));
diff --git a/src-web/components/ResponsePane.tsx b/src-web/components/ResponsePane.tsx
index cf5e94a3..d4de71ec 100644
--- a/src-web/components/ResponsePane.tsx
+++ b/src-web/components/ResponsePane.tsx
@@ -2,7 +2,7 @@ import type { HttpRequest } from '@yaakapp-internal/models';
 import classNames from 'classnames';
 import type { CSSProperties } from 'react';
 import { memo, useCallback, useMemo } from 'react';
-import { createGlobalState } from 'react-use';
+import { useLocalStorage } from 'react-use';
 import { useContentTypeFromHeaders } from '../hooks/useContentTypeFromHeaders';
 import { usePinnedHttpResponse } from '../hooks/usePinnedHttpResponse';
 import { useResponseViewMode } from '../hooks/useResponseViewMode';
@@ -34,8 +34,6 @@ interface Props {
   activeRequest: HttpRequest;
 }
 
-const useActiveTab = createGlobalState<Record<string, string>>({});
-
 const TAB_BODY = 'body';
 const TAB_HEADERS = 'headers';
 const TAB_INFO = 'info';
@@ -44,9 +42,12 @@ const DEFAULT_TAB = TAB_BODY;
 export const ResponsePane = memo(function ResponsePane({ style, className, activeRequest }: Props) {
   const { activeResponse, setPinnedResponseId, responses } = usePinnedHttpResponse(activeRequest);
   const [viewMode, setViewMode] = useResponseViewMode(activeResponse?.requestId);
-  const [activeTabs, setActiveTabs] = useActiveTab();
+  const [activeTabs, setActiveTabs] = useLocalStorage<Record<string, string>>(
+    'responsePaneActiveTabs',
+    {},
+  );
   const contentType = useContentTypeFromHeaders(activeResponse?.headers ?? null);
-  const activeTab = activeTabs[activeRequest.id] ?? DEFAULT_TAB;
+  const activeTab = activeTabs?.[activeRequest.id] ?? DEFAULT_TAB;
   const setActiveTab = useCallback(
     (tab: string) => {
       setActiveTabs((r) => ({ ...r, [activeRequest.id]: tab }));
diff --git a/src-web/components/core/KeyValueRow.tsx b/src-web/components/core/KeyValueRow.tsx
index f4f2e7c7..0ae9ab85 100644
--- a/src-web/components/core/KeyValueRow.tsx
+++ b/src-web/components/core/KeyValueRow.tsx
@@ -11,7 +11,7 @@ export function KeyValueRows({ children }: Props) {
   children = Array.isArray(children) ? children : [children];
   return (
     <table className="text-xs font-mono min-w-0 w-full mb-auto">
-      <tbody className="divide-highlightSecondary">
+      <tbody className="divide-y divide-surface-highlight">
         {children.map((child, i) => (
           <tr key={i}>{child}</tr>
         ))}
@@ -37,16 +37,18 @@ export function KeyValueRow({
     <>
       <td
         className={classNames(
-          'py-0.5 pr-2 select-text cursor-text whitespace-nowrap',
+          'select-none py-0.5 pr-2 h-full align-top max-w-[10rem]',
           labelClassName,
           labelColor === 'primary' && 'text-primary',
           labelColor === 'secondary' && 'text-text-subtle',
           labelColor === 'info' && 'text-info',
         )}
       >
-        {label}
+        <span className="select-text cursor-text">{label}</span>
+      </td>
+      <td className="select-none py-0.5 break-all align-top max-w-[15rem]">
+        <div className="select-text cursor-text max-h-[5rem] overflow-y-auto">{value}</div>
       </td>
-      <td className="py-0.5 cursor-text select-text break-all min-w-0">{value}</td>
     </>
   );
 }