yaak-mountain-loop/src-web/components/Settings/SettingsProxy.tsx

import { patchModel, settingsAtom } from "@yaakapp-internal/models";
import { useAtomValue } from "jotai";

import { Checkbox } from "../core/Checkbox";
import { Heading } from "../core/Heading";
import { InlineCode } from "../core/InlineCode";
import { PlainInput } from "../core/PlainInput";
import { Select } from "../core/Select";
import { Separator } from "../core/Separator";
import { HStack, VStack } from "../core/Stacks";

export function SettingsProxy() {
  const settings = useAtomValue(settingsAtom);

  return (
    <VStack space={1.5} className="mb-4">
      <div className="mb-3">
        <Heading>Proxy</Heading>
        <p className="text-text-subtle">
          Configure a proxy server for HTTP requests. Useful for corporate firewalls, debugging
          traffic, or routing through specific infrastructure.
        </p>
      </div>
      <Select
        name="proxy"
        label="Proxy"
        hideLabel
        size="sm"
        value={settings.proxy?.type ?? "automatic"}
        onChange={async (v) => {
          if (v === "automatic") {
            await patchModel(settings, { proxy: undefined });
          } else if (v === "enabled") {
            await patchModel(settings, {
              proxy: {
                disabled: false,
                type: "enabled",
                http: "",
                https: "",
                auth: { user: "", password: "" },
                bypass: "",
              },
            });
          } else {
            await patchModel(settings, { proxy: { type: "disabled" } });
          }
        }}
        options={[
          { label: "Automatic proxy detection", value: "automatic" },
          { label: "Custom proxy configuration", value: "enabled" },
          { label: "No proxy", value: "disabled" },
        ]}
      />
      {settings.proxy?.type === "enabled" && (
        <VStack space={1.5}>
          <Checkbox
            className="my-3"
            checked={!settings.proxy.disabled}
            title="Enable proxy"
            help="Use this to temporarily disable the proxy without losing the configuration"
            onChange={async (enabled) => {
              const { proxy } = settings;
              const http = proxy?.type === "enabled" ? proxy.http : "";
              const https = proxy?.type === "enabled" ? proxy.https : "";
              const bypass = proxy?.type === "enabled" ? proxy.bypass : "";
              const auth = proxy?.type === "enabled" ? proxy.auth : null;
              const disabled = !enabled;
              await patchModel(settings, {
                proxy: { type: "enabled", http, https, auth, disabled, bypass },
              });
            }}
          />
          <HStack space={1.5}>
            <PlainInput
              size="sm"
              label={
                <>
                  Proxy for <InlineCode>http://</InlineCode> traffic
                </>
              }
              placeholder="localhost:9090"
              defaultValue={settings.proxy?.http}
              onChange={async (http) => {
                const { proxy } = settings;
                const https = proxy?.type === "enabled" ? proxy.https : "";
                const bypass = proxy?.type === "enabled" ? proxy.bypass : "";
                const auth = proxy?.type === "enabled" ? proxy.auth : null;
                const disabled = proxy?.type === "enabled" ? proxy.disabled : false;
                await patchModel(settings, {
                  proxy: {
                    type: "enabled",
                    http,
                    https,
                    auth,
                    disabled,
                    bypass,
                  },
                });
              }}
            />
            <PlainInput
              size="sm"
              label={
                <>
                  Proxy for <InlineCode>https://</InlineCode> traffic
                </>
              }
              placeholder="localhost:9090"
              defaultValue={settings.proxy?.https}
              onChange={async (https) => {
                const { proxy } = settings;
                const http = proxy?.type === "enabled" ? proxy.http : "";
                const bypass = proxy?.type === "enabled" ? proxy.bypass : "";
                const auth = proxy?.type === "enabled" ? proxy.auth : null;
                const disabled = proxy?.type === "enabled" ? proxy.disabled : false;
                await patchModel(settings, {
                  proxy: { type: "enabled", http, https, auth, disabled, bypass },
                });
              }}
            />
          </HStack>
          <Separator className="my-6" />
          <Checkbox
            checked={settings.proxy.auth != null}
            title="Enable authentication"
            onChange={async (enabled) => {
              const { proxy } = settings;
              const http = proxy?.type === "enabled" ? proxy.http : "";
              const https = proxy?.type === "enabled" ? proxy.https : "";
              const disabled = proxy?.type === "enabled" ? proxy.disabled : false;
              const bypass = proxy?.type === "enabled" ? proxy.bypass : "";
              const auth = enabled ? { user: "", password: "" } : null;
              await patchModel(settings, {
                proxy: { type: "enabled", http, https, auth, disabled, bypass },
              });
            }}
          />

          {settings.proxy.auth != null && (
            <HStack space={1.5}>
              <PlainInput
                required
                size="sm"
                label="User"
                placeholder="myUser"
                defaultValue={settings.proxy.auth.user}
                onChange={async (user) => {
                  const { proxy } = settings;
                  const http = proxy?.type === "enabled" ? proxy.http : "";
                  const https = proxy?.type === "enabled" ? proxy.https : "";
                  const disabled = proxy?.type === "enabled" ? proxy.disabled : false;
                  const bypass = proxy?.type === "enabled" ? proxy.bypass : "";
                  const password = proxy?.type === "enabled" ? (proxy.auth?.password ?? "") : "";
                  const auth = { user, password };
                  await patchModel(settings, {
                    proxy: { type: "enabled", http, https, auth, disabled, bypass },
                  });
                }}
              />
              <PlainInput
                size="sm"
                label="Password"
                type="password"
                placeholder="s3cretPassw0rd"
                defaultValue={settings.proxy.auth.password}
                onChange={async (password) => {
                  const { proxy } = settings;
                  const http = proxy?.type === "enabled" ? proxy.http : "";
                  const https = proxy?.type === "enabled" ? proxy.https : "";
                  const disabled = proxy?.type === "enabled" ? proxy.disabled : false;
                  const bypass = proxy?.type === "enabled" ? proxy.bypass : "";
                  const user = proxy?.type === "enabled" ? (proxy.auth?.user ?? "") : "";
                  const auth = { user, password };
                  await patchModel(settings, {
                    proxy: { type: "enabled", http, https, auth, disabled, bypass },
                  });
                }}
              />
            </HStack>
          )}
          {settings.proxy.type === "enabled" && (
            <>
              <Separator className="my-6" />
              <PlainInput
                label="Proxy Bypass"
                help="Comma-separated list to bypass the proxy."
                defaultValue={settings.proxy.bypass}
                placeholder="127.0.0.1, *.example.com, localhost:3000"
                onChange={async (bypass) => {
                  const { proxy } = settings;
                  const http = proxy?.type === "enabled" ? proxy.http : "";
                  const https = proxy?.type === "enabled" ? proxy.https : "";
                  const disabled = proxy?.type === "enabled" ? proxy.disabled : false;
                  const user = proxy?.type === "enabled" ? (proxy.auth?.user ?? "") : "";
                  const password = proxy?.type === "enabled" ? (proxy.auth?.password ?? "") : "";
                  const auth = { user, password };
                  await patchModel(settings, {
                    proxy: { type: "enabled", http, https, auth, disabled, bypass },
                  });
                }}
              />
            </>
          )}
        </VStack>
      )}
    </VStack>
  );
}