add overlay if daemon not compatible

client/ui/frontend/src/components/empty-state/DaemonOutdatedOverlay.tsx

@@ -0,0 +1,52 @@
+import { useTranslation } from "react-i18next";
+import { AlertTriangleIcon, DownloadIcon } from "lucide-react";
+import { Browser } from "@wailsio/runtime";
+import { Button } from "@/components/buttons/Button";
+import { useStatus } from "@/contexts/StatusContext.tsx";
+
+const RELEASES_URL = "https://github.com/netbirdio/netbird/releases/latest";
+
+function openUrl(url: string) {
+    Browser.OpenURL(url).catch(() => globalThis.open(url, "_blank"));
+}
+
+export const DaemonOutdatedOverlay = () => {
+    const { t } = useTranslation();
+    const { isDaemonOutdated } = useStatus();
+
+    if (!isDaemonOutdated) 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"
+            }
+        >
+            <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-amber-500"
+                    }
+                >
+                    <AlertTriangleIcon size={20} />
+                </div>
+
+                <div className={"flex flex-col items-center gap-1"}>
+                    <p className={"text-base font-medium text-nb-gray-50"}>
+                        {t("daemon.outdated.title")}
+                    </p>
+                    <p className={"text-sm text-nb-gray-300"}>
+                        {t("daemon.outdated.description")}
+                    </p>
+                </div>
+
+                <div className={"wails-no-draggable"}>
+                    <Button variant={"primary"} size={"xs"} onClick={() => openUrl(RELEASES_URL)}>
+                        <DownloadIcon size={14} />
+                        {t("update.card.getInstaller")}
+                    </Button>
+                </div>
+            </div>
+        </div>
+    );
+};

client/ui/frontend/src/contexts/StatusContext.tsx

@@ -10,7 +10,9 @@ import {
 import { Events } from "@wailsio/runtime";
 import { DaemonFeed } from "@bindings/services";
 import { Status } from "@bindings/services/models.js";
+import { DaemonOutdatedOverlay } from "@/components/empty-state/DaemonOutdatedOverlay.tsx";
 import { DaemonUnavailableOverlay } from "@/components/empty-state/DaemonUnavailableOverlay.tsx";
+import { isDaemonCompatible } from "@/lib/compat";
 
 const EVENT_STATUS = "netbird:status";
 
@@ -21,6 +23,7 @@ type StatusContextValue = {
     isReady: boolean;
     isDaemonUnavailable: boolean;
     isDaemonAvailable: boolean;
+    isDaemonOutdated: boolean;
 };
 
 const StatusContext = createContext<StatusContextValue | null>(null);
@@ -36,6 +39,7 @@ export const useStatus = () => {
 export const StatusProvider = ({ children }: { children: ReactNode }) => {
     const [status, setStatus] = useState<Status | null>(null);
     const [error, setError] = useState<string | null>(null);
+    const [isDaemonOutdated, setIsDaemonOutdated] = useState(false);
 
     const refresh = useCallback(async () => {
         try {
@@ -64,6 +68,21 @@ export const StatusProvider = ({ children }: { children: ReactNode }) => {
     const isDaemonUnavailable = isReady && status.status === "DaemonUnavailable";
     const isDaemonAvailable = isReady && !isDaemonUnavailable;
 
+    useEffect(() => {
+        if (!isDaemonAvailable) return;
+        let cancelled = false;
+        isDaemonCompatible()
+            .then((ok) => {
+                if (!cancelled) setIsDaemonOutdated(!ok);
+            })
+            .catch((err) => {
+                console.error("[StatusContext] daemon compatible error", err);
+            });
+        return () => {
+            cancelled = true;
+        };
+    }, [isDaemonAvailable]);
+
     const value = useMemo<StatusContextValue>(
         () => ({
             status,
@@ -72,14 +91,16 @@ export const StatusProvider = ({ children }: { children: ReactNode }) => {
             isReady,
             isDaemonUnavailable,
             isDaemonAvailable,
+            isDaemonOutdated,
         }),
-        [status, error, refresh, isReady, isDaemonUnavailable, isDaemonAvailable],
+        [status, error, refresh, isReady, isDaemonUnavailable, isDaemonAvailable, isDaemonOutdated],
     );
 
     return (
         <StatusContext.Provider value={value}>
-            {isDaemonAvailable && children}
+            {isDaemonAvailable && !isDaemonOutdated && children}
             <DaemonUnavailableOverlay />
+            <DaemonOutdatedOverlay />
         </StatusContext.Provider>
     );
 };