Add toasts

src/App.tsx

@@ -1,5 +1,6 @@
 import type React from "react";
 
+import { Toaster } from "react-hot-toast";
 import { MapProvider } from "react-map-gl";
 
 import { useAppStore } from "@app/core/stores/appStore.js";
@@ -24,6 +25,11 @@ export const App = (): JSX.Element => {
 
       {device && (
         <DeviceWrapper device={device}>
+          <Toaster
+            toastOptions={{
+              duration: 2000,
+            }}
+          />
           <Sidebar />
           <PageNav />
           <MapProvider>

src/components/PageComponents/Config/Bluetooth.tsx

@@ -2,6 +2,7 @@ import type React from "react";
 import { useEffect, useState } from "react";
 
 import { Controller, useForm, useWatch } from "react-hook-form";
+import toast from "react-hot-toast";
 
 import { Input } from "@app/components/form/Input.js";
 import { Select } from "@app/components/form/Select.js";
@@ -44,6 +45,7 @@ export const Bluetooth = (): JSX.Element => {
       async () => {
         reset({ ...data });
         setLoading(false);
+        toast.success("Saved Bluetooth Config, Restarting Node");
         await Promise.resolve();
       }
     );

src/components/PageComponents/Config/Device.tsx

@@ -2,6 +2,7 @@ import type React from "react";
 import { useEffect, useState } from "react";
 
 import { Controller, useForm } from "react-hook-form";
+import toast from "react-hot-toast";
 
 import { Select } from "@app/components/form/Select.js";
 import { Toggle } from "@app/components/form/Toggle.js";
@@ -40,9 +41,9 @@ export const Device = (): JSX.Element => {
         },
       },
       async () => {
-        // toaster.success("Successfully updated device config");
         reset({ ...data });
         setLoading(false);
+        toast.success("Saved Device Config, Restarting Node");
         await Promise.resolve();
       }
     );

src/components/PageComponents/Config/Display.tsx

@@ -2,6 +2,7 @@ import type React from "react";
 import { useEffect, useState } from "react";
 
 import { Controller, useForm } from "react-hook-form";
+import toast from "react-hot-toast";
 
 import { Input } from "@app/components/form/Input.js";
 import { Select } from "@app/components/form/Select.js";
@@ -43,6 +44,7 @@ export const Display = (): JSX.Element => {
       async () => {
         reset({ ...data });
         setLoading(false);
+        toast.success("Saved Display Config, Restarting Node");
         await Promise.resolve();
       }
     );

src/components/PageComponents/Config/LoRa.tsx

@@ -2,6 +2,7 @@ import type React from "react";
 import { useEffect, useState } from "react";
 
 import { Controller, useForm, useWatch } from "react-hook-form";
+import toast from "react-hot-toast";
 
 import { Input } from "@app/components/form/Input.js";
 import { Select } from "@app/components/form/Select.js";
@@ -50,6 +51,7 @@ export const LoRa = (): JSX.Element => {
       async () => {
         reset({ ...data });
         setLoading(false);
+        toast.success("Saved LoRa Config, Restarting Node");
         await Promise.resolve();
       }
     );

src/components/PageComponents/Config/Network.tsx

@@ -2,6 +2,7 @@ import type React from "react";
 import { useEffect, useState } from "react";
 
 import { Controller, useForm, useWatch } from "react-hook-form";
+import toast from "react-hot-toast";
 
 import { Input } from "@app/components/form/Input.js";
 import { Select } from "@app/components/form/Select.js";
@@ -47,9 +48,9 @@ export const Network = (): JSX.Element => {
         },
       },
       async () => {
-        // toaster.success("Successfully updated Network config");
         reset({ ...data });
         setLoading(false);
+        toast.success("Saved Network Config, Restarting Node");
         await Promise.resolve();
       }
     );

src/components/PageComponents/Config/Position.tsx

@@ -2,6 +2,7 @@ import type React from "react";
 import { useEffect, useState } from "react";
 
 import { Controller, useForm } from "react-hook-form";
+import toast from "react-hot-toast";
 
 import { Input } from "@app/components/form/Input.js";
 import { Toggle } from "@app/components/form/Toggle.js";
@@ -40,6 +41,7 @@ export const Position = (): JSX.Element => {
       async () => {
         reset({ ...data });
         setLoading(false);
+        toast.success("Saved Position Config, Restarting Node");
         await Promise.resolve();
       }
     );

src/components/PageComponents/Config/Power.tsx

@@ -2,6 +2,7 @@ import type React from "react";
 import { useEffect, useState } from "react";
 
 import { Controller, useForm } from "react-hook-form";
+import toast from "react-hot-toast";
 
 import { Input } from "@app/components/form/Input.js";
 import { Toggle } from "@app/components/form/Toggle.js";
@@ -40,6 +41,7 @@ export const Power = (): JSX.Element => {
       async () => {
         reset({ ...data });
         setLoading(false);
+        toast.success("Saved Power Config, Restarting Node");
         await Promise.resolve();
       }
     );

src/components/PageComponents/Config/User.tsx

@@ -2,6 +2,7 @@ import type React from "react";
 import { useEffect, useState } from "react";
 
 import { Controller, useForm } from "react-hook-form";
+import toast from "react-hot-toast";
 import { base16 } from "rfc4648";
 
 import { Input } from "@app/components/form/Input.js";
