Add toasts

package.json

@@ -38,6 +38,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.37.0",
+    "react-hot-toast": "^2.4.0",
     "react-icons": "^4.4.0",
     "react-json-pretty": "^2.2.0",
     "react-map-gl": "^7.0.19",

pnpm-lock.yaml

@@ -32,6 +32,7 @@ specifiers:
   react: ^18.2.0
   react-dom: ^18.2.0
   react-hook-form: ^7.37.0
+  react-hot-toast: ^2.4.0
   react-icons: ^4.4.0
   react-json-pretty: ^2.2.0
   react-map-gl: ^7.0.19
@@ -66,6 +67,7 @@ dependencies:
   react: 18.2.0
   react-dom: 18.2[email protected]
   react-hook-form: 7.37[email protected]
+  react-hot-toast: 2.4.0_biqbaboplfbrettd7655fr4n2y
   react-icons: 4.4[email protected]
   react-json-pretty: 2.2.0_biqbaboplfbrettd7655fr4n2y
   react-map-gl: 7.0.19_6eczaga5xxiwzxtfiyk6fioasq
@@ -2401,6 +2403,12 @@ packages:
       merge2: 1.4.1
       slash: 3.0.0
 
+  /goober/2.1.11:
+    resolution: {integrity: sha512-5SS2lmxbhqH0u9ABEWq7WPU69a4i2pYcHeCxqaNq6Cw3mnrF0ghWNM4tEGid4dKy8XNIAUbuThuozDHHKJVh3A==}
+    peerDependencies:
+      csstype: ^3.0.10
+    dev: false
+
   /grapheme-splitter/1.0.4:
     resolution: {integrity: sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==}
     dev: false
@@ -3339,6 +3347,20 @@ packages:
       react: 18.2.0
     dev: false
 
+  /react-hot-toast/2.4.0_biqbaboplfbrettd7655fr4n2y:
+    resolution: {integrity: sha512-qnnVbXropKuwUpriVVosgo8QrB+IaPJCpL8oBI6Ov84uvHZ5QQcTp2qg6ku2wNfgJl6rlQXJIQU5q+5lmPOutA==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      react: '>=16'
+      react-dom: '>=16'
+    dependencies:
+      goober: 2.1.11
+      react: 18.2.0
+      react-dom: 18.2[email protected]
+    transitivePeerDependencies:
+      - csstype
+    dev: false
+
   /react-icons/[email protected]:
     resolution: {integrity: sha512-fSbvHeVYo/B5/L4VhB7sBA1i2tS8MkT0Hb9t2H1AVPkwGfVHLJCqyr2Py9dKMxsyM63Eng1GkdZfbWj+Fmv8Rg==}
     peerDependencies:

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);
   });