malice

<script lang="ts">

  import { tick } from 'svelte';

  import MessageRow from './MessageRow.svelte';

  import EmojiText from './EmojiText.svelte';

  import { editMessage, markRead, paginateRoom, reactToMessage, sendMessage } from './api';

  import { pushBanner, threadKey, threadTimelines, timelines } from './store';

  import { pinnedThreads, togglePinnedThread } from './threads';

  import type { ImagePack, LinkPreview, Person, QuickReaction, ReplyReference, TimelineEvent, TimelineItem } from './types';

  export let roomId: string;

  export let rootEventId: string;

  export let roomName: string;

  export let joined: boolean;

  export let self: string | null;

  export let people: Record<string, Person> = {};

  export let senderAvatarFor: (userId: string) => string | null = () => null;

  export let quickReactions: QuickReaction[] = [];

  export let packs: ImagePack[] = [];

  export let linkPreviews: Record<string, LinkPreview | null> = {};

  export let loadPreview: ((url: string) => void) | null = null;

  export let onQuickChange: (list: QuickReaction[]) => void = () => {};

  export let onUser: ((userId: string, x: number, y: number, menu: boolean) => void) | null = null;

  export let onMore: ((event: TimelineEvent, x: number, y: number) => void) | null = null;

  export let onClose: () => void;

  const GROUP_GAP_MS = 5 * 60 * 1000;

  let list: HTMLDivElement | null = null;

  let composerEl: HTMLTextAreaElement | null = null;

  let draft = '';

  let replyingTo: ReplyReference | null = null;

  let editing: { eventId: string } | null = null;

  let sending = false;

  let paginating = false;

  let reacting = false;

  let stickToBottom = true;

  let lastRead = '';

  $: key = threadKey(roomId, rootEventId);

  $: items = $threadTimelines[key] ?? [];

  $: roomRoot = ($timelines[roomId] ?? []).find((item) => item.kind === 'event' && item.event.event_id === rootEventId) ?? null;

  $: events = threadEvents(items, roomRoot);

  $: hasStart = items.some((item) => item.kind === 'start');

  $: pinned = ($pinnedThreads[roomId] ?? []).includes(rootEventId);

  $: if (key) reset();

  $: void follow(events);

  function threadEvents(list: TimelineItem[], root: TimelineItem | null): TimelineEvent[] {

    const out = list.flatMap((item) => (item.kind === 'event' ? [item.event] : []));

    if (root?.kind === 'event' && !out.some((event) => event.event_id === rootEventId)) out.unshift(root.event);

    return out;

  }

  function showSender(index: number): boolean {

    if (index === 0) return true;

    const prev = events[index - 1];

    const cur = events[index];

    return prev.sender.user_id !== cur.sender.user_id || Math.abs(cur.timestamp_ms - prev.timestamp_ms) > GROUP_GAP_MS;

  }

  function reset(): void {

    draft = '';

    replyingTo = null;

    editing = null;

    stickToBottom = true;

    lastRead = '';

  }

  async function follow(_events: TimelineEvent[]): Promise<void> {

    await tick();

    if (list && stickToBottom) list.scrollTop = list.scrollHeight;

    sendReceipt();

  }

  function sendReceipt(): void {

    if (document.hidden || !document.hasFocus() || !stickToBottom) return;

    const latest = [...events].reverse().find((event) => event.event_id);

    if (!latest?.event_id || latest.event_id === lastRead) return;

    lastRead = latest.event_id;

    markRead(roomId, latest.event_id, rootEventId).catch(() => undefined);

  }

  function onScroll(): void {

    if (!list) return;

    const wasAtBottom = stickToBottom;

    stickToBottom = list.scrollHeight - list.scrollTop - list.clientHeight < 2;

    if (stickToBottom && !wasAtBottom) sendReceipt();

    if (list.scrollTop < 60 && !hasStart) void paginate();

  }

  async function paginate(): Promise<void> {

    if (paginating) return;

    paginating = true;

    try {

      await paginateRoom(roomId, rootEventId);

    } catch (e) {

      pushBanner(e instanceof Error ? e.message : 'Loading older replies failed');

    } finally {

      paginating = false;

    }

  }

  async function react(eventId: string, emoji: string, shortcode?: string): Promise<void> {

    if (reacting) return;

    reacting = true;

    try {

      await reactToMessage(roomId, eventId, emoji, shortcode, rootEventId);

    } catch (e) {

      pushBanner(e instanceof Error ? e.message : 'Reaction failed');

    } finally {

      reacting = false;

    }

  }

  function startReply(target: ReplyReference): void {

    editing = null;

    replyingTo = target;

    composerEl?.focus();

  }

  function startEdit(eventId: string, body: string): void {

    replyingTo = null;

    editing = { eventId };

    draft = body;

    void tick().then(() => composerEl?.focus());

  }

  async function submit(): Promise<void> {

    const body = draft.trim();

    if (!body || sending) return;

    sending = true;

    const reply = replyingTo;

    const edit = editing;

    try {

      if (edit) await editMessage(roomId, edit.eventId, body, [], [], rootEventId);

      else await sendMessage(roomId, body, reply?.event_id ?? null, [], 'text', [], rootEventId);

      draft = '';

      replyingTo = null;

      editing = null;

      stickToBottom = true;

    } catch (e) {

      pushBanner(e instanceof Error ? e.message : 'Sending to the thread failed');

    } finally {

      sending = false;

    }

  }

  function onKey(e: KeyboardEvent): void {

    if (e.key === 'Enter' && !e.shiftKey && !e.isComposing) {

      e.preventDefault();

      void submit();

    } else if (e.key === 'Escape' && (editing || replyingTo)) {

      e.preventDefault();

      if (editing) draft = '';

      editing = null;

      replyingTo = null;

    }

  }

  function grow(node: HTMLTextAreaElement, _value: string) {

    const fit = () => {

      node.style.height = 'auto';

      node.style.height = `${Math.min(node.scrollHeight, 200)}px`;

    };

    fit();

    return { update: fit };

  }

