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
2024-11-21 19:07:46 +01:00 · 2024-05-04 14:54:50 -05:00 · 2024-05-04 14:54:50 -05:00 · ad87f5786e
commit ad87f5786e
parent 2dd5b893a0
13 changed files with 45 additions and 26 deletions
--- 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) => {
--- 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
--- 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>
--- 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
--- 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>
--- 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
--- 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}
--- 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>
--- 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:
--- 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>
  );
 }
--- 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">
--- 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" />
--- 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`}
      >