fix build warnings from tailwind, fonts, and fast refresh (#24359)

fix duplicated styles, move fonts to src/assets/fonts for vite to bundle (nginx already rewrites correctly), and fix fast refresh for PreviewController, auth context/provider, and statusbar context

.github/workflows/pull_request.yml

@@ -46,9 +46,6 @@ 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/rootfs/usr/local/nginx/conf/nginx.conf

@@ -343,13 +343,6 @@ 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,11 +204,20 @@ Light guidelines and advice:
 npm run lint
 ```
 
-- 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.
+- Ensure the backend [unit tests](#unit-tests) pass. Your PR cannot be merged unless tests pass.
-- 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.
+
+```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.
 
 ```console
-npm run test
+# First-time setup
+npx playwright install chromium
+
+# Build the app and run all tests
+npm run e2e:build && npm run e2e
 ```
 
 - Test in different browsers. Firefox, Chrome, and Safari all have different quirks that make them unique targets to interact with.

web/package.json

@@ -12,8 +12,6 @@
     "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",
@@ -24,7 +22,7 @@
   },
   "dependencies": {
     "@cycjimmy/jsmpeg-player": "^6.1.2",
-    "@hookform/resolvers": "^3.10.0",
+    "@hookform/resolvers": "^5.9.1",
     "@radix-ui/react-alert-dialog": "^1.1.23",
     "@radix-ui/react-aspect-ratio": "^1.1.15",
     "@radix-ui/react-checkbox": "^1.3.11",
@@ -57,14 +55,14 @@
     "clsx": "^2.1.1",
     "cmdk": "^1.0.0",
     "copy-to-clipboard": "^4.0.2",
-    "date-fns": "^3.6.0",
+    "date-fns": "^4.4.0",
     "date-fns-tz": "^3.2.0",
     "framer-motion": "^13.3.0",
     "hls.js": "^1.7.3",
-    "i18next": "^24.2.0",
+    "i18next": "^26.4.2",
     "i18next-http-backend": "^4.0.2",
     "idb-keyval": "^6.3.0",
-    "js-yaml": "^4.3.2",
+    "js-yaml": "^5.4.2",
     "konva": "^10.5.0",
     "lodash": "^4.18.1",
     "lucide-react": "^1.46.0",
@@ -76,21 +74,19 @@
     "react-day-picker": "^9.14.0",
     "react-device-detect": "^2.2.3",
     "react-dom": "^19.3.0",
-    "react-dropzone": "^14.3.8",
+    "react-dropzone": "^20.1.2",
     "react-grid-layout": "^2.2.4",
     "react-hook-form": "^7.88.0",
-    "react-i18next": "^15.2.0",
+    "react-i18next": "^17.0.14",
     "react-icons": "^5.7.0",
     "react-konva": "^19.2.7",
-    "react-markdown": "^9.0.1",
+    "react-markdown": "^10.1.0",
     "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",
-    "sort-by": "^1.2.0",
-    "strftime": "^0.10.3",
     "swr": "^2.5.1",
     "tailwind-merge": "^2.4.0",
     "tailwind-scrollbar": "^3.1.0",
@@ -99,21 +95,17 @@
     "vaul": "^1.1.2",
     "virtua": "^0.51.3",
     "vite-plugin-monaco-editor": "^1.1.0",
-    "zod": "^3.23.8"
+    "zod": "^3.25.76"
   },
   "devDependencies": {
     "@eslint/js": "^10.0.1",
     "@playwright/test": "^1.63.0",
-    "@tailwindcss/forms": "^0.5.11",
-    "@testing-library/jest-dom": "^6.6.2",
     "@types/js-yaml": "^4.0.9",
     "@types/lodash": "^4.17.25",
-    "@types/node": "^25.9.6",
+    "@types/node": "^26.5.1",
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",
-    "@types/strftime": "^0.9.8",
     "@vitejs/plugin-react": "^6.1.1",
-    "@vitest/coverage-v8": "^4.1.11",
     "autoprefixer": "^10.6.0",
     "esbuild": "^0.28.2",
     "eslint": "^10.10.0",
@@ -121,22 +113,17 @@
     "eslint-plugin-prettier": "^5.5.6",
     "eslint-plugin-react-hooks": "^7.1.1",
     "eslint-plugin-react-refresh": "^0.5.7",
-    "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.3.3",
+    "prettier": "^3.9.6",
-    "prettier-plugin-tailwindcss": "^0.6.5",
+    "prettier-plugin-tailwindcss": "^0.8.1",
     "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/Statusbar.tsx

@@ -2,7 +2,7 @@ import { useEmbeddingsReindexProgress } from "@/api/ws";
 import {
   StatusBarMessagesContext,
   StatusMessage,
-} from "@/context/statusbar-provider";
+} from "@/context/statusbar-context";
 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,13 +4,15 @@ import { useCameraFriendlyName } from "@/hooks/use-camera-friendly-name";
 import { CameraConfig } from "@/types/frigateConfig";
 import { useZoneFriendlyName } from "@/hooks/use-zone-friendly-name";
 
