From ad87f5786e9f86baf806dd2c58a2b5f74850c3b0 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Sat, 4 May 2024 14:54:50 -0500
Subject: [PATCH] Misc UI fixes (#11237)

* add close button to all toasters

* check if persistent options are loaded

* add id to prevent message duplication in bottom bar
---
 .../components/filter/CameraGroupSelector.tsx |  6 +++-
 web/src/components/settings/MasksAndZones.tsx |  9 ++++--
 .../settings/MotionMaskEditPane.tsx           |  2 +-
 web/src/components/settings/MotionTuner.tsx   |  9 ++++--
 .../settings/ObjectMaskEditPane.tsx           |  2 +-
 .../components/settings/ObjectSettings.tsx    | 29 ++++++++++---------
 web/src/components/settings/PolygonItem.tsx   |  2 +-
 web/src/components/settings/ZoneEditPane.tsx  |  2 +-
 web/src/components/ui/sonner.tsx              |  2 ++
 web/src/pages/ConfigEditor.tsx                |  2 +-
 web/src/pages/Logs.tsx                        |  2 +-
 web/src/views/events/EventView.tsx            |  2 +-
 web/src/views/events/RecordingView.tsx        |  2 +-
 13 files changed, 45 insertions(+), 26 deletions(-)

diff --git a/web/src/components/filter/CameraGroupSelector.tsx b/web/src/components/filter/CameraGroupSelector.tsx
index 3b9b3e20f..d67fea65a 100644
--- a/web/src/components/filter/CameraGroupSelector.tsx
+++ b/web/src/components/filter/CameraGroupSelector.tsx
@@ -273,7 +273,11 @@ function NewGroupDialog({
 
   return (
     <>
-      <Toaster className="toaster group z-[100]" position="top-center" />
+      <Toaster
+        className="toaster group z-[100]"
+        position="top-center"
+        closeButton={true}
+      />
       <Overlay
         open={open}
         onOpenChange={(open) => {
diff --git a/web/src/components/settings/MasksAndZones.tsx b/web/src/components/settings/MasksAndZones.tsx
index 2679cf5ca..66eb33952 100644
--- a/web/src/components/settings/MasksAndZones.tsx
+++ b/web/src/components/settings/MasksAndZones.tsx
@@ -178,7 +178,12 @@ export default function MasksAndZones({
     setAllPolygons([...(editingPolygons ?? [])]);
     setHoveredPolygonIndex(null);
     setUnsavedChanges(false);
-    addMessage("masks_zones", "Restart required (masks/zones changed)");
+    addMessage(
+      "masks_zones",
+      "Restart required (masks/zones changed)",
+      undefined,
+      "masks_zones",
+    );
   }, [editingPolygons, setUnsavedChanges, addMessage]);
 
   useEffect(() => {
@@ -366,7 +371,7 @@ export default function MasksAndZones({
     <>
       {cameraConfig && editingPolygons && (
         <div className="flex flex-col md:flex-row size-full">
-          <Toaster position="top-center" />
+          <Toaster position="top-center" closeButton={true} />
           <div className="flex flex-col h-full w-full overflow-y-auto mt-2 md:mt-0 mb-10 md:mb-0 md:w-3/12 order-last md:order-none md:mr-2 rounded-lg border-secondary-foreground border-[1px] p-2 bg-background_alt">
             {editPane == "zone" && (
               <ZoneEditPane
diff --git a/web/src/components/settings/MotionMaskEditPane.tsx b/web/src/components/settings/MotionMaskEditPane.tsx
index 1797c2d99..df1a42508 100644
--- a/web/src/components/settings/MotionMaskEditPane.tsx
+++ b/web/src/components/settings/MotionMaskEditPane.tsx
@@ -183,7 +183,7 @@ export default function MotionMaskEditPane({
 
   return (
     <>
-      <Toaster position="top-center" />
+      <Toaster position="top-center" closeButton={true} />
       <Heading as="h3" className="my-2">
         {polygon.name.length ? "Edit" : "New"} Motion Mask
       </Heading>
diff --git a/web/src/components/settings/MotionTuner.tsx b/web/src/components/settings/MotionTuner.tsx
index badaa75a4..b837e7ab6 100644
--- a/web/src/components/settings/MotionTuner.tsx
+++ b/web/src/components/settings/MotionTuner.tsx
@@ -153,7 +153,12 @@ export default function MotionTuner({
 
   useEffect(() => {
     if (changedValue) {
-      addMessage("motion_tuner", "Unsaved motion tuner changes");
+      addMessage(
+        "motion_tuner",
+        "Unsaved motion tuner changes",
+        undefined,
+        "motion_tuner",
+      );
     } else {
       clearMessages("motion_tuner");
     }
@@ -169,7 +174,7 @@ export default function MotionTuner({
 
   return (
     <div className="flex flex-col md:flex-row size-full">
-      <Toaster position="top-center" />
+      <Toaster position="top-center" closeButton={true} />
       <div className="flex flex-col h-full w-full overflow-y-auto mt-2 md:mt-0 mb-10 md:mb-0 md:w-3/12 order-last md:order-none md:mr-2 rounded-lg border-secondary-foreground border-[1px] p-2 bg-background_alt">
         <Heading as="h3" className="my-2">
           Motion Detection Tuner
diff --git a/web/src/components/settings/ObjectMaskEditPane.tsx b/web/src/components/settings/ObjectMaskEditPane.tsx
index c95b17bae..d97297b98 100644
--- a/web/src/components/settings/ObjectMaskEditPane.tsx
+++ b/web/src/components/settings/ObjectMaskEditPane.tsx
@@ -245,7 +245,7 @@ export default function ObjectMaskEditPane({
 
   return (
     <>
-      <Toaster position="top-center" />
+      <Toaster position="top-center" closeButton={true} />
       <Heading as="h3" className="my-2">
         {polygon.name.length ? "Edit" : "New"} Object Mask
       </Heading>
diff --git a/web/src/components/settings/ObjectSettings.tsx b/web/src/components/settings/ObjectSettings.tsx
index 15d51aa54..c3ced115b 100644
--- a/web/src/components/settings/ObjectSettings.tsx
+++ b/web/src/components/settings/ObjectSettings.tsx
@@ -64,7 +64,7 @@ export default function ObjectSettings({
     },
   ];
 
-  const [options, setOptions] = usePersistence<Options>(
+  const [options, setOptions, optionsLoaded] = usePersistence<Options>(
     `${selectedCamera}-feed`,
     emptyObject,
   );
@@ -87,17 +87,20 @@ export default function ObjectSettings({
 
   const memoizedObjects = useDeepMemo(objects);
 
-  const searchParams = useMemo(
-    () =>
-      new URLSearchParams(
-        Object.keys(options || {}).reduce((memo, key) => {
-          //@ts-expect-error we know this is correct
-          memo.push([key, options[key] === true ? "1" : "0"]);
-          return memo;
-        }, []),
-      ),
-    [options],
-  );
+  const searchParams = useMemo(() => {
+    if (!optionsLoaded) {
+      return new URLSearchParams();
+    }
+
+    const params = new URLSearchParams(
+      Object.keys(options || {}).reduce((memo, key) => {
+        //@ts-expect-error we know this is correct
+        memo.push([key, options[key] === true ? "1" : "0"]);
+        return memo;
+      }, []),
+    );
+    return params;
+  }, [options, optionsLoaded]);
 
   useEffect(() => {
     document.title = "Object Settings - Frigate";
@@ -109,7 +112,7 @@ export default function ObjectSettings({
 
   return (
     <div className="flex flex-col md:flex-row size-full">
-      <Toaster position="top-center" />
+      <Toaster position="top-center" closeButton={true} />
       <div className="flex flex-col h-full w-full overflow-y-auto mt-2 md:mt-0 mb-10 md:mb-0 md:w-3/12 order-last md:order-none md:mr-2 rounded-lg border-secondary-foreground border-[1px] p-2 bg-background_alt">
         <Heading as="h3" className="my-2">
           Debug
diff --git a/web/src/components/settings/PolygonItem.tsx b/web/src/components/settings/PolygonItem.tsx
index 9d8972341..bfd73725d 100644
--- a/web/src/components/settings/PolygonItem.tsx
+++ b/web/src/components/settings/PolygonItem.tsx
@@ -202,7 +202,7 @@ export default function PolygonItem({
 
   return (
     <>
-      <Toaster position="top-center" />
+      <Toaster position="top-center" closeButton={true} />
 
       <div
         key={index}
diff --git a/web/src/components/settings/ZoneEditPane.tsx b/web/src/components/settings/ZoneEditPane.tsx
index dd213b6cc..90cff5f10 100644
--- a/web/src/components/settings/ZoneEditPane.tsx
+++ b/web/src/components/settings/ZoneEditPane.tsx
@@ -318,7 +318,7 @@ export default function ZoneEditPane({
 
   return (
     <>
-      <Toaster position="top-center" />
+      <Toaster position="top-center" closeButton={true} />
       <Heading as="h3" className="my-2">
         {polygon.name.length ? "Edit" : "New"} Zone
       </Heading>
diff --git a/web/src/components/ui/sonner.tsx b/web/src/components/ui/sonner.tsx
index 15690ddc7..21da14e4e 100644
--- a/web/src/components/ui/sonner.tsx
+++ b/web/src/components/ui/sonner.tsx
@@ -18,6 +18,8 @@ const Toaster = ({ ...props }: ToasterProps) => {
           actionButton: "group-[.toast]:bg-primary group-[.toast]:text-primary",
           cancelButton:
             "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+          closeButton:
+            "group-[.toast]:bg-secondary border-primary border-[1px]",
           success:
             "group toast group-[.toaster]:bg-success group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
           error:
diff --git a/web/src/pages/ConfigEditor.tsx b/web/src/pages/ConfigEditor.tsx
index 126d6c66a..7c30b5447 100644
--- a/web/src/pages/ConfigEditor.tsx
+++ b/web/src/pages/ConfigEditor.tsx
@@ -158,7 +158,7 @@ function ConfigEditor() {
       )}
 
       <div ref={configRef} className="h-full mt-2" />
-      <Toaster />
+      <Toaster closeButton={true} />
     </div>
   );
 }
diff --git a/web/src/pages/Logs.tsx b/web/src/pages/Logs.tsx
index c166968ab..e6cf07be5 100644
--- a/web/src/pages/Logs.tsx
+++ b/web/src/pages/Logs.tsx
@@ -332,7 +332,7 @@ function Logs() {
 
   return (
     <div className="size-full p-2 flex flex-col">
-      <Toaster position="top-center" />
+      <Toaster position="top-center" closeButton={true} />
       <LogInfoDialog logLine={selectedLog} setLogLine={setSelectedLog} />
 
       <div className="flex justify-between items-center">
diff --git a/web/src/views/events/EventView.tsx b/web/src/views/events/EventView.tsx
index 4d5b5b75b..90ca54531 100644
--- a/web/src/views/events/EventView.tsx
+++ b/web/src/views/events/EventView.tsx
@@ -238,7 +238,7 @@ export default function EventView({
 
   return (
     <div className="py-2 flex flex-col size-full">
-      <Toaster />
+      <Toaster closeButton={true} />
       <div className="h-11 mb-2 pl-3 pr-2 relative flex justify-between items-center">
         {isMobile && (
           <Logo className="absolute inset-x-1/2 -translate-x-1/2 h-8" />
diff --git a/web/src/views/events/RecordingView.tsx b/web/src/views/events/RecordingView.tsx
index 4e90937df..5494b6e87 100644
--- a/web/src/views/events/RecordingView.tsx
+++ b/web/src/views/events/RecordingView.tsx
@@ -261,7 +261,7 @@ export function RecordingView({
 
   return (
     <div ref={contentRef} className="size-full pt-2 flex flex-col">
-      <Toaster />
+      <Toaster closeButton={true} />
       <div
         className={`w-full h-11 mb-2 px-2 relative flex items-center justify-between`}
       >