netbird/client/ui/frontend/src/modules/settings/SettingsGeneral.tsx

import { useEffect, useRef } from "react";
import { useTranslation } from "react-i18next";
import { Button } from "@/components/Button";
import FancyToggleSwitch from "@/components/FancyToggleSwitch";
import { HelpText } from "@/components/HelpText";
import { Input } from "@/components/Input";
import { Label } from "@/components/Label";
import { SectionGroup } from "@/modules/settings/SettingsSection.tsx";
import { useSettings } from "@/modules/settings/SettingsContext.tsx";
import { ManagementServerSwitch } from "@/modules/settings/ManagementServerSwitch.tsx";
import { ManagementMode, useManagementUrl } from "@/modules/settings/useManagementUrl.ts";
import { LanguagePicker } from "@/modules/settings/LanguagePicker.tsx";

export function SettingsGeneral() {
    const { t } = useTranslation();
    const { config, setField } = useSettings();
    const { mode, setMode, setUrl, displayUrl, showError, canSave, save } = useManagementUrl();

    const inputRef = useRef<HTMLInputElement>(null);
    const prevMode = useRef(mode);
    useEffect(() => {
        if (
            prevMode.current === ManagementMode.Cloud &&
            mode === ManagementMode.SelfHosted
        ) {
            inputRef.current?.focus();
        }
        prevMode.current = mode;
    }, [mode]);

    return (
        <>
            <SectionGroup title={t("settings.general.section.general")}>
                <LanguagePicker />
                <FancyToggleSwitch
                    value={!config.disableAutoConnect}
                    onChange={(v) => setField("disableAutoConnect", !v)}
                    label={t("settings.general.connectOnStartup.label")}
                    helpText={t("settings.general.connectOnStartup.help")}
                />
                <FancyToggleSwitch
                    value={!config.disableNotifications}
                    onChange={(v) => setField("disableNotifications", !v)}
                    label={t("settings.general.notifications.label")}
                    helpText={t("settings.general.notifications.help")}
                />
            </SectionGroup>

            <SectionGroup title={t("settings.general.section.connection")}>
                <div>
                    <div className={"flex items-start gap-3"}>
                        <div className={"flex-1 min-w-0"}>
                            <Label as={"div"}>{t("settings.general.management.label")}</Label>
                            <HelpText>
                                {t("settings.general.management.help")}
                            </HelpText>
                        </div>
                        <ManagementServerSwitch value={mode} onChange={setMode} />
                    </div>
                    {mode === ManagementMode.SelfHosted && (
                        <div className={"flex items-start gap-3 mt-2"}>
                            <Input
                                ref={inputRef}
                                value={displayUrl}
                                onChange={(e) => setUrl(e.target.value)}
                                placeholder={t("settings.general.management.urlPlaceholder")}
                                error={
                                    showError
                                        ? t("settings.general.management.urlError")
                                        : undefined
                                }
                            />
                            <Button
                                variant={"primary"}
                                size={"md"}
                                disabled={!canSave}
                                onClick={() => save()}
                            >
                                {t("common.save")}
                            </Button>
                        </div>
                    )}
                </div>
            </SectionGroup>
        </>
    );
}