[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-01 11:09:15 +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,134 @@
+import { type ComponentType, type KeyboardEvent, useEffect, useRef } from "react";
+import { useTranslation } from "react-i18next";
+import { Layers3Icon, type LucideProps, MonitorSmartphoneIcon } from "lucide-react";
+import { cn } from "@/lib/cn";
+import { useNavSection, type NavSection } from "@/contexts/NavSectionContext";
+import { useStatus } from "@/contexts/StatusContext";
+import { useRestrictions } from "@/contexts/RestrictionsContext";
+
+type TabEntry = {
+    value: NavSection;
+    label: string;
+    icon: ComponentType<LucideProps>;
+};
+
+export const Navigation = () => {
+    const { t } = useTranslation();
+    const { section, setSection } = useNavSection();
+    const { status } = useStatus();
+    const { features } = useRestrictions();
+    const isConnected = status?.status === "Connected";
+
+    // Reset back to peers tab if mdm or feature flag flipped it
+    useEffect(() => {
+        if (features.disableNetworks && section === "networks") {
+            setSection("peers");
+        }
+    }, [features.disableNetworks, section, setSection]);
+
+    const tabs: TabEntry[] = [
+        {
+            value: "peers",
+            label: t("nav.peers.title"),
+            icon: MonitorSmartphoneIcon,
+        },
+    ];
+    if (!features.disableNetworks) {
+        tabs.push({
+            value: "networks",
+            label: t("nav.resources.title"),
+            icon: Layers3Icon,
+        });
+    }
+
+    const tabRefs = useRef<Record<string, HTMLButtonElement | null>>({});
+
+    const focusTab = (value: NavSection) => {
+        setSection(value);
+        requestAnimationFrame(() => tabRefs.current[value]?.focus());
+    };
+
+    const handleKeyDown = (e: KeyboardEvent<HTMLButtonElement>) => {
+        const enabled = tabs.filter((t) => isConnected || t.value === section);
+        if (enabled.length < 2) return;
+        const currentIndex = enabled.findIndex((t) => t.value === section);
+        if (currentIndex === -1) return;
+        let nextIndex: number;
+        switch (e.key) {
+            case "ArrowRight":
+                nextIndex = (currentIndex + 1) % enabled.length;
+                break;
+            case "ArrowLeft":
+                nextIndex = (currentIndex - 1 + enabled.length) % enabled.length;
+                break;
+            case "Home":
+                nextIndex = 0;
+                break;
+            case "End":
+                nextIndex = enabled.length - 1;
+                break;
+            default:
+                return;
+        }
+        e.preventDefault();
+        focusTab(enabled[nextIndex].value);
+    };
+
+    return (
+        <div
+            role={"tablist"}
+            aria-orientation={"horizontal"}
+            aria-label={t("nav.peers.title")}
+            className={"wails-no-draggable flex shrink-0 items-stretch"}
+        >
+            {tabs.map((tab, index) => {
+                const isActive = tab.value === section;
+                const isDisabled = !isConnected && !isActive;
+                const isFirst = index === 0;
+                const isLast = index === tabs.length - 1;
+                const Icon = tab.icon;
+                return (
+                    <button
+                        key={tab.value}
+                        ref={(el) => {
+                            tabRefs.current[tab.value] = el;
+                        }}
+                        type={"button"}
+                        role={"tab"}
+                        aria-selected={isActive}
+                        aria-controls={`nb-tabpanel-${tab.value}`}
+                        id={`nb-tab-${tab.value}`}
+                        tabIndex={isActive ? 0 : -1}
+                        onClick={() => setSection(tab.value)}
+                        onKeyDown={handleKeyDown}
+                        disabled={isDisabled}
+                        className={cn(
+                            "group relative flex flex-1 items-center justify-center",
+                            "gap-2.5 px-5 py-3.5",
+                            "outline-none transition-all",
+                            isFirst && "rounded-tl-xl",
+                            isLast && "rounded-tr-xl",
+                            "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-white/60",
+                            isActive ? "text-netbird" : "text-nb-gray-400 hover:text-nb-gray-300",
+                            isDisabled ? "cursor-not-allowed opacity-50" : "cursor-default",
+                        )}
+                    >
+                        <Icon size={14} aria-hidden={"true"} />
+                        <span className={"text-sm font-normal"}>{tab.label}</span>
+                        <span
+                            aria-hidden={"true"}
+                            className={cn(
+                                "absolute inset-x-0 bottom-0 h-px transition-all",
+                                isActive
+                                    ? "bg-netbird"
+                                    : "bg-nb-gray-910 group-hover:bg-nb-gray-700",
+                            )}
+                        />
+                    </button>
+                );
+            })}
+        </div>
+    );
+};
+
+export type { NavSection } from "@/contexts/NavSectionContext";