Migrate web to ESLint 10 flat config (#24326)

* migrate web to eslint 10 flat config

ESLint 10 dropped `.eslintrc` support, so `.eslintrc.cjs` is replaced with `eslint.config.js` and the lint scripts no longer pass `--ext` or `--ignore-path`. typescript-eslint moves to 8, react-hooks to 7, and react-refresh to 0.5, and the unused jest and vitest-globals plugins are removed. Lint behaves as it did before: catch variables aren't checked, unused disable directives aren't reported, and rules newly added to the recommended sets are off until the code passes them. typescript-eslint 8 flags constants used only in `typeof`, so those are now exported, or replaced with a union type where the export would trip react-refresh.

* fix lint findings from the eslint 10 recommended rules

Remove the rule overrides from the flat config migration and fix what they were hiding. Unused catch bindings are dropped, 20 disable directives that suppressed nothing are removed (react-hooks 5.2 and 7.1.1 report identical exhaustive-deps findings with inline config ignored), dead initial values are dropped, short-circuit calls become if statements or optional calls, rethrown errors pass `cause`, and the disabled "No recordings" tooltip in `ReviewTimeline` is removed along with its memo and the `getRecordingAvailability` prop. The 3 react-refresh warnings for files that export contexts or classes are left for a later refactor.

web/src/components/auth/AuthForm.tsx

@@ -27,7 +27,7 @@ import { LuExternalLink } from "react-icons/lu";
 import { useDocDomain } from "@/hooks/use-doc-domain";
 import { Card, CardContent } from "@/components/ui/card";
 
-interface UserAuthFormProps extends React.HTMLAttributes<HTMLDivElement> {}
+type UserAuthFormProps = React.HTMLAttributes<HTMLDivElement>;
 
 export function UserAuthForm({ className, ...props }: UserAuthFormProps) {
   const { t } = useTranslation(["components/auth", "common"]);

web/src/components/camera/AutoUpdatingCameraImage.tsx

@@ -39,8 +39,6 @@ export default function AutoUpdatingCameraImage({
         timeoutRef.current = null;
       }
     };
-    // we know that these deps are correct
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [reloadInterval]);
 
   const handleLoad = useCallback(() => {
@@ -75,7 +73,7 @@ export default function AutoUpdatingCameraImage({
   const [isCached, setIsCached] = useState(false);
 
   const cacheKey = useMemo(() => {
-    let baseParam = "";
+    let baseParam: string;
 
     if (periodicCache && !isCached) {
       const date = new Date(key);

web/src/components/camera/ResizingCameraImage.tsx

@@ -80,7 +80,7 @@ export default function CameraImage({
         const ctx = canvasRef.current.getContext("2d");
         ctx?.drawImage(img, 0, 0, scaledWidth, scaledHeight);
       }
-      onload && onload(event);
+      onload?.(event);
     },
     [img, scaledHeight, scaledWidth, setHasLoaded, onload, canvasRef],
   );

web/src/components/classification/ClassificationModelEditDialog.tsx

@@ -386,6 +386,7 @@ export default function ClassificationModelEditDialog({
                   "Unknown error";
                 throw new Error(
                   `Failed to rename ${oldName} to ${newName}: ${errorMessage}`,
+                  { cause: err },
                 );
               }
             },

web/src/components/classification/ClassificationModelWizardDialog.tsx

@@ -127,7 +127,7 @@ export default function ClassificationModelWizardDialog({
         await axios.delete(
           `/classification/${wizardState.step1Data.modelName}`,
         );
-      } catch (error) {
+      } catch {
         // Silently fail - user is already cancelling
       }
     }

web/src/components/classification/wizard/Step3ChooseExamples.tsx

@@ -189,7 +189,7 @@ export default function Step3ChooseExamples({
               },
             );
           }
-        } catch (error) {
+        } catch {
           // Silently fail - unselected images will remain but won't cause issues
           // since the frontend filters out images that don't match expected format
         }

web/src/components/filter/CamerasFilterButton.tsx

@@ -81,8 +81,6 @@ export function CamerasFilterButton({
 
   useEffect(() => {
     setCurrentCameras(selectedCameras);
-    // only refresh when state changes
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectedCameras]);
 
   const trigger = (

web/src/components/filter/ReviewFilterGroup.tsx

@@ -26,14 +26,7 @@ import { getTranslatedLabel } from "@/utils/i18n";
 import { useAllowedCameras } from "@/hooks/use-allowed-cameras";
 import { cn } from "@/lib/utils";
 
-const REVIEW_FILTERS = [
-  "cameras",
-  "reviewed",
-  "date",
-  "general",
-  "motionOnly",
-] as const;
-type ReviewFilters = (typeof REVIEW_FILTERS)[number];
+type ReviewFilters = "cameras" | "reviewed" | "date" | "general" | "motionOnly";
 const DEFAULT_REVIEW_FILTERS: ReviewFilters[] = [
   "cameras",
   "reviewed",
@@ -353,8 +346,6 @@ function GeneralFilterButton({
       showAll: showAll,
       ...filter,
     });
-    // only refresh when state changes
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectedLabels, selectedZones, showAll, filter]);
 
   const trigger = (

web/src/components/filter/SearchFilterGroup.tsx

@@ -306,8 +306,6 @@ function GeneralFilterButton({
 
   useEffect(() => {
     setCurrentLabels(selectedLabels);
-    // only refresh when state changes
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectedLabels]);
 
   const trigger = (
@@ -496,8 +494,6 @@ function SortTypeButton({
 
   useEffect(() => {
     setCurrentSortType(selectedSortType);
-    // only refresh when state changes
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectedSortType]);
 
   const trigger = (

web/src/components/input/InputWithTags.tsx

@@ -264,9 +264,9 @@ export default function InputWithTags({
         type == "max_speed"
       ) {
         const newFilters = { ...filters };
-        let timestamp = 0;
+        let timestamp: number;
         let score = 0;
-        let speed = 0;
+        let speed: number;
 
         switch (type) {
           case "before":

web/src/components/menu/LiveContextMenu.tsx

@@ -193,8 +193,6 @@ export default function LiveContextMenu({
     } else {
       return MdVolumeUp;
     }
-    // only update when specific fields change
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [volumeState, audioState]);
 
   const handleVolumeIconClick = (e: React.MouseEvent) => {

web/src/components/overlay/CreateRoleDialog.tsx

@@ -92,7 +92,7 @@ export default function CreateRoleDialog({
     try {
       await onCreate(values.role, values.cameras);
       form.reset();
-    } catch (error) {
+    } catch {
       // Error handled in parent
     } finally {
       setIsLoading(false);

web/src/components/overlay/DeleteRoleDialog.tsx

@@ -32,7 +32,7 @@ export default function DeleteRoleDialog({
     setIsLoading(true);
     try {
       await onDelete();
-    } catch (error) {
+    } catch {
       // Error handled in parent
     } finally {
       setIsLoading(false);

web/src/components/overlay/EditRoleCamerasDialog.tsx

@@ -74,7 +74,7 @@ export default function EditRoleCamerasDialog({
     try {
       await onSave(values.cameras);
       form.reset();
-    } catch (error) {
+    } catch {
       // Error handled in parent
     } finally {
       setIsLoading(false);

web/src/components/overlay/ExportDialog.tsx

@@ -675,7 +675,7 @@ export function ExportContent({
       setSelectedOption(option);
 
       const now = new Date(latestTime * 1000);
-      let start = 0;
+      let start: number;
 
       switch (option) {
         case "1":

web/src/components/overlay/chip/GenAISummaryChip.tsx

@@ -64,7 +64,7 @@ export function GenAISummaryDialog({
     const threatLevel = aiAnalysis.potential_threat_level ?? 0;
 
     if (threatLevel > 0) {
-      let label = "";
+      let label: string;
 
       switch (threatLevel) {
         case ThreatLevel.NEEDS_REVIEW:

web/src/components/overlay/detail/TrackingDetails.tsx

@@ -599,7 +599,6 @@ export function TrackingDetails({
       playlist,
       startPosition: 0,
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [event]);
 
   // Determine camera aspect ratio category

web/src/components/player/GenericVideoPlayer.tsx

@@ -35,7 +35,7 @@ export function GenericVideoPlayer({
         // missing media is a 404; 502 still covers a failed or
         // unreachable mapping request, which is equally unplayable
         setSourceExists(response.status !== 502 && response.status !== 404);
-      } catch (error) {
+      } catch {
         setSourceExists(false);
       }
     };

web/src/components/player/JSMpegPlayer.tsx

@@ -203,7 +203,7 @@ export default function JSMpegPlayer({
           try {
             videoElement.player?.destroy();
             // eslint-disable-next-line no-empty
-          } catch (e) {}
+          } catch {}
 
           if (videoWrapper) {
             videoWrapper.innerHTML = "";

web/src/components/player/MsePlayer.tsx

@@ -357,7 +357,7 @@ function MSEPlayer({
           if (originalHandler) {
             try {
               originalHandler(msg);
-            } catch (e) {
+            } catch {
               // Don't reject - we got the response, just let the error bubble
             }
           }
@@ -478,7 +478,7 @@ function MSEPlayer({
               msRef.current?.setLiveSeekableRange(end, end + 15);
             }
           }
-        } catch (e) {
+        } catch {
           // no-op
         }
       });
@@ -497,7 +497,7 @@ function MSEPlayer({
         } else {
           try {
             sb?.appendBuffer(data as ArrayBuffer);
-          } catch (e) {
+          } catch {
             // no-op
           }
         }

web/src/components/player/PreviewPlayer.tsx

@@ -249,9 +249,6 @@ function PreviewVideoPlayer({
         previewRef.current?.load();
       }, 1000);
       setChangeoverTimeout(timeout);
-
-      // we only want this to change when current preview changes
-      // eslint-disable-next-line react-hooks/exhaustive-deps
     },
     [setCurrentHourFrame, videoSize],
   );

web/src/components/player/VideoControls.tsx

@@ -147,8 +147,6 @@ export default function VideoControls({
     } else {
       return MdVolumeUp;
     }
-    // only update when specific fields change
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [volume, muted]);
 
   const onKeyboardShortcut = useCallback(

web/src/components/player/WebRTCPlayer.tsx

@@ -118,7 +118,7 @@ export default function WebRtcPlayer({
           ? await navigator.mediaDevices.getUserMedia(constraints)
           : await navigator.mediaDevices.getDisplayMedia(constraints);
       return stream.getTracks();
-    } catch (e) {
+    } catch {
       return [];
     }
   }

web/src/components/settings/ZoneEditPane.tsx

@@ -396,7 +396,7 @@ export default function ZoneEditPane({
         ? `cameras.${polygon.camera}.profiles.${editingProfile}.zones.${polygon.name}`
         : `cameras.${polygon.camera}.zones.${polygon.name}`;
 
-      let mutatedConfig = config;
+      let mutatedConfig: typeof config;
       let alertQueries = "";
       let detectionQueries = "";
 
@@ -404,9 +404,6 @@ export default function ZoneEditPane({
 
       if (renamingZone) {
         // rename - delete old zone and replace with new
-        let renameAlertQueries = "";
-        let renameDetectionQueries = "";
-
         // Only handle review queries for base config (not profiles)
         if (!editingProfile) {
           const zoneInAlerts =
@@ -417,7 +414,7 @@ export default function ZoneEditPane({
               polygon.name,
             ) ?? false;
 
-          ({
+          const {
             alertQueries: renameAlertQueries,
             detectionQueries: renameDetectionQueries,
           } = reviewQueries(
@@ -427,7 +424,7 @@ export default function ZoneEditPane({
             polygon.camera,
             cameraConfig?.review.alerts.required_zones || [],
             cameraConfig?.review.detections.required_zones || [],
-          ));
+          );
 
           try {
             await axios.put(
@@ -591,7 +588,6 @@ export default function ZoneEditPane({
         });
     },
     [
-      config,
       updateConfig,
       polygon,
       scaledWidth,

web/src/components/settings/wizard/Step2ProbeOrSnapshot.tsx

@@ -142,7 +142,7 @@ export default function Step2ProbeOrSnapshot({
               reader.onload = () => resolve(reader.result as string);
               reader.readAsDataURL(snapshotBlob);
             });
-          } catch (snapshotError) {
+          } catch {
             snapshotBase64 = undefined;
           }
         }
@@ -307,7 +307,7 @@ export default function Step2ProbeOrSnapshot({
             data.username,
             data.password,
           );
-        } catch (error) {
+        } catch {
           return null;
         }
       }

web/src/components/timeline/MotionReviewTimeline.tsx

@@ -236,7 +236,6 @@ export function MotionReviewTimeline({
       scrollToSegment={scrollToSegment}
       isZooming={isZooming}
       zoomDirection={zoomDirection}
-      getRecordingAvailability={getRecordingAvailability}
       onZoomChange={onZoomChange}
       possibleZoomLevels={possibleZoomLevels}
       currentZoomLevel={currentZoomLevel}

web/src/components/timeline/ReviewTimeline.tsx

@@ -41,7 +41,6 @@ export type ReviewTimelineProps = {
   scrollToSegment: (segmentTime: number, ifNeeded?: boolean) => void;
   isZooming: boolean;
   zoomDirection: TimelineZoomDirection;
-  getRecordingAvailability?: (time: number) => boolean | undefined;
   onZoomChange?: (newZoomLevel: number) => void;
   possibleZoomLevels?: ZoomLevel[];
   currentZoomLevel?: number;
@@ -70,7 +69,6 @@ export function ReviewTimeline({
   scrollToSegment,
   isZooming,
   zoomDirection,
-  getRecordingAvailability,
   onZoomChange,
   possibleZoomLevels,
   currentZoomLevel,
@@ -353,25 +351,6 @@ export function ReviewTimeline({
     }
   }, [isDragging, onHandlebarDraggingChange]);
 
-  const isHandlebarInNoRecordingPeriod = useMemo(() => {
-    if (!getRecordingAvailability || handlebarTime === undefined) return false;
-
-    // Check current segment
-    const currentAvailability = getRecordingAvailability(handlebarTime);
-    if (currentAvailability !== false) return false;
-
-    // Check if at least one adjacent segment also has no recordings
-    const beforeAvailability = getRecordingAvailability(
-      handlebarTime - segmentDuration,
-    );
-    const afterAvailability = getRecordingAvailability(
-      handlebarTime + segmentDuration,
-    );
-
-    // If current segment has no recordings AND at least one adjacent segment also has no recordings
-    return beforeAvailability === false || afterAvailability === false;
-  }, [getRecordingAvailability, handlebarTime, segmentDuration]);
-
   return (
     <>
       <div
@@ -427,12 +406,6 @@ export function ReviewTimeline({
                     ></div>
                   </div>
                 </div>
-                {/* TODO: determine if we should keep this tooltip */}
-                {false && isHandlebarInNoRecordingPeriod && (
-                  <div className="absolute left-1/2 top-full z-50 mt-2 -translate-x-1/2 rounded-md bg-destructive/80 px-4 py-1 text-center text-xs text-white shadow-lg">
-                    No recordings
-                  </div>
-                )}
               </div>
             )}
             {showExportHandles && (