add page titles for settings views (#11132)

web/src/components/settings/General.tsx

@@ -10,8 +10,13 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { Switch } from "@/components/ui/switch";
+import { useEffect } from "react";
 
 export default function General() {
+  useEffect(() => {
+    document.title = "General Settings - Frigate";
+  }, []);
+
   return (
     <>
       <Heading as="h2">Settings</Heading>

web/src/components/settings/MasksAndZones.tsx

@@ -171,6 +171,7 @@ export default function MasksAndZones({
     setActivePolygonIndex(undefined);
     setHoveredPolygonIndex(null);
     setUnsavedChanges(false);
+    document.title = "Mask and Zone Editor - Frigate";
   }, [allPolygons, setUnsavedChanges]);
 
   const handleSave = useCallback(() => {
@@ -353,6 +354,10 @@ export default function MasksAndZones({
     }
   }, [selectedCamera]);
 
+  useEffect(() => {
+    document.title = "Mask and Zone Editor - Frigate";
+  }, []);
+
   if (!cameraConfig && !selectedCamera) {
     return <ActivityIndicator />;
   }

web/src/components/settings/MotionMaskEditPane.tsx

@@ -2,7 +2,7 @@ import Heading from "../ui/heading";
 import { Separator } from "../ui/separator";
 import { Button } from "@/components/ui/button";
 import { Form, FormField, FormItem, FormMessage } from "@/components/ui/form";
-import { useCallback, useMemo } from "react";
+import { useCallback, useEffect, useMemo } from "react";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
@@ -173,6 +173,10 @@ export default function MotionMaskEditPane({
     }
   }
 
+  useEffect(() => {
+    document.title = "Edit Motion Mask - Frigate";
+  }, []);
+
   if (!polygon) {
     return;
   }

web/src/components/settings/MotionTuner.tsx

@@ -159,6 +159,10 @@ export default function MotionTuner({
     }
   }, [changedValue, addMessage, clearMessages]);
 
+  useEffect(() => {
+    document.title = "Motion Tuner - Frigate";
+  }, []);
+
   if (!cameraConfig && !selectedCamera) {
     return <ActivityIndicator />;
   }

web/src/components/settings/ObjectMaskEditPane.tsx

@@ -19,7 +19,7 @@ import {
   FormLabel,
   FormMessage,
 } from "@/components/ui/form";
-import { useCallback, useMemo } from "react";
+import { useCallback, useEffect, useMemo } from "react";
 import { ATTRIBUTE_LABELS, FrigateConfig } from "@/types/frigateConfig";
 import useSWR from "swr";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -235,6 +235,10 @@ export default function ObjectMaskEditPane({
     }
   }
 
+  useEffect(() => {
+    document.title = "Edit Object Mask - Frigate";
+  }, []);
+
   if (!polygon) {
     return;
   }

web/src/components/settings/ObjectSettings.tsx

@@ -1,4 +1,4 @@
-import { useMemo } from "react";
+import { useEffect, useMemo } from "react";
 import DebugCameraImage from "../camera/DebugCameraImage";
 import { FrigateConfig } from "@/types/frigateConfig";
 import useSWR from "swr";
@@ -19,6 +19,10 @@ export default function ObjectSettings({
     }
   }, [config, selectedCamera]);
 
+  useEffect(() => {
+    document.title = "Object Settings - Frigate";
+  }, []);
+
   if (!cameraConfig) {
     return <ActivityIndicator />;
   }

web/src/components/settings/ZoneEditPane.tsx

@@ -308,6 +308,10 @@ export default function ZoneEditPane({
     }
   }
 
+  useEffect(() => {
+    document.title = "Edit Zone - Frigate";
+  }, []);
+
   if (!polygon) {
     return;
   }

web/src/pages/Settings.tsx

@@ -100,6 +100,10 @@ export default function Settings() {
     }
   }, [tabsRef, pageToggle]);
 
+  useEffect(() => {
+    document.title = "Settings - Frigate";
+  }, []);
+
   return (
     <div className="size-full p-2 flex flex-col">
       <div className="w-full h-11 relative flex justify-between items-center">