src/pages/[lang]/settings/pr.astro

---
import InstalledPlugins from "@components/catalog/InstalledPlugins.svelte";
import SettingsCard from "@components/settings/SettingsCard.astro";
import Toast from "@components/toasts/Toast.svelte";
import ToastWrapper from "@components/toasts/ToastWrapper.svelte";
import Layout from "@layouts/Layout.astro";
import SettingsLayout from "@layouts/SettingsLayout.astro";
import SettingsSection from "@layouts/SettingsSection.astro";
import { Icon } from "astro-icon/components";
import { getLangFromUrl, useTranslations } from "../../../i18n/utils";

const lang = getLangFromUrl(Astro.url);
const t = useTranslations(lang);
export function getStaticPaths() {
    const STATIC_PATHS = [{ params: { lang: "en_US" } }, { params: { lang: "jp" } }];
    return STATIC_PATHS;
}
export const prerender = true;
import { MARKETPLACE_ENABLED } from "astro:env/client";
---

<Layout title="Settings">
  <SettingsLayout title={t("settings.proxy")}>
    <SettingsSection
      title="Proxy"
      subtitle="A wide variety of settings for the proxy/rewriter itself."
    >
      <div
        class="w-full h-full flex flex-col items-center justify-center flex-wrap md:flex-row md:items-start md:justify-start gap-4"
      >
        <SettingsCard
          title="Proxy"
          description="Choose the proxy/rewriter that fits your needs"
          input={{ input: false }}
          button={{ name: "Change", id: "setproxy" }}
          select={{
            select: true,
            name: "proxy",
            options: [
              { name: "Automatic", value: "automatic", disabled: false },
              { name: "Ultraviolet", value: "uv", disabled: false },
              { name: "Scramjet (COMING SOON)", value: "sj", disabled: true },
            ],
            }}
            both={{enabled: false}}
        />
        <SettingsCard
          title="Open in"
          description="Choose how to open your sites"
          input={{ input: false }}
          button={{ name: "Set", id: "setopenin" }}
          select={{
            select: true,
            name: "openin",
            options: [
              { name: "Embed", value: "embed", disabled: false },
              { name: "Direct", value: "direct", disabled: false },
              { name: "About:Blank", value: "a:b", disabled: false },
              { name: "Blob", value: "blob", disabled: false },
            ],
            }}
            both={{enabled: false}}
        />
        <SettingsCard
          title="Search Engine"
          description="Choose your search engine"
          input={{ input: false }}
          button={{ name: "Set Search Engine", id: "setsearchengine" }}
          select={{
            select: true,
            name: "searchengine",
            options: [
              { name: "DuckDuckGo", value: "ddg", disabled: false },
              { name: "Google", value: "google", disabled: false },
              { name: "Bing", value: "bing", disabled: false },
            ],
            }} 
            both={{enabled: false}}
        />
        <SettingsCard
          title="Wisp Server"
          description="Choose the wisp server you feel is the fastest"
          input={{ input: true, required: false, placeholder: 'wss://nebulaproxy.io/wisp' }}
          button={{ name: "Select", id: "setwispurl" }}
          select={{
            select: true,
            name: "wispurl",
            options: [
              { name: "Default", value: "default", disabled: false },
              { name: "Ruby Network (US)", value: "ruby", disabled: false },
              { name: "Custom", value: "custom", disabled: false }
            ],
            }}
            both={{
                enabled: true,
                showOnSelect: {value: 'custom'}
            }}
        />
        <SettingsCard
          title="Transport"
          description="Select the transport to use"
          input={{ input: false }}
          button={{ name: "Set transport", id: "settransport" }}
          select={{
            select: true,
            name: "transport",
            options: [
              { name: "Libcurl", value: "libcurl", disabled: false },
              { name: "Epoxy", value: "epoxy", disabled: false },
            ],
            }}
            both={{enabled: false}}
        />
      </div>
    </SettingsSection>
    {
      MARKETPLACE_ENABLED && (
        <SettingsSection
          title="Plugins"
          subtitle="Plugins allow you to modify the way the proxy works (UV only, plugins are auto applied)"
        >
          <div class="flex flex-row gap-6 justify-center md:justify-normal">
            <InstalledPlugins client:only="svelte" />
            <a
              href={`/${lang}/catalog/1`}
              class="rounded-3xl bg-navbar-color w-64 flex flex-col"
            >
              <div class="w-full items-center justify-center flex aspect-[16/9]">
                <Icon name="ph:plus-bold" class="h-16 w-16" />
              </div>
              <div class="h-2/6 text-center content-center p-3 font-semibold">
                Get more plugins in the <strong>Nebula Catalog!</strong>
              </div>
            </a>
          </div>
        </SettingsSection>
      )
    }
  </SettingsLayout>
  <ToastWrapper client:load>
    <Toast
      toastProp={{
        toastType: "success",
        text: "Successfully changed proxy!",
        class: "proxyMessage",
      }}
      client:load
    />
    <Toast
      toastProp={{
        toastType: "success",
        text: "Saved selection!",
        class: "openInMessage",
      }}
      client:load
    />
    <Toast
      toastProp={{
        toastType: "success",
        text: "Saved Search Engine Selection!",
        class: "searchEngineMessage",
      }}
      client:load
    />
    <Toast
      toastProp={{
        toastType: "success",
        text: "Wisp server selected!",
        class: "wispUrlMessage",
      }}
      client:load
      />
    <Toast
      toastProp={{
        toastType: "success",
        text: "Transport set!",
        class: "transportMessage",
      }}
      client:load
    />
  </ToastWrapper>
