Fix async bug and add sound component for notification sound

src/app/components/Alerts.svelte

@@ -77,7 +77,7 @@
     $showUnreadBadge = !$showUnreadBadge
 
     if (!$showUnreadBadge) {
-      clearBadges()
+      await clearBadges()
     }
   }
 

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>

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 = () => {
+export const clearBadges = async () => {
-  Badge.clear()
+  await Badge.clear()
 }

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}