add skeleton to launch netbird ui at login and own context

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

@@ -1,56 +1,22 @@
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef } from "react";
 import { useTranslation } from "react-i18next";
-import { Dialogs } from "@wailsio/runtime";
 import { Button } from "@/components/buttons/Button";
 import FancyToggleSwitch from "@/components/switches/FancyToggleSwitch";
 import { HelpText } from "@/components/typography/HelpText";
 import { Input } from "@/components/inputs/Input";
 import { Label } from "@/components/typography/Label";
 import { SectionGroup } from "@/modules/settings/SettingsSection.tsx";
-import { useSettings } from "@/contexts/SettingsContext.tsx";
+import { useAutostartSetting, useSettings } from "@/contexts/SettingsContext.tsx";
 import { ManagementServerSwitch } from "@/components/ManagementServerSwitch.tsx";
 import { ManagementMode, useManagementUrl } from "@/hooks/useManagementUrl.ts";
 import { LanguagePicker } from "@/components/LanguagePicker.tsx";
-import { Autostart } from "@bindings/services";
-import i18next from "@/lib/i18n";
 
 export function SettingsGeneral() {
     const { t } = useTranslation();
     const { config, setField } = useSettings();
+    const { autostart, setAutostartEnabled } = useAutostartSetting();
     const { mode, setMode, setUrl, displayUrl, showError, canSave, save } = useManagementUrl();
 
-    // Autostart lives in the OS login-item registry, not the daemon config, so
-    // it has its own read-on-mount state. supported gates whether we render the
-    // toggle at all (false on server/mobile builds).
-    const [autostartSupported, setAutostartSupported] = useState(false);
-    const [autostartEnabled, setAutostartEnabled] = useState(false);
-    useEffect(() => {
-        let cancelled = false;
-        (async () => {
-            const supported = await Autostart.Supported();
-            if (cancelled) return;
-            setAutostartSupported(supported);
-            if (!supported) return;
-            setAutostartEnabled(await Autostart.IsEnabled());
-        })().catch(() => {});
-        return () => {
-            cancelled = true;
-        };
-    }, []);
-
-    const onAutostartChange = async (enabled: boolean) => {
-        setAutostartEnabled(enabled);
-        try {
-            await Autostart.SetEnabled(enabled);
-        } catch (e) {
-            setAutostartEnabled(!enabled);
-            await Dialogs.Error({
-                Title: i18next.t("settings.general.autostart.errorTitle"),
-                Message: String(e),
-            });
-        }
-    };
-
     const inputRef = useRef<HTMLInputElement>(null);
     const prevMode = useRef(mode);
     useEffect(() => {
@@ -67,22 +33,23 @@ export function SettingsGeneral() {
         <>
             <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")}
                 />
-                {autostartSupported && (
+                <FancyToggleSwitch
+                    value={!config.disableAutoConnect}
+                    onChange={(v) => setField("disableAutoConnect", !v)}
+                    label={t("settings.general.connectOnStartup.label")}
+                    helpText={t("settings.general.connectOnStartup.help")}
+                />
+                {(autostart === null || autostart.supported) && (
                     <FancyToggleSwitch
-                        value={autostartEnabled}
-                        onChange={onAutostartChange}
+                        value={autostart?.enabled ?? false}
+                        onChange={setAutostartEnabled}
+                        loading={autostart === null}
                         label={t("settings.general.autostart.label")}
                         helpText={t("settings.general.autostart.help")}
                     />

client/ui/frontend/src/modules/settings/SettingsPage.tsx

@@ -7,7 +7,10 @@ import { isMacOS } from "@/lib/platform";
 import { AppRightPanel } from "@/layouts/AppRightPanel.tsx";
 import { VerticalTabs } from "@/components/VerticalTabs.tsx";
 import { SettingsNavigation } from "@/modules/settings/SettingsNavigation.tsx";
-import { SettingsProvider } from "@/contexts/SettingsContext.tsx";
+import {
+    AutostartSettingsProvider,
+    SettingsProvider,
+} from "@/contexts/SettingsContext.tsx";
 import { SettingsGeneral } from "@/modules/settings/SettingsGeneral.tsx";
 import { SettingsNetwork } from "@/modules/settings/SettingsNetwork.tsx";
 import { SettingsSecurity } from "@/modules/settings/SettingsSecurity.tsx";
@@ -66,6 +69,7 @@ export const SettingsPage = () => {
             >
                 <SettingsNavigation />
                 <AppRightPanel>
+                    <AutostartSettingsProvider>
                     <ScrollArea.Root
                         key={active}
                         type={"auto"}
@@ -117,6 +121,7 @@ export const SettingsPage = () => {
                             />
                         </ScrollArea.Scrollbar>
                     </ScrollArea.Root>
+                    </AutostartSettingsProvider>
                 </AppRightPanel>
             </VerticalTabs>
         </>