Clean up

web/src/components/filter/ReviewFilterGroup.tsx

@@ -239,6 +239,7 @@ export default function ReviewFilterGroup({
           currentSeverity={currentSeverity}
           reviewSummary={reviewSummary}
           allLabels={allLabels}
+          allZones={allZones}
           onUpdateFilter={onUpdateFilter}
           // not applicable as exports are not used
           camera=""

web/src/components/overlay/MobileReviewSettingsDrawer.tsx

@@ -36,6 +36,7 @@ type MobileReviewSettingsDrawerProps = {
   mode: ExportMode;
   reviewSummary?: ReviewSummary;
   allLabels: string[];
+  allZones: string[];
   onUpdateFilter: (filter: ReviewFilter) => void;
   setRange: (range: TimeRange | undefined) => void;
   setMode: (mode: ExportMode) => void;
@@ -51,6 +52,7 @@ export default function MobileReviewSettingsDrawer({
   mode,
   reviewSummary,
   allLabels,
+  allZones,
   onUpdateFilter,
   setRange,
   setMode,
@@ -104,6 +106,9 @@ export default function MobileReviewSettingsDrawer({
   const [currentLabels, setCurrentLabels] = useState<string[] | undefined>(
     filter?.labels,
   );
+  const [currentZones, setCurrentZones] = useState<string[] | undefined>(
+    filter?.zones,
+  );
 
   if (!isMobile) {
     return;
@@ -222,7 +227,7 @@ export default function MobileReviewSettingsDrawer({
     );
   } else if (drawerMode == "filter") {
     content = (
-      <div className="scrollbar-container flex h-auto w-full flex-col overflow-y-auto">
+      <div className="scrollbar-container flex h-auto w-full flex-col overflow-y-auto overflow-x-hidden">
         <div className="relative mb-2 h-8 w-full">
           <div
             className="absolute left-0 text-selected"
@@ -240,6 +245,13 @@ export default function MobileReviewSettingsDrawer({
           currentLabels={currentLabels}
           currentSeverity={currentSeverity}
           showAll={filter?.showAll == true}
+          allZones={allZones}
+          selectedZones={filter?.zones}
+          currentZones={currentZones}
+          setCurrentZones={setCurrentZones}
+          updateZoneFilter={(newZones) =>
+            onUpdateFilter({ ...filter, zones: newZones })
+          }
           setShowAll={(showAll) => {
             onUpdateFilter({ ...filter, showAll });
           }}

web/src/views/events/RecordingView.tsx

@@ -111,7 +111,7 @@ export function RecordingView({
     () => chunkedTimeRange[selectedRangeIdx],
     [selectedRangeIdx, chunkedTimeRange],
   );
-  const reviewLabels = useMemo(() => {
+  const reviewFilterList = useMemo(() => {
     const uniqueLabels = new Set<string>();
 
     reviewItems?.forEach((rev) => {
@@ -121,7 +121,13 @@ export function RecordingView({
       rev.data.audio.forEach((aud) => uniqueLabels.add(aud));
     });
 
-    return [...uniqueLabels];
+    const uniqueZones = new Set<string>();
+
+    reviewItems?.forEach((rev) => {
+      rev.data.zones.forEach((zone) => uniqueZones.add(zone));
+    });
+
+    return { labels: [...uniqueLabels], zones: [...uniqueZones] };
   }, [reviewItems]);
 
   // export
@@ -391,7 +397,7 @@ export function RecordingView({
               reviewSummary={reviewSummary}
               filter={filter}
               motionOnly={false}
-              filterLabels={reviewLabels}
+              filterList={reviewFilterList}
               onUpdateFilter={updateFilter}
               setMotionOnly={() => {}}
             />
@@ -434,7 +440,8 @@ export function RecordingView({
             latestTime={timeRange.before}
             mode={exportMode}
             range={exportRange}
-            allLabels={reviewLabels}
+            allLabels={reviewFilterList.labels}
+            allZones={reviewFilterList.zones}
             onUpdateFilter={updateFilter}
             setRange={setExportRange}
             setMode={setExportMode}