malice

public

Star0

Fork 0

Watch0

84 commits 2 branches 0 tags 0 releases4.4 MiB

Commit `ba90983cec2e`

tarball

atagen <boss@atagen.co>2026-10-25 10:53 UTC

5 files changed+272-2

search: add the message search view ahead of macltok's index

Search gets its own view beside Mentions, reachable from the sidebar and the room header. It offers the current room, the current space and everywhere as scopes, groups hits by room and opens them through the same path as mentions, so thread hits land in the thread pane. The request and hit shapes follow the agreed macltok api behind one parser, and until the core op exists the view reports that search isn't available yet.

Modified file: web/src/App.svelte+50 additions−2 deletions@@ -8,6 +8,8 @@
   import PinButton from './lib/PinButton.svelte';
   import ThreadPane from './lib/ThreadPane.svelte';
   import Composer from './lib/Composer.svelte';
+  import SearchView from './lib/SearchView.svelte';
+  import type { ScopeOption } from './lib/search-model';
   import { releaseStaged, stageFiles as stageAttachments, type StagedAttachment, type StickerHandlers } from './lib/staging';
   import RoomThreads from './lib/RoomThreads.svelte';
   import { loadPinnedThreads, openThread, showThread, threadsByRoom } from './lib/threads';
@@ -164,6 +166,8 @@
   let profileMxc: string | null = null;
   let selectedSpaceId: string | null = null;
   let mentionsOpen = false;
+  let searchOpen = false;
+  let searchScopes: ScopeOption[] = [{ label: 'Everywhere', scope: { kind: 'all' } }];
   let spaceChildIds: string[] | null = null;
   let spaceChildrenLoading = false;
   let spaceChildrenError: string | null = null;
