chore(eslint): wire up flat config + fix one real ref-in-render bug

Pre-this-commit, ``npm run lint`` had been failing silently with
"ESLint couldn't find an eslint.config.(js|mjs|cjs) file" — the
project shipped eslint v9 + eslint-plugin-react-hooks +
eslint-plugin-react-refresh as devDependencies but no config file,
so lint had been a no-op for an unknown amount of time.

frontend/eslint.config.js (new)
-------------------------------
Flat-config wiring for ESLint 9. Pulls in:

  - js.configs.recommended
  - eslint-plugin-react-hooks v7 recommended ruleset (which now
    includes exhaustive-deps + the new React-Compiler advisory rules)
  - eslint-plugin-react-refresh's only-export-components rule
  - vitest globals scoped to ``tests/**``

Tunings applied (all explained in inline comments):

  - ``no-unused-vars`` ignores PascalCase identifiers because the
    bare rule doesn't track JSX usage (`<Foo />`) and would
    false-positive every component import. The dedicated
    ``react/jsx-uses-vars`` rule would do this properly but pulling
    in eslint-plugin-react for one rule is overkill; the regex
    covers our patterns.

  - ``no-empty`` allows empty catch blocks — we have a few that
    intentionally swallow malformed-localStorage parses.

  - The four new react-hooks v7 React-Compiler advisory rules
    (set-state-in-effect, purity, refs, preserve-manual-memoization)
    demoted from error to warn. They flag patterns the compiler
    can't optimize, not patterns that are currently buggy. Fix
    when touching the surrounding code, not as a sweep.

Real bug fixed
--------------
hooks/useMotionAlerts.jsx — was assigning ``camerasRef.current = cameras``
*during render*, which violates React's purity rules and breaks under
React Compiler / Strict Mode double-renders. Moved the assignment into
``useEffect(() => { camerasRef.current = cameras }, [cameras])`` so
it runs after commit, which is what the SSE callback consumers expected
in the first place. No observable behaviour change for users (the
callback still always sees the post-commit cameras map).

Verification
------------
  npm run lint  — 0 errors, 26 warnings (was 163 problems / unable to run)
  npm test      — 37/37 passing
  npm run build — clean (436ms)

The 26 remaining warnings are all advisory (exhaustive-deps where
adding the missing dep would cause unnecessary re-renders, the four
React-Compiler rules listed above, and react-refresh/only-export-components
on the four hook+context files where the standard fix is a structural
file split). Each is documented in the lint output with a clear path
to resolution; we'll burn them down opportunistically.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

Author: Sbussiso

frontend/eslint.config.js

@@ -0,0 +1,116 @@
+// ESLint flat config (eslint v9+).
+//
+// Pre-this-file the project shipped eslint + eslint-plugin-react-hooks +
+// eslint-plugin-react-refresh as devDependencies and a `npm run lint`
+// script, but no actual config file — meaning `eslint .` silently errored
+// with "couldn't find a config" and the lint command had been a no-op for
+// however long. This file fixes that, with a deliberate focus on rules
+// that catch real bugs (react-hooks/exhaustive-deps) over stylistic ones.
+//
+// What we enable
+// ---------------
+// - `js.configs.recommended`              — base set: no-undef, no-redeclare, etc.
+// - `react-hooks/recommended` (v7+ flat)  — rules-of-hooks + exhaustive-deps
+// - `react-refresh/only-export-components`— Vite HMR safety
+//
+// What we tone down
+// -----------------
+// - `no-unused-vars` — warn (not error) and ignore args starting with `_`
+//   so tests / event handlers can take unused params without ceremony
+// - `no-empty` — error, but allow empty catch blocks that explicitly
+//   intend to swallow (we have a few in localStorage parsing where the
+//   message is "we got malformed JSON; ignore and move on")
+//
+// Test files get vitest globals (describe/it/expect/vi/...) so a future
+// test author doesn't have to import them or chase a no-undef warning.
+
+import js from "@eslint/js"
+import reactHooks from "eslint-plugin-react-hooks"
+import reactRefresh from "eslint-plugin-react-refresh"
+import globals from "globals"
+
+export default [
+  // Always ignore build outputs and vendored code.
+  {
+    ignores: ["dist/**", "node_modules/**", "public/**"],
+  },
+
+  // Base rules + browser env for all source / config / test JS+JSX.
+  {
+    files: ["**/*.{js,jsx}"],
+    languageOptions: {
+      ecmaVersion: "latest",
+      sourceType: "module",
+      globals: {
+        ...globals.browser,
+        ...globals.node, // for vite.config.js
+      },
+      parserOptions: {
+        ecmaFeatures: { jsx: true },
+      },
+    },
+    plugins: {
+      "react-hooks": reactHooks,
+      "react-refresh": reactRefresh,
+    },
+    rules: {
+      ...js.configs.recommended.rules,
+      ...reactHooks.configs.recommended.rules,
+      "react-refresh/only-export-components": [
+        "warn",
+        { allowConstantExport: true },
+      ],
+      // Quality-of-life — these match how the codebase already writes JS.
+      //
+      // ``varsIgnorePattern`` skips PascalCase identifiers because React
+      // components used only in JSX (`<Foo />`) aren't treated as
+      // references by the bare ``no-unused-vars`` rule — that's what
+      // ``eslint-plugin-react``'s ``jsx-uses-vars`` would normally fix,
+      // but pulling in another plugin for one rule is overkill. The
+      // PascalCase regex covers ~all our import-of-component patterns;
+      // the camelCase + lowercase ones still get flagged so we still
+      // catch genuinely-unused locals.
+      "no-unused-vars": [
+        "warn",
+        {
+          argsIgnorePattern: "^_",
+          varsIgnorePattern: "^[A-Z_]",
+          caughtErrorsIgnorePattern: "^_",
+        },
+      ],
+      "no-empty": ["error", { allowEmptyCatch: true }],
+      // react-hooks v7 ships a set of new rules that are (mostly)
+      // forward-looking advisories from the React Compiler — they catch
+      // patterns the compiler can't optimize, not patterns that are
+      // currently buggy. Demote them to warn so CI passes while leaving
+      // the diagnostic information visible. Each one has a textbook fix
+      // (lazy useState, useMemo with no deps, etc.) that we should apply
+      // when we touch the surrounding code, not as a single sweep.
+      "react-hooks/set-state-in-effect": "warn",
+      "react-hooks/purity": "warn",
+      "react-hooks/refs": "warn",
+      "react-hooks/preserve-manual-memoization": "warn",
+    },
+  },
+
+  // Vitest globals for tests — `vitest.config.js` sets `globals: true`,
+  // so `describe` / `it` / `expect` / `vi` / `beforeEach` / `afterEach`
+  // are available without import.
+  {
+    files: ["tests/**/*.{js,jsx}"],
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+        describe: "readonly",
+        it: "readonly",
+        test: "readonly",
+        expect: "readonly",
+        vi: "readonly",
+        beforeEach: "readonly",
+        afterEach: "readonly",
+        beforeAll: "readonly",
+        afterAll: "readonly",
+      },
+    },
+  },
+]

frontend/src/hooks/useMotionAlerts.jsx

@@ -20,9 +20,15 @@ export function useMotionAlerts(cameras) {
   const { getToken } = useAuth()
   const { showToast } = useToasts()
   const abortRef = useRef(null)
-  // Keep cameras ref current so the SSE callback always sees the latest map
+  // Keep cameras ref current so the SSE callback always sees the latest
+  // map. Updating the ref inside an effect (rather than during render)
+  // satisfies React's purity rules — refs aren't supposed to be mutated
+  // during render. The SSE callback fires asynchronously after commit so
+  // it always reads the post-commit value.
   const camerasRef = useRef(cameras)
-  camerasRef.current = cameras
+  useEffect(() => {
+    camerasRef.current = cameras
+  }, [cameras])
 
   useEffect(() => {
     let cancelled = false