Add camera groups to the filters for events

web/src/components/filter/CameraGroupSelector.tsx

@@ -2,12 +2,12 @@ import { FrigateConfig } from "@/types/frigateConfig";
 import { isDesktop } from "react-device-detect";
 import useSWR from "swr";
 import { MdHome } from "react-icons/md";
-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 { useCallback, useMemo, useState } from "react";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
+import { getIconForGroup } from "@/utils/iconUtil";
 
 type CameraGroupSelectorProps = {
   className?: string;
@@ -88,7 +88,7 @@ export function CameraGroupSelector({ className }: CameraGroupSelectorProps) {
                 onMouseEnter={() => (isDesktop ? showTooltip(name) : null)}
                 onMouseLeave={() => (isDesktop ? showTooltip(undefined) : null)}
               >
-                {getGroupIcon(config.icon)}
+                {getIconForGroup(config.icon)}
               </Button>
             </TooltipTrigger>
             <TooltipContent className="capitalize" side="right">
@@ -100,23 +100,3 @@ export function CameraGroupSelector({ className }: CameraGroupSelectorProps) {
     </div>
   );
 }
-
-function getGroupIcon(icon: string) {
-  switch (icon) {
-    case "car":
-      return <FaCar className="size-4" />;
-    case "cat":
-      return <FaCat className="size-4" />;
-    case "dog":
-      return <FaDog className="size-4" />;
-    case "leaf":
-      return <FaLeaf className="size-4" />;
-    default:
-      return <FaCircle className="size-4" />;
-  }
-}
-
-/**
- * {config &&
-          }
- */

web/src/components/filter/ReviewFilterGroup.tsx

@@ -2,7 +2,7 @@ import { LuCheck, LuVideo } from "react-icons/lu";
 import { Button } from "../ui/button";
 import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
 import useSWR from "swr";
-import { FrigateConfig } from "@/types/frigateConfig";
+import { CameraGroupConfig, FrigateConfig } from "@/types/frigateConfig";
 import { useCallback, useMemo, useState } from "react";
 import {
   DropdownMenu,
@@ -16,6 +16,8 @@ import { ReviewFilter } from "@/types/review";
 import { getEndOfDayTimestamp } from "@/utils/dateUtil";
 import { useFormattedTimestamp } from "@/hooks/use-date-utils";
 import { FaCalendarAlt, FaFilter, FaVideo } from "react-icons/fa";
+import { getIconTypeForGroup } from "@/utils/iconUtil";
+import { IconType } from "react-icons";
 
 const ATTRIBUTES = ["amazon", "face", "fedex", "license_plate", "ups"];
 
@@ -57,6 +59,16 @@ export default function ReviewFilterGroup({
     [config, allLabels],
   );
 
+  const groups = useMemo(() => {
+    if (!config) {
+      return [];
+    }
+
+    return Object.entries(config.camera_groups).sort(
+      (a, b) => a[1].order - b[1].order,
+    );
+  }, [config]);
+
   // handle updating filters
 
   const onUpdateSelectedDay = useCallback(
@@ -74,6 +86,7 @@ export default function ReviewFilterGroup({
     <div>
       <CamerasFilterButton
         allCameras={filterValues.cameras}
+        groups={groups}
         selectedCameras={filter?.cameras}
         updateCameraFilter={(newCameras) => {
           onUpdateFilter({ ...filter, cameras: newCameras });
@@ -102,11 +115,13 @@ export default function ReviewFilterGroup({
 
 type CameraFilterButtonProps = {
   allCameras: string[];
+  groups: [string, CameraGroupConfig][];
   selectedCameras: string[] | undefined;
   updateCameraFilter: (cameras: string[] | undefined) => void;
 };
 function CamerasFilterButton({
   allCameras,
+  groups,
   selectedCameras,
   updateCameraFilter,
 }: CameraFilterButtonProps) {
@@ -144,6 +159,24 @@ function CamerasFilterButton({
             }
           }}
         />
+        {groups.length > 0 && (
+          <>
+            <DropdownMenuSeparator />
+            {groups.map(([name, conf]) => {
+              return (
+                <FilterCheckBox
+                  key={name}
+                  label={name}
+                  CheckIcon={getIconTypeForGroup(conf.icon)}
+                  isChecked
+                  onCheckedChange={() => {
+                    setCurrentCameras([...conf.cameras]);
+                  }}
+                />
+              );
+            })}
+          </>
+        )}
         <DropdownMenuSeparator />
         {allCameras.map((item) => (
           <FilterCheckBox
@@ -350,12 +383,14 @@ function LabelsFilterButton({
 
 type FilterCheckBoxProps = {
   label: string;
+  CheckIcon?: IconType;
   isChecked: boolean;
   onCheckedChange: (isChecked: boolean) => void;
 };
 
 function FilterCheckBox({
   label,
+  CheckIcon = LuCheck,
   isChecked,
   onCheckedChange,
 }: FilterCheckBoxProps) {
@@ -366,7 +401,7 @@ function FilterCheckBox({
       onClick={() => onCheckedChange(!isChecked)}
     >
       {isChecked ? (
-        <LuCheck className="w-6 h-6" />
+        <CheckIcon className="w-6 h-6" />
       ) : (
         <div className="w-6 h-6" />
       )}

web/src/components/navigation/Sidebar.tsx

@@ -11,7 +11,7 @@ function Sidebar() {
         <Logo className="w-8 h-8 mb-6" />
         {navbarLinks.map((item) => (
           <NavItem
-            className="mx-[10px] mb-6"
+            className="mx-[10px] mb-4"
             key={item.id}
             Icon={item.icon}
             title={item.title}

web/src/utils/iconUtil.tsx

@@ -3,14 +3,36 @@ import {
   FaAmazon,
   FaCarSide,
   FaCat,
+  FaCircle,
   FaDog,
   FaFedex,
   FaFire,
+  FaLeaf,
   FaUps,
 } from "react-icons/fa";
 import { LuBox, LuLassoSelect } from "react-icons/lu";
 import { MdRecordVoiceOver } from "react-icons/md";
 
+export function getIconTypeForGroup(icon: string) {
+  switch (icon) {
+    case "car":
+      return FaCarSide;
+    case "cat":
+      return FaCat;
+    case "dog":
+      return FaDog;
+    case "leaf":
+      return FaLeaf;
+    default:
+      return FaCircle;
+  }
+}
+
+export function getIconForGroup(icon: string, className: string = "size-4") {
+  const GroupIcon = getIconTypeForGroup(icon);
+  return <GroupIcon className={className} />;
+}
+
 export function getIconForLabel(label: string, className?: string) {
   switch (label) {
     case "car":