From 7187273eb79caf66a6422b91135f1708c7c86d30 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Tue, 27 Feb 2024 17:04:20 -0700
Subject: [PATCH] Use persistence for live layout

---
 web/src/hooks/use-persistence.ts | 10 +++++-----
 web/src/pages/Live.tsx           |  4 +++-
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/web/src/hooks/use-persistence.ts b/web/src/hooks/use-persistence.ts
index 48a03d7e1..83f769c4a 100644
--- a/web/src/hooks/use-persistence.ts
+++ b/web/src/hooks/use-persistence.ts
@@ -1,16 +1,16 @@
 import { useEffect, useState, useCallback } from "react";
 import { get as getData, set as setData } from "idb-keyval";
 
-type usePersistenceReturn = [
-  value: any | undefined,
+type usePersistenceReturn<S extends any> = [
+  value: S | undefined,
   setValue: (value: string | boolean) => void,
   loaded: boolean,
 ];
 
-export function usePersistence(
+export function usePersistence<S>(
   key: string,
-  defaultValue: any | undefined = undefined
-): usePersistenceReturn {
+  defaultValue: S | undefined = undefined
+): usePersistenceReturn<S> {
   const [value, setInternalValue] = useState<any | undefined>(defaultValue);
   const [loaded, setLoaded] = useState<boolean>(false);
 
diff --git a/web/src/pages/Live.tsx b/web/src/pages/Live.tsx
index cb6ada236..e4c9f71a2 100644
--- a/web/src/pages/Live.tsx
+++ b/web/src/pages/Live.tsx
@@ -5,6 +5,7 @@ import LivePlayer from "@/components/player/LivePlayer";
 import { Button } from "@/components/ui/button";
 import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
 import { TooltipProvider } from "@/components/ui/tooltip";
+import { usePersistence } from "@/hooks/use-persistence";
 import { Event as FrigateEvent } from "@/types/event";
 import { FrigateConfig } from "@/types/frigateConfig";
 import { useCallback, useEffect, useMemo, useState } from "react";
@@ -17,7 +18,8 @@ function Live() {
 
   // layout
 
-  const [layout, setLayout] = useState<"grid" | "list">(
+  const [layout, setLayout] = usePersistence<"grid" | "list">(
+    "live-layout",
     isDesktop ? "grid" : "list"
   );