add update available icon

client/ui/frontend/src/modules/settings/Settings.tsx

@@ -1,4 +1,5 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
+import { useLocation } from "react-router-dom";
 import * as ScrollArea from "@radix-ui/react-scroll-area";
 import { cn } from "@/lib/cn";
 import { MainRightSide } from "@/layouts/MainRightSide.tsx";
@@ -14,7 +15,13 @@ import { SettingsTroubleshooting } from "@/modules/settings/SettingsTroubleshoot
 import { SettingsAbout } from "@/modules/settings/SettingsAbout.tsx";
 
 export const Settings = () => {
-    const [active, setActive] = useState("general");
+    const location = useLocation();
+    const navState = location.state as { tab?: string } | null;
+    const [active, setActive] = useState(navState?.tab ?? "general");
+
+    useEffect(() => {
+        if (navState?.tab) setActive(navState.tab);
+    }, [navState?.tab, location.key]);
 
     return (
         <VerticalTabs value={active} onValueChange={setActive} className={"p-4"}>

client/ui/frontend/src/modules/settings/SettingsNavigationTriggers.tsx

@@ -1,5 +1,8 @@
+import { Tooltip } from "@/components/Tooltip.tsx";
 import { VerticalTabs } from "@/components/VerticalTabs.tsx";
+import { useStatus } from "@/hooks/useStatus";
 import {
+    ArrowUpCircleIcon,
     BoltIcon,
     InfoIcon,
     LifeBuoyIcon,
@@ -10,6 +13,24 @@ import {
 } from "lucide-react";
 
 export const SettingsNavigationTriggers = () => {
+    const { status } = useStatus();
+    const updateAvailable = (status?.events ?? []).some((e) =>
+        Boolean(e.metadata?.["new_version_available"]),
+    );
+
+    const aboutAdornment = updateAvailable ? (
+        <Tooltip content={"Update Available"} side={"right"}>
+            <div className={"relative flex items-center justify-center"}>
+                <span
+                    className={
+                        "animate-ping absolute inline-flex h-[15px] w-[15px] rounded-full bg-netbird opacity-20 pointer-events-none"
+                    }
+                />
+                <ArrowUpCircleIcon size={15} className={"text-netbird"} />
+            </div>
+        </Tooltip>
+    ) : undefined;
+
     return (
         <div className={"flex flex-col w-52 shrink-0 items-center select-none"}>
         <VerticalTabs.List>
@@ -47,6 +68,7 @@ export const SettingsNavigationTriggers = () => {
                 value={"about"}
                 icon={InfoIcon}
                 title={"About"}
+                adornment={aboutAdornment}
             />
         </VerticalTabs.List>
         </div>