Add tooltips to camera group items on desktop

web/src/components/filter/CameraGroupSelector.tsx

@@ -6,11 +6,37 @@ import { FaCar, FaCat, FaCircle, FaDog, FaLeaf } from "react-icons/fa";
 import useOverlayState from "@/hooks/use-overlay-state";
 import { Button } from "../ui/button";
 import { useNavigate } from "react-router-dom";
-import { useMemo } from "react";
+import { useCallback, useMemo, useState } from "react";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
 
-export function CameraGroupSelector() {
+type CameraGroupSelectorProps = {
+  className?: string;
+};
+export function CameraGroupSelector({ className }: CameraGroupSelectorProps) {
   const { data: config } = useSWR<FrigateConfig>("config");
   const navigate = useNavigate();
+
+  // tooltip
+
+  const [tooltip, setTooltip] = useState<string>();
+  const [timeoutId, setTimeoutId] = useState<NodeJS.Timeout>();
+  const showTooltip = useCallback(
+    (newTooltip: string | undefined) => {
+      if (!newTooltip) {
+        setTooltip(newTooltip);
+
+        if (timeoutId) {
+          clearTimeout(timeoutId);
+        }
+      } else {
+        setTimeoutId(setTimeout(() => setTooltip(newTooltip), 500));
+      }
+    },
+    [timeoutId],
+  );
+
+  // groups
+
   const [group, setGroup] = useOverlayState("cameraGroup");
 
   const groups = useMemo(() => {
@@ -25,33 +51,50 @@ export function CameraGroupSelector() {
 
   return (
     <div
-      className={`flex items-center justify-start gap-2 ${isDesktop ? "flex-col mb-4" : ""}`}
+      className={`flex items-center justify-start gap-2 ${className ?? ""} ${isDesktop ? "flex-col" : ""}`}
     >
-      <Button
-        className={
-          group == undefined
-            ? "text-selected bg-blue-900 focus:bg-blue-900 bg-opacity-60 focus:bg-opacity-60"
-            : "text-muted-foreground bg-secondary focus:text-muted-foreground focus:bg-secondary"
-        }
-        size="xs"
-        onClick={() => navigate(-1)}
-      >
-        <MdHome className="size-4" />
-      </Button>
-      {groups.map(([name, config]) => {
-        return (
+      <Tooltip open={tooltip == "home"}>
+        <TooltipTrigger asChild>
           <Button
-            key={name}
             className={
-              group == name
+              group == undefined
                 ? "text-selected bg-blue-900 focus:bg-blue-900 bg-opacity-60 focus:bg-opacity-60"
-                : "text-muted-foreground bg-secondary"
+                : "text-muted-foreground bg-secondary focus:text-muted-foreground focus:bg-secondary"
             }
             size="xs"
-            onClick={() => setGroup(name, group != undefined)}
+            onClick={() => navigate(-1)}
+            onMouseEnter={() => (isDesktop ? showTooltip("home") : null)}
+            onMouseLeave={() => (isDesktop ? showTooltip(undefined) : null)}
           >
-            {getGroupIcon(config.icon)}
+            <MdHome className="size-4" />
           </Button>
+        </TooltipTrigger>
+        <TooltipContent className="capitalize" side="right">
+          Home
+        </TooltipContent>
+      </Tooltip>
+      {groups.map(([name, config]) => {
+        return (
+          <Tooltip key={name} open={tooltip == name}>
+            <TooltipTrigger asChild>
+              <Button
+                className={
+                  group == name
+                    ? "text-selected bg-blue-900 focus:bg-blue-900 bg-opacity-60 focus:bg-opacity-60"
+                    : "text-muted-foreground bg-secondary"
+                }
+                size="xs"
+                onClick={() => setGroup(name, group != undefined)}
+                onMouseEnter={() => (isDesktop ? showTooltip(name) : null)}
+                onMouseLeave={() => (isDesktop ? showTooltip(undefined) : null)}
+              >
+                {getGroupIcon(config.icon)}
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent className="capitalize" side="right">
+              {name}
+            </TooltipContent>
+          </Tooltip>
         );
       })}
     </div>

web/src/components/navigation/NavItem.tsx

@@ -6,9 +6,10 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
-import { useState } from "react";
+import { useCallback, useState } from "react";
 import { isDesktop } from "react-device-detect";
 import { TooltipPortal } from "@radix-ui/react-tooltip";
+import { CameraGroupSelector } from "../filter/CameraGroupSelector";
 
 const variants = {
   primary: {
@@ -43,6 +44,21 @@ export default function NavItem({
   const shouldRender = dev ? ENV !== "production" : true;
 
   const [showTooltip, setShowTooltip] = useState(false);
+  const [timeoutId, setTimeoutId] = useState<NodeJS.Timeout>();
+  const showTooltipTimer = useCallback(
+    (showTooltip: boolean) => {
+      if (!showTooltip) {
+        setShowTooltip(showTooltip);
+
+        if (timeoutId) {
+          clearTimeout(timeoutId);
+        }
+      } else {
+        setTimeoutId(setTimeout(() => setShowTooltip(showTooltip), 500));
+      }
+    },
+    [timeoutId],
+  );
 
   return (
     shouldRender && (
@@ -50,17 +66,28 @@ export default function NavItem({
         <NavLink
           to={url}
           onClick={onClick}
-          className={({ isActive }) =>
-            `${className} flex flex-col justify-center items-center rounded-lg ${
-              variants[variant][isActive ? "active" : "inactive"]
-            }`
-          }
-          onMouseEnter={() => (isDesktop ? setShowTooltip(true) : null)}
-          onMouseLeave={() => (isDesktop ? setShowTooltip(false) : null)}
+          className={`${className} flex flex-col justify-center items-center rounded-lg`}
         >
-          <TooltipTrigger>
-            <Icon className="size-5 md:m-[6px]" />
-          </TooltipTrigger>
+          {({ isActive }) => (
+            <>
+              <TooltipTrigger
+                className={`rounded-lg ${variants[variant][isActive ? "active" : "inactive"]}`}
+              >
+                <Icon
+                  className="size-5 md:m-[6px]"
+                  onMouseEnter={() =>
+                    isDesktop ? showTooltipTimer(true) : null
+                  }
+                  onMouseLeave={() =>
+                    isDesktop ? showTooltipTimer(false) : null
+                  }
+                />
+              </TooltipTrigger>
+              {isDesktop && title == "Live" && isActive && (
+                <CameraGroupSelector className="mt-2" />
+              )}
+            </>
+          )}
         </NavLink>
         <TooltipPortal>
           <TooltipContent side="right">

web/src/components/navigation/Sidebar.tsx

@@ -2,7 +2,6 @@ import Logo from "../Logo";
 import { navbarLinks } from "@/pages/site-navigation";
 import SettingsNavItems from "../settings/SettingsNavItems";
 import NavItem from "./NavItem";
-import { CameraGroupSelector } from "../filter/CameraGroupSelector";
 
 function Sidebar() {
   return (
@@ -11,16 +10,14 @@ function Sidebar() {
       <div className="w-full flex flex-col gap-0 items-center">
         <Logo className="w-8 h-8 mb-6" />
         {navbarLinks.map((item) => (
-          <div key={item.id}>
-            <NavItem
-              className={`mx-[10px] ${item.id == 1 ? "mb-2" : "mb-6"}`}
-              Icon={item.icon}
-              title={item.title}
-              url={item.url}
-              dev={item.dev}
-            />
-            {item.id == 1 && <CameraGroupSelector />}
-          </div>
+          <NavItem
+            className="mx-[10px] mb-6"
+            key={item.id}
+            Icon={item.icon}
+            title={item.title}
+            url={item.url}
+            dev={item.dev}
+          />
         ))}
       </div>
       <SettingsNavItems className="hidden md:flex flex-col items-center mb-8" />