[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/modules/main/MainHeader.tsx

@@ -0,0 +1,192 @@
+import { useCallback, useState } from "react";
+import { useTranslation } from "react-i18next";
+import {
+    ArrowUpCircleIcon,
+    Check,
+    MoreVertical,
+    PanelsRightBottom,
+    RectangleVertical,
+    Settings,
+    type LucideIcon,
+} from "lucide-react";
+import { WindowManager } from "@bindings/services";
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuSeparator,
+    DropdownMenuShortcut,
+    DropdownMenuTrigger,
+} from "@/components/DropdownMenu";
+import { IconButton } from "@/components/buttons/IconButton";
+import { ProfileDropdown } from "@/modules/profiles/ProfileDropdown";
+import { useClientVersion } from "@/contexts/ClientVersionContext";
+import { cn } from "@/lib/cn";
+import { formatShortcut, useKeyboardShortcut } from "@/hooks/useKeyboardShortcut";
+import { useViewMode, type ViewMode } from "@/contexts/ViewModeContext";
+import { useRestrictions } from "@/contexts/RestrictionsContext";
+import { isWindows } from "@/lib/platform.ts";
+
+const SETTINGS_SHORTCUT = { key: ",", cmd: true } as const;
+
+export const MainHeader = () => {
+    const { t } = useTranslation();
+    const [menuOpen, setMenuOpen] = useState(false);
+    const { viewMode, setViewMode } = useViewMode();
+    const { updateAvailable } = useClientVersion();
+    const { mdm, features } = useRestrictions();
+
+    const openSettings = useCallback(() => {
+        setMenuOpen(false);
+        WindowManager.OpenSettings("").catch((err: unknown) =>
+            console.error("open settings window failed", err),
+        );
+    }, []);
+
+    useKeyboardShortcut(SETTINGS_SHORTCUT, openSettings);
+
+    const openAbout = () => {
+        setMenuOpen(false);
+        WindowManager.OpenSettings("about").catch((err: unknown) =>
+            console.error("open settings (about) window failed", err),
+        );
+    };
+
+    const openManageProfiles = () => {
+        WindowManager.OpenSettings("profiles").catch((err: unknown) =>
+            console.error("open settings (profiles) window failed", err),
+        );
+    };
+
+    const selectMode = (mode: ViewMode) => {
+        setMenuOpen(false);
+        setViewMode(mode);
+    };
+
+    const profileSlot = features.disableProfiles ? null : (
+        <ProfileDropdown onManageProfiles={openManageProfiles} />
+    );
+
+    const settingsSlot = (
+        <div className={"relative"}>
+            <DropdownMenu modal={false} open={menuOpen} onOpenChange={setMenuOpen}>
+                <DropdownMenuTrigger asChild className={"wails-no-draggable"}>
+                    <IconButton
+                        icon={MoreVertical}
+                        iconClassName={"text-nb-gray-200 wails-no-draggable"}
+                        className={"select-none"}
+                        aria-label={t("header.menu.open")}
+                        aria-haspopup={"menu"}
+                        aria-expanded={menuOpen}
+                    />
+                </DropdownMenuTrigger>
+                <DropdownMenuContent
+                    align={"end"}
+                    sideOffset={8}
+                    className={
+                        "min-w-52 select-none data-[state=closed]:!animate-none data-[state=closed]:!duration-0"
+                    }
+                >
+                    {updateAvailable && (
+                        <>
+                            <DropdownMenuItem onClick={openAbout}>
+                                <div className={"flex items-center gap-2"}>
+                                    <ArrowUpCircleIcon
+                                        size={14}
+                                        className={"text-netbird"}
+                                        aria-hidden={"true"}
+                                    />
+                                    <span className={"text-netbird"}>
+                                        {t("header.menu.updateAvailable")}
+                                    </span>
+                                </div>
+                            </DropdownMenuItem>
+                            <DropdownMenuSeparator />
+                        </>
+                    )}
+                    <DropdownMenuItem onClick={openSettings}>
+                        <div className={"flex w-full items-center gap-2"}>
+                            <Settings size={14} aria-hidden={"true"} />
+                            <span className={"flex-1"}>{t("header.menu.settings")}</span>
+                            <DropdownMenuShortcut>
+                                {formatShortcut(SETTINGS_SHORTCUT)}
+                            </DropdownMenuShortcut>
+                        </div>
+                    </DropdownMenuItem>
+                    {!mdm.disableAdvancedView && (
+                        <>
+                            <DropdownMenuSeparator />
+                            <ViewModeItem
+                                icon={RectangleVertical}
+                                label={t("header.menu.defaultView")}
+                                selected={viewMode === "default"}
+                                onSelect={() => selectMode("default")}
+                            />
+                            <ViewModeItem
+                                icon={PanelsRightBottom}
+                                label={t("header.menu.advancedView")}
+                                selected={viewMode === "advanced"}
+                                onSelect={() => selectMode("advanced")}
+                            />
+                        </>
+                    )}
+                </DropdownMenuContent>
+            </DropdownMenu>
+            {updateAvailable && (
+                <span
+                    aria-hidden={"true"}
+                    className={
+                        "pointer-events-none absolute right-1.5 top-1.5 flex h-2.5 w-2.5 items-center justify-center"
+                    }
+                >
+                    <span
+                        className={
+                            "absolute inset-0 animate-ping rounded-full bg-netbird opacity-60"
+                        }
+                    />
+                    <span className={"relative h-1.5 w-1.5 rounded-full bg-netbird"} />
+                </span>
+            )}
+        </div>
+    );
+
+    return (
+        <header
+            className={cn(
+                "wails-draggable relative z-10 shrink-0 cursor-default",
+                "top-3 flex h-12 items-center",
+            )}
+        >
+            {/* Windows narrower width compensates for the OS frame Wails counts differently than macOS.
+                See https://github.com/wailsapp/wails/issues/3260 */}
+            <div
+                className={cn(
+                    "grid shrink-0 grid-cols-3 items-center",
+                    isWindows() ? "w-[364px]" : "w-[380px]",
+                )}
+            >
+                <div />
+                <div className={"ml-4 flex justify-center"}>{profileSlot}</div>
+                <div />
+            </div>
+            <div className={"absolute right-[1.3rem] top-1/2 -translate-y-1/2"}>{settingsSlot}</div>
+        </header>
+    );
+};
+
+type ViewModeItemProps = {
+    icon: LucideIcon;
+    label: string;
+    selected: boolean;
+    onSelect: () => void;
+};
+
+const ViewModeItem = ({ icon: Icon, label, selected, onSelect }: ViewModeItemProps) => (
+    <DropdownMenuItem onClick={onSelect} role={"menuitemradio"} aria-checked={selected}>
+        <div className={"flex w-full items-center gap-2"}>
+            <Icon size={14} aria-hidden={"true"} />
+            <span className={"flex-1"}>{label}</span>
+            {selected && <Check size={14} className={"text-netbird"} aria-hidden={"true"} />}
+        </div>
+    </DropdownMenuItem>
+);