From c24349e4f1fc548926c847b4f426f794a5189c80 Mon Sep 17 00:00:00 2001
From: Eduard Gert <kontakt@eduardgert.de>
Date: Mon, 18 May 2026 11:37:42 +0200
Subject: [PATCH] add overlay when daemon not available

---
 .../frontend/src/i18n/locales/de/common.json  |  6 +-
 .../frontend/src/i18n/locales/en/common.json  |  6 +-
 .../frontend/src/i18n/locales/hu/common.json  |  6 +-
 client/ui/frontend/src/layouts/AppLayout.tsx  |  2 +
 .../frontend/src/layouts/SettingsLayout.tsx   |  2 +
 .../DaemonUnavailableOverlay.tsx              | 56 +++++++++++++++++++
 6 files changed, 75 insertions(+), 3 deletions(-)
 create mode 100644 client/ui/frontend/src/modules/daemon-status/DaemonUnavailableOverlay.tsx

diff --git a/client/ui/frontend/src/i18n/locales/de/common.json b/client/ui/frontend/src/i18n/locales/de/common.json
index aa2412523..71248a1de 100644
--- a/client/ui/frontend/src/i18n/locales/de/common.json
+++ b/client/ui/frontend/src/i18n/locales/de/common.json
@@ -275,5 +275,9 @@
     "peers.empty": "Keine Peers entsprechen den aktuellen Filtern.",
 
     "quickActions.connect": "Verbinden",
-    "quickActions.disconnect": "Trennen"
+    "quickActions.disconnect": "Trennen",
+
+    "daemon.unavailable.title": "NetBird-Dienst läuft nicht",
+    "daemon.unavailable.description": "Die App stellt automatisch die Verbindung wieder her, sobald der Dienst läuft.",
+    "daemon.unavailable.docsLink": "Dokumentation"
 }
diff --git a/client/ui/frontend/src/i18n/locales/en/common.json b/client/ui/frontend/src/i18n/locales/en/common.json
index 82613bd13..4ca45c5bf 100644
--- a/client/ui/frontend/src/i18n/locales/en/common.json
+++ b/client/ui/frontend/src/i18n/locales/en/common.json
@@ -275,5 +275,9 @@
     "peers.empty": "No peers match the current filters.",
 
     "quickActions.connect": "Connect",
-    "quickActions.disconnect": "Disconnect"
+    "quickActions.disconnect": "Disconnect",
+
+    "daemon.unavailable.title": "NetBird Service Is Not Running",
+    "daemon.unavailable.description": "The app will reconnect automatically once the service is running.",
+    "daemon.unavailable.docsLink": "Documentation"
 }
diff --git a/client/ui/frontend/src/i18n/locales/hu/common.json b/client/ui/frontend/src/i18n/locales/hu/common.json
index bec4186cf..d446af172 100644
--- a/client/ui/frontend/src/i18n/locales/hu/common.json
+++ b/client/ui/frontend/src/i18n/locales/hu/common.json
@@ -275,5 +275,9 @@
     "peers.empty": "Egyetlen társ sem felel meg a jelenlegi szűrőknek.",
 
     "quickActions.connect": "Csatlakozás",
-    "quickActions.disconnect": "Bontás"
+    "quickActions.disconnect": "Bontás",
+
+    "daemon.unavailable.title": "A NetBird szolgáltatás nem fut",
+    "daemon.unavailable.description": "Az alkalmazás automatikusan újracsatlakozik, amint a szolgáltatás újra elérhető.",
+    "daemon.unavailable.docsLink": "Dokumentáció"
 }
diff --git a/client/ui/frontend/src/layouts/AppLayout.tsx b/client/ui/frontend/src/layouts/AppLayout.tsx
index 19bce3241..098680ee9 100644
--- a/client/ui/frontend/src/layouts/AppLayout.tsx
+++ b/client/ui/frontend/src/layouts/AppLayout.tsx
@@ -2,6 +2,7 @@ import { useState } from "react";
 import { Outlet } from "react-router-dom";
 import { Header } from "@/layouts/Header.tsx";
 import { ClientVersionProvider } from "@/modules/auto-update/ClientVersionContext.tsx";
