Various bugfixes and improvements (#11624)

* various bugfixes and improvements

* add separator

* no separator

web/src/components/settings/MotionMaskEditPane.tsx

@@ -131,13 +131,16 @@ export default function MotionMaskEditPane({
 
     axios
       .put(`config/set?${queryString}`, {
-        requires_restart: 1,
+        requires_restart: 0,
       })
       .then((res) => {
         if (res.status === 200) {
-          toast.success(`${polygon.name || "Motion Mask"} has been saved.`, {
-            position: "top-center",
-          });
+          toast.success(
+            `${polygon.name || "Motion Mask"} has been saved. Restart Frigate to apply changes.`,
+            {
+              position: "top-center",
+            },
+          );
           updateConfig();
         } else {
           toast.error(`Failed to save config changes: ${res.statusText}`, {

web/src/components/settings/ObjectMaskEditPane.tsx

@@ -189,13 +189,16 @@ export default function ObjectMaskEditPane({
 
       axios
         .put(`config/set?${queryString}`, {
-          requires_restart: 1,
+          requires_restart: 0,
         })
         .then((res) => {
           if (res.status === 200) {
-            toast.success(`${polygon.name || "Object Mask"} has been saved.`, {
-              position: "top-center",
-            });
+            toast.success(
+              `${polygon.name || "Object Mask"} has been saved. Restart Frigate to apply changes.`,
+              {
+                position: "top-center",
+              },
+            );
             updateConfig();
           } else {
             toast.error(`Failed to save config changes: ${res.statusText}`, {

web/src/components/settings/ZoneEditPane.tsx

@@ -197,7 +197,7 @@ export default function ZoneEditPane({
           await axios.put(
             `config/set?cameras.${polygon.camera}.zones.${polygon.name}${renameAlertQueries}${renameDetectionQueries}`,
             {
-              requires_restart: 1,
+              requires_restart: 0,
             },
           );
 
@@ -257,13 +257,16 @@ export default function ZoneEditPane({
       axios
         .put(
           `config/set?cameras.${polygon?.camera}.zones.${zoneName}.coordinates=${coordinates}${inertiaQuery}${loiteringTimeQuery}${objectQueries}${alertQueries}${detectionQueries}`,
-          { requires_restart: 1 },
+          { requires_restart: 0 },
         )
         .then((res) => {
           if (res.status === 200) {
-            toast.success(`Zone (${zoneName}) has been saved.`, {
-              position: "top-center",
-            });
+            toast.success(
+              `Zone (${zoneName}) has been saved. Restart Frigate to apply changes.`,
+              {
+                position: "top-center",
+              },
+            );
             updateConfig();
           } else {
             toast.error(`Failed to save config changes: ${res.statusText}`, {

web/src/components/timeline/MotionSegment.tsx

@@ -7,6 +7,7 @@ import { MinimapBounds, Tick, Timestamp } from "./segment-metadata";
 import { useMotionSegmentUtils } from "@/hooks/use-motion-segment-utils";
 import { isDesktop, isMobile } from "react-device-detect";
 import useTapUtils from "@/hooks/use-tap-utils";
+import { cn } from "@/lib/utils";
 
 type MotionSegmentProps = {
   events: ReviewSegment[];
@@ -170,7 +171,16 @@ export function MotionSegment({
         <div
           key={segmentKey}
           data-segment-id={segmentKey}
-          className={`segment ${firstHalfSegmentWidth > 0 || secondHalfSegmentWidth > 0 ? "has-data" : ""} ${segmentClasses}  bg-gradient-to-r ${severityColorsBg[severity[0]]}`}
+          className={cn(
+            "segment",
+            {
+              "has-data":
+                firstHalfSegmentWidth > 0 || secondHalfSegmentWidth > 0,
+            },
+            segmentClasses,
+            severity[0] && "bg-gradient-to-r",
+            severity[0] && severityColorsBg[severity[0]],
+          )}
           onClick={segmentClick}
           onTouchEnd={(event) => handleTouchStart(event, segmentClick)}
         >
@@ -210,7 +220,14 @@ export function MotionSegment({
                 <div
                   key={`${segmentKey}_motion_data_1`}
                   data-motion-value={secondHalfSegmentWidth}
-                  className={`${isDesktop && animationClassesSecondHalf} h-[2px] rounded-full bg-motion_review`}
+                  className={cn(
+                    isDesktop && animationClassesSecondHalf,
+                    "h-[2px]",
+                    "rounded-full",
+                    secondHalfSegmentWidth
+                      ? "bg-motion_review"
+                      : "bg-muted-foreground",
+                  )}
                   style={{
                     width: secondHalfSegmentWidth || 1,
                   }}
@@ -223,7 +240,14 @@ export function MotionSegment({
                 <div
                   key={`${segmentKey}_motion_data_2`}
                   data-motion-value={firstHalfSegmentWidth}
-                  className={`${isDesktop && animationClassesFirstHalf} h-[2px] rounded-full bg-motion_review`}
+                  className={cn(
+                    isDesktop && animationClassesFirstHalf,
+                    "h-[2px]",
+                    "rounded-full",
+                    firstHalfSegmentWidth
+                      ? "bg-motion_review"
+                      : "bg-muted-foreground",
+                  )}
                   style={{
                     width: firstHalfSegmentWidth || 1,
                   }}