fix(manager): fix lint errors from coverage PR squash merge

CLAUDE.md

@@ -108,6 +108,7 @@ Cursor does not load this file automatically. Keep `.cursor/rules/project-contex
 - Conventional commits: `feat:`, `fix:`, `chore:`, `docs:`.
 - Branch naming: `feat/description`, `fix/description`, `chore/description`, `docs/description`.
 - PRs should target `main`. Squash merge.
+- **NEVER skip pre-commit hooks (`--no-verify`).** If the hook fails, fix the underlying issue. The hook exists to prevent broken code from reaching CI.
 
 ### Environment Variables
 

apps/manager/src/features/coverage/coverage-report-client.tsx

@@ -488,7 +488,9 @@ function ModeToggle({
           Explore
         </button>
         <span
-          className={translateDisabled ? "mode-toggle-disabled-wrap" : undefined}
+          className={
+            translateDisabled ? "mode-toggle-disabled-wrap" : undefined
+          }
           data-tooltip={translateDisabled ? "Coming soon" : undefined}
         >
           <button
@@ -638,7 +640,10 @@ function CoverageFilterDropdown({
       if (event.key === "Escape") setIsOpen(false)
     }
     const handleClickOutside = (event: MouseEvent) => {
-      if (shellRef.current && !shellRef.current.contains(event.target as Node)) {
+      if (
+        shellRef.current &&
+        !shellRef.current.contains(event.target as Node)
+      ) {
         setIsOpen(false)
       }
     }
@@ -670,7 +675,11 @@ function CoverageFilterDropdown({
         <span className="control-chevron" aria-hidden="true" />
       </button>
       {isOpen && (
-        <div className="filter-dropdown-menu" role="listbox" aria-label="Coverage filter">
+        <div
+          className="filter-dropdown-menu"
+          role="listbox"
+          aria-label="Coverage filter"
+        >
           {options.map((option) => (
             <button
               key={option.value}
@@ -1343,7 +1352,10 @@ export function CoverageReportClient({
     const matched = new Set<string>()
     for (const collection of collections) {
       for (const video of collection.videos) {
-        if (video.title.toLowerCase().includes(q) || video.id.toLowerCase().includes(q)) {
+        if (
+          video.title.toLowerCase().includes(q) ||
+          video.id.toLowerCase().includes(q)
+        ) {
           matched.add(video.id)
         }
       }
@@ -1412,7 +1424,10 @@ export function CoverageReportClient({
                     value={reportType}
                     onChange={(next) => {
                       setReportType(next)
-                      if (next !== "subtitles" && interactionMode === "select") {
+                      if (
+                        next !== "subtitles" &&
+                        interactionMode === "select"
+                      ) {
                         handleModeChange("explore")
                       }
                     }}
@@ -1449,7 +1464,6 @@ export function CoverageReportClient({
         </section>
       )}
 
-
       {showCoverageControls && (
         <section className="mode-panel">
           {hydrated && (
@@ -1493,14 +1507,20 @@ export function CoverageReportClient({
             />
           </div>
           {collections.length > 0 && (
-            <div className="search-filter-status" role="status" aria-live="polite">
+            <div
+              className="search-filter-status"
+              role="status"
+              aria-live="polite"
+            >
               Showing {totalCollections}
               {totalCollections !== collections.length
                 ? ` of ${collections.length}`
                 : ""}{" "}
               collection
               {collections.length === 1 ? "" : "s"}
-              {(filter !== "all" || typeFilter !== "all" || searchQuery.trim()) && (
+              {(filter !== "all" ||
+                typeFilter !== "all" ||
+                searchQuery.trim()) && (
                 <button
                   type="button"
                   className="clear-filters-button"
@@ -1751,10 +1771,7 @@ export function CoverageReportClient({
                       const noneCount =
                         selectedLanguageIds.length > 0
                           ? c.none
-                          : Math.max(
-                              0,
-                              languageOptions.length - c.human - c.ai,
-                            )
+                          : Math.max(0, languageOptions.length - c.human - c.ai)
                       const typeName = reportConfig.label.toLowerCase()
                       return (
                         <>

eslint.config.mjs

@@ -2,13 +2,26 @@ import { defineConfig } from "eslint/config"
 import js from "@eslint/js"
 import tseslint from "typescript-eslint"
 import eslintPluginPrettierRecommended from "eslint-plugin-prettier/recommended"
+import reactHooksPlugin from "eslint-plugin-react-hooks"
+import nextPlugin from "@next/eslint-plugin-next"
 
 export default defineConfig(
   {
     ignores: ["**/dist/**", "**/build/**", "**/.next/**", "**/node_modules/**"],
   },
   js.configs.recommended,
   ...tseslint.configs.recommended,
+  {
+    files: ["apps/manager/**/*.tsx", "apps/manager/**/*.ts"],
+    plugins: {
+      "react-hooks": reactHooksPlugin,
+      "@next/next": nextPlugin,
+    },
+    rules: {
+      "react-hooks/set-state-in-effect": "warn",
+      "@next/next/no-img-element": "warn",
+    },
+  },
   {
     rules: {
       "@typescript-eslint/no-unused-vars": [

package.json

@@ -28,9 +28,11 @@
     "@commitlint/cli": "^20.4.1",
     "@commitlint/config-conventional": "^20.4.1",
     "@eslint/js": "^9.0.0",
+    "@next/eslint-plugin-next": "16.2.2",
     "eslint": "^9.0.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-prettier": "^5.5.5",
+    "eslint-plugin-react-hooks": "7",
     "husky": "^9.1.7",
     "lint-staged": "^16.2.7",
     "prettier": "^3.8.1",