sendnrw/netbird
2
0
Fork 0
mirror of https://github.com/netbirdio/netbird.git synced 2026-05-12 03:39:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

[client/ui] Add tray icon for needs-login/login-failed states

Browse Source 
The tray now switches to a dedicated lock icon when the daemon reports
NeedsLogin, SessionExpired or LoginFailed — the latter mirrors the CLI,
which groups these three statuses together as "needs authentication"
and prints the same "Run netbird up" prompt. The macOS template variant
reuses the existing error-macos PNG because the project's macOS tray
PNGs use a 2-color (black + transparent) convention that rsvg-convert
of the badge-style SVG sources can't reproduce. The earlier badge-style
SVG sketches in assets/svg/ are removed (they were marked as reference
only and never matched the shipping PNG design).
This commit is contained in:
Zoltan Papp
2026-05-11 13:22:30 +02:00
parent 595dfbb6f1
commit b43a09a1c7
18 changed files with 23 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
client/ui/assets/netbird-systemtray-needs-login-macos.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.5 KiB

BIN
client/ui/assets/netbird-systemtray-needs-login.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.7 KiB

14
client/ui/assets/svg/_base.svg
View File

@@ -1,14 +0,0 @@
<!--
NetBird base mark, centered in a 32×32 viewBox with badge-friendly margins.
Preserved across every state icon as required by the design plan; state
badges sit on top in the bottom-right 12×12 area (x=18..30, y=18..30).
The mark itself is taken verbatim from dashboard/src/assets/netbird.svg
(three orange/red paths) and translated into the 32×32 grid.
-->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none">
<g id="netbird-mark" transform="translate(2 5) scale(0.8)">
<path d="M21.4631 0.523438C17.8173 0.857913 16.0028 2.95675 15.3171 4.01871L4.66406 22.4734H17.5163L30.1929 0.523438H21.4631Z" fill="#F68330"/>
<path d="M17.5265 22.4737L0 3.88525C0 3.88525 19.8177 -1.44128 21.7493 15.1738L17.5265 22.4737Z" fill="#F68330"/>
<path d="M14.9236 4.70563L9.54688 14.0208L17.5158 22.4747L21.7385 15.158C21.0696 9.44682 18.2851 6.32784 14.9236 4.69727" fill="#F05252"/>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 932 B

17
client/ui/assets/svg/appicon.svg
View File

@@ -1,17 +0,0 @@
<!--
App icon source. Rasterized to build/appicon.png by
`task common:generate:icons`, which then drives `wails3 generate icons`
to produce the per-platform .ico / .icns artifacts.
The mark fills ~90% of the canvas width (with vertical centering) so
Windows Explorer and macOS Finder render a recognisable bird at small
sizes. The mark's native aspect (31:23) is wider than tall, so width is
the binding dimension.
-->
<svg xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 1024 1024">
<g transform="translate(37 170) scale(29.7)">
<path d="M21.4631 0.523438C17.8173 0.857913 16.0028 2.95675 15.3171 4.01871L4.66406 22.4734H17.5163L30.1929 0.523438H21.4631Z" fill="#F68330"/>
<path d="M17.5265 22.4737L0 3.88525C0 3.88525 19.8177 -1.44128 21.7493 15.1738L17.5265 22.4737Z" fill="#F68330"/>
<path d="M14.9236 4.70563L9.54688 14.0208L17.5158 22.4747L21.7385 15.158C21.0696 9.44682 18.2851 6.32784 14.9236 4.69727" fill="#F05252"/>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 997 B

10
client/ui/assets/svg/connected-macos.svg
View File

