flotilla/src/app/components/RelaySummary.svelte

<script lang="ts">
  import {gt} from "@welshman/lib"
  import {deriveRelay} from "@welshman/app"
  import Ghost from "@assets/icons/ghost-smile.svg?dataurl"
  import CheckCircle from "@assets/icons/check-circle.svg?dataurl"
  import Icon from "@lib/components/Icon.svelte"
  import RelayName from "@app/components/RelayName.svelte"
  import RelayDescription from "@app/components/RelayDescription.svelte"
  import ProfileCircles from "@app/components/ProfileCircles.svelte"
  import {membersByUrl, userRoomsByUrl} from "@app/core/state"

  type Props = {
    url: string
  }

  const {url}: Props = $props()
  const relay = deriveRelay(url)
</script>

<div class="col-4 text-left">
  <div class="col-2">
    <div class="relative flex gap-4">
      <div class="relative">
        <div class="avatar relative">
          <div
            class="center !flex h-12 w-12 min-w-12 rounded-full border-2 border-solid border-base-300 bg-base-300">
            {#if $relay?.profile?.icon}
              <img alt="" src={$relay.profile.icon} />
            {:else}
              <Icon icon={Ghost} size={5} />
            {/if}
          </div>
        </div>
        {#if $userRoomsByUrl.has(url)}
          <div
            class="tooltip absolute -right-1 -top-1 h-5 w-5 rounded-full bg-primary"
            data-tip="You are already a member of this space.">
            <Icon icon={CheckCircle} class="scale-110" />
          </div>
        {/if}
      </div>
      <div>
        <h2 class="ellipsize whitespace-nowrap text-xl">
          <RelayName {url} />
        </h2>
        <p class="text-sm opacity-75">{url}</p>
      </div>
    </div>
    <RelayDescription {url} />
  </div>
  {#if gt($membersByUrl.get(url)?.size, 0)}
    <div class="row-2 card2 card2-sm bg-alt">
      Members:
      <ProfileCircles pubkeys={Array.from($membersByUrl.get(url) || [])} />
    </div>
  {/if}
</div>