+import { DaemonUnavailableOverlay } from "@/modules/daemon-status/DaemonUnavailableOverlay.tsx";
 import { DebugBundleProvider } from "@/modules/debug-bundle/DebugBundleContext.tsx";
 import { ProfileProvider } from "@/modules/profile/ProfileContext.tsx";
 
@@ -20,6 +21,7 @@ export const AppLayout = () => {
                     <ClientVersionProvider>
                         <Header expanded={expanded} setExpanded={setExpanded} />
                         <Outlet context={{ expanded } satisfies MainOutletContext} />
+                        <DaemonUnavailableOverlay />
                     </ClientVersionProvider>
                 </DebugBundleProvider>
             </ProfileProvider>
diff --git a/client/ui/frontend/src/layouts/SettingsLayout.tsx b/client/ui/frontend/src/layouts/SettingsLayout.tsx
index ce6c5e50e..985b92692 100644
--- a/client/ui/frontend/src/layouts/SettingsLayout.tsx
+++ b/client/ui/frontend/src/layouts/SettingsLayout.tsx
@@ -1,5 +1,6 @@
 import { Outlet } from "react-router-dom";
 import { ClientVersionProvider } from "@/modules/auto-update/ClientVersionContext.tsx";
+import { DaemonUnavailableOverlay } from "@/modules/daemon-status/DaemonUnavailableOverlay.tsx";
 import { DebugBundleProvider } from "@/modules/debug-bundle/DebugBundleContext.tsx";
 import { ProfileProvider } from "@/modules/profile/ProfileContext.tsx";
 
@@ -26,6 +27,7 @@ export const SettingsLayout = () => {
                             }
                         />
                         <Outlet />
+                        <DaemonUnavailableOverlay />
                     </ClientVersionProvider>
                 </DebugBundleProvider>
             </ProfileProvider>
diff --git a/client/ui/frontend/src/modules/daemon-status/DaemonUnavailableOverlay.tsx b/client/ui/frontend/src/modules/daemon-status/DaemonUnavailableOverlay.tsx
new file mode 100644
index 000000000..a9b9acd3b
--- /dev/null
+++ b/client/ui/frontend/src/modules/daemon-status/DaemonUnavailableOverlay.tsx
@@ -0,0 +1,56 @@
+import { useTranslation } from "react-i18next";
+import { AlertCircleIcon, AlertTriangle, BookText } from "lucide-react";
+import { Browser } from "@wailsio/runtime";
+import { Button } from "@/components/Button";
+import { useStatus } from "@/hooks/useStatus";
+
+const DOCS_URL = "https://docs.netbird.io/how-to/installation";
+
+function openUrl(url: string) {
+    void Browser.OpenURL(url).catch(() => window.open(url, "_blank"));
+}
+
+export const DaemonUnavailableOverlay = () => {
+    const { t } = useTranslation();
+    const { status } = useStatus();
+
+    if (status?.status !== "DaemonUnavailable") return null;
+
+    return (
+        <div
+            className={
+                "fixed inset-0 z-[100] flex items-center justify-center bg-nb-gray-950 backdrop-blur-sm cursor-default select-none wails-draggable"
+            }
+            onKeyDown={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+            }}
+        >
+            <div className={"flex flex-col items-center gap-5 px-8 max-w-lg text-center"}>
+                <div
+                    className={
+                        "h-11 w-11 rounded-xl flex items-center justify-center bg-nb-gray-920 border border-nb-gray-900 text-red-500"
+                    }
+                >
+                    <AlertCircleIcon size={20} />
+                </div>
+
+                <div className={"flex flex-col items-center gap-1"}>
+                    <p className={"text-base font-medium text-nb-gray-50"}>
+                        {t("daemon.unavailable.title")}
+                    </p>
+                    <p className={"text-sm text-nb-gray-300"}>
+                        {t("daemon.unavailable.description")}
+                    </p>
+                </div>
+
+                <div className={"wails-no-draggable"}>
+                    <Button variant={"secondary"} size={"xs"} onClick={() => openUrl(DOCS_URL)}>
+                        <BookText size={14} />
+                        {t("daemon.unavailable.docsLink")}
+                    </Button>
+                </div>
+            </div>
+        </div>
+    );
+};