@@ -1,10 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none">
<g transform="translate(0.5 4.5)" fill="black">
<path d="M21.4631 0.523438C17.8173 0.857913 16.0028 2.95675 15.3171 4.01871L4.66406 22.4734H17.5163L30.1929 0.523438H21.4631Z"/>
<path d="M17.5265 22.4737L0 3.88525C0 3.88525 19.8177 -1.44128 21.7493 15.1738L17.5265 22.4737Z"/>
<path d="M14.9236 4.70563L9.54688 14.0208L17.5158 22.4747L21.7385 15.158C21.0696 9.44682 18.2851 6.32784 14.9236 4.69727"/>
</g>
<circle cx="25" cy="25" r="7" fill="white"/>
<circle cx="25" cy="25" r="6" fill="black"/>
<path d="M22 25 L24 27 L28 23" stroke="white" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 723 B

14
client/ui/assets/svg/connected.svg
View File

@@ -1,14 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none">
<!-- Mark fills the canvas. Badge overlaps the bottom-right corner so most
of the mark is still visible at 16 px tray sizes. -->
<g transform="translate(0.5 4.5) scale(1.0)">
<path d="M21.4631 0.523438C17.8173 0.857913 16.0028 2.95675 15.3171 4.01871L4.66406 22.4734H17.5163L30.1929 0.523438H21.4631Z" fill="#F68330"/>
<path d="M17.5265 22.4737L0 3.88525C0 3.88525 19.8177 -1.44128 21.7493 15.1738L17.5265 22.4737Z" fill="#F68330"/>
<path d="M14.9236 4.70563L9.54688 14.0208L17.5158 22.4747L21.7385 15.158C21.0696 9.44682 18.2851 6.32784 14.9236 4.69727" fill="#F05252"/>
</g>
<!-- connected badge: green check, ~25% canvas, with a thin white halo so
the green disc reads cleanly on top of the orange mark. -->
<circle cx="25" cy="25" r="7" fill="white"/>
<circle cx="25" cy="25" r="6" fill="#0E9F6E"/>
<path d="M22 25 L24 27 L28 23" stroke="white" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.0 KiB

9
client/ui/assets/svg/connecting-macos.svg
View File

@@ -1,9 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none">
<g transform="translate(0.5 4.5)" fill="black">
<path d="M21.4631 0.523438C17.8173 0.857913 16.0028 2.95675 15.3171 4.01871L4.66406 22.4734H17.5163L30.1929 0.523438H21.4631Z"/>
<path d="M17.5265 22.4737L0 3.88525C0 3.88525 19.8177 -1.44128 21.7493 15.1738L17.5265 22.4737Z"/>
<path d="M14.9236 4.70563L9.54688 14.0208L17.5158 22.4747L21.7385 15.158C21.0696 9.44682 18.2851 6.32784 14.9236 4.69727"/>
</g>
<circle cx="25" cy="25" r="7" fill="white"/>
<circle cx="25" cy="25" r="6" fill="none" stroke="black" stroke-width="1.8" stroke-dasharray="2.5 2.5" stroke-linecap="round"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 678 B

9
client/ui/assets/svg/connecting.svg
View File

@@ -1,9 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none">
<g transform="translate(0.5 4.5) scale(1.0)">
<path d="M21.4631 0.523438C17.8173 0.857913 16.0028 2.95675 15.3171 4.01871L4.66406 22.4734H17.5163L30.1929 0.523438H21.4631Z" fill="#F68330"/>
<path d="M17.5265 22.4737L0 3.88525C0 3.88525 19.8177 -1.44128 21.7493 15.1738L17.5265 22.4737Z" fill="#F68330"/>
<path d="M14.9236 4.70563L9.54688 14.0208L17.5158 22.4747L21.7385 15.158C21.0696 9.44682 18.2851 6.32784 14.9236 4.69727" fill="#F05252"/>
</g>
<circle cx="25" cy="25" r="7" fill="white"/>
<circle cx="25" cy="25" r="6" fill="none" stroke="#F68330" stroke-width="1.8" stroke-dasharray="2.5 2.5" stroke-linecap="round"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 723 B

10
client/ui/assets/svg/disconnected-macos.svg
View File

