flotilla/src/routes/spaces/[nrelay]/[[topic]]/+page.svelte

<script lang="ts" context="module">
  type Element = {
    id: string
    type: "date" | "note"
    value: string | TrustedEvent
    showPubkey: boolean
  }
</script>

<script lang="ts">
  import {onMount} from "svelte"
  import {page} from "$app/stores"
  import {sortBy, now} from "@welshman/lib"
  import type {TrustedEvent, Filter} from "@welshman/util"
  import {formatTimestampAsDate} from "@welshman/app"
  import Icon from "@lib/components/Icon.svelte"
  import Button from "@lib/components/Button.svelte"
  import Spinner from "@lib/components/Spinner.svelte"
  import ChatMessage from "@app/components/ChatMessage.svelte"
  import ChatCompose from "@app/components/ChatCompose.svelte"
  import {userMembership, decodeNRelay, makeChatId, deriveChat, MESSAGE, REPLY} from "@app/state"
  import {addRoomMembership, removeRoomMembership} from "@app/commands"

  const {nrelay, topic = ""} = $page.params
  const url = decodeNRelay(nrelay)
  const chat = deriveChat(makeChatId(url, topic))

  const assertEvent = (e: any) => e as TrustedEvent

  let loading = true
  let elements: Element[] = []

  $: membership = $userMembership?.topicsByUrl.get(url) || []

  $: {
    elements = []

    let previousDate
    let previousPubkey

    for (const {event} of sortBy(m => m.event.created_at, $chat?.messages || [])) {
      const {id, pubkey, created_at} = event
      const date = formatTimestampAsDate(created_at)

      if (date !== previousDate) {
        elements.push({type: "date", value: date, id: date, showPubkey: false})
      }

      elements.push({
        id,
        type: "note",
        value: event,
        showPubkey: date !== previousDate || previousPubkey !== pubkey,
      })

      previousDate = date
      previousPubkey = pubkey
    }

    elements.reverse()
  }

  setTimeout(() => {
    loading = false
  }, 3000)
</script>

<div class="relative flex h-screen flex-col">
  <div class="relative z-feature mx-2 rounded-xl pt-4">
    <div class="flex min-h-12 justify-between items-center gap-4 rounded-xl bg-base-100 px-4 shadow-xl">
      <div class="flex items-center gap-2">
        <Icon icon="hashtag" />
        <strong>{topic || 'General'}</strong>
      </div>
      {#if topic}
        {#if membership.includes(topic)}
          <Button class="btn btn-sm btn-neutral" on:click={() => removeRoomMembership(url, topic)}>
            <Icon icon="arrows-a-logout-2" />
            Leave Room
          </Button>
        {:else}
          <Button class="btn btn-sm btn-neutral" on:click={() => addRoomMembership(url, topic)}>
            <Icon icon="login-2" />
            Join Room
          </Button>
        {/if}
      {/if}
    </div>
  </div>
  <div class="-mt-2 flex flex-grow flex-col-reverse overflow-auto py-2">
    {#each elements as { type, id, value, showPubkey } (id)}
      {#if type === "date"}
        <div class="flex items-center gap-2 p-2 text-xs opacity-50">
          <div class="h-px flex-grow bg-base-content opacity-25" />
          <p>{value}</p>
          <div class="h-px flex-grow bg-base-content opacity-25" />
        </div>
      {:else}
        <ChatMessage event={assertEvent(value)} {showPubkey} />
      {/if}
    {/each}
    <p class="flex h-10 items-center justify-center py-20">
      <Spinner {loading}>
        {#if loading}
          Looking for messages...
        {:else}
          End of message history
        {/if}
      </Spinner>
    </p>
  </div>
  <ChatCompose {url} {topic} />
</div>