</script>

<svelte:window on:focus={sendReceipt} />

<svelte:document on:visibilitychange={sendReceipt} />

<aside class="thread-pane" aria-label={`Thread in ${roomName}`}>

  <header class="thread-head">

    <h2>Thread</h2>

    <span class="thread-room"><EmojiText text={roomName} /></span>

    <span class="spacer"></span>

    <button

      type="button"

      class="icon-btn"

      class:active={pinned}

      aria-pressed={pinned}

      aria-label={pinned ? 'Unpin thread' : 'Pin thread'}

      title={pinned ? 'Unpin thread' : 'Pin thread'}

      on:click={() => void togglePinnedThread(roomId, rootEventId)}

    >

      <svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true"><path d="M9 3h6l-1 6 4 4v2h-5v6l-1 1-1-1v-6H6v-2l4-4z" fill={pinned ? 'currentColor' : 'none'} stroke="currentColor" stroke-width="1.8" stroke-linejoin="round" /></svg>

    </button>

    <button type="button" class="icon-btn" aria-label="Close thread" on:click={onClose}>

      <span aria-hidden="true">✕</span>

    </button>

  </header>

  <div class="thread-list" bind:this={list} on:scroll={onScroll}>

    {#if !hasStart && events.length > 1}

      <button type="button" class="ghost-btn older" disabled={paginating} on:click={() => void paginate()}>

        {paginating ? 'Loading…' : 'Load older replies'}

      </button>

    {/if}

    {#if events.length === 0}

      <p class="side-note">Loading thread…</p>

    {/if}

    {#each events as event, i (event.item_id || event.event_id)}

      <div class:root={event.event_id === rootEventId}>

        <MessageRow

          itemId={`thread-${event.item_id || event.event_id}`}

          {event}

          showSender={showSender(i) || event.event_id === rootEventId}

          senderAvatar={senderAvatarFor(event.sender.user_id) ?? event.sender.avatar}

          {reacting}

          onReact={(eventId, emoji, shortcode) => void react(eventId, emoji, shortcode)}

          {quickReactions}

          {packs}

          {linkPreviews}

          {loadPreview}

          {onQuickChange}

          {people}

          {self}

          {onUser}

          {onMore}

          onReply={joined ? startReply : null}

          onEdit={joined ? startEdit : null}

          editing={editing?.eventId === event.event_id}

          showSent={false}

        />

      </div>

    {/each}

  </div>

  {#if joined}

    <form class="thread-composer" on:submit|preventDefault={() => void submit()}>

      {#if replyingTo || editing}

        <div class="thread-context">

          <span>{editing ? 'Editing' : 'Replying'}</span>

          <button type="button" class="icon-btn" aria-label="Cancel" on:click={() => { if (editing) draft = ''; editing = null; replyingTo = null; }}>

            <span aria-hidden="true">✕</span>

          </button>

        </div>

      {/if}

      <div class="thread-input">

        <textarea

          bind:this={composerEl}

          bind:value={draft}

          use:grow={draft}

          rows="1"

          placeholder="Reply in thread"

          aria-label="Reply in thread"

          on:keydown={onKey}

        ></textarea>

        <button type="submit" class="primary-btn" disabled={sending || !draft.trim()}>{editing ? 'Save' : 'Send'}</button>

      </div>

    </form>

  {/if}

</aside>

<style>

  .thread-pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; height: 100%; background: var(--bg-elev, var(--bg)); border-left: 1px solid var(--border); animation: pop-in var(--pop); }

  .thread-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--border); }

  .thread-head h2 { margin: 0; font-size: 14px; font-weight: 650; }

  .thread-room { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .spacer { flex: 1; }

  .icon-btn.active { color: var(--accent); }

  .thread-list { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 10px; }

  .older { display: block; margin: 0 auto 8px; }

  .root { padding-bottom: 6px; margin-bottom: 6px; border-bottom: 1px solid var(--border); }

  .thread-composer { border-top: 1px solid var(--border); padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; }

  .thread-context { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--muted); }

  .thread-input { display: flex; align-items: flex-end; gap: 8px; }

  .thread-input textarea { flex: 1; min-width: 0; resize: none; background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--text); padding: 7px 9px; line-height: 1.4; }

  .thread-input textarea:focus { outline: none; border-color: var(--accent); }

</style>