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
2025-06-12 21:27:39 +02:00 · 2024-08-30 17:15:05 +06:00
parent 70c1a85766
commit 33d6b5bd81
16 changed files with 278 additions and 39 deletions
--- a/web/src/components/buttons/SettingsToggle.svelte
+++ b/web/src/components/buttons/SettingsToggle.svelte
@ -10,28 +10,37 @@

    import Toggle from "$components/misc/Toggle.svelte";

-    export let settingContext: Context;
    export let settingId: Id;
+    export let settingContext: Context;

    export let title: string;
    export let description: string = "";

+    export let disabled = false;
+    export let disabledOpacity = false;
+
    $: setting = $settings[settingContext][settingId];
    $: isEnabled = !!setting;
 </script>

-<div id="setting-toggle-{settingContext}-{String(settingId)}" class="toggle-parent">
+<div
+    id="setting-toggle-{settingContext}-{String(settingId)}"
+    class="toggle-parent"
+    class:disabled
+    class:faded={disabledOpacity}
+    aria-hidden={disabled}
+>
    <button
        class="toggle-container"
        role="switch"
        aria-checked={isEnabled}
+        disabled={disabled}
        on:click={() =>
            updateSetting({
                [settingContext]: {
                    [settingId]: !isEnabled,
                },
-            })
-        }
+            })}
    >
        <h4 class="toggle-title">{title}</h4>
        <Toggle enabled={isEnabled} />
@ -51,6 +60,15 @@
        flex-direction: column;
        gap: 8px;
        overflow: hidden;