@@ -1,10 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none">
<g transform="translate(0.5 4.5)" fill="black" opacity="0.5">
<path d="M21.4631 0.523438C17.8173 0.857913 16.0028 2.95675 15.3171 4.01871L4.66406 22.4734H17.5163L30.1929 0.523438H21.4631Z"/>
<path d="M17.5265 22.4737L0 3.88525C0 3.88525 19.8177 -1.44128 21.7493 15.1738L17.5265 22.4737Z"/>
<path d="M14.9236 4.70563L9.54688 14.0208L17.5158 22.4747L21.7385 15.158C21.0696 9.44682 18.2851 6.32784 14.9236 4.69727"/>
</g>
<circle cx="25" cy="25" r="7" fill="white"/>
<circle cx="25" cy="25" r="6" fill="none" stroke="black" stroke-width="1.6"/>
<line x1="21.5" y1="25" x2="28.5" y2="25" stroke="black" stroke-width="1.6" stroke-linecap="round"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 745 B

10
client/ui/assets/svg/disconnected.svg
View File

@@ -1,10 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none">
<g transform="translate(0.5 4.5) scale(1.0)" opacity="0.45">
<path d="M21.4631 0.523438C17.8173 0.857913 16.0028 2.95675 15.3171 4.01871L4.66406 22.4734H17.5163L30.1929 0.523438H21.4631Z" fill="#F68330"/>
<path d="M17.5265 22.4737L0 3.88525C0 3.88525 19.8177 -1.44128 21.7493 15.1738L17.5265 22.4737Z" fill="#F68330"/>
<path d="M14.9236 4.70563L9.54688 14.0208L17.5158 22.4747L21.7385 15.158C21.0696 9.44682 18.2851 6.32784 14.9236 4.69727" fill="#F05252"/>
</g>
<circle cx="25" cy="25" r="7" fill="white"/>
<circle cx="25" cy="25" r="6" fill="none" stroke="#7c8994" stroke-width="1.6"/>
<line x1="21.5" y1="25" x2="28.5" y2="25" stroke="#7c8994" stroke-width="1.6" stroke-linecap="round"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 793 B

11
client/ui/assets/svg/error-macos.svg
View File

@@ -1,11 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none">
<g transform="translate(0.5 4.5)" fill="black" opacity="0.7">
<path d="M21.4631 0.523438C17.8173 0.857913 16.0028 2.95675 15.3171 4.01871L4.66406 22.4734H17.5163L30.1929 0.523438H21.4631Z"/>
<path d="M17.5265 22.4737L0 3.88525C0 3.88525 19.8177 -1.44128 21.7493 15.1738L17.5265 22.4737Z"/>
<path d="M14.9236 4.70563L9.54688 14.0208L17.5158 22.4747L21.7385 15.158C21.0696 9.44682 18.2851 6.32784 14.9236 4.69727"/>
</g>
<circle cx="25" cy="25" r="7" fill="white"/>
<circle cx="25" cy="25" r="6" fill="black"/>
<line x1="25" y1="21.5" x2="25" y2="26" stroke="white" stroke-width="1.8" stroke-linecap="round"/>
<circle cx="25" cy="28.4" r="1.0" fill="white"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 761 B

5
client/ui/assets/svg/error.svg → client/ui/assets/svg/needs-login.svg
View File

@@ -5,7 +5,6 @@
<path d="M14.9236 4.70563L9.54688 14.0208L17.5158 22.4747L21.7385 15.158C21.0696 9.44682 18.2851 6.32784 14.9236 4.69727" fill="#F05252"/>
</g>
<circle cx="25" cy="25" r="7" fill="white"/>
<circle cx="25" cy="25" r="6" fill="#E02424"/>
<line x1="25" y1="21.5" x2="25" y2="26" stroke="white" stroke-width="1.8" stroke-linecap="round"/>
<circle cx="25" cy="28.4" r="1.0" fill="white"/>
<path d="M 22.6 24.5 v -1.4 a 2.4 2.4 0 0 1 4.8 0 v 1.4" fill="none" stroke="#D97706" stroke-width="1.5" stroke-linecap="round"/>
<rect x="21.6" y="24.5" width="6.8" height="4.9" rx="0.9" fill="none" stroke="#D97706" stroke-width="1.5"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 806 B

