[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/dialog/ConfirmDialog.tsx

@@ -0,0 +1,35 @@
+import { type ReactNode, forwardRef } from "react";
+import { cn } from "@/lib/cn.ts";
+import { isMacOS } from "@/lib/platform.ts";
+
+type ConfirmDialogProps = {
+    children: ReactNode;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+};
+
+export const ConfirmDialog = forwardRef<HTMLDivElement, ConfirmDialogProps>(function ConfirmDialog(
+    { children, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy },
+    ref,
+) {
+    return (
+        <dialog
+            open
+            aria-label={ariaLabel}
+            aria-labelledby={ariaLabelledBy}
+            className={
+                "wails-draggable static m-0 flex max-h-none w-full max-w-none select-none flex-col items-center border-0 bg-transparent p-0 text-inherit"
+            }
+        >
+            <div
+                ref={ref}
+                className={cn(
+                    "flex flex-col items-center gap-5 px-8 pb-7 pt-6 text-center",
+                    isMacOS() && "pt-10",
+                )}
+            >
+                {children}
+            </div>
+        </dialog>
+    );
+});

client/ui/frontend/src/components/dialog/ConfirmModal.tsx

@@ -0,0 +1,84 @@
+import { type ReactNode } from "react";
+import { useTranslation } from "react-i18next";
+import * as Dialog from "@/components/dialog/Dialog";
+import { Button } from "@/components/buttons/Button";
+import { DialogHeading } from "@/components/dialog/DialogHeading";
+import { DialogDescription } from "@/components/dialog/DialogDescription";
+import { DialogActions } from "@/components/dialog/DialogActions";
+
+type ConfirmModalProps = {
+    open: boolean;
+    title: ReactNode;
+    description: ReactNode;
+    confirmLabel: string;
+    cancelLabel?: string;
+    danger?: boolean;
+    busy?: boolean;
+    onConfirm: () => void;
+    onCancel: () => void;
+};
+
+export const ConfirmModal = ({
+    open,
+    title,
+    description,
+    confirmLabel,
+    cancelLabel,
+    danger = false,
+    busy = false,
+    onConfirm,
+    onCancel,
+}: ConfirmModalProps) => {
+    const { t } = useTranslation();
+    const resolvedCancel = cancelLabel ?? t("common.cancel");
+
+    const srTitle = typeof title === "string" ? title : undefined;
+    const srDescription = typeof description === "string" ? description : undefined;
+
+    return (
+        <Dialog.Root
+            open={open}
+            onOpenChange={(next) => {
+                if (!next && !busy) onCancel();
+            }}
+        >
+            <Dialog.Content
+                maxWidthClass={"max-w-sm"}
+                showClose={false}
+                className={"py-5"}
+                srTitle={srTitle}
+                srDescription={srDescription}
+                onOpenAutoFocus={(e) => e.preventDefault()}
+            >
+                <div className={"flex flex-col gap-5 px-5"}>
+                    <div className={"flex flex-col gap-1 pl-1"}>
+                        <DialogHeading align={"left"}>{title}</DialogHeading>
+                        <DialogDescription align={"left"} className={"whitespace-pre-line"}>
+                            {description}
+                        </DialogDescription>
+                    </div>
+
+                    <DialogActions className={"flex-row justify-end gap-2.5"}>
+                        <Button
+                            variant={"secondary"}
+                            size={"sm"}
+                            disabled={busy}
+                            onClick={onCancel}
+                        >
+                            {resolvedCancel}
+                        </Button>
+                        <Button
+                            autoFocus
+                            variant={danger ? "danger" : "primary"}
+                            size={"sm"}
+                            disabled={busy}
+                            onClick={onConfirm}
+                        >
+                            {confirmLabel}
+                        </Button>
+                    </DialogActions>
+                </div>
+            </Dialog.Content>
+        </Dialog.Root>
+    );
+};

client/ui/frontend/src/components/dialog/Dialog.tsx

@@ -0,0 +1,159 @@
+import {
+    forwardRef,
+    type ComponentPropsWithoutRef,
+    type ElementRef,
+    type HTMLAttributes,
+} from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
+import { X } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import { cn } from "@/lib/cn";
+
+export const Root = DialogPrimitive.Root;
+
+type OverlayProps = ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay> & {
+    exitAnimation?: boolean;
+};
+
+const Overlay = forwardRef<ElementRef<typeof DialogPrimitive.Overlay>, OverlayProps>(
+    function DialogOverlay({ className, exitAnimation = false, ...props }, ref) {
+        return (
+            <DialogPrimitive.Overlay
+                ref={ref}
+                className={cn(
+                    "fixed inset-0 z-50 grid items-center justify-items-center overflow-y-auto px-10 py-16",
+                    "bg-black/60",
+                    "data-[state=open]:animate-in data-[state=open]:fade-in-0",
+                    exitAnimation &&
+                        "data-[state=closed]:animate-out data-[state=closed]:fade-out-0",
+                    "duration-150 ease-out",
+                    className,
+                )}
+                {...props}
+            />
+        );
+    },
+);
+
+type ContentProps = ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
+    showClose?: boolean;
+    maxWidthClass?: string;
+    exitAnimation?: boolean;
+    srTitle?: string;
+    srDescription?: string;
+};
+
+export const Content = forwardRef<ElementRef<typeof DialogPrimitive.Content>, ContentProps>(
+    function DialogContent(
+        {
+            className,
+            children,
+            showClose = true,
+            maxWidthClass = "max-w-md",
+            exitAnimation = false,
+            srTitle,
+            srDescription,
+            ...props
+        },
+        ref,
+    ) {
+        const { t } = useTranslation();
+        return (
+            <DialogPrimitive.Portal>
+                <Overlay exitAnimation={exitAnimation}>
+                    <DialogPrimitive.Content
+                        ref={ref}
+                        className={cn(
+                            "relative z-[52] mx-auto w-full outline-none ring-0",
+                            "focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0",
+                            "rounded-lg border border-nb-gray-900 bg-nb-gray py-7 shadow-2xl",
+                            "data-[state=open]:animate-in data-[state=open]:fade-in-0",
+                            "data-[state=open]:zoom-in-95 data-[state=open]:slide-in-from-left-1",
+                            exitAnimation &&
+                                "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:slide-out-to-left-1",
+                            "duration-150 ease-out",
+                            maxWidthClass,
+                            className,
+                        )}
+                        onClick={(e) => e.stopPropagation()}
+                        {...props}
+                    >
+                        <VisuallyHidden asChild>
+                            <DialogPrimitive.Title>
+                                {srTitle ?? t("common.netbird")}
+                            </DialogPrimitive.Title>
+                        </VisuallyHidden>
+                        {srDescription && (
+                            <VisuallyHidden asChild>
+                                <DialogPrimitive.Description>
+                                    {srDescription}
+                                </DialogPrimitive.Description>
+                            </VisuallyHidden>
+                        )}
+                        {children}
+                        {showClose && (
+                            <DialogPrimitive.Close
+                                className={cn(
+                                    "absolute right-3 top-3 z-10 rounded-md p-3 transition-colors",
+                                    "text-nb-gray-300 hover:text-nb-gray-100",
+                                    "focus:outline-none disabled:pointer-events-none",
+                                )}
+                                aria-label={t("common.close")}
+                            >
+                                <X className={"h-4 w-4"} aria-hidden={"true"} />
+                            </DialogPrimitive.Close>
+                        )}
+                    </DialogPrimitive.Content>
+                </Overlay>
+            </DialogPrimitive.Portal>
+        );
+    },
+);
+
+export const Title = forwardRef<
+    ElementRef<typeof DialogPrimitive.Title>,
+    ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(function DialogTitle({ className, ...props }, ref) {
+    return (
+        <DialogPrimitive.Title
+            ref={ref}
+            className={cn(
+                "text-md font-semibold leading-none tracking-tight text-nb-gray-50",
+                className,
+            )}
+            {...props}
+        />
+    );
+});
+
+export const Description = forwardRef<
+    ElementRef<typeof DialogPrimitive.Description>,
+    ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(function DialogDescription({ className, ...props }, ref) {
+    return (
+        <DialogPrimitive.Description
+            ref={ref}
+            className={cn("mt-2 text-sm leading-snug text-nb-gray-400", className)}
+            {...props}
+        />
+    );
+});
+
+type FooterProps = HTMLAttributes<HTMLDivElement> & {
+    separator?: boolean;
+};
+
+export const Footer = ({ className, separator = true, ...props }: FooterProps) => (
+    <div className={cn(separator && "mt-6 border-t border-nb-gray-900")}>
+        <div
+            className={cn(
+                "flex flex-col-reverse gap-3 sm:flex-row sm:justify-end",
+                "[&>*]:w-full sm:[&>*]:w-auto",
+                "px-8 pt-6",
+                className,
+            )}
+            {...props}
+        />
+    </div>
+);

