Add onboarding state to settings

src/pages/parts/settings/ConnectionsPart.tsx

@@ -8,6 +8,7 @@ import { SettingsCard } from "@/components/layout/SettingsCard";
 import { AuthInputBox } from "@/components/text-inputs/AuthInputBox";
 import { Divider } from "@/components/utils/Divider";
 import { Heading1 } from "@/components/utils/Text";
+import { SetupPart } from "@/pages/parts/settings/SetupPart";
 
 interface ProxyEditProps {
   proxyUrls: string[] | null;
@@ -147,6 +148,7 @@ export function ConnectionsPart(props: BackendEditProps & ProxyEditProps) {
     <div>
       <Heading1 border>{t("settings.connections.title")}</Heading1>
       <div className="space-y-6">
+        <SetupPart />
         <ProxyEdit
           proxyUrls={props.proxyUrls}
           setProxyUrls={props.setProxyUrls}

src/pages/parts/settings/SetupPart.tsx

@@ -0,0 +1,79 @@
+import { useNavigate } from "react-router-dom";
+import { useAsync } from "react-use";
+
+import { isExtensionActive } from "@/backend/extension/messaging";
+import { singularProxiedFetch } from "@/backend/helpers/fetch";
+import { Button } from "@/components/buttons/Button";
+import { useAuthStore } from "@/stores/auth";
+
+const testUrl = "https://postman-echo.com/get";
+
+type Status = "success" | "unset" | "error";
+
+type SetupData = {
+  extension: Status;
+  proxy: Status;
+  defaultProxy: Status;
+};
+
+function testProxy(url: string) {
+  return new Promise<void>((resolve, reject) => {
+    setTimeout(() => reject(new Error("Timed out!")), 1000);
+    singularProxiedFetch(url, testUrl, {})
+      .then((res) => {
+        if (res.url !== testUrl) return reject(new Error("Not a proxy"));
+        resolve();
+      })
+      .catch(reject);
+  });
+}
+
+function useIsSetup() {
+  const proxyUrls = useAuthStore((s) => s.proxySet);
+  const { loading, value } = useAsync(async (): Promise<SetupData> => {
+    const extensionStatus: Status = (await isExtensionActive())
+      ? "success"
+      : "unset";
+    let proxyStatus: Status = "unset";
+    if (proxyUrls && proxyUrls.length > 0) {
+      try {
+        await testProxy(proxyUrls[0]);
+        proxyStatus = "success";
+      } catch {
+        proxyStatus = "error";
+      }
+    }
+    return {
+      extension: extensionStatus,
+      proxy: proxyStatus,
+      defaultProxy: "success",
+    };
+  }, [proxyUrls]);
+
+  let globalState: Status = "unset";
+  if (value?.extension === "success" || value?.proxy === "success")
+    globalState = "success";
+  if (value?.proxy === "error" || value?.extension === "error")
+    globalState = "error";
+
+  return {
+    setupStates: value,
+    globalState,
+    loading,
+  };
+}
+
+export function SetupPart() {
+  const navigate = useNavigate();
+  const { loading, setupStates, globalState } = useIsSetup();
+  if (loading || !setupStates) return <p>Loading states...</p>;
+  return (
+    <div>
+      <p className="font-bold text-white">state: {globalState}</p>
+      <p>extension: {setupStates.extension}</p>
+      <p>proxy: {setupStates.proxy}</p>
+      <p>defaults: {setupStates.defaultProxy}</p>
+      <Button onClick={() => navigate("/onboarding")}>Do setup</Button>
+    </div>
+  );
+}

src/pages/parts/settings/SidebarPart.tsx

@@ -45,8 +45,8 @@ export function SidebarPart() {
     },
     {
       textKey: "settings.locale.title",
-      id: "settings-locale",
-      icon: Icons.BOOKMARK,
+      id: "settings-preferences",
+      icon: Icons.SETTINGS,
     },
     {
       textKey: "settings.appearance.title",