-
-
+
+
+
+
);
}
-export default ZoneControls;
+export default NewZoneButton;
diff --git a/web/src/components/settings/PolygonDrawer.tsx b/web/src/components/settings/PolygonDrawer.tsx
index bb3a52a27..87adf112a 100644
--- a/web/src/components/settings/PolygonDrawer.tsx
+++ b/web/src/components/settings/PolygonDrawer.tsx
@@ -1,6 +1,6 @@
import { useCallback, useState } from "react";
import { Line, Circle, Group } from "react-konva";
-import { minMax, dragBoundFunc } from "@/utils/canvasUtil";
+import { minMax, toRGBColorString, dragBoundFunc } from "@/utils/canvasUtil";
import type { KonvaEventObject } from "konva/lib/Node";
import Konva from "konva";
import { Vector2d } from "konva/lib/types";
@@ -78,11 +78,7 @@ export default function PolygonDrawer({
const colorString = useCallback(
(darkened: boolean) => {
- if (color.length !== 3) {
- return "rgb(220,0,0,0.5)";
- }
-
- return `rgba(${color[2]},${color[1]},${color[0]},${darkened ? "0.8" : "0.5"})`;
+ return toRGBColorString(color, darkened);
},
[color],
);
diff --git a/web/src/components/ui/separator.tsx b/web/src/components/ui/separator.tsx
new file mode 100644
index 000000000..6d7f12265
--- /dev/null
+++ b/web/src/components/ui/separator.tsx
@@ -0,0 +1,29 @@
+import * as React from "react"
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+
+import { cn } from "@/lib/utils"
+
+const Separator = React.forwardRef<
+ React.ElementRef
,
+ React.ComponentPropsWithoutRef
+>(
+ (
+ { className, orientation = "horizontal", decorative = true, ...props },
+ ref
+ ) => (
+
+ )
+)
+Separator.displayName = SeparatorPrimitive.Root.displayName
+
+export { Separator }
diff --git a/web/src/pages/Settings.tsx b/web/src/pages/Settings.tsx
index 9838cd9e5..40c1ef5cb 100644
--- a/web/src/pages/Settings.tsx
+++ b/web/src/pages/Settings.tsx
@@ -1,75 +1,191 @@
-import Heading from "@/components/ui/heading";
-import { Label } from "@/components/ui/label";
import {
- Select,
- SelectContent,
- SelectGroup,
- SelectItem,
- SelectLabel,
- SelectTrigger,
- SelectValue,
-} from "@/components/ui/select";
-import { Switch } from "@/components/ui/switch";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuLabel,
+ DropdownMenuSeparator,
+ DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+// import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
+import { Drawer, DrawerContent, DrawerTrigger } from "@/components/ui/drawer";
import MotionTuner from "@/components/settings/MotionTuner";
-import SettingsZones from "@/components/settings/Zones";
+import MasksAndZones from "@/components/settings/MasksAndZones";
+import { Button } from "@/components/ui/button";
+import { useMemo, useState } from "react";
+import useOptimisticState from "@/hooks/use-optimistic-state";
+import Logo from "@/components/Logo";
+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 FilterCheckBox from "@/components/filter/FilterCheckBox";
-function General() {
- return (
- <>
- Settings
-
-
{}} />
-
+type CameraSelectButtonProps = {
+ allCameras: CameraConfig[];
+ selectedCamera: string;
+ setSelectedCamera: React.Dispatch>;
+};
+
+function CameraSelectButton({
+ allCameras,
+ selectedCamera,
+ setSelectedCamera,
+}: CameraSelectButtonProps) {
+ const [open, setOpen] = useState(false);
+
+ const trigger = (
+