Add Notification Sound Feature

src/components/DeviceSelector.tsx

@@ -11,6 +11,8 @@ import {
   PlusIcon,
   SunIcon,
   TerminalIcon,
+  BellIcon,
+  BellOffIcon,
 } from "lucide-react";
 
 export const DeviceSelector = (): JSX.Element => {
@@ -20,6 +22,8 @@ export const DeviceSelector = (): JSX.Element => {
     setSelectedDevice,
     darkMode,
     setDarkMode,
+    notifications,
+    setNotifications,
     setCommandPaletteOpen,
     setConnectDialogOpen,
   } = useAppStore();
@@ -61,6 +65,13 @@ export const DeviceSelector = (): JSX.Element => {
         </ul>
       </div>
       <div className="flex w-20 flex-col items-center space-y-5 bg-transparent px-5 pb-5">
+        <button
+          type="button"
+          className="transition-all hover:text-accent"
+          onClick={() => setNotifications(!notifications)}
+        >
+          {notifications ? <BellIcon /> : <BellOffIcon />}
+        </button>
         <button
           type="button"
           className="transition-all hover:text-accent"

src/core/stores/appStore.ts

@@ -26,6 +26,7 @@ interface AppState {
   rasterSources: RasterSource[];
   commandPaletteOpen: boolean;
   darkMode: boolean;
+  notifications: boolean;
   accent: AccentColor;
   connectDialogOpen: boolean;
 
@@ -38,6 +39,7 @@ interface AppState {
   removeDevice: (deviceId: number) => void;
   setCommandPaletteOpen: (open: boolean) => void;
   setDarkMode: (enabled: boolean) => void;
+  setNotifications: (enabled: boolean) => void;
   setAccent: (color: AccentColor) => void;
   setConnectDialogOpen: (open: boolean) => void;
 }
@@ -49,6 +51,7 @@ export const useAppStore = create<AppState>()((set) => ({
   rasterSources: [],
   commandPaletteOpen: false,
   darkMode: window.matchMedia("(prefers-color-scheme: dark)").matches,
+  notifications: true,
   accent: "orange",
   connectDialogOpen: false,
 
@@ -99,6 +102,13 @@ export const useAppStore = create<AppState>()((set) => ({
       }),
     );
   },
+  setNotifications: (enabled: boolean) => {
+    set(
+      produce<AppState>((draft) => {
+        draft.notifications = enabled;
+      }),
+    );
+  },
   setAccent(color) {
     set(
       produce<AppState>((draft) => {

src/core/subscriptions.ts

@@ -1,5 +1,6 @@
 import type { Device } from "@core/stores/deviceStore.js";
 import { Protobuf, Types } from "@meshtastic/js";
+import { playNotificationSound } from "./utils/notify";
 
 export const subscribeAll = (
   device: Device,
@@ -84,6 +85,9 @@ export const subscribeAll = (
       ...messagePacket,
       state: messagePacket.from !== myNodeNum ? "ack" : "waiting",
     });
+    if(messagePacket.from !== myNodeNum){
+      playNotificationSound();
+    } 
   });
 
   connection.events.onPendingSettingsChange.subscribe((state) => {

src/core/utils/notify.ts

@@ -0,0 +1,17 @@
+import { useAppStore } from '@core/stores/appStore.js';
+
+const notificationSound = new Audio("/notification.wav"); //change sound if needed
+
+let isPlaying = false;
+
+export const playNotificationSound = () => {
+  const { notifications } = useAppStore.getState();
+  if (notifications && !isPlaying) {
+    isPlaying = true;
+    notificationSound.play();
+
+    notificationSound.onended = () => {
+      isPlaying = false;
+    };
+  }
+};