enhancement(web): mutation improvements and toast updates (#913)

* make notification switch take onToggleMutation

Instead of opening it like the edit button, it now enables/disables it directly.

* improved toast for update checks

* improved toast for download clients

it now mentions what client is enabled/disabled

* improved irc network toast

* added toast when copying apikey

* added toast to log download

implemented an info variant for the toasts

* improved feed toast

* improved toast for update checks

* Merge branch 'develop' into enhancement/mutation-improvements-toast-updates

web/src/components/fields/text.tsx

@@ -6,6 +6,8 @@
 import { useToggle } from "@hooks/hooks";
 import { CheckIcon, DocumentDuplicateIcon, EyeIcon, EyeSlashIcon } from "@heroicons/react/24/outline";
 import { useState } from "react";
+import { toast } from "react-hot-toast";
+import Toast from "@components/notifications/Toast";
 
 interface KeyFieldProps {
   value: string;
@@ -30,12 +32,29 @@ export const KeyField = ({ value }: KeyFieldProps) => {
       .then(() => {
         // If successful, update the isCopied state value
         setIsCopied(true);
+
+        toast.custom(t => (
+          <Toast
+            type="success"
+            body="API key copied to clipboard!"
+            t={t}
+          />
+        ));
+
         setTimeout(() => {
           setIsCopied(false);
         }, 1500);
       })
       .catch((err) => {
         console.error(err);
+
+        toast.custom(t => (
+          <Toast
+            type="error"
+            body="Failed to copy API key."
+            t={t}
+          />
+        ));
       });
   };
 

web/src/components/notifications/Toast.tsx

@@ -4,12 +4,12 @@
  */
 
 import { FC } from "react";
-import { CheckCircleIcon, ExclamationCircleIcon, ExclamationTriangleIcon, XMarkIcon } from "@heroicons/react/24/solid";
+import { CheckCircleIcon, ExclamationCircleIcon, ExclamationTriangleIcon, InformationCircleIcon, XMarkIcon } from "@heroicons/react/24/solid";
 import { toast, Toast as Tooast } from "react-hot-toast";
 import { classNames } from "@utils";
 
 type Props = {
-  type: "error" | "success" | "warning"
+  type: "error" | "success" | "warning" | "info";
   body?: string
   t?: Tooast;
 };
@@ -24,12 +24,14 @@ const Toast: FC<Props> = ({ type, body, t }) => (
           {type === "success" && <CheckCircleIcon className="h-6 w-6 text-green-400" aria-hidden="true" />}
           {type === "error" && <ExclamationCircleIcon className="h-6 w-6 text-red-400" aria-hidden="true" />}
           {type === "warning" && <ExclamationTriangleIcon className="h-6 w-6 text-yellow-400" aria-hidden="true" />}
+          {type === "info" && <InformationCircleIcon className="h-6 w-6 text-blue-400" aria-hidden="true" />}
         </div>
         <div className="ml-3 w-0 flex-1 pt-0.5">
           <p className="text-sm font-medium text-gray-900 dark:text-gray-200">
             {type === "success" && "Success"}
             {type === "error" && "Error"}
             {type === "warning" && "Warning"}
+            {type === "info" && "Info"}
           </p>
           <span className="mt-1 text-sm text-gray-500 dark:text-gray-400">{body}</span>
         </div>