-interface CameraNameLabelProps
+interface CameraNameLabelProps extends React.ComponentPropsWithoutRef<
-  extends React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> {
+  typeof LabelPrimitive.Root
+> {
   camera?: string | CameraConfig;
 }
 
-interface ZoneNameLabelProps
+interface ZoneNameLabelProps extends React.ComponentPropsWithoutRef<
-  extends React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> {
+  typeof LabelPrimitive.Root
+> {
   zone: string;
   camera?: string;
 }

web/src/components/classification/ClassificationModelEditDialog.tsx

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

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

@@ -68,8 +68,7 @@ const review: SectionConfigOverrides = {
         position: "after",
         condition: (ctx) => {
           const genai = ctx.formData?.genai as
-            | Record<string, unknown>
+            Record<string, unknown> | undefined;
-            | 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,11 +17,9 @@ export function validateDetectDimensions(
   const height = data.height;
 
   const widthErrors = errors.width as
-    | { addError?: (message: string) => void }
+    { addError?: (message: string) => void } | undefined;
-    | undefined;
   const heightErrors = errors.height as
-    | { addError?: (message: string) => void }
+    { addError?: (message: string) => void } | undefined;
-    | undefined;
 
   const message = t("detect.dimensionMustBeEven", { ns: "config/validation" });
 

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

@@ -38,8 +38,7 @@ export default function CameraReviewClassification({
   const cameraName = formContext?.cameraName ?? selectedCamera;
   const fullFormData = formContext?.formData as JsonObject | undefined;
   const baselineFormData = formContext?.baselineFormData as
-    | JsonObject
+    JsonObject | undefined;
-    | 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-provider";
+import { StatusBarMessagesContext } from "@/context/statusbar-context";
 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) &&
+    (config.notifications?.enabled || anyCameraNotificationsEnabled) &&
-      (watchAllEnabled ||
+    (watchAllEnabled ||
-        (Array.isArray(watchCameras) && watchCameras.length > 0)),
+      (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-provider";
+import { StatusBarMessagesContext } from "@/context/statusbar-context";
 import {
   cameraUpdateTopicMap,
   globalCameraDefaultSections,

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

@@ -1,5 +1,5 @@
 import type { FieldPathList, FieldProps } from "@rjsf/utils";
-import yaml from "js-yaml";
+import { dump, load, YAMLException } 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 yaml.dump(value, { indent: 2, lineWidth: -1 }).trimEnd();
+    return dump(value, { indent: 2, lineWidth: -1 }).trimEnd();
   } catch {
     return "";
   }
@@ -31,7 +31,7 @@ function parseYaml(text: string): {
     return { value: {}, error: undefined };
   }
   try {
-    const parsed = yaml.load(trimmed);
+    const parsed = 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 yaml.YAMLException ? e.reason : "Invalid YAML";
+    const msg = e instanceof YAMLException ? e.reason : "Invalid YAML";
     return { value: undefined, error: msg };
   }
 }

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

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

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

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

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

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

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

@@ -44,8 +44,7 @@ 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
+    ConfigFormContext | undefined;
-    | undefined;
 
   const configNamespace =
     formContext?.i18nNamespace ??

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

@@ -86,8 +86,7 @@ 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
+    string | undefined;
-    | 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,8 +25,7 @@ export function MultiSchemaFieldTemplate<
   const { schema, selector, optionSchemaField, uiSchema } = props;
 
   const uiOptions = uiSchema?.["ui:options"] as
-    | UiSchema["ui:options"]
+    UiSchema["ui:options"] | undefined;
-    | 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,8 +55,7 @@ export function CameraPathWidget(props: WidgetProps) {
   const [showCredentials, setShowCredentials] = useState(false);
 
   const formContext = props.registry?.formContext as
-    | ConfigFormContext
+    ConfigFormContext | undefined;
-    | 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,8 +103,7 @@ const normalizeManualText = (value: unknown): string => {
 
 export function FfmpegArgsWidget(props: WidgetProps) {
   const formContext = props.registry?.formContext as
-    | ConfigFormContext
+    ConfigFormContext | undefined;
-    | 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,8 +27,7 @@ import type { GenAIModelsResponse } from "@/types/chat";
 import { getSizedFieldClassName } from "../utils";
 
 type ProbeResponse =
-  | { success: true; models: string[] }
+  { success: true; models: string[] } | { success: false; message: string };
-  | { success: false; message: string };
 
 type ProbeStatus = "idle" | "probing" | "success" | "error";
 

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

@@ -21,8 +21,7 @@ export function OnvifProfileWidget(props: WidgetProps) {
   const { t } = useTranslation(["views/settings"]);
 
   const formContext = props.registry?.formContext as
-    | ConfigFormContext
+    ConfigFormContext | undefined;
-    | 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,8 +98,7 @@ export function SwitchesWidget(props: WidgetProps) {
   const availableEntities = useMemo(() => {
     const getEntities =
       (props.options?.getEntities as
-        | ((context: FormContext) => string[])
+        ((context: FormContext) => string[]) | undefined) || (() => []);
-        | undefined) || (() => []);
     if (context) {
       return getEntities(context);
     }
@@ -109,8 +108,8 @@ export function SwitchesWidget(props: WidgetProps) {
   const getDisplayLabel = useMemo(
     () =>
       (props.options?.getDisplayLabel as
-        | ((entity: string, context?: FormContext) => string)
+        ((entity: string, context?: FormContext) => string) | undefined) ||
-        | undefined) || ((entity: string) => entity),
+      ((entity: string) => entity),
     [props.options],
   );
 

web/src/components/navigation/Bottombar.tsx

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

web/src/components/player/PreviewController.ts

@@ -0,0 +1,13 @@
+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,6 +22,7 @@ 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;
@@ -102,20 +103,6 @@ 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,11 +8,7 @@
  */
 
 export type DownswitchReason =
-  | "stall"
+  "stall" | "bandwidth" | "fatal-error" | "startup" | "codec";
-  | "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 "../PreviewPlayer";
+import { PreviewController } from "../PreviewController";
 import { TimeRange, TrackingDetailsSequence } from "@/types/timeline";
 import {
   calculateInpointOffset,

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

@@ -16,7 +16,8 @@ import {
   RecordingCoverage,
 } from "@/types/record";
 import { Preview } from "@/types/preview";
-import PreviewPlayer, { PreviewController } from "../PreviewPlayer";
+import PreviewPlayer from "../PreviewPlayer";
+import { PreviewController } from "../PreviewController";
 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-provider";
+import { StatusBarMessagesContext } from "@/context/statusbar-context";
 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/ZoneEditPane.tsx

@@ -316,7 +316,11 @@ export default function ZoneEditPane({
     return profileZone ?? cam.zones[polygon.name];
   }, [polygon, config, editingProfile]);
 
-  const form = useForm<z.infer<typeof formSchema>>({
+  const form = useForm<
+    z.input<typeof formSchema>,
+    unknown,
+    z.output<typeof formSchema>
+  >({
     resolver: zodResolver(formSchema),
     mode: "onChange",
     defaultValues: {
@@ -601,7 +605,7 @@ export default function ZoneEditPane({
     ],
   );
 
-  function onSubmit(values: z.infer<typeof formSchema>) {
+  function onSubmit(values: z.output<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,7 +24,8 @@ 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,7 +35,8 @@ 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 React from "react";
-import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
-import { Check } from "lucide-react"
+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 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",
+      "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
+      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,7 +99,11 @@ export default function AnimatedCircularProgressBar({
       </svg>
       <span
         data-current-value={currentPercent}
-        className="duration-[var(--transition-length)] delay-[var(--delay)] absolute inset-0 m-auto size-fit ease-linear animate-in fade-in"
+        className="absolute inset-0 m-auto size-fit ease-linear animate-in fade-in"
+        style={{
+          animationDuration: "var(--transition-length)",
+          animationDelay: "var(--delay)",
+        }}
       >
         {currentPercent}%
       </span>

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

@@ -1,41 +1,41 @@
-import * as React from "react"
+import * as React from "react";
-import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
-import { Check, ChevronRight, Circle } from "lucide-react"
+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 focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+      "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",
       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 focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "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",
       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 focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "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
+      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 focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "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
+      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 React from "react";
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
-import { Check, ChevronRight, Circle } from "lucide-react"
+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 focus:bg-accent data-[state=open]:bg-accent",
+      "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",
       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 focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "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",
       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 focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "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
+      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 focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "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
+      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 React from "react";
-import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
+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,8 +2,7 @@ import * as React from "react";
 
 import { cn } from "@/lib/utils";
 
-export interface InputProps
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}
-  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 React from "react";
-import * as LabelPrimitive from "@radix-ui/react-label"
+import * as LabelPrimitive from "@radix-ui/react-label";
-import { cva, type VariantProps } from "class-variance-authority"
+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 React from "react";
-import * as ProgressPrimitive from "@radix-ui/react-progress"
+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 React from "react";
-import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
-import { Circle } from "lucide-react"
+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 React from "react";
-import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+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 React from "react";
-import * as SeparatorPrimitive from "@radix-ui/react-separator"
+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,7 +93,8 @@ 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 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",
+      "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",
       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 hover:bg-muted/50 data-[state=selected]:bg-muted",
+      "border-b transition-colors data-[state=selected]:bg-muted hover:bg-muted/50",
-      className
+      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 React from "react";
-import * as TabsPrimitive from "@radix-ui/react-tabs"
+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 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",
+      "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
+      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,13 +1,7 @@
 import { cn } from "@/lib/utils";
 
 type TextElements =
-  | "p"
+  "p" | "blockquote" | "code" | "lead" | "large" | "small" | "muted";
-  | "blockquote"
-  | "code"
-  | "lead"
-  | "large"
-  | "small"
-  | "muted";
 
 const Text = ({
   children,
@@ -36,7 +30,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,9 +1,8 @@
-import * as React from "react"
+import * as React from "react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
-export interface TextareaProps
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
-  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
 
 const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
   ({ className, ...props }, ref) => {
@@ -11,14 +10,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 React from "react";
-import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group"
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
-import { VariantProps } from "class-variance-authority"
+import { VariantProps } from "class-variance-authority";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
-import { toggleVariants } from "@/components/ui/toggle"
+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 React from "react";
-import * as TogglePrimitive from "@radix-ui/react-toggle"
+import * as TogglePrimitive from "@radix-ui/react-toggle";
-import { cva, type VariantProps } from "class-variance-authority"
+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 React from "react";
-import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+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

@@ -0,0 +1,25 @@
+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-provider.tsx

@@ -1,30 +1,7 @@
 import axios from "axios";
-import { createContext, useEffect, useState } from "react";
+import { 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-context";
+import { AuthProvider } from "./auth-provider";
 
 type TProvidersProps = {
   children: ReactNode;

web/src/context/statusbar-context.ts

@@ -0,0 +1,28 @@
+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,42 +1,13 @@
+import { useState, ReactNode, useCallback, useMemo } from "react";
 import {
-  createContext,
+  StatusBarMessagesContext,
-  useState,
+  StatusMessagesState,
-  ReactNode,
+} from "@/context/statusbar-context";
-  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,8 +123,7 @@ function getDefaultFilter(
   if (!schema) return undefined;
   const sectionSchema = extractSectionSchema(schema, sectionPath, "camera");
   const filtersSchema = sectionSchema?.properties?.filters as
-    | RJSFSchema
+    RJSFSchema | undefined;
-    | undefined;
   if (!filtersSchema) return undefined;
 
   // An optional map (`dict[str, X] | None`, as `audio.filters` is declared)
@@ -965,8 +964,7 @@ export function useProfileSectionDeltas(
 
     const profileSection = (
       cameraConfig.profiles?.[profileName] as
-        | Record<string, unknown>
+        Record<string, unknown> | undefined
-        | 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 &&
-      (replayJob.status === "queued" ||
+    (replayJob.status === "queued" ||
-        replayJob.status === "running" ||
+      replayJob.status === "running" ||
-        replayJob.status === "success"),
+      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("../fonts/Inter-Thin.woff2") format("woff2");
+  src: url("./assets/fonts/Inter-Thin.woff2") format("woff2");
 }
 @font-face {
   font-family: "Inter";
   font-style: italic;
   font-weight: 100;
   font-display: swap;
-  src: url("../fonts/Inter-ThinItalic.woff2") format("woff2");
+  src: url("./assets/fonts/Inter-ThinItalic.woff2") format("woff2");
 }
 @font-face {
   font-family: "Inter";
   font-style: normal;
   font-weight: 200;
   font-display: swap;
-  src: url("../fonts/Inter-ExtraLight.woff2") format("woff2");
+  src: url("./assets/fonts/Inter-ExtraLight.woff2") format("woff2");
 }
 @font-face {
   font-family: "Inter";
   font-style: italic;
   font-weight: 200;
   font-display: swap;
-  src: url("../fonts/Inter-ExtraLightItalic.woff2") format("woff2");
+  src: url("./assets/fonts/Inter-ExtraLightItalic.woff2") format("woff2");
 }
 @font-face {
   font-family: "Inter";
   font-style: normal;
   font-weight: 300;
   font-display: swap;
-  src: url("../fonts/Inter-Light.woff2") format("woff2");
+  src: url("./assets/fonts/Inter-Light.woff2") format("woff2");
 }
 @font-face {
   font-family: "Inter";
   font-style: italic;
   font-weight: 300;
   font-display: swap;
-  src: url("../fonts/Inter-LightItalic.woff2") format("woff2");
+  src: url("./assets/fonts/Inter-LightItalic.woff2") format("woff2");
 }
 @font-face {
   font-family: "Inter";
   font-style: normal;
   font-weight: 400;
   font-display: swap;
-  src: url("../fonts/Inter-Regular.woff2") format("woff2");
+  src: url("./assets/fonts/Inter-Regular.woff2") format("woff2");
 }
 @font-face {
   font-family: "Inter";
   font-style: italic;
   font-weight: 400;
   font-display: swap;
-  src: url("../fonts/Inter-Italic.woff2") format("woff2");
+  src: url("./assets/fonts/Inter-Italic.woff2") format("woff2");
 }
 @font-face {
   font-family: "Inter";
   font-style: normal;
   font-weight: 500;
   font-display: swap;
-  src: url("../fonts/Inter-Medium.woff2") format("woff2");
+  src: url("./assets/fonts/Inter-Medium.woff2") format("woff2");
 }
 @font-face {
   font-family: "Inter";
   font-style: italic;
   font-weight: 500;
   font-display: swap;
-  src: url("../fonts/Inter-MediumItalic.woff2") format("woff2");
+  src: url("./assets/fonts/Inter-MediumItalic.woff2") format("woff2");
 }
 @font-face {
   font-family: "Inter";
   font-style: normal;
   font-weight: 600;
   font-display: swap;
-  src: url("../fonts/Inter-SemiBold.woff2") format("woff2");
+  src: url("./assets/fonts/Inter-SemiBold.woff2") format("woff2");
 }
 @font-face {
   font-family: "Inter";
   font-style: italic;
   font-weight: 600;
   font-display: swap;
-  src: url("../fonts/Inter-SemiBoldItalic.woff2") format("woff2");
+  src: url("./assets/fonts/Inter-SemiBoldItalic.woff2") format("woff2");
 }
 @font-face {
   font-family: "Inter";
   font-style: normal;
   font-weight: 700;
   font-display: swap;
-  src: url("../fonts/Inter-Bold.woff2") format("woff2");
+  src: url("./assets/fonts/Inter-Bold.woff2") format("woff2");
 }
 @font-face {
   font-family: "Inter";
   font-style: italic;
   font-weight: 700;
   font-display: swap;
-  src: url("../fonts/Inter-BoldItalic.woff2") format("woff2");
+  src: url("./assets/fonts/Inter-BoldItalic.woff2") format("woff2");
 }
 @font-face {
   font-family: "Inter";
   font-style: normal;
   font-weight: 800;
   font-display: swap;
-  src: url("../fonts/Inter-ExtraBold.woff2") format("woff2");
+  src: url("./assets/fonts/Inter-ExtraBold.woff2") format("woff2");
 }
 @font-face {
   font-family: "Inter";
   font-style: italic;
   font-weight: 800;
   font-display: swap;
-  src: url("../fonts/Inter-ExtraBoldItalic.woff2") format("woff2");
+  src: url("./assets/fonts/Inter-ExtraBoldItalic.woff2") format("woff2");
 }
 @font-face {
   font-family: "Inter";
   font-style: normal;
   font-weight: 900;
   font-display: swap;
-  src: url("../fonts/Inter-Black.woff2") format("woff2");
+  src: url("./assets/fonts/Inter-Black.woff2") format("woff2");
 }
 @font-face {
   font-family: "Inter";
   font-style: italic;
   font-weight: 900;
   font-display: swap;
-  src: url("../fonts/Inter-BlackItalic.woff2") format("woff2");
+  src: url("./assets/fonts/Inter-BlackItalic.woff2") format("woff2");
 }
 
 .react-resizable-handle {

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

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

web/src/pages/Settings.tsx

@@ -748,14 +748,12 @@ export default function Settings() {
 
       if (level === "camera") {
         return CAMERA_SECTION_MAPPING[actualSection] as
-          | SettingsType
+          SettingsType | undefined;
-          | undefined;
       }
       return (
         (GLOBAL_SECTION_MAPPING[actualSection] as SettingsType | undefined) ??
         (ENRICHMENTS_SECTION_MAPPING[actualSection] as
-          | SettingsType
+          SettingsType | undefined) ??
-          | undefined) ??
         (SYSTEM_SECTION_MAPPING[actualSection] as SettingsType | undefined)
       );
     },

web/src/types/event.ts

@@ -26,10 +26,6 @@ export interface Event {
     path_data: [number[], number][];
     // Allow arbitrary keys for attributes (e.g., model_name, model_name_score)
     [key: string]:
-      | number
+      number | number[] | string | [number[], number][] | undefined;
-      | number[]
-      | string
-      | [number[], number][]
-      | undefined;
   };
 }

web/src/types/frigateConfig.ts

@@ -20,11 +20,7 @@ export interface BirdseyeConfig {
 }
 
 export type BirdseyeMode =
-  | "continuous"
+  "continuous" | "motion" | "all_objects" | "alerts" | "detections";
-  | "motion"
-  | "all_objects"
-  | "alerts"
-  | "detections";
 
 export interface FaceRecognitionConfig {
   enabled: boolean;

web/src/types/ptz.ts

@@ -1,11 +1,5 @@
 type PtzFeature =
-  | "pt"
+  "pt" | "zoom" | "pt-r" | "zoom-r" | "zoom-a" | "pt-r-fov" | "focus";
-  | "zoom"
-  | "pt-r"
-  | "zoom-r"
-  | "zoom-a"
-  | "pt-r-fov"
-  | "focus";
 
 export type OnvifProfile = {
   name: string;

web/src/types/search.ts

@@ -25,11 +25,7 @@ export const DEFAULT_SEARCH_FILTERS: SearchFilters[] = [
 export type SearchSource = "similarity" | "thumbnail" | "description";
 
 export type SearchSortType =
-  | "date_asc"
+  "date_asc" | "date_desc" | "score_asc" | "score_desc" | "relevance";
-  | "date_desc"
-  | "score_asc"
-  | "score_desc"
-  | "relevance";
 
 export type EventType = "object" | "audio" | "manual";
 

web/src/types/stats.ts

@@ -163,11 +163,7 @@ export type Ffprobe = {
 };
 
 export type KeyframeSeverity =
-  | "ok"
+  "ok" | "warning" | "error" | "unknown" | "record_disabled";
-  | "warning"
-  | "error"
-  | "unknown"
-  | "record_disabled";
 
 export type KeyframeGapPattern = "fixed" | "variable";
 

web/src/types/ws.ts

@@ -102,10 +102,7 @@ export type EmbeddingsReindexProgressType = {
 export type ToggleableSetting = "ON" | "OFF";
 
 export type TrackedObjectUpdateType =
-  | "description"
+  "description" | "lpr" | "transcription" | "face";
-  | "lpr"
-  | "transcription"
-  | "face";
 
 export type TrackedObjectUpdateReturnType = {
   type: TrackedObjectUpdateType;

web/src/utils/cameraClone.ts

@@ -605,8 +605,7 @@ export function buildClonedCameraPayloads({
   // deleting a key not in the YAML. Cloned above so this won't mutate the cache.
   const syntheticCameraObj = syntheticTargetCamera as unknown as JsonObject;
   const baseConfigObj = syntheticCameraObj.base_config as
-    | Record<string, JsonObject>
+    Record<string, JsonObject> | undefined;
-    | undefined;
   for (const section of Object.keys(FILTER_SECTION_DEFS)) {
     const syntheticSection = syntheticCameraObj[section];
     if (syntheticSection && typeof syntheticSection === "object") {

web/src/utils/configHealth.ts

@@ -192,9 +192,9 @@ export function evaluateConfigHealth(
               t,
             );
 
-            if (
+            if (!(
-              !(inherited && firedGlobally.has(`${section}:${message.key}`))
+              inherited && firedGlobally.has(`${section}:${message.key}`)
-            ) {
+            )) {
               problems.push(problem);
             }
           });

web/src/utils/go2rtcFfmpeg.ts

@@ -1,21 +1,8 @@
 export type FfmpegVideoOption = "copy" | "h264" | "h265" | "exclude";
 export type FfmpegAudioOption =
-  | "copy"
+  "copy" | "aac" | "opus" | "pcmu" | "pcma" | "pcm" | "mp3" | "exclude";
-  | "aac"
-  | "opus"
-  | "pcmu"
-  | "pcma"
-  | "pcm"
-  | "mp3"
-  | "exclude";
 export type FfmpegHardwareOption =
-  | "none"
+  "none" | "auto" | "vaapi" | "cuda" | "v4l2m2m" | "dxva2" | "videotoolbox";
-  | "auto"
-  | "vaapi"
-  | "cuda"
-  | "v4l2m2m"
-  | "dxva2"
-  | "videotoolbox";
 
 export type ParsedFfmpegUrl = {
   isFfmpeg: boolean;

web/src/utils/health.ts

@@ -256,12 +256,7 @@ export function detectionRows({
 // ------------------------------------------------------------------ hwaccel
 
 export type HwaccelFamilyKey =
-  | "nvidia"
+  "nvidia" | "vaapi" | "intel-qsv" | "rkmpp" | "jetson" | "rpi";
-  | "vaapi"
-  | "intel-qsv"
-  | "rkmpp"
-  | "jetson"
-  | "rpi";
 
 export type HwaccelClass =
   | { kind: "none" }

web/src/utils/uiSettingsTransfer.ts

@@ -276,14 +276,10 @@ export function downloadJson(payload: unknown, fileName: string): void {
 }
 
 export type ParseError =
-  | "invalid_json"
+  "invalid_json" | "wrong_type" | "unsupported_version" | "invalid_schema";
-  | "wrong_type"
-  | "unsupported_version"
-  | "invalid_schema";
 
 export type ParseResult =
-  | { ok: true; file: UiSettingsFile }
+  { ok: true; file: UiSettingsFile } | { ok: false; error: ParseError };
-  | { ok: false; error: ParseError };
 
 export function parseUiSettingsFile(text: string): ParseResult {
   let raw: unknown;

web/src/views/events/EventView.tsx

@@ -61,9 +61,8 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import PreviewPlayer, {
+import PreviewPlayer from "@/components/player/PreviewPlayer";
-  PreviewController,
+import { PreviewController } from "@/components/player/PreviewController";
-} from "@/components/player/PreviewPlayer";
 import SummaryTimeline from "@/components/timeline/SummaryTimeline";
 import { RecordingStartingPoint } from "@/types/record";
 import VideoControls from "@/components/player/VideoControls";

web/src/views/motion-search/MotionSearchView.tsx

@@ -720,10 +720,10 @@ export default function MotionSearchView({
 
   const canStartSearch = Boolean(
     selectedCamera &&
-      searchRange &&
+    searchRange &&
-      searchRange.before >= searchRange.after &&
+    searchRange.before >= searchRange.after &&
-      polygonPoints.length >= 3 &&
+    polygonPoints.length >= 3 &&
-      !isDrawingROI,
+    !isDrawingROI,
   );
 
   const cancelMotionSearchJob = useCallback(

web/src/views/recording/RecordingView.tsx

@@ -3,9 +3,8 @@ import ReviewFilterGroup from "@/components/filter/ReviewFilterGroup";
 import DebugReplayDialog from "@/components/overlay/DebugReplayDialog";
 import ExportDialog from "@/components/overlay/ExportDialog";
 import ActionsDropdown from "@/components/overlay/ActionsDropdown";
-import PreviewPlayer, {
+import PreviewPlayer from "@/components/player/PreviewPlayer";
-  PreviewController,
+import { PreviewController } from "@/components/player/PreviewController";
-} from "@/components/player/PreviewPlayer";
 import { DynamicVideoController } from "@/components/player/dynamic/DynamicVideoController";
 import DynamicVideoPlayer from "@/components/player/dynamic/DynamicVideoPlayer";
 import QualitySelector from "@/components/player/QualitySelector";

web/src/views/settings/CameraManagementView.tsx

@@ -58,7 +58,7 @@ import {
 import type { ProfileState } from "@/types/profile";
 import { getProfileColor } from "@/utils/profileColors";
 import { isReplayCamera } from "@/utils/cameraUtil";
-import { StatusBarMessagesContext } from "@/context/statusbar-provider";
+import { StatusBarMessagesContext } from "@/context/statusbar-context";
 import { cn } from "@/lib/utils";
 import {
   Select,