Show custom icon for voice rooms

src/app/components/RoomImage.svelte

@@ -8,9 +8,10 @@
     h: string
     url: string
     size?: number
+    fallbackIcon?: string
   }
 
-  const {url, h, size = 5}: Props = $props()
+  const {url, h, size = 5, fallbackIcon = Hashtag}: Props = $props()
 
   const room = deriveRoom(url, h)
 </script>
@@ -18,5 +19,5 @@
 {#if $room.picture}
   <ImageIcon src={$room.picture} {size} alt="" class="rounded-lg" />
 {:else}
-  <Icon icon={Hashtag} {size} />
+  <Icon icon={fallbackIcon} {size} />
 {/if}

src/app/components/VoiceRoomItem.svelte

@@ -3,9 +3,9 @@
   import {loadProfile, displayProfileByPubkey} from "@welshman/app"
   import Volume from "@assets/icons/volume.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 ProfileCircle from "@app/components/ProfileCircle.svelte"
+  import RoomImage from "@app/components/RoomImage.svelte"
   import RoomName from "@app/components/RoomName.svelte"
   import {pushToast} from "@app/util/toast"
   import {
@@ -62,7 +62,7 @@
       {#if joinAbortController}
         <span class="loading loading-spinner loading-sm"></span>
       {:else}
-        <Icon icon={isActive ? VolumeLoud : Volume} size={4} class="opacity-70" />
+        <RoomImage {url} {h} size={4} fallbackIcon={isActive ? VolumeLoud : Volume} />
       {/if}
       <RoomName {url} {h} />
     </div>