+        transition: opacity 0.2s;
+    }
+
+    .toggle-parent.disabled {
+        pointer-events: none;
+    }
+
+    .toggle-parent.faded {
+        opacity: 0.5;
    }

    .toggle-container {
--- a/web/src/components/dialog/SmallDialog.svelte
+++ b/web/src/components/dialog/SmallDialog.svelte
@ -18,12 +18,17 @@
    export let bodySubText = "";
    export let buttons: Optional<DialogButton[]> = undefined;
    export let dismissable = true;
+    export let leftAligned = false;

    let close: () => void;
 </script>

 <DialogContainer {id} {dismissable} bind:close>
-    <div class="dialog-body small-dialog" class:meowbalt-visible={meowbalt}>
+    <div
+        class="dialog-body small-dialog"
+        class:meowbalt-visible={meowbalt}
+        class:align-left={leftAligned}
+    >
        {#if meowbalt}
            <div class="meowbalt-container">
                <Meowbalt emotion={meowbalt} />
@ -46,7 +51,7 @@
                <div class="body-text" tabindex="-1">{bodyText}</div>
            {/if}
            {#if bodySubText}
-                <div class="subtext">{bodySubText}</div>
+                <div class="subtext popup-subtext">{bodySubText}</div>
            {/if}
        </div>
        {#if buttons}
@ -72,7 +77,7 @@
        text-align: center;
        max-width: 340px;
        width: calc(100% - var(--padding) - var(--dialog-padding) * 2);
-        max-height: 50%;
+        max-height: 85%;
        margin: calc(var(--padding) / 2);
    }

@ -98,10 +103,13 @@
        align-items: center;
    }

-    .popup-icon.warn-red :global(svg) {
+    .popup-icon :global(svg) {
        stroke-width: 1.5px;
        height: 50px;
        width: 50px;
+    }
+
+    .warn-red :global(svg) {
        stroke: var(--red);
    }

@ -119,4 +127,24 @@
    .popup-title:focus-visible {
        box-shadow: none !important;
    }
+
+    .popup-subtext {
+        opacity: 0.7;
+        padding: 0;
+    }
+
+    .align-left .body-text {
+        text-align: left;
+    }
+
+    .align-left .popup-header {
+        align-items: start;
+        gap: 2px;
+    }
+
+    .align-left .popup-icon :global(svg) {
+        height: 40px;
+        width: 40px;
+        stroke-width: 1.8px;
+    }
 </style>
--- a/web/src/components/settings/CustomInstanceInput.svelte
+++ b/web/src/components/settings/CustomInstanceInput.svelte
@ -0,0 +1,86 @@
+<script lang="ts">
+    import { get } from "svelte/store";
+    import { t } from "$lib/i18n/translations";
+
+    import settings, { updateSetting } from "$lib/state/settings";
+    import { customInstanceWarning } from "$lib/api/safety-warning";
+
+    let inputValue = get(settings).processing.customInstanceURL;
+
+    let url: string;
+    let validUrl: boolean;
+
+    const checkUrl = () => {
+        try {
+            let test = /^https:/i.test(new URL(inputValue).protocol);
+            if (test) url = new URL(inputValue).origin.toString();
+            validUrl = true;
+        } catch {
+            validUrl = false;
+        }
+    };
+
+    const writeInput = () => {
+        let url;
+        try {
+            url = new URL(inputValue).origin.toString();
+        } catch {
+            return (validUrl = false);
+        }
+        updateSetting({
+            processing: {
+                customInstanceURL: url,
+            },
+        });
+        inputValue = get(settings).processing.customInstanceURL;
+    };
+</script>
+
+<input
+    id="link-area"
+    bind:value={inputValue}
+    on:input={() => {
+        checkUrl();
+    }}
+    spellcheck="false"
+    autocomplete="off"
+    autocapitalize="off"
+    maxlength="128"
+    placeholder="instance url"
+/>
+
+<button
+    id="instance-save"
+    disabled={inputValue == $settings.processing.customInstanceURL || !validUrl}
+    on:click={async () => {
+        await customInstanceWarning();
+        if ($settings.processing.seenCustomWarning) {
+            if (inputValue) writeInput();
+        }
+    }}
+>
+    {$t("button.save")}
+</button>
+
+{#if $settings.processing.customInstanceURL.length > 0}
+    <button
+        id="instance-reset"
+        on:click={() => {
+            updateSetting({
+                processing: {
+                    customInstanceURL: "",
+                },
+            });
+            inputValue = get(settings).processing.customInstanceURL;
+        }}
+    >
+        {$t("button.reset")}
+    </button>
+{/if}
+
+<style>
+    #instance-save[disabled] {
+        opacity: 0.5;
+        pointer-events: none;
+    }
+</style>
--- a/web/src/components/settings/SettingsCategory.svelte
+++ b/web/src/components/settings/SettingsCategory.svelte
@ -1,8 +1,10 @@
 <script lang="ts">
    import { page } from "$app/stores";

-    export let sectionId: string;
    export let title: string;
+    export let sectionId: string;
+
+    export let disabled = false;

    let animate = false;

@ -17,6 +19,8 @@
    id={sectionId}
    class="settings-content"
    class:animate
+    class:disabled
+    aria-hidden={disabled}
 >
    <h3 class="settings-content-title">{title}</h3>
    <slot></slot>
@ -29,6 +33,11 @@
        gap: var(--padding);
        padding: calc(var(--settings-padding) / 2);
        border-radius: 18px;
+        transition: opacity 0.2s;
+    }
+
+    .settings-content.disabled {
+        opacity: 0.5;
    }

    .settings-content.animate {
--- a/web/src/lib/api/api-url.ts
+++ b/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;
 }
--- a/web/src/lib/api/api.ts
+++ b/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";
--- a/web/src/lib/api/override-warning.ts
+++ b/web/src/lib/api/override-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;
+    }
+}
--- a/web/src/lib/settings/defaults.ts
+++ b/web/src/lib/settings/defaults.ts
@ -33,7 +33,10 @@ const defaultSettings: CobaltSettings = {
    },
    processing: {
        allowDefaultOverride: false,
+        customInstanceURL: "",
+        enableCustomInstances: false,
        seenOverrideWarning: false,
+        seenCustomWarning: false,
    }
 }

