Generally just refactor alerts, upgrade some deps

src/app/components/NewNotificationSound.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import {onMount} from "svelte"
   import {userSettingsValues} from "@app/core/state"
-  import {notifications} from "../util/notifications"
+  import {onNotification} from "@app/util/notifications"
 
   let audioElement: HTMLAudioElement
 
@@ -15,24 +15,16 @@
     }
   })
 
-  let notificationCount = $state($notifications.size)
-
-  const playSound = () => {
-    if (enabled && $userSettingsValues.alerts_sound) {
-      audioElement?.play()
-    }
-  }
-
-  $effect(() => {
-    if ($notifications.size > notificationCount) {
-      playSound()
-    }
-
-    notificationCount = $notifications.size
-  })
-
   onMount(() => {
     audioElement.load()
+
+    const unsubscribe = onNotification(() => {
+      if (enabled && $userSettingsValues.alerts_sound) {
+        audioElement?.play()
+      }
+    })
+
+    return unsubscribe
   })
 </script>
 

src/app/components/SignerStatus.svelte

@@ -47,7 +47,7 @@
           {/if}
         </span>
       </div>
-      <div class="flex justify-between text-sm opacity-75">
+      <div class="flex flex-col justify-between text-sm opacity-75 sm:flex-row">
         <p>
           Logged in with
           {#if $session.method === SessionMethod.Nip01}

src/app/components/SpaceMenu.svelte

@@ -103,7 +103,7 @@
 </script>
 
 <div bind:this={element} class="flex h-full flex-col justify-between">
-  <SecondaryNavSection>
+  <SecondaryNavSection class="pb-0">
     <div>
       <Button
         class="flex w-full flex-col rounded-xl p-3 transition-all hover:bg-base-100"
@@ -172,7 +172,7 @@
         </Popover>
       {/if}
     </div>
-    <div class="flex max-h-[calc(100vh-250px)] min-h-0 flex-col gap-1 overflow-auto">
+    <div class="flex max-h-[calc(100vh-150px)] min-h-0 flex-col gap-1 overflow-auto">
       {#if hasNip29($relay)}
         <SecondaryNavItem {replaceState} href={makeSpacePath(url, "recent")}>
           <Icon icon={History} /> Recent Activity
@@ -239,7 +239,7 @@
       {/if}
     </div>
   </SecondaryNavSection>
-  <div class="flex flex-col gap-2 p-4">
+  <div class="flex flex-col gap-2 p-4 pt-0">
     <Button class="btn btn-neutral btn-sm" onclick={showDetail}>
       <SocketStatusIndicator {url} />
     </Button>