coracle/flotilla
1
3
Fork 9
Code Issues 32 Pull Requests 1 Actions Packages Projects 5 Releases Wiki Activity

Tweak voice room display

Browse Source
This commit is contained in:
Jon Staab
2026-03-05 14:56:30 -08:00
committed by mplorentz
parent 0a1b5cb50a
commit df2fe40bc7
1 changed files with 16 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/components/VoiceRoomItem.svelte
+9 -8
View File
@@ -2,6 +2,7 @@
import cx from "classnames" import cx from "classnames"
import {loadProfile, displayProfileByPubkey} from "@welshman/app" import {loadProfile, displayProfileByPubkey} from "@welshman/app"
import Volume from "@assets/icons/volume.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 Icon from "@lib/components/Icon.svelte"
import SecondaryNavItem from "@lib/components/SecondaryNavItem.svelte" import SecondaryNavItem from "@lib/components/SecondaryNavItem.svelte"
import {isMobileViewport} from "@lib/html" import {isMobileViewport} from "@lib/html"
@@ -60,19 +61,19 @@
}) })
</script> </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">
<div class="flex gap-2 items-center">
{#if isJoining} {#if isJoining}
<span class="loading loading-spinner loading-sm"></span> <span class="loading loading-spinner loading-sm"></span>
{:else} {:else}
<Icon icon={Volume} size={4} class="opacity-70" /> <Icon icon={isActive ? VolumeLoud : Volume} size={4} class="opacity-70" />
{/if} {/if}
<RoomName {url} {h} /> <RoomName {url} {h} />
</SecondaryNavItem> </div>
{#if $participants.length > 0} {#if $participants.length > 0}
<div class="mt-2 flex flex-col gap-1 pb-1 pl-10">
{#each $participants as pk (pk)} {#each $participants as pk (pk)}
<div class="flex items-center gap-2"> <div class="flex items-center gap-2 ml-6">
<div <div
class={cx( class={cx(
"inline-flex shrink-0 items-center justify-center rounded-full transition-shadow", "inline-flex shrink-0 items-center justify-center rounded-full transition-shadow",
@@ -85,6 +86,6 @@
</span> </span>
</div> </div>
{/each} {/each}
</div>
{/if} {/if}
</div> </div>
</SecondaryNavItem>