flotilla/src/app/components/SpaceDetail.svelte

<script lang="ts">
  import {displayRelayUrl} from "@welshman/util"
  import {Relays} from "@welshman/app"
  import {app} from "@app/welshman"
  import UserRounded from "@assets/icons/user-rounded.svg?dataurl"
  import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
  import Pen from "@assets/icons/pen.svg?dataurl"
  import ShieldUser from "@assets/icons/shield-user.svg?dataurl"
  import BillList from "@assets/icons/bill-list.svg?dataurl"
  import Icon from "@lib/components/Icon.svelte"
  import Link from "@lib/components/Link.svelte"
  import Modal from "@lib/components/Modal.svelte"
  import ModalBody from "@lib/components/ModalBody.svelte"
  import ModalFooter from "@lib/components/ModalFooter.svelte"
  import Button from "@lib/components/Button.svelte"
  import RelayName from "@app/components/RelayName.svelte"
  import RelayIcon from "@app/components/RelayIcon.svelte"
  import SpaceEdit from "@app/components/SpaceEdit.svelte"
  import SpaceRelayStatus from "@app/components/SpaceRelayStatus.svelte"
  import RelayDescription from "@app/components/RelayDescription.svelte"
  import ProfileLatest from "@app/components/ProfileLatest.svelte"
  import {deriveUserIsSpaceAdmin} from "@app/members"
  import {pushModal} from "@app/modal"

  type Props = {
    url: string
  }

  const {url}: Props = $props()
  const relay = app.use(Relays).one(url)
  const owner = $derived($relay?.pubkey)
  const userIsAdmin = deriveUserIsSpaceAdmin(url)

  const back = () => history.back()

  const startEdit = () => pushModal(SpaceEdit, {url, initialValues: $relay || {url}})
</script>

<Modal>
  <ModalBody>
    <div class="flex justify-between">
      <div class="relative flex gap-4">
        <div class="relative">
          <div class="avatar relative">
            <div
              class="center flex! h-16 w-16 min-w-16 rounded-full border-2 border-solid border-base-300 bg-base-300">
              <RelayIcon {url} size={10} />
            </div>
          </div>
        </div>
        <div class="flex min-w-0 flex-col gap-1">
          <h1 class="ellipsize whitespace-nowrap text-2xl font-bold">
            <RelayName {url} />
          </h1>
          <p class="ellipsize text-sm opacity-75">{displayRelayUrl(url)}</p>
        </div>
      </div>
      {#if $userIsAdmin}
        <Button class="btn btn-primary" onclick={startEdit}>
          <Icon icon={Pen} />
          Edit
        </Button>
      {/if}
    </div>
    <RelayDescription {url} />
    {#if $relay?.terms_of_service || $relay?.privacy_policy}
      <div class="flex gap-3">
        {#if $relay.terms_of_service}
          <Link href={$relay.terms_of_service} class="badge badge-neutral flex gap-2">
            <Icon icon={BillList} size={4} />
            Terms of Service
          </Link>
        {/if}
        {#if $relay.privacy_policy}
          <Link href={$relay.privacy_policy} class="badge badge-neutral flex gap-2">
            <Icon icon={ShieldUser} size={4} />
            Privacy Policy
          </Link>
        {/if}
      </div>
    {/if}
    <SpaceRelayStatus {url} />
    <div class="flex flex-col gap-2">
      {#if owner}
        <div class="card2 bg-alt">
          <h3 class="mb-4 flex items-center gap-2 text-lg font-semibold">
            <Icon icon={UserRounded} />
            Latest Updates
          </h3>
          <ProfileLatest {url} pubkey={owner}>
            {#snippet fallback()}
              <p class="text-sm opacity-60">No recent posts from the relay admin</p>
            {/snippet}
          </ProfileLatest>
        </div>
      {/if}
    </div>
  </ModalBody>
  <ModalFooter>
    <Button class="btn btn-link" onclick={back}>
      <Icon icon={AltArrowLeft} />
      Go back
    </Button>
  </ModalFooter>
</Modal>