From e87c3291e7e89eccfcbc52421628a9e9716887f5 Mon Sep 17 00:00:00 2001
From: Gregory Schier <gschier1990@gmail.com>
Date: Mon, 9 Mar 2026 09:33:35 -0700
Subject: [PATCH] Add sidebar to proxy app

---
 apps/yaak-proxy/main.tsx | 78 +++++++++++++++++++++-------------------
 1 file changed, 41 insertions(+), 37 deletions(-)

diff --git a/apps/yaak-proxy/main.tsx b/apps/yaak-proxy/main.tsx
index 98e3e20a..109b0008 100644
--- a/apps/yaak-proxy/main.tsx
+++ b/apps/yaak-proxy/main.tsx
@@ -2,6 +2,7 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { type } from "@tauri-apps/plugin-os";
 import { HeaderSize } from "@yaakapp-internal/ui";
 import { ActionButton } from "./ActionButton";
+import { Sidebar } from "./Sidebar";
 import classNames from "classnames";
 import { createStore, Provider, useAtomValue } from "jotai";
 import { StrictMode } from "react";
@@ -57,45 +58,48 @@ function App() {
           Yaak Proxy
         </div>
       </HeaderSize>
-      <main className="overflow-auto p-4">
-        <div className="flex items-center gap-3 mb-4">
-          <ActionButton
-            action={{ scope: "global", action: "proxy_start" }}
-            size="sm"
-            tone="primary"
-          />
-          <ActionButton
-            action={{ scope: "global", action: "proxy_stop" }}
-            size="sm"
-            variant="border"
-          />
-        </div>
+      <div className="grid grid-cols-[auto_1fr] min-h-0">
+        <Sidebar />
+        <main className="overflow-auto p-4">
+          <div className="flex items-center gap-3 mb-4">
+            <ActionButton
+              action={{ scope: "global", action: "proxy_start" }}
+              size="sm"
+              tone="primary"
+            />
+            <ActionButton
+              action={{ scope: "global", action: "proxy_stop" }}
+              size="sm"
+              variant="border"
+            />
+          </div>
 
-        <div className="text-xs font-mono">
-          {exchanges.length === 0 ? (
-            <p className="text-text-subtlest">No traffic yet</p>
-          ) : (
-            <table className="w-full text-left">
-              <thead>
-                <tr className="text-text-subtlest border-b border-border-subtle">
-                  <th className="py-1 pr-3 font-medium">Method</th>
-                  <th className="py-1 pr-3 font-medium">URL</th>
-                  <th className="py-1 pr-3 font-medium">Status</th>
-                </tr>
-              </thead>
-              <tbody>
-                {exchanges.map((ex) => (
-                  <tr key={ex.id} className="border-b border-border-subtle">
-                    <td className="py-1 pr-3">{ex.method}</td>
-                    <td className="py-1 pr-3 truncate max-w-md">{ex.url}</td>
-                    <td className="py-1 pr-3">{ex.resStatus ?? "—"}</td>
+          <div className="text-xs font-mono">
+            {exchanges.length === 0 ? (
+              <p className="text-text-subtlest">No traffic yet</p>
+            ) : (
+              <table className="w-full text-left">
+                <thead>
+                  <tr className="text-text-subtlest border-b border-border-subtle">
+                    <th className="py-1 pr-3 font-medium">Method</th>
+                    <th className="py-1 pr-3 font-medium">URL</th>
+                    <th className="py-1 pr-3 font-medium">Status</th>
                   </tr>
-                ))}
-              </tbody>
-            </table>
-          )}
-        </div>
-      </main>
+                </thead>
+                <tbody>
+                  {exchanges.map((ex) => (
+                    <tr key={ex.id} className="border-b border-border-subtle">
+                      <td className="py-1 pr-3">{ex.method}</td>
+                      <td className="py-1 pr-3 truncate max-w-md">{ex.url}</td>
+                      <td className="py-1 pr-3">{ex.resStatus ?? "—"}</td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            )}
+          </div>
+        </main>
+      </div>
     </div>
   );
 }