Split codebase (#455)

2026-05-13 19:30:29 +02:00 · 2026-05-07 15:50:10 -07:00
parent d2dc719cc6
commit 10559c8f4f
742 changed files with 7686 additions and 3249 deletions
--- a/apps/yaak-proxy/components/ProxyLayout.tsx
+++ b/apps/yaak-proxy/components/ProxyLayout.tsx
@@ -0,0 +1,146 @@
+import { HeaderSize, IconButton, SidebarLayout, SplitLayout } from "@yaakapp-internal/ui";
+import classNames from "classnames";
+import { useAtomValue } from "jotai";
+import { useState } from "react";
+import { useLocalStorage } from "react-use";
+import { useRpcQueryWithEvent } from "../hooks/useRpcQueryWithEvent";
+import { getOsType } from "../lib/tauri";
+import { ActionIconButton } from "./ActionIconButton";
+import { ExchangesTable } from "./ExchangesTable";
+import { filteredExchangesAtom, Sidebar } from "./Sidebar";
+
+export function ProxyLayout() {
+  const os = getOsType();
+  const exchanges = useAtomValue(filteredExchangesAtom);
+  const [sidebarWidth, setSidebarWidth] = useLocalStorage("sidebar_width", 250);
+  const [sidebarHidden, setSidebarHidden] = useLocalStorage("sidebar_hidden", false);
+  const [floatingSidebarHidden, setFloatingSidebarHidden] = useLocalStorage(
+    "floating_sidebar_hidden",
+    true,
+  );
+  const [floating, setFloating] = useState(false);
+  const { data: proxyState } = useRpcQueryWithEvent("get_proxy_state", {}, "proxy_state_changed");
+  const isRunning = proxyState?.state === "running";
+  const isHidden = floating ? (floatingSidebarHidden ?? true) : (sidebarHidden ?? false);
+
+  return (
+    <div
+      className={classNames(
+        "h-full w-full grid grid-rows-[auto_1fr]",
+        os === "linux" && "border border-border-subtle",
+      )}
+    >
+      <HeaderSize
+        data-tauri-drag-region
+        size="lg"
+        osType={os}
+        hideWindowControls={false}
+        useNativeTitlebar={false}
+        interfaceScale={1}
+        className="x-theme-appHeader bg-surface"
+      >
+        <div className="grid grid-cols-[auto_minmax(0,1fr)_auto] items-center w-full h-full pointer-events-none">
+          <div className="flex items-center pl-1 pointer-events-auto">
+            <IconButton
+              size="sm"
+              title="Toggle sidebar"
+              icon={isHidden ? "left_panel_hidden" : "left_panel_visible"}
+              iconColor="secondary"
+              onClick={() => {
+                if (floating) {
+                  setFloatingSidebarHidden(!floatingSidebarHidden);
+                } else {
+                  setSidebarHidden(!sidebarHidden);
+                }
+              }}
+            />
+          </div>
+          <div
+            data-tauri-drag-region
+            className="pointer-events-none flex items-center text-sm px-2"
+          >
+            Yaak Proxy
+          </div>
+          <div className="flex items-center gap-1 pr-1 pointer-events-auto">
+            {isRunning ? (
+              <>
+                <span className="text-2xs text-success">Running :9090</span>
+                <ActionIconButton
+                  action={{ scope: "global", action: "proxy_stop" }}
+                  icon="circle_stop"
+                  iconColor="secondary"
+                  size="sm"
+                />
+              </>
+            ) : (
+              <ActionIconButton
+                action={{ scope: "global", action: "proxy_start" }}
+                icon="circle_play"
+                iconColor="secondary"
+                size="sm"
+              />
+            )}
+          </div>
+        </div>
+      </HeaderSize>
+      <SidebarLayout
+        width={sidebarWidth ?? 250}
+        onWidthChange={setSidebarWidth}
+        hidden={sidebarHidden ?? false}
+        onHiddenChange={setSidebarHidden}
+        floatingHidden={floatingSidebarHidden ?? true}
+        onFloatingHiddenChange={setFloatingSidebarHidden}
+        onFloatingChange={setFloating}
+        sidebar={
+          floating ? (
+            <div
+              className={classNames(
+                "x-theme-sidebar",
+                "h-full bg-surface border-r border-border-subtle",
+                "grid grid-rows-[auto_1fr]",
+              )}
+            >
+              <HeaderSize
+                hideControls
+                size="lg"
+                className="border-transparent pl-1"
+                osType={os}
+                hideWindowControls={false}
+                useNativeTitlebar={false}
+                interfaceScale={1}
+              >
+                <IconButton
+                  size="sm"
+                  title="Toggle sidebar"
+                  icon="left_panel_visible"
+                  iconColor="secondary"
+                  onClick={() => setFloatingSidebarHidden(true)}
+                />
+              </HeaderSize>
+              <Sidebar />
+            </div>
+          ) : (
+            <Sidebar />
+          )
+        }
+      >
+        <SplitLayout
+          storageKey="proxy_detail"
+          layout="vertical"
+          defaultRatio={0.4}
+          firstSlot={({ style }) => (
+            <ExchangesTable exchanges={exchanges} style={style} className="overflow-auto" />
+          )}
+          secondSlot={({ style }) => (
+            <div
+              style={style}
+              className="p-3 text-text-subtlest text-sm border-t border-border-subtle"
+            >
+              Select a request to view details
+            </div>
+          )}
+        />
+      </SidebarLayout>
+    </div>
+  );
+}