@@ -46,6 +47,7 @@ export const User = (): JSX.Element => {
       void connection?.setOwner({ ...myNode.data.user, ...data }, async () => {
         reset({ ...data });
         setLoading(false);
+        toast.success("Saved User Config, Restarting Node");
         await Promise.resolve();
       });
     }

src/components/PageComponents/ModuleConfig/CannedMessage.tsx

@@ -2,6 +2,7 @@ import type React from "react";
 import { useEffect, useState } from "react";
 
 import { Controller, useForm, useWatch } from "react-hook-form";
+import toast from "react-hot-toast";
 
 import { Input } from "@app/components/form/Input.js";
 import { Select } from "@app/components/form/Select.js";
@@ -49,6 +50,7 @@ export const CannedMessage = (): JSX.Element => {
       async () => {
         reset({ ...data });
         setLoading(false);
+        toast.success("Saved Canned Message Config, Restarting Node");
         await Promise.resolve();
       }
     );

src/components/PageComponents/ModuleConfig/ExternalNotification.tsx

@@ -2,6 +2,7 @@ import type React from "react";
 import { useEffect, useState } from "react";
 
 import { Controller, useForm, useWatch } from "react-hook-form";
+import toast from "react-hot-toast";
 
 import { Input } from "@app/components/form/Input.js";
 import { Toggle } from "@app/components/form/Toggle.js";
@@ -39,6 +40,7 @@ export const ExternalNotification = (): JSX.Element => {
       async (): Promise<void> => {
         reset({ ...data });
         setLoading(false);
+        toast.success("Saved External Notification Config, Restarting Node");
         await Promise.resolve();
       }
     );

src/components/PageComponents/ModuleConfig/MQTT.tsx

@@ -2,6 +2,7 @@ import type React from "react";
 import { useEffect, useState } from "react";
 
 import { Controller, useForm, useWatch } from "react-hook-form";
+import toast from "react-hot-toast";
 
 import { Input } from "@app/components/form/Input.js";
 import { Toggle } from "@app/components/form/Toggle.js";
@@ -46,6 +47,7 @@ export const MQTT = (): JSX.Element => {
       async () => {
         reset({ ...data });
         setLoading(false);
+        toast.success("Saved MQTT Config, Restarting Node");
         await Promise.resolve();
       }
     );

src/components/PageComponents/ModuleConfig/RangeTest.tsx

@@ -2,6 +2,7 @@ import type React from "react";
 import { useEffect, useState } from "react";
 
 import { Controller, useForm, useWatch } from "react-hook-form";
+import toast from "react-hot-toast";
 
 import { Input } from "@app/components/form/Input.js";
 import { Toggle } from "@app/components/form/Toggle.js";
@@ -40,6 +41,7 @@ export const RangeTest = (): JSX.Element => {
       async (): Promise<void> => {
         reset({ ...data });
         setLoading(false);
+        toast.success("Saved Range Test Config, Restarting Node");
         await Promise.resolve();
       }
     );

src/components/PageComponents/ModuleConfig/Serial.tsx

@@ -2,6 +2,7 @@ import type React from "react";
 import { useEffect, useState } from "react";
 
 import { Controller, useForm, useWatch } from "react-hook-form";
+import toast from "react-hot-toast";
 
 import { Input } from "@app/components/form/Input.js";
 import { Toggle } from "@app/components/form/Toggle.js";
@@ -40,6 +41,7 @@ export const Serial = (): JSX.Element => {
       async (): Promise<void> => {
         reset({ ...data });
         setLoading(false);
+        toast.success("Saved Serial Config, Restarting Node");
         await Promise.resolve();
       }
     );

src/components/PageComponents/ModuleConfig/StoreForward.tsx

@@ -2,6 +2,7 @@ import type React from "react";
 import { useEffect, useState } from "react";
 
 import { Controller, useForm, useWatch } from "react-hook-form";
+import toast from "react-hot-toast";
 
 import { Input } from "@app/components/form/Input.js";
 import { Toggle } from "@app/components/form/Toggle.js";
@@ -40,6 +41,7 @@ export const StoreForward = (): JSX.Element => {
       async (): Promise<void> => {
         reset({ ...data });
         setLoading(false);
+        toast.success("Saved Stora & Forward Config, Restarting Node");
         await Promise.resolve();
       }
     );

src/components/PageComponents/ModuleConfig/Telemetry.tsx

@@ -2,6 +2,7 @@ import type React from "react";
 import { useEffect, useState } from "react";
 
 import { Controller, useForm } from "react-hook-form";
+import toast from "react-hot-toast";
 
 import { Input } from "@app/components/form/Input.js";
 import { Toggle } from "@app/components/form/Toggle.js";
@@ -40,6 +41,7 @@ export const Telemetry = (): JSX.Element => {
       async () => {
         reset({ ...data });
         setLoading(false);
+        toast.success("Saved Telemetry Config, Restarting Node");
         await Promise.resolve();
       }
     );

src/core/subscriptions.ts

@@ -1,3 +1,5 @@
+import toast from "react-hot-toast";
+
 import type { Device } from "@core/stores/deviceStore.js";
 import { Protobuf, Types } from "@meshtastic/meshtasticjs";
 
@@ -53,6 +55,9 @@ export const subscribeAll = (
   });
 
   connection.onNodeInfoPacket.subscribe((nodeInfo) => {
+    toast(`New Node Discovered: ${nodeInfo.data.user?.shortName ?? "UNK"}`, {
+      icon: "🔎",
+    });
     device.addNodeInfo(nodeInfo);
   });