[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>
2026-10-06 21:49:08 +02:00 · 2026-07-06 13:47:16 +02:00
parent c9d387bd0d
commit 91acb8147c
389 changed files with 46269 additions and 6684 deletions
@@ -0,0 +1,114 @@
+import { MainConnectionStatusSwitch } from "@/modules/main/MainConnectionStatusSwitch.tsx";
+import { MainExitNodeSwitcher } from "@/modules/main/MainExitNodeSwitcher.tsx";
+import { MainHeader } from "@/modules/main/MainHeader.tsx";
+import { AppRightPanel } from "@/layouts/AppRightPanel.tsx";
+import { Navigation } from "@/modules/main/advanced/Navigation.tsx";
+import { cn } from "@/lib/cn";
+import { NavSectionProvider, useNavSection } from "@/contexts/NavSectionContext";
+import { ViewModeProvider, useViewMode } from "@/contexts/ViewModeContext";
+import { useEffect } from "react";
+import { NotConnectedState } from "@/components/empty-state/NotConnectedState";
+import { useStatus } from "@/contexts/StatusContext";
+import { Peers } from "@/modules/main/advanced/peers/Peers";
+import { Networks } from "@/modules/main/advanced/networks/Networks";
+import { NetworksProvider } from "@/contexts/NetworksContext";
+import { PeerDetailProvider, usePeerDetail } from "@/contexts/PeerDetailContext";
+import { useRestrictions } from "@/contexts/RestrictionsContext";
+import { PeerDetailPanel } from "@/modules/main/advanced/peers/PeerDetailPanel";
+import { isWindows } from "@/lib/platform.ts";
+
+export const MainPage = () => {
+    return (
+        <ViewModeProvider>
+            <MainHeader />
+            <NetworksProvider>
+                <PeerDetailProvider>
+                    <MainBody />
+                </PeerDetailProvider>
+            </NetworksProvider>
+        </ViewModeProvider>
+    );
+};
+
+const MainBody = () => {
+    const { viewMode, setViewMode } = useViewMode();
+    const { mdm, features } = useRestrictions();
+
+    // Force flip the view if MDM disabled advanced
+    useEffect(() => {
+        if (mdm.disableAdvancedView && viewMode === "advanced") {
+            setViewMode("default");
+        }
+    }, [mdm.disableAdvancedView, viewMode, setViewMode]);
+
+    const isAdvanced = viewMode === "advanced";
+
+    return (
+        <main className={"wails-draggable flex min-h-0 flex-1"}>
+            {/* Windows narrower width compensates for the OS frame Wails counts differently than macOS.
+                See https://github.com/wailsapp/wails/issues/3260 */}
+            <div
+                className={cn(
+                    "relative flex shrink-0 flex-col items-center",
+                    isWindows() ? "w-[364px]" : "w-[380px]",
+                )}
+            >
+                <MainConnectionStatusSwitch />
+                {!features.disableNetworks && (
+                    <div className={"wails-no-draggable absolute bottom-5 left-5 right-5"}>
+                        <MainExitNodeSwitcher />
+                    </div>
+                )}
+            </div>
+            {isAdvanced && (
+                <NavSectionProvider>
+                    <AdvancedAppRightPanel />
+                </NavSectionProvider>
+            )}
+        </main>
+    );
+};
+
+const AdvancedAppRightPanel = () => {
+    const { section } = useNavSection();
+    const { selected } = usePeerDetail();
+    const { status } = useStatus();
+    const isConnected = status?.status === "Connected";
+
+    return (
+        <AppRightPanel
+            overlay={<PeerDetailPanel />}
+            overlayOpen={selected !== null}
+            className={"m-5 ml-0"}
+        >
+            <div
+                ref={(el) => {
+                    if (!el) return;
+                    if (isConnected) el.removeAttribute("inert");
+                    else el.setAttribute("inert", "");
+                }}
+                className={cn(
+                    "flex min-h-0 min-w-0 flex-1 flex-col",
+                    !isConnected && "pointer-events-none select-none",
+                )}
+                aria-hidden={!isConnected}
+            >
+                <Navigation />
+                <div
+                    role={"tabpanel"}
+                    id={`nb-tabpanel-${section}`}
+                    aria-labelledby={`nb-tab-${section}`}
+                    className={"flex min-h-0 flex-1 flex-col"}
+                >
+                    {section === "peers" && <Peers />}
+                    {section === "networks" && <Networks />}
+                </div>
+            </div>
+            {!isConnected && (
+                <div className={"pointer-events-auto absolute inset-0 z-20 flex bg-nb-gray-940"}>
+                    <NotConnectedState />
+                </div>
+            )}
+        </AppRightPanel>
+    );
+};