flotilla/src/app/components/RoomDetail.svelte

<script lang="ts">
  import {displayRelayUrl} from "@welshman/util"
  import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
  import LinkRound from "@assets/icons/link-round.svg?dataurl"
  import EyeClosed from "@assets/icons/eye-closed.svg?dataurl"
  import Eye from "@assets/icons/eye.svg?dataurl"
  import MinusCircle from "@assets/icons/minus-circle.svg?dataurl"
  import Lock from "@assets/icons/lock.svg?dataurl"
  import Microphone from "@assets/icons/microphone.svg?dataurl"
  import Bookmark from "@assets/icons/bookmark.svg?dataurl"
  import Bell from "@assets/icons/bell.svg?dataurl"
  import Icon from "@lib/components/Icon.svelte"
  import Button from "@lib/components/Button.svelte"
  import MenuButton from "@lib/components/MenuButton.svelte"
  import Tooltip from "@lib/components/Tooltip.svelte"
  import Modal from "@lib/components/Modal.svelte"
  import ModalBody from "@lib/components/ModalBody.svelte"
  import ModalFooter from "@lib/components/ModalFooter.svelte"
  import ProfileCircles from "@app/components/ProfileCircles.svelte"
  import RoomMembers from "@app/components/RoomMembers.svelte"
  import RoomDetailMenu from "@app/components/RoomDetailMenu.svelte"
  import RoomInvite from "@app/components/RoomInvite.svelte"
  import RoomName from "@app/components/RoomName.svelte"
  import RoomImage from "@app/components/RoomImage.svelte"
  import {deriveRoom, deriveUserRooms, addRoom, removeRoom} from "@app/groups"
  import {deriveRoomMembers, deriveUserIsRoomAdmin} from "@app/members"
  import {deriveShouldNotify, toggleRoomNotifications} from "@app/settings"
  import {pushModal} from "@app/modal"

  type Props = {
    url: string
    h: string
  }

  const {url, h}: Props = $props()

  const room = deriveRoom(url, h)
  const members = deriveRoomMembers(url, h)
  const userRooms = deriveUserRooms(url)
  const userIsAdmin = deriveUserIsRoomAdmin(url, h)

  const isFavorite = $derived($userRooms.includes(h))
  const shouldNotify = deriveShouldNotify(url, h)

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

  const showMembers = () => pushModal(RoomMembers, {url, h})

  const createInvite = () => pushModal(RoomInvite, {url, h})

  const toggleFavorite = () => {
    if (isFavorite) {
      removeRoom(url, h)
    } else {
      addRoom(url, h)
    }
  }

  const toggleShouldNotify = () => {
    toggleRoomNotifications(url, h)
  }
</script>

<Modal>
  <ModalBody>
    <div class="flex justify-between">
      <div class="flex gap-3">
        <div class="pt-0.5">
          <RoomImage {url} {h} size={8} />
        </div>
        <div class="flex min-w-0 flex-col">
          <RoomName {url} {h} class="text-2xl" />
          <span class="text-primary">{displayRelayUrl(url)}</span>
        </div>
      </div>
      <MenuButton component={RoomDetailMenu} componentProps={{url, h}} />
    </div>
    {#if $room?.about}
      <p>{$room.about}</p>
    {/if}
    <div class="flex flex-col gap-2 card card-sm">
      <strong class="text-lg">Room Permissions</strong>
      <div class="flex gap-2 flex-wrap">
        {#if $room?.isRestricted}
          <Tooltip content="Only members can send messages.">
            <Button class="button button-neutral button-xs button-pill flex gap-2 items-center">
              <Icon size={4} icon={Microphone} /> Restricted
            </Button>
          </Tooltip>
        {/if}
        {#if $room?.isPrivate}
          <Tooltip content="Only members can view messages.">
            <Button class="button button-neutral button-xs button-pill flex gap-2 items-center">
              <Icon size={4} icon={Lock} /> Private
            </Button>
          </Tooltip>
        {/if}
        {#if $room?.isHidden}
          <Tooltip content="This room is not visible to non-members.">
            <Button class="button button-neutral button-xs button-pill flex gap-2 items-center">
              <Icon size={4} icon={EyeClosed} /> Hidden
            </Button>
          </Tooltip>
        {/if}
        {#if $room?.isClosed}
          <Tooltip content="Requests to join this room will be ignored.">
            <Button class="button button-neutral button-xs button-pill flex gap-2 items-center">
              <Icon size={4} icon={MinusCircle} /> Closed
            </Button>
          </Tooltip>
        {/if}
        {#if !$room?.isRestricted && !$room?.isPrivate && !$room?.isHidden && !$room?.isClosed}
          <Tooltip content="This room has no additional access controls.">
            <Button class="button button-neutral button-xs button-pill flex gap-2 items-center">
              <Icon size={4} icon={Eye} /> Public
            </Button>
          </Tooltip>
        {/if}
      </div>
    </div>
    {#if $members !== undefined && $members.length > 0}
      <div class="card card-sm flex flex-col gap-3">
        <div class="flex items-center justify-between gap-4">
          <div class="flex min-w-0 items-center gap-4">
            <span class="shrink-0">Members:</span>
            <ProfileCircles pubkeys={$members} class="min-w-0 overflow-hidden" />
          </div>
          <Button class="button button-neutral button-sm shrink-0" onclick={showMembers}
            >View All</Button>
        </div>
        {#if $userIsAdmin}
          <Button class="button button-neutral" onclick={createInvite}>
            <Icon icon={LinkRound} />
            Create invite
          </Button>
        {/if}
      </div>
    {:else if $members === undefined}
      <div class="card card-sm bg-surface flex items-center gap-4">
        <span class="text-error">Member list not available from this relay</span>
      </div>
    {/if}
    <div class="card card-sm flex flex-col gap-4">
      <strong class="text-lg">Room Settings</strong>
      <div class="flex items-center justify-between">
        <div class="flex items-center gap-2">
          <Icon icon={Bell} />
          <span>Notifications</span>
        </div>
        <input
          type="checkbox"
          class="toggle"
          checked={$shouldNotify}
          onchange={toggleShouldNotify} />
      </div>
      <div class="flex items-center justify-between">
        <div class="flex items-center gap-2">
          <Icon icon={Bookmark} />
          <span>Favorite</span>
        </div>
        <input type="checkbox" class="toggle" checked={isFavorite} onchange={toggleFavorite} />
      </div>
    </div>
  </ModalBody>
  <ModalFooter>
    <Button class="button button-link" onclick={back}>
      <Icon icon={AltArrowLeft} />
      Go back
    </Button>
  </ModalFooter>
</Modal>