After

Width:  |  Height:  |  Size: 847 B

10
client/ui/assets/svg/update-connected-macos.svg
View File

@@ -1,10 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none">
<g transform="translate(0.5 4.5)" fill="black">
<path d="M21.4631 0.523438C17.8173 0.857913 16.0028 2.95675 15.3171 4.01871L4.66406 22.4734H17.5163L30.1929 0.523438H21.4631Z"/>
<path d="M17.5265 22.4737L0 3.88525C0 3.88525 19.8177 -1.44128 21.7493 15.1738L17.5265 22.4737Z"/>
<path d="M14.9236 4.70563L9.54688 14.0208L17.5158 22.4747L21.7385 15.158C21.0696 9.44682 18.2851 6.32784 14.9236 4.69727"/>
</g>
<circle cx="25" cy="25" r="7" fill="white"/>
<circle cx="25" cy="25" r="6" fill="black"/>
<path d="M25 22 L25 28 M22.5 24.5 L25 22 L27.5 24.5" stroke="white" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 745 B

10
client/ui/assets/svg/update-connected.svg
View File

@@ -1,10 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none">
<g transform="translate(0.5 4.5) scale(1.0)">
<path d="M21.4631 0.523438C17.8173 0.857913 16.0028 2.95675 15.3171 4.01871L4.66406 22.4734H17.5163L30.1929 0.523438H21.4631Z" fill="#F68330"/>
<path d="M17.5265 22.4737L0 3.88525C0 3.88525 19.8177 -1.44128 21.7493 15.1738L17.5265 22.4737Z" fill="#F68330"/>
<path d="M14.9236 4.70563L9.54688 14.0208L17.5158 22.4747L21.7385 15.158C21.0696 9.44682 18.2851 6.32784 14.9236 4.69727" fill="#F05252"/>
</g>
<circle cx="25" cy="25" r="7" fill="white"/>
<circle cx="25" cy="25" r="6" fill="#1C64F2"/>
<path d="M25 22 L25 28 M22.5 24.5 L25 22 L27.5 24.5" stroke="white" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 790 B

10
client/ui/assets/svg/update-disconnected-macos.svg
View File

@@ -1,10 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none">
<g transform="translate(0.5 4.5)" fill="black" opacity="0.5">
<path d="M21.4631 0.523438C17.8173 0.857913 16.0028 2.95675 15.3171 4.01871L4.66406 22.4734H17.5163L30.1929 0.523438H21.4631Z"/>
<path d="M17.5265 22.4737L0 3.88525C0 3.88525 19.8177 -1.44128 21.7493 15.1738L17.5265 22.4737Z"/>
<path d="M14.9236 4.70563L9.54688 14.0208L17.5158 22.4747L21.7385 15.158C21.0696 9.44682 18.2851 6.32784 14.9236 4.69727"/>
</g>
<circle cx="25" cy="25" r="7" fill="white"/>
<circle cx="25" cy="25" r="6" fill="black"/>
<path d="M25 22 L25 28 M22.5 24.5 L25 22 L27.5 24.5" stroke="white" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 759 B

10
client/ui/assets/svg/update-disconnected.svg
View File

