Try new layout and a bunch of editor fixes

src-web/components/ResponsePane.tsx

@@ -1,19 +1,20 @@
-import { motion } from 'framer-motion';
+import classnames from 'classnames';
 import { useEffect, useMemo, useState } from 'react';
 import { useDeleteAllResponses, useDeleteResponse, useResponses } from '../hooks/useResponses';
+import { Divider } from './Divider';
 import { Dropdown } from './Dropdown';
 import Editor from './Editor/Editor';
 import { Icon } from './Icon';
 import { IconButton } from './IconButton';
-import { HStack, VStack } from './Stacks';
-import { WindowDragRegion } from './WindowDragRegion';
+import type { LayoutPaneProps } from './LayoutPane';
+import { LayoutPane } from './LayoutPane';
+import { HStack } from './Stacks';
 
-interface Props {
+interface Props extends LayoutPaneProps {
   requestId: string;
-  error: string | null;
 }
 
-export function ResponsePane({ requestId, error }: Props) {
+export function ResponsePane({ requestId, className, ...props }: Props) {
   const [activeResponseId, setActiveResponseId] = useState<string | null>(null);
   const [viewMode, setViewMode] = useState<'pretty' | 'raw'>('pretty');
   const responses = useResponses(requestId);
@@ -22,7 +23,6 @@ export function ResponsePane({ requestId, error }: Props) {
     : responses.data[responses.data.length - 1];
   const deleteResponse = useDeleteResponse(response);
   const deleteAllResponses = useDeleteAllResponses(response?.requestId);
-  error = response?.error ?? error;
 
   useEffect(() => {
     setActiveResponseId(null);
@@ -44,49 +44,29 @@ export function ResponsePane({ requestId, error }: Props) {
   }, [response?.body, contentType]);
 
   return (
-    <VStack className="w-full">
-      <HStack as={WindowDragRegion} items="center" className="pl-1.5 pr-1">
-        <Dropdown
-          items={[
-            {
-              label: 'Clear Response',
-              onSelect: deleteResponse.mutate,
-              disabled: responses.data.length === 0,
-            },
-            {
-              label: 'Clear All Responses',
-              onSelect: deleteAllResponses.mutate,
-              disabled: responses.data.length === 0,
-            },
-            '-----',
-            ...responses.data.slice(0, 10).map((r) => ({
-              label: r.status + ' - ' + r.elapsed + ' ms',
-              leftSlot: response?.id === r.id ? <Icon icon="check" /> : <></>,
-              onSelect: () => setActiveResponseId(r.id),
-            })),
-          ]}
-        >
-          <IconButton icon="gear" className="ml-auto" size="sm" />
-        </Dropdown>
-      </HStack>
-      <motion.div animate={{ opacity: 1 }} initial={{ opacity: 0 }} className="w-full h-full">
-        <VStack className="pr-3 pl-1.5 py-3" space={3}>
-          {error && <div className="text-white bg-red-500 px-3 py-1 rounded">{error}</div>}
-          {response && (
-            <>
+    <LayoutPane className={classnames(className)} {...props}>
+      <div className="max-h-full h-full grid grid-rows-[auto_minmax(0,1fr)] grid-cols-1 py-1 px-2">
+        {/*<HStack as={WindowDragRegion} items="center" className="pl-1.5 pr-1">*/}
+        {/*</HStack>*/}
+        {response?.error && (
+          <div className="text-white bg-red-500 px-2 py-1 rounded">{response.error}</div>
+        )}
+        {response && (
+          <>
+            <div className="mb-2">
               <HStack
+                data-tauri-drag-region
                 items="center"
-                className="italic text-gray-500 text-sm w-full h-10 mb-3 flex-shrink-0"
+                className="italic text-gray-500 text-sm w-full mb-1 flex-shrink-0"
               >
-                <div className="whitespace-nowrap">
-                  {response.updatedAt.toISOString()}
-                  &nbsp;&bull;&nbsp;
+                <div data-tauri-drag-region className="whitespace-nowrap">
                   {response.status}
                   {response.statusReason && ` ${response.statusReason}`}
                   &nbsp;&bull;&nbsp;
                   {response.elapsed}ms &nbsp;&bull;&nbsp;
                   {Math.round(response.body.length / 1000)} KB
                 </div>
+
                 <HStack items="center" className="ml-auto">
                   {contentType.includes('html') && (
                     <IconButton
@@ -96,26 +76,49 @@ export function ResponsePane({ requestId, error }: Props) {
                       onClick={() => setViewMode((m) => (m === 'pretty' ? 'raw' : 'pretty'))}
                     />
                   )}
+                  <Dropdown
+                    items={[
+                      {
+                        label: 'Clear Response',
+                        onSelect: deleteResponse.mutate,
+                        disabled: responses.data.length === 0,
+                      },
+                      {
+                        label: 'Clear All Responses',
+                        onSelect: deleteAllResponses.mutate,
+                        disabled: responses.data.length === 0,
+                      },
+                      '-----',
+                      ...responses.data.slice(0, 10).map((r) => ({
+                        label: r.status + ' - ' + r.elapsed + ' ms',
+                        leftSlot: response?.id === r.id ? <Icon icon="check" /> : <></>,
+                        onSelect: () => setActiveResponseId(r.id),
+                      })),
+                    ]}
+                  >
+                    <IconButton icon="gear" className="ml-auto" size="sm" />
+                  </Dropdown>
                 </HStack>
               </HStack>
-              {viewMode === 'pretty' && contentForIframe !== null ? (
-                <iframe
-                  title="Response preview"
-                  srcDoc={contentForIframe}
-                  sandbox="allow-scripts allow-same-origin"
-                  className="h-full w-full rounded-lg"
-                />
-              ) : response?.body ? (
-                <Editor
-                  valueKey={`${contentType}:${response.body}`}
-                  defaultValue={response?.body}
-                  contentType={contentType}
-                />
-              ) : null}
-            </>
-          )}
-        </VStack>
-      </motion.div>
-    </VStack>
+              <Divider />
+            </div>
+            {viewMode === 'pretty' && contentForIframe !== null ? (
+              <iframe
+                title="Response preview"
+                srcDoc={contentForIframe}
+                sandbox="allow-scripts allow-same-origin"
+                className="h-full w-full rounded-lg"
+              />
+            ) : response?.body ? (
+              <Editor
+                valueKey={`${contentType}:${response.body}`}
+                defaultValue={response?.body}
+                contentType={contentType}
+              />
+            ) : null}
+          </>
+        )}
+      </div>
+    </LayoutPane>
   );
 }