Update SiteFooter.tsx

frontend/src/components/SiteFooter.tsx

@@ -1,8 +1,11 @@
+import { useEffect, useState } from "react";
 import { useHealth } from "src/hooks";
 import { T } from "src/locale";
 
 export function SiteFooter() {
     const health = useHealth();
+    const [latestVersion, setLatestVersion] = useState<string | null>(null);
+    const [isNewVersionAvailable, setIsNewVersionAvailable] = useState(false);
 
     const getVersion = () => {
         if (!health.data) {
@@ -12,6 +15,49 @@ export function SiteFooter() {
         return `v${v.major}.${v.minor}.${v.revision}`;
     };
 
+    const compareVersions = (current: string, latest: string): boolean => {
+        const cleanCurrent = current.replace(/^v/, "");
+        const cleanLatest = latest.replace(/^v/, "");
+
+        const currentParts = cleanCurrent.split(".").map(Number);
+        const latestParts = cleanLatest.split(".").map(Number);
+
+        for (let i = 0; i < Math.max(currentParts.length, latestParts.length); i++) {
+            const curr = currentParts[i] || 0;
+            const lat = latestParts[i] || 0;
+
+            if (lat > curr) return true;
+            if (lat < curr) return false;
+        }
+        return false;
+    };
+
+    useEffect(() => {
+        const checkForUpdates = async () => {
+            try {
+                const response = await fetch(
+                    "https://api.github.com/repos/NginxProxyManager/nginx-proxy-manager/releases/latest"
+                );
+                if (response.ok) {
+                    const data = await response.json();
+                    const latest = data.tag_name;
+                    setLatestVersion(latest);
+
+                    const currentVersion = "2.12.1";
+                    if (currentVersion && compareVersions(currentVersion, latest)) {
+                        setIsNewVersionAvailable(true);
+                    }
+                }
+            } catch (error) {
+                console.debug("Could not check for updates:", error);
+            }
+        };
+
+        if (health.data) {
+            checkForUpdates();
+        }
+    }, [health.data]);
+
     return (
         <footer className="footer d-print-none py-3">
             <div className="container-xl">
@@ -55,6 +101,19 @@ export function SiteFooter() {
                                     {getVersion()}{" "}
                                 </a>
                             </li>
+                            {isNewVersionAvailable && latestVersion && (
+                                <li className="list-inline-item">
+                                    <a
+                                        href={`https://github.com/NginxProxyManager/nginx-proxy-manager/releases/tag/${latestVersion}`}
+                                        className="link-warning fw-bold"
+                                        target="_blank"
+                                        rel="noopener"
+                                        title={`New version ${latestVersion} is available`}
+                                    >
+                                        Update Available: ({latestVersion})
+                                    </a>
+                                </li>
+                            )}
                         </ul>
                     </div>
                 </div>