Tweak voice room display

src/app/components/VoiceRoomItem.svelte

@@ -2,6 +2,7 @@
   import cx from "classnames"
   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 {isMobileViewport} from "@lib/html"
@@ -60,19 +61,19 @@
   })
 </script>
 
-<div>
+<SecondaryNavItem onclick={handleClick} class={isActive ? "!bg-base-100 !text-base-content" : ""}>
-  <SecondaryNavItem onclick={handleClick} class={isActive ? "!bg-base-100 !text-base-content" : ""}>
+  <div class="flex flex-col gap-2">
-    {#if isJoining}
+    <div class="flex gap-2 items-center">
-      <span class="loading loading-spinner loading-sm"></span>
+      {#if isJoining}
-    {:else}
+        <span class="loading loading-spinner loading-sm"></span>
-      <Icon icon={Volume} size={4} class="opacity-70" />
+      {:else}
-    {/if}
+        <Icon icon={isActive ? VolumeLoud : Volume} size={4} class="opacity-70" />
-    <RoomName {url} {h} />
+      {/if}
-  </SecondaryNavItem>
+      <RoomName {url} {h} />
-  {#if $participants.length > 0}
+    </div>
-    <div class="mt-2 flex flex-col gap-1 pb-1 pl-10">
+    {#if $participants.length > 0}
       {#each $participants as pk (pk)}
-        <div class="flex items-center gap-2">
+        <div class="flex items-center gap-2 ml-6">
           <div
             class={cx(
               "inline-flex shrink-0 items-center justify-center rounded-full transition-shadow",
@@ -85,6 +86,6 @@
           </span>
         </div>
       {/each}
-    </div>
+    {/if}
-  {/if}
+  </div>
-</div>
+</SecondaryNavItem>