update stuff

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

@@ -1,26 +1,9 @@
 import FancyToggleSwitch from "@/components/FancyToggleSwitch";
-import { CardSelect } from "@/components/CardSelect.tsx";
 import { SectionGroup } from "@/modules/settings/SettingsSection.tsx";
-import {
-    useAppearance,
-    type AppearanceView,
-} from "@/modules/appearance/AppearanceContext.tsx";
-import simpleScreen from "@/assets/screens/simple.png";
-import advancedScreen from "@/assets/screens/advanced.png";
-
-const ScreenPreview = ({ src, alt }: { src: string; alt: string }) => (
-    <img
-        src={src}
-        alt={alt}
-        draggable={false}
-        className={"h-full w-full object-contain select-none"}
-    />
-);
+import { useAppearance } from "@/modules/appearance/AppearanceContext.tsx";
 
 export function SettingsAppearance() {
     const {
-        view,
-        setView,
         showPeersNav,
         showResourcesNav,
         showExitNodeNav,
@@ -30,59 +13,37 @@ export function SettingsAppearance() {
     } = useAppearance();
 
     return (
-        <>
-            <SectionGroup title={"View"}>
-                <CardSelect
-                    value={view}
-                    onChange={(v) => setView(v as AppearanceView)}
-                >
-                    <CardSelect.Option
-                        value={"default"}
-                        title={"Simple"}
-                        description={"Streamlined view with essential controls."}
-                        preview={<ScreenPreview src={simpleScreen} alt={"Simple view"} />}
-                    />
-                    <CardSelect.Option
-                        value={"advanced"}
-                        title={"Advanced"}
-                        description={"All details and power-user options visible."}
-                        preview={<ScreenPreview src={advancedScreen} alt={"Advanced view"} />}
-                    />
-                </CardSelect>
-            </SectionGroup>
-
-            <SectionGroup title={"Interface"}>
-                <FancyToggleSwitch
-                    value={showPeersNav}
-                    onChange={(v) => setField("showPeersNav", v)}
-                    label={"Peers"}
-                    helpText={"Show the Peers item in the side navigation."}
-                />
-                <FancyToggleSwitch
-                    value={showResourcesNav}
-                    onChange={(v) => setField("showResourcesNav", v)}
-                    label={"Resources"}
-                    helpText={"Show the Resources item in the side navigation."}
-                />
-                <FancyToggleSwitch
-                    value={showExitNodeNav}
-                    onChange={(v) => setField("showExitNodeNav", v)}
-                    label={"Exit Node"}
-                    helpText={"Show the active exit node in the side navigation."}
-                />
-                <FancyToggleSwitch
-                    value={showProfileSelector}
-                    onChange={(v) => setField("showProfileSelector", v)}
-                    label={"Profile Selector"}
-                    helpText={"Show the profile selector in the header."}
-                />
-                <FancyToggleSwitch
-                    value={showSettingsButton}
-                    onChange={(v) => setField("showSettingsButton", v)}
-                    label={"Settings Button"}
-                    helpText={"Show the settings button in the header."}
-                />
-            </SectionGroup>
-        </>
+        <SectionGroup title={"Interface"}>
+            <FancyToggleSwitch
+                value={showPeersNav}
+                onChange={(v) => setField("showPeersNav", v)}
+                label={"Peers"}
+                helpText={"Show the Peers item in the side navigation."}
+            />
+            <FancyToggleSwitch
+                value={showResourcesNav}
+                onChange={(v) => setField("showResourcesNav", v)}
+                label={"Resources"}
+                helpText={"Show the Resources item in the side navigation."}
+            />
+            <FancyToggleSwitch
+                value={showExitNodeNav}
+                onChange={(v) => setField("showExitNodeNav", v)}
+                label={"Exit Node"}
+                helpText={"Show the active exit node in the side navigation."}
+            />
+            <FancyToggleSwitch
+                value={showProfileSelector}
+                onChange={(v) => setField("showProfileSelector", v)}
+                label={"Profile Selector"}
+                helpText={"Show the profile selector in the header."}
+            />
+            <FancyToggleSwitch
+                value={showSettingsButton}
+                onChange={(v) => setField("showSettingsButton", v)}
+                label={"Settings Button"}
+                helpText={"Show the settings button in the header."}
+            />
+        </SectionGroup>
     );
 }

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

@@ -7,11 +7,15 @@ import {
     useState,
     type ReactNode,
 } from "react";
+import { Dialogs } from "@wailsio/runtime";
 import { Settings as SettingsSvc } from "@bindings/services";
 import type { Config } from "@bindings/services/models.js";
 import { useProfile } from "@/modules/profile/ProfileContext.tsx";
 import { SkeletonSettings } from "@/modules/skeletons/SkeletonSettings.tsx";
 
+const errorMessage = (e: unknown) =>
+    e instanceof Error ? e.message : String(e);
+
 const SAVE_DEBOUNCE_MS = 400;
 
 type SettingsContextValue = {
@@ -35,7 +39,6 @@ export const useSettings = () => {
 const useSettingsState = () => {
     const { username, activeProfile, loaded: profileLoaded } = useProfile();
     const [config, setConfig] = useState<Config | null>(null);
-    const [error, setError] = useState<string | null>(null);
     const saveTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
 
     useEffect(() => {
@@ -47,9 +50,11 @@ const useSettingsState = () => {
                     username,
                 });
                 setConfig(c);
-                setError(null);
             } catch (e) {
-                setError(String(e));
+                await Dialogs.Error({
+                    Title: "Load Settings Failed",
+                    Message: errorMessage(e),
+                });
             }
         })();
     }, [profileLoaded, activeProfile, username]);