@@ -1,10 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none">
<g transform="translate(0.5 4.5) scale(1.0)" opacity="0.45">
<path d="M21.4631 0.523438C17.8173 0.857913 16.0028 2.95675 15.3171 4.01871L4.66406 22.4734H17.5163L30.1929 0.523438H21.4631Z" fill="#F68330"/>
<path d="M17.5265 22.4737L0 3.88525C0 3.88525 19.8177 -1.44128 21.7493 15.1738L17.5265 22.4737Z" fill="#F68330"/>
<path d="M14.9236 4.70563L9.54688 14.0208L17.5158 22.4747L21.7385 15.158C21.0696 9.44682 18.2851 6.32784 14.9236 4.69727" fill="#F05252"/>
</g>
<circle cx="25" cy="25" r="7" fill="white"/>
<circle cx="25" cy="25" r="6" fill="#1C64F2"/>
<path d="M25 22 L25 28 M22.5 24.5 L25 22 L27.5 24.5" stroke="white" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 805 B

6
client/ui/icons.go
View File

@@ -26,6 +26,9 @@ var iconConnecting []byte
//go:embed assets/netbird-systemtray-error.png
var iconError []byte
//go:embed assets/netbird-systemtray-needs-login.png
var iconNeedsLogin []byte
//go:embed assets/netbird-systemtray-update-connected.png
var iconUpdateConnected []byte
@@ -44,6 +47,9 @@ var iconConnectingMacOS []byte
//go:embed assets/netbird-systemtray-error-macos.png
var iconErrorMacOS []byte
//go:embed assets/netbird-systemtray-needs-login-macos.png
var iconNeedsLoginMacOS []byte
//go:embed assets/netbird-systemtray-update-connected-macos.png
var iconUpdateConnectedMacOS []byte

16
client/ui/tray.go
View File

@@ -80,6 +80,12 @@ const (
// completed an SSO authentication on this profile. Mirrors
// internal.StatusNeedsLogin.
statusNeedsLogin = "NeedsLogin"
// statusLoginFailed is what the daemon publishes when a login attempt
// failed with a non-auth error (management unreachable, init error,
// etc.). The CLI groups it with NeedsLogin/SessionExpired and prompts
// the user to run "netbird up", so we mirror that here. Mirrors
// internal.StatusLoginFailed.
statusLoginFailed = "LoginFailed"
// External URLs.
urlGitHubRepo = "https://github.com/netbirdio/netbird"
@@ -434,7 +440,8 @@ func (t *Tray) applyStatus(st services.Status) {
if iconChanged {
t.applyIcon()
needsLogin := strings.EqualFold(st.Status, statusNeedsLogin) ||
strings.EqualFold(st.Status, statusSessionExpired)
strings.EqualFold(st.Status, statusSessionExpired) ||
strings.EqualFold(st.Status, statusLoginFailed)
daemonUnavailable := strings.EqualFold(st.Status, services.StatusDaemonUnavailable)
if t.statusItem != nil {
// When the daemon needs re-authentication the status row turns
@@ -542,6 +549,9 @@ func (t *Tray) iconForState() (icon, dark []byte) {
connecting := strings.EqualFold(statusLabel, "Connecting")
errored := strings.EqualFold(statusLabel, "Error") ||
strings.EqualFold(statusLabel, services.StatusDaemonUnavailable)
needsLogin := strings.EqualFold(statusLabel, statusNeedsLogin) ||
strings.EqualFold(statusLabel, statusSessionExpired) ||
strings.EqualFold(statusLabel, statusLoginFailed)
if runtime.GOOS == "darwin" {
switch {
@@ -549,6 +559,8 @@ func (t *Tray) iconForState() (icon, dark []byte) {
return iconConnectingMacOS, nil
case errored:
return iconErrorMacOS, nil
case needsLogin:
return iconNeedsLoginMacOS, nil
case connected && hasUpdate:
return iconUpdateConnectedMacOS, nil
case connected:
@@ -565,6 +577,8 @@ func (t *Tray) iconForState() (icon, dark []byte) {
return iconConnecting, nil
case errored:
return iconError, nil
case needsLogin:
return iconNeedsLogin, nil
case connected && hasUpdate:
return iconUpdateConnected, nil
case connected: