malice

<script lang="ts" context="module">

  import { sessionUser } from './store';

  import { releaseStaged as release } from './staging';

  import type { Mention } from './mentions';

  import type { StagedAttachment } from './staging';

  interface ThreadDraft {

    text: string;

    picked: Mention[];

    staged: StagedAttachment[];

  }

  const drafts = new Map<string, ThreadDraft>();

  let draftAccount: string | null | undefined;

  sessionUser.subscribe((user) => {

    if (user === draftAccount) return;

    draftAccount = user;

    for (const saved of drafts.values()) release(saved.staged);

    drafts.clear();

  });

</script>

<script lang="ts">

  import { tick } from 'svelte';

  import MessageRow from './MessageRow.svelte';

  import EmojiText from './EmojiText.svelte';

  import Composer from './Composer.svelte';

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

  import { parseCommand, unescapeCommand } from './commands';

  import { customEmotes, resolveEmotes } from './emotes';

  import { mentionsFromHtml, resolveMentions } from './mentions';

  import { releaseStaged, stageFiles } from './staging';

  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 onMentionStart: () => void = () => {};

  export let focusEventId: string | null = null;

  export let onClose: () => void;

  const GROUP_GAP_MS = 5 * 60 * 1000;

  let list: HTMLDivElement | null = null;

  let thread: HTMLDivElement | null = null;

  let composerRef: Composer | null = null;

  let draft = '';

  let picked: Mention[] = [];

  let staged: StagedAttachment[] = [];

  let replyingTo: ReplyReference | null = null;

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

  let sending = false;

  let uploadName: string | null = null;

  let loadedKey = '';

  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' || (item.kind === 'event' && item.event.event_id === rootEventId));

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

  $: emotes = customEmotes(packs);

  $: switchTo(key);

  $: void follow(events);

  let focused: string | null = null;

  $: void focusOn(focusEventId, 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 switchTo(next: string): void {

    if (next === loadedKey) return;

    if (loadedKey) drafts.set(loadedKey, { text: editing ? editing.stash : draft, picked, staged });

    loadedKey = next;

    const saved = drafts.get(next);

    draft = saved?.text ?? '';

    picked = saved?.picked ?? [];

    staged = saved?.staged ?? [];

    replyingTo = null;

    editing = null;

    stickToBottom = true;

    lastRead = '';

    focused = null;

  }

  async function focusOn(target: string | null, list: TimelineEvent[]): Promise<void> {

    if (!target || target === focused || !list.some((event) => event.event_id === target)) return;

    focused = target;

    stickToBottom = false;

    await tick();

    const row = list.length && thread ? thread.querySelector<HTMLElement>(`[data-event="${CSS.escape(target)}"]`) : null;

    if (!row) return;

    row.scrollIntoView({ block: 'center', behavior: 'smooth' });

    row.classList.remove('flash');

    void row.offsetWidth;

    row.classList.add('flash');

  }

  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 {

    if (editing) cancelEdit();

    replyingTo = target;

    composerRef?.focus();

  }

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

    const stash = editing ? editing.stash : draft;

    replyingTo = null;

    editing = { eventId, original: body, stash };

    const target = events.find((event) => event.event_id === eventId);

    if (target?.content.kind === 'Message') picked = [...picked, ...mentionsFromHtml(target.content.message.formatted_body)];

    draft = body;

    void composerRef?.focusEnd();

  }

  function cancelEdit(): void {

    if (!editing) return;

    draft = editing.stash;

    editing = null;

    composerRef?.focus();

  }

  function editLastOwn(): boolean {

    for (let i = events.length - 1; i >= 0; i -= 1) {

      const event = events[i];

      if (!event.own) continue;

      if (!event.editable || !event.event_id || event.content.kind !== 'Message' || event.content.message.kind !== 'Text') return false;

      startEdit(event.event_id, event.content.message.body);

      return true;

    }

    return false;

  }

  function stage(files: File[]): void {

    const accepted = stageFiles(files, pushBanner);

    if (accepted.length) staged = [...staged, ...accepted];

    composerRef?.focus();

  }

  function unstage(id: number): void {

    releaseStaged(staged.filter((a) => a.id === id));

    staged = staged.filter((a) => a.id !== id);

  }

  async function submit(): Promise<void> {

    if (sending) return;

    const body = draft.trim();

    if (editing) {

      const { eventId, original } = editing;

      cancelEdit();

      draft = '';

      if (!body || body === original.trim()) return;

      editMessage(roomId, eventId, body, resolveMentions(body, picked), resolveEmotes(body, emotes), rootEventId).catch((e) =>

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

      );

      picked = [];

      return;

    }

    const files = staged;

    if (!body && files.length === 0) return;

    const command = parseCommand(body);

    if (command && command.name !== 'me' && command.name !== 'notice') {

      pushBanner(`/${command.name} only works in the room composer`);

      return;

    }

    const text = command ? command.args : unescapeCommand(body);

    if (command && (!text || files.length)) {

      pushBanner(`/${command.name} needs something to say and no attachments`);

      return;

    }

    const reply = replyingTo;

    const mentions = resolveMentions(text, picked);

    const used = resolveEmotes(text, emotes);

    draft = '';

    picked = [];

    staged = [];

    replyingTo = null;

    stickToBottom = true;

    sending = true;

    try {

      if (files.length === 0) {

        await sendMessage(roomId, text, reply?.event_id ?? null, mentions, command ? (command.name === 'me' ? 'emote' : 'notice') : 'text', used, rootEventId);

      } else {

        let first = true;

        for (const attachment of files) {

          uploadName = attachment.file.name || 'attachment';

          try {

            if (first) await uploadAttachment(roomId, attachment.file, text || null, reply?.event_id ?? null, mentions, used, rootEventId);

            else await uploadAttachment(roomId, attachment.file, null, null, [], [], rootEventId);

            first = false;

          } catch (e) {

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

          }

        }

      }

    } catch (e) {

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

    } finally {

      releaseStaged(files);

      uploadName = null;

      sending = false;

    }

  }

</script>

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

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

<div class="thread-pane" bind:this={thread}>

  <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}

    <div class="thread-composer">

      <Composer

        bind:this={composerRef}

        bind:value={draft}

        inputId={`thread-composer-${rootEventId}`}

        label="Reply in thread"

        placeholder="Reply in thread"

        {picked}

        onPick={(mention) => (picked = [...picked, mention])}

        {staged}

        onStage={stage}

        onUnstage={unstage}

        uploadBusy={uploadName !== null}

        {uploadName}

        editing={editing ? { original: editing.original } : null}

        onCancelEdit={cancelEdit}

        {replyingTo}

        onCancelReply={() => (replyingTo = null)}

        {people}

        {self}

        {emotes}

        {packs}

        onSubmit={() => void submit()}

        onEditLast={editLastOwn}

        {onMentionStart}

      />

    </div>

  {/if}

</div>

<style>

  .thread-pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; height: 100%; 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 { flex: none; }

</style>