feat(frontend): request logs; refactor frontend components

frontend/src/components/RequestDetails.tsx

@@ -0,0 +1,48 @@
+import { Component, createSignal, For } from 'solid-js';
+import type { RequestLog } from '../types';
+import { Card } from './ui/Card';
+
+const TreeView: Component<{ data: any; name: string }> = (props) => {
+  const [isOpen, setIsOpen] = createSignal(true);
+  const isObject = typeof props.data === 'object' && props.data !== null;
+
+  return (
+    <div class="ml-4 my-1">
+      <div class="flex items-center">
+        <span class="cursor-pointer" onClick={() => setIsOpen(!isOpen())}>
+          {isObject ? (isOpen() ? '▼' : '►') : ''}
+        </span>
+        <span class="font-semibold ml-2">{props.name}</span>
+      </div>
+      {isOpen() && isObject && (
+        <div class="pl-4 border-l-2 border-gray-200">
+          <For each={Object.entries(props.data)}>
+            {([key, value]) => {
+              if (typeof value === 'object' && value !== null && 'modified' in value && 'value' in value) {
+                return <TreeView name={key} data={value.value} />
+              }
+              return <TreeView name={key} data={value} />
+            }}
+          </For>
+        </div>
+      )}
+      {isOpen() && !isObject && <div class="pl-6 text-gray-700">{JSON.stringify(props.data)}</div>}
+    </div>
+  );
+};
+
+
+const RequestDetails: Component<{ log: RequestLog }> = (props) => {
+  return (
+    <Card class="p-4">
+      <h2 class="text-xl font-bold mb-4">Request Details</h2>
+      {/* TODO: interception method */}
+      <div>
+        <TreeView name="Request" data={props.log.request_body} />
+        <TreeView name="Response" data={props.log.response_body} />
+      </div>
+    </Card>
+  );
+};
+
+export default RequestDetails;