Persist show reviewed locally so it maintains state (#12560)

* Persist show reviewed locally so it maintains state

* fix

* Theming fixes

web/src/views/events/EventView.tsx

@@ -62,6 +62,8 @@ type EventViewProps = {
   filter?: ReviewFilter;
   severity: ReviewSeverity;
   startTime?: number;
+  showReviewed: boolean;
+  setShowReviewed: (show: boolean) => void;
   setSeverity: (severity: ReviewSeverity) => void;
   markItemAsReviewed: (review: ReviewSegment) => void;
   markAllItemsAsReviewed: (currentItems: ReviewSegment[]) => void;
@@ -78,6 +80,8 @@ export default function EventView({
   filter,
   severity,
   startTime,
+  showReviewed,
+  setShowReviewed,
   setSeverity,
   markItemAsReviewed,
   markAllItemsAsReviewed,
@@ -108,7 +112,7 @@ export default function EventView({
       return { alert: 0, detection: 0, significant_motion: 0 };
     }
 
-    if (filter?.showReviewed == 1) {
+    if (showReviewed) {
       return {
         alert: summary.total_alert ?? 0,
         detection: summary.total_detection ?? 0,
@@ -121,7 +125,7 @@ export default function EventView({
         significant_motion: summary.total_motion - summary.reviewed_motion,
       };
     }
-  }, [filter, reviewSummary]);
+  }, [filter, showReviewed, reviewSummary]);
 
   // review interaction
 
@@ -358,6 +362,8 @@ export default function EventView({
             filter={filter}
             motionOnly={motionOnly}
             filterList={reviewFilterList}
+            showReviewed={showReviewed}
+            setShowReviewed={setShowReviewed}
             onUpdateFilter={updateFilter}
             setMotionOnly={setMotionOnly}
           />

web/src/views/events/RecordingView.tsx

@@ -418,6 +418,8 @@ export function RecordingView({
               filter={filter}
               motionOnly={false}
               filterList={reviewFilterList}
+              showReviewed
+              setShowReviewed={() => {}}
               onUpdateFilter={updateFilter}
               setMotionOnly={() => {}}
             />
@@ -699,10 +701,10 @@ function Timeline({
           <Skeleton className="size-full" />
         )
       ) : (
-        <div className="h-full overflow-auto bg-secondary">
+        <div className="scrollbar-container h-full overflow-auto bg-secondary">
           <div
             className={cn(
-              "grid h-auto grid-cols-1 gap-4 overflow-auto p-4",
+              "scrollbar-container grid h-auto grid-cols-1 gap-4 overflow-auto p-4",
               isMobile && "sm:grid-cols-2",
             )}
           >