malice

<script lang="ts">

  import { onDestroy, onMount, tick } from 'svelte';

  import { eventContextAfter, eventContextBefore } from './api';

  import EmojiText from './EmojiText.svelte';

  import MessageRow from './MessageRow.svelte';

  import { formatDay } from './format';

  import { TimelineViewport } from './timeline-viewport';

  import type { EventContext, TimelineEvent, TimelineItem } from './types';

  export let context: EventContext;

  export let roomId: string;

  export let eventId: string;

  export let roomName: string;

  export let self: string | null = null;

  export let canPaginate = true;

  export let onClose: () => void;

  export let onLive: (roomId: string) => void;

  export let closeLabel = 'Back to mentions';

  let rows: TimelineItem[] = [];

  let beforeToken: string | null = null;

  let afterToken: string | null = null;

  let beforeEnded = false;

  let afterEnded = false;

  let beforeExtended = false;

  let afterExtended = false;

  let beforeBusy = false;

  let afterBusy = false;

  let error = '';

  let list: HTMLDivElement;

  let contentNode: HTMLDivElement;

  let backButton: HTMLButtonElement;

  let viewport: TimelineViewport | null = null;

  let observer: ResizeObserver | null = null;

  let generation = 0;

  let mounted = false;

  let alive = true;

  let identity = '';

  let centered = false;

  const stable = (event: TimelineEvent) => event.event_id || event.item_id;

  const key = (item: TimelineItem) => item.kind === 'event'

    ? `event-${stable(item.event)}`

    : item.kind === 'day' ? `day-${item.timestamp_ms}` : item.kind;

  function normalize(items: TimelineItem[]): TimelineItem[] {

    const seen = new Set<string>();

    const result: TimelineItem[] = [];

    for (const item of items) {

      if (item.kind === 'readMarker' || item.kind === 'start' || item.kind === 'unknown') continue;

      if (item.kind === 'event') {

        const eventKey = stable(item.event);

        if (seen.has(eventKey)) continue;

        seen.add(eventKey);

      }

      result.push(item);

    }

    return result;

  }

  function merge(base: TimelineItem[], incoming: TimelineItem[]): TimelineItem[] {

    const events = new Map<string, TimelineItem>();

    const days = new Map<number, TimelineItem>();

    for (const item of [...base, ...incoming]) {

      if (item.kind === 'event') events.set(stable(item.event), item);

      else if (item.kind === 'day') days.set(item.timestamp_ms, item);

    }

    return [...events.values(), ...days.values()].sort((a, b) => timestamp(a) - timestamp(b));

  }

  function timestamp(item: TimelineItem): number {

    if (item.kind === 'event') return item.event.timestamp_ms;

    if (item.kind === 'day') return item.timestamp_ms;

    return 0;

  }

  function refresh(next: EventContext): void {

    const nextIdentity = `${roomId}\u0000${eventId}`;

    if (identity !== nextIdentity) {

      generation++;

      identity = nextIdentity;

      rows = [];

      beforeToken = null;

      afterToken = null;

      beforeEnded = false;

      afterEnded = false;

      beforeExtended = false;

      afterExtended = false;

      beforeBusy = false;

      afterBusy = false;

      error = '';

      centered = false;

    }

    const request = generation;

    viewport?.capture();

    const initial = normalize([...next.events_before, ...(next.event ? [next.event] : []), ...next.events_after]);

    rows = rows.length ? merge(rows, initial) : initial;

    if (!beforeExtended) {

      beforeToken = next.start_token;

      beforeEnded = !beforeToken;

    }

    if (!afterExtended) {

      afterToken = next.end_token;

      afterEnded = !afterToken;

    }

    tick().then(() => {

      if (!alive || request !== generation) return;

      viewport?.restore();

    });

  }

  $: if (context) {

    roomId;

    eventId;

    refresh(context);

  }

  $: if (mounted && list) {

    context;

    const anchorRoom = roomId;

    const anchorEvent = eventId;

    tick().then(() => {

      if (!alive || anchorRoom !== roomId || anchorEvent !== eventId || !context) return;

      if (!centered) {

        const target = list.querySelector<HTMLElement>('[data-target="true"]');

        target?.scrollIntoView({ block: 'center', behavior: 'auto' });

        centered = true;

        viewport?.capture();

      }

    });

  }

  async function load(direction: 'before' | 'after'): Promise<void> {

    const token = direction === 'before' ? beforeToken : afterToken;

    if (!token || !canPaginate || (direction === 'before' ? beforeBusy : afterBusy)) return;

    const request = generation;

    if (direction === 'before') beforeBusy = true;

    else afterBusy = true;

    error = '';

    try {

      const requestedRoom = roomId;

      const requestedEvent = eventId;

      const page = direction === 'before'

        ? await eventContextBefore(requestedRoom, requestedEvent, token, 20)

        : await eventContextAfter(requestedRoom, requestedEvent, token, 20);

      if (!alive || request !== generation || requestedRoom !== roomId || requestedEvent !== eventId) return;

      viewport?.capture();

      rows = merge(rows, page.events);

      if (direction === 'before') {

        beforeExtended = true;

        beforeToken = page.next_token;

        beforeEnded = page.end_reached || !page.next_token;

      } else {

        afterExtended = true;

        afterToken = page.next_token;

        afterEnded = page.end_reached || !page.next_token;

      }

      await tick();

      if (alive && request === generation) viewport?.restore();

    } catch (cause) {

      if (alive && request === generation) error = cause instanceof Error ? cause.message : 'Could not load messages';

    } finally {

      if (alive && request === generation) {

        if (direction === 'before') beforeBusy = false;

        else afterBusy = false;

      }

    }

  }

  function handleScroll(): void {

    if (!viewport?.consumeScroll()) viewport?.capture();

  }

  onDestroy(() => {

    alive = false;

    generation++;

    observer?.disconnect();

    viewport?.releaseScroll();

  });

  onMount(() => {

    mounted = true;

    tick().then(() => {

      if (!alive || !list) return;

      viewport = new TimelineViewport(list, roomId);

      observer = new ResizeObserver(() => viewport?.restore());

      if (contentNode) observer.observe(contentNode);

      backButton?.focus();

    });

  });

