Add saving of camera group selection

web/src/components/filter/CameraGroupSelector.tsx

@@ -0,0 +1,66 @@
+import { FrigateConfig } from "@/types/frigateConfig";
+import { isMobile } from "react-device-detect";
+import useSWR from "swr";
+import { MdHome } from "react-icons/md";
+import { FaCar, FaCircle, FaLeaf } from "react-icons/fa";
+import useOverlayState from "@/hooks/use-overlay-state";
+import { Button } from "../ui/button";
+import { useNavigate } from "react-router-dom";
+
+export function CameraGroupSelector() {
+  const { data: config } = useSWR<FrigateConfig>("config");
+  const navigate = useNavigate();
+  const [group, setGroup] = useOverlayState("cameraGroup");
+
+  if (isMobile) {
+    return (
+      <div className="flex items-center justify-start gap-2">
+        <Button
+          className={
+            group == undefined
+              ? "text-selected bg-blue-900 focus:bg-blue-900 bg-opacity-60 focus:bg-opacity-60"
+              : "text-muted-foreground bg-muted"
+          }
+          size="xs"
+          onClick={() => navigate(-1)}
+        >
+          <MdHome className="size-4" />
+        </Button>
+        {Object.entries(config?.camera_groups ?? {}).map(([name, config]) => {
+          return (
+            <Button
+              key={name}
+              className={
+                group == name
+                  ? "text-selected bg-blue-900 focus:bg-blue-900 bg-opacity-60 focus:bg-opacity-60"
+                  : "text-muted-foreground bg-muted"
+              }
+              size="xs"
+              onClick={() => setGroup(name)}
+            >
+              {getGroupIcon(config.icon)}
+            </Button>
+          );
+        })}
+      </div>
+    );
+  }
+
+  return <div></div>;
+}
+
+function getGroupIcon(icon: string) {
+  switch (icon) {
+    case "car":
+      return <FaCar className="size-4" />;
+    case "leaf":
+      return <FaLeaf className="size-4" />;
+    default:
+      return <FaCircle className="size-4" />;
+  }
+}
+
+/**
+ * {config &&
+          }
+ */

web/src/components/ui/button.tsx

@@ -22,7 +22,7 @@ const buttonVariants = cva(
       },
       size: {
         default: "h-10 px-4 py-2",
-        xs: "h-6 rounded-md",
+        xs: "size-6 rounded-md",
         sm: "h-9 rounded-md px-3",
         lg: "h-11 rounded-md px-8",
         icon: "h-10 w-10",

web/src/hooks/use-overlay-state.tsx

@@ -1,7 +1,9 @@
-import { useCallback } from "react";
+import { useCallback, useMemo } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 
-export default function useOverlayState(key: string) {
+export default function useOverlayState(
+  key: string,
+): [string | undefined, (value: string) => void] {
   const location = useLocation();
   const navigate = useNavigate();
   const currentLocationState = location.state;
@@ -17,6 +19,10 @@ export default function useOverlayState(key: string) {
     [key, navigate],
   );
 
-  const overlayStateValue = location.state && location.state[key];
+  const overlayStateValue = useMemo<string | undefined>(
+    () => location.state && location.state[key],
+    [location, key],
+  );
+
   return [overlayStateValue, setOverlayStateValue];
 }