client/ui/frontend/src/components/dialog/DialogActions.tsx

@@ -0,0 +1,13 @@
+import { type ReactNode } from "react";
+import { cn } from "@/lib/cn";
+
+type DialogActionsProps = {
+    children: ReactNode;
+    className?: string;
+};
+
+export const DialogActions = ({ children, className }: DialogActionsProps) => (
+    <div className={cn("wails-no-draggable mx-auto flex w-full flex-col gap-3", className)}>
+        {children}
+    </div>
+);

client/ui/frontend/src/components/dialog/DialogDescription.tsx

@@ -0,0 +1,26 @@
+import { type ReactNode } from "react";
+import { cn } from "@/lib/cn";
+
+type DialogAlign = "left" | "center" | "right";
+
+const alignClass: Record<DialogAlign, string> = {
+    left: "text-left",
+    center: "text-center",
+    right: "text-right",
+};
+
+type DialogDescriptionProps = {
+    children: ReactNode;
+    className?: string;
+    align?: DialogAlign;
+};
+
+export const DialogDescription = ({
+    children,
+    className,
+    align = "center",
+}: DialogDescriptionProps) => (
+    <p className={cn("w-full select-none text-sm text-nb-gray-300", alignClass[align], className)}>
+        {children}
+    </p>
+);

client/ui/frontend/src/components/dialog/DialogHeading.tsx

@@ -0,0 +1,35 @@
+import { type ReactNode } from "react";
+import { cn } from "@/lib/cn";
+
+type DialogAlign = "left" | "center" | "right";
+
+const alignClass: Record<DialogAlign, string> = {
+    left: "text-left",
+    center: "text-center",
+    right: "text-right",
+};
+
+type DialogHeadingProps = {
+    children: ReactNode;
+    className?: string;
+    align?: DialogAlign;
+    id?: string;
+};
+
+export const DialogHeading = ({
+    children,
+    className,
+    align = "center",
+    id,
+}: DialogHeadingProps) => (
+    <h2
+        id={id}
+        className={cn(
+            "w-full select-none text-base font-semibold text-nb-gray-50",
+            alignClass[align],
+            className,
+        )}
+    >
+        {children}
+    </h2>
+);