</script>

<section class="context-timeline">

  <header>

    <button bind:this={backButton} onclick={onClose}><EmojiText text={closeLabel} /></button>

    <strong><EmojiText text={roomName} /></strong>

    <button disabled={!canPaginate} onclick={() => onLive(roomId)}>Go to current messages</button>

  </header>

  {#if error}<div class="error" role="alert"><EmojiText text={error} /></div>{/if}

  <button class="page-control" disabled={!beforeToken || beforeEnded || beforeBusy || !canPaginate} onclick={() => load('before')}>

    {beforeBusy ? 'Loading…' : 'Load earlier messages'}

  </button>

  <div class="messages" bind:this={list} onscroll={handleScroll}>

    <div class="content" bind:this={contentNode}>

      {#each rows as item (key(item))}

        {#if item.kind === 'day'}

          <div class="day"><span><EmojiText text={formatDay(item.timestamp_ms)} /></span></div>

        {:else if item.kind === 'event'}

          <div class:mentioned={item.event.event_id === eventId} aria-label={item.event.event_id === eventId ? 'Mentioned message' : undefined} data-target={item.event.event_id === eventId ? 'true' : undefined}>

            <MessageRow itemId={stable(item.event)} event={item.event} showSender={true} reacting={false} onReact={() => {}} readOnly={true} showSent={false} {self} senderAvatar={item.event.sender.avatar} />

          </div>

        {/if}

      {/each}

    </div>

  </div>

  <button class="page-control" disabled={!afterToken || afterEnded || afterBusy || !canPaginate} onclick={() => load('after')}>

    {afterBusy ? 'Loading…' : 'Load later messages'}

  </button>

</section>

<style>

  .context-timeline { display:flex; flex-direction:column; min-width:0; min-height:0; height:100%; }

  header { display:flex; align-items:center; gap:.6rem; padding:.5rem; border-bottom:1px solid var(--border); flex-wrap:wrap; }

  header strong { flex:1; min-width:0; overflow-wrap:anywhere; }

  button { color:var(--text); background:var(--panel); border:1px solid var(--border); border-radius:.4rem; padding:.4rem .65rem; cursor:pointer; }

  button:disabled { opacity:.55; cursor:default; }

  .messages { flex:1; min-height:0; overflow:auto; overflow-anchor:none; padding:.5rem; }

  .content { min-width:0; }

  .mentioned { outline:2px solid var(--accent); border-radius:.5rem; }

  .day { display:flex; align-items:center; gap:.6rem; color:var(--muted); font-size:.8rem; margin:.75rem 0; }

  .day::before,.day::after { content:''; height:1px; background:var(--border); flex:1; }

  .page-control { align-self:center; margin:.4rem; }

  .error { color:var(--danger); padding:.5rem; overflow-wrap:anywhere; }

</style>