Remove no-text rooms, highlight active room, fix custom voice room icons

src/app/components/RoomImage.svelte

@@ -1,8 +1,11 @@
 <script lang="ts">
   import Hashtag from "@assets/icons/hashtag.svg?dataurl"
+  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 ImageIcon from "@lib/components/ImageIcon.svelte"
   import {deriveRoom} from "@app/core/state"
+  import {currentVoiceSession} from "@app/voice"
 
   interface Props {
     h: string
@@ -14,9 +17,25 @@
   const {url, h, size = 5, fallbackIcon = Hashtag}: Props = $props()
 
   const room = deriveRoom(url, h)
+  const isVoiceRoom = $derived($room.livekit)
+  const isVoiceRoomActive = $derived(
+    $currentVoiceSession?.url === url && $currentVoiceSession?.h === h,
+  )
+  const typeIconSrc = $derived(isVoiceRoomActive ? VolumeLoud : Volume)
 </script>
 
-{#if $room.picture}
+{#if isVoiceRoom}
+  <div class="flex items-center gap-1 shrink-0">
+    <Icon
+      icon={typeIconSrc}
+      size={size + 1}
+      class={isVoiceRoomActive ? "text-primary -translate-x-0.5" : ""} />
+    {#if $room.picture}
+      <span class="text-base">/</span>
+      <ImageIcon src={$room.picture} {size} alt="" class="rounded-lg" />
+    {/if}
+  </div>
+{:else if $room.picture}
   <ImageIcon src={$room.picture} {size} alt="" class="rounded-lg" />
 {:else}
   <Icon icon={fallbackIcon} {size} />