Add muted rooms, rework alert settings

src/app/components/SpaceMenu.svelte

@@ -18,7 +18,6 @@
   import CalendarMinimalistic from "@assets/icons/calendar-minimalistic.svg?dataurl"
   import AddCircle from "@assets/icons/add-circle.svg?dataurl"
   import ChatRound from "@assets/icons/chat-round.svg?dataurl"
-  import Bell from "@assets/icons/bell.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Link from "@lib/components/Link.svelte"
   import Button from "@lib/components/Button.svelte"
@@ -34,7 +33,7 @@
   import SpaceMembers from "@app/components/SpaceMembers.svelte"
   import SpaceReports from "@app/components/SpaceReports.svelte"
   import RoomCreate from "@app/components/RoomCreate.svelte"
-  import MenuSpaceRoomItem from "@app/components/MenuSpaceRoomItem.svelte"
+  import SpaceMenuRoomItem from "@app/components/SpaceMenuRoomItem.svelte"
   import SocketStatusIndicator from "@app/components/SocketStatusIndicator.svelte"
   import {
     ENABLE_ZAPS,
@@ -216,7 +215,7 @@
           <SecondaryNavHeader>Your Rooms</SecondaryNavHeader>
         {/if}
         {#each $userRooms as h, i (h)}
-          <MenuSpaceRoomItem {replaceState} notify {url} {h} />
+          <SpaceMenuRoomItem {replaceState} notify {url} {h} />
         {/each}
         {#if $otherRooms.length > 0}
           <div class="h-2"></div>
@@ -229,7 +228,7 @@
           </SecondaryNavHeader>
         {/if}
         {#each $otherRooms as h, i (h)}
-          <MenuSpaceRoomItem {replaceState} {url} {h} />
+          <SpaceMenuRoomItem {replaceState} {url} {h} />
         {/each}
         {#if $canCreateRoom}
           <SecondaryNavItem {replaceState} onclick={addRoom}>
@@ -244,9 +243,5 @@
     <Button class="btn btn-neutral btn-sm" onclick={showDetail}>
       <SocketStatusIndicator {url} />
     </Button>
-    <Link href="/settings/alerts" class="btn btn-neutral btn-sm">
-      <Icon icon={Bell} />
-      Manage Alerts
-    </Link>
   </div>
 </div>

src/app/components/SpaceMenuRoomItem.svelte

@@ -1,8 +1,11 @@
 <script lang="ts">
+  import VolumeCross from "@assets/icons/volume-cross.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"
 
   interface Props {
     url: any
@@ -13,6 +16,7 @@
 
   const {url, h, notify = false, replaceState = false}: Props = $props()
 
+  const id = makeRoomId(url, h)
   const path = makeRoomPath(url, h)
 </script>
 
@@ -21,4 +25,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}
 </SecondaryNavItem>