web: base custom instance functionality

also:
- renamed processing tab in settings to "instances"
- improved override description
- prefer custom over override (and grey out the option)
- dedicated lib for all api safety warnings
- left aligned small popup with smaller icon
- ability to grey out settings category & toggle

web/src/lib/api/api-url.ts

@@ -4,8 +4,16 @@ import env, { apiURL } from "$lib/env";
 import settings from "$lib/state/settings";
 
 export const currentApiURL = () => {
-    if (env.DEFAULT_API && get(settings).processing.allowDefaultOverride) {
+    const processingSettings = get(settings).processing;
+    const customInstanceURL = processingSettings.customInstanceURL;
+
+    if (processingSettings.enableCustomInstances && customInstanceURL.length > 0) {
+        return new URL(customInstanceURL).origin;
+    }
+
+    if (env.DEFAULT_API && processingSettings.allowDefaultOverride) {
         return new URL(env.DEFAULT_API).origin;
     }
+
     return new URL(apiURL).origin;
 }

web/src/lib/api/api.ts

@@ -3,7 +3,7 @@ import { get } from "svelte/store";
 import settings from "$lib/state/settings";
 import { getSession } from "$lib/api/session";
 import { currentApiURL } from "$lib/api/api-url";
-import { apiOverrideWarning } from "$lib/api/override-warning";
+import { apiOverrideWarning } from "$lib/api/safety-warning";
 
 import type { Optional } from "$lib/types/generic";
 import type { CobaltAPIResponse, CobaltErrorResponse } from "$lib/types/api";

web/src/lib/api/safety-warning.ts

@@ -60,3 +60,52 @@ export const apiOverrideWarning = async () => {
         await promise;
     }
 }
+
+export const customInstanceWarning = async () => {
+    if (env.DEFAULT_API && !get(settings).processing.seenCustomWarning) {
+        let _actions: {
+            resolve: () => void;
+            reject: () => void;
+        };
+
+        const promise = new Promise<void>(
+            (resolve, reject) => (_actions = { resolve, reject })
+        ).catch(() => {
+            return {}
+        });
+
+        createDialog({
+            id: "security-api-custom",
+            type: "small",
+            icon: "warn-red",
+            title: get(t)("dialog.safety.title"),
+            bodyText: get(t)("dialog.safety.custom_instance.body"),
+            leftAligned: true,
+            buttons: [
+                {
+                    text: get(t)("button.cancel"),
+                    main: false,
+                    action: () => {
+                        _actions.reject();
+                    },
+                },
+                {
+                    text: get(t)("button.continue"),
+                    color: "red",
+                    main: true,
+                    timeout: 15000,
+                    action: () => {
+                        _actions.resolve();
+                        updateSetting({
+                            processing: {
+                                seenCustomWarning: true,
+                            },
+                        })
+                    },
+                },
+            ],
+        })
+
+        await promise;
+    }
+}