Rework alert settings and UI

src/app/components/SpaceMenuRoomItem.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
   import VolumeCross from "@assets/icons/volume-cross.svg?dataurl"
+  import VolumeLoud from "@assets/icons/volume-loud.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import SecondaryNavItem from "@lib/components/SecondaryNavItem.svelte"
   import RoomNameWithImage from "@app/components/RoomNameWithImage.svelte"
   import {makeRoomPath} from "@app/util/routes"
   import {notifications} from "@app/util/notifications"
-  import {userSettingsValues, makeRoomId} from "@app/core/state"
+  import {userSettingsValues, deriveIsMuted} from "@app/core/state"
 
   interface Props {
     url: any
@@ -16,8 +17,10 @@
 
   const {url, h, notify = false, replaceState = false}: Props = $props()
 
-  const id = makeRoomId(url, h)
   const path = makeRoomPath(url, h)
+  const isSpaceMuted = deriveIsMuted(url)
+  const isRoomMuted = deriveIsMuted(url, h)
+  const showDifferenceIcon = $derived($isRoomMuted !== $isSpaceMuted)
 </script>
 
 <SecondaryNavItem
@@ -25,7 +28,7 @@
   {replaceState}
   notification={notify ? $notifications.has(path) : false}>
   <RoomNameWithImage {url} {h} />
-  {#if $userSettingsValues.muted_rooms.includes(id)}
-    <Icon icon={VolumeCross} size={4} class="opacity-50" />
+  {#if showDifferenceIcon}
+    <Icon icon={isRoomMuted ? VolumeCross : VolumeLoud} size={4} class="opacity-50" />
   {/if}
 </SecondaryNavItem>