flotilla/src/app/components/RoomPinnedMessagesAll.svelte

<script lang="ts">
  import type {TrustedEvent} from "@welshman/util"
  import Pin from "@assets/icons/pin.svg?dataurl"
  import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
  import Icon from "@lib/components/Icon.svelte"
  import Button from "@lib/components/Button.svelte"
  import Modal from "@lib/components/Modal.svelte"
  import ModalBody from "@lib/components/ModalBody.svelte"
  import ModalHeader from "@lib/components/ModalHeader.svelte"
  import ModalTitle from "@lib/components/ModalTitle.svelte"
  import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
  import ModalFooter from "@lib/components/ModalFooter.svelte"
  import ProfileCircle from "@app/components/ProfileCircle.svelte"
  import ProfileName from "@app/components/ProfileName.svelte"
  import RoomItemContent from "@app/components/RoomItemContent.svelte"
  import RoomName from "@app/components/RoomName.svelte"
  import {deriveUserIsRoomAdmin} from "@app/members"
  import {
    deriveRoomPinIds,
    deriveRoomPinnedEvents,
    loadRoomPinList,
    loadRoomPinnedMessages,
    unpinRoomMessage,
  } from "@app/pins"
  import {goToEvent} from "@app/routes"
  import {pushToast} from "@app/toast"

  type Props = {
    url: string
    h: string
  }

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

  const pinIds = deriveRoomPinIds(url, h)
  const pinnedEvents = deriveRoomPinnedEvents(url, pinIds)
  const userIsAdmin = deriveUserIsRoomAdmin(url, h)

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

  const jumpToMessage = (event: TrustedEvent) => {
    back()
    goToEvent(event)
  }

  const unpin = async (event: TrustedEvent) => {
    const error = await unpinRoomMessage(url, h, event.id, $pinIds)

    if (error) {
      pushToast({theme: "error", message: error})
    } else {
      pushToast({message: "Message unpinned"})
    }
  }

  $effect(() => {
    const ids = $pinIds
    const controller = new AbortController()

    loadRoomPinList(url, h, controller.signal)
    loadRoomPinnedMessages(url, ids, controller.signal)

    return () => controller.abort()
  })
</script>

<Modal>
  <ModalBody>
    <ModalHeader>
      <ModalTitle>Pinned Messages</ModalTitle>
      <ModalSubtitle>
        in <RoomName {url} {h} class="text-primary" />
      </ModalSubtitle>
    </ModalHeader>
    <div class="flex flex-col gap-2">
      {#each $pinnedEvents as event (event.id)}
        {@const onUnpin = () => unpin(event)}
        {@const onJump = () => jumpToMessage(event)}
        <div class="card card-sm flex flex-col gap-3 p-4">
          <div class="flex items-start gap-3">
            <ProfileCircle pubkey={event.pubkey} {url} size={6} />
            <div class="min-w-0 flex-1">
              <p class="text-content-muted text-xs font-bold tracking-wide uppercase">
                Pinned message
              </p>
              <p class="truncate text-sm">
                <ProfileName pubkey={event.pubkey} {url} />
              </p>
            </div>
            <Icon icon={Pin} size={4} class="text-primary shrink-0 opacity-70" />
          </div>
          <RoomItemContent {url} {event} />
          <div class="flex flex-wrap items-center justify-end gap-2">
            {#if $userIsAdmin}
              <Button class="button button-link button-sm" onclick={onUnpin}>Unpin</Button>
            {/if}
            <Button class="button button-primary button-sm" onclick={onJump}>
              Jump to message
            </Button>
          </div>
        </div>
      {:else}
        <div class="card card-sm p-4">
          <p class="text-content-muted text-center text-sm">No pinned messages.</p>
        </div>
      {/each}
    </div>
  </ModalBody>
  <ModalFooter>
    <Button class="button button-link" onclick={back}>
      <Icon icon={AltArrowLeft} />
      Go back
    </Button>
  </ModalFooter>
</Modal>