flotilla/src/app/components/RelaySummary.svelte

<script lang="ts">
  import {remove} from "@welshman/lib"
  import {pubkey} from "@welshman/app"
  import CheckCircle from "@assets/icons/check-circle.svg?dataurl"
  import Icon from "@lib/components/Icon.svelte"
  import RelayName from "@app/components/RelayName.svelte"
  import RelayIcon from "@app/components/RelayIcon.svelte"
  import RelayDescription from "@app/components/RelayDescription.svelte"
  import ProfileCircles from "@app/components/ProfileCircles.svelte"
  import {deriveGroupListPubkeys, deriveUserRooms} from "@app/groups"

  type Props = {
    url: string
    hideFavorites?: boolean
  }

  const {url, hideFavorites}: Props = $props()
  const rooms = deriveUserRooms(url)
  const favorited = deriveGroupListPubkeys(url)
</script>

<div class="flex flex-col gap-4 text-left">
  <div class="flex flex-col gap-2">
    <div class="relative flex gap-2 sm:gap-4">
      <div class="relative">
        <div class="relative">
          <div
            class="flex justify-center items-center h-12 w-12 min-w-12 rounded-full border-2 border-solid bg-surface-more border-line">
            <RelayIcon {url} size={10} class="rounded-full" />
          </div>
        </div>
        {#if $rooms.includes(url)}
          <div
            class="tip absolute -right-1 -top-1 h-5 w-5 rounded-full bg-primary text-primary-content"
            data-tip="You are already a member of this space.">
            <Icon icon={CheckCircle} class="scale-110" />
          </div>
        {/if}
      </div>
      <div class="min-w-0">
        <RelayName {url} class="truncate whitespace-nowrap text-lg sm:text-xl" />
        <p class="text-xs sm:text-sm opacity-75">{url}</p>
      </div>
    </div>
    <div class="text-sm sm:text-md">
      <RelayDescription {url} />
    </div>
  </div>
  {#if !hideFavorites && $favorited.size > 0}
    <div class="flex gap-2 card card-sm">
      Favorited By:
      <ProfileCircles pubkeys={remove($pubkey!, Array.from($favorited))} />
    </div>
  {/if}
</div>