flotilla/src/routes/spaces/[relay]/calendar/+page.svelte

<script lang="ts">
  import {onMount} from "svelte"
  import type {Readable} from "svelte/store"
  import {readable} from "svelte/store"
  import {page} from "$app/stores"
  import {now, last, formatTimestampAsDate} from "@welshman/lib"
  import type {TrustedEvent} from "@welshman/util"
  import {EVENT_TIME, tagValue, tagSpec} from "@welshman/util"
  import {fly} from "@lib/transition"
  import CalendarMinimalistic from "@assets/icons/calendar-minimalistic.svg?dataurl"
  import Add from "@assets/icons/add.svg?dataurl"
  import Icon from "@lib/components/Icon.svelte"
  import Button from "@lib/components/Button.svelte"
  import Spinner from "@lib/components/Spinner.svelte"
  import PageContent from "@lib/components/PageContent.svelte"
  import Divider from "@lib/components/Divider.svelte"
  import SpaceBar from "@app/components/SpaceBar.svelte"
  import CalendarEventItem from "@app/components/CalendarEventItem.svelte"
  import CalendarEventCreate from "@app/components/CalendarEventCreate.svelte"
  import {pushModal} from "@app/modal"
  import {decodeRelay} from "@app/relays"
  import {makeCommentFilter} from "@app/content"
  import {makeCalendarFeed} from "@app/feeds"

  const url = decodeRelay($page.params.relay!)

  const makeEvent = () => pushModal(CalendarEventCreate, {url})

  const getStart = (event: TrustedEvent) => parseInt(tagValue(tagSpec("start"), event.tags) || "")

  let element: HTMLElement | undefined = $state()
  let loading = $state(true)
  let events: Readable<TrustedEvent[]> = $state(readable([]))

  type Item = {
    event: TrustedEvent
    dateDisplay?: string
    isFirstFutureEvent?: boolean
  }

  const items = $derived.by(() => {
    const todayDateDisplay = formatTimestampAsDate(now())

    let haveISeenTheFuture = false
    let prevDateDisplay: string

    return $events
      .filter(event => !isNaN(getStart(event)))
      .map<Item>(event => {
        const newDateDisplay = formatTimestampAsDate(getStart(event))
        const dateDisplay = prevDateDisplay === newDateDisplay ? undefined : newDateDisplay
        const isFuture = todayDateDisplay === newDateDisplay || event.created_at > now()
        const isFirstFutureEvent = !haveISeenTheFuture && isFuture

        prevDateDisplay = newDateDisplay
        haveISeenTheFuture = isFuture

        return {event, dateDisplay, isFirstFutureEvent}
      })
  })

  let previousScrollHeight = 0
  let prevFirstEventId = ""
  let initialScrollDone = false

  $effect(() => {
    if (items.length === 0) {
      return
    }

    if (initialScrollDone) {
      // If new events are prepended, adjust the scroll position so that the viewport content remains anchored
      if (prevFirstEventId && items[0].event.id !== prevFirstEventId) {
        const newScrollHeight = element!.scrollHeight
        const delta = newScrollHeight - previousScrollHeight

        if (delta > 0) {
          element!.scrollTop += delta
        }
      }
    } else {
      const {event} = items.find(({event}) => getStart(event) >= now()) || last(items)
      const {offsetTop, clientHeight} = document.querySelector(
        ".calendar-event-" + event.id,
      ) as HTMLElement

      // On initial load, center the scroll container on today's date (or the next available event)
      element!.scrollTop = offsetTop - element!.clientHeight / 2 + clientHeight / 2
      initialScrollDone = true
    }

    previousScrollHeight = element!.scrollHeight
    prevFirstEventId = items[0].event.id
  })

  onMount(() => {
    const feed = makeCalendarFeed({
      relays: [url],
      element: element!,
      filters: [{kinds: [EVENT_TIME]}, makeCommentFilter([EVENT_TIME])],
      onExhausted: () => {
        loading = false
      },
    })

    events = feed.events

    return () => {
      feed.cleanup()
    }
  })
</script>

<SpaceBar>
  {#snippet leading()}
    <Icon icon={CalendarMinimalistic} />
  {/snippet}
  {#snippet title()}
    <strong>Calendar</strong>
  {/snippet}
  {#snippet action()}
    <Button class="button button-primary button-sm" onclick={makeEvent}>
      <Icon icon={Add} />
      Create
    </Button>
  {/snippet}
</SpaceBar>

<PageContent bind:element class="flex flex-col gap-2 p-2 sm:px-4">
  {#each items as { event, dateDisplay, isFirstFutureEvent }, i (event.id)}
    <div class="flex flex-col gap-2 calendar-event-{event.id}">
      {#if isFirstFutureEvent}
        <div class="flex items-center gap-2 p-2">
          <div class="h-px grow bg-primary text-primary-content"></div>
          <p class="text-xs uppercase text-primary">Today</p>
          <div class="h-px grow bg-primary text-primary-content"></div>
        </div>
      {/if}
      {#if dateDisplay}
        <Divider>{dateDisplay}</Divider>
      {/if}
      <CalendarEventItem {url} {event} />
    </div>
  {/each}
  {#if loading}
    <p class="flex h-10 items-center justify-center py-20" transition:fly>
      <Spinner {loading}>Looking for events...</Spinner>
    </p>
  {:else if items.length === 0}
    <p class="flex h-10 items-center justify-center py-20" transition:fly>No events found.</p>
  {:else}
    <p class="flex h-10 items-center justify-center py-20" transition:fly>That's all!</p>
  {/if}
</PageContent>