malice

<script lang="ts">

  import { slide } from 'svelte/transition';

  import EmojiText from './EmojiText.svelte';

  import PinButton from './PinButton.svelte';

  import { formatClock, formatDay } from './format';

  import { threadMatches } from './thread-index';

  import type { ThreadEntry } from './thread-index';

  import { togglePinnedThread } from './threads';

  export let roomId: string;

  export let threads: ThreadEntry[];

  export let query = '';

  export let activeRoot: string | null = null;

  export let onOpen: (rootEventId: string) => void;

  const COLLAPSED_LIMIT = 6;

  let showAll = false;

  $: matching = threads.filter((t) => threadMatches(t, query));

  $: shown = query || showAll ? matching : matching.slice(0, COLLAPSED_LIMIT);

  $: hidden = matching.length - shown.length;

  function label(t: ThreadEntry): string {

    return t.preview || (t.pinned ? 'Pinned thread' : 'Thread');

  }

</script>

<ul class="thread-fold" transition:slide={{ duration: 140 }} aria-label="Threads">

  {#each shown as t (t.root_event_id)}

    <li class="thread-item">

      <button

        type="button"

        class="thread-row"

        class:active={activeRoot === t.root_event_id}

        aria-current={activeRoot === t.root_event_id ? 'true' : undefined}

        on:click={() => onOpen(t.root_event_id)}

      >

        <span class="thread-preview"><EmojiText text={label(t)} /></span>

        {#if t.reply_count > 0}<span class="thread-meta">{t.reply_count}</span>{/if}

        {#if t.latest_ms}<time class="thread-meta" datetime={new Date(t.latest_ms).toISOString()}>{formatDay(t.latest_ms)} {formatClock(t.latest_ms)}</time>{/if}

      </button>

      <PinButton pinned={t.pinned} label={`thread ${label(t)}`} onToggle={() => void togglePinnedThread(roomId, t.root_event_id)} />

    </li>

  {/each}

  {#if hidden > 0}

    <li><button type="button" class="thread-more" on:click={() => (showAll = true)}>{hidden} more</button></li>

  {/if}

</ul>

<style>

  .thread-fold { list-style: none; margin: 0 0 2px 22px; padding: 0 0 0 8px; border-left: 1px solid var(--border); display: flex; flex-direction: column; gap: 1px; }

  .thread-item { display: flex; align-items: center; gap: 2px; }

  .thread-row { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 6px; padding: 3px 6px; border: none; border-radius: var(--r-sm); background: transparent; color: var(--muted); font: inherit; font-size: 12.5px; text-align: left; cursor: pointer; transition: background var(--pop), color var(--pop); }

  .thread-row:hover { background: var(--panel-2); color: var(--text); }

  .thread-row.active { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--text); }

  .thread-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

  .thread-preview { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .thread-meta { flex: none; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }

  .thread-item:hover :global(.pin-btn), .thread-item :global(.pin-btn.pinned) { opacity: 1; }

  .thread-more { border: none; background: transparent; color: var(--accent); font: inherit; font-size: 12px; padding: 2px 6px; cursor: pointer; }

</style>