Update peewee-migrate requirement in /docker/main

Updates the requirements on [peewee-migrate](https://github.com/klen/peewee_migrate) to permit the latest version.
- [Changelog](https://github.com/klen/peewee_migrate/blob/develop/Changelog)
- [Commits](https://github.com/klen/peewee_migrate/compare/1.14.0...2.3.0)

---
updated-dependencies:
- dependency-name: peewee-migrate
  dependency-version: 2.3.0
  dependency-type: direct:production
...

Signed-off-by: dependabot[bot] <support@github.com>

.github/workflows/pull_request.yml

@@ -46,6 +46,9 @@ jobs:
       - name: Build web
         run: npm run build
         working-directory: ./web
+      # - name: Test
+      #   run: npm run test
+      #   working-directory: ./web
 
   web_e2e:
     name: Web - E2E Tests

docker/main/requirements-wheels.txt

@@ -5,7 +5,7 @@ aiohttp == 3.12.*
 starlette == 0.47.*
 starlette-context == 0.5.*
 fastapi[standard-no-fastapi-cloud-cli] == 0.116.*
-uvicorn == 0.52.*
+uvicorn == 0.46.*
 slowapi == 0.1.*
 joserfc == 1.6.*
 cryptography == 46.0.*
@@ -21,7 +21,7 @@ onvif-zeep-async == 4.0.*
 paho-mqtt == 2.1.*
 pandas == 2.2.*
 peewee == 3.17.*
-peewee_migrate == 1.14.*
+peewee_migrate == 2.3.*
 psutil == 7.1.*
 pydantic == 2.10.*
 git+https://github.com/fbcotter/py3nvml#egg=py3nvml
@@ -61,7 +61,7 @@ rapidfuzz==3.12.*
 argcomplete==2.0.*
 contextlib2==0.6.*
 future==0.18.*
-netaddr==1.3.*
+netaddr==0.8.*
 netifaces==0.10.*
 prometheus-client == 0.26.*
 # TFLite
@@ -73,4 +73,4 @@ faster-whisper==1.2.*
 librosa==0.11.*
 soundfile==0.13.*
 # Memory profiling
-memray == 1.20.*
+memray == 1.15.*

docker/main/rootfs/usr/local/nginx/conf/nginx.conf

@@ -343,6 +343,13 @@ http {
                 add_header Cache-Control "public";
             }
 
+            location /fonts/ {
+                access_log off;
+                expires 1y;
+                include security_headers.conf;
+                add_header Cache-Control "public";
+            }
+
             location /locales/ {
                 access_log off;
                 include security_headers.conf;

docs/docs/development/contributing.md

@@ -204,20 +204,11 @@ Light guidelines and advice:
 npm run lint
 ```
 
-- Ensure the backend [unit tests](#unit-tests) pass. Your PR cannot be merged unless tests pass.
-
-```shell
-python3 -u -m unittest
-```
-
-- Ensure the end-to-end tests pass. They run in Playwright against a production build with mocked API data, so they don't need a running Frigate instance. Add or update tests in `web/e2e/specs/` when you change UI behavior.
+- Add to unit tests and ensure they pass. As much as possible, you should strive to _increase_ test coverage whenever making changes. This will help ensure features do not accidentally become broken in the future.
+- If you run into error messages like "TypeError: Cannot read properties of undefined (reading 'context')" when running tests, this may be due to these issues (https://github.com/vitest-dev/vitest/issues/1910, https://github.com/vitest-dev/vitest/issues/1652) in vitest, but I haven't been able to resolve them.
 
 ```console
-# First-time setup
-npx playwright install chromium
-
-# Build the app and run all tests
-npm run e2e:build && npm run e2e
+npm run test
 ```
 
 - Test in different browsers. Firefox, Chrome, and Safari all have different quirks that make them unique targets to interact with.

frigate/api/auth.py

@@ -786,13 +786,6 @@ def auth(request: Request):
 
         user = token.claims.get("sub")
         role = token.claims.get("role")
-
-        # the token keeps the role it was issued with, so a role removed from
-        # the config since then must send the user back through login
-        if role not in auth_config.roles:
-            logger.debug("jwt role %s is not in the config", role)
-            return fail_response
-
         current_time = int(time.time())
 
         # if the jwt is expired

frigate/api/export.py

@@ -1038,10 +1038,6 @@ def export_recording_custom(
     if camera_validation_error is not None:
         return camera_validation_error
 
-    # Validate user-provided ffmpeg args to prevent injection and add to cases.
-    # Admin users are trusted and skip validation.
-    is_admin = request.headers.get("remote-role", "") == "admin"
-
     playback_source = body.source
     friendly_name = body.name
     existing_image, image_validation_error = _sanitize_existing_image(body.image_path)
@@ -1052,16 +1048,6 @@ def export_recording_custom(
     cpu_fallback = body.cpu_fallback
 
     export_case_id = body.export_case_id
-
-    if export_case_id is not None and not is_admin:
-        return JSONResponse(
-            content={
-                "success": False,
-                "message": "Only admins can attach exports to an existing case.",
-            },
-            status_code=403,
-        )
-
     case_validation_error = _validate_export_case(export_case_id)
     if case_validation_error is not None:
         return case_validation_error
@@ -1078,6 +1064,10 @@ def export_recording_custom(
             status_code=400,
         )
 
+    # Validate user-provided ffmpeg args to prevent injection.
+    # Admin users are trusted and skip validation.
+    is_admin = request.headers.get("remote-role", "") == "admin"
+
     if not is_admin:
         for args_label, args_value in [
             ("input", ffmpeg_input_args),

frigate/api/media.py

@@ -189,7 +189,7 @@ async def camera_ptz_info(request: Request, camera_name: str):
         future = asyncio.run_coroutine_threadsafe(
             request.app.onvif.get_camera_info(camera_name), request.app.onvif.loop
         )
-        result = await asyncio.wrap_future(future)
+        result = future.result()
         return JSONResponse(content=result)
     else:
         return JSONResponse(

frigate/api/record.py

@@ -412,8 +412,11 @@ async def no_recordings(
     if not camera_list:
         return JSONResponse(content=[])
 
-    before = params.before or datetime.now().timestamp()
-    after = params.after or (datetime.now() - timedelta(hours=1)).timestamp()
+    before = params.before or datetime.datetime.now().timestamp()
+    after = (
+        params.after
+        or (datetime.datetime.now() - datetime.timedelta(hours=1)).timestamp()
+    )
     scale = params.scale
 
     recordings: list[tuple[float, float]] = []

frigate/output/preview.py

@@ -66,12 +66,6 @@ def get_cache_image_name(camera: str, frame_time: float) -> str:
     )
 
 
-def is_camera_preview_frame(file_name: str, camera: str) -> bool:
-    """Check whether a cached preview frame file belongs to the camera."""
-    # camera names may contain "-", so a prefix match would include "front-door"
-    return file_name.rsplit("-", 1)[0] == f"preview_{camera}"
-
-
 def get_most_recent_preview_frame(
     camera: str, before: float | None = None
 ) -> str | None:
@@ -85,7 +79,7 @@ def get_most_recent_preview_frame(
         preview_files = [
             f
             for f in os.listdir(PREVIEW_CACHE_DIR)
-            if is_camera_preview_frame(f, camera)
+            if f.startswith(f"preview_{camera}-")
             and f.endswith(f".{PREVIEW_FRAME_TYPE}")
         ]
 
@@ -282,7 +276,7 @@ class PreviewRecorder:
         start_file = f"{file_start}{start_ts}.webp"
 
         for file in sorted(os.listdir(os.path.join(CACHE_DIR, FOLDER_PREVIEW_FRAMES))):
-            if not is_camera_preview_frame(file, self.camera_name):
+            if not file.startswith(file_start):
                 continue
 
             if file < start_file:

frigate/record/export.py

@@ -36,7 +36,6 @@ from frigate.ffmpeg_presets import (
     parse_preset_hardware_acceleration_encode,
 )
 from frigate.models import Export, Previews, Recordings, ReviewSegment
-from frigate.output.preview import is_camera_preview_frame
 from frigate.util.ffmpeg import run_ffmpeg_with_progress
 from frigate.util.ownership import chown_to_runtime
 from frigate.util.recording_coverage import (
@@ -1099,7 +1098,7 @@ class RecordingExporter(threading.Thread):
             fallback_preview = None
 
             for file in sorted(os.listdir(preview_dir)):
-                if not is_camera_preview_frame(file, self.camera):
+                if not file.startswith(file_start):
                     continue
 
                 if file < start_file:

frigate/test/http_api/test_http_auth_jwt_role.py

@@ -1,81 +0,0 @@
-"""Tests that /auth only accepts a JWT whose role is still in the config."""
-
-import os
-import time
-from unittest.mock import MagicMock, Mock, patch
-
-from frigate.api.auth import create_encoded_jwt
-from frigate.api.fastapi_app import create_fastapi_app
-from frigate.config import FrigateConfig
-from frigate.config.camera.updater import CameraConfigUpdatePublisher
-from frigate.const import JWT_SECRET_ENV_VAR
-from frigate.models import Event, Recordings, ReviewSegment
-from frigate.test.http_api.base_http_test import AuthTestClient, BaseTestHttp
-
-
-@patch.dict(os.environ, {JWT_SECRET_ENV_VAR: "test-secret"})
-class TestAuthJwtRole(BaseTestHttp):
-    def setUp(self):
-        super().setUp(models=[Event, Recordings, ReviewSegment])
-        self.minimal_config = {
-            "mqtt": {"host": "mqtt"},
-            "auth": {"enabled": True, "roles": {"garage": ["front_door"]}},
-            "networking": {"listen": {"internal": 5000, "external": 8971}},
-            "cameras": {
-                "front_door": {
-                    "ffmpeg": {
-                        "inputs": [
-                            {"path": "rtsp://10.0.0.1:554/video", "roles": ["detect"]}
-                        ]
-                    },
-                    "detect": {
-                        "height": 1080,
-                        "width": 1920,
-                        "fps": 5,
-                    },
-                }
-            },
-        }
-
-    def _create_app(self):
-        mock_publisher = Mock(spec=CameraConfigUpdatePublisher)
-        mock_publisher.publisher = MagicMock()
-
-        return create_fastapi_app(
-            FrigateConfig(**self.minimal_config),
-            self.db,
-            None,
-            None,
-            None,
-            None,
-            None,
-            None,
-            mock_publisher,
-            None,
-            enforce_default_admin=False,
-        )
-
-    def _auth(self, app, role: str):
-        token = create_encoded_jwt("bob", role, int(time.time()) + 3600, app.jwt_token)
-
-        with AuthTestClient(app) as client:
-            return client.get(
-                "/auth",
-                headers={
-                    "x-server-port": "8971",
-                    "authorization": f"Bearer {token}",
-                },
-            )
-
-    def test_configured_role_is_accepted(self):
-        resp = self._auth(self._create_app(), "garage")
-
-        self.assertEqual(resp.status_code, 202)
-        self.assertEqual(resp.headers["remote-user"], "bob")
-        self.assertEqual(resp.headers["remote-role"], "garage")
-
-    def test_role_removed_from_config_is_rejected(self):
-        resp = self._auth(self._create_app(), "removed_role")
-
-        self.assertEqual(resp.status_code, 401)
-        self.assertNotIn("remote-role", resp.headers)

frigate/test/test_preview_loader.py

@@ -75,21 +75,6 @@ class TestPreviewLoader(unittest.TestCase):
 
         self.assertIsNone(get_most_recent_preview_frame(camera))
 
-    def test_get_most_recent_preview_frame_hyphenated_camera(self):
-        for name in ("preview_front-2000.0", "preview_front-door-3000.0"):
-            with open(
-                os.path.join(PREVIEW_CACHE_DIR, f"{name}.{PREVIEW_FRAME_TYPE}"), "w"
-            ) as f:
-                f.write("test")
-
-        expected_path = os.path.join(
-            PREVIEW_CACHE_DIR, f"preview_front-2000.0.{PREVIEW_FRAME_TYPE}"
-        )
-        self.assertEqual(get_most_recent_preview_frame("front"), expected_path)
-        self.assertEqual(
-            get_most_recent_preview_frame("front", before=5000.0), expected_path
-        )
-
     def test_get_most_recent_preview_frame_no_directory(self):
         shutil.rmtree(PREVIEW_CACHE_DIR)
         self.assertIsNone(get_most_recent_preview_frame("test_camera"))

web/package.json

@@ -12,6 +12,8 @@
     "lint:fix": "eslint --fix .",
     "preview": "vite preview",
     "prettier:write": "prettier -u -w --ignore-path .gitignore \"*.{ts,tsx,js,jsx,css,html}\"",
+    "test": "vitest",
+    "coverage": "vitest run --coverage",
     "e2e:build": "tsc && vite build --base=/",
     "e2e": "playwright test --config e2e/playwright.config.ts",
     "e2e:ui": "playwright test --config e2e/playwright.config.ts --ui",
@@ -22,108 +24,119 @@
   },
   "dependencies": {
     "@cycjimmy/jsmpeg-player": "^6.1.2",
-    "@hookform/resolvers": "^5.9.1",
-    "@radix-ui/react-alert-dialog": "^1.1.23",
+    "@hookform/resolvers": "^3.10.0",
+    "@melloware/react-logviewer": "^6.1.2",
+    "@radix-ui/react-alert-dialog": "^1.1.15",
     "@radix-ui/react-aspect-ratio": "^1.1.15",
-    "@radix-ui/react-checkbox": "^1.3.11",
-    "@radix-ui/react-collapsible": "^1.1.20",
-    "@radix-ui/react-context-menu": "^2.3.7",
-    "@radix-ui/react-dialog": "^1.1.23",
-    "@radix-ui/react-dropdown-menu": "^2.1.24",
-    "@radix-ui/react-hover-card": "^1.1.23",
-    "@radix-ui/react-label": "^2.1.15",
-    "@radix-ui/react-popover": "^1.1.23",
-    "@radix-ui/react-progress": "^1.1.16",
-    "@radix-ui/react-radio-group": "^1.4.7",
-    "@radix-ui/react-scroll-area": "^1.2.18",
-    "@radix-ui/react-select": "^2.3.7",
-    "@radix-ui/react-separator": "^1.1.15",
-    "@radix-ui/react-slider": "^1.4.7",
+    "@radix-ui/react-checkbox": "^1.1.4",
+    "@radix-ui/react-collapsible": "^1.1.12",
+    "@radix-ui/react-context-menu": "^2.2.16",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-hover-card": "^1.1.15",
+    "@radix-ui/react-label": "^2.1.2",
+    "@radix-ui/react-popover": "^1.1.6",
+    "@radix-ui/react-progress": "^1.1.8",
+    "@radix-ui/react-radio-group": "^1.2.3",
+    "@radix-ui/react-scroll-area": "^1.2.3",
+    "@radix-ui/react-select": "^2.1.6",
+    "@radix-ui/react-separator": "^1.1.7",
+    "@radix-ui/react-slider": "^1.2.3",
     "@radix-ui/react-slot": "1.2.4",
-    "@radix-ui/react-switch": "^1.3.7",
-    "@radix-ui/react-tabs": "^1.1.21",
-    "@radix-ui/react-toggle": "^1.1.18",
-    "@radix-ui/react-toggle-group": "^1.1.19",
-    "@radix-ui/react-tooltip": "^1.2.16",
+    "@radix-ui/react-switch": "^1.1.3",
+    "@radix-ui/react-tabs": "^1.1.3",
+    "@radix-ui/react-toggle": "^1.1.2",
+    "@radix-ui/react-toggle-group": "^1.1.2",
+    "@radix-ui/react-tooltip": "^1.2.8",
     "@rjsf/core": "^6.10.0",
     "@rjsf/shadcn": "^6.10.0",
     "@rjsf/utils": "^6.10.0",
     "@rjsf/validator-ajv8": "^6.10.0",
     "apexcharts": "^7.3.0",
-    "axios": "^1.20.0",
+    "axios": "^1.18.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.0.0",
-    "copy-to-clipboard": "^4.0.2",
-    "date-fns": "^4.4.0",
+    "copy-to-clipboard": "^3.3.3",
+    "date-fns": "^3.6.0",
     "date-fns-tz": "^3.2.0",
-    "framer-motion": "^13.3.0",
-    "hls.js": "^1.7.3",
-    "i18next": "^26.4.2",
+    "framer-motion": "^13.2.0",
+    "hls.js": "^1.6.15",
+    "i18next": "^24.2.0",
     "i18next-http-backend": "^4.0.2",
-    "idb-keyval": "^6.3.0",
-    "js-yaml": "^5.4.2",
-    "konva": "^10.5.0",
+    "idb-keyval": "^6.2.1",
+    "js-yaml": "^4.3.2",
+    "konva": "^10.2.3",
     "lodash": "^4.18.1",
-    "lucide-react": "^1.46.0",
-    "monaco-yaml": "^5.5.1",
+    "lucide-react": "^0.577.0",
+    "monaco-yaml": "^5.4.1",
     "next-themes": "^0.4.6",
     "nosleep.js": "^0.12.0",
-    "react": "^19.3.0",
+    "react": "^19.2.4",
     "react-apexcharts": "^2.1.1",
     "react-day-picker": "^9.14.0",
     "react-device-detect": "^2.2.3",
-    "react-dom": "^19.3.0",
-    "react-dropzone": "^20.1.2",
-    "react-grid-layout": "^2.2.4",
-    "react-hook-form": "^7.88.0",
-    "react-i18next": "^17.0.14",
-    "react-icons": "^5.7.0",
-    "react-konva": "^19.2.7",
-    "react-markdown": "^10.1.0",
+    "react-dom": "^19.2.4",
+    "react-dropzone": "^14.3.8",
+    "react-grid-layout": "^2.2.2",
+    "react-hook-form": "^7.72.0",
+    "react-i18next": "^15.2.0",
+    "react-icons": "^5.6.0",
+    "react-konva": "^19.2.3",
+    "react-markdown": "^9.0.1",
     "react-router-dom": "^6.30.6",
     "react-swipeable": "^7.0.2",
     "react-zoom-pan-pinch": "3.4.4",
     "remark-gfm": "^4.0.0",
     "scroll-into-view-if-needed": "^3.1.0",
-    "sonner": "^2.0.8",
-    "swr": "^2.5.1",
+    "sonner": "^2.0.7",
+    "sort-by": "^1.2.0",
+    "strftime": "^0.10.3",
+    "swr": "^2.4.1",
     "tailwind-merge": "^2.4.0",
     "tailwind-scrollbar": "^3.1.0",
     "tailwindcss-animate": "^1.0.7",
-    "use-long-press": "^3.3.0",
+    "use-long-press": "^3.2.0",
     "vaul": "^1.1.2",
-    "virtua": "^0.51.3",
     "vite-plugin-monaco-editor": "^1.1.0",
-    "zod": "^3.25.76"
+    "zod": "^3.23.8"
   },
   "devDependencies": {
     "@eslint/js": "^10.0.1",
-    "@playwright/test": "^1.63.0",
+    "@playwright/test": "^1.59.1",
+    "@tailwindcss/forms": "^0.5.9",
+    "@testing-library/jest-dom": "^6.6.2",
     "@types/js-yaml": "^4.0.9",
-    "@types/lodash": "^4.17.25",
-    "@types/node": "^26.5.1",
-    "@types/react": "^19.3.0",
-    "@types/react-dom": "^19.3.0",
+    "@types/lodash": "^4.17.12",
+    "@types/node": "^25.9.6",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@types/strftime": "^0.9.8",
     "@vitejs/plugin-react": "^6.1.1",
-    "autoprefixer": "^10.6.0",
+    "@vitest/coverage-v8": "^4.1.11",
+    "autoprefixer": "^10.4.20",
     "esbuild": "^0.28.2",
     "eslint": "^10.10.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-prettier": "^5.5.6",
     "eslint-plugin-react-hooks": "^7.1.1",
-    "eslint-plugin-react-refresh": "^0.5.7",
+    "eslint-plugin-react-refresh": "^0.5.6",
+    "fake-indexeddb": "^6.0.0",
     "globals": "^17.12.0",
     "i18next-cli": "^1.5.11",
+    "jest-websocket-mock": "^2.5.0",
+    "jsdom": "^24.1.1",
     "monaco-editor": "^0.52.2",
+    "msw": "^2.3.5",
     "patch-package": "^8.0.1",
     "postcss": "^8.5.12",
-    "prettier": "^3.9.6",
-    "prettier-plugin-tailwindcss": "^0.8.1",
+    "prettier": "^3.3.3",
+    "prettier-plugin-tailwindcss": "^0.6.5",
     "tailwindcss": "^3.4.9",
     "typescript": "^5.9.3",
     "typescript-eslint": "^8.70.0",
-    "vite": "^8.3.0"
+    "vite": "^8.3.0",
+    "vitest": "^4.1.11"
   },
   "overrides": {
     "@radix-ui/react-compose-refs": "1.1.2",

web/src/components/ErrorBoundaries.tsx

@@ -92,12 +92,10 @@ function PagePanel({ failure }: PanelProps) {
 
   const stale = isStaleAsset(failure);
 
-  const onCopy = async () => {
-    // copy() falls back to a prompt and resolves false when the clipboard is
+  const onCopy = () => {
+    // copy() falls back to a prompt and returns false when the clipboard is
     // refused, so a success toast has to wait on the result.
-    const copied = await copy(crashReport(failure, stats?.service.version), {
-      fallbackToPrompt: true,
-    });
+    const copied = copy(crashReport(failure, stats?.service.version));
 
     if (copied) {
       toast.success(t("button.copiedToClipboard"), { position: "top-center" });

web/src/components/Statusbar.tsx

@@ -2,7 +2,7 @@ import { useEmbeddingsReindexProgress } from "@/api/ws";
 import {
   StatusBarMessagesContext,
   StatusMessage,
-} from "@/context/statusbar-context";
+} from "@/context/statusbar-provider";
 import useStats, { useAutoFrigateStats } from "@/hooks/use-stats";
 import StatusBarNotices from "@/components/health/StatusBarNotices";
 import { cn } from "@/lib/utils";

web/src/components/camera/FriendlyNameLabel.tsx

@@ -4,15 +4,13 @@ import { useCameraFriendlyName } from "@/hooks/use-camera-friendly-name";
 import { CameraConfig } from "@/types/frigateConfig";
 import { useZoneFriendlyName } from "@/hooks/use-zone-friendly-name";
 
-interface CameraNameLabelProps extends React.ComponentPropsWithoutRef<
-  typeof LabelPrimitive.Root
-> {
+interface CameraNameLabelProps
+  extends React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> {
   camera?: string | CameraConfig;
 }
 
-interface ZoneNameLabelProps extends React.ComponentPropsWithoutRef<
-  typeof LabelPrimitive.Root
-> {
+interface ZoneNameLabelProps
+  extends React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> {
   zone: string;
   camera?: string;
 }

web/src/components/chat/ChatMessage.tsx

@@ -71,10 +71,10 @@ export function MessageBubble({
 
   const [copied, setCopied] = useState(false);
 
-  const handleCopy = useCallback(async () => {
+  const handleCopy = useCallback(() => {
     const text = content?.trim() || "";
     if (!text) return;
-    if (await copy(text)) {
+    if (copy(text)) {
       setCopied(true);
       toast.success(t("button.copiedToClipboard", { ns: "common" }));
       setTimeout(() => setCopied(false), 2000);

web/src/components/classification/ClassificationModelEditDialog.tsx

@@ -163,18 +163,8 @@ export default function ClassificationModelEditDialog({
     }
   }, [isObjectModel, t]);
 
-  const form = useForm<
-    ObjectFormData | StateFormData,
-    unknown,
-    ObjectFormData | StateFormData
-  >({
-    resolver: zodResolver(
-      formSchema as z.ZodType<
-        ObjectFormData | StateFormData,
-        z.ZodTypeDef,
-        ObjectFormData | StateFormData
-      >,
-    ),
+  const form = useForm<ObjectFormData | StateFormData>({
+    resolver: zodResolver(formSchema),
     defaultValues: isObjectModel
       ? ({
           enabled: model.enabled,

web/src/components/config-form/section-configs/review.ts

@@ -68,7 +68,8 @@ const review: SectionConfigOverrides = {
         position: "after",
         condition: (ctx) => {
           const genai = ctx.formData?.genai as
-            Record<string, unknown> | undefined;
+            | Record<string, unknown>
+            | undefined;
           if (genai?.image_source !== "recordings") return false;
           if (ctx.level === "camera" && ctx.fullCameraConfig) {
             return ctx.fullCameraConfig.record?.enabled === false;

web/src/components/config-form/section-validations/detect.ts

@@ -17,9 +17,11 @@ export function validateDetectDimensions(
   const height = data.height;
 
   const widthErrors = errors.width as
-    { addError?: (message: string) => void } | undefined;
+    | { addError?: (message: string) => void }
+    | undefined;
   const heightErrors = errors.height as
-    { addError?: (message: string) => void } | undefined;
+    | { addError?: (message: string) => void }
+    | undefined;
 
   const message = t("detect.dimensionMustBeEven", { ns: "config/validation" });
 

web/src/components/config-form/sectionExtras/CameraReviewClassification.tsx

@@ -38,7 +38,8 @@ export default function CameraReviewClassification({
   const cameraName = formContext?.cameraName ?? selectedCamera;
   const fullFormData = formContext?.formData as JsonObject | undefined;
   const baselineFormData = formContext?.baselineFormData as
-    JsonObject | undefined;
+    | JsonObject
+    | undefined;
   const cameraConfig = formContext?.fullCameraConfig;
 
   const alertsZones = useMemo(

web/src/components/config-form/sectionExtras/NotificationsSettingsExtras.tsx

@@ -10,7 +10,7 @@ import {
   FormMessage,
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
-import { StatusBarMessagesContext } from "@/context/statusbar-context";
+import { StatusBarMessagesContext } from "@/context/statusbar-provider";
 import { FrigateConfig } from "@/types/frigateConfig";
 import { zodResolver } from "@hookform/resolvers/zod";
 import axios from "axios";
@@ -371,9 +371,9 @@ export default function NotificationsSettingsExtras({
 
   const shouldFetchPubKey = Boolean(
     config &&
-    (config.notifications?.enabled || anyCameraNotificationsEnabled) &&
-    (watchAllEnabled ||
-      (Array.isArray(watchCameras) && watchCameras.length > 0)),
+      (config.notifications?.enabled || anyCameraNotificationsEnabled) &&
+      (watchAllEnabled ||
+        (Array.isArray(watchCameras) && watchCameras.length > 0)),
   );
 
   const { data: publicKey } = useSWR(

web/src/components/config-form/sections/BaseSection.tsx

@@ -61,7 +61,7 @@ import {
   JsonValue,
 } from "@/types/configForm";
 import ActivityIndicator from "@/components/indicators/activity-indicator";
-import { StatusBarMessagesContext } from "@/context/statusbar-context";
+import { StatusBarMessagesContext } from "@/context/statusbar-provider";
 import {
   cameraUpdateTopicMap,
   globalCameraDefaultSections,

web/src/components/config-form/theme/fields/DictAsYamlField.tsx

@@ -1,5 +1,5 @@
 import type { FieldPathList, FieldProps } from "@rjsf/utils";
-import { dump, load, YAMLException } from "js-yaml";
+import yaml from "js-yaml";
 import { Textarea } from "@/components/ui/textarea";
 import { cn } from "@/lib/utils";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
@@ -16,7 +16,7 @@ function formatYaml(value: unknown): string {
     return "";
   }
   try {
-    return dump(value, { indent: 2, lineWidth: -1 }).trimEnd();
+    return yaml.dump(value, { indent: 2, lineWidth: -1 }).trimEnd();
   } catch {
     return "";
   }
@@ -31,7 +31,7 @@ function parseYaml(text: string): {
     return { value: {}, error: undefined };
   }
   try {
-    const parsed = load(trimmed);
+    const parsed = yaml.load(trimmed);
     if (
       typeof parsed !== "object" ||
       parsed === null ||
@@ -41,7 +41,7 @@ function parseYaml(text: string): {
     }
     return { value: parsed as Record<string, unknown>, error: undefined };
   } catch (e) {
-    const msg = e instanceof YAMLException ? e.reason : "Invalid YAML";
+    const msg = e instanceof yaml.YAMLException ? e.reason : "Invalid YAML";
     return { value: undefined, error: msg };
   }
 }

web/src/components/config-form/theme/fields/KnownPlatesField.tsx

@@ -217,7 +217,8 @@ function PlateCombobox({
 export function KnownPlatesField(props: FieldProps) {
   const { schema, formData, onChange, idSchema, disabled, readonly } = props;
   const formContext = props.registry?.formContext as
-    ConfigFormContext | undefined;
+    | ConfigFormContext
+    | undefined;
 
   const configNamespace =
     formContext?.i18nNamespace ??

web/src/components/config-form/theme/fields/LiveStreamsField.tsx

@@ -159,7 +159,8 @@ function StreamValueCombobox({
 export function LiveStreamsField(props: FieldProps) {
   const { schema, formData, onChange, idSchema, disabled, readonly } = props;
   const formContext = props.registry?.formContext as
-    ConfigFormContext | undefined;
+    | ConfigFormContext
+    | undefined;
 
   const configNamespace =
     formContext?.i18nNamespace ??

web/src/components/config-form/theme/fields/ModelsField.tsx

@@ -96,7 +96,8 @@ const getItemProperties = (
 
 const getSceneOptions = (itemSchema: RJSFSchema | undefined): string[] => {
   const scene = getItemProperties(itemSchema).scene as
-    Record<string, unknown> | undefined;
+    | Record<string, unknown>
+    | undefined;
   const values = scene?.enum;
 
   return Array.isArray(values)

web/src/components/config-form/theme/fields/ReplaceRulesField.tsx

@@ -44,7 +44,8 @@ function getPropertyTitle(itemSchema: RJSFSchema | undefined, key: string) {
 export function ReplaceRulesField(props: FieldProps) {
   const { schema, formData, onChange, idSchema, disabled, readonly } = props;
   const formContext = props.registry?.formContext as
-    ConfigFormContext | undefined;
+    | ConfigFormContext
+    | undefined;
 
   const configNamespace =
     formContext?.i18nNamespace ??

web/src/components/config-form/theme/templates/FieldTemplate.tsx

@@ -86,7 +86,8 @@ export function FieldTemplate(props: FieldTemplateProps) {
   const formContext = registry?.formContext as ConfigFormContext | undefined;
   const i18nNamespace = formContext?.i18nNamespace as string | undefined;
   const sectionI18nPrefix = formContext?.sectionI18nPrefix as
-    string | undefined;
+    | string
+    | undefined;
   const isCameraLevel = formContext?.level === "camera";
   const effectiveNamespace = isCameraLevel ? "config/cameras" : i18nNamespace;
   const { t, i18n } = useTranslation([

web/src/components/config-form/theme/templates/MultiSchemaFieldTemplate.tsx

@@ -25,7 +25,8 @@ export function MultiSchemaFieldTemplate<
   const { schema, selector, optionSchemaField, uiSchema } = props;
 
   const uiOptions = uiSchema?.["ui:options"] as
-    UiSchema["ui:options"] | undefined;
+    | UiSchema["ui:options"]
+    | undefined;
   const suppressMultiSchema = uiOptions?.suppressMultiSchema === true;
 
   // Check if this is a simple nullable field that should be handled specially

web/src/components/config-form/theme/widgets/CameraPathWidget.tsx

@@ -55,7 +55,8 @@ export function CameraPathWidget(props: WidgetProps) {
   const [showCredentials, setShowCredentials] = useState(false);
 
   const formContext = props.registry?.formContext as
-    ConfigFormContext | undefined;
+    | ConfigFormContext
+    | undefined;
   const isCameraLevel = formContext?.level === "camera";
   const cameraName = formContext?.cameraName;
   const inputIndex = useMemo(() => getInputIndexFromWidgetId(id), [id]);

web/src/components/config-form/theme/widgets/FfmpegArgsWidget.tsx

@@ -103,7 +103,8 @@ const normalizeManualText = (value: unknown): string => {
 
 export function FfmpegArgsWidget(props: WidgetProps) {
   const formContext = props.registry?.formContext as
-    ConfigFormContext | undefined;
+    | ConfigFormContext
+    | undefined;
   const i18nNamespace = formContext?.i18nNamespace as string | undefined;
   const isCameraLevel = formContext?.level === "camera";
   const effectiveNamespace = isCameraLevel ? "config/cameras" : i18nNamespace;

web/src/components/config-form/theme/widgets/GenAIModelWidget.tsx

@@ -27,7 +27,8 @@ import type { GenAIModelsResponse } from "@/types/chat";
 import { getSizedFieldClassName } from "../utils";
 
 type ProbeResponse =
-  { success: true; models: string[] } | { success: false; message: string };
+  | { success: true; models: string[] }
+  | { success: false; message: string };
 
 type ProbeStatus = "idle" | "probing" | "success" | "error";
 

web/src/components/config-form/theme/widgets/OnvifProfileWidget.tsx

@@ -21,7 +21,8 @@ export function OnvifProfileWidget(props: WidgetProps) {
   const { t } = useTranslation(["views/settings"]);
 
   const formContext = props.registry?.formContext as
-    ConfigFormContext | undefined;
+    | ConfigFormContext
+    | undefined;
   const cameraName = formContext?.cameraName;
   const isCameraLevel = formContext?.level === "camera";
   const hasOnvifHost = !!formContext?.fullCameraConfig?.onvif?.host;

web/src/components/config-form/theme/widgets/SwitchesWidget.tsx

@@ -98,7 +98,8 @@ export function SwitchesWidget(props: WidgetProps) {
   const availableEntities = useMemo(() => {
     const getEntities =
       (props.options?.getEntities as
-        ((context: FormContext) => string[]) | undefined) || (() => []);
+        | ((context: FormContext) => string[])
+        | undefined) || (() => []);
     if (context) {
       return getEntities(context);
     }
@@ -108,8 +109,8 @@ export function SwitchesWidget(props: WidgetProps) {
   const getDisplayLabel = useMemo(
     () =>
       (props.options?.getDisplayLabel as
-        ((entity: string, context?: FormContext) => string) | undefined) ||
-      ((entity: string) => entity),
+        | ((entity: string, context?: FormContext) => string)
+        | undefined) || ((entity: string) => entity),
     [props.options],
   );
 

web/src/components/dynamic/EnhancedScrollFollow.tsx

@@ -0,0 +1,91 @@
+import { useRef, useCallback, useEffect, type ReactNode } from "react";
+import { ScrollFollow } from "@melloware/react-logviewer";
+
+export type ScrollFollowProps = {
+  startFollowing?: boolean;
+  render: (renderProps: ScrollFollowRenderProps) => ReactNode;
+  onCustomScroll?: (
+    scrollTop: number,
+    scrollHeight: number,
+    clientHeight: number,
+  ) => void;
+};
+
+export type ScrollFollowRenderProps = {
+  follow: boolean;
+  onScroll: (args: {
+    scrollTop: number;
+    scrollHeight: number;
+    clientHeight: number;
+  }) => void;
+  startFollowing: () => void;
+  stopFollowing: () => void;
+  onCustomScroll?: (
+    scrollTop: number,
+    scrollHeight: number,
+    clientHeight: number,
+  ) => void;
+};
+
+const SCROLL_BUFFER = 5;
+
+export default function EnhancedScrollFollow(props: ScrollFollowProps) {
+  const followRef = useRef(props.startFollowing || false);
+  const prevScrollTopRef = useRef<number | undefined>(undefined);
+
+  useEffect(() => {
+    prevScrollTopRef.current = undefined;
+  }, []);
+
+  const wrappedRender = useCallback(
+    (renderProps: ScrollFollowRenderProps) => {
+      const wrappedOnScroll = (args: {
+        scrollTop: number;
+        scrollHeight: number;
+        clientHeight: number;
+      }) => {
+        // Check if scrolling up and immediately stop following
+        if (
+          prevScrollTopRef.current !== undefined &&
+          args.scrollTop < prevScrollTopRef.current
+        ) {
+          if (followRef.current) {
+            renderProps.stopFollowing();
+            followRef.current = false;
+          }
+        }
+
+        const bottomThreshold =
+          args.scrollHeight - args.clientHeight - SCROLL_BUFFER;
+        const isNearBottom = args.scrollTop >= bottomThreshold;
+
+        if (isNearBottom && !followRef.current) {
+          renderProps.startFollowing();
+          followRef.current = true;
+        } else if (!isNearBottom && followRef.current) {
+          renderProps.stopFollowing();
+          followRef.current = false;
+        }
+
+        prevScrollTopRef.current = args.scrollTop;
+        renderProps.onScroll(args);
+        if (props.onCustomScroll) {
+          props.onCustomScroll(
+            args.scrollTop,
+            args.scrollHeight,
+            args.clientHeight,
+          );
+        }
+      };
+
+      return props.render({
+        ...renderProps,
+        onScroll: wrappedOnScroll,
+        follow: followRef.current,
+      });
+    },
+    [props],
+  );
+
+  return <ScrollFollow {...props} render={wrappedRender} />;
+}

web/src/components/filter/CameraGroupSelector.tsx

@@ -10,7 +10,6 @@ import { MdHome } from "react-icons/md";
 import { Button, buttonVariants } from "../ui/button";
 import {
   useCallback,
-  useContext,
   useEffect,
   useLayoutEffect,
   useMemo,
@@ -67,8 +66,7 @@ import { z } from "zod";
 import { Toaster } from "@/components/ui/sonner";
 import { toast } from "sonner";
 import ActivityIndicator from "../indicators/activity-indicator";
-import { deleteUserNamespacedKey } from "@/hooks/use-user-persistence";
-import { AuthContext } from "@/context/auth-context";
+import { useUserPersistence } from "@/hooks/use-user-persistence";
 import { TooltipPortal } from "@radix-ui/react-tooltip";
 import { cn } from "@/lib/utils";
 import * as LuIcons from "react-icons/lu";
@@ -501,8 +499,9 @@ function NewGroupDialog({
   const [editState, setEditState] = useState<"none" | "add" | "edit">("none");
   const [isLoading, setIsLoading] = useState(false);
 
-  const { auth } = useContext(AuthContext);
-  const username = auth?.user?.username;
+  const [, , , deleteGridLayout] = useUserPersistence(
+    `${activeGroup}-draggable-layout`,
+  );
 
   useEffect(() => {
     if (!open) {
@@ -514,14 +513,15 @@ function NewGroupDialog({
 
   const onDeleteGroup = useCallback(
     async (name: string) => {
+      deleteGridLayout();
+      deleteGroup();
+
       await axios
         .put(`config/set?camera_groups.${name}`, { requires_restart: 0 })
         .then((res) => {
           if (res.status === 200) {
-            deleteUserNamespacedKey(`${name}-draggable-layout`, username);
             if (activeGroup == name) {
               // deleting current group
-              deleteGroup();
               setGroup("default");
             }
             updateConfig();
@@ -557,7 +557,15 @@ function NewGroupDialog({
           setIsLoading(false);
         });
     },
-    [updateConfig, activeGroup, setGroup, setOpen, deleteGroup, username, t],
+    [
+      updateConfig,
+      activeGroup,
+      setGroup,
+      setOpen,
+      deleteGroup,
+      deleteGridLayout,
+      t,
+    ],
   );
 
   const onSave = () => {

web/src/components/navigation/Bottombar.tsx

@@ -19,7 +19,7 @@ import useNavigation from "@/hooks/use-navigation";
 import {
   StatusBarMessagesContext,
   StatusMessage,
-} from "@/context/statusbar-context";
+} from "@/context/statusbar-provider";
 import { Link } from "react-router-dom";
 import { cn } from "@/lib/utils";
 import { isMobile } from "react-device-detect";

web/src/components/player/PreviewController.ts

@@ -1,13 +0,0 @@
-export abstract class PreviewController {
-  public camera = "";
-
-  constructor(camera: string) {
-    this.camera = camera;
-  }
-
-  abstract scrubToTimestamp(time: number): boolean;
-
-  abstract finishedSeeking(): void;
-
-  abstract setNewPreviewStartTime(time: number): void;
-}

web/src/components/player/PreviewPlayer.tsx

@@ -22,7 +22,6 @@ import {
 } from "@/hooks/use-camera-previews";
 import { useTranslation } from "react-i18next";
 import { useCameraFriendlyName } from "@/hooks/use-camera-friendly-name";
-import { PreviewController } from "./PreviewController";
 
 type PreviewPlayerProps = {
   previewRef?: (ref: HTMLDivElement | null) => void;
@@ -103,6 +102,20 @@ export default function PreviewPlayer({
   );
 }
 
+export abstract class PreviewController {
+  public camera = "";
+
+  constructor(camera: string) {
+    this.camera = camera;
+  }
+
+  abstract scrubToTimestamp(time: number): boolean;
+
+  abstract finishedSeeking(): void;
+
+  abstract setNewPreviewStartTime(time: number): void;
+}
+
 type PreviewVideoPlayerProps = {
   visibilityRef?: (ref: HTMLDivElement | null) => void;
   className?: string;

web/src/components/player/dynamic/AutoQualityGovernor.ts

@@ -8,7 +8,11 @@
  */
 
 export type DownswitchReason =
-  "stall" | "bandwidth" | "fatal-error" | "startup" | "codec";
+  | "stall"
+  | "bandwidth"
+  | "fatal-error"
+  | "startup"
+  | "codec";
 
 // stalls just after a seek are expected on any network (the target
 // position is rarely buffered), so they get a longer budget and are

web/src/components/player/dynamic/DynamicVideoController.ts

@@ -1,6 +1,6 @@
 import { Recording } from "@/types/record";
 import { DynamicPlayback } from "@/types/playback";
-import { PreviewController } from "../PreviewController";
+import { PreviewController } from "../PreviewPlayer";
 import { TimeRange, TrackingDetailsSequence } from "@/types/timeline";
 import {
   calculateInpointOffset,

web/src/components/player/dynamic/DynamicVideoPlayer.tsx

@@ -16,8 +16,7 @@ import {
   RecordingCoverage,
 } from "@/types/record";
 import { Preview } from "@/types/preview";
-import PreviewPlayer from "../PreviewPlayer";
-import { PreviewController } from "../PreviewController";
+import PreviewPlayer, { PreviewController } from "../PreviewPlayer";
 import { DynamicVideoController } from "./DynamicVideoController";
 import HlsVideoPlayer, { HlsSource } from "../HlsVideoPlayer";
 import { useDetailStream } from "@/context/detail-stream-context";

web/src/components/settings/CloneCameraDialog.tsx

@@ -65,7 +65,7 @@ import {
 import { buildConfigDataForPath } from "@/utils/configUtil";
 import { useConfigSchema } from "@/hooks/use-config-schema";
 import { useRestart } from "@/api/ws";
-import { StatusBarMessagesContext } from "@/context/statusbar-context";
+import { StatusBarMessagesContext } from "@/context/statusbar-provider";
 import RestartDialog from "@/components/overlay/dialog/RestartDialog";
 import ActivityIndicator from "@/components/indicators/activity-indicator";
 import SaveAllPreviewPopover from "@/components/overlay/detail/SaveAllPreviewPopover";

web/src/components/settings/PolygonCanvas.tsx

@@ -203,8 +203,7 @@ export function PolygonCanvas({
     if (stage) {
       // we add an unfilled line for adding points when finished
       const index = e.target.index - (activePolygon.isFinished ? 2 : 1);
-      const dragged = e.target.getAbsolutePosition();
-      let pos = [dragged.x, dragged.y];
+      let pos = [e.target._lastPos!.x, e.target._lastPos!.y];
 
       if (snapPoints) {
         // Snap to other polygons' edges

web/src/components/settings/ZoneEditPane.tsx

@@ -316,11 +316,7 @@ export default function ZoneEditPane({
     return profileZone ?? cam.zones[polygon.name];
   }, [polygon, config, editingProfile]);
 
-  const form = useForm<
-    z.input<typeof formSchema>,
-    unknown,
-    z.output<typeof formSchema>
-  >({
+  const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
     mode: "onChange",
     defaultValues: {
@@ -605,7 +601,7 @@ export default function ZoneEditPane({
     ],
   );
 
-  function onSubmit(values: z.output<typeof formSchema>) {
+  function onSubmit(values: z.infer<typeof formSchema>) {
     if (activePolygonIndex === undefined || !values || !polygons) {
       return;
     }

web/src/components/ui/aspect-ratio.tsx

@@ -1,5 +1,5 @@
-import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio";
+import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"
 
-const AspectRatio = AspectRatioPrimitive.Root;
+const AspectRatio = AspectRatioPrimitive.Root
 
-export { AspectRatio };
+export { AspectRatio }

web/src/components/ui/badge.tsx

@@ -24,8 +24,7 @@ const badgeVariants = cva(
 );
 
 export interface BadgeProps
-  extends
-    React.HTMLAttributes<HTMLDivElement>,
+  extends React.HTMLAttributes<HTMLDivElement>,
     VariantProps<typeof badgeVariants> {}
 
 function Badge({ className, variant, ...props }: BadgeProps) {

web/src/components/ui/button.tsx

@@ -35,8 +35,7 @@ const buttonVariants = cva(
 );
 
 export interface ButtonProps
-  extends
-    React.ButtonHTMLAttributes<HTMLButtonElement>,
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
   asChild?: boolean;
 }

web/src/components/ui/checkbox.tsx

@@ -1,8 +1,8 @@
-import * as React from "react";
-import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
-import { Check } from "lucide-react";
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { Check } from "lucide-react"
 
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/utils"
 
 const Checkbox = React.forwardRef<
   React.ElementRef<typeof CheckboxPrimitive.Root>,
@@ -11,8 +11,8 @@ const Checkbox = React.forwardRef<
   <CheckboxPrimitive.Root
     ref={ref}
     className={cn(
-      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-      className,
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      className
     )}
     {...props}
   >
@@ -22,7 +22,7 @@ const Checkbox = React.forwardRef<
       <Check className="h-4 w-4" />
     </CheckboxPrimitive.Indicator>
   </CheckboxPrimitive.Root>
-));
-Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+))
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
 
-export { Checkbox };
+export { Checkbox }

web/src/components/ui/circular-progress-bar.tsx

@@ -99,11 +99,7 @@ export default function AnimatedCircularProgressBar({
       </svg>
       <span
         data-current-value={currentPercent}
-        className="absolute inset-0 m-auto size-fit ease-linear animate-in fade-in"
-        style={{
-          animationDuration: "var(--transition-length)",
-          animationDelay: "var(--delay)",
-        }}
+        className="duration-[var(--transition-length)] delay-[var(--delay)] absolute inset-0 m-auto size-fit ease-linear animate-in fade-in"
       >
         {currentPercent}%
       </span>

web/src/components/ui/context-menu.tsx

@@ -1,41 +1,41 @@
-import * as React from "react";
-import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
-import { Check, ChevronRight, Circle } from "lucide-react";
+import * as React from "react"
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
+import { Check, ChevronRight, Circle } from "lucide-react"
 
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/utils"
 
-const ContextMenu = ContextMenuPrimitive.Root;
+const ContextMenu = ContextMenuPrimitive.Root
 
-const ContextMenuTrigger = ContextMenuPrimitive.Trigger;
+const ContextMenuTrigger = ContextMenuPrimitive.Trigger
 
-const ContextMenuGroup = ContextMenuPrimitive.Group;
+const ContextMenuGroup = ContextMenuPrimitive.Group
 
-const ContextMenuPortal = ContextMenuPrimitive.Portal;
+const ContextMenuPortal = ContextMenuPrimitive.Portal
 
-const ContextMenuSub = ContextMenuPrimitive.Sub;
+const ContextMenuSub = ContextMenuPrimitive.Sub
 
-const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
+const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup
 
 const ContextMenuSubTrigger = React.forwardRef<
   React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {
-    inset?: boolean;
+    inset?: boolean
   }
 >(({ className, inset, children, ...props }, ref) => (
   <ContextMenuPrimitive.SubTrigger
     ref={ref}
     className={cn(
-      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[state=open]:bg-accent data-[state=open]:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
       inset && "pl-8",
-      className,
+      className
     )}
     {...props}
   >
     {children}
     <ChevronRight className="ml-auto h-4 w-4" />
   </ContextMenuPrimitive.SubTrigger>
-));
-ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
+))
+ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName
 
 const ContextMenuSubContent = React.forwardRef<
   React.ElementRef<typeof ContextMenuPrimitive.SubContent>,
@@ -45,12 +45,12 @@ const ContextMenuSubContent = React.forwardRef<
     ref={ref}
     className={cn(
       "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      className,
+      className
     )}
     {...props}
   />
-));
-ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
+))
+ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName
 
 const ContextMenuContent = React.forwardRef<
   React.ElementRef<typeof ContextMenuPrimitive.Content>,
@@ -61,31 +61,31 @@ const ContextMenuContent = React.forwardRef<
       ref={ref}
       className={cn(
         "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        className,
+        className
       )}
       {...props}
     />
   </ContextMenuPrimitive.Portal>
-));
-ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
+))
+ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName
 
 const ContextMenuItem = React.forwardRef<
   React.ElementRef<typeof ContextMenuPrimitive.Item>,
   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {
-    inset?: boolean;
+    inset?: boolean
   }
 >(({ className, inset, ...props }, ref) => (
   <ContextMenuPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-accent focus:text-accent-foreground",
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       inset && "pl-8",
-      className,
+      className
     )}
     {...props}
   />
-));
-ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;
+))
+ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName
 
 const ContextMenuCheckboxItem = React.forwardRef<
   React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,
@@ -94,8 +94,8 @@ const ContextMenuCheckboxItem = React.forwardRef<
   <ContextMenuPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-accent focus:text-accent-foreground",
-      className,
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
     )}
     checked={checked}
     {...props}
@@ -107,9 +107,9 @@ const ContextMenuCheckboxItem = React.forwardRef<
     </span>
     {children}
   </ContextMenuPrimitive.CheckboxItem>
-));
+))
 ContextMenuCheckboxItem.displayName =
-  ContextMenuPrimitive.CheckboxItem.displayName;
+  ContextMenuPrimitive.CheckboxItem.displayName
 
 const ContextMenuRadioItem = React.forwardRef<
   React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,
@@ -118,8 +118,8 @@ const ContextMenuRadioItem = React.forwardRef<
   <ContextMenuPrimitive.RadioItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-accent focus:text-accent-foreground",
-      className,
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
     )}
     {...props}
   >
@@ -130,13 +130,13 @@ const ContextMenuRadioItem = React.forwardRef<
     </span>
     {children}
   </ContextMenuPrimitive.RadioItem>
-));
-ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName;
+))
+ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName
 
 const ContextMenuLabel = React.forwardRef<
   React.ElementRef<typeof ContextMenuPrimitive.Label>,
   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {
-    inset?: boolean;
+    inset?: boolean
   }
 >(({ className, inset, ...props }, ref) => (
   <ContextMenuPrimitive.Label
@@ -144,12 +144,12 @@ const ContextMenuLabel = React.forwardRef<
     className={cn(
       "px-2 py-1.5 text-sm font-semibold text-foreground",
       inset && "pl-8",
-      className,
+      className
     )}
     {...props}
   />
-));
-ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName;
+))
+ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName
 
 const ContextMenuSeparator = React.forwardRef<
   React.ElementRef<typeof ContextMenuPrimitive.Separator>,
@@ -160,8 +160,8 @@ const ContextMenuSeparator = React.forwardRef<
     className={cn("-mx-1 my-1 h-px bg-border", className)}
     {...props}
   />
-));
-ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName;
+))
+ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName
 
 const ContextMenuShortcut = ({
   className,
@@ -171,13 +171,13 @@ const ContextMenuShortcut = ({
     <span
       className={cn(
         "ml-auto text-xs tracking-widest text-muted-foreground",
-        className,
+        className
       )}
       {...props}
     />
-  );
-};
-ContextMenuShortcut.displayName = "ContextMenuShortcut";
+  )
+}
+ContextMenuShortcut.displayName = "ContextMenuShortcut"
 
 export {
   ContextMenu,
@@ -195,4 +195,4 @@ export {
   ContextMenuSubContent,
   ContextMenuSubTrigger,
   ContextMenuRadioGroup,
-};
+}

web/src/components/ui/dropdown-menu.tsx

@@ -1,42 +1,42 @@
-import * as React from "react";
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
-import { Check, ChevronRight, Circle } from "lucide-react";
+import * as React from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { Check, ChevronRight, Circle } from "lucide-react"
 
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/utils"
 
-const DropdownMenu = DropdownMenuPrimitive.Root;
+const DropdownMenu = DropdownMenuPrimitive.Root
 
-const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
 
-const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+const DropdownMenuGroup = DropdownMenuPrimitive.Group
 
-const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal
 
-const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+const DropdownMenuSub = DropdownMenuPrimitive.Sub
 
-const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
 
 const DropdownMenuSubTrigger = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
-    inset?: boolean;
+    inset?: boolean
   }
 >(({ className, inset, children, ...props }, ref) => (
   <DropdownMenuPrimitive.SubTrigger
     ref={ref}
     className={cn(
-      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[state=open]:bg-accent focus:bg-accent",
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
       inset && "pl-8",
-      className,
+      className
     )}
     {...props}
   >
     {children}
     <ChevronRight className="ml-auto h-4 w-4" />
   </DropdownMenuPrimitive.SubTrigger>
-));
+))
 DropdownMenuSubTrigger.displayName =
-  DropdownMenuPrimitive.SubTrigger.displayName;
+  DropdownMenuPrimitive.SubTrigger.displayName
 
 const DropdownMenuSubContent = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
@@ -46,13 +46,13 @@ const DropdownMenuSubContent = React.forwardRef<
     ref={ref}
     className={cn(
       "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      className,
+      className
     )}
     {...props}
   />
-));
+))
 DropdownMenuSubContent.displayName =
-  DropdownMenuPrimitive.SubContent.displayName;
+  DropdownMenuPrimitive.SubContent.displayName
 
 const DropdownMenuContent = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Content>,
@@ -66,31 +66,31 @@ const DropdownMenuContent = React.forwardRef<
       sideOffset={sideOffset}
       className={cn(
         "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        className,
+        className
       )}
       {...props}
     />
   </DropdownMenuPrimitive.Portal>
-));
-DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+))
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
 
 const DropdownMenuItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Item>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
-    inset?: boolean;
+    inset?: boolean
   }
 >(({ className, inset, ...props }, ref) => (
   <DropdownMenuPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-accent focus:text-accent-foreground",
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       inset && "pl-8",
-      className,
+      className
     )}
     {...props}
   />
-));
-DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+))
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
 
 const DropdownMenuCheckboxItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
@@ -99,8 +99,8 @@ const DropdownMenuCheckboxItem = React.forwardRef<
   <DropdownMenuPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-accent focus:text-accent-foreground",
-      className,
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
     )}
     checked={checked}
     {...props}
@@ -112,9 +112,9 @@ const DropdownMenuCheckboxItem = React.forwardRef<
     </span>
     {children}
   </DropdownMenuPrimitive.CheckboxItem>
-));
+))
 DropdownMenuCheckboxItem.displayName =
-  DropdownMenuPrimitive.CheckboxItem.displayName;
+  DropdownMenuPrimitive.CheckboxItem.displayName
 
 const DropdownMenuRadioItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
@@ -123,8 +123,8 @@ const DropdownMenuRadioItem = React.forwardRef<
   <DropdownMenuPrimitive.RadioItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-accent focus:text-accent-foreground",
-      className,
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
     )}
     {...props}
   >
@@ -135,13 +135,13 @@ const DropdownMenuRadioItem = React.forwardRef<
     </span>
     {children}
   </DropdownMenuPrimitive.RadioItem>
-));
-DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
+))
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
 
 const DropdownMenuLabel = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Label>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
-    inset?: boolean;
+    inset?: boolean
   }
 >(({ className, inset, ...props }, ref) => (
   <DropdownMenuPrimitive.Label
@@ -149,12 +149,12 @@ const DropdownMenuLabel = React.forwardRef<
     className={cn(
       "px-2 py-1.5 text-sm font-semibold",
       inset && "pl-8",
-      className,
+      className
     )}
     {...props}
   />
-));
-DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+))
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
 
 const DropdownMenuSeparator = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
@@ -165,8 +165,8 @@ const DropdownMenuSeparator = React.forwardRef<
     className={cn("-mx-1 my-1 h-px bg-muted", className)}
     {...props}
   />
-));
-DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+))
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
 
 const DropdownMenuShortcut = ({
   className,
@@ -177,9 +177,9 @@ const DropdownMenuShortcut = ({
       className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
       {...props}
     />
-  );
-};
-DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
+  )
+}
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
 
 export {
   DropdownMenu,
@@ -197,4 +197,4 @@ export {
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
   DropdownMenuRadioGroup,
-};
+}

web/src/components/ui/hover-card.tsx

@@ -1,11 +1,11 @@
-import * as React from "react";
-import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
+import * as React from "react"
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
 
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/utils"
 
-const HoverCard = HoverCardPrimitive.Root;
+const HoverCard = HoverCardPrimitive.Root
 
-const HoverCardTrigger = HoverCardPrimitive.Trigger;
+const HoverCardTrigger = HoverCardPrimitive.Trigger
 
 const HoverCardContent = React.forwardRef<
   React.ElementRef<typeof HoverCardPrimitive.Content>,
@@ -17,11 +17,11 @@ const HoverCardContent = React.forwardRef<
     sideOffset={sideOffset}
     className={cn(
       "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      className,
+      className
     )}
     {...props}
   />
-));
-HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
+))
+HoverCardContent.displayName = HoverCardPrimitive.Content.displayName
 
-export { HoverCard, HoverCardTrigger, HoverCardContent };
+export { HoverCard, HoverCardTrigger, HoverCardContent }

web/src/components/ui/input.tsx

@@ -2,7 +2,8 @@ import * as React from "react";
 
 import { cn } from "@/lib/utils";
 
-export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {}
 
 const Input = React.forwardRef<HTMLInputElement, InputProps>(
   ({ className, type, ...props }, ref) => {

web/src/components/ui/label.tsx

@@ -1,12 +1,12 @@
-import * as React from "react";
-import * as LabelPrimitive from "@radix-ui/react-label";
-import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { cva, type VariantProps } from "class-variance-authority"
 
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/utils"
 
 const labelVariants = cva(
-  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
-);
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+)
 
 const Label = React.forwardRef<
   React.ElementRef<typeof LabelPrimitive.Root>,
@@ -18,7 +18,7 @@ const Label = React.forwardRef<
     className={cn(labelVariants(), className)}
     {...props}
   />
-));
-Label.displayName = LabelPrimitive.Root.displayName;
+))
+Label.displayName = LabelPrimitive.Root.displayName
 
-export { Label };
+export { Label }

web/src/components/ui/progress.tsx

@@ -1,7 +1,7 @@
-import * as React from "react";
-import * as ProgressPrimitive from "@radix-ui/react-progress";
+import * as React from "react"
+import * as ProgressPrimitive from "@radix-ui/react-progress"
 
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/utils"
 
 const Progress = React.forwardRef<
   React.ElementRef<typeof ProgressPrimitive.Root>,
@@ -11,7 +11,7 @@ const Progress = React.forwardRef<
     ref={ref}
     className={cn(
       "relative h-4 w-full overflow-hidden rounded-full bg-secondary",
-      className,
+      className
     )}
     {...props}
   >
@@ -20,7 +20,7 @@ const Progress = React.forwardRef<
       style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
     />
   </ProgressPrimitive.Root>
-));
-Progress.displayName = ProgressPrimitive.Root.displayName;
+))
+Progress.displayName = ProgressPrimitive.Root.displayName
 
-export { Progress };
+export { Progress }

web/src/components/ui/radio-group.tsx

@@ -1,8 +1,8 @@
-import * as React from "react";
-import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
-import { Circle } from "lucide-react";
+import * as React from "react"
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
+import { Circle } from "lucide-react"
 
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/utils"
 
 const RadioGroup = React.forwardRef<
   React.ElementRef<typeof RadioGroupPrimitive.Root>,
@@ -14,9 +14,9 @@ const RadioGroup = React.forwardRef<
       {...props}
       ref={ref}
     />
-  );
-});
-RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
+  )
+})
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName
 
 const RadioGroupItem = React.forwardRef<
   React.ElementRef<typeof RadioGroupPrimitive.Item>,
@@ -27,7 +27,7 @@ const RadioGroupItem = React.forwardRef<
       ref={ref}
       className={cn(
         "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-        className,
+        className
       )}
       {...props}
     >
@@ -35,8 +35,8 @@ const RadioGroupItem = React.forwardRef<
         <Circle className="h-2.5 w-2.5 fill-current text-current" />
       </RadioGroupPrimitive.Indicator>
     </RadioGroupPrimitive.Item>
-  );
-});
-RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
+  )
+})
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName
 
-export { RadioGroup, RadioGroupItem };
+export { RadioGroup, RadioGroupItem }

web/src/components/ui/scroll-area.tsx

@@ -1,7 +1,7 @@
-import * as React from "react";
-import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+import * as React from "react"
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
 
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/utils"
 
 const ScrollArea = React.forwardRef<
   React.ElementRef<typeof ScrollAreaPrimitive.Root>,
@@ -18,8 +18,8 @@ const ScrollArea = React.forwardRef<
     <ScrollBar />
     <ScrollAreaPrimitive.Corner />
   </ScrollAreaPrimitive.Root>
-));
-ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+))
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
 
 const ScrollBar = React.forwardRef<
   React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
@@ -34,13 +34,13 @@ const ScrollBar = React.forwardRef<
         "h-full w-2.5 border-l border-l-transparent p-[1px]",
       orientation === "horizontal" &&
         "h-2.5 flex-col border-t border-t-transparent p-[1px]",
-      className,
+      className
     )}
     {...props}
   >
     <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
   </ScrollAreaPrimitive.ScrollAreaScrollbar>
-));
-ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+))
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
 
-export { ScrollArea, ScrollBar };
+export { ScrollArea, ScrollBar }

web/src/components/ui/separator.tsx

@@ -1,7 +1,7 @@
-import * as React from "react";
-import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import * as React from "react"
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
 
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/utils"
 
 const Separator = React.forwardRef<
   React.ElementRef<typeof SeparatorPrimitive.Root>,
@@ -9,7 +9,7 @@ const Separator = React.forwardRef<
 >(
   (
     { className, orientation = "horizontal", decorative = true, ...props },
-    ref,
+    ref
   ) => (
     <SeparatorPrimitive.Root
       ref={ref}
@@ -18,12 +18,12 @@ const Separator = React.forwardRef<
       className={cn(
         "shrink-0 bg-border",
         orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
-        className,
+        className
       )}
       {...props}
     />
-  ),
-);
-Separator.displayName = SeparatorPrimitive.Root.displayName;
+  )
+)
+Separator.displayName = SeparatorPrimitive.Root.displayName
 
-export { Separator };
+export { Separator }

web/src/components/ui/sheet.tsx

@@ -93,8 +93,7 @@ const sheetVariants = cva(
 );
 
 interface SheetContentProps
-  extends
-    React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
+  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
     VariantProps<typeof sheetVariants> {}
 
 const SheetContent = React.forwardRef<

web/src/components/ui/skeleton.tsx

@@ -1,4 +1,4 @@
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/utils"
 
 function Skeleton({
   className,
@@ -9,7 +9,7 @@ function Skeleton({
       className={cn("animate-pulse rounded-md bg-muted", className)}
       {...props}
     />
-  );
+  )
 }
 
-export { Skeleton };
+export { Skeleton }

web/src/components/ui/switch.tsx

@@ -9,7 +9,7 @@ const Switch = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SwitchPrimitives.Root
     className={cn(
-      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors data-[state=checked]:bg-selected data-[state=unchecked]:bg-input focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50",
+      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-selected data-[state=unchecked]:bg-input",
       className,
     )}
     {...props}

web/src/components/ui/table.tsx

@@ -1,6 +1,6 @@
-import * as React from "react";
+import * as React from "react"
 
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/utils"
 
 const Table = React.forwardRef<
   HTMLTableElement,
@@ -13,16 +13,16 @@ const Table = React.forwardRef<
       {...props}
     />
   </div>
-));
-Table.displayName = "Table";
+))
+Table.displayName = "Table"
 
 const TableHeader = React.forwardRef<
   HTMLTableSectionElement,
   React.HTMLAttributes<HTMLTableSectionElement>
 >(({ className, ...props }, ref) => (
   <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
-));
-TableHeader.displayName = "TableHeader";
+))
+TableHeader.displayName = "TableHeader"
 
 const TableBody = React.forwardRef<
   HTMLTableSectionElement,
@@ -33,8 +33,8 @@ const TableBody = React.forwardRef<
     className={cn("[&_tr:last-child]:border-0", className)}
     {...props}
   />
-));
-TableBody.displayName = "TableBody";
+))
+TableBody.displayName = "TableBody"
 
 const TableFooter = React.forwardRef<
   HTMLTableSectionElement,
@@ -44,12 +44,12 @@ const TableFooter = React.forwardRef<
     ref={ref}
     className={cn(
       "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
-      className,
+      className
     )}
     {...props}
   />
-));
-TableFooter.displayName = "TableFooter";
+))
+TableFooter.displayName = "TableFooter"
 
 const TableRow = React.forwardRef<
   HTMLTableRowElement,
@@ -58,13 +58,13 @@ const TableRow = React.forwardRef<
   <tr
     ref={ref}
     className={cn(
-      "border-b transition-colors data-[state=selected]:bg-muted hover:bg-muted/50",
-      className,
+      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+      className
     )}
     {...props}
   />
-));
-TableRow.displayName = "TableRow";
+))
+TableRow.displayName = "TableRow"
 
 const TableHead = React.forwardRef<
   HTMLTableCellElement,
@@ -74,12 +74,12 @@ const TableHead = React.forwardRef<
     ref={ref}
     className={cn(
       "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
-      className,
+      className
     )}
     {...props}
   />
-));
-TableHead.displayName = "TableHead";
+))
+TableHead.displayName = "TableHead"
 
 const TableCell = React.forwardRef<
   HTMLTableCellElement,
@@ -90,8 +90,8 @@ const TableCell = React.forwardRef<
     className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
     {...props}
   />
-));
-TableCell.displayName = "TableCell";
+))
+TableCell.displayName = "TableCell"
 
 const TableCaption = React.forwardRef<
   HTMLTableCaptionElement,
@@ -102,8 +102,8 @@ const TableCaption = React.forwardRef<
     className={cn("mt-4 text-sm text-muted-foreground", className)}
     {...props}
   />
-));
-TableCaption.displayName = "TableCaption";
+))
+TableCaption.displayName = "TableCaption"
 
 export {
   Table,
@@ -114,4 +114,4 @@ export {
   TableRow,
   TableCell,
   TableCaption,
-};
+}

web/src/components/ui/tabs.tsx

@@ -1,9 +1,9 @@
-import * as React from "react";
-import * as TabsPrimitive from "@radix-ui/react-tabs";
+import * as React from "react"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
 
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/utils"
 
-const Tabs = TabsPrimitive.Root;
+const Tabs = TabsPrimitive.Root
 
 const TabsList = React.forwardRef<
   React.ElementRef<typeof TabsPrimitive.List>,
@@ -13,12 +13,12 @@ const TabsList = React.forwardRef<
     ref={ref}
     className={cn(
       "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
-      className,
+      className
     )}
     {...props}
   />
-));
-TabsList.displayName = TabsPrimitive.List.displayName;
+))
+TabsList.displayName = TabsPrimitive.List.displayName
 
 const TabsTrigger = React.forwardRef<
   React.ElementRef<typeof TabsPrimitive.Trigger>,
@@ -27,13 +27,13 @@ const TabsTrigger = React.forwardRef<
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
-      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
-      className,
+      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+      className
     )}
     {...props}
   />
-));
-TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+))
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
 
 const TabsContent = React.forwardRef<
   React.ElementRef<typeof TabsPrimitive.Content>,
@@ -43,11 +43,11 @@ const TabsContent = React.forwardRef<
     ref={ref}
     className={cn(
       "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-      className,
+      className
     )}
     {...props}
   />
-));
-TabsContent.displayName = TabsPrimitive.Content.displayName;
+))
+TabsContent.displayName = TabsPrimitive.Content.displayName
 
-export { Tabs, TabsList, TabsTrigger, TabsContent };
+export { Tabs, TabsList, TabsTrigger, TabsContent }

web/src/components/ui/text.tsx

@@ -1,7 +1,13 @@
 import { cn } from "@/lib/utils";
 
 type TextElements =
-  "p" | "blockquote" | "code" | "lead" | "large" | "small" | "muted";
+  | "p"
+  | "blockquote"
+  | "code"
+  | "lead"
+  | "large"
+  | "small"
+  | "muted";
 
 const Text = ({
   children,
@@ -30,7 +36,7 @@ const Text = ({
         <code
           className={cn(
             "relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold",
-            className,
+            className
           )}
         >
           {children}

web/src/components/ui/textarea.tsx

@@ -1,8 +1,9 @@
-import * as React from "react";
+import * as React from "react"
 
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/utils"
 
-export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+export interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
 
 const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
   ({ className, ...props }, ref) => {
@@ -10,14 +11,14 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
       <textarea
         className={cn(
           "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-          className,
+          className
         )}
         ref={ref}
         {...props}
       />
-    );
-  },
-);
-Textarea.displayName = "Textarea";
+    )
+  }
+)
+Textarea.displayName = "Textarea"
 
-export { Textarea };
+export { Textarea }

web/src/components/ui/toggle-group.tsx

@@ -1,16 +1,16 @@
-import * as React from "react";
-import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
-import { VariantProps } from "class-variance-authority";
+import * as React from "react"
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group"
+import { VariantProps } from "class-variance-authority"
 
-import { cn } from "@/lib/utils";
-import { toggleVariants } from "@/components/ui/toggle";
+import { cn } from "@/lib/utils"
+import { toggleVariants } from "@/components/ui/toggle"
 
 const ToggleGroupContext = React.createContext<
   VariantProps<typeof toggleVariants>
 >({
   size: "default",
   variant: "default",
-});
+})
 
 const ToggleGroup = React.forwardRef<
   React.ElementRef<typeof ToggleGroupPrimitive.Root>,
@@ -26,16 +26,16 @@ const ToggleGroup = React.forwardRef<
       {children}
     </ToggleGroupContext>
   </ToggleGroupPrimitive.Root>
-));
+))
 
-ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
+ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName
 
 const ToggleGroupItem = React.forwardRef<
   React.ElementRef<typeof ToggleGroupPrimitive.Item>,
   React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
     VariantProps<typeof toggleVariants>
 >(({ className, children, variant, size, ...props }, ref) => {
-  const context = React.useContext(ToggleGroupContext);
+  const context = React.useContext(ToggleGroupContext)
 
   return (
     <ToggleGroupPrimitive.Item
@@ -45,15 +45,15 @@ const ToggleGroupItem = React.forwardRef<
           variant: context.variant || variant,
           size: context.size || size,
         }),
-        className,
+        className
       )}
       {...props}
     >
       {children}
     </ToggleGroupPrimitive.Item>
-  );
-});
+  )
+})
 
-ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
+ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName
 
-export { ToggleGroup, ToggleGroupItem };
+export { ToggleGroup, ToggleGroupItem }

web/src/components/ui/toggle.tsx

@@ -1,8 +1,8 @@
-import * as React from "react";
-import * as TogglePrimitive from "@radix-ui/react-toggle";
-import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react"
+import * as TogglePrimitive from "@radix-ui/react-toggle"
+import { cva, type VariantProps } from "class-variance-authority"
 
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/utils"
 
 const toggleVariants = cva(
   "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
@@ -23,8 +23,8 @@ const toggleVariants = cva(
       variant: "default",
       size: "default",
     },
-  },
-);
+  }
+)
 
 const Toggle = React.forwardRef<
   React.ElementRef<typeof TogglePrimitive.Root>,
@@ -36,8 +36,8 @@ const Toggle = React.forwardRef<
     className={cn(toggleVariants({ variant, size, className }))}
     {...props}
   />
-));
+))
 
-Toggle.displayName = TogglePrimitive.Root.displayName;
+Toggle.displayName = TogglePrimitive.Root.displayName
 
-export { Toggle, toggleVariants };
+export { Toggle, toggleVariants }

web/src/components/ui/tooltip.tsx

@@ -1,13 +1,13 @@
-import * as React from "react";
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
 
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/utils"
 
-const TooltipProvider = TooltipPrimitive.Provider;
+const TooltipProvider = TooltipPrimitive.Provider
 
-const Tooltip = TooltipPrimitive.Root;
+const Tooltip = TooltipPrimitive.Root
 
-const TooltipTrigger = TooltipPrimitive.Trigger;
+const TooltipTrigger = TooltipPrimitive.Trigger
 
 const TooltipContent = React.forwardRef<
   React.ElementRef<typeof TooltipPrimitive.Content>,
@@ -18,11 +18,11 @@ const TooltipContent = React.forwardRef<
     sideOffset={sideOffset}
     className={cn(
       "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      className,
+      className
     )}
     {...props}
   />
-));
-TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
 
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

web/src/context/auth-context.ts

@@ -1,25 +0,0 @@
-import { createContext } from "react";
-
-export interface AuthState {
-  user: { username: string; role: string | null } | null;
-  allowedCameras: string[];
-  isLoading: boolean;
-  isAuthenticated: boolean; // true if auth is required
-}
-
-interface AuthContextType {
-  auth: AuthState;
-  login: (user: AuthState["user"]) => void;
-  logout: () => void;
-}
-
-export const AuthContext = createContext<AuthContextType>({
-  auth: {
-    user: null,
-    allowedCameras: [],
-    isLoading: true,
-    isAuthenticated: false,
-  },
-  login: () => {},
-  logout: () => {},
-});

web/src/context/auth-context.tsx

@@ -1,7 +1,30 @@
 import axios from "axios";
-import { useEffect, useState } from "react";
+import { createContext, useEffect, useState } from "react";
 import useSWR from "swr";
-import { AuthContext, AuthState } from "./auth-context";
+
+interface AuthState {
+  user: { username: string; role: string | null } | null;
+  allowedCameras: string[];
+  isLoading: boolean;
+  isAuthenticated: boolean; // true if auth is required
+}
+
+interface AuthContextType {
+  auth: AuthState;
+  login: (user: AuthState["user"]) => void;
+  logout: () => void;
+}
+
+export const AuthContext = createContext<AuthContextType>({
+  auth: {
+    user: null,
+    allowedCameras: [],
+    isLoading: true,
+    isAuthenticated: false,
+  },
+  login: () => {},
+  logout: () => {},
+});
 
 export function AuthProvider({ children }: { children: React.ReactNode }) {
   const [auth, setAuth] = useState<AuthState>({

web/src/context/providers.tsx

@@ -6,7 +6,7 @@ import { TooltipProvider } from "@/components/ui/tooltip";
 import { StatusBarMessagesProvider } from "@/context/statusbar-provider";
 import { LanguageProvider } from "./language-provider";
 import { StreamingSettingsProvider } from "./streaming-settings-provider";
-import { AuthProvider } from "./auth-provider";
+import { AuthProvider } from "./auth-context";
 
 type TProvidersProps = {
   children: ReactNode;

web/src/context/statusbar-context.ts

@@ -1,28 +0,0 @@
-import { createContext } from "react";
-
-export type StatusMessage = {
-  id: string;
-  text: string;
-  color?: string;
-  link?: string;
-};
-
-export type StatusMessagesState = {
-  [key: string]: StatusMessage[];
-};
-
-type StatusBarMessagesContextValue = {
-  messages: StatusMessagesState;
-  addMessage: (
-    key: string,
-    message: string,
-    color?: string,
-    messageId?: string,
-    link?: string,
-  ) => string | undefined;
-  removeMessage: (key: string, messageId: string) => void;
-  clearMessages: (key: string) => void;
-};
-
-export const StatusBarMessagesContext =
-  createContext<StatusBarMessagesContextValue | null>(null);

web/src/context/statusbar-provider.tsx

@@ -1,13 +1,42 @@
-import { useState, ReactNode, useCallback, useMemo } from "react";
 import {
-  StatusBarMessagesContext,
-  StatusMessagesState,
-} from "@/context/statusbar-context";
+  createContext,
+  useState,
+  ReactNode,
+  useCallback,
+  useMemo,
+} from "react";
+
+export type StatusMessage = {
+  id: string;
+  text: string;
+  color?: string;
+  link?: string;
+};
+
+export type StatusMessagesState = {
+  [key: string]: StatusMessage[];
+};
 
 type StatusBarMessagesProviderProps = {
   children: ReactNode;
 };
 
+type StatusBarMessagesContextValue = {
+  messages: StatusMessagesState;
+  addMessage: (
+    key: string,
+    message: string,
+    color?: string,
+    messageId?: string,
+    link?: string,
+  ) => string | undefined;
+  removeMessage: (key: string, messageId: string) => void;
+  clearMessages: (key: string) => void;
+};
+
+export const StatusBarMessagesContext =
+  createContext<StatusBarMessagesContextValue | null>(null);
+
 export function StatusBarMessagesProvider({
   children,
 }: StatusBarMessagesProviderProps) {

web/src/hooks/use-config-override.ts

@@ -123,7 +123,8 @@ function getDefaultFilter(
   if (!schema) return undefined;
   const sectionSchema = extractSectionSchema(schema, sectionPath, "camera");
   const filtersSchema = sectionSchema?.properties?.filters as
-    RJSFSchema | undefined;
+    | RJSFSchema
+    | undefined;
   if (!filtersSchema) return undefined;
 
   // An optional map (`dict[str, X] | None`, as `audio.filters` is declared)
@@ -964,7 +965,8 @@ export function useProfileSectionDeltas(
 
     const profileSection = (
       cameraConfig.profiles?.[profileName] as
-        Record<string, unknown> | undefined
+        | Record<string, unknown>
+        | undefined
     )?.[sectionPath];
     if (profileSection == null) return [];
 

web/src/hooks/use-stats.ts

@@ -43,10 +43,10 @@ export default function useStats(stats: FrigateStats | undefined) {
   const { payload: replayJob } = useJobStatus("debug_replay", isAdmin);
   const replayActive = Boolean(
     isAdmin &&
-    replayJob &&
-    (replayJob.status === "queued" ||
-      replayJob.status === "running" ||
-      replayJob.status === "success"),
+      replayJob &&
+      (replayJob.status === "queued" ||
+        replayJob.status === "running" ||
+        replayJob.status === "success"),
   );
 
   const memoizedStats = useDeepMemo(stats);

web/src/index.css

@@ -48,126 +48,126 @@ html {
   font-style: normal;
   font-weight: 100;
   font-display: swap;
-  src: url("./assets/fonts/Inter-Thin.woff2") format("woff2");
+  src: url("../fonts/Inter-Thin.woff2") format("woff2");
 }
 @font-face {
   font-family: "Inter";
   font-style: italic;
   font-weight: 100;
   font-display: swap;
-  src: url("./assets/fonts/Inter-ThinItalic.woff2") format("woff2");
+  src: url("../fonts/Inter-ThinItalic.woff2") format("woff2");
 }
 @font-face {
   font-family: "Inter";
   font-style: normal;
   font-weight: 200;
   font-display: swap;
-  src: url("./assets/fonts/Inter-ExtraLight.woff2") format("woff2");
+  src: url("../fonts/Inter-ExtraLight.woff2") format("woff2");
 }
 @font-face {
   font-family: "Inter";
   font-style: italic;
   font-weight: 200;
   font-display: swap;
-  src: url("./assets/fonts/Inter-ExtraLightItalic.woff2") format("woff2");
+  src: url("../fonts/Inter-ExtraLightItalic.woff2") format("woff2");
 }
 @font-face {
   font-family: "Inter";
   font-style: normal;
   font-weight: 300;
   font-display: swap;
-  src: url("./assets/fonts/Inter-Light.woff2") format("woff2");
+  src: url("../fonts/Inter-Light.woff2") format("woff2");
 }
 @font-face {
   font-family: "Inter";
   font-style: italic;
   font-weight: 300;
   font-display: swap;
-  src: url("./assets/fonts/Inter-LightItalic.woff2") format("woff2");
+  src: url("../fonts/Inter-LightItalic.woff2") format("woff2");
 }
 @font-face {
   font-family: "Inter";
   font-style: normal;
   font-weight: 400;
   font-display: swap;
-  src: url("./assets/fonts/Inter-Regular.woff2") format("woff2");
+  src: url("../fonts/Inter-Regular.woff2") format("woff2");
 }
 @font-face {
   font-family: "Inter";
   font-style: italic;
   font-weight: 400;
   font-display: swap;
-  src: url("./assets/fonts/Inter-Italic.woff2") format("woff2");
+  src: url("../fonts/Inter-Italic.woff2") format("woff2");
 }
 @font-face {
   font-family: "Inter";
   font-style: normal;
   font-weight: 500;
   font-display: swap;
-  src: url("./assets/fonts/Inter-Medium.woff2") format("woff2");
+  src: url("../fonts/Inter-Medium.woff2") format("woff2");
 }
 @font-face {
   font-family: "Inter";
   font-style: italic;
   font-weight: 500;
   font-display: swap;
-  src: url("./assets/fonts/Inter-MediumItalic.woff2") format("woff2");
+  src: url("../fonts/Inter-MediumItalic.woff2") format("woff2");
 }
 @font-face {
   font-family: "Inter";
   font-style: normal;
   font-weight: 600;
   font-display: swap;
-  src: url("./assets/fonts/Inter-SemiBold.woff2") format("woff2");
+  src: url("../fonts/Inter-SemiBold.woff2") format("woff2");
 }
 @font-face {
   font-family: "Inter";
   font-style: italic;
   font-weight: 600;
   font-display: swap;
-  src: url("./assets/fonts/Inter-SemiBoldItalic.woff2") format("woff2");
+  src: url("../fonts/Inter-SemiBoldItalic.woff2") format("woff2");
 }
 @font-face {
   font-family: "Inter";
   font-style: normal;
   font-weight: 700;
   font-display: swap;
-  src: url("./assets/fonts/Inter-Bold.woff2") format("woff2");
+  src: url("../fonts/Inter-Bold.woff2") format("woff2");
 }
 @font-face {
   font-family: "Inter";
   font-style: italic;
   font-weight: 700;
   font-display: swap;
-  src: url("./assets/fonts/Inter-BoldItalic.woff2") format("woff2");
+  src: url("../fonts/Inter-BoldItalic.woff2") format("woff2");
 }
 @font-face {
   font-family: "Inter";
   font-style: normal;
   font-weight: 800;
   font-display: swap;
-  src: url("./assets/fonts/Inter-ExtraBold.woff2") format("woff2");
+  src: url("../fonts/Inter-ExtraBold.woff2") format("woff2");
 }
 @font-face {
   font-family: "Inter";
   font-style: italic;
   font-weight: 800;
   font-display: swap;
-  src: url("./assets/fonts/Inter-ExtraBoldItalic.woff2") format("woff2");
+  src: url("../fonts/Inter-ExtraBoldItalic.woff2") format("woff2");
 }
 @font-face {
   font-family: "Inter";
   font-style: normal;
   font-weight: 900;
   font-display: swap;
-  src: url("./assets/fonts/Inter-Black.woff2") format("woff2");
+  src: url("../fonts/Inter-Black.woff2") format("woff2");
 }
 @font-face {
   font-family: "Inter";
   font-style: italic;
   font-weight: 900;
   font-display: swap;
-  src: url("./assets/fonts/Inter-BlackItalic.woff2") format("woff2");
+  src: url("../fonts/Inter-BlackItalic.woff2") format("woff2");
 }
 
 .react-resizable-handle {
@@ -184,3 +184,8 @@ html {
 .react-grid-layout .react-grid-item {
   transition: none !important;
 }
+
+.react-lazylog,
+.react-lazylog-searchbar {
+  background-color: transparent !important;
+}

web/src/lib/config-schema/transformer.ts

@@ -131,7 +131,8 @@ function normalizeNullableSchema(schema: RJSFSchema): RJSFSchema {
       anyOf.length === stringBranches.length + (hasNull ? 1 : 0)
     ) {
       const enumValues = (enumBranch as Record<string, unknown>).enum as
-        unknown[] | undefined;
+        | unknown[]
+        | undefined;
       const { anyOf: _anyOf, oneOf: _oneOf, ...rest } = schemaObj;
       return {
         ...rest,
@@ -750,7 +751,8 @@ export function applySchemaDefaults(
   let properties = schemaObj.properties;
   if (!isSchemaObject(properties)) {
     const branches = (schemaObj.anyOf ?? schemaObj.oneOf) as
-      unknown[] | undefined;
+      | unknown[]
+      | undefined;
     if (Array.isArray(branches)) {
       const objectBranch = branches.find(
         (s) =>

web/src/pages/ConfigEditor.tsx

@@ -123,7 +123,7 @@ function ConfigEditor() {
         hover: true,
         completion: true,
         validate: true,
-        format: { enable: true },
+        format: true,
         schemas: [
           {
             uri: `${apiHost}api/config/schema.json`,

web/src/pages/Logs.tsx

@@ -8,13 +8,7 @@ import {
   logTypes,
 } from "@/types/log";
 import copy from "copy-to-clipboard";
-import {
-  useCallback,
-  useEffect,
-  useLayoutEffect,
-  useRef,
-  useState,
-} from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import axios from "axios";
 import LogInfoDialog from "@/components/overlay/LogInfoDialog";
 import { LogChip } from "@/components/indicators/Chip";
@@ -27,110 +21,34 @@ import { cn } from "@/lib/utils";
 import { parseLogLines } from "@/utils/logUtil";
 import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
 import scrollIntoView from "scroll-into-view-if-needed";
-import { VList, type VListHandle } from "virtua";
+import { LazyLog } from "@melloware/react-logviewer";
 import useKeyboardListener from "@/hooks/use-keyboard-listener";
+import EnhancedScrollFollow from "@/components/dynamic/EnhancedScrollFollow";
 import { MdCircle } from "react-icons/md";
 import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
-import { isDesktop, isIOS, isMobile } from "react-device-detect";
+import { debounce } from "lodash";
+import { isIOS, isMobile } from "react-device-detect";
 import { isPWA } from "@/utils/isPWA";
 import { isInIframe } from "@/utils/isIFrame";
 import { useTranslation } from "react-i18next";
 import WsMessageFeed from "@/components/ws/WsMessageFeed";
 
-const OLDER_LINES_CHUNK_SIZE = 100;
-const FOLLOW_THRESHOLD_PX = 40;
-
-// Desktop row height. Without it, virtua guesses 40px and the first render
-// leaves the viewport partly empty. Mobile rows are taller, and a low hint
-// there shrinks the scroll room iOS gets while it defers scroll correction
-const ROW_HEIGHT_HINT_PX = 29;
-
-// Stable ids keep row measurements attached to the right line after a prepend
-type LogEntry = { id: number; text: string };
-
-// shift anchors the viewport to the end when lines are prepended. stick keeps
-// the newest line in view when lines are appended
-type LogState = { entries: LogEntry[]; shift: boolean; stick: boolean };
-
 function Logs() {
   const { t } = useTranslation(["views/system"]);
   const [logService, setLogService] = useState<LogType>("frigate");
   const isWebsocket = logService === "websocket";
   const tabsRef = useRef<HTMLDivElement | null>(null);
-  const logWrapperRef = useRef<HTMLDivElement>(null);
-  const listRef = useRef<VListHandle>(null);
-  const [logState, setLogState] = useState<LogState>({
-    entries: [],
-    shift: false,
-    stick: true,
-  });
+  const lazyLogWrapperRef = useRef<HTMLDivElement>(null);
+  const [logs, setLogs] = useState<string[]>([]);
   const [filterSeverity, setFilterSeverity] = useState<LogSeverity[]>();
   const [selectedLog, setSelectedLog] = useState<LogLine>();
+  const lazyLogRef = useRef<LazyLog>(null);
   const [isLoading, setIsLoading] = useState(true);
-  const [follow, setFollow] = useState(true);
   const lastFetchedIndexRef = useRef(-1);
-  const loadingOlderRef = useRef(false);
-  const firstIdRef = useRef(0);
-  const lastIdRef = useRef(0);
-
-  // The last wheel or key scroll went up. The view can still sit at the
-  // bottom for a moment, so position alone would keep following
-  const scrolledUpRef = useRef(false);
-
-  // lines
-
-  const isFollowing = useCallback(() => {
-    const list = listRef.current;
-    if (!list || scrolledUpRef.current) return false;
-
-    return (
-      list.scrollSize - list.scrollOffset - list.viewportSize <
-      FOLLOW_THRESHOLD_PX
-    );
-  }, []);
-
-  const resetLines = useCallback((lines: string[]) => {
-    firstIdRef.current = 0;
-    lastIdRef.current = lines.length;
-    setLogState({
-      entries: lines.map((text, id) => ({ id, text })),
-      shift: false,
-      stick: true,
-    });
-  }, []);
-
-  const appendLines = useCallback(
-    (lines: string[]) => {
-      const entries = lines
-        .filter((text) => text.trim())
-        .map((text) => ({ id: lastIdRef.current++, text }));
-      if (!entries.length) return;
-
-      const stick = isFollowing();
-      setLogState((prev) => ({
-        entries: [...prev.entries, ...entries],
-        shift: false,
-        stick,
-      }));
-    },
-    [isFollowing],
-  );
-
-  const prependLines = useCallback((lines: string[]) => {
-    firstIdRef.current -= lines.length;
-    const firstId = firstIdRef.current;
-    const entries = lines.map((text, i) => ({ id: firstId + i, text }));
-
-    setLogState((prev) => ({
-      entries: [...entries, ...prev.entries],
-      shift: true,
-      stick: false,
-    }));
-  }, []);
 
   useEffect(() => {
     document.title = t("documentTitle.logs." + logService);
@@ -184,7 +102,8 @@ function Logs() {
           response.data &&
           Array.isArray(response.data.lines)
         ) {
-          return response.data.lines as string[];
+          const filteredLines = filterLines(response.data.lines);
+          return filteredLines;
         }
       } catch (error) {
         const errorMessage =
@@ -196,27 +115,26 @@ function Logs() {
           },
         );
       }
-      return null;
+      return [];
     },
-    [logService, t],
+    [logService, filterLines, t],
   );
 
   const fetchInitialLogs = useCallback(async () => {
     setIsLoading(true);
     try {
       const response = await axios.get(`logs/${logService}`, {
-        params: { start: filterSeverity?.length ? 0 : -100 },
+        params: { start: filterSeverity ? 0 : -100 },
       });
       if (
         response.status === 200 &&
         response.data &&
         Array.isArray(response.data.lines)
       ) {
-        resetLines(filterLines(response.data.lines));
-
-        // A filtered load fetches the whole file, so nothing older remains
+        const filteredLines = filterLines(response.data.lines);
+        setLogs(filteredLines);
         lastFetchedIndexRef.current =
-          response.data.totalLines - response.data.lines.length;
+          response.data.totalLines - filteredLines.length;
       }
     } catch (error) {
       const errorMessage =
@@ -227,7 +145,7 @@ function Logs() {
     } finally {
       setIsLoading(false);
     }
-  }, [logService, filterLines, filterSeverity, resetLines, t]);
+  }, [logService, filterLines, filterSeverity, t]);
 
   const abortControllerRef = useRef<AbortController | null>(null);
 
@@ -262,7 +180,9 @@ function Logs() {
                 return filterSeverity.includes(parsedLine.severity);
               })
             : lines;
-          appendLines(filteredLines);
+          if (filteredLines.length > 0) {
+            lazyLogRef.current?.appendLines(filteredLines);
+          }
         }
         // Process next chunk
         return processStreamChunk(reader);
@@ -295,19 +215,17 @@ function Logs() {
           );
         }
       });
-  }, [logService, filterSeverity, appendLines, t]);
+  }, [logService, filterSeverity, t]);
 
   useEffect(() => {
     if (isWebsocket) {
       setIsLoading(false);
-      resetLines([]);
+      setLogs([]);
       return;
     }
 
     setIsLoading(true);
-    setFollow(true);
-    scrolledUpRef.current = false;
-    resetLines([]);
+    setLogs([]);
     lastFetchedIndexRef.current = -1;
     fetchInitialLogs().then(() => {
       // Start streaming after initial load
@@ -325,52 +243,70 @@ function Logs() {
 
   // handlers
 
-  const loadOlderLines = useCallback(async () => {
-    const end = lastFetchedIndexRef.current;
-    if (loadingOlderRef.current || end <= 0) return;
+  const prependLines = useCallback((newLines: string[]) => {
+    if (!lazyLogRef.current) return;
 
-    loadingOlderRef.current = true;
-    const start = Math.max(0, end - OLDER_LINES_CHUNK_SIZE);
-    const lines = await fetchLogRange(start, end);
-    loadingOlderRef.current = false;
+    const newLinesArray = newLines.map(
+      (line) => new Uint8Array(new TextEncoder().encode(line + "\n")),
+    );
 
-    // A service or filter change resets the index while the request is in flight
-    if (!lines || lastFetchedIndexRef.current !== end) return;
+    lazyLogRef.current.setState((prevState) => ({
+      ...prevState,
+      lines: prevState.lines.unshift(...newLinesArray),
+      count: prevState.count + newLines.length,
+    }));
+  }, []);
 
-    lastFetchedIndexRef.current = start;
-    prependLines(lines);
-  }, [fetchLogRange, prependLines]);
+  // debounced
+  const handleScroll = useMemo(
+    () =>
+      debounce(() => {
+        const scrollThreshold =
+          lazyLogRef.current?.listRef.current?.findEndIndex() ?? 10;
+        const startIndex =
+          lazyLogRef.current?.listRef.current?.findStartIndex() ?? 0;
+        const endIndex =
+          lazyLogRef.current?.listRef.current?.findEndIndex() ?? 0;
+        const pageSize = endIndex - startIndex;
+        if (
+          scrollThreshold < pageSize + pageSize / 2 &&
+          lastFetchedIndexRef.current > 0 &&
+          !isLoading
+        ) {
+          const nextEnd = lastFetchedIndexRef.current;
+          const nextStart = Math.max(0, nextEnd - (pageSize || 100));
+          setIsLoading(true);
 
-  // Runs on scroll events and on wheel or key input, because input at the top
-  // or bottom edge doesn't scroll and fires no scroll event
-  const syncScrollState = useCallback(() => {
-    const list = listRef.current;
-    if (!list) return;
+          fetchLogRange(nextStart, nextEnd).then((newLines) => {
+            if (newLines.length > 0) {
+              prependLines(newLines);
+              lastFetchedIndexRef.current = nextStart;
 
-    setFollow(isFollowing());
+              lazyLogRef.current?.listRef.current?.scrollTo(
+                newLines.length *
+                  lazyLogRef.current?.listRef.current?.getItemSize(1),
+              );
+            }
+          });
 
-    if (list.scrollOffset < list.viewportSize) {
-      loadOlderLines();
+          setIsLoading(false);
+        }
+      }, 50),
+    [fetchLogRange, isLoading, prependLines],
+  );
+
+  const handleCopyLogs = useCallback(() => {
+    if (logs.length) {
+      fetchInitialLogs()
+        .then(() => {
+          copy(logs.join("\n"));
+          toast.success(t("logs.copy.success"));
+        })
+        .catch(() => {
+          toast.error(t("logs.copy.error"));
+        });
     }
-  }, [isFollowing, loadOlderLines]);
-
-  useLayoutEffect(() => {
-    if (isLoading || !logState.stick || !logState.entries.length) return;
-
-    listRef.current?.scrollToIndex(logState.entries.length - 1, {
-      align: "end",
-    });
-  }, [isLoading, logState]);
-
-  const handleCopyLogs = useCallback(async () => {
-    if (!logState.entries.length) return;
-
-    if (await copy(logState.entries.map((entry) => entry.text).join("\n"))) {
-      toast.success(t("logs.copy.success"));
-    } else {
-      toast.error(t("logs.copy.error"));
-    }
-  }, [logState, t]);
+  }, [logs, fetchInitialLogs, t]);
 
   const handleDownloadLogs = useCallback(() => {
     axios
@@ -393,34 +329,77 @@ function Logs() {
       .catch(() => {});
   }, [logService]);
 
+  const handleRowClick = useCallback(
+    (rowInfo: { lineNumber: number; rowIndex: number }) => {
+      const clickedLine = parseLogLines(logService, [
+        logs[rowInfo.rowIndex],
+      ])[0];
+      setSelectedLog(clickedLine);
+    },
+    [logs, logService],
+  );
+
   // keyboard listener
 
   useKeyboardListener(
     ["PageDown", "PageUp", "ArrowDown", "ArrowUp"],
     (key, modifiers) => {
-      const list = listRef.current;
-      if (!key || !modifiers.down || !list) {
+      if (!key || !modifiers.down || !lazyLogWrapperRef.current) {
         return true;
       }
 
-      const rowHeight = list.getItemSize(list.findItemIndex(list.scrollOffset));
-      if (!rowHeight) {
+      const container =
+        lazyLogWrapperRef.current.querySelector(".react-lazylog");
+
+      const logLineHeight = container?.querySelector(".log-line")?.clientHeight;
+
+      if (!logLineHeight) {
         return true;
       }
 
-      const rows = key.includes("Page") ? 10 : 1;
+      const scrollAmount = key.includes("Page")
+        ? logLineHeight * 10
+        : logLineHeight;
       const direction = key.includes("Down") ? 1 : -1;
-      scrolledUpRef.current = direction < 0;
-      list.scrollBy(rowHeight * rows * direction);
-      syncScrollState();
+      container?.scrollBy({ top: scrollAmount * direction });
       return true;
     },
   );
 
+  // format lines
+
+  const lineBufferRef = useRef<string>("");
+
+  const formatPart = useCallback(
+    (text: string) => {
+      lineBufferRef.current += text;
+
+      if (text.endsWith("\n")) {
+        const completeLine = lineBufferRef.current.trim();
+        lineBufferRef.current = "";
+
+        if (completeLine) {
+          const parsedLine = parseLogLines(logService, [completeLine])[0];
+          return (
+            <LogLineData
+              line={parsedLine}
+              logService={logService}
+              onClickSeverity={() => setFilterSeverity([parsedLine.severity])}
+              onSelect={() => setSelectedLog(parsedLine)}
+            />
+          );
+        }
+      }
+
+      return null;
+    },
+    [logService, setFilterSeverity, setSelectedLog],
+  );
+
   useEffect(() => {
     const handleCopy = (e: ClipboardEvent) => {
       e.preventDefault();
-      if (!logWrapperRef.current) return;
+      if (!lazyLogWrapperRef.current) return;
 
       const selection = window.getSelection();
       if (!selection) return;
@@ -488,7 +467,7 @@ function Logs() {
       e.clipboardData?.setData("text/plain", copyText);
     };
 
-    const content = logWrapperRef.current;
+    const content = lazyLogWrapperRef.current;
     content?.addEventListener("copy", handleCopy);
     return () => {
       content?.removeEventListener("copy", handleCopy);
@@ -509,6 +488,7 @@ function Logs() {
               value={logService}
               onValueChange={(value: LogType) => {
                 if (value) {
+                  setLogs([]);
                   setFilterSeverity(undefined);
                   setLogService(value);
                 }
@@ -602,56 +582,44 @@ function Logs() {
             </div>
           </div>
 
-          <div
-            ref={logWrapperRef}
-            className="min-h-0 flex-1"
-            onPointerDown={() => {
-              scrolledUpRef.current = false;
-            }}
-          >
+          <div ref={lazyLogWrapperRef} className="size-full">
             {isLoading ? (
               <ActivityIndicator className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" />
             ) : (
-              <>
-                {follow && !logSettings.disableStreaming && (
-                  <div className="absolute right-1 top-3">
-                    <Tooltip>
-                      <TooltipTrigger>
-                        <MdCircle className="mr-2 size-2 animate-pulse cursor-default text-selected shadow-selected drop-shadow-md" />
-                      </TooltipTrigger>
-                      <TooltipContent>{t("logs.tips")}</TooltipContent>
-                    </Tooltip>
-                  </div>
+              <EnhancedScrollFollow
+                startFollowing={!isLoading}
+                onCustomScroll={handleScroll}
+                render={({ follow, onScroll }) => (
+                  <>
+                    {follow && !logSettings.disableStreaming && (
+                      <div className="absolute right-1 top-3">
+                        <Tooltip>
+                          <TooltipTrigger>
+                            <MdCircle className="mr-2 size-2 animate-pulse cursor-default text-selected shadow-selected drop-shadow-md" />
+                          </TooltipTrigger>
+                          <TooltipContent>{t("logs.tips")}</TooltipContent>
+                        </Tooltip>
+                      </div>
+                    )}
+                    <LazyLog
+                      ref={lazyLogRef}
+                      enableLineNumbers={false}
+                      selectableLines
+                      lineClassName="text-primary bg-background"
+                      highlightLineClassName="bg-primary/20"
+                      onRowClick={handleRowClick}
+                      formatPart={formatPart}
+                      text={logs.join("\n")}
+                      follow={follow}
+                      onScroll={onScroll}
+                      loadingComponent={
+                        <ActivityIndicator className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" />
+                      }
+                      loading={isLoading}
+                    />
+                  </>
                 )}
-                <VList
-                  ref={listRef}
-                  itemSize={isDesktop ? ROW_HEIGHT_HINT_PX : undefined}
-                  data={logState.entries}
-                  shift={logState.shift}
-                  onScroll={syncScrollState}
-                  onWheel={(e) => {
-                    if (!e.deltaY) return;
-
-                    scrolledUpRef.current = e.deltaY < 0;
-                    syncScrollState();
-                  }}
-                >
-                  {(entry) => {
-                    const line = parseLogLines(logService, [entry.text])[0];
-                    return (
-                      <LogLineData
-                        key={entry.id}
-                        line={line}
-                        logService={logService}
-                        onClickSeverity={() =>
-                          setFilterSeverity([line.severity])
-                        }
-                        onSelect={() => setSelectedLog(line)}
-                      />
-                    );
-                  }}
-                </VList>
-              </>
+              />
             )}
           </div>
         </div>