Masks and zones improvements (#22163)

* migrator and runtime config changes

* component changes to use rasterized_mask

* frontend

* convert none to empty string for config save

* i18n

* update tests

* add enabled config to zones

* zones frontend

* i18n

* docs

* tweaks

* use dashed stroke to indicate disabled

* allow toggle from icon

* use filelock to ensure atomic config updates from endpoint

* enforce atomic config update in the frontend

* toggle via mqtt

* fix global object masks

* correctly handle global object masks in dispatcher

* ws hooks

* render masks and zones based on ws enabled state

* use enabled_in_config for zones and masks

* frontend for enabled_in_config

* tweaks

* i18n

* publish websocket on config save

* i18n tweaks

* pydantic title and description

* i18n generation

* tweaks

* fix typing

web/src/components/settings/ZoneEditPane.tsx

@@ -35,6 +35,7 @@ import { LuExternalLink } from "react-icons/lu";
 import { useDocDomain } from "@/hooks/use-doc-domain";
 import { getTranslatedLabel } from "@/utils/i18n";
 import NameAndIdFields from "../input/NameAndIdFields";
+import { useZoneState } from "@/api/ws";
 
 type ZoneEditPaneProps = {
   polygons?: Polygon[];
@@ -88,6 +89,11 @@ export default function ZoneEditPane({
     }
   }, [polygons, activePolygonIndex]);
 
+  const { send: sendZoneState } = useZoneState(
+    polygon?.camera || "",
+    polygon?.name || "",
+  );
+
   const cameraConfig = useMemo(() => {
     if (polygon?.camera && config) {
       return config.cameras[polygon.camera];
@@ -178,6 +184,7 @@ export default function ZoneEditPane({
             message: t("masksAndZones.form.zoneName.error.alreadyExists"),
           },
         ),
+      enabled: z.boolean().default(true),
       inertia: z.coerce
         .number()
         .min(1, {
@@ -271,6 +278,13 @@ export default function ZoneEditPane({
     defaultValues: {
       name: polygon?.name ?? "",
       friendly_name: polygon?.friendly_name ?? polygon?.name ?? "",
+      enabled:
+        polygon?.camera &&
+        polygon?.name &&
+        config?.cameras[polygon.camera]?.zones[polygon.name]?.enabled !==
+          undefined
+          ? config?.cameras[polygon.camera]?.zones[polygon.name]?.enabled
+          : (polygon?.enabled ?? true),
       inertia:
         polygon?.camera &&
         polygon?.name &&
@@ -311,6 +325,7 @@ export default function ZoneEditPane({
       {
         name: zoneName,
         friendly_name,
+        enabled,
         inertia,
         loitering_time,
         objects: form_objects,
@@ -445,9 +460,11 @@ export default function ZoneEditPane({
         friendlyNameQuery = `&cameras.${polygon?.camera}.zones.${zoneName}.friendly_name=${encodeURIComponent(friendly_name)}`;
       }
 
+      const enabledQuery = `&cameras.${polygon?.camera}.zones.${zoneName}.enabled=${enabled ? "True" : "False"}`;
+
       axios
         .put(
-          `config/set?cameras.${polygon?.camera}.zones.${zoneName}.coordinates=${coordinates}${inertiaQuery}${loiteringTimeQuery}${speedThresholdQuery}${distancesQuery}${objectQueries}${friendlyNameQuery}${alertQueries}${detectionQueries}`,
+          `config/set?cameras.${polygon?.camera}.zones.${zoneName}.coordinates=${coordinates}${enabledQuery}${inertiaQuery}${loiteringTimeQuery}${speedThresholdQuery}${distancesQuery}${objectQueries}${friendlyNameQuery}${alertQueries}${detectionQueries}`,
           {
             requires_restart: 0,
             update_topic: `config/cameras/${polygon.camera}/zones`,
@@ -464,6 +481,8 @@ export default function ZoneEditPane({
               },
             );
             updateConfig();
+            // Publish the enabled state through websocket
+            sendZoneState(enabled ? "ON" : "OFF");
           } else {
             toast.error(
               t("toast.save.error.title", {
@@ -504,6 +523,7 @@ export default function ZoneEditPane({
       setIsLoading,
       cameraConfig,
       t,
+      sendZoneState,
     ],
   );
 
@@ -581,6 +601,28 @@ export default function ZoneEditPane({
             nameDescription={t("masksAndZones.zones.name.tips")}
             placeholderName={t("masksAndZones.zones.name.inputPlaceHolder")}
           />
+          <FormField
+            control={form.control}
+            name="enabled"
+            render={({ field }) => (
+              <FormItem className="flex flex-row items-center justify-between gap-3">
+                <div className="space-y-0.5">
+                  <FormLabel>
+                    {t("masksAndZones.zones.enabled.title")}
+                  </FormLabel>
+                  <FormDescription>
+                    {t("masksAndZones.zones.enabled.description")}
+                  </FormDescription>
+                </div>
+                <FormControl>
+                  <Switch
+                    checked={field.value}
+                    onCheckedChange={field.onChange}
+                  />
+                </FormControl>
+              </FormItem>
+            )}
+          />
 
           <Separator className="my-2 flex bg-secondary" />
           <FormField