@@ -75,9 +80,11 @@ const useSettingsState = () => {
                     profileName: activeProfile,
                     username,
                 });
-                setError(null);
             } catch (e) {
-                setError(String(e));
+                await Dialogs.Error({
+                    Title: "Save Settings Failed",
+                    Message: errorMessage(e),
+                });
             }
         },
         [activeProfile, username],
@@ -135,33 +142,29 @@ const useSettingsState = () => {
         [config, save],
     );
 
-    return { config, error, setField, saveField, saveFields, saveNow };
+    return { config, setField, saveField, saveFields, saveNow };
 };
 
 export const SettingsProvider = ({ children }: { children: ReactNode }) => {
-    const { config, error, setField, saveField, saveFields, saveNow } = useSettingsState();
+    const { config, setField, saveField, saveFields, saveNow } = useSettingsState();
 
-    // TODO: Better displaying of errors
     return (
-        <>
-            {error && <p className={"pb-6 text-sm text-red-500"}>{error}</p>}
-            <div className={"flex-1 min-h-0 overflow-y-auto"}>
-                {!config ? (
-                    <SkeletonSettings />
-                ) : (
-                    <SettingsContext.Provider
-                        value={{
-                            config,
-                            setField,
-                            saveField,
-                            saveFields,
-                            saveNow,
-                        }}
-                    >
-                        {children}
-                    </SettingsContext.Provider>
-                )}
-            </div>
-        </>
+        <div className={"flex-1 min-h-0 overflow-y-auto"}>
+            {!config ? (
+                <SkeletonSettings />
+            ) : (
+                <SettingsContext.Provider
+                    value={{
+                        config,
+                        setField,
+                        saveField,
+                        saveFields,
+                        saveNow,
+                    }}
+                >
+                    {children}
+                </SettingsContext.Provider>
+            )}
+        </div>
     );
 };

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

@@ -31,8 +31,14 @@ export function SettingsTroubleshooting() {
         reset,
     } = useDebugBundleContext();
 
-    if (stage.kind === "done" || stage.kind === "error") {
-        return <ResultSection stage={stage} onClose={reset} />;
+    if (stage.kind === "done") {
+        return (
+            <DoneResult
+                result={stage.result}
+                uploaded={stage.uploadAttempted}
+                onClose={reset}
+            />
+        );
     }
     if (stage.kind !== "idle") {
         return <ProgressSection stage={stage} onCancel={cancel} />;
@@ -127,30 +133,6 @@ function ProgressSection({ stage, onCancel }: { stage: DebugStage; onCancel: ()
     );
 }
 
-function ResultSection({
-    stage,
-    onClose,
-}: {
-    stage: Extract<DebugStage, { kind: "done" } | { kind: "error" }>;
-    onClose: () => void;
-}) {
-    if (stage.kind === "error") {
-        return (
-            <StatusPanel
-                variant={"error"}
-                title={"Bundle failed"}
-                description={stage.message}
-                actions={
-                    <Button variant={"secondary"} size={"xs"} onClick={onClose}>
-                        Close
-                    </Button>
-                }
-            />
-        );
-    }
-    return <DoneResult result={stage.result} uploaded={stage.uploadAttempted} onClose={onClose} />;
-}
-
 function DoneResult({
     result,
     uploaded,

client/ui/frontend/src/modules/settings/useManagementUrl.ts

@@ -1,4 +1,5 @@
 import { useEffect, useState } from "react";
+import { Dialogs } from "@wailsio/runtime";
 import { useSettings } from "@/modules/settings/SettingsContext.tsx";
 
 export enum ManagementMode {
@@ -52,13 +53,29 @@ export function useManagementUrl() {
     }, [config.managementUrl]);
 
     const setMode = (next: ManagementMode) => {
-        setModeState(next);
         if (
             next === ManagementMode.Cloud &&
             config.managementUrl !== CLOUD_MANAGEMENT_URL
         ) {
-            void saveField("managementUrl", CLOUD_MANAGEMENT_URL);
+            // Switching from a self-hosted management server to NetBird Cloud
+            // re-points the client at a different deployment and forces a
+            // reconnect/re-login. Confirm before applying.
+            void Dialogs.Warning({
+                Title: "Switch to NetBird Cloud?",
+                Message:
+                    "This will disconnect from your self-hosted management server and reconnect to NetBird Cloud. You may need to log in again.",
+                Buttons: [
+                    { Label: "Cancel", IsCancel: true, IsDefault: true },
+                    { Label: "Switch to Cloud" },
+                ],
+            }).then((result) => {
+                if (result !== "Switch to Cloud") return;
+                setModeState(ManagementMode.Cloud);
+                void saveField("managementUrl", CLOUD_MANAGEMENT_URL);
+            });
+            return;
         }
+        setModeState(next);
     };
 
     const normalizedUrl = normalizeManagementUrl(url);