From e48d1e0e599a9da0d4d1e6703a758ab58ffa1149 Mon Sep 17 00:00:00 2001
From: Matthew Remmel <matt@remmel.dev>
Date: Wed, 24 Sep 2025 13:32:55 -0400
Subject: [PATCH] Fix async bug and add sound component for notification sound

---
 src/app/components/Alerts.svelte              |  2 +-
 .../components/NewNotificationSound.svelte    | 29 +++++++++++++++++++
 src/app/util/notifications.ts                 | 12 ++++----
 src/routes/+layout.svelte                     |  2 ++
 4 files changed, 39 insertions(+), 6 deletions(-)
 create mode 100644 src/app/components/NewNotificationSound.svelte

diff --git a/src/app/components/Alerts.svelte b/src/app/components/Alerts.svelte
index 279a6eb58..3693e256e 100644
--- a/src/app/components/Alerts.svelte
+++ b/src/app/components/Alerts.svelte
@@ -77,7 +77,7 @@
     $showUnreadBadge = !$showUnreadBadge
 
     if (!$showUnreadBadge) {
-      clearBadges()
+      await clearBadges()
     }
   }
 
diff --git a/src/app/components/NewNotificationSound.svelte b/src/app/components/NewNotificationSound.svelte
new file mode 100644
index 000000000..ee9889dd1
--- /dev/null
+++ b/src/app/components/NewNotificationSound.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+  import {onMount} from "svelte"
+  import {playAlertSound} from "@app/core/state"
+  import {notifications} from "../util/notifications"
+
+  let audioElement: HTMLAudioElement
+
+  let notificationCount = $state($notifications.size)
+
+  const playSound = () => {
+    if ($playAlertSound) {
+      audioElement.play()
+    }
+  }
+
+  onMount(() => {
+    audioElement.load()
+
+    notifications.subscribe(notifications => {
+      if (notifications.size > notificationCount) {
+        playSound()
+      }
+
+      notificationCount = notifications.size
+    })
+  })
+</script>
+
+<audio bind:this={audioElement} src="/new-notification-3-398649.mp3"></audio>
diff --git a/src/app/util/notifications.ts b/src/app/util/notifications.ts
index 7910f0126..d65f5b712 100644
--- a/src/app/util/notifications.ts
+++ b/src/app/util/notifications.ts
@@ -156,6 +156,8 @@ export const notifications = derived(
       }
     }
 
+    paths.add("pls")
+
     return paths
   },
 )
@@ -165,14 +167,14 @@ export const badgeCount = derived(notifications, notifications => {
   return notifications.size
 })
 
-export const handleBadgeCountChanges = (count: number) => {
+export const handleBadgeCountChanges = async (count: number) => {
   if (get(showUnreadBadge)) {
-    Badge.set({count})
+    await Badge.set({count})
   } else {
-    clearBadges()
+    await clearBadges()
   }
 }
 
-export const clearBadges = () => {
-  Badge.clear()
+export const clearBadges = async () => {
+  await Badge.clear()
 }
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 2c0baa0e6..2e5ed7a50 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -110,6 +110,7 @@
   import * as notifications from "@app/util/notifications"
   import * as appState from "@app/core/state"
   import {badgeCount, handleBadgeCountChanges} from "@app/util/notifications"
+  import NewNotificationSound from "@src/app/components/NewNotificationSound.svelte"
 
   // Migration: old nostrtalk instance used different sessions
   if ($session && !$signer) {
@@ -508,5 +509,6 @@
     </AppContainer>
     <ModalContainer />
     <div class="tippy-target"></div>
+    <NewNotificationSound />
   </div>
 {/await}