Add page titles for settings views

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">