Use hash location insteaad of state for live camera view

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

@@ -2,7 +2,7 @@ import { useCallback, useMemo } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 import { usePersistence } from "./use-persistence";
 
-export default function useOverlayState<S extends string>(
+export function useOverlayState<S extends string>(
   key: string,
   defaultValue: S | undefined = undefined,
 ): [S | undefined, (value: S, replace?: boolean) => void] {
@@ -63,3 +63,25 @@ export function usePersistedOverlayState<S extends string>(
     setOverlayStateValue,
   ];
 }
+
+export function useHashState(): [string | undefined, (value: string) => void] {
+  const location = useLocation();
+  const navigate = useNavigate();
+
+  const setHash = useCallback(
+    (value: string | undefined) => {
+      if (!value) {
+        navigate(location.pathname);
+      } else {
+        navigate(`${location.pathname}#${value}`);
+      }
+    },
+    // we know that these deps are correct
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [location, navigate],
+  );
+
+  const hash = useMemo(() => location.hash.substring(1), [location.hash]);
+
+  return [hash, setHash];
+}

web/src/pages/Events.tsx

@@ -1,7 +1,7 @@
 import ActivityIndicator from "@/components/indicators/activity-indicator";
 import useApiFilter from "@/hooks/use-api-filter";
 import { useTimezone } from "@/hooks/use-date-utils";
-import useOverlayState from "@/hooks/use-overlay-state";
+import { useOverlayState } from "@/hooks/use-overlay-state";
 import { FrigateConfig } from "@/types/frigateConfig";
 import { Preview } from "@/types/preview";
 import {

web/src/pages/Live.tsx

@@ -1,4 +1,5 @@
-import useOverlayState, {
+import {
+  useHashState,
   usePersistedOverlayState,
 } from "@/hooks/use-overlay-state";
 import { FrigateConfig } from "@/types/frigateConfig";
@@ -10,7 +11,7 @@ import useSWR from "swr";
 function Live() {
   const { data: config } = useSWR<FrigateConfig>("config");
 
-  const [selectedCameraName, setSelectedCameraName] = useOverlayState("camera");
+  const [selectedCameraName, setSelectedCameraName] = useHashState();
   const [cameraGroup] = usePersistedOverlayState(
     "cameraGroup",
     "default" as string,