add close button to all toasters

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) => {

web/src/components/settings/MasksAndZones.tsx

@@ -366,7 +366,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

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>

web/src/components/settings/MotionTuner.tsx

@@ -169,7 +169,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

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>

web/src/components/settings/ObjectSettings.tsx

@@ -109,7 +109,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

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}

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>

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:

web/src/pages/ConfigEditor.tsx

@@ -158,7 +158,7 @@ function ConfigEditor() {
       )}
 
       <div ref={configRef} className="h-full mt-2" />
-      <Toaster />
+      <Toaster closeButton={true} />
     </div>
   );
 }

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

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

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`}
       >