add update available icon

client/ui/frontend/src/components/Tooltip.tsx

@@ -0,0 +1,74 @@
+import { ReactNode, useRef, useState } from "react";
+import * as RTooltip from "@radix-ui/react-tooltip";
+import { cn } from "@/lib/cn";
+
+type Props = {
+    content: ReactNode;
+    children: ReactNode;
+    side?: RTooltip.TooltipContentProps["side"];
+    align?: RTooltip.TooltipContentProps["align"];
+    delayDuration?: number;
+    sideOffset?: number;
+    interactive?: boolean;
+    keepOpenOnClick?: boolean;
+};
+
+export const Tooltip = ({
+    content,
+    children,
+    side = "bottom",
+    align = "center",
+    delayDuration = 200,
+    sideOffset = 6,
+    interactive = false,
+    keepOpenOnClick = true,
+}: Props) => {
+    const [open, setOpen] = useState(false);
+    const hoveringRef = useRef(false);
+
+    const handleOpenChange = (next: boolean) => {
+        if (!next && keepOpenOnClick && hoveringRef.current) return;
+        setOpen(next);
+    };
+
+    return (
+        <RTooltip.Provider
+            delayDuration={delayDuration}
+            disableHoverableContent={!interactive}
+        >
+            <RTooltip.Root open={open} onOpenChange={handleOpenChange}>
+                <RTooltip.Trigger
+                    asChild
+                    onPointerEnter={() => {
+                        hoveringRef.current = true;
+                    }}
+                    onPointerLeave={() => {
+                        hoveringRef.current = false;
+                        setOpen(false);
+                    }}
+                >
+                    {children}
+                </RTooltip.Trigger>
+                <RTooltip.Portal>
+                    <RTooltip.Content
+                        side={side}
+                        align={align}
+                        sideOffset={sideOffset}
+                        onPointerDownOutside={
+                            interactive ? undefined : (e) => e.preventDefault()
+                        }
+                        className={cn(
+                            "z-50 select-none rounded-md border border-nb-gray-850 bg-nb-gray-900 px-2 py-1",
+                            "text-xs text-nb-gray-100 shadow-lg",
+                            "data-[state=delayed-open]:animate-in data-[state=closed]:animate-out",
+                            "data-[state=closed]:fade-out-0 data-[state=delayed-open]:fade-in-0",
+                            !interactive && "pointer-events-none",
+                        )}
+                    >
+                        {content}
+                    </RTooltip.Content>
+                </RTooltip.Portal>
+            </RTooltip.Root>
+        </RTooltip.Provider>
+    );
+};

client/ui/frontend/src/components/VerticalTabs.tsx

@@ -1,4 +1,4 @@
-import { ComponentType, forwardRef } from "react";
+import { ComponentType, ReactNode, forwardRef } from "react";
 import * as Tabs from "@radix-ui/react-tabs";
 import { LucideProps } from "lucide-react";
 import { cn } from "@/lib/cn";
@@ -33,11 +33,12 @@ type TriggerProps = Tabs.TabsTriggerProps & {
     icon: ComponentType<LucideProps>;
     title: string;
     iconSize?: number;
+    adornment?: ReactNode;
 };
 
 const Trigger = forwardRef<HTMLButtonElement, TriggerProps>(
     function VerticalTabsTrigger(
-        { icon: Icon, title, iconSize = 16, className, ...props },
+        { icon: Icon, title, iconSize = 16, adornment, className, ...props },
         ref,
     ) {
         return (
@@ -67,6 +68,7 @@ const Trigger = forwardRef<HTMLButtonElement, TriggerProps>(
                 >
                     {title}
                 </h2>
+                {adornment && <div className={"ml-auto mr-2 shrink-0"}>{adornment}</div>}
             </Tabs.Trigger>
         );
     },

client/ui/frontend/src/layouts/Header.tsx

@@ -1,13 +1,19 @@
 import { useLocation, useNavigate } from "react-router-dom";
-import { SettingsIcon } from "lucide-react";
+import { ArrowUpCircleIcon, SettingsIcon } from "lucide-react";
 import { ProfileSelector } from "@/components/ProfileSelector.tsx";
 import { IconButton } from "@/components/IconButton.tsx";
+import { Tooltip } from "@/components/Tooltip.tsx";
+import { useStatus } from "@/hooks/useStatus";
 import { cn } from "@/lib/cn";
 
 export const Header = () => {
     const navigate = useNavigate();
     const location = useLocation();
     const isSettingsPage = location.pathname.startsWith("/settings");
+    const { status } = useStatus();
+    const updateAvailable = (status?.events ?? []).some((e) =>
+        Boolean(e.metadata?.["new_version_available"]),
+    );
 
     return (
         <div
@@ -18,6 +24,25 @@ export const Header = () => {
             <div className={"ml-20"}>
                 <ProfileSelector email={"eduard@netbird.io"} />
             </div>
+            {updateAvailable && (
+                <Tooltip content={"Update Available"}>
+                    <div className={"relative h-11 w-11 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"
+                            }
+                        />
+                        <IconButton
+                            icon={ArrowUpCircleIcon}
+                            iconClassName={"text-netbird"}
+                            onClick={() =>
+                                navigate("/settings", { state: { tab: "about" } })
+                            }
+                            className={"absolute inset-0"}
+                        />
+                    </div>
+                </Tooltip>
+            )}
             <IconButton
                 icon={SettingsIcon}
                 onClick={() => navigate(isSettingsPage ? "/" : "/settings")}

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>