--- a/web/src/lib/types/dialog.ts
+++ b/web/src/lib/types/dialog.ts
@ -29,6 +29,7 @@ type SmallDialog = Dialog & {
    bodyText?: string,
    bodySubText?: string,
    buttons?: DialogButton[],
+    leftAligned?: boolean,
 };

 type PickerDialog = Dialog & {
--- a/web/src/lib/types/settings.ts
+++ b/web/src/lib/types/settings.ts
@ -28,6 +28,9 @@ type CobaltSettingsPrivacy = {

 type CobaltSettingsProcessing = {
    allowDefaultOverride: boolean,
+    customInstanceURL: string,
+    enableCustomInstances: boolean,
+    seenCustomWarning: boolean,
    seenOverrideWarning: boolean,
 }

--- a/web/src/routes/settings/+layout.svelte
+++ b/web/src/routes/settings/+layout.svelte
@ -10,14 +10,15 @@
    import SettingsNavSection from "$components/settings/SettingsNavSection.svelte";

    import IconSunHigh from "@tabler/icons-svelte/IconSunHigh.svelte";
+    import IconLock from "@tabler/icons-svelte/IconLock.svelte";

    import IconMovie from "@tabler/icons-svelte/IconMovie.svelte";
    import IconMusic from "@tabler/icons-svelte/IconMusic.svelte";
    import IconFileDownload from "@tabler/icons-svelte/IconFileDownload.svelte";
-    import IconSettingsBolt from "@tabler/icons-svelte/IconSettingsBolt.svelte";
+
    import IconBug from "@tabler/icons-svelte/IconBug.svelte";
-    import IconLock from "@tabler/icons-svelte/IconLock.svelte";
-    import IconCloudNetwork from "@tabler/icons-svelte/IconCloudNetwork.svelte";
+    import IconWorld from "@tabler/icons-svelte/IconWorld.svelte";
+    import IconSettingsBolt from "@tabler/icons-svelte/IconSettingsBolt.svelte";

    import IconArrowLeft from "@tabler/icons-svelte/IconArrowLeft.svelte";

@ -131,11 +132,11 @@

            <SettingsNavSection>
                <SettingsNavTab
-                    tabName="processing"
-                    tabLink="processing"
+                    tabName="instances"
+                    tabLink="instances"
                    iconColor="gray"
                >
-                    <IconCloudNetwork />
+                    <IconWorld />
                </SettingsNavTab>
                <SettingsNavTab
                    tabName="advanced"
--- a/web/src/routes/settings/instances/+page.svelte
+++ b/web/src/routes/settings/instances/+page.svelte
@ -0,0 +1,43 @@
+<script lang="ts">
+    import env from "$lib/env";
+    import settings from "$lib/state/settings";
+
+    import { t } from "$lib/i18n/translations";
+
+    import SettingsToggle from "$components/buttons/SettingsToggle.svelte";
+    import SettingsCategory from "$components/settings/SettingsCategory.svelte";
+    import CustomInstanceInput from "$components/settings/CustomInstanceInput.svelte";
+
+    $: overrideDisabled = $settings.processing.enableCustomInstances;
+</script>
+
+{#if env.DEFAULT_API}
+    <SettingsCategory
+        sectionId="override"
+        title={$t("settings.processing.override")}
+        disabled={overrideDisabled}
+    >
+        <SettingsToggle
+            settingContext="processing"
+            settingId="allowDefaultOverride"
+            title={$t("settings.processing.override.title")}
+            description={$t("settings.processing.override.description")}
+            disabled={overrideDisabled}
+        />
+    </SettingsCategory>
+{/if}
+
+<SettingsCategory
+    sectionId="community"
+    title={$t("settings.processing.community")}
+>
+    <SettingsToggle
+        settingContext="processing"
+        settingId="enableCustomInstances"
+        title={$t("settings.processing.enable_custom.title")}
+        description={$t("settings.processing.enable_custom.description")}
+    />
+    {#if $settings.processing.enableCustomInstances}
+        <CustomInstanceInput />
+    {/if}
+</SettingsCategory>
--- a/web/src/routes/settings/processing/+page.svelte
+++ b/web/src/routes/settings/processing/+page.svelte
@ -1,18 +0,0 @@
-<script lang="ts">
-    import env from "$lib/env";
-    import { t } from "$lib/i18n/translations";
-
-    import SettingsToggle from "$components/buttons/SettingsToggle.svelte";
-    import SettingsCategory from "$components/settings/SettingsCategory.svelte";
-</script>
-
-{#if env.DEFAULT_API}
-    <SettingsCategory sectionId="override" title={$t("settings.processing.override")}>
-        <SettingsToggle
-            settingContext="processing"
-            settingId="allowDefaultOverride"
-            title={$t("settings.processing.override.title")}
-            description={$t("settings.processing.override.description")}
-        />
-    </SettingsCategory>
-{/if}