starred/yaak-mountain-loop
1
0
Fork 0
mirror of https://github.com/mountain-loop/yaak.git synced 2026-07-02 11:01:36 +02:00
Code Issues 8 Packages Projects Releases 10 Wiki Activity

Add sidebar to proxy app

Browse Source
This commit is contained in:
Gregory Schier
2026-03-09 09:33:35 -07:00
parent a0442fb42b
commit e87c3291e7
1 changed files with 41 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/yaak-proxy/main.tsx
+41 -37
View File
@@ -2,6 +2,7 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { type } from "@tauri-apps/plugin-os"; import { type } from "@tauri-apps/plugin-os";
import { HeaderSize } from "@yaakapp-internal/ui"; import { HeaderSize } from "@yaakapp-internal/ui";
import { ActionButton } from "./ActionButton"; import { ActionButton } from "./ActionButton";
import { Sidebar } from "./Sidebar";
import classNames from "classnames"; import classNames from "classnames";
import { createStore, Provider, useAtomValue } from "jotai"; import { createStore, Provider, useAtomValue } from "jotai";
import { StrictMode } from "react"; import { StrictMode } from "react";
@@ -57,45 +58,48 @@ function App() {
Yaak Proxy Yaak Proxy
</div> </div>
</HeaderSize> </HeaderSize>
<main className="overflow-auto p-4"> <div className="grid grid-cols-[auto_1fr] min-h-0">
<div className="flex items-center gap-3 mb-4"> <Sidebar />
<ActionButton <main className="overflow-auto p-4">
action={{ scope: "global", action: "proxy_start" }} <div className="flex items-center gap-3 mb-4">
size="sm" <ActionButton
tone="primary" action={{ scope: "global", action: "proxy_start" }}
/> size="sm"
<ActionButton tone="primary"
action={{ scope: "global", action: "proxy_stop" }} />
size="sm" <ActionButton
variant="border" action={{ scope: "global", action: "proxy_stop" }}
/> size="sm"
</div> variant="border"
/>
</div>
<div className="text-xs font-mono"> <div className="text-xs font-mono">
{exchanges.length === 0 ? ( {exchanges.length === 0 ? (
<p className="text-text-subtlest">No traffic yet</p> <p className="text-text-subtlest">No traffic yet</p>
) : ( ) : (
<table className="w-full text-left"> <table className="w-full text-left">
<thead> <thead>
<tr className="text-text-subtlest border-b border-border-subtle"> <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">Method</th>
<th className="py-1 pr-3 font-medium">URL</th> <th className="py-1 pr-3 font-medium">URL</th>
<th className="py-1 pr-3 font-medium">Status</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>
</tr> </tr>
))} </thead>
</tbody> <tbody>
</table> {exchanges.map((ex) => (
)} <tr key={ex.id} className="border-b border-border-subtle">
</div> <td className="py-1 pr-3">{ex.method}</td>
</main> <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> </div>
); );
} }