Camera groups (#10223)

* Add camera group config

* Add saving of camera group selection

* Implement camera groups in config and live view

* Fix warnings

* Add tooltips to camera group items on desktop

* Add camera groups to the filters for events

* Fix tooltips and group selection

* Cleanup

web/src/components/navigation/NavItem.tsx

@@ -6,7 +6,6 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
-import { useState } from "react";
 import { isDesktop } from "react-device-detect";
 import { TooltipPortal } from "@radix-ui/react-tooltip";
 
@@ -42,32 +41,36 @@ export default function NavItem({
 }: NavItemProps) {
   const shouldRender = dev ? ENV !== "production" : true;
 
-  const [showTooltip, setShowTooltip] = useState(false);
+  if (!shouldRender) {
+    return;
+  }
 
-  return (
-    shouldRender && (
-      <Tooltip open={isDesktop && showTooltip}>
-        <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)}
-        >
-          <TooltipTrigger>
-            <Icon className="size-5 md:m-[6px]" />
-          </TooltipTrigger>
-        </NavLink>
+  const content = (
+    <NavLink
+      to={url}
+      onClick={onClick}
+      className={({ isActive }) =>
+        `${className} flex flex-col justify-center items-center rounded-lg ${
+          variants[variant][isActive ? "active" : "inactive"]
+        }`
+      }
+    >
+      <Icon className="size-5 md:m-[6px]" />
+    </NavLink>
+  );
+
+  if (isDesktop) {
+    return (
+      <Tooltip>
+        <TooltipTrigger>{content}</TooltipTrigger>
         <TooltipPortal>
           <TooltipContent side="right">
             <p>{title}</p>
           </TooltipContent>
         </TooltipPortal>
       </Tooltip>
-    )
-  );
+    );
+  }
+
+  return content;
 }

web/src/components/navigation/Sidebar.tsx

@@ -2,22 +2,30 @@ import Logo from "../Logo";
 import { navbarLinks } from "@/pages/site-navigation";
 import SettingsNavItems from "../settings/SettingsNavItems";
 import NavItem from "./NavItem";
+import { CameraGroupSelector } from "../filter/CameraGroupSelector";
+import { useLocation } from "react-router-dom";
 
 function Sidebar() {
+  const location = useLocation();
+
   return (
     <aside className="absolute w-[52px] z-10 left-o inset-y-0 overflow-y-auto scrollbar-hidden py-4 flex flex-col justify-between bg-primary border-r border-secondary-highlight">
       <span tabIndex={0} className="sr-only" />
       <div className="w-full flex flex-col gap-0 items-center">
         <Logo className="w-8 h-8 mb-6" />
         {navbarLinks.map((item) => (
-          <NavItem
-            className="mx-[10px] mb-6"
-            key={item.id}
-            Icon={item.icon}
-            title={item.title}
-            url={item.url}
-            dev={item.dev}
-          />
+          <div key={item.id}>
+            <NavItem
+              className={`mx-[10px] ${item.id == 1 ? "mb-2" : "mb-4"}`}
+              Icon={item.icon}
+              title={item.title}
+              url={item.url}
+              dev={item.dev}
+            />
+            {item.id == 1 && item.url == location.pathname && (
+              <CameraGroupSelector className="mb-4" />
+            )}
+          </div>
         ))}
       </div>
       <SettingsNavItems className="hidden md:flex flex-col items-center mb-8" />