Use user-namespaced keys for idb persistence (#21110)

* add new hooks

* use new hooks for user based keys

* fix layout race condition

web/src/components/camera/DebugCameraImage.tsx

@@ -5,7 +5,7 @@ import { Button } from "../ui/button";
 import { LuSettings } from "react-icons/lu";
 import { useCallback, useMemo, useState } from "react";
 import { Card, CardContent, CardHeader, CardTitle } from "../ui/card";
-import { usePersistence } from "@/hooks/use-persistence";
+import { useUserPersistence } from "@/hooks/use-user-persistence";
 import AutoUpdatingCameraImage from "./AutoUpdatingCameraImage";
 import { useTranslation } from "react-i18next";
 
@@ -24,7 +24,7 @@ export default function DebugCameraImage({
 }: DebugCameraImageProps) {
   const { t } = useTranslation(["components/camera"]);
   const [showSettings, setShowSettings] = useState(false);
-  const [options, setOptions] = usePersistence<Options>(
+  const [options, setOptions] = useUserPersistence<Options>(
     `${cameraConfig?.name}-feed`,
     emptyObject,
   );

web/src/components/card/AnimatedEventCard.tsx

@@ -13,7 +13,7 @@ import { baseUrl } from "@/api/baseUrl";
 import { VideoPreview } from "../preview/ScrubbablePreview";
 import { useApiHost } from "@/api";
 import { isDesktop, isSafari } from "react-device-detect";
-import { usePersistence } from "@/hooks/use-persistence";
+import { useUserPersistence } from "@/hooks/use-user-persistence";
 import { Skeleton } from "../ui/skeleton";
 import { Button } from "../ui/button";
 import { FaCircleCheck } from "react-icons/fa6";
@@ -112,7 +112,7 @@ export function AnimatedEventCard({
 
   // image behavior
 
-  const [alertVideos, _, alertVideosLoaded] = usePersistence(
+  const [alertVideos, _, alertVideosLoaded] = useUserPersistence(
     "alertVideos",
     true,
   );

web/src/components/filter/CameraGroupSelector.tsx

@@ -7,7 +7,6 @@ import {
 import { isDesktop, isMobile } from "react-device-detect";
 import useSWR from "swr";
 import { MdHome } from "react-icons/md";
-import { usePersistedOverlayState } from "@/hooks/use-overlay-state";
 import { Button, buttonVariants } from "../ui/button";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
@@ -57,7 +56,7 @@ import { Toaster } from "@/components/ui/sonner";
 import { toast } from "sonner";
 import ActivityIndicator from "../indicators/activity-indicator";
 import { ScrollArea, ScrollBar } from "../ui/scroll-area";
-import { usePersistence } from "@/hooks/use-persistence";
+import { useUserPersistence } from "@/hooks/use-user-persistence";
 import { TooltipPortal } from "@radix-ui/react-tooltip";
 import { cn } from "@/lib/utils";
 import * as LuIcons from "react-icons/lu";
@@ -79,6 +78,7 @@ import { Trans, useTranslation } from "react-i18next";
 import { CameraNameLabel } from "../camera/FriendlyNameLabel";
 import { useAllowedCameras } from "@/hooks/use-allowed-cameras";
 import { useIsAdmin } from "@/hooks/use-is-admin";
+import { useUserPersistedOverlayState } from "@/hooks/use-overlay-state";
 
 type CameraGroupSelectorProps = {
   className?: string;
@@ -109,9 +109,9 @@ export function CameraGroupSelector({ className }: CameraGroupSelectorProps) {
     [timeoutId],
   );
 
-  // groups
+  // groups - use user-namespaced key for persistence to avoid cross-user conflicts
 
-  const [group, setGroup, , deleteGroup] = usePersistedOverlayState(
+  const [group, setGroup, , deleteGroup] = useUserPersistedOverlayState(
     "cameraGroup",
     "default" as string,
   );
@@ -276,7 +276,7 @@ function NewGroupDialog({
   const [editState, setEditState] = useState<"none" | "add" | "edit">("none");
   const [isLoading, setIsLoading] = useState(false);
 
-  const [, , , deleteGridLayout] = usePersistence(
+  const [, , , deleteGridLayout] = useUserPersistence(
     `${activeGroup}-draggable-layout`,
   );
 

web/src/components/input/InputWithTags.tsx

@@ -37,7 +37,7 @@ import {
 import { cn } from "@/lib/utils";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
 import { TooltipPortal } from "@radix-ui/react-tooltip";
-import { usePersistence } from "@/hooks/use-persistence";
+import { useUserPersistence } from "@/hooks/use-user-persistence";
 import { SaveSearchDialog } from "./SaveSearchDialog";
 import { DeleteSearchDialog } from "./DeleteSearchDialog";
 import {
@@ -128,9 +128,8 @@ export default function InputWithTags({
 
   // TODO: search history from browser storage
 
-  const [searchHistory, setSearchHistory, searchHistoryLoaded] = usePersistence<
-    SavedSearchQuery[]
-  >("frigate-search-history");
+  const [searchHistory, setSearchHistory, searchHistoryLoaded] =
+    useUserPersistence<SavedSearchQuery[]>("frigate-search-history");
 
   const [isSaveDialogOpen, setIsSaveDialogOpen] = useState(false);
   const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);

web/src/components/overlay/ReviewActivityCalendar.tsx

@@ -5,7 +5,7 @@ import { FaCircle } from "react-icons/fa";
 import { getUTCOffset } from "@/utils/dateUtil";
 import { type DayButtonProps, TZDate } from "react-day-picker";
 import { LAST_24_HOURS_KEY } from "@/types/filter";
-import { usePersistence } from "@/hooks/use-persistence";
+import { useUserPersistence } from "@/hooks/use-user-persistence";
 import { cn } from "@/lib/utils";
 import { FrigateConfig } from "@/types/frigateConfig";
 import useSWR from "swr";
@@ -27,7 +27,7 @@ export default function ReviewActivityCalendar({
 }: ReviewActivityCalendarProps) {
   const { data: config } = useSWR<FrigateConfig>("config");
   const timezone = useTimezone(config);
-  const [weekStartsOn] = usePersistence("weekStartsOn", 0);
+  const [weekStartsOn] = useUserPersistence("weekStartsOn", 0);
 
   const disabledDates = useMemo(() => {
     const tomorrow = new Date();
@@ -176,7 +176,7 @@ export function TimezoneAwareCalendar({
   selectedDay,
   onSelect,
 }: TimezoneAwareCalendarProps) {
-  const [weekStartsOn] = usePersistence("weekStartsOn", 0);
+  const [weekStartsOn] = useUserPersistence("weekStartsOn", 0);
 
   const timezoneOffset = useMemo(
     () =>

web/src/components/player/HlsVideoPlayer.tsx

@@ -15,7 +15,7 @@ import { FrigateConfig } from "@/types/frigateConfig";
 import { AxiosResponse } from "axios";
 import { toast } from "sonner";
 import { useOverlayState } from "@/hooks/use-overlay-state";
-import { usePersistence } from "@/hooks/use-persistence";
+import { useUserPersistence } from "@/hooks/use-user-persistence";
 import { cn } from "@/lib/utils";
 import { ASPECT_VERTICAL_LAYOUT, RecordingPlayerError } from "@/types/record";
 import { useTranslation } from "react-i18next";
@@ -210,9 +210,9 @@ export default function HlsVideoPlayer({
 
   const [tallCamera, setTallCamera] = useState(false);
   const [isPlaying, setIsPlaying] = useState(true);
-  const [muted, setMuted] = usePersistence("hlsPlayerMuted", true);
+  const [muted, setMuted] = useUserPersistence("hlsPlayerMuted", true);
   const [volume, setVolume] = useOverlayState("playerVolume", 1.0);
-  const [defaultPlaybackRate] = usePersistence("playbackRate", 1);
+  const [defaultPlaybackRate] = useUserPersistence("playbackRate", 1);
   const [playbackRate, setPlaybackRate] = useOverlayState(
     "playbackRate",
     defaultPlaybackRate ?? 1,

web/src/components/player/MsePlayer.tsx

@@ -1,5 +1,5 @@
 import { baseUrl } from "@/api/baseUrl";
-import { usePersistence } from "@/hooks/use-persistence";
+import { useUserPersistence } from "@/hooks/use-user-persistence";
 import {
   LivePlayerError,
   PlayerStatsType,
@@ -72,7 +72,10 @@ function MSEPlayer({
   const [errorCount, setErrorCount] = useState<number>(0);
   const totalBytesLoaded = useRef(0);
 
-  const [fallbackTimeout] = usePersistence<number>("liveFallbackTimeout", 3);
+  const [fallbackTimeout] = useUserPersistence<number>(
+    "liveFallbackTimeout",
+    3,
+  );
 
   const videoRef = useRef<HTMLVideoElement>(null);
   const wsRef = useRef<WebSocket | null>(null);

web/src/components/timeline/DetailStream.tsx

@@ -24,7 +24,7 @@ import { cn } from "@/lib/utils";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
 import { Link } from "react-router-dom";
 import { Switch } from "@/components/ui/switch";
-import { usePersistence } from "@/hooks/use-persistence";
+import { useUserPersistence } from "@/hooks/use-user-persistence";
 import { isDesktop } from "react-device-detect";
 import { resolveZoneName } from "@/hooks/use-zone-friendly-name";
 import { PiSlidersHorizontalBold } from "react-icons/pi";
@@ -58,7 +58,7 @@ export default function DetailStream({
   const effectiveTime = currentTime - annotationOffset / 1000;
   const [upload, setUpload] = useState<Event | undefined>(undefined);
   const [controlsExpanded, setControlsExpanded] = useState(false);
-  const [alwaysExpandActive, setAlwaysExpandActive] = usePersistence(
+  const [alwaysExpandActive, setAlwaysExpandActive] = useUserPersistence(
     "detailStreamActiveExpanded",
     true,
   );