mirror of
https://github.com/netbirdio/netbird.git
synced 2026-10-07 05:59:06 +02:00
[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>
This commit is contained in:
co-authored by
Zoltan Papp
Eduard Gert
braginini
Pascal Fischer
riccardom
parent
c9d387bd0d
commit
91acb8147c
@@ -0,0 +1,49 @@
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
// Tracks the user's current input modality (keyboard vs pointer) at module
|
||||
// scope, mirroring what @react-aria/interactions does. Radix programmatically
|
||||
// focuses elements like Tabs triggers and Select triggers, which makes the
|
||||
// browser's :focus-visible heuristic light up on mouse-driven interactions too.
|
||||
// Gating focus styles on this hook lets us only paint a focus ring when the
|
||||
// user is actually navigating with the keyboard.
|
||||
// See react-aria's useFocusVisible for context.
|
||||
|
||||
type Modality = "keyboard" | "pointer";
|
||||
|
||||
let currentModality: Modality = "pointer";
|
||||
const subscribers = new Set<(m: Modality) => void>();
|
||||
|
||||
const setModality = (m: Modality) => {
|
||||
if (m === currentModality) return;
|
||||
currentModality = m;
|
||||
subscribers.forEach((cb) => cb(m));
|
||||
};
|
||||
|
||||
const isKeyboardEvent = (e: KeyboardEvent) => {
|
||||
if (e.metaKey || e.ctrlKey || e.altKey) return false;
|
||||
return e.key === "Tab" || e.key === "Escape" || e.key.startsWith("Arrow");
|
||||
};
|
||||
|
||||
if (globalThis.window !== undefined) {
|
||||
globalThis.addEventListener(
|
||||
"keydown",
|
||||
(e) => {
|
||||
if (isKeyboardEvent(e)) setModality("keyboard");
|
||||
},
|
||||
true,
|
||||
);
|
||||
globalThis.addEventListener("pointerdown", () => setModality("pointer"), true);
|
||||
}
|
||||
|
||||
export const useFocusVisible = (): boolean => {
|
||||
const [visible, setVisible] = useState(currentModality === "keyboard");
|
||||
useEffect(() => {
|
||||
setVisible(currentModality === "keyboard");
|
||||
const cb = (m: Modality) => setVisible(m === "keyboard");
|
||||
subscribers.add(cb);
|
||||
return () => {
|
||||
subscribers.delete(cb);
|
||||
};
|
||||
}, []);
|
||||
return visible;
|
||||
};
|
||||
Reference in New Issue
Block a user