yaak-mountain-loop/apps/yaak-proxy/components/ProxyLayout.tsx

import {
  HeaderSize,
  IconButton,
  SidebarLayout,
  SplitLayout,
  type SplitLayoutLayout,
  Toasts,
} from "@yaakapp-internal/ui";
import classNames from "classnames";
import { useAtom, useAtomValue, useSetAtom } from "jotai";
import { useState } from "react";
import { useLocalStorage } from "react-use";
import { flowLayoutAtom, settingsRequestedAtom } from "../lib/atoms";
import { setupIncomplete } from "../lib/firstRun";
import { noFlowsAtom, systemProxyEverOnAtom } from "../lib/store";
import { getOsType } from "../lib/tauri";
import { ClearFlowsButton } from "./ClearFlowsButton";
import { FirstRun } from "./FirstRun";
import { FlowDetail } from "./FlowDetail";
import { FlowList } from "./FlowList";
import { ProxyStatus, useProxySetup } from "./ProxyStatus";
import { HelperDialog } from "./HelperDialog";
import { SaveDialog } from "./SaveDialog";
import { SearchBar } from "./SearchBar";
import { Sidebar } from "./Sidebar";
import { TakeOverBanner } from "./TakeOverBanner";

export function ProxyLayout() {
  const os = getOsType();
  const [flowLayout, setFlowLayout] = useAtom(flowLayoutAtom);
  const requestSettings = useSetAtom(settingsRequestedAtom);
  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 isHidden = floating ? (floatingSidebarHidden ?? true) : (sidebarHidden ?? false);

  return (
    <div
      className={classNames(
        "h-full w-full grid grid-rows-[auto_minmax(0,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"
      >
        {/* Yaak's silhouette: the sidebar toggle and the state pill where Yaak has the toggle and
            the environment, the search where it names the request, then its icons. */}
        <div className="grid grid-cols-[minmax(0,1fr)_minmax(10rem,26rem)_minmax(0,1fr)] gap-2 items-center w-full h-full pointer-events-none">
          <div className="flex items-center gap-1 pl-1 min-w-0 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);
                }
              }}
            />
            <ProxyStatus />
          </div>
          <div className="pointer-events-auto min-w-0">
            <SearchBar />
          </div>
          <div data-tauri-drag-region className="flex items-center justify-end gap-1 pr-1">
            <ClearFlowsButton />
            <IconButton
              className="pointer-events-auto"
              icon={flowLayout === "horizontal" ? "columns_2" : "rows_2"}
              title={`Change to ${flowLayout === "horizontal" ? "vertical" : "horizontal"} layout`}
              size="sm"
              iconColor="secondary"
              onClick={() =>
                setFlowLayout((prev) => (prev === "horizontal" ? "vertical" : "horizontal"))
              }
            />
            <IconButton
              className="pointer-events-auto"
              icon="settings"
              title="Settings"
              size="sm"
              iconColor="secondary"
              onClick={() => requestSettings((n) => n + 1)}
            />
          </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 />
          )
        }
      >
        <div className="h-full flex flex-col min-h-0">
          <TakeOverBanner />
          <div className="flex-1 min-h-0 grid grid-rows-[minmax(0,1fr)]">
            <FlowsOrFirstRun flowLayout={flowLayout} />
          </div>
        </div>
      </SidebarLayout>
      <SaveDialog />
      <HelperDialog />
      <Toasts />
    </div>
  );
}

/**
 * The flow list beside or above the detail pane, or, while setup is incomplete and there are no
 * flows, the first-run card across the whole area. Once setup is done an empty list says so
 * itself, after a Clear too.
 */
function FlowsOrFirstRun({ flowLayout }: { flowLayout: SplitLayoutLayout }) {
  const noFlows = useAtomValue(noFlowsAtom);
  const { caStatus, systemProxy } = useProxySetup();
  const systemProxyEverOn = useAtomValue(systemProxyEverOnAtom);
  const incomplete = setupIncomplete({
    trusted: caStatus.data?.trusted ?? null,
    systemProxySupported: systemProxy.data?.supported ?? null,
    systemProxyEverOn,
  });
  if (noFlows && incomplete) return <FirstRun />;
  return (
    <SplitLayout
      storageKey="proxy_detail"
      className="gap-1"
      layout={flowLayout}
      defaultRatio={0.55}
      firstSlot={({ style }) => <FlowList style={style} className="pt-1" />}
      secondSlot={({ style, orientation }) => (
        <FlowDetail style={style} sideBySide={orientation === "horizontal"} />
      )}
    />
  );
}