[management,client] 0.75.0 release with new desktop UI (#6473)

- **Wails v3 application** (`client/ui`) with a React + TypeScript + Tailwind frontend replacing the Fyne UI: main connection view, exit-node switcher, networks/peers browser with detail panels, profile management, settings (general, network, SSH, security, troubleshooting, appearance), debug-bundle creation, and a first-run welcome flow.
- **Internationalization**: go-i18n bundle with 9 locales (en, de, es, fr, hu, it, pt, ru, zh-CN) shared between the tray and the frontend.
- **New system tray** implementation with per-platform theme-aware icons, including a native XEmbed host for Linux (`xembed_tray_linux.c`) and a Linux theme watcher.
- **Session handling**: auth session watcher (`client/internal/auth/sessionwatch`), pending login flow, session-expiration dialog and tray notifications, and `netbird login` improvements.
- **Daemon API extensions** (`daemon.proto`): status stream subscription, event stream, networks/exit-node selection endpoints, and richer full status — with probe throttling on the daemon side to protect against UI-driven request storms.
- **UI preferences store** persisted per profile, autostart management via the daemon (single source of truth in HKCU on Windows).
- **Build system**: Taskfile-based builds per platform (macOS, Linux, Windows), Docker cross-compilation images, MSIX/NSIS/nfpm/AppImage packaging, and a new `frontend-ui` CI workflow.

Co-authored-by: Zoltan Papp <zoltan.pmail@gmail.com>
Co-authored-by: Eduard Gert <kontakt@eduardgert.de>
Co-authored-by: braginini <bangvalo@gmail.com>
Co-authored-by: Pascal Fischer <32096965+pascal-fischer@users.noreply.github.com>
Co-authored-by: riccardom <riccardomanfrin@gmail.com>

client/ui/frontend/src/components/switches/FancyToggleSwitch.tsx

@@ -0,0 +1,102 @@
+import React from "react";
+import { HelpText } from "@/components/typography/HelpText";
+import { Label } from "@/components/typography/Label";
+import { ToggleSwitch } from "@/components/switches/ToggleSwitch";
+import { cn } from "@/lib/cn";
+
+interface Props {
+    value: boolean;
+    onChange: (value: boolean) => void;
+    helpText?: React.ReactNode;
+    label?: React.ReactNode;
+    children?: React.ReactNode;
+    disabled?: boolean;
+    loading?: boolean;
+    dataCy?: string;
+    className?: string;
+    labelClassName?: string;
+    textWrapperClassName?: string;
+}
+
+export default function FancyToggleSwitch({
+    value,
+    onChange,
+    helpText,
+    label,
+    children,
+    disabled = false,
+    loading = false,
+    dataCy,
+    className,
+    labelClassName,
+    textWrapperClassName = "max-w-lg",
+}: Readonly<Props>) {
+    const switchId = React.useId();
+    const descriptionId = React.useId();
+
+    if (loading) {
+        const shimmer =
+            "text-transparent select-none rounded bg-[#25282d] box-decoration-clone animate-pulse";
+        return (
+            <div
+                role={"status"}
+                aria-busy={"true"}
+                aria-live={"polite"}
+                className={cn("inline-block w-full text-left", className)}
+            >
+                <div className={"flex justify-between gap-10"}>
+                    <div className={cn(textWrapperClassName)}>
+                        <Label className={labelClassName}>
+                            <span className={shimmer}>{label}</span>
+                        </Label>
+                        <HelpText margin={false}>
+                            <span className={cn(shimmer, "text-[0.6rem] leading-relaxed")}>
+                                {helpText}
+                            </span>
+                        </HelpText>
+                    </div>
+                    <div className={"mt-2 pr-1"}>
+                        <div
+                            aria-hidden={"true"}
+                            className={"h-[24px] w-[44px] animate-pulse rounded-full bg-[#25282d]"}
+                        />
+                    </div>
+                </div>
+            </div>
+        );
+    }
+
+    return (
+        <div
+            {...(disabled ? { inert: "" } : {})}
+            className={cn(
+                "relative z-[1] cursor-default transition-all duration-300",
+                "inline-block w-full text-left",
+                disabled && "pointer-events-none opacity-30",
+                className,
+            )}
+        >
+            <div className={"flex justify-between gap-10"}>
+                <div className={cn(textWrapperClassName)}>
+                    <Label htmlFor={switchId} className={labelClassName}>
+                        {label}
+                    </Label>
+                    <HelpText margin={false}>
+                        <span id={descriptionId}>{helpText}</span>
+                    </HelpText>
+                </div>
+                <div className={"mt-2 pr-1"}>
+                    <ToggleSwitch
+                        id={switchId}
+                        checked={value}
+                        onCheckedChange={onChange}
+                        disabled={disabled}
+                        dataCy={dataCy}
+                        aria-describedby={helpText ? descriptionId : undefined}
+                    />
+                </div>
+            </div>
+            {children && value ? <div className={"mt-4"}>{children}</div> : null}
+        </div>
+    );
+}

client/ui/frontend/src/components/switches/SwitchItem.tsx

@@ -0,0 +1,42 @@
+import * as RadioGroup from "@radix-ui/react-radio-group";
+import { motion } from "framer-motion";
+import { type ReactNode } from "react";
+import { cn } from "@/lib/cn";
+import { useSwitchItemGroup } from "@/components/switches/SwitchItemGroup";
+
+type Props = {
+    value: string;
+    children: ReactNode;
+    className?: string;
+};
+
+export const SwitchItem = ({ value, children, className }: Props) => {
+    const { value: activeValue, layoutId } = useSwitchItemGroup();
+    const active = activeValue === value;
+
+    return (
+        <RadioGroup.Item
+            value={value}
+            className={cn(
+                "relative inline-flex items-center justify-center gap-1 rounded-md px-3.5 py-2 text-xs font-semibold",
+                "cursor-default outline-none",
+                "focus-visible:ring-2 focus-visible:ring-white/60 focus-visible:ring-offset-2 focus-visible:ring-offset-nb-gray-940",
+                active
+                    ? "text-nb-gray-100"
+                    : "text-nb-gray-400 hover:text-nb-gray-200 active:text-nb-gray-100",
+                className,
+            )}
+        >
+            {active && (
+                <motion.span
+                    layoutId={layoutId}
+                    className={"absolute inset-0 rounded-md bg-nb-gray-700"}
+                    transition={{ type: "spring", stiffness: 500, damping: 35 }}
+                />
+            )}
+            <span className={"relative inline-flex items-center justify-center gap-1"}>
+                {children}
+            </span>
+        </RadioGroup.Item>
+    );
+};

client/ui/frontend/src/components/switches/SwitchItemGroup.tsx

@@ -0,0 +1,60 @@
+import * as RadioGroup from "@radix-ui/react-radio-group";
+import { createContext, type ReactNode, useContext, useId, useMemo } from "react";
+import { cn } from "@/lib/cn";
+
+type SwitchItemGroupContextValue = {
+    value: string;
+    layoutId: string;
+};
+
+const SwitchItemGroupContext = createContext<SwitchItemGroupContextValue | null>(null);
+
+export const useSwitchItemGroup = () => {
+    const ctx = useContext(SwitchItemGroupContext);
+    if (!ctx) {
+        throw new Error("SwitchItem must be used inside a SwitchItemGroup");
+    }
+    return ctx;
+};
+
+type Props = {
+    value: string;
+    onChange: (value: string) => void;
+    children: ReactNode;
+    className?: string;
+    disabled?: boolean;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+};
+
+export const SwitchItemGroup = ({
+    value,
+    onChange,
+    children,
+    className,
+    disabled = false,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+}: Props) => {
+    const layoutId = useId();
+    const contextValue = useMemo(() => ({ value, layoutId }), [value, layoutId]);
+
+    return (
+        <SwitchItemGroupContext.Provider value={contextValue}>
+            <RadioGroup.Root
+                value={value}
+                onValueChange={onChange}
+                disabled={disabled}
+                aria-label={ariaLabel}
+                aria-labelledby={ariaLabelledBy}
+                className={cn(
+                    "flex shrink-0 overflow-hidden rounded-lg border border-nb-gray-850 bg-nb-gray-910 p-1",
+                    disabled && "pointer-events-none opacity-50",
+                    className,
+                )}
+            >
+                {children}
+            </RadioGroup.Root>
+        </SwitchItemGroupContext.Provider>
+    );
+};

client/ui/frontend/src/components/switches/ToggleSwitch.tsx

@@ -0,0 +1,77 @@
+"use client";
+
+import * as SwitchPrimitives from "@radix-ui/react-switch";
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+import { cn } from "@/lib/cn";
+
+type SwitchVariants = VariantProps<typeof switchVariants>;
+
+const switchVariants = cva("", {
+    variants: {
+        size: {
+            default: "h-[24px] w-[44px]",
+            small: "h-[18px] w-[36px]",
+            large: "h-[36px] w-[66px]",
+        },
+        variant: {
+            default: [
+                "dark:data-[state=checked]:bg-netbird dark:data-[state=unchecked]:bg-nb-gray-700",
+                "dark:data-[state=checked]:hover:bg-netbird-500 dark:data-[state=unchecked]:hover:bg-nb-gray-600",
+                "data-[state=checked]:bg-neutral-900 data-[state=unchecked]:bg-neutral-200",
+                "data-[state=checked]:hover:bg-neutral-800 data-[state=unchecked]:hover:bg-neutral-300",
+            ],
+            "red-green": [
+                "dark:data-[state=checked]:bg-red-600 dark:data-[state=unchecked]:bg-nb-gray-700",
+                "dark:data-[state=checked]:hover:bg-red-500 dark:data-[state=unchecked]:hover:bg-nb-gray-600",
+                "data-[state=checked]:bg-red-500 data-[state=unchecked]:bg-red-200",
+                "data-[state=checked]:hover:bg-red-400 data-[state=unchecked]:hover:bg-red-300",
+            ],
+            red: [
+                "dark:data-[state=checked]:bg-red-600 dark:data-[state=unchecked]:bg-nb-gray-700",
+                "dark:data-[state=checked]:hover:bg-red-500 dark:data-[state=unchecked]:hover:bg-nb-gray-600",
+                "data-[state=checked]:bg-red-500 data-[state=unchecked]:bg-red-200",
+                "data-[state=checked]:hover:bg-red-400 data-[state=unchecked]:hover:bg-red-300",
+            ],
+        },
+        "thumb-size": {
+            default:
+                "h-5 w-5 data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0",
+            small: "h-[14px] w-[14px] data-[state=checked]:translate-x-[17px] data-[state=unchecked]:translate-x-0",
+            large: "h-[30px] w-[30px] data-[state=checked]:translate-x-[31px] data-[state=unchecked]:translate-x-[1px]",
+        },
+    },
+});
+
+const ToggleSwitch = React.forwardRef<
+    React.ElementRef<typeof SwitchPrimitives.Root>,
+    React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root> &
+        SwitchVariants & { dataCy?: string }
+>(({ className, size = "default", variant = "default", dataCy, disabled, ...props }, ref) => (
+    <SwitchPrimitives.Root
+        disabled={disabled}
+        tabIndex={disabled ? -1 : 0}
+        className={cn(
+            "wails-no-draggable peer inline-flex shrink-0 cursor-default items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/60 focus-visible:ring-offset-2 focus-visible:ring-offset-nb-gray-940 disabled:cursor-not-allowed disabled:opacity-50",
+            className,
+            switchVariants({ size, variant }),
+        )}
+        {...props}
+        data-cy={dataCy}
+        onClick={(e) => {
+            e.stopPropagation();
+            props.onClick?.(e);
+        }}
+        ref={ref}
+    >
+        <SwitchPrimitives.Thumb
+            className={cn(
+                switchVariants({ "thumb-size": size }),
+                "pointer-events-none block rounded-full bg-white shadow-lg ring-0 transition-transform dark:bg-white",
+            )}
+        />
+    </SwitchPrimitives.Root>
+));
+ToggleSwitch.displayName = SwitchPrimitives.Root.displayName;
+
+export { ToggleSwitch };