</Layout>
<script>
  import { toast } from "@utils/toast.ts";
  import { settings, Settings as SettingsEnum } from "@utils/settings/index";
  import { pageLoad } from "@utils/events";
  function setup(
    proxySelectVal: HTMLSelectElement,
    openInVal: HTMLSelectElement,
    searchEngineVal: HTMLSelectElement,
    wispServerVal: HTMLSelectElement,
      transportVal: HTMLSelectElement,
      customUrl: HTMLInputElement
  ) {
    proxySelectVal.value = localStorage.getItem(
      SettingsEnum.ProxySettings.proxy
    ) as string;
    openInVal.value = localStorage.getItem(
      SettingsEnum.ProxySettings.openIn
    ) as string;
    searchEngineVal.value = localStorage.getItem(
      SettingsEnum.ProxySettings.searchEngine
    ) as string;
    wispServerVal.value = localStorage.getItem(SettingsEnum.ProxySettings.wispServerURL) as string;
    if (wispServerVal.value === "custom") {
        customUrl.classList.remove("hidden");
        customUrl.value = localStorage.getItem("customWispUrl") as string;
    }
    transportVal.value = localStorage.getItem(
      SettingsEnum.ProxySettings.transport
    ) as string;
  }
  pageLoad(() => {
    const proxyButton = document.getElementById("setproxy") as HTMLButtonElement;
    const proxySelectVal = document.getElementById("proxy") as HTMLSelectElement;
    const openInButton = document.getElementById("setopenin") as HTMLButtonElement;
    const openInVal = document.getElementById("openin") as HTMLSelectElement;
    const searchEngineButton = document.getElementById("setsearchengine") as HTMLButtonElement;
    const searchEngineVal = document.getElementById("searchengine") as HTMLSelectElement;
    const wispServerButton = document.getElementById("setwispurl") as HTMLButtonElement;
    const wispServerVal = document.getElementById("wispurl") as HTMLSelectElement;
    const transportButton = document.getElementById("settransport") as HTMLButtonElement;
    const transportVal = document.getElementById("transport") as HTMLSelectElement;
    const customWispUrl = document.getElementById("inputOnSelectValuecustom") as HTMLInputElement;
    setup(
      proxySelectVal,
      openInVal,
      searchEngineVal,
      wispServerVal,
        transportVal,
        customWispUrl
    );
    proxyButton.addEventListener("click", () => {
      settings.proxySettings.changeProxy(proxySelectVal.value);
      toast(".proxyMessage");
    });
    openInButton.addEventListener("click", () => {
      settings.proxySettings.openIn(openInVal.value);
      toast(".openInMessage");
    });
    searchEngineButton.addEventListener("click", () => {
      settings.proxySettings.setSearchEngine(searchEngineVal.value);
      toast(".searchEngineMessage");
    });
    wispServerButton.addEventListener("click", () => {
        if (wispServerVal.value === "custom") {
            settings.proxySettings.setWispURL(wispServerVal.value);
            if (customWispUrl.classList.contains('hidden')) {
                customWispUrl.classList.remove("hidden");
                customWispUrl.value = localStorage.getItem("customWispUrl") as string;
            }
            else { 
                localStorage.setItem("customWispUrl", customWispUrl.value);
                toast(".wispUrlMessage");
            }
        }
        else {
            if (!customWispUrl.classList.contains('hidden')) {
                customWispUrl.classList.add("hidden");
            }
            settings.proxySettings.setWispURL(wispServerVal.value);
            toast(".wispUrlMessage");
        }
    });
    transportButton.addEventListener("click", () => {
      settings.proxySettings.setTransport(transportVal.value);
      toast(".transportMessage");
    });
  });
</script>