@@ -334,6 +338,8 @@
     try {
       if (url.searchParams.get('view') === 'mentions') {
         selectMentions();
+      } else if (url.searchParams.get('view') === 'search') {
+        selectSearch();
       } else if (roomId && $rooms.some((room) => room.room_id === roomId && !room.space)) {
         selectedSpaceId = spaceId && $rooms.some((room) => room.room_id === spaceId && room.space) ? spaceId : null;
         spaceChildrenError = null;
@@ -491,6 +497,7 @@
     profile = null;
     profileMxc = null;
     mentionsOpen = false;
+    searchOpen = false;
     selectedSpaceId = null;
     spaceChildIds = null;
     spaceChildrenError = null;
@@ -546,6 +553,7 @@
 
   async function selectHome(): Promise<void> {
     mentionsOpen = false;
+    searchOpen = false;
     selectedSpaceId = null;
     spaceChildIds = null;
     spaceChildrenError = null;
@@ -575,10 +583,35 @@
     peeking = null;
     membersOpen = false;
     sidebarOpen = false;
+    searchOpen = false;
     mentionsOpen = true;
     recordRoute(null, null, 'mentions');
   }
 
+  function selectSearch(): void {
+    const fromRoom = $selectedRoomId ? $rooms.find((r) => r.room_id === $selectedRoomId) ?? null : null;
+    const options: ScopeOption[] = [];
+    if (fromRoom) options.push({ label: fromRoom.name, scope: { kind: 'room', room_id: fromRoom.room_id } });
+    if (selectedSpace && spaceChildIds) {
+      const roomIds = spaceChildIds.filter((id) => $rooms.some((r) => r.room_id === id && !r.space));
+      if (roomIds.length) options.push({ label: selectedSpace.name, scope: { kind: 'rooms', room_ids: roomIds } });
+    }
+    options.push({ label: 'Everywhere', scope: { kind: 'all' } });
+    stashDraft();
+    stopTyping();
+    selectedRoomId.set(null);
+    replyingTo = null;
+    editing = null;
+    composerRef?.closeFinders();
+    peeking = null;
+    membersOpen = false;
+    sidebarOpen = false;
+    mentionsOpen = false;
+    searchScopes = options;
+    searchOpen = true;
+    recordRoute(selectedSpaceId, null, 'search');
+  }
+
   function toggleChannelsPane(): void {
     if (window.innerWidth <= 640) sidebarOpen = !sidebarOpen;
     else navFolded.update((v) => !v);
@@ -586,6 +619,7 @@
 
   async function selectSpace(spaceId: string): Promise<void> {
     mentionsOpen = false;
+    searchOpen = false;
     stashDraft();
     stopTyping();
     selectedSpaceId = spaceId;
@@ -622,6 +656,7 @@
 
   async function selectRoom(roomId: string, peek = false): Promise<void> {
     mentionsOpen = false;
+    searchOpen = false;
     peeking = peek ? roomId : null;
     stashDraft();
     if (roomId === $selectedRoomId && openReady[roomId]) {
@@ -1863,7 +1898,7 @@
             <MxcAvatar mxc={selectedSpace.avatar} label={selectedSpace.name} size={36} shape="rounded" />
           {/if}
           <div class="head-room-text">
-            <h1><EmojiText text={mentionsOpen ? 'Mentions' : selectedSpace?.name ?? 'Home'} /></h1>
+            <h1><EmojiText text={mentionsOpen ? 'Mentions' : searchOpen ? 'Search' : selectedSpace?.name ?? 'Home'} /></h1>
           </div>
         </div>
       </div>
@@ -1888,6 +1923,9 @@
             {joinBusy ? 'Joining…' : 'Join'}
           </button>
         {/if}
+        <button type="button" class="icon-btn" aria-label="Search messages" title="Search messages" on:click={selectSearch}>
+          <svg width="18" height="18" viewBox="0 0 24 24" aria-hidden="true"><circle cx="10.5" cy="10.5" r="6" fill="none" stroke="currentColor" stroke-width="1.8" /><path d="M15 15l5 5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" /></svg>
+        </button>
         <button
           type="button"
           class="icon-btn"
@@ -2050,6 +2088,14 @@
             </li>
           </ul>
         {/if}
+        <ul class="room-list">
+          <li>
+            <button type="button" class="room-row" class:active={searchOpen} on:click={selectSearch}>
+              <svg width="26" height="26" viewBox="0 0 26 26" aria-hidden="true"><circle cx="11.5" cy="11.5" r="6" fill="none" stroke="currentColor" stroke-width="1.8" /><path d="M16 16l5 5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" /></svg>
+              <span class="room-name">Search messages</span>
+            </button>
+          </li>
+        </ul>
         {#if roomsLoading && $rooms.length === 0}
           <p class="side-note">Loading rooms…</p>
         {:else if $rooms.length === 0}
@@ -2294,10 +2340,12 @@
             {/each}
           </div>
         {/if}
-      {#key mentionsOpen ? 'mentions' : $selectedRoomId ?? 'home'}
+      {#key mentionsOpen ? 'mentions' : searchOpen ? 'search' : $selectedRoomId ?? 'home'}
       <div class="chat-view">
       {#if mentionsOpen && $sessionUser}
         <MentionsInbox self={$sessionUser} onLive={(roomId, eventId, threadRoot) => void openLive(roomId, eventId, threadRoot)} />
+      {:else if searchOpen}
+        <SearchView scopes={searchScopes} self={$sessionUser ?? null} {roomName} onOpen={(roomId, eventId, threadRoot) => void openLive(roomId, eventId, threadRoot)} />
       {:else if !selectedRoom}
         <div class="empty" in:fade={{ duration: motionDuration(180) }}>
           <div class="empty-mark" aria-hidden="true">◈</div>

Added file: web/src/lib/SearchView.svelte+121 additions@@ -0,0 +1,121 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import EmojiText from './EmojiText.svelte';
+  import MessageRow from './MessageRow.svelte';
+  import { searchMessages } from './api';
+  import { formatDay } from './format';
+  import { groupByRoom } from './search-model';
+  import type { ScopeOption, SearchCoverage, SearchHit } 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[] = [];
+  let next: string | null = null;
+  let searched = '';
+  let busy = false;
+  let error = '';
+  let generation = 0;
+
+  $: groups = groupByRoom(hits);
+  $: partial = coverage.filter((c) => !c.reached_start);
+  $: 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());
+
+  async function run(more = false): Promise<void> {
+    const text = query.trim();
+    if (!text) return;
+    const run = ++generation;
+    busy = true;
+    error = '';
+    try {
+      const page = await searchMessages(text, scopes[scopeIndex].scope, more ? next : null);
+      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 { 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>

Modified file: web/src/lib/api.ts+14 additions@@ -8,10 +8,12 @@ export type { MentionKey, MentionReason, MentionCaptureState, MentionEntry, Ment
 import { formatBody } from './markdown';
 import { mentionedUserIds, type Mention } from './mentions';
 import { HttpTransport } from './transport-http';
+import { parseSearchPage, scopeWire, type SearchPage, type SearchScope } from './search-model';
 import type { CommandRequest, SendKind, SessionInfo, Transport, VerifyAction } from './transport';
 export type { HistoryRequest } from './transport';
 import { createDeviceTransport } from 'malice:device-transport';
 
+import { ApiError } from './transport';
 export { ApiError } from './transport';
 export type { SessionInfo, SoftLogout, VerifyAction } from './transport';
 
@@ -66,6 +68,18 @@ export const retryMentionContext = (room_id: string, event_id: string): Promise<
 export const setMentionsRead = (keys: MentionKey[], read: boolean) => transport.setMentionsRead(keys, read);
 export const markMentionsReadThrough = (boundary: MentionsBoundary) => transport.markMentionsReadThrough(boundary);
 export const recoverMentions = () => transport.recoverMentions();
+export async function searchMessages(query: string, scope: SearchScope, cursor: string | null = null, limit = 30): Promise<SearchPage> {
+  let raw: unknown;
+  try {
+    raw = await transport.command({ op: 'search', query, scope: scopeWire(scope), cursor, limit });
+  } catch (e) {
+    if (e instanceof ApiError && (e.status === 400 || e.status === 422)) throw new ApiError(400, "Search isn't available yet");
+    throw e;
+  }
+  const page = parseSearchPage(raw);
+  if (!page) throw new ApiError(502, 'Invalid search response');
+  return page;
+}
 export const startRecentHistory = (room_id: string): Promise<void> => transport.startRecentHistory(room_id);
 export const fillHistoryGap = (room_id: string, gap_id: string): Promise<void> => transport.fillHistoryGap(room_id, gap_id);
 export const setTyping = (room_id: string, typing: boolean) => transport.setTyping(room_id, typing);

Added file: web/src/lib/search-model.ts+86 additions@@ -0,0 +1,86 @@
+import { isRecord } from './guards';
+import { parseTimelineItem } from './types';
+import type { TimelineEvent } from './types';
+
+export type SearchScope = { kind: 'room'; room_id: string } | { kind: 'rooms'; room_ids: string[] } | { kind: 'all' };
+
+export interface ScopeOption {
+  label: string;
+  scope: SearchScope;
+}
+
+export interface SearchHit {
+  room_id: string;
+  event_id: string;
+  timestamp_ms: number;
+  event: TimelineEvent;
+  ranges: [number, number][];
+}
+
+export interface SearchCoverage {
+  room_id: string;
+  oldest_indexed_ms: number | null;
+  reached_start: boolean;
+}
+
+export interface SearchPage {
+  hits: SearchHit[];
+  next: string | null;
+  coverage: SearchCoverage[];
+}
+
+/** The wire form of a scope, as macltok's externally tagged enum. */
+export function scopeWire(scope: SearchScope): unknown {
+  if (scope.kind === 'room') return { Room: scope.room_id };
+  if (scope.kind === 'rooms') return { Rooms: scope.room_ids };
+  return 'All';
+}
+
+function parseRanges(raw: unknown): [number, number][] {
+  if (!Array.isArray(raw)) return [];
+  return raw.flatMap((range) =>
+    Array.isArray(range) && typeof range[0] === 'number' && typeof range[1] === 'number' ? [[range[0], range[1]] as [number, number]] : []
+  );
+}
+
+function parseHit(raw: unknown): SearchHit | null {
+  if (!isRecord(raw) || typeof raw['room_id'] !== 'string' || typeof raw['event_id'] !== 'string') return null;
+  const item = parseTimelineItem(raw['preview'] ?? raw['event']);
+  if (item?.kind !== 'event') return null;
+  return {
+    room_id: raw['room_id'],
+    event_id: raw['event_id'],
+    timestamp_ms: typeof raw['timestamp_ms'] === 'number' ? raw['timestamp_ms'] : item.event.timestamp_ms,
+    event: item.event,
+    ranges: parseRanges(raw['ranges'])
+  };
+}
+
+function parseCoverage(raw: unknown): SearchCoverage | null {
+  if (!isRecord(raw) || typeof raw['room_id'] !== 'string') return null;
+  return {
+    room_id: raw['room_id'],
+    oldest_indexed_ms: typeof raw['oldest_indexed_ms'] === 'number' ? raw['oldest_indexed_ms'] : null,
+    reached_start: raw['reached_start'] === true
+  };
+}
+
+export function parseSearchPage(raw: unknown): SearchPage | null {
+  if (!isRecord(raw) || !Array.isArray(raw['hits'])) return null;
+  return {
+    hits: raw['hits'].flatMap((hit) => parseHit(hit) ?? []),
+    next: typeof raw['next'] === 'string' ? raw['next'] : null,
+    coverage: Array.isArray(raw['coverage']) ? raw['coverage'].flatMap((c) => parseCoverage(c) ?? []) : []
+  };
+}
+
+/** Hits grouped by room, keeping the order in which each room first appears. */
+export function groupByRoom(hits: SearchHit[]): { room_id: string; hits: SearchHit[] }[] {
+  const groups = new Map<string, SearchHit[]>();
+  for (const hit of hits) {
+    const list = groups.get(hit.room_id);
+    if (list) list.push(hit);
+    else groups.set(hit.room_id, [hit]);
+  }
+  return [...groups].map(([room_id, list]) => ({ room_id, hits: list }));
+}

Modified file: web/src/lib/transport.ts+1

@@ -37,6 +37,7 @@ export type CommandRequest =

3737 | { op: 'set_room_avatar'; room_id: string; mxc: string | null }

3838 | { op: 'mute'; room_id: string; user_id: string; muted: boolean }

3939 | { op: 'notification_keywords' }

40+ | { op: 'search'; query: string; scope: unknown; cursor: string | null; limit: number }

4041 | { op: 'add_notification_keyword' | 'remove_notification_keyword'; keyword: string }

4142 | { op: 'ignore' | 'unignore'; user_id: string }

4243 | { op: 'power_levels'; room_id: string }

malice

Commit ba90983cec2e

Commit `ba90983cec2e`