refactor settings to be consistent with other page structure

web/src/pages/Settings.tsx

@@ -17,8 +17,6 @@ import {
 } from "@/components/ui/alert-dialog";
 import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
 import { Drawer, DrawerContent, DrawerTrigger } from "@/components/ui/drawer";
-import MotionTuner from "@/components/settings/MotionTuner";
-import MasksAndZones from "@/components/settings/MasksAndZones";
 import { Button } from "@/components/ui/button";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import useOptimisticState from "@/hooks/use-optimistic-state";
@@ -26,14 +24,16 @@ import { isMobile } from "react-device-detect";
 import { FaVideo } from "react-icons/fa";
 import { CameraConfig, FrigateConfig } from "@/types/frigateConfig";
 import useSWR from "swr";
-import General from "@/components/settings/General";
 import FilterSwitch from "@/components/filter/FilterSwitch";
 import { ZoneMaskFilterButton } from "@/components/filter/ZoneMaskFilter";
 import { PolygonType } from "@/types/canvas";
-import ObjectSettings from "@/components/settings/ObjectSettings";
 import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
 import scrollIntoView from "scroll-into-view-if-needed";
 import Authentication from "@/components/settings/Authentication";
+import GeneralSettingsView from "@/views/settings/GeneralSettingsVIew";
+import ObjectSettingsView from "@/views/settings/ObjectSettingsView";
+import MotionTunerView from "@/views/settings/MotionTunerView";
+import MasksAndZonesView from "@/views/settings/MasksAndZonesView";
 
 export default function Settings() {
   const settingsViews = [
@@ -156,17 +156,19 @@ export default function Settings() {
         )}
       </div>
       <div className="mt-2 flex h-full w-full flex-col items-start md:h-dvh md:pb-24">
-        {page == "general" && <General />}
-        {page == "debug" && <ObjectSettings selectedCamera={selectedCamera} />}
+        {page == "general" && <GeneralSettingsView />}
+        {page == "debug" && (
+          <ObjectSettingsView selectedCamera={selectedCamera} />
+        )}
         {page == "masks / zones" && (
-          <MasksAndZones
+          <MasksAndZonesView
             selectedCamera={selectedCamera}
             selectedZoneMask={filterZoneMask}
             setUnsavedChanges={setUnsavedChanges}
           />
         )}
         {page == "motion tuner" && (
-          <MotionTuner
+          <MotionTunerView
             selectedCamera={selectedCamera}
             setUnsavedChanges={setUnsavedChanges}
           />

web/src/views/settings/GeneralSettingsVIew.tsx

@@ -4,8 +4,8 @@ import { Switch } from "@/components/ui/switch";
 import { useCallback, useEffect } from "react";
 import { Toaster } from "sonner";
 import { toast } from "sonner";
-import { Separator } from "../ui/separator";
-import { Button } from "../ui/button";
+import { Separator } from "../../components/ui/separator";
+import { Button } from "../../components/ui/button";
 import useSWR from "swr";
 import { FrigateConfig } from "@/types/frigateConfig";
 import { del as delData } from "idb-keyval";
@@ -17,11 +17,11 @@ import {
   SelectGroup,
   SelectItem,
   SelectTrigger,
-} from "../ui/select";
+} from "../../components/ui/select";
 
 const PLAYBACK_RATE_DEFAULT = isSafari ? [0.5, 1, 2] : [0.5, 1, 2, 4, 8, 16];
 
-export default function General() {
+export default function GeneralSettingsView() {
   const { data: config } = useSWR<FrigateConfig>("config");
 
   const clearStoredLayouts = useCallback(() => {

web/src/views/settings/MasksAndZonesView.tsx

@@ -12,7 +12,7 @@ import {
 import { PolygonCanvas } from "./PolygonCanvas";
 import { Polygon, PolygonType } from "@/types/canvas";
 import { interpolatePoints, parseCoordinates } from "@/utils/canvasUtil";
-import { Skeleton } from "../ui/skeleton";
+import { Skeleton } from "@/components/ui/skeleton";
 import { useResizeObserver } from "@/hooks/resize-observer";
 import { LuExternalLink, LuPlus } from "react-icons/lu";
 import {
@@ -22,29 +22,33 @@ import {
 } from "@/components/ui/hover-card";
 import copy from "copy-to-clipboard";
 import { toast } from "sonner";
-import { Toaster } from "../ui/sonner";
-import { Button } from "../ui/button";
-import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
-import Heading from "../ui/heading";
-import ZoneEditPane from "./ZoneEditPane";
-import MotionMaskEditPane from "./MotionMaskEditPane";
-import ObjectMaskEditPane from "./ObjectMaskEditPane";
-import PolygonItem from "./PolygonItem";
+import { Toaster } from "@/components/ui/sonner";
+import { Button } from "@/components/ui/button";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import Heading from "@/components/ui/heading";
+import ZoneEditPane from "@/components/settings/ZoneEditPane";
+import MotionMaskEditPane from "@/components/settings/MotionMaskEditPane";
+import ObjectMaskEditPane from "@/components/settings/ObjectMaskEditPane";
+import PolygonItem from "@/components/settings/PolygonItem";
 import { Link } from "react-router-dom";
 import { isDesktop } from "react-device-detect";
 import { StatusBarMessagesContext } from "@/context/statusbar-provider";
 
-type MasksAndZoneProps = {
+type MasksAndZoneViewProps = {
   selectedCamera: string;
   selectedZoneMask?: PolygonType[];
   setUnsavedChanges: React.Dispatch<React.SetStateAction<boolean>>;
 };
 
-export default function MasksAndZones({
+export default function MasksAndZonesView({
   selectedCamera,
   selectedZoneMask,
   setUnsavedChanges,
-}: MasksAndZoneProps) {
+}: MasksAndZoneViewProps) {
   const { data: config } = useSWR<FrigateConfig>("config");
   const [allPolygons, setAllPolygons] = useState<Polygon[]>([]);
   const [editingPolygons, setEditingPolygons] = useState<Polygon[]>([]);

web/src/views/settings/MotionTunerView.tsx

@@ -12,17 +12,17 @@ import {
   useMotionContourArea,
   useMotionThreshold,
 } from "@/api/ws";
-import { Skeleton } from "../ui/skeleton";
-import { Button } from "../ui/button";
-import { Switch } from "../ui/switch";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Button } from "@/components/ui/button";
+import { Switch } from "@/components/ui/switch";
 import { Toaster } from "@/components/ui/sonner";
 import { toast } from "sonner";
-import { Separator } from "../ui/separator";
+import { Separator } from "@/components/ui/separator";
 import { Link } from "react-router-dom";
 import { LuExternalLink } from "react-icons/lu";
 import { StatusBarMessagesContext } from "@/context/statusbar-provider";
 
-type MotionTunerProps = {
+type MotionTunerViewProps = {
   selectedCamera: string;
   setUnsavedChanges: React.Dispatch<React.SetStateAction<boolean>>;
 };
@@ -33,10 +33,10 @@ type MotionSettings = {
   improve_contrast?: boolean;
 };
 
-export default function MotionTuner({
+export default function MotionTunerView({
   selectedCamera,
   setUnsavedChanges,
-}: MotionTunerProps) {
+}: MotionTunerViewProps) {
   const { data: config, mutate: updateConfig } =
     useSWR<FrigateConfig>("config");
   const [changedValue, setChangedValue] = useState(false);

web/src/views/settings/ObjectSettingsView.tsx

@@ -5,19 +5,19 @@ import { CameraConfig, FrigateConfig } from "@/types/frigateConfig";
 import { Toaster } from "@/components/ui/sonner";
 import { Label } from "@/components/ui/label";
 import useSWR from "swr";
-import Heading from "../ui/heading";
-import { Switch } from "../ui/switch";
+import Heading from "@/components/ui/heading";
+import { Switch } from "@/components/ui/switch";
 import { usePersistence } from "@/hooks/use-persistence";
-import { Skeleton } from "../ui/skeleton";
+import { Skeleton } from "@/components/ui/skeleton";
 import { useCameraActivity } from "@/hooks/use-camera-activity";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { ObjectType } from "@/types/ws";
 import useDeepMemo from "@/hooks/use-deep-memo";
-import { Card } from "../ui/card";
+import { Card } from "@/components/ui/card";
 import { getIconForLabel } from "@/utils/iconUtil";
 import { capitalizeFirstLetter } from "@/utils/stringUtil";
 
-type ObjectSettingsProps = {
+type ObjectSettingsViewProps = {
   selectedCamera?: string;
 };
 
@@ -25,9 +25,9 @@ type Options = { [key: string]: boolean };
 
 const emptyObject = Object.freeze({});
 
-export default function ObjectSettings({
+export default function ObjectSettingsView({
   selectedCamera,
-}: ObjectSettingsProps) {
+}: ObjectSettingsViewProps) {
   const { data: config } = useSWR<FrigateConfig>("config");
 
   const DEBUG_OPTIONS = [