re-add incorrectly removed face library button icons

this would cause an infinite swr fetch if something was mutated and then fetch was called again

.gitignore

@@ -15,7 +15,6 @@ frigate/version.py
 web/build
 web/node_modules
 web/coverage
-web/.env
 core
 !/web/**/*.ts
 .idea/*

Makefile

@@ -14,7 +14,6 @@ push-boards: $(BOARDS:%=push-%)
 
 version:
 	echo 'VERSION = "$(VERSION)-$(COMMIT_HASH)"' > frigate/version.py
-	echo 'VITE_GIT_COMMIT_HASH=$(COMMIT_HASH)' > web/.env
 
 local: version
 	docker buildx build --target=frigate --file docker/main/Dockerfile . \

docs/docs/configuration/license_plate_recognition.md

@@ -178,7 +178,7 @@ lpr:
 
 :::note
 
-If a camera is configured to detect `car` or `motorcycle` but you don't want Frigate to run LPR for that camera, disable LPR at the camera level:
+If you want to detect cars on cameras but don't want to use resources to run LPR on those cars, you should disable LPR for those specific cameras.
 
 ```yaml
 cameras:

frigate/api/app.py

@@ -179,36 +179,6 @@ def config(request: Request):
     return JSONResponse(content=config)
 
 
-@router.get("/config/raw_paths", dependencies=[Depends(require_role(["admin"]))])
-def config_raw_paths(request: Request):
-    """Admin-only endpoint that returns camera paths and go2rtc streams without credential masking."""
-    config_obj: FrigateConfig = request.app.frigate_config
-
-    raw_paths = {"cameras": {}, "go2rtc": {"streams": {}}}
-
-    # Extract raw camera ffmpeg input paths
-    for camera_name, camera in config_obj.cameras.items():
-        raw_paths["cameras"][camera_name] = {
-            "ffmpeg": {
-                "inputs": [
-                    {"path": input.path, "roles": input.roles}
-                    for input in camera.ffmpeg.inputs
-                ]
-            }
-        }
-
-    # Extract raw go2rtc stream URLs
-    go2rtc_config = config_obj.go2rtc.model_dump(
-        mode="json", warnings="none", exclude_none=True
-    )
-    for stream_name, stream in go2rtc_config.get("streams", {}).items():
-        if stream is None:
-            continue
-        raw_paths["go2rtc"]["streams"][stream_name] = stream
-
-    return JSONResponse(content=raw_paths)
-
-
 @router.get("/config/raw")
 def config_raw():
     config_file = find_config_file()

web/.gitignore

@@ -22,4 +22,3 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
-.env

web/src/components/navigation/NavItem.tsx

@@ -46,13 +46,13 @@ export default function NavItem({
       onClick={onClick}
       className={({ isActive }) =>
         cn(
-          "flex flex-col items-center justify-center rounded-lg p-[6px]",
+          "flex flex-col items-center justify-center rounded-lg",
           className,
           variants[item.variant ?? "primary"][isActive ? "active" : "inactive"],
         )
       }
     >
-      <Icon className="size-5" />
+      <Icon className="size-5 md:m-[6px]" />
     </NavLink>
   );
 

web/src/components/overlay/CreateUserDialog.tsx

@@ -13,8 +13,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 import ActivityIndicator from "../indicators/activity-indicator";
-import { useEffect, useState, useMemo } from "react";
-import useSWR from "swr";
+import { useEffect, useState } from "react";
 import {
   Dialog,
   DialogContent,
@@ -36,7 +35,6 @@ import { LuCheck, LuX } from "react-icons/lu";
 import { useTranslation } from "react-i18next";
 import { isDesktop, isMobile } from "react-device-detect";
 import { cn } from "@/lib/utils";
-import { FrigateConfig } from "@/types/frigateConfig";
 import {
   MobilePage,
   MobilePageContent,
@@ -56,15 +54,9 @@ export default function CreateUserDialog({
   onCreate,
   onCancel,
 }: CreateUserOverlayProps) {
-  const { data: config } = useSWR<FrigateConfig>("config");
   const { t } = useTranslation(["views/settings"]);
   const [isLoading, setIsLoading] = useState<boolean>(false);
 
-  const roles = useMemo(() => {
-    const existingRoles = config ? Object.keys(config.auth?.roles || {}) : [];
-    return Array.from(new Set(["admin", "viewer", ...(existingRoles || [])]));
-  }, [config]);
-
   const formSchema = z
     .object({
       user: z
@@ -77,7 +69,7 @@ export default function CreateUserDialog({
       confirmPassword: z
         .string()
         .min(1, t("users.dialog.createUser.confirmPassword")),
-      role: z.string().min(1),
+      role: z.enum(["admin", "viewer"]),
     })
     .refine((data) => data.password === data.confirmPassword, {
       message: t("users.dialog.form.password.notMatch"),
@@ -254,22 +246,24 @@ export default function CreateUserDialog({
                       </SelectTrigger>
                     </FormControl>
                     <SelectContent>
-                      {roles.map((r) => (
-                        <SelectItem
-                          value={r}
-                          key={r}
-                          className="flex items-center gap-2"
-                        >
-                          <div className="flex items-center gap-2">
-                            {r === "admin" ? (
-                              <Shield className="h-4 w-4 text-primary" />
-                            ) : (
-                              <User className="h-4 w-4 text-muted-foreground" />
-                            )}
-                            <span>{t(`role.${r}`, { ns: "common" }) || r}</span>
-                          </div>
-                        </SelectItem>
-                      ))}
+                      <SelectItem
+                        value="admin"
+                        className="flex items-center gap-2"
+                      >
+                        <div className="flex items-center gap-2">
+                          <Shield className="h-4 w-4 text-primary" />
+                          <span>{t("role.admin", { ns: "common" })}</span>
+                        </div>
+                      </SelectItem>
+                      <SelectItem
+                        value="viewer"
+                        className="flex items-center gap-2"
+                      >
+                        <div className="flex items-center gap-2">
+                          <User className="h-4 w-4 text-muted-foreground" />
+                          <span>{t("role.viewer", { ns: "common" })}</span>
+                        </div>
+                      </SelectItem>
                     </SelectContent>
                   </Select>
                   <FormDescription className="text-xs text-muted-foreground">

web/src/components/settings/CameraEditForm.tsx

@@ -18,7 +18,7 @@ import { z } from "zod";
 import axios from "axios";
 import { toast, Toaster } from "sonner";
 import { useTranslation } from "react-i18next";
-import { useState, useMemo, useEffect } from "react";
+import { useState, useMemo } from "react";
 import { LuTrash2, LuPlus } from "react-icons/lu";
 import ActivityIndicator from "@/components/indicators/activity-indicator";
 import { FrigateConfig } from "@/types/frigateConfig";
@@ -42,15 +42,7 @@ export default function CameraEditForm({
   onCancel,
 }: CameraEditFormProps) {
   const { t } = useTranslation(["views/settings"]);
-  const { data: config, mutate: mutateConfig } =
-    useSWR<FrigateConfig>("config");
-  const { data: rawPaths, mutate: mutateRawPaths } = useSWR<{
-    cameras: Record<
-      string,
-      { ffmpeg: { inputs: { path: string; roles: string[] }[] } }
-    >;
-    go2rtc: { streams: Record<string, string | string[]> };
-  }>(cameraName ? "config/raw_paths" : null);
+  const { data: config } = useSWR<FrigateConfig>("config");
   const [isLoading, setIsLoading] = useState(false);
 
   const formSchema = useMemo(
@@ -153,23 +145,14 @@ export default function CameraEditForm({
   if (cameraName && config?.cameras[cameraName]) {
     const camera = config.cameras[cameraName];
     defaultValues.enabled = camera.enabled ?? true;
-
-    // Use raw paths from the admin endpoint if available, otherwise fall back to masked paths
-    const rawCameraData = rawPaths?.cameras?.[cameraName];
-    defaultValues.ffmpeg.inputs = rawCameraData?.ffmpeg?.inputs?.length
-      ? rawCameraData.ffmpeg.inputs.map((input) => ({
+    defaultValues.ffmpeg.inputs = camera.ffmpeg?.inputs?.length
+      ? camera.ffmpeg.inputs.map((input) => ({
           path: input.path,
           roles: input.roles as Role[],
         }))
-      : camera.ffmpeg?.inputs?.length
-        ? camera.ffmpeg.inputs.map((input) => ({
-            path: input.path,
-            roles: input.roles as Role[],
-          }))
-        : defaultValues.ffmpeg.inputs;
+      : defaultValues.ffmpeg.inputs;
 
-    const go2rtcStreams =
-      rawPaths?.go2rtc?.streams || config.go2rtc?.streams || {};
+    const go2rtcStreams = config.go2rtc?.streams || {};
     const cameraStreams: Record<string, string[]> = {};
 
     // get candidate stream names for this camera. could be the camera's own name,
@@ -213,60 +196,6 @@ export default function CameraEditForm({
     mode: "onChange",
   });
 
-  // Update form values when rawPaths loads
-  useEffect(() => {
-    if (
-      cameraName &&
-      config?.cameras[cameraName] &&
-      rawPaths?.cameras?.[cameraName]
-    ) {
-      const camera = config.cameras[cameraName];
-      const rawCameraData = rawPaths.cameras[cameraName];
-
-      // Update ffmpeg inputs with raw paths
-      if (rawCameraData.ffmpeg?.inputs?.length) {
-        form.setValue(
-          "ffmpeg.inputs",
-          rawCameraData.ffmpeg.inputs.map((input) => ({
-            path: input.path,
-            roles: input.roles as Role[],
-          })),
-        );
-      }
-
-      // Update go2rtc streams with raw URLs
-      if (rawPaths.go2rtc?.streams) {
-        const validNames = new Set<string>();
-        validNames.add(cameraName);
-
-        camera.ffmpeg?.inputs?.forEach((input) => {
-          const restreamMatch = input.path.match(
-            /^rtsp:\/\/127\.0\.0\.1:8554\/([^?#/]+)(?:[?#].*)?$/,
-          );
-          if (restreamMatch) {
-            validNames.add(restreamMatch[1]);
-          }
-        });
-
-        const liveStreams = camera?.live?.streams;
-        if (liveStreams) {
-          Object.keys(liveStreams).forEach((key) => validNames.add(key));
-        }
-
-        const cameraStreams: Record<string, string[]> = {};
-        Object.entries(rawPaths.go2rtc.streams).forEach(([name, urls]) => {
-          if (validNames.has(name)) {
-            cameraStreams[name] = Array.isArray(urls) ? urls : [urls];
-          }
-        });
-
-        if (Object.keys(cameraStreams).length > 0) {
-          form.setValue("go2rtcStreams", cameraStreams);
-        }
-      }
-    }
-  }, [cameraName, config, rawPaths, form]);
-
   const { fields, append, remove } = useFieldArray({
     control: form.control,
     name: "ffmpeg.inputs",
@@ -339,8 +268,6 @@ export default function CameraEditForm({
                 }),
                 { position: "top-center" },
               );
-              mutateConfig();
-              mutateRawPaths();
               if (onSave) onSave();
             });
           } else {
@@ -350,8 +277,6 @@ export default function CameraEditForm({
               }),
               { position: "top-center" },
             );
-            mutateConfig();
-            mutateRawPaths();
             if (onSave) onSave();
           }
         } else {

web/src/pages/Settings.tsx

@@ -26,7 +26,7 @@ import useSWR from "swr";
 import FilterSwitch from "@/components/filter/FilterSwitch";
 import { ZoneMaskFilterButton } from "@/components/filter/ZoneMaskFilter";
 import { PolygonType } from "@/types/canvas";
-import CameraReviewSettingsView from "@/views/settings/CameraReviewSettingsView";
+import CameraSettingsView from "@/views/settings/CameraSettingsView";
 import CameraManagementView from "@/views/settings/CameraManagementView";
 import MotionTunerView from "@/views/settings/MotionTunerView";
 import MasksAndZonesView from "@/views/settings/MasksAndZonesView";
@@ -93,7 +93,7 @@ const settingsGroups = [
     label: "cameras",
     items: [
       { key: "cameraManagement", component: CameraManagementView },
-      { key: "cameraReview", component: CameraReviewSettingsView },
+      { key: "cameraReview", component: CameraSettingsView },
       { key: "masksAndZones", component: MasksAndZonesView },
       { key: "motionTuner", component: MotionTunerView },
     ],

web/src/utils/i18n.ts

@@ -33,7 +33,7 @@ i18n
     fallbackLng: "en", // use en if detected lng is not available
 
     backend: {
-      loadPath: `locales/{{lng}}/{{ns}}.json?v=${import.meta.env.VITE_GIT_COMMIT_HASH || "unknown"}`,
+      loadPath: "locales/{{lng}}/{{ns}}.json",
     },
 
     ns: [

web/src/views/events/EventView.tsx

@@ -799,7 +799,7 @@ function DetectionReview({
             (itemsToReview ?? 0) > 0 && (
               <div className="col-span-full flex items-center justify-center">
                 <Button
-                  className="text-balance text-white"
+                  className="text-white"
                   aria-label={t("markTheseItemsAsReviewed")}
                   variant="select"
                   onClick={() => {

web/src/views/settings/CameraManagementView.tsx

@@ -5,9 +5,17 @@ import { Button } from "@/components/ui/button";
 import useSWR from "swr";
 import { FrigateConfig } from "@/types/frigateConfig";
 import { useTranslation } from "react-i18next";
+import { Label } from "@/components/ui/label";
 import CameraEditForm from "@/components/settings/CameraEditForm";
 import CameraWizardDialog from "@/components/settings/CameraWizardDialog";
 import { LuPlus } from "react-icons/lu";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 import { IoMdArrowRoundBack } from "react-icons/io";
 import { isDesktop } from "react-device-detect";
 import { CameraNameLabel } from "@/components/camera/FriendlyNameLabel";
@@ -82,6 +90,31 @@ export default function CameraManagementView({
                 </Button>
                 {cameras.length > 0 && (
                   <>
+                    <div className="my-4 flex flex-col gap-2">
+                      <Label>{t("cameraManagement.editCamera")}</Label>
+                      <Select
+                        onValueChange={(value) => {
+                          setEditCameraName(value);
+                          setViewMode("edit");
+                        }}
+                      >
+                        <SelectTrigger className="w-[180px]">
+                          <SelectValue
+                            placeholder={t("cameraManagement.selectCamera")}
+                          />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {cameras.map((camera) => {
+                            return (
+                              <SelectItem key={camera} value={camera}>
+                                <CameraNameLabel camera={camera} />
+                              </SelectItem>
+                            );
+                          })}
+                        </SelectContent>
+                      </Select>
+                    </div>
+
                     <Separator className="my-2 flex bg-secondary" />
                     <div className="max-w-7xl space-y-4">
                       <Heading as="h4" className="my-2">

web/src/views/settings/CameraReviewSettingsView.tsx

@@ -1,738 +0,0 @@
-import Heading from "@/components/ui/heading";
-import { useCallback, useContext, useEffect, useMemo, useState } from "react";
-import { Toaster, toast } from "sonner";
-import {
-  Form,
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from "@/components/ui/form";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useForm } from "react-hook-form";
-import { z } from "zod";
-import { Separator } from "@/components/ui/separator";
-import { Button } from "@/components/ui/button";
-import useSWR from "swr";
-import { FrigateConfig } from "@/types/frigateConfig";
-import { Checkbox } from "@/components/ui/checkbox";
-import ActivityIndicator from "@/components/indicators/activity-indicator";
-import { StatusBarMessagesContext } from "@/context/statusbar-provider";
-import axios from "axios";
-import { Link } from "react-router-dom";
-import { LuExternalLink } from "react-icons/lu";
-import { MdCircle } from "react-icons/md";
-import { cn } from "@/lib/utils";
-import { Trans, useTranslation } from "react-i18next";
-import { Switch } from "@/components/ui/switch";
-import { Label } from "@/components/ui/label";
-import { useDocDomain } from "@/hooks/use-doc-domain";
-import { getTranslatedLabel } from "@/utils/i18n";
-import {
-  useAlertsState,
-  useDetectionsState,
-  useObjectDescriptionState,
-  useReviewDescriptionState,
-} from "@/api/ws";
-import { useCameraFriendlyName } from "@/hooks/use-camera-friendly-name";
-import { resolveZoneName } from "@/hooks/use-zone-friendly-name";
-import { formatList } from "@/utils/stringUtil";
-
-type CameraReviewSettingsViewProps = {
-  selectedCamera: string;
-  setUnsavedChanges: React.Dispatch<React.SetStateAction<boolean>>;
-};
-
-type CameraReviewSettingsValueType = {
-  alerts_zones: string[];
-  detections_zones: string[];
-};
-
-export default function CameraReviewSettingsView({
-  selectedCamera,
-  setUnsavedChanges,
-}: CameraReviewSettingsViewProps) {
-  const { t } = useTranslation(["views/settings"]);
-  const { getLocaleDocUrl } = useDocDomain();
-
-  const { data: config, mutate: updateConfig } =
-    useSWR<FrigateConfig>("config");
-
-  const cameraConfig = useMemo(() => {
-    if (config && selectedCamera) {
-      return config.cameras[selectedCamera];
-    }
-  }, [config, selectedCamera]);
-
-  const [changedValue, setChangedValue] = useState(false);
-  const [isLoading, setIsLoading] = useState(false);
-  const [selectDetections, setSelectDetections] = useState(false);
-
-  const { addMessage, removeMessage } = useContext(StatusBarMessagesContext)!;
-
-  const selectCameraName = useCameraFriendlyName(selectedCamera);
-
-  // zones and labels
-
-  const getZoneName = useCallback(
-    (zoneId: string, cameraId?: string) =>
-      resolveZoneName(config, zoneId, cameraId),
-    [config],
-  );
-
-  const zones = useMemo(() => {
-    if (cameraConfig) {
-      return Object.entries(cameraConfig.zones).map(([name, zoneData]) => ({
-        camera: cameraConfig.name,
-        name,
-        friendly_name: cameraConfig.zones[name].friendly_name,
-        objects: zoneData.objects,
-        color: zoneData.color,
-      }));
-    }
-  }, [cameraConfig]);
-
-  const alertsLabels = useMemo(() => {
-    return cameraConfig?.review.alerts.labels
-      ? formatList(
-          cameraConfig.review.alerts.labels.map((label) =>
-            getTranslatedLabel(
-              label,
-              cameraConfig?.audio?.listen?.includes(label) ? "audio" : "object",
-            ),
-          ),
-        )
-      : "";
-  }, [cameraConfig]);
-
-  const detectionsLabels = useMemo(() => {
-    return cameraConfig?.review.detections.labels
-      ? formatList(
-          cameraConfig.review.detections.labels.map((label) =>
-            getTranslatedLabel(
-              label,
-              cameraConfig?.audio?.listen?.includes(label) ? "audio" : "object",
-            ),
-          ),
-        )
-      : "";
-  }, [cameraConfig]);
-
-  // form
-
-  const formSchema = z.object({
-    alerts_zones: z.array(z.string()),
-    detections_zones: z.array(z.string()),
-  });
-
-  const form = useForm<z.infer<typeof formSchema>>({
-    resolver: zodResolver(formSchema),
-    mode: "onChange",
-    defaultValues: {
-      alerts_zones: cameraConfig?.review.alerts.required_zones || [],
-      detections_zones: cameraConfig?.review.detections.required_zones || [],
-    },
-  });
-
-  const watchedAlertsZones = form.watch("alerts_zones");
-  const watchedDetectionsZones = form.watch("detections_zones");
-
-  const { payload: alertsState, send: sendAlerts } =
-    useAlertsState(selectedCamera);
-  const { payload: detectionsState, send: sendDetections } =
-    useDetectionsState(selectedCamera);
-
-  const { payload: objDescState, send: sendObjDesc } =
-    useObjectDescriptionState(selectedCamera);
-  const { payload: revDescState, send: sendRevDesc } =
-    useReviewDescriptionState(selectedCamera);
-
-  const handleCheckedChange = useCallback(
-    (isChecked: boolean) => {
-      if (!isChecked) {
-        form.reset({
-          alerts_zones: watchedAlertsZones,
-          detections_zones: [],
-        });
-      }
-      setChangedValue(true);
-      setSelectDetections(isChecked as boolean);
-    },
-    // we know that these deps are correct
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [watchedAlertsZones],
-  );
-
-  const saveToConfig = useCallback(
-    async (
-      { alerts_zones, detections_zones }: CameraReviewSettingsValueType, // values submitted via the form
-    ) => {
-      const createQuery = (zones: string[], type: "alerts" | "detections") =>
-        zones.length
-          ? zones
-              .map(
-                (zone) =>
-                  `&cameras.${selectedCamera}.review.${type}.required_zones=${zone}`,
-              )
-              .join("")
-          : cameraConfig?.review[type]?.required_zones &&
-              cameraConfig?.review[type]?.required_zones.length > 0
-            ? `&cameras.${selectedCamera}.review.${type}.required_zones`
-            : "";
-
-      const alertQueries = createQuery(alerts_zones, "alerts");
-      const detectionQueries = createQuery(detections_zones, "detections");
-
-      axios
-        .put(`config/set?${alertQueries}${detectionQueries}`, {
-          requires_restart: 0,
-        })
-        .then((res) => {
-          if (res.status === 200) {
-            toast.success(
-              t("cameraReview.reviewClassification.toast.success"),
-              {
-                position: "top-center",
-              },
-            );
-            updateConfig();
-          } else {
-            toast.error(
-              t("toast.save.error.title", {
-                errorMessage: res.statusText,
-                ns: "common",
-              }),
-              {
-                position: "top-center",
-              },
-            );
-          }
-        })
-        .catch((error) => {
-          const errorMessage =
-            error.response?.data?.message ||
-            error.response?.data?.detail ||
-            "Unknown error";
-          toast.error(
-            t("toast.save.error.title", {
-              errorMessage,
-              ns: "common",
-            }),
-            {
-              position: "top-center",
-            },
-          );
-        })
-        .finally(() => {
-          setIsLoading(false);
-        });
-    },
-    [updateConfig, setIsLoading, selectedCamera, cameraConfig, t],
-  );
-
-  const onCancel = useCallback(() => {
-    if (!cameraConfig) {
-      return;
-    }
-
-    setChangedValue(false);
-    setUnsavedChanges(false);
-    removeMessage(
-      "camera_settings",
-      `review_classification_settings_${selectedCamera}`,
-    );
-    form.reset({
-      alerts_zones: cameraConfig?.review.alerts.required_zones ?? [],
-      detections_zones: cameraConfig?.review.detections.required_zones || [],
-    });
-    setSelectDetections(
-      !!cameraConfig?.review.detections.required_zones?.length,
-    );
-    // we know that these deps are correct
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [removeMessage, selectedCamera, setUnsavedChanges, cameraConfig]);
-
-  useEffect(() => {
-    onCancel();
-    // we know that these deps are correct
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [selectedCamera]);
-
-  useEffect(() => {
-    if (changedValue) {
-      addMessage(
-        "camera_settings",
-        t("cameraReview.reviewClassification.unsavedChanges", {
-          camera: selectedCamera,
-        }),
-        undefined,
-        `review_classification_settings_${selectedCamera}`,
-      );
-    } else {
-      removeMessage(
-        "camera_settings",
-        `review_classification_settings_${selectedCamera}`,
-      );
-    }
-    // we know that these deps are correct
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [changedValue, selectedCamera]);
-
-  function onSubmit(values: z.infer<typeof formSchema>) {
-    setIsLoading(true);
-
-    saveToConfig(values as CameraReviewSettingsValueType);
-  }
-
-  useEffect(() => {
-    document.title = t("documentTitle.cameraReview");
-  }, [t]);
-
-  if (!cameraConfig && !selectedCamera) {
-    return <ActivityIndicator />;
-  }
-
-  return (
-    <>
-      <div className="flex size-full flex-col md:flex-row">
-        <Toaster position="top-center" closeButton={true} />
-        <div className="scrollbar-container order-last mb-10 mt-2 flex h-full w-full flex-col overflow-y-auto pb-2 md:order-none">
-          <Heading as="h4" className="mb-2">
-            {t("cameraReview.title")}
-          </Heading>
-
-          <Heading as="h4" className="my-2">
-            <Trans ns="views/settings">cameraReview.review.title</Trans>
-          </Heading>
-
-          <div className="mb-5 mt-2 flex max-w-5xl flex-col gap-2 space-y-3 text-sm text-primary-variant">
-            <div className="flex flex-row items-center">
-              <Switch
-                id="alerts-enabled"
-                className="mr-3"
-                checked={alertsState == "ON"}
-                onCheckedChange={(isChecked) => {
-                  sendAlerts(isChecked ? "ON" : "OFF");
-                }}
-              />
-              <div className="space-y-0.5">
-                <Label htmlFor="alerts-enabled">
-                  <Trans ns="views/settings">cameraReview.review.alerts</Trans>
-                </Label>
-              </div>
-            </div>
-            <div className="flex flex-col">
-              <div className="flex flex-row items-center">
-                <Switch
-                  id="detections-enabled"
-                  className="mr-3"
-                  checked={detectionsState == "ON"}
-                  onCheckedChange={(isChecked) => {
-                    sendDetections(isChecked ? "ON" : "OFF");
-                  }}
-                />
-                <div className="space-y-0.5">
-                  <Label htmlFor="detections-enabled">
-                    <Trans ns="views/settings">camera.review.detections</Trans>
-                  </Label>
-                </div>
-              </div>
-              <div className="mt-3 text-sm text-muted-foreground">
-                <Trans ns="views/settings">cameraReview.review.desc</Trans>
-              </div>
-            </div>
-          </div>
-          {cameraConfig?.objects?.genai?.enabled_in_config && (
-            <>
-              <Separator className="my-2 flex bg-secondary" />
-
-              <Heading as="h4" className="my-2">
-                <Trans ns="views/settings">
-                  cameraReview.object_descriptions.title
-                </Trans>
-              </Heading>
-
-              <div className="mb-5 mt-2 flex max-w-5xl flex-col gap-2 space-y-3 text-sm text-primary-variant">
-                <div className="flex flex-row items-center">
-                  <Switch
-                    id="alerts-enabled"
-                    className="mr-3"
-                    checked={objDescState == "ON"}
-                    onCheckedChange={(isChecked) => {
-                      sendObjDesc(isChecked ? "ON" : "OFF");
-                    }}
-                  />
-                  <div className="space-y-0.5">
-                    <Label htmlFor="genai-enabled">
-                      <Trans>button.enabled</Trans>
-                    </Label>
-                  </div>
-                </div>
-                <div className="mt-3 text-sm text-muted-foreground">
-                  <Trans ns="views/settings">
-                    cameraReview.object_descriptions.desc
-                  </Trans>
-                </div>
-              </div>
-            </>
-          )}
-
-          {cameraConfig?.review?.genai?.enabled_in_config && (
-            <>
-              <Separator className="my-2 flex bg-secondary" />
-
-              <Heading as="h4" className="my-2">
-                <Trans ns="views/settings">
-                  cameraReview.review_descriptions.title
-                </Trans>
-              </Heading>
-
-              <div className="mb-5 mt-2 flex max-w-5xl flex-col gap-2 space-y-3 text-sm text-primary-variant">
-                <div className="flex flex-row items-center">
-                  <Switch
-                    id="alerts-enabled"
-                    className="mr-3"
-                    checked={revDescState == "ON"}
-                    onCheckedChange={(isChecked) => {
-                      sendRevDesc(isChecked ? "ON" : "OFF");
-                    }}
-                  />
-                  <div className="space-y-0.5">
-                    <Label htmlFor="genai-enabled">
-                      <Trans>button.enabled</Trans>
-                    </Label>
-                  </div>
-                </div>
-                <div className="mt-3 text-sm text-muted-foreground">
-                  <Trans ns="views/settings">
-                    cameraReview.review_descriptions.desc
-                  </Trans>
-                </div>
-              </div>
-            </>
-          )}
-
-          <Separator className="my-2 flex bg-secondary" />
-
-          <Heading as="h4" className="my-2">
-            <Trans ns="views/settings">
-              cameraReview.reviewClassification.title
-            </Trans>
-          </Heading>
-
-          <div className="max-w-6xl">
-            <div className="mb-5 mt-2 flex max-w-5xl flex-col gap-2 text-sm text-primary-variant">
-              <p>
-                <Trans ns="views/settings">
-                  cameraReview.reviewClassification.desc
-                </Trans>
-              </p>
-              <div className="flex items-center text-primary">
-                <Link
-                  to={getLocaleDocUrl("configuration/review")}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="inline"
-                >
-                  {t("readTheDocumentation", { ns: "common" })}
-                  <LuExternalLink className="ml-2 inline-flex size-3" />
-                </Link>
-              </div>
-            </div>
-          </div>
-
-          <Form {...form}>
-            <form
-              onSubmit={form.handleSubmit(onSubmit)}
-              className="mt-2 space-y-6"
-            >
-              <div
-                className={cn(
-                  "w-full max-w-5xl space-y-0",
-                  zones &&
-                    zones?.length > 0 &&
-                    "grid items-start gap-5 md:grid-cols-2",
-                )}
-              >
-                <FormField
-                  control={form.control}
-                  name="alerts_zones"
-                  render={() => (
-                    <FormItem>
-                      {zones && zones?.length > 0 ? (
-                        <>
-                          <div className="mb-2">
-                            <FormLabel className="flex flex-row items-center text-base">
-                              <Trans ns="views/settings">
-                                camera.review.alerts
-                              </Trans>
-                              <MdCircle className="ml-3 size-2 text-severity_alert" />
-                            </FormLabel>
-                            <FormDescription>
-                              <Trans ns="views/settings">
-                                cameraReview.reviewClassification.selectAlertsZones
-                              </Trans>
-                            </FormDescription>
-                          </div>
-                          <div className="max-w-md rounded-lg bg-secondary p-4 md:max-w-full">
-                            {zones?.map((zone) => (
-                              <FormField
-                                key={zone.name}
-                                control={form.control}
-                                name="alerts_zones"
-                                render={({ field }) => (
-                                  <FormItem
-                                    key={zone.name}
-                                    className="mb-3 flex flex-row items-center space-x-3 space-y-0 last:mb-0"
-                                  >
-                                    <FormControl>
-                                      <Checkbox
-                                        className="size-5 text-white accent-white data-[state=checked]:bg-selected data-[state=checked]:text-white"
-                                        checked={field.value?.includes(
-                                          zone.name,
-                                        )}
-                                        onCheckedChange={(checked) => {
-                                          setChangedValue(true);
-                                          return checked
-                                            ? field.onChange([
-                                                ...field.value,
-                                                zone.name,
-                                              ])
-                                            : field.onChange(
-                                                field.value?.filter(
-                                                  (value) =>
-                                                    value !== zone.name,
-                                                ),
-                                              );
-                                        }}
-                                      />
-                                    </FormControl>
-                                    <FormLabel
-                                      className={cn(
-                                        "font-normal",
-                                        !zone.friendly_name &&
-                                          "smart-capitalize",
-                                      )}
-                                    >
-                                      {zone.friendly_name || zone.name}
-                                    </FormLabel>
-                                  </FormItem>
-                                )}
-                              />
-                            ))}
-                          </div>
-                        </>
-                      ) : (
-                        <div className="font-normal text-destructive">
-                          <Trans ns="views/settings">
-                            cameraReview.reviewClassification.noDefinedZones
-                          </Trans>
-                        </div>
-                      )}
-                      <FormMessage />
-                      <div className="text-sm">
-                        {watchedAlertsZones && watchedAlertsZones.length > 0
-                          ? t(
-                              "cameraReview.reviewClassification.zoneObjectAlertsTips",
-                              {
-                                alertsLabels,
-                                zone: formatList(
-                                  watchedAlertsZones.map((zone) =>
-                                    getZoneName(zone),
-                                  ),
-                                ),
-                                cameraName: selectCameraName,
-                              },
-                            )
-                          : t(
-                              "cameraReview.reviewClassification.objectAlertsTips",
-                              {
-                                alertsLabels,
-                                cameraName: selectCameraName,
-                              },
-                            )}
-                      </div>
-                    </FormItem>
-                  )}
-                />
-
-                <FormField
-                  control={form.control}
-                  name="detections_zones"
-                  render={() => (
-                    <FormItem>
-                      {zones && zones?.length > 0 && (
-                        <>
-                          <div className="mb-2">
-                            <FormLabel className="flex flex-row items-center text-base">
-                              <Trans ns="views/settings">
-                                camera.review.detections
-                              </Trans>
-                              <MdCircle className="ml-3 size-2 text-severity_detection" />
-                            </FormLabel>
-                            {selectDetections && (
-                              <FormDescription>
-                                <Trans ns="views/settings">
-                                  cameraReview.reviewClassification.selectDetectionsZones
-                                </Trans>
-                              </FormDescription>
-                            )}
-                          </div>
-
-                          {selectDetections && (
-                            <div className="max-w-md rounded-lg bg-secondary p-4 md:max-w-full">
-                              {zones?.map((zone) => (
-                                <FormField
-                                  key={zone.name}
-                                  control={form.control}
-                                  name="detections_zones"
-                                  render={({ field }) => (
-                                    <FormItem
-                                      key={zone.name}
-                                      className="mb-3 flex flex-row items-center space-x-3 space-y-0 last:mb-0"
-                                    >
-                                      <FormControl>
-                                        <Checkbox
-                                          className="size-5 text-white accent-white data-[state=checked]:bg-selected data-[state=checked]:text-white"
-                                          checked={field.value?.includes(
-                                            zone.name,
-                                          )}
-                                          onCheckedChange={(checked) => {
-                                            return checked
-                                              ? field.onChange([
-                                                  ...field.value,
-                                                  zone.name,
-                                                ])
-                                              : field.onChange(
-                                                  field.value?.filter(
-                                                    (value) =>
-                                                      value !== zone.name,
-                                                  ),
-                                                );
-                                          }}
-                                        />
-                                      </FormControl>
-                                      <FormLabel
-                                        className={cn(
-                                          "font-normal",
-                                          !zone.friendly_name &&
-                                            "smart-capitalize",
-                                        )}
-                                      >
-                                        {zone.friendly_name || zone.name}
-                                      </FormLabel>
-                                    </FormItem>
-                                  )}
-                                />
-                              ))}
-                            </div>
-                          )}
-                          <FormMessage />
-
-                          <div className="mb-0 flex flex-row items-center gap-2">
-                            <Checkbox
-                              id="select-detections"
-                              className="size-5 text-white accent-white data-[state=checked]:bg-selected data-[state=checked]:text-white"
-                              checked={selectDetections}
-                              onCheckedChange={handleCheckedChange}
-                            />
-                            <div className="grid gap-1.5 leading-none">
-                              <label
-                                htmlFor="select-detections"
-                                className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-                              >
-                                <Trans ns="views/settings">
-                                  cameraReview.reviewClassification.limitDetections
-                                </Trans>
-                              </label>
-                            </div>
-                          </div>
-                        </>
-                      )}
-
-                      <div className="text-sm">
-                        {watchedDetectionsZones &&
-                        watchedDetectionsZones.length > 0 ? (
-                          !selectDetections ? (
-                            <Trans
-                              i18nKey="cameraReview.reviewClassification.zoneObjectDetectionsTips.text"
-                              values={{
-                                detectionsLabels,
-                                zone: formatList(
-                                  watchedDetectionsZones.map((zone) =>
-                                    getZoneName(zone),
-                                  ),
-                                ),
-                                cameraName: selectCameraName,
-                              }}
-                              ns="views/settings"
-                            />
-                          ) : (
-                            <Trans
-                              i18nKey="cameraReview.reviewClassification.zoneObjectDetectionsTips.notSelectDetections"
-                              values={{
-                                detectionsLabels,
-                                zone: formatList(
-                                  watchedDetectionsZones.map((zone) =>
-                                    getZoneName(zone),
-                                  ),
-                                ),
-                                cameraName: selectCameraName,
-                              }}
-                              ns="views/settings"
-                            />
-                          )
-                        ) : (
-                          <Trans
-                            i18nKey="cameraReview.reviewClassification.objectDetectionsTips"
-                            values={{
-                              detectionsLabels,
-                              cameraName: selectCameraName,
-                            }}
-                            ns="views/settings"
-                          />
-                        )}
-                      </div>
-                    </FormItem>
-                  )}
-                />
-              </div>
-              <Separator className="my-2 flex bg-secondary" />
-
-              <div className="flex w-full flex-row items-center gap-2 pt-2 md:w-[25%]">
-                <Button
-                  className="flex flex-1"
-                  aria-label={t("button.reset", { ns: "common" })}
-                  onClick={onCancel}
-                  type="button"
-                >
-                  <Trans>button.reset</Trans>
-                </Button>
-                <Button
-                  variant="select"
-                  disabled={isLoading}
-                  className="flex flex-1"
-                  aria-label={t("button.save", { ns: "common" })}
-                  type="submit"
-                >
-                  {isLoading ? (
-                    <div className="flex flex-row items-center gap-2">
-                      <ActivityIndicator />
-                      <span>
-                        <Trans>button.saving</Trans>
-                      </span>
-                    </div>
-                  ) : (
-                    <Trans>button.save</Trans>
-                  )}
-                </Button>
-              </div>
-            </form>
-          </Form>
-        </div>
-      </div>
-    </>
-  );
-}

web/src/views/settings/CameraSettingsView.tsx

@@ -0,0 +1,794 @@
+import Heading from "@/components/ui/heading";
+import { useCallback, useContext, useEffect, useMemo, useState } from "react";
+import { Toaster, toast } from "sonner";
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import { Separator } from "@/components/ui/separator";
+import { Button } from "@/components/ui/button";
+import useSWR from "swr";
+import { FrigateConfig } from "@/types/frigateConfig";
+import { Checkbox } from "@/components/ui/checkbox";
+import ActivityIndicator from "@/components/indicators/activity-indicator";
+import { StatusBarMessagesContext } from "@/context/statusbar-provider";
+import axios from "axios";
+import { Link } from "react-router-dom";
+import { LuExternalLink } from "react-icons/lu";
+import { MdCircle } from "react-icons/md";
+import { cn } from "@/lib/utils";
+import { Trans, useTranslation } from "react-i18next";
+import { Switch } from "@/components/ui/switch";
+import { Label } from "@/components/ui/label";
+import { useDocDomain } from "@/hooks/use-doc-domain";
+import { getTranslatedLabel } from "@/utils/i18n";
+import {
+  useAlertsState,
+  useDetectionsState,
+  useObjectDescriptionState,
+  useReviewDescriptionState,
+} from "@/api/ws";
+import CameraEditForm from "@/components/settings/CameraEditForm";
+import CameraWizardDialog from "@/components/settings/CameraWizardDialog";
+import { IoMdArrowRoundBack } from "react-icons/io";
+import { isDesktop } from "react-device-detect";
+import { useCameraFriendlyName } from "@/hooks/use-camera-friendly-name";
+import { resolveZoneName } from "@/hooks/use-zone-friendly-name";
+import { formatList } from "@/utils/stringUtil";
+
+type CameraSettingsViewProps = {
+  selectedCamera: string;
+  setUnsavedChanges: React.Dispatch<React.SetStateAction<boolean>>;
+};
+
+type CameraReviewSettingsValueType = {
+  alerts_zones: string[];
+  detections_zones: string[];
+};
+
+export default function CameraSettingsView({
+  selectedCamera,
+  setUnsavedChanges,
+}: CameraSettingsViewProps) {
+  const { t } = useTranslation(["views/settings"]);
+  const { getLocaleDocUrl } = useDocDomain();
+
+  const { data: config, mutate: updateConfig } =
+    useSWR<FrigateConfig>("config");
+
+  const cameraConfig = useMemo(() => {
+    if (config && selectedCamera) {
+      return config.cameras[selectedCamera];
+    }
+  }, [config, selectedCamera]);
+
+  const [changedValue, setChangedValue] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [selectDetections, setSelectDetections] = useState(false);
+  const [viewMode, setViewMode] = useState<"settings" | "add" | "edit">(
+    "settings",
+  ); // Control view state
+  const [editCameraName, setEditCameraName] = useState<string | undefined>(
+    undefined,
+  ); // Track camera being edited
+  const [showWizard, setShowWizard] = useState(false);
+
+  const { addMessage, removeMessage } = useContext(StatusBarMessagesContext)!;
+
+  const selectCameraName = useCameraFriendlyName(selectedCamera);
+
+  // zones and labels
+
+  const getZoneName = useCallback(
+    (zoneId: string, cameraId?: string) =>
+      resolveZoneName(config, zoneId, cameraId),
+    [config],
+  );
+
+  const zones = useMemo(() => {
+    if (cameraConfig) {
+      return Object.entries(cameraConfig.zones).map(([name, zoneData]) => ({
+        camera: cameraConfig.name,
+        name,
+        friendly_name: cameraConfig.zones[name].friendly_name,
+        objects: zoneData.objects,
+        color: zoneData.color,
+      }));
+    }
+  }, [cameraConfig]);
+
+  const alertsLabels = useMemo(() => {
+    return cameraConfig?.review.alerts.labels
+      ? formatList(
+          cameraConfig.review.alerts.labels.map((label) =>
+            getTranslatedLabel(
+              label,
+              cameraConfig?.audio?.listen?.includes(label) ? "audio" : "object",
+            ),
+          ),
+        )
+      : "";
+  }, [cameraConfig]);
+
+  const detectionsLabels = useMemo(() => {
+    return cameraConfig?.review.detections.labels
+      ? formatList(
+          cameraConfig.review.detections.labels.map((label) =>
+            getTranslatedLabel(
+              label,
+              cameraConfig?.audio?.listen?.includes(label) ? "audio" : "object",
+            ),
+          ),
+        )
+      : "";
+  }, [cameraConfig]);
+
+  // form
+
+  const formSchema = z.object({
+    alerts_zones: z.array(z.string()),
+    detections_zones: z.array(z.string()),
+  });
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    mode: "onChange",
+    defaultValues: {
+      alerts_zones: cameraConfig?.review.alerts.required_zones || [],
+      detections_zones: cameraConfig?.review.detections.required_zones || [],
+    },
+  });
+
+  const watchedAlertsZones = form.watch("alerts_zones");
+  const watchedDetectionsZones = form.watch("detections_zones");
+
+  const { payload: alertsState, send: sendAlerts } =
+    useAlertsState(selectedCamera);
+  const { payload: detectionsState, send: sendDetections } =
+    useDetectionsState(selectedCamera);
+
+  const { payload: objDescState, send: sendObjDesc } =
+    useObjectDescriptionState(selectedCamera);
+  const { payload: revDescState, send: sendRevDesc } =
+    useReviewDescriptionState(selectedCamera);
+
+  const handleCheckedChange = useCallback(
+    (isChecked: boolean) => {
+      if (!isChecked) {
+        form.reset({
+          alerts_zones: watchedAlertsZones,
+          detections_zones: [],
+        });
+      }
+      setChangedValue(true);
+      setSelectDetections(isChecked as boolean);
+    },
+    // we know that these deps are correct
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [watchedAlertsZones],
+  );
+
+  const saveToConfig = useCallback(
+    async (
+      { alerts_zones, detections_zones }: CameraReviewSettingsValueType, // values submitted via the form
+    ) => {
+      const createQuery = (zones: string[], type: "alerts" | "detections") =>
+        zones.length
+          ? zones
+              .map(
+                (zone) =>
+                  `&cameras.${selectedCamera}.review.${type}.required_zones=${zone}`,
+              )
+              .join("")
+          : cameraConfig?.review[type]?.required_zones &&
+              cameraConfig?.review[type]?.required_zones.length > 0
+            ? `&cameras.${selectedCamera}.review.${type}.required_zones`
+            : "";
+
+      const alertQueries = createQuery(alerts_zones, "alerts");
+      const detectionQueries = createQuery(detections_zones, "detections");
+
+      axios
+        .put(`config/set?${alertQueries}${detectionQueries}`, {
+          requires_restart: 0,
+        })
+        .then((res) => {
+          if (res.status === 200) {
+            toast.success(
+              t("cameraReview.reviewClassification.toast.success"),
+              {
+                position: "top-center",
+              },
+            );
+            updateConfig();
+          } else {
+            toast.error(
+              t("toast.save.error.title", {
+                errorMessage: res.statusText,
+                ns: "common",
+              }),
+              {
+                position: "top-center",
+              },
+            );
+          }
+        })
+        .catch((error) => {
+          const errorMessage =
+            error.response?.data?.message ||
+            error.response?.data?.detail ||
+            "Unknown error";
+          toast.error(
+            t("toast.save.error.title", {
+              errorMessage,
+              ns: "common",
+            }),
+            {
+              position: "top-center",
+            },
+          );
+        })
+        .finally(() => {
+          setIsLoading(false);
+        });
+    },
+    [updateConfig, setIsLoading, selectedCamera, cameraConfig, t],
+  );
+
+  const onCancel = useCallback(() => {
+    if (!cameraConfig) {
+      return;
+    }
+
+    setChangedValue(false);
+    setUnsavedChanges(false);
+    removeMessage(
+      "camera_settings",
+      `review_classification_settings_${selectedCamera}`,
+    );
+    form.reset({
+      alerts_zones: cameraConfig?.review.alerts.required_zones ?? [],
+      detections_zones: cameraConfig?.review.detections.required_zones || [],
+    });
+    setSelectDetections(
+      !!cameraConfig?.review.detections.required_zones?.length,
+    );
+    // we know that these deps are correct
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [removeMessage, selectedCamera, setUnsavedChanges, cameraConfig]);
+
+  useEffect(() => {
+    onCancel();
+    // we know that these deps are correct
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedCamera]);
+
+  useEffect(() => {
+    if (changedValue) {
+      addMessage(
+        "camera_settings",
+        t("cameraReview.reviewClassification.unsavedChanges", {
+          camera: selectedCamera,
+        }),
+        undefined,
+        `review_classification_settings_${selectedCamera}`,
+      );
+    } else {
+      removeMessage(
+        "camera_settings",
+        `review_classification_settings_${selectedCamera}`,
+      );
+    }
+    // we know that these deps are correct
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [changedValue, selectedCamera]);
+
+  function onSubmit(values: z.infer<typeof formSchema>) {
+    setIsLoading(true);
+
+    saveToConfig(values as CameraReviewSettingsValueType);
+  }
+
+  useEffect(() => {
+    document.title = t("documentTitle.cameraReview");
+  }, [t]);
+
+  // Handle back navigation from add/edit form
+  const handleBack = useCallback(() => {
+    setViewMode("settings");
+    setEditCameraName(undefined);
+    updateConfig();
+  }, [updateConfig]);
+
+  if (!cameraConfig && !selectedCamera && viewMode === "settings") {
+    return <ActivityIndicator />;
+  }
+
+  return (
+    <>
+      <div className="flex size-full flex-col md:flex-row">
+        <Toaster position="top-center" closeButton={true} />
+        <div className="scrollbar-container order-last mb-10 mt-2 flex h-full w-full flex-col overflow-y-auto pb-2 md:order-none">
+          {viewMode === "settings" ? (
+            <>
+              <Heading as="h4" className="mb-2">
+                {t("cameraReview.title")}
+              </Heading>
+
+              <Heading as="h4" className="my-2">
+                <Trans ns="views/settings">cameraReview.review.title</Trans>
+              </Heading>
+
+              <div className="mb-5 mt-2 flex max-w-5xl flex-col gap-2 space-y-3 text-sm text-primary-variant">
+                <div className="flex flex-row items-center">
+                  <Switch
+                    id="alerts-enabled"
+                    className="mr-3"
+                    checked={alertsState == "ON"}
+                    onCheckedChange={(isChecked) => {
+                      sendAlerts(isChecked ? "ON" : "OFF");
+                    }}
+                  />
+                  <div className="space-y-0.5">
+                    <Label htmlFor="alerts-enabled">
+                      <Trans ns="views/settings">
+                        cameraReview.review.alerts
+                      </Trans>
+                    </Label>
+                  </div>
+                </div>
+                <div className="flex flex-col">
+                  <div className="flex flex-row items-center">
+                    <Switch
+                      id="detections-enabled"
+                      className="mr-3"
+                      checked={detectionsState == "ON"}
+                      onCheckedChange={(isChecked) => {
+                        sendDetections(isChecked ? "ON" : "OFF");
+                      }}
+                    />
+                    <div className="space-y-0.5">
+                      <Label htmlFor="detections-enabled">
+                        <Trans ns="views/settings">
+                          camera.review.detections
+                        </Trans>
+                      </Label>
+                    </div>
+                  </div>
+                  <div className="mt-3 text-sm text-muted-foreground">
+                    <Trans ns="views/settings">cameraReview.review.desc</Trans>
+                  </div>
+                </div>
+              </div>
+              {cameraConfig?.objects?.genai?.enabled_in_config && (
+                <>
+                  <Separator className="my-2 flex bg-secondary" />
+
+                  <Heading as="h4" className="my-2">
+                    <Trans ns="views/settings">
+                      cameraReview.object_descriptions.title
+                    </Trans>
+                  </Heading>
+
+                  <div className="mb-5 mt-2 flex max-w-5xl flex-col gap-2 space-y-3 text-sm text-primary-variant">
+                    <div className="flex flex-row items-center">
+                      <Switch
+                        id="alerts-enabled"
+                        className="mr-3"
+                        checked={objDescState == "ON"}
+                        onCheckedChange={(isChecked) => {
+                          sendObjDesc(isChecked ? "ON" : "OFF");
+                        }}
+                      />
+                      <div className="space-y-0.5">
+                        <Label htmlFor="genai-enabled">
+                          <Trans>button.enabled</Trans>
+                        </Label>
+                      </div>
+                    </div>
+                    <div className="mt-3 text-sm text-muted-foreground">
+                      <Trans ns="views/settings">
+                        cameraReview.object_descriptions.desc
+                      </Trans>
+                    </div>
+                  </div>
+                </>
+              )}
+
+              {cameraConfig?.review?.genai?.enabled_in_config && (
+                <>
+                  <Separator className="my-2 flex bg-secondary" />
+
+                  <Heading as="h4" className="my-2">
+                    <Trans ns="views/settings">
+                      cameraReview.review_descriptions.title
+                    </Trans>
+                  </Heading>
+
+                  <div className="mb-5 mt-2 flex max-w-5xl flex-col gap-2 space-y-3 text-sm text-primary-variant">
+                    <div className="flex flex-row items-center">
+                      <Switch
+                        id="alerts-enabled"
+                        className="mr-3"
+                        checked={revDescState == "ON"}
+                        onCheckedChange={(isChecked) => {
+                          sendRevDesc(isChecked ? "ON" : "OFF");
+                        }}
+                      />
+                      <div className="space-y-0.5">
+                        <Label htmlFor="genai-enabled">
+                          <Trans>button.enabled</Trans>
+                        </Label>
+                      </div>
+                    </div>
+                    <div className="mt-3 text-sm text-muted-foreground">
+                      <Trans ns="views/settings">
+                        cameraReview.review_descriptions.desc
+                      </Trans>
+                    </div>
+                  </div>
+                </>
+              )}
+
+              <Separator className="my-2 flex bg-secondary" />
+
+              <Heading as="h4" className="my-2">
+                <Trans ns="views/settings">
+                  cameraReview.reviewClassification.title
+                </Trans>
+              </Heading>
+
+              <div className="max-w-6xl">
+                <div className="mb-5 mt-2 flex max-w-5xl flex-col gap-2 text-sm text-primary-variant">
+                  <p>
+                    <Trans ns="views/settings">
+                      cameraReview.reviewClassification.desc
+                    </Trans>
+                  </p>
+                  <div className="flex items-center text-primary">
+                    <Link
+                      to={getLocaleDocUrl("configuration/review")}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="inline"
+                    >
+                      {t("readTheDocumentation", { ns: "common" })}
+                      <LuExternalLink className="ml-2 inline-flex size-3" />
+                    </Link>
+                  </div>
+                </div>
+              </div>
+
+              <Form {...form}>
+                <form
+                  onSubmit={form.handleSubmit(onSubmit)}
+                  className="mt-2 space-y-6"
+                >
+                  <div
+                    className={cn(
+                      "w-full max-w-5xl space-y-0",
+                      zones &&
+                        zones?.length > 0 &&
+                        "grid items-start gap-5 md:grid-cols-2",
+                    )}
+                  >
+                    <FormField
+                      control={form.control}
+                      name="alerts_zones"
+                      render={() => (
+                        <FormItem>
+                          {zones && zones?.length > 0 ? (
+                            <>
+                              <div className="mb-2">
+                                <FormLabel className="flex flex-row items-center text-base">
+                                  <Trans ns="views/settings">
+                                    camera.review.alerts
+                                  </Trans>
+                                  <MdCircle className="ml-3 size-2 text-severity_alert" />
+                                </FormLabel>
+                                <FormDescription>
+                                  <Trans ns="views/settings">
+                                    cameraReview.reviewClassification.selectAlertsZones
+                                  </Trans>
+                                </FormDescription>
+                              </div>
+                              <div className="max-w-md rounded-lg bg-secondary p-4 md:max-w-full">
+                                {zones?.map((zone) => (
+                                  <FormField
+                                    key={zone.name}
+                                    control={form.control}
+                                    name="alerts_zones"
+                                    render={({ field }) => (
+                                      <FormItem
+                                        key={zone.name}
+                                        className="mb-3 flex flex-row items-center space-x-3 space-y-0 last:mb-0"
+                                      >
+                                        <FormControl>
+                                          <Checkbox
+                                            className="size-5 text-white accent-white data-[state=checked]:bg-selected data-[state=checked]:text-white"
+                                            checked={field.value?.includes(
+                                              zone.name,
+                                            )}
+                                            onCheckedChange={(checked) => {
+                                              setChangedValue(true);
+                                              return checked
+                                                ? field.onChange([
+                                                    ...field.value,
+                                                    zone.name,
+                                                  ])
+                                                : field.onChange(
+                                                    field.value?.filter(
+                                                      (value) =>
+                                                        value !== zone.name,
+                                                    ),
+                                                  );
+                                            }}
+                                          />
+                                        </FormControl>
+                                        <FormLabel
+                                          className={cn(
+                                            "font-normal",
+                                            !zone.friendly_name &&
+                                              "smart-capitalize",
+                                          )}
+                                        >
+                                          {zone.friendly_name || zone.name}
+                                        </FormLabel>
+                                      </FormItem>
+                                    )}
+                                  />
+                                ))}
+                              </div>
+                            </>
+                          ) : (
+                            <div className="font-normal text-destructive">
+                              <Trans ns="views/settings">
+                                cameraReview.reviewClassification.noDefinedZones
+                              </Trans>
+                            </div>
+                          )}
+                          <FormMessage />
+                          <div className="text-sm">
+                            {watchedAlertsZones && watchedAlertsZones.length > 0
+                              ? t(
+                                  "cameraReview.reviewClassification.zoneObjectAlertsTips",
+                                  {
+                                    alertsLabels,
+                                    zone: formatList(
+                                      watchedAlertsZones.map((zone) =>
+                                        getZoneName(zone),
+                                      ),
+                                    ),
+                                    cameraName: selectCameraName,
+                                  },
+                                )
+                              : t(
+                                  "cameraReview.reviewClassification.objectAlertsTips",
+                                  {
+                                    alertsLabels,
+                                    cameraName: selectCameraName,
+                                  },
+                                )}
+                          </div>
+                        </FormItem>
+                      )}
+                    />
+
+                    <FormField
+                      control={form.control}
+                      name="detections_zones"
+                      render={() => (
+                        <FormItem>
+                          {zones && zones?.length > 0 && (
+                            <>
+                              <div className="mb-2">
+                                <FormLabel className="flex flex-row items-center text-base">
+                                  <Trans ns="views/settings">
+                                    camera.review.detections
+                                  </Trans>
+                                  <MdCircle className="ml-3 size-2 text-severity_detection" />
+                                </FormLabel>
+                                {selectDetections && (
+                                  <FormDescription>
+                                    <Trans ns="views/settings">
+                                      cameraReview.reviewClassification.selectDetectionsZones
+                                    </Trans>
+                                  </FormDescription>
+                                )}
+                              </div>
+
+                              {selectDetections && (
+                                <div className="max-w-md rounded-lg bg-secondary p-4 md:max-w-full">
+                                  {zones?.map((zone) => (
+                                    <FormField
+                                      key={zone.name}
+                                      control={form.control}
+                                      name="detections_zones"
+                                      render={({ field }) => (
+                                        <FormItem
+                                          key={zone.name}
+                                          className="mb-3 flex flex-row items-center space-x-3 space-y-0 last:mb-0"
+                                        >
+                                          <FormControl>
+                                            <Checkbox
+                                              className="size-5 text-white accent-white data-[state=checked]:bg-selected data-[state=checked]:text-white"
+                                              checked={field.value?.includes(
+                                                zone.name,
+                                              )}
+                                              onCheckedChange={(checked) => {
+                                                return checked
+                                                  ? field.onChange([
+                                                      ...field.value,
+                                                      zone.name,
+                                                    ])
+                                                  : field.onChange(
+                                                      field.value?.filter(
+                                                        (value) =>
+                                                          value !== zone.name,
+                                                      ),
+                                                    );
+                                              }}
+                                            />
+                                          </FormControl>
+                                          <FormLabel
+                                            className={cn(
+                                              "font-normal",
+                                              !zone.friendly_name &&
+                                                "smart-capitalize",
+                                            )}
+                                          >
+                                            {zone.friendly_name || zone.name}
+                                          </FormLabel>
+                                        </FormItem>
+                                      )}
+                                    />
+                                  ))}
+                                </div>
+                              )}
+                              <FormMessage />
+
+                              <div className="mb-0 flex flex-row items-center gap-2">
+                                <Checkbox
+                                  id="select-detections"
+                                  className="size-5 text-white accent-white data-[state=checked]:bg-selected data-[state=checked]:text-white"
+                                  checked={selectDetections}
+                                  onCheckedChange={handleCheckedChange}
+                                />
+                                <div className="grid gap-1.5 leading-none">
+                                  <label
+                                    htmlFor="select-detections"
+                                    className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                                  >
+                                    <Trans ns="views/settings">
+                                      cameraReview.reviewClassification.limitDetections
+                                    </Trans>
+                                  </label>
+                                </div>
+                              </div>
+                            </>
+                          )}
+
+                          <div className="text-sm">
+                            {watchedDetectionsZones &&
+                            watchedDetectionsZones.length > 0 ? (
+                              !selectDetections ? (
+                                <Trans
+                                  i18nKey="cameraReview.reviewClassification.zoneObjectDetectionsTips.text"
+                                  values={{
+                                    detectionsLabels,
+                                    zone: formatList(
+                                      watchedDetectionsZones.map((zone) =>
+                                        getZoneName(zone),
+                                      ),
+                                    ),
+                                    cameraName: selectCameraName,
+                                  }}
+                                  ns="views/settings"
+                                />
+                              ) : (
+                                <Trans
+                                  i18nKey="cameraReview.reviewClassification.zoneObjectDetectionsTips.notSelectDetections"
+                                  values={{
+                                    detectionsLabels,
+                                    zone: formatList(
+                                      watchedDetectionsZones.map((zone) =>
+                                        getZoneName(zone),
+                                      ),
+                                    ),
+                                    cameraName: selectCameraName,
+                                  }}
+                                  ns="views/settings"
+                                />
+                              )
+                            ) : (
+                              <Trans
+                                i18nKey="cameraReview.reviewClassification.objectDetectionsTips"
+                                values={{
+                                  detectionsLabels,
+                                  cameraName: selectCameraName,
+                                }}
+                                ns="views/settings"
+                              />
+                            )}
+                          </div>
+                        </FormItem>
+                      )}
+                    />
+                  </div>
+                  <Separator className="my-2 flex bg-secondary" />
+
+                  <div className="flex w-full flex-row items-center gap-2 pt-2 md:w-[25%]">
+                    <Button
+                      className="flex flex-1"
+                      aria-label={t("button.reset", { ns: "common" })}
+                      onClick={onCancel}
+                      type="button"
+                    >
+                      <Trans>button.reset</Trans>
+                    </Button>
+                    <Button
+                      variant="select"
+                      disabled={isLoading}
+                      className="flex flex-1"
+                      aria-label={t("button.save", { ns: "common" })}
+                      type="submit"
+                    >
+                      {isLoading ? (
+                        <div className="flex flex-row items-center gap-2">
+                          <ActivityIndicator />
+                          <span>
+                            <Trans>button.saving</Trans>
+                          </span>
+                        </div>
+                      ) : (
+                        <Trans>button.save</Trans>
+                      )}
+                    </Button>
+                  </div>
+                </form>
+              </Form>
+            </>
+          ) : (
+            <>
+              <div className="mb-4 flex items-center gap-2">
+                <Button
+                  className={`flex items-center gap-2.5 rounded-lg`}
+                  aria-label={t("label.back", { ns: "common" })}
+                  size="sm"
+                  onClick={handleBack}
+                >
+                  <IoMdArrowRoundBack className="size-5 text-secondary-foreground" />
+                  {isDesktop && (
+                    <div className="text-primary">
+                      {t("button.back", { ns: "common" })}
+                    </div>
+                  )}
+                </Button>
+              </div>
+              <div className="md:max-w-5xl">
+                <CameraEditForm
+                  cameraName={viewMode === "edit" ? editCameraName : undefined}
+                  onSave={handleBack}
+                  onCancel={handleBack}
+                />
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+
+      <CameraWizardDialog
+        open={showWizard}
+        onClose={() => setShowWizard(false)}
+      />
+    </>
+  );
+}

web/src/views/settings/UiSettingsView.tsx

@@ -157,7 +157,7 @@ export default function UiSettingsView() {
                   checked={cameraNames}
                   onCheckedChange={setCameraName}
                 />
-                <Label className="cursor-pointer" htmlFor="camera-names">
+                <Label className="cursor-pointer" htmlFor="auto-live">
                   {t("general.liveDashboard.displayCameraNames.label")}
                 </Label>
               </div>