malice

<script lang="ts">

  import { onDestroy, onMount } from 'svelte';

  import EmojiText from './EmojiText.svelte';

  import MessageRow from './MessageRow.svelte';

  import { closeSearch, searchMessages, searchMore } from './api';

  import { formatDay } from './format';

  import { groupByRoom } from './search-model';

  import type { ScopeOption, SearchCoverage, SearchHit, SearchPage } from './search-model';

  export let scopes: ScopeOption[];

  export let initialScope = 0;

  export let self: string | null = null;

  export let roomName: (roomId: string) => string;

  export let onOpen: (roomId: string, eventId: string, threadRoot: string | null) => void;

  let input: HTMLInputElement | null = null;

  let query = '';

  let scopeIndex = Math.min(initialScope, scopes.length - 1);

  let hits: SearchHit[] = [];

  let coverage: SearchCoverage | null = null;

  let next: string | null = null;

  let searchId: string | null = null;

  let searched = '';

  let busy = false;

  let error = '';

  let generation = 0;

  $: groups = groupByRoom(hits);

  $: partial = coverage?.rooms.filter((c) => !c.start_reached) ?? [];

  $: oldest = partial.reduce<number | null>((min, c) => (c.oldest_indexed_ms === null ? min : min === null ? c.oldest_indexed_ms : Math.max(min, c.oldest_indexed_ms)), null);

  onMount(() => input?.focus());

  onDestroy(() => dropSearch());

  function dropSearch(): void {

    if (searchId) void closeSearch(searchId).catch(() => undefined);

    searchId = null;

  }

  async function run(more = false): Promise<void> {

    const text = query.trim();

    if (!text) return;

    const run = ++generation;

    busy = true;

    error = '';

    try {

      let page: SearchPage;

      if (more && searchId && next) {

        page = await searchMore(searchId, next);

      } else {

        const session = await searchMessages(text, scopes[scopeIndex].scope);

        if (run !== generation) {

          void closeSearch(session.search_id).catch(() => undefined);

          return;

        }

        dropSearch();

        searchId = session.search_id;

        page = session.page;

      }

      if (run !== generation) return;

      hits = more ? [...hits, ...page.hits] : page.hits;

      coverage = page.coverage;

      next = page.next;

      searched = text;

    } catch (e) {

      if (run !== generation) return;

      if (!more) hits = [];

      error = e instanceof Error ? e.message : 'Search failed';

    } finally {

      if (run === generation) busy = false;

    }

  }

  function pickScope(index: number): void {

    scopeIndex = index;

    if (searched) void run();

  }

</script>

<section class="search-view" aria-label="Search messages">

  <form class="search-bar" on:submit|preventDefault={() => void run()}>

    <input bind:this={input} type="search" bind:value={query} placeholder="Search messages" aria-label="Search messages" />

    <button type="submit" class="primary-btn" disabled={busy || !query.trim()}>{busy && !hits.length ? 'Searching…' : 'Search'}</button>

  </form>

  <div class="scopes" role="radiogroup" aria-label="Search in">

    {#each scopes as option, i (option.label)}

      <button type="button" role="radio" aria-checked={i === scopeIndex} class:active={i === scopeIndex} on:click={() => pickScope(i)}>

        <EmojiText text={option.label} />

      </button>

    {/each}

  </div>

  {#if error}

    <p class="search-error" role="alert"><EmojiText text={error} /></p>

  {/if}

  <div class="results">

    {#if searched && !busy && !error && hits.length === 0}

      <p class="side-note">No messages match “<EmojiText text={searched} />”</p>

    {/if}

    {#each groups as group (group.room_id)}

      <h3 class="result-room"><EmojiText text={roomName(group.room_id)} /></h3>

      {#each group.hits as hit (hit.event_id)}

        <div

          class="result"

          role="link"

          tabindex="0"

          aria-label={`Open message in ${roomName(hit.room_id)}`}

          on:click={() => onOpen(hit.room_id, hit.event_id, hit.event.thread_root)}

          on:keydown={(e) => e.key === 'Enter' && onOpen(hit.room_id, hit.event_id, hit.event.thread_root)}

        >

          <MessageRow itemId={`search-${hit.event_id}`} event={hit.event} showSender={true} reacting={false} onReact={() => {}} readOnly={true} showSent={false} {self} />

        </div>

      {/each}

    {/each}

    {#if next}

      <button type="button" class="ghost-btn more" disabled={busy} on:click={() => void run(true)}>{busy ? 'Loading…' : 'More results'}</button>

    {/if}

    {#if searched && partial.length}

      <p class="coverage">Searched back to {oldest ? formatDay(oldest) : 'recent history'} in {partial.length === 1 ? 'one room' : `${partial.length} rooms`}</p>

    {/if}

  </div>

</section>

<style>

  .search-view { display: flex; flex-direction: column; min-height: 0; height: 100%; }

  .search-bar { display: flex; gap: 8px; padding: 12px 16px 8px; }

  .search-bar input { flex: 1; min-width: 0; background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--r-md); color: var(--text); padding: 8px 10px; font: inherit; }

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

  .scopes { display: flex; gap: 6px; padding: 0 16px 10px; border-bottom: 1px solid var(--border); }

  .scopes button { text-align: left; border: 1px solid var(--border); background: transparent; color: var(--muted); border-radius: var(--r-sm); padding: 3px 10px; font: inherit; font-size: 12.5px; cursor: pointer; transition: color var(--pop), border-color var(--pop), background var(--pop); }

  .scopes button:hover { color: var(--text); }

  .scopes button.active { color: var(--text); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); }

  .search-error { margin: 10px 16px 0; color: var(--danger); font-size: 13px; }

  .results { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 16px 16px; }

  .result-room { margin: 14px 0 4px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }

  .result { border-radius: var(--r-md); cursor: pointer; }

  .result:hover { background: var(--hover-faint); }

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

  .more { display: block; margin: 12px auto 0; }

  .coverage { margin: 14px 0 0; text-align: center; font-size: 12px; color: var(--muted); }

</style>