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/hooks/use-overlay-state.tsx

@@ -1,22 +1,28 @@
-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, replace?: boolean) => void] {
   const location = useLocation();
   const navigate = useNavigate();
   const currentLocationState = location.state;
 
   const setOverlayStateValue = useCallback(
-    (value: string) => {
+    (value: string, replace: boolean = false) => {
       const newLocationState = { ...currentLocationState };
       newLocationState[key] = value;
-      navigate(location.pathname, { state: newLocationState });
+      navigate(location.pathname, { state: newLocationState, replace });
     },
     // we know that these deps are correct
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [key, navigate],
   );
 
-  const overlayStateValue = location.state && location.state[key];
+  const overlayStateValue = useMemo<string | undefined>(
+    () => location.state && location.state[key],
+    [location, key],
+  );
+
   return [overlayStateValue, setOverlayStateValue];
 }