Use bell icon for notifications

src/app/components/RoomDetail.svelte

@@ -16,7 +16,7 @@
   import Lock from "@assets/icons/lock.svg?dataurl"
   import Microphone from "@assets/icons/microphone.svg?dataurl"
   import Bookmark from "@assets/icons/bookmark.svg?dataurl"
-  import VolumeLoud from "@assets/icons/volume-loud.svg?dataurl"
+  import Bell from "@assets/icons/bell.svg?dataurl"
   import {fly} from "@lib/transition"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
@@ -255,7 +255,7 @@
       <strong class="text-lg">Room Settings</strong>
       <div class="flex items-center justify-between">
         <div class="flex items-center gap-2">
-          <Icon icon={VolumeLoud} />
+          <Icon icon={Bell} />
           <span>Notifications</span>
         </div>
         <input

src/app/components/SpaceMenu.svelte

@@ -20,8 +20,8 @@
   import CaseMinimalistic from "@assets/icons/case-minimalistic.svg?dataurl"
   import AddCircle from "@assets/icons/add-circle.svg?dataurl"
   import ChatRound from "@assets/icons/chat-round.svg?dataurl"
-  import VolumeLoud from "@assets/icons/volume-loud.svg?dataurl"
+  import Bell from "@assets/icons/bell.svg?dataurl"
-  import VolumeCross from "@assets/icons/volume-cross.svg?dataurl"
+  import BellOff from "@assets/icons/bell-off.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Link from "@lib/components/Link.svelte"
   import Button from "@lib/components/Button.svelte"
@@ -149,7 +149,7 @@
           <strong class="ellipsize flex items-center gap-1">
             <RelayName {url} />
             {#if $notificationSettings.push && !$shouldNotify}
-              <Icon icon={VolumeCross} size={3} class="opacity-50" />
+              <Icon icon={BellOff} size={3} class="opacity-50" />
             {/if}
           </strong>
           <Icon icon={AltArrowDown} />
@@ -198,12 +198,12 @@
             <li>
               {#if $notificationSettings.push}
                 <Button onclick={toggleSpaceNotifications}>
-                  <Icon icon={$shouldNotify ? VolumeLoud : VolumeCross} />
+                  <Icon icon={$shouldNotify ? Bell : BellOff} />
                   {$shouldNotify ? "Turn off" : "Turn on"} notifications
                 </Button>
               {:else}
                 <Link href="/settings/alerts">
-                  <Icon icon={VolumeLoud} />
+                  <Icon icon={Bell} />
                   Enable notifications
                 </Link>
               {/if}

src/app/components/SpaceMenuRoomItem.svelte

@@ -1,6 +1,10 @@
 <script lang="ts">
+  import Bell from "@assets/icons/bell.svg?dataurl"
+  import BellOff from "@assets/icons/bell-off.svg?dataurl"
+  import Icon from "@lib/components/Icon.svelte"
   import SecondaryNavItem from "@lib/components/SecondaryNavItem.svelte"
   import RoomNameWithImage from "@app/components/RoomNameWithImage.svelte"
+  import {deriveShouldNotify} from "@app/core/state"
   import {notifications} from "@app/util/notifications"
   import {makeRoomPath} from "@app/util/routes"
 
@@ -14,6 +18,9 @@
   const {url, h, notify = false, replaceState = false}: Props = $props()
 
   const path = makeRoomPath(url, h)
+  const shouldNotifyForSpace = deriveShouldNotify(url)
+  const shouldNotifyForRoom = deriveShouldNotify(url, h)
+  const showDifferenceIcon = $derived($shouldNotifyForRoom !== $shouldNotifyForSpace)
 </script>
 
 <SecondaryNavItem
@@ -21,4 +28,7 @@
   {replaceState}
   notification={notify ? $notifications.has(path) : false}>
   <RoomNameWithImage {url} {h} />
+  {#if showDifferenceIcon}
+    <Icon icon={$shouldNotifyForRoom ? Bell : BellOff} size={4} class="opacity-50" />
+  {/if}
 </SecondaryNavItem>