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/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" />