From 5887a5705e45368f059fef344ebfd1009701ee73 Mon Sep 17 00:00:00 2001
From: dtonon <git@dtonon.com>
Date: Tue, 9 Jun 2026 20:00:44 +0100
Subject: [PATCH 01/15] Add PUBLIC_SEARCH config option

---
 .env.example      | 1 +
 README.md         | 1 +
 src/lib/config.ts | 2 ++
 3 files changed, 4 insertions(+)

diff --git a/.env.example b/.env.example
index f618555..570c9e7 100644
--- a/.env.example
+++ b/.env.example
@@ -3,6 +3,7 @@ PUBLIC_MODE=simple                     # simple | full (single forum vs. many ro
 PUBLIC_GROUP_ID=mygrouprandomid        # required in simple mode; the single forum's group id (ignored in full mode)
 PUBLIC_TITLE=                          # top-bar title; empty falls back to the group name
 PUBLIC_JOINCODE=no                     # yes | no — show an invite-code field when a join is rejected
+PUBLIC_SEARCH=no                       # yes | no — enable the search box (requires a relay with NIP-50 support)
 PUBLIC_LABELS=                         # comma-separated discussion labels (e.g., bug,feature,question)
 PUBLIC_BLOSSOM_URL=                    # Blossom server URL for uploads (e.g., https://blossom.primal.net)
 # Theme color overrides — quote the value, a leading # is read as a comment otherwise
diff --git a/README.md b/README.md
index 8d76132..f49aba9 100644
--- a/README.md
+++ b/README.md
@@ -27,6 +27,7 @@ Squalk is configured entirely through environment variables (all prefixed `PUBLI
 | `PUBLIC_GROUP_ID` | in simple mode | — | The single forum's group id. Required when `PUBLIC_MODE=simple`; ignored in full mode, where rooms are selected at runtime. |
 | `PUBLIC_TITLE` | no | group name | Title shown in the top bar. When empty it falls back to the group's name. |
 | `PUBLIC_JOINCODE` | no | `no` | `yes` to show an invite-code field when a join request is rejected (for code-gated relays). |
+| `PUBLIC_SEARCH` | no | `no` | `yes` to show a search box at the top of the homepage. Requires a relay with NIP-50 search support. |
 | `PUBLIC_LABELS` | no | — | Comma-separated discussion labels offered when composing, e.g. `bug,feature,question`. |
 | `PUBLIC_BLOSSOM_URL` | no | — | Blossom server URL used for media uploads, e.g. `https://blossom.primal.net`. Uploads are disabled when unset. |
 | `PUBLIC_ACCENT_COLOR` | no | `#e32a6d` | Override the accent (primary) color. Quote the value (`"#00ff00"`) — an unquoted leading `#` is read as a comment. The hover shade is derived automatically. |
diff --git a/src/lib/config.ts b/src/lib/config.ts
index 65e8e5b..bdaefeb 100644
--- a/src/lib/config.ts
+++ b/src/lib/config.ts
@@ -19,6 +19,8 @@ if (MODE === "simple" && !GROUP_ID) {
   throw new Error("PUBLIC_GROUP_ID is required in simple mode");
 }
 export const JOINCODE_REQUIRED = env.PUBLIC_JOINCODE === "yes";
+// Requires a relay with NIP-50 support.
+export const SEARCH_ENABLED = env.PUBLIC_SEARCH === "yes";
 export const LABELS = (env.PUBLIC_LABELS ?? "")
   .split(",")
   .map((l) => l.trim())

From 043be1d3fd5a786093270659d33376a7879a88d2 Mon Sep 17 00:00:00 2001
From: dtonon <git@dtonon.com>
Date: Tue, 9 Jun 2026 21:23:13 +0100
Subject: [PATCH 02/15] Add NIP-50 thread search helper

---
 src/lib/search.ts | 71 +++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 71 insertions(+)
 create mode 100644 src/lib/search.ts

diff --git a/src/lib/search.ts b/src/lib/search.ts
new file mode 100644
index 0000000..e32aa07
--- /dev/null
+++ b/src/lib/search.ts
@@ -0,0 +1,71 @@
+import type { Event } from "@nostr/tools/core";
+import type { Filter } from "@nostr/tools/filter";
+import { queryForum } from "$lib/relay";
+import { GROUP_ID, MODE } from "$lib/config";
+import { groupsStore } from "$lib/groups.svelte";
+
+export type SearchResult = {
+  threadId: string;
+  title: string;
+  snippet: string;
+  matchKind: "thread" | "reply";
+  createdAt: number;
+};
+
+function snippetOf(content: string): string {
+  const flat = content.replace(/\s+/g, " ").trim();
+  return flat.length > 140 ? flat.slice(0, 140) + "…" : flat;
+}
+
+// NIP-50 search over the forum relay: thread OPs (kind 11) and replies
+// (kind 1111), deduped by thread. Simple mode scopes to the single group;
+// full mode spans every visible room.
+export async function searchThreads(query: string): Promise<SearchResult[]> {
+  const filter: Filter = { kinds: [11, 1111], search: query, limit: 30 };
+  if (MODE === "simple") filter["#h"] = [GROUP_ID];
+  else if (groupsStore.list.length > 0)
+    filter["#h"] = groupsStore.list.map((g) => g.id);
+
+  const events = await queryForum(filter, { label: "search" });
+
+  const byThread = new Map<string, SearchResult>();
+  const opless: SearchResult[] = [];
+  for (const e of events) {
+    if (e.kind === 11) {
+      const existing = byThread.get(e.id);
+      // An OP match wins over a reply match on the same thread
+      if (existing && existing.matchKind === "thread") continue;
+      byThread.set(e.id, {
+        threadId: e.id,
+        title: e.tags.find((t) => t[0] === "title")?.[1] ?? "(untitled)",
+        snippet: snippetOf(e.content),
+        matchKind: "thread",
+        createdAt: e.created_at,
+      });
+    } else {
+      const root = e.tags.find((t) => t[0] === "E")?.[1];
+      if (!root || byThread.has(root)) continue;
+      const r: SearchResult = {
+        threadId: root,
+        title: "",
+        snippet: snippetOf(e.content),
+        matchKind: "reply",
+        createdAt: e.created_at,
+      };
+      byThread.set(root, r);
+      opless.push(r);
+    }
+  }
+
+  // Backfill titles for reply-only matches; the group relay truncates
+  // multi-id queries, so fetch each OP on its own
+  await Promise.all(
+    opless.map(async (r) => {
+      const ops = await queryForum({ kinds: [11], ids: [r.threadId] });
+      const op: Event | undefined = ops[0];
+      r.title = op?.tags.find((t) => t[0] === "title")?.[1] ?? "(untitled)";
+    }),
+  );
+
+  return [...byThread.values()].sort((a, b) => b.createdAt - a.createdAt);
+}

From a77b8a29c36bae42598a9b72442247dd109f50fc Mon Sep 17 00:00:00 2001
From: dtonon <git@dtonon.com>
Date: Wed, 10 Jun 2026 12:47:22 +0100
Subject: [PATCH 03/15] Add search box with results dropdown to the homepage

---
 src/lib/components/SearchBox.svelte | 173 ++++++++++++++++++++++++++++
 src/routes/+page.svelte             |   9 +-
 2 files changed, 181 insertions(+), 1 deletion(-)
 create mode 100644 src/lib/components/SearchBox.svelte

diff --git a/src/lib/components/SearchBox.svelte b/src/lib/components/SearchBox.svelte
new file mode 100644
index 0000000..67fcaa0
--- /dev/null
+++ b/src/lib/components/SearchBox.svelte
@@ -0,0 +1,173 @@
+<script lang="ts">
+  import { goto } from "$app/navigation";
+  import { searchThreads, type SearchResult } from "$lib/search";
+
+  let query = $state("");
+  let results = $state<SearchResult[]>([]);
+  let open = $state(false);
+  let searching = $state(false);
+  let activeIndex = $state(-1);
+  let timer: ReturnType<typeof setTimeout> | null = null;
+  let seq = 0;
+
+  function schedule() {
+    const q = query.trim();
+    if (timer) clearTimeout(timer);
+    activeIndex = -1;
+    if (q.length < 2) {
+      seq++; // Supersede any in-flight query
+      open = false;
+      results = [];
+      searching = false;
+      return;
+    }
+    open = true;
+    searching = true;
+    timer = setTimeout(async () => {
+      const id = ++seq;
+      try {
+        const r = await searchThreads(q);
+        if (id !== seq) return;
+        results = r;
+      } finally {
+        if (id === seq) searching = false;
+      }
+    }, 300);
+  }
+
+  function close() {
+    open = false;
+    activeIndex = -1;
+  }
+
+  function select(r: SearchResult) {
+    close();
+    goto(`/thread/${r.threadId}`);
+  }
+
+  function onKeydown(e: KeyboardEvent) {
+    if (e.key === "Escape") {
+      close();
+      return;
+    }
+    if (!open || results.length === 0) return;
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      activeIndex = (activeIndex + 1) % results.length;
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      activeIndex = (activeIndex - 1 + results.length) % results.length;
+    } else if (e.key === "Enter" && activeIndex >= 0) {
+      e.preventDefault();
+      select(results[activeIndex]);
+    }
+  }
+
+  function onFocus() {
+    if (query.trim().length >= 2) open = true;
+  }
+
+  function onBlur() {
+    // Delay so a mousedown on a result still lands
+    setTimeout(() => close(), 120);
+  }
+</script>
+
+<div class="relative">
+  <div class="relative">
+    <input
+      bind:value={query}
+      type="search"
+      placeholder="Search"
+      role="combobox"
+      aria-expanded={open}
+      aria-controls={open ? "search-results" : undefined}
+      aria-activedescendant={activeIndex >= 0
+        ? `search-result-${activeIndex}`
+        : undefined}
+      aria-label="Search discussions"
+      autocomplete="off"
+      oninput={schedule}
+      onkeydown={onKeydown}
+      onfocus={onFocus}
+      onblur={onBlur}
+      class="w-full rounded-lg bg-neutral-100 py-2.5 pr-11 pl-4 text-neutral-800 placeholder-neutral-400 focus:ring-2 focus:ring-neutral-300 focus:outline-none dark:bg-neutral-800 dark:text-neutral-200 dark:placeholder-neutral-500 dark:focus:ring-neutral-600"
+    />
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      class="pointer-events-none absolute top-1/2 right-4 h-5 w-5 -translate-y-1/2 text-neutral-400 dark:text-neutral-500"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+      stroke-width="2"
+      aria-hidden="true"
+    >
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"
+      />
+    </svg>
+  </div>
+
+  {#if open}
+    <div
+      id="search-results"
+      role="listbox"
+      aria-label="Search results"
+      class="absolute right-0 left-0 z-30 mt-2 max-h-96 overflow-auto rounded-lg border border-neutral-200 bg-white py-2 shadow-xl dark:border-neutral-700 dark:bg-neutral-900"
+    >
+      {#if searching}
+        <div
+          class="flex items-center gap-2 px-4 py-2 text-sm text-neutral-400 dark:text-neutral-500"
+          aria-live="polite"
+        >
+          <span
+            class="inline-block h-3 w-3 animate-spin rounded-full border border-neutral-300 border-t-neutral-600 dark:border-neutral-600"
+            aria-hidden="true"
+          ></span>
+          <span>Searching…</span>
+        </div>
+      {:else if results.length === 0}
+        <div class="px-4 py-2 text-sm text-neutral-400 dark:text-neutral-500">
+          No results
+        </div>
+      {/if}
+      {#each results as r, i (r.threadId)}
+        <a
+          id="search-result-{i}"
+          href="/thread/{r.threadId}"
+          role="option"
+          aria-selected={i === activeIndex}
+          class="block px-4 py-2 {i === activeIndex
+            ? 'bg-neutral-100 dark:bg-neutral-800'
+            : ''}"
+          onmousedown={(e) => {
+            e.preventDefault();
+            select(r);
+          }}
+          onmouseenter={() => (activeIndex = i)}
+        >
+          <span
+            class="block truncate font-medium text-neutral-800 dark:text-neutral-200"
+          >
+            {r.title}
+            {#if r.matchKind === "reply"}
+              <span
+                class="ml-1 text-xs font-normal text-neutral-400 dark:text-neutral-500"
+                >reply</span
+              >
+            {/if}
+          </span>
+          {#if r.snippet}
+            <span
+              class="block truncate text-sm text-neutral-500 dark:text-neutral-400"
+            >
+              {r.snippet}
+            </span>
+          {/if}
+        </a>
+      {/each}
+    </div>
+  {/if}
+</div>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 6126a9c..bf8ca5b 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,11 +1,12 @@
 <script lang="ts">
   import DiscussionsFeed from "$lib/components/DiscussionsFeed.svelte";
   import PostContent from "$lib/components/PostContent.svelte";
+  import SearchBox from "$lib/components/SearchBox.svelte";
   import Tag from "$lib/components/Tag.svelte";
   import { groupsStore } from "$lib/groups.svelte";
   import { overviewStore, loadOverview } from "$lib/overview.svelte";
   import { partialsStore } from "$lib/partials.svelte";
-  import { MODE, GROUP_ID } from "$lib/config";
+  import { MODE, GROUP_ID, SEARCH_ENABLED } from "$lib/config";
   import type { NostrUser } from "@nostr/gadgets/metadata";
 
   const partial = $derived(partialsStore.get("home"));
@@ -51,6 +52,12 @@
   {/if}
 {/snippet}
 
+{#if SEARCH_ENABLED}
+  <div class="mt-2 mb-6">
+    <SearchBox />
+  </div>
+{/if}
+
 {#if partial}
   <div class="mt-2 mb-8">
     <PostContent content={partial.content} headingOffset={0} />

From 540ba10654626d89201ee5a8fc1fd18d1a8d7166 Mon Sep 17 00:00:00 2001
From: dtonon <git@dtonon.com>
Date: Wed, 10 Jun 2026 18:48:02 +0100
Subject: [PATCH 04/15] Scope search by group client-side, pyramid rejects
 search + #h

---
 src/lib/search.ts | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/lib/search.ts b/src/lib/search.ts
index e32aa07..7d22e01 100644
--- a/src/lib/search.ts
+++ b/src/lib/search.ts
@@ -19,14 +19,21 @@ function snippetOf(content: string): string {
 
 // NIP-50 search over the forum relay: thread OPs (kind 11) and replies
 // (kind 1111), deduped by thread. Simple mode scopes to the single group;
-// full mode spans every visible room.
+// full mode spans every visible room. The group scope is applied client-side
+// on the `h` tag: pyramid returns nothing when `search` is combined with a
+// `#h` filter.
 export async function searchThreads(query: string): Promise<SearchResult[]> {
   const filter: Filter = { kinds: [11, 1111], search: query, limit: 30 };
-  if (MODE === "simple") filter["#h"] = [GROUP_ID];
-  else if (groupsStore.list.length > 0)
-    filter["#h"] = groupsStore.list.map((g) => g.id);
+  const groups =
+    MODE === "simple"
+      ? new Set([GROUP_ID])
+      : new Set(groupsStore.list.map((g) => g.id));
 
-  const events = await queryForum(filter, { label: "search" });
+  const all = await queryForum(filter, { label: "search" });
+  const events = all.filter((e) => {
+    const h = e.tags.find((t) => t[0] === "h")?.[1];
+    return h !== undefined && (groups.size === 0 || groups.has(h));
+  });
 
   const byThread = new Map<string, SearchResult>();
   const opless: SearchResult[] = [];

From d836ee588ff42d2356ee7aaa66a6c50c978bf645 Mon Sep 17 00:00:00 2001
From: dtonon <git@dtonon.com>
Date: Thu, 11 Jun 2026 20:03:31 +0100
Subject: [PATCH 05/15] Highlight the search terms in the results

---
 src/lib/components/SearchBox.svelte | 33 +++++++++++++++++++++++++++--
 src/lib/search.ts                   | 21 ++++++++++++++----
 2 files changed, 48 insertions(+), 6 deletions(-)

diff --git a/src/lib/components/SearchBox.svelte b/src/lib/components/SearchBox.svelte
index 67fcaa0..cdcd24e 100644
--- a/src/lib/components/SearchBox.svelte
+++ b/src/lib/components/SearchBox.svelte
@@ -4,6 +4,7 @@
 
   let query = $state("");
   let results = $state<SearchResult[]>([]);
+  let resultsQuery = $state(""); // The query that produced the current results
   let open = $state(false);
   let searching = $state(false);
   let activeIndex = $state(-1);
@@ -29,6 +30,7 @@
         const r = await searchThreads(q);
         if (id !== seq) return;
         results = r;
+        resultsQuery = q;
       } finally {
         if (id === seq) searching = false;
       }
@@ -63,6 +65,25 @@
     }
   }
 
+  const terms = $derived(
+    resultsQuery.split(/\s+/).filter((t) => t.length >= 2),
+  );
+
+  function escapeRe(s: string): string {
+    return s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  }
+
+  // Split into alternating plain/matched segments for <mark> rendering
+  function highlight(text: string): { text: string; hit: boolean }[] {
+    if (!text || terms.length === 0) return [{ text, hit: false }];
+    const alts = terms.map(escapeRe).join("|");
+    const exact = new RegExp(`^(${alts})$`, "i");
+    return text
+      .split(new RegExp(`(${alts})`, "gi"))
+      .filter((s) => s !== "")
+      .map((s) => ({ text: s, hit: exact.test(s) }));
+  }
+
   function onFocus() {
     if (query.trim().length >= 2) open = true;
   }
@@ -133,6 +154,14 @@
           No results
         </div>
       {/if}
+      {#snippet marked(text: string)}
+        {#each highlight(text) as p}
+          {#if p.hit}<mark
+              class="bg-secondary/40 dark:bg-secondary/30 rounded-sm text-inherit"
+              >{p.text}</mark
+            >{:else}{p.text}{/if}
+        {/each}
+      {/snippet}
       {#each results as r, i (r.threadId)}
         <a
           id="search-result-{i}"
@@ -151,7 +180,7 @@
           <span
             class="block truncate font-medium text-neutral-800 dark:text-neutral-200"
           >
-            {r.title}
+            {@render marked(r.title)}
             {#if r.matchKind === "reply"}
               <span
                 class="ml-1 text-xs font-normal text-neutral-400 dark:text-neutral-500"
@@ -163,7 +192,7 @@
             <span
               class="block truncate text-sm text-neutral-500 dark:text-neutral-400"
             >
-              {r.snippet}
+              {@render marked(r.snippet)}
             </span>
           {/if}
         </a>
diff --git a/src/lib/search.ts b/src/lib/search.ts
index 7d22e01..bd23add 100644
--- a/src/lib/search.ts
+++ b/src/lib/search.ts
@@ -12,9 +12,22 @@ export type SearchResult = {
   createdAt: number;
 };
 
-function snippetOf(content: string): string {
+// Window the snippet around the first term match so the highlight is visible
+// even when the match sits deep in a long post.
+function snippetOf(content: string, query: string): string {
   const flat = content.replace(/\s+/g, " ").trim();
-  return flat.length > 140 ? flat.slice(0, 140) + "…" : flat;
+  const MAX = 140;
+  if (flat.length <= MAX) return flat;
+  const lower = flat.toLowerCase();
+  let idx = -1;
+  for (const t of query.toLowerCase().split(/\s+/).filter(Boolean)) {
+    const i = lower.indexOf(t);
+    if (i !== -1 && (idx === -1 || i < idx)) idx = i;
+  }
+  if (idx <= 40) return flat.slice(0, MAX) + "…";
+  const start = idx - 40;
+  const end = Math.min(flat.length, start + MAX);
+  return "…" + flat.slice(start, end) + (end < flat.length ? "…" : "");
 }
 
 // NIP-50 search over the forum relay: thread OPs (kind 11) and replies
@@ -45,7 +58,7 @@ export async function searchThreads(query: string): Promise<SearchResult[]> {
       byThread.set(e.id, {
         threadId: e.id,
         title: e.tags.find((t) => t[0] === "title")?.[1] ?? "(untitled)",
-        snippet: snippetOf(e.content),
+        snippet: snippetOf(e.content, query),
         matchKind: "thread",
         createdAt: e.created_at,
       });
@@ -55,7 +68,7 @@ export async function searchThreads(query: string): Promise<SearchResult[]> {
       const r: SearchResult = {
         threadId: root,
         title: "",
-        snippet: snippetOf(e.content),
+        snippet: snippetOf(e.content, query),
         matchKind: "reply",
         createdAt: e.created_at,
       };

From 0f9ce1a0eec770853fc2485e3e6257807fbe261e Mon Sep 17 00:00:00 2001
From: dtonon <git@dtonon.com>
Date: Thu, 11 Jun 2026 21:28:19 +0100
Subject: [PATCH 06/15] Keep the relay's relevance order in search results

---
 src/lib/search.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/lib/search.ts b/src/lib/search.ts
index bd23add..af0967a 100644
--- a/src/lib/search.ts
+++ b/src/lib/search.ts
@@ -87,5 +87,7 @@ export async function searchThreads(query: string): Promise<SearchResult[]> {
     }),
   );
 
-  return [...byThread.values()].sort((a, b) => b.createdAt - a.createdAt);
+  // Keep the relay's relevance order (arrival order); a thread keeps the
+  // position of its best-ranked match
+  return [...byThread.values()];
 }

From c7dad445b5288b2e3f622de5831108bed00ad88d Mon Sep 17 00:00:00 2001
From: dtonon <git@dtonon.com>
Date: Tue, 16 Jun 2026 15:27:41 +0100
Subject: [PATCH 07/15] Use / shortcut with key hint for search

---
 src/lib/components/SearchBox.svelte | 51 ++++++++++++++++++++---------
 1 file changed, 36 insertions(+), 15 deletions(-)

diff --git a/src/lib/components/SearchBox.svelte b/src/lib/components/SearchBox.svelte
index cdcd24e..9920f15 100644
--- a/src/lib/components/SearchBox.svelte
+++ b/src/lib/components/SearchBox.svelte
@@ -8,6 +8,7 @@
   let open = $state(false);
   let searching = $state(false);
   let activeIndex = $state(-1);
+  let inputEl = $state<HTMLInputElement | null>(null);
   let timer: ReturnType<typeof setTimeout> | null = null;
   let seq = 0;
 
@@ -88,15 +89,46 @@
     if (query.trim().length >= 2) open = true;
   }
 
+  // Global "/" shortcut, unless the user is typing somewhere else
+  function onWindowKeydown(e: KeyboardEvent) {
+    if (e.key !== "/" || e.metaKey || e.ctrlKey || e.altKey) return;
+    const t = e.target as HTMLElement | null;
+    if (
+      t &&
+      (t.tagName === "INPUT" || t.tagName === "TEXTAREA" || t.isContentEditable)
+    )
+      return;
+    e.preventDefault();
+    inputEl?.focus();
+  }
+
   function onBlur() {
     // Delay so a mousedown on a result still lands
     setTimeout(() => close(), 120);
   }
 </script>
 
+<svelte:window onkeydown={onWindowKeydown} />
+
 <div class="relative">
   <div class="relative">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      class="pointer-events-none absolute top-1/2 left-4 h-5 w-5 -translate-y-1/2 text-neutral-400 dark:text-neutral-500"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+      stroke-width="2"
+      aria-hidden="true"
+    >
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"
+      />
+    </svg>
     <input
+      bind:this={inputEl}
       bind:value={query}
       type="search"
       placeholder="Search"
@@ -112,23 +144,12 @@
       onkeydown={onKeydown}
       onfocus={onFocus}
       onblur={onBlur}
-      class="w-full rounded-lg bg-neutral-100 py-2.5 pr-11 pl-4 text-neutral-800 placeholder-neutral-400 focus:ring-2 focus:ring-neutral-300 focus:outline-none dark:bg-neutral-800 dark:text-neutral-200 dark:placeholder-neutral-500 dark:focus:ring-neutral-600"
+      class="w-full rounded-lg bg-neutral-100 py-2.5 pr-12 pl-11 text-neutral-800 placeholder-neutral-400 focus:ring-2 focus:ring-neutral-300 focus:outline-none dark:bg-neutral-800 dark:text-neutral-200 dark:placeholder-neutral-500 dark:focus:ring-neutral-600"
     />
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      class="pointer-events-none absolute top-1/2 right-4 h-5 w-5 -translate-y-1/2 text-neutral-400 dark:text-neutral-500"
-      fill="none"
-      viewBox="0 0 24 24"
-      stroke="currentColor"
-      stroke-width="2"
-      aria-hidden="true"
+    <kbd
+      class="pointer-events-none absolute top-1/2 right-3 flex h-6 w-6 -translate-y-1/2 items-center justify-center rounded-md bg-neutral-200 font-sans text-sm text-neutral-500 dark:bg-neutral-700 dark:text-neutral-400"
+      aria-hidden="true">/</kbd
     >
-      <path
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"
-      />
-    </svg>
   </div>
 
   {#if open}

From f0c745998079ff7d145846b981436509ff0f6002 Mon Sep 17 00:00:00 2001
From: dtonon <git@dtonon.com>
Date: Tue, 16 Jun 2026 20:08:36 +0100
Subject: [PATCH 08/15] Wrap dark input defaults in @layer base so utilities
 can override

---
 src/routes/layout.css | 26 ++++++++++++++------------
 1 file changed, 14 insertions(+), 12 deletions(-)

diff --git a/src/routes/layout.css b/src/routes/layout.css
index af5a9eb..b885fdd 100644
--- a/src/routes/layout.css
+++ b/src/routes/layout.css
@@ -31,18 +31,20 @@ body {
   display: none;
 }
 
-/* Form inputs in dark mode — the forms plugin defaults to a white background,
-   which would punch holes through panels. Override at the element level so we
-   don't have to add `dark:bg-neutral-800` to every <input>/<textarea>. */
-:where(.dark) input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="reset"]):not([type="button"]),
-:where(.dark) textarea,
-:where(.dark) select {
-  background-color: var(--color-neutral-800);
-  color: var(--color-neutral-100);
-}
-:where(.dark) input::placeholder,
-:where(.dark) textarea::placeholder {
-  color: var(--color-neutral-500);
+ @layer base {
+    /* Form inputs in dark mode — the forms plugin defaults to a white background,
+    which would punch holes through panels. Override at the element level so we
+    don't have to add `dark:bg-neutral-800` to every <input>/<textarea>. */
+    :where(.dark) input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="reset"]):not([type="button"]),
+    :where(.dark) textarea,
+    :where(.dark) select {
+    background-color: var(--color-neutral-800);
+    color: var(--color-neutral-100);
+    }
+    :where(.dark) input::placeholder,
+    :where(.dark) textarea::placeholder {
+    color: var(--color-neutral-500);
+    }
 }
 
 /* Tighter heading rhythm for all rendered (prose) content. Overrides the

From 98c08e0c55169a2a6f3110dafdd12d935b48d78e Mon Sep 17 00:00:00 2001
From: dtonon <git@dtonon.com>
Date: Thu, 18 Jun 2026 11:55:53 +0100
Subject: [PATCH 09/15] Recolor the native search clear button

---
 src/routes/layout.css | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/src/routes/layout.css b/src/routes/layout.css
index b885fdd..62991c1 100644
--- a/src/routes/layout.css
+++ b/src/routes/layout.css
@@ -45,6 +45,21 @@ body {
     :where(.dark) textarea::placeholder {
     color: var(--color-neutral-500);
     }
+
+    /* Redraw the native search clear button so it follows our palette instead
+    of the OS accent color. Firefox renders no button at all. */
+    input[type="search"]::-webkit-search-cancel-button {
+    -webkit-appearance: none;
+    width: 1.2em;
+    height: 1.2em;
+    background-color: var(--color-neutral-400);
+    -webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M12 10.6 6.6 5.2 5.2 6.6l5.4 5.4-5.4 5.4 1.4 1.4 5.4-5.4 5.4 5.4 1.4-1.4-5.4-5.4 5.4-5.4-1.4-1.4z"/></svg>')
+      no-repeat center / contain;
+    cursor: pointer;
+    }
+    :where(.dark) input[type="search"]::-webkit-search-cancel-button {
+    background-color: var(--color-neutral-500);
+    }
 }
 
 /* Tighter heading rhythm for all rendered (prose) content. Overrides the

From d67b789f28a174a6f791b9aebc698ce910b4aa26 Mon Sep 17 00:00:00 2001
From: dtonon <git@dtonon.com>
Date: Fri, 19 Jun 2026 19:43:58 +0100
Subject: [PATCH 10/15] Restyle the search input

---
 src/lib/components/SearchBox.svelte | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/SearchBox.svelte b/src/lib/components/SearchBox.svelte
index 9920f15..ec70506 100644
--- a/src/lib/components/SearchBox.svelte
+++ b/src/lib/components/SearchBox.svelte
@@ -144,7 +144,8 @@
       onkeydown={onKeydown}
       onfocus={onFocus}
       onblur={onBlur}
-      class="w-full rounded-lg bg-neutral-100 py-2.5 pr-12 pl-11 text-neutral-800 placeholder-neutral-400 focus:ring-2 focus:ring-neutral-300 focus:outline-none dark:bg-neutral-800 dark:text-neutral-200 dark:placeholder-neutral-500 dark:focus:ring-neutral-600"
+      class="focus:ring-accent w-full rounded border border-neutral-200  px-3 py-2 focus:ring-1 focus:outline-none disabled:opacity-50
+       bg-neutral-100 focus:bg-neutral-50  pr-12 pl-11 text-neutral-800 placeholder-neutral-400 dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-200 dark:placeholder-neutral-500 focus:dark:ring-accent focus:dark:bg-neutral-900"
     />
     <kbd
       class="pointer-events-none absolute top-1/2 right-3 flex h-6 w-6 -translate-y-1/2 items-center justify-center rounded-md bg-neutral-200 font-sans text-sm text-neutral-500 dark:bg-neutral-700 dark:text-neutral-400"
@@ -157,7 +158,7 @@
       id="search-results"
       role="listbox"
       aria-label="Search results"
-      class="absolute right-0 left-0 z-30 mt-2 max-h-96 overflow-auto rounded-lg border border-neutral-200 bg-white py-2 shadow-xl dark:border-neutral-700 dark:bg-neutral-900"
+      class="absolute right-0 left-0 z-30 mt-2 max-h-96 overflow-auto rounded border border-neutral-200 bg-white py-2 shadow-xl dark:border-neutral-700 dark:bg-neutral-900"
     >
       {#if searching}
         <div
@@ -178,7 +179,7 @@
       {#snippet marked(text: string)}
         {#each highlight(text) as p}
           {#if p.hit}<mark
-              class="bg-secondary/40 dark:bg-secondary/30 rounded-sm text-inherit"
+              class="bg-secondary/40 dark:bg-secondary/60 rounded-sm text-inherit"
               >{p.text}</mark
             >{:else}{p.text}{/if}
         {/each}

From 950bdf192582d6d27d3488af1ec769eabc0007bc Mon Sep 17 00:00:00 2001
From: dtonon <git@dtonon.com>
Date: Fri, 19 Jun 2026 14:06:07 +0100
Subject: [PATCH 11/15] Make search global: modal opened from sidebar, mobile
 menu and / key

---
 src/lib/components/LeftSidebar.svelte |  17 +-
 src/lib/components/MobileMenu.svelte  |  15 ++
 src/lib/components/SearchBox.svelte   | 224 -------------------------
 src/lib/components/SearchModal.svelte | 233 ++++++++++++++++++++++++++
 src/lib/searchModal.svelte.ts         |  15 ++
 src/routes/+layout.svelte             |  11 +-
 src/routes/+page.svelte               |   9 +-
 7 files changed, 290 insertions(+), 234 deletions(-)
 delete mode 100644 src/lib/components/SearchBox.svelte
 create mode 100644 src/lib/components/SearchModal.svelte
 create mode 100644 src/lib/searchModal.svelte.ts

diff --git a/src/lib/components/LeftSidebar.svelte b/src/lib/components/LeftSidebar.svelte
index f1e8c27..4dc3cb3 100644
--- a/src/lib/components/LeftSidebar.svelte
+++ b/src/lib/components/LeftSidebar.svelte
@@ -4,7 +4,8 @@
   import { groupsStore } from "$lib/groups.svelte";
   import { resourcesStore } from "$lib/resources.svelte";
   import { draftState, resumeDraft } from "$lib/draft.svelte";
-  import { GROUP_ID, TITLE } from "$lib/config";
+  import { GROUP_ID, TITLE, SEARCH_ENABLED } from "$lib/config";
+  import { openSearch } from "$lib/searchModal.svelte";
   import ThemeToggle from "$lib/components/ThemeToggle.svelte";
 
   type Props = {
@@ -59,6 +60,20 @@
       {mode === "simple" ? "Discussions" : "Home"}
     </a>
 
+    {#if SEARCH_ENABLED}
+      <button
+        type="button"
+        onclick={openSearch}
+        class="flex w-full items-center gap-2 py-1 text-left text-neutral-700 hover:bg-neutral-100 dark:text-neutral-300 dark:hover:bg-neutral-800"
+      >
+        Search
+        <kbd
+          class="ml-auto flex h-5 w-5 items-center justify-center rounded bg-neutral-200 font-sans text-xs text-neutral-500 dark:bg-neutral-700 dark:text-neutral-400"
+          aria-hidden="true">/</kbd
+        >
+      </button>
+    {/if}
+
     {#if mode === "simple"}
       <div class="mt-6 flex">
         <p class="text-sm text-neutral-500 dark:text-neutral-400">
diff --git a/src/lib/components/MobileMenu.svelte b/src/lib/components/MobileMenu.svelte
index 9c42318..19ca6ad 100644
--- a/src/lib/components/MobileMenu.svelte
+++ b/src/lib/components/MobileMenu.svelte
@@ -3,6 +3,8 @@
   import { groupsStore } from "$lib/groups.svelte";
   import { resourcesStore } from "$lib/resources.svelte";
   import { auth, openLogin, logout } from "$lib/auth.svelte";
+  import { openSearch } from "$lib/searchModal.svelte";
+  import { SEARCH_ENABLED } from "$lib/config";
   import { draftState, resumeDraft } from "$lib/draft.svelte";
   import ThemeToggle from "$lib/components/ThemeToggle.svelte";
 
@@ -124,6 +126,19 @@
           >{mode === "simple" ? "Discussions" : "Home"}</a
         >
 
+        {#if SEARCH_ENABLED}
+          <button
+            type="button"
+            onclick={() => {
+              onClose();
+              openSearch();
+            }}
+            class="hover:text-accent py-2 text-left text-xl text-neutral-700 dark:text-neutral-300"
+          >
+            Search
+          </button>
+        {/if}
+
         {#if mode === "full"}
           <nav class="mt-4" aria-label="Rooms">
             <p
diff --git a/src/lib/components/SearchBox.svelte b/src/lib/components/SearchBox.svelte
deleted file mode 100644
index ec70506..0000000
--- a/src/lib/components/SearchBox.svelte
+++ /dev/null
@@ -1,224 +0,0 @@
-<script lang="ts">
-  import { goto } from "$app/navigation";
-  import { searchThreads, type SearchResult } from "$lib/search";
-
-  let query = $state("");
-  let results = $state<SearchResult[]>([]);
-  let resultsQuery = $state(""); // The query that produced the current results
-  let open = $state(false);
-  let searching = $state(false);
-  let activeIndex = $state(-1);
-  let inputEl = $state<HTMLInputElement | null>(null);
-  let timer: ReturnType<typeof setTimeout> | null = null;
-  let seq = 0;
-
-  function schedule() {
-    const q = query.trim();
-    if (timer) clearTimeout(timer);
-    activeIndex = -1;
-    if (q.length < 2) {
-      seq++; // Supersede any in-flight query
-      open = false;
-      results = [];
-      searching = false;
-      return;
-    }
-    open = true;
-    searching = true;
-    timer = setTimeout(async () => {
-      const id = ++seq;
-      try {
-        const r = await searchThreads(q);
-        if (id !== seq) return;
-        results = r;
-        resultsQuery = q;
-      } finally {
-        if (id === seq) searching = false;
-      }
-    }, 300);
-  }
-
-  function close() {
-    open = false;
-    activeIndex = -1;
-  }
-
-  function select(r: SearchResult) {
-    close();
-    goto(`/thread/${r.threadId}`);
-  }
-
-  function onKeydown(e: KeyboardEvent) {
-    if (e.key === "Escape") {
-      close();
-      return;
-    }
-    if (!open || results.length === 0) return;
-    if (e.key === "ArrowDown") {
-      e.preventDefault();
-      activeIndex = (activeIndex + 1) % results.length;
-    } else if (e.key === "ArrowUp") {
-      e.preventDefault();
-      activeIndex = (activeIndex - 1 + results.length) % results.length;
-    } else if (e.key === "Enter" && activeIndex >= 0) {
-      e.preventDefault();
-      select(results[activeIndex]);
-    }
-  }
-
-  const terms = $derived(
-    resultsQuery.split(/\s+/).filter((t) => t.length >= 2),
-  );
-
-  function escapeRe(s: string): string {
-    return s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-  }
-
-  // Split into alternating plain/matched segments for <mark> rendering
-  function highlight(text: string): { text: string; hit: boolean }[] {
-    if (!text || terms.length === 0) return [{ text, hit: false }];
-    const alts = terms.map(escapeRe).join("|");
-    const exact = new RegExp(`^(${alts})$`, "i");
-    return text
-      .split(new RegExp(`(${alts})`, "gi"))
-      .filter((s) => s !== "")
-      .map((s) => ({ text: s, hit: exact.test(s) }));
-  }
-
-  function onFocus() {
-    if (query.trim().length >= 2) open = true;
-  }
-
-  // Global "/" shortcut, unless the user is typing somewhere else
-  function onWindowKeydown(e: KeyboardEvent) {
-    if (e.key !== "/" || e.metaKey || e.ctrlKey || e.altKey) return;
-    const t = e.target as HTMLElement | null;
-    if (
-      t &&
-      (t.tagName === "INPUT" || t.tagName === "TEXTAREA" || t.isContentEditable)
-    )
-      return;
-    e.preventDefault();
-    inputEl?.focus();
-  }
-
-  function onBlur() {
-    // Delay so a mousedown on a result still lands
-    setTimeout(() => close(), 120);
-  }
-</script>
-
-<svelte:window onkeydown={onWindowKeydown} />
-
-<div class="relative">
-  <div class="relative">
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      class="pointer-events-none absolute top-1/2 left-4 h-5 w-5 -translate-y-1/2 text-neutral-400 dark:text-neutral-500"
-      fill="none"
-      viewBox="0 0 24 24"
-      stroke="currentColor"
-      stroke-width="2"
-      aria-hidden="true"
-    >
-      <path
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"
-      />
-    </svg>
-    <input
-      bind:this={inputEl}
-      bind:value={query}
-      type="search"
-      placeholder="Search"
-      role="combobox"
-      aria-expanded={open}
-      aria-controls={open ? "search-results" : undefined}
-      aria-activedescendant={activeIndex >= 0
-        ? `search-result-${activeIndex}`
-        : undefined}
-      aria-label="Search discussions"
-      autocomplete="off"
-      oninput={schedule}
-      onkeydown={onKeydown}
-      onfocus={onFocus}
-      onblur={onBlur}
-      class="focus:ring-accent w-full rounded border border-neutral-200  px-3 py-2 focus:ring-1 focus:outline-none disabled:opacity-50
-       bg-neutral-100 focus:bg-neutral-50  pr-12 pl-11 text-neutral-800 placeholder-neutral-400 dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-200 dark:placeholder-neutral-500 focus:dark:ring-accent focus:dark:bg-neutral-900"
-    />
-    <kbd
-      class="pointer-events-none absolute top-1/2 right-3 flex h-6 w-6 -translate-y-1/2 items-center justify-center rounded-md bg-neutral-200 font-sans text-sm text-neutral-500 dark:bg-neutral-700 dark:text-neutral-400"
-      aria-hidden="true">/</kbd
-    >
-  </div>
-
-  {#if open}
-    <div
-      id="search-results"
-      role="listbox"
-      aria-label="Search results"
-      class="absolute right-0 left-0 z-30 mt-2 max-h-96 overflow-auto rounded border border-neutral-200 bg-white py-2 shadow-xl dark:border-neutral-700 dark:bg-neutral-900"
-    >
-      {#if searching}
-        <div
-          class="flex items-center gap-2 px-4 py-2 text-sm text-neutral-400 dark:text-neutral-500"
-          aria-live="polite"
-        >
-          <span
-            class="inline-block h-3 w-3 animate-spin rounded-full border border-neutral-300 border-t-neutral-600 dark:border-neutral-600"
-            aria-hidden="true"
-          ></span>
-          <span>Searching…</span>
-        </div>
-      {:else if results.length === 0}
-        <div class="px-4 py-2 text-sm text-neutral-400 dark:text-neutral-500">
-          No results
-        </div>
-      {/if}
-      {#snippet marked(text: string)}
-        {#each highlight(text) as p}
-          {#if p.hit}<mark
-              class="bg-secondary/40 dark:bg-secondary/60 rounded-sm text-inherit"
-              >{p.text}</mark
-            >{:else}{p.text}{/if}
-        {/each}
-      {/snippet}
-      {#each results as r, i (r.threadId)}
-        <a
-          id="search-result-{i}"
-          href="/thread/{r.threadId}"
-          role="option"
-          aria-selected={i === activeIndex}
-          class="block px-4 py-2 {i === activeIndex
-            ? 'bg-neutral-100 dark:bg-neutral-800'
-            : ''}"
-          onmousedown={(e) => {
-            e.preventDefault();
-            select(r);
-          }}
-          onmouseenter={() => (activeIndex = i)}
-        >
-          <span
-            class="block truncate font-medium text-neutral-800 dark:text-neutral-200"
-          >
-            {@render marked(r.title)}
-            {#if r.matchKind === "reply"}
-              <span
-                class="ml-1 text-xs font-normal text-neutral-400 dark:text-neutral-500"
-                >reply</span
-              >
-            {/if}
-          </span>
-          {#if r.snippet}
-            <span
-              class="block truncate text-sm text-neutral-500 dark:text-neutral-400"
-            >
-              {@render marked(r.snippet)}
-            </span>
-          {/if}
-        </a>
-      {/each}
-    </div>
-  {/if}
-</div>
diff --git a/src/lib/components/SearchModal.svelte b/src/lib/components/SearchModal.svelte
new file mode 100644
index 0000000..ef72802
--- /dev/null
+++ b/src/lib/components/SearchModal.svelte
@@ -0,0 +1,233 @@
+<script lang="ts">
+  import { tick } from "svelte";
+  import { goto } from "$app/navigation";
+  import { searchThreads, type SearchResult } from "$lib/search";
+  import { searchModal, openSearch, closeSearch } from "$lib/searchModal.svelte";
+
+  let query = $state("");
+  let results = $state<SearchResult[]>([]);
+  let resultsQuery = $state(""); // The query that produced the current results
+  let searching = $state(false);
+  let activeIndex = $state(-1);
+  let inputEl = $state<HTMLInputElement | null>(null);
+  let timer: ReturnType<typeof setTimeout> | null = null;
+  let seq = 0;
+
+  const active = $derived(resultsQuery.trim().length >= 2);
+
+  // Focus (and select, so a stale query is typed over) when the modal opens
+  $effect(() => {
+    if (searchModal.open)
+      tick().then(() => {
+        inputEl?.focus();
+        inputEl?.select();
+      });
+  });
+
+  function schedule() {
+    const q = query.trim();
+    if (timer) clearTimeout(timer);
+    activeIndex = -1;
+    if (q.length < 2) {
+      seq++; // Supersede any in-flight query
+      results = [];
+      resultsQuery = "";
+      searching = false;
+      return;
+    }
+    searching = true;
+    timer = setTimeout(async () => {
+      const id = ++seq;
+      try {
+        const r = await searchThreads(q);
+        if (id !== seq) return;
+        results = r;
+        resultsQuery = q;
+      } finally {
+        if (id === seq) searching = false;
+      }
+    }, 300);
+  }
+
+  function select(r: SearchResult) {
+    closeSearch();
+    goto(`/thread/${r.threadId}`);
+  }
+
+  function onInputKeydown(e: KeyboardEvent) {
+    if (results.length === 0) return;
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      activeIndex = (activeIndex + 1) % results.length;
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      activeIndex = (activeIndex - 1 + results.length) % results.length;
+    } else if (e.key === "Enter" && activeIndex >= 0) {
+      e.preventDefault();
+      select(results[activeIndex]);
+    }
+  }
+
+  const terms = $derived(resultsQuery.split(/\s+/).filter((t) => t.length >= 2));
+
+  function escapeRe(s: string): string {
+    return s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  }
+
+  // Split into alternating plain/matched segments for <mark> rendering
+  function highlight(text: string): { text: string; hit: boolean }[] {
+    if (!text || terms.length === 0) return [{ text, hit: false }];
+    const alts = terms.map(escapeRe).join("|");
+    const exact = new RegExp(`^(${alts})$`, "i");
+    return text
+      .split(new RegExp(`(${alts})`, "gi"))
+      .filter((s) => s !== "")
+      .map((s) => ({ text: s, hit: exact.test(s) }));
+  }
+
+  // Global "/" opens the search from any page, unless typing somewhere else
+  function onWindowKeydown(e: KeyboardEvent) {
+    if (searchModal.open) {
+      if (e.key === "Escape") closeSearch();
+      return;
+    }
+    if (e.key !== "/" || e.metaKey || e.ctrlKey || e.altKey) return;
+    const t = e.target as HTMLElement | null;
+    if (
+      t &&
+      (t.tagName === "INPUT" || t.tagName === "TEXTAREA" || t.isContentEditable)
+    )
+      return;
+    e.preventDefault();
+    openSearch();
+  }
+</script>
+
+<svelte:window onkeydown={onWindowKeydown} />
+
+{#if searchModal.open}
+  <div class="fixed inset-0 z-50 flex flex-col items-center px-4 pt-[12vh]">
+    <button
+      type="button"
+      aria-label="Close search"
+      class="absolute inset-0 bg-black/40"
+      onclick={closeSearch}
+    ></button>
+    <div
+      class="relative w-full max-w-xl rounded-lg bg-white p-3 shadow-xl dark:bg-neutral-900"
+      role="dialog"
+      aria-modal="true"
+      aria-label="Search"
+    >
+      <div class="relative">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="pointer-events-none absolute top-1/2 left-4 h-5 w-5 -translate-y-1/2 text-neutral-400 dark:text-neutral-500"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+          stroke-width="2"
+          aria-hidden="true"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"
+          />
+        </svg>
+        <input
+          bind:this={inputEl}
+          bind:value={query}
+          type="search"
+          placeholder="Search"
+          role="combobox"
+          aria-expanded={active}
+          aria-controls={active ? "search-results" : undefined}
+          aria-activedescendant={activeIndex >= 0
+            ? `search-result-${activeIndex}`
+            : undefined}
+          aria-label="Search discussions"
+          autocomplete="off"
+          oninput={schedule}
+          onkeydown={onInputKeydown}
+          class="focus:ring-accent focus:dark:ring-accent w-full rounded border border-neutral-200 bg-neutral-100 py-2 pr-14 pl-11 text-neutral-800 placeholder-neutral-400 focus:bg-neutral-50 focus:ring-1 focus:outline-none dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-200 dark:placeholder-neutral-500 focus:dark:bg-neutral-950"
+        />
+        <kbd
+          class="pointer-events-none absolute top-1/2 right-3 flex h-6 -translate-y-1/2 items-center justify-center rounded-md bg-neutral-200 px-1.5 font-sans text-xs text-neutral-500 dark:bg-neutral-700 dark:text-neutral-400"
+          aria-hidden="true">esc</kbd
+        >
+      </div>
+
+      {#if active || searching}
+        <div
+          id="search-results"
+          role="listbox"
+          aria-label="Search results"
+          class="mt-3 max-h-[50vh] overflow-auto border-t border-neutral-100 pt-2 dark:border-neutral-800"
+        >
+          {#if searching}
+            <div
+              class="flex items-center gap-2 px-4 py-2 text-sm text-neutral-400 dark:text-neutral-500"
+              aria-live="polite"
+            >
+              <span
+                class="inline-block h-3 w-3 animate-spin rounded-full border border-neutral-300 border-t-neutral-600 dark:border-neutral-600"
+                aria-hidden="true"
+              ></span>
+              <span>Searching…</span>
+            </div>
+          {:else if results.length === 0}
+            <div
+              class="px-4 py-2 text-sm text-neutral-400 dark:text-neutral-500"
+            >
+              No results
+            </div>
+          {/if}
+          {#snippet marked(text: string)}
+            {#each highlight(text) as p}
+              {#if p.hit}<mark
+                  class="bg-secondary/40 dark:bg-secondary/30 rounded-sm text-inherit"
+                  >{p.text}</mark
+                >{:else}{p.text}{/if}
+            {/each}
+          {/snippet}
+          {#each results as r, i (r.threadId)}
+            <a
+              id="search-result-{i}"
+              href="/thread/{r.threadId}"
+              role="option"
+              aria-selected={i === activeIndex}
+              class="block rounded px-4 py-2 {i === activeIndex
+                ? 'bg-neutral-100 dark:bg-neutral-800'
+                : ''}"
+              onmousedown={(e) => {
+                e.preventDefault();
+                select(r);
+              }}
+              onmouseenter={() => (activeIndex = i)}
+            >
+              <span
+                class="block truncate font-medium text-neutral-800 dark:text-neutral-200"
+              >
+                {@render marked(r.title)}
+                {#if r.matchKind === "reply"}
+                  <span
+                    class="ml-1 text-xs font-normal text-neutral-400 dark:text-neutral-500"
+                    >reply</span
+                  >
+                {/if}
+              </span>
+              {#if r.snippet}
+                <span
+                  class="block truncate text-sm text-neutral-500 dark:text-neutral-400"
+                >
+                  {@render marked(r.snippet)}
+                </span>
+              {/if}
+            </a>
+          {/each}
+        </div>
+      {/if}
+    </div>
+  </div>
+{/if}
diff --git a/src/lib/searchModal.svelte.ts b/src/lib/searchModal.svelte.ts
new file mode 100644
index 0000000..8e3892d
--- /dev/null
+++ b/src/lib/searchModal.svelte.ts
@@ -0,0 +1,15 @@
+let open = $state(false);
+
+export const searchModal = {
+  get open() {
+    return open;
+  },
+};
+
+export function openSearch() {
+  open = true;
+}
+
+export function closeSearch() {
+  open = false;
+}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 7523c74..8270607 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -7,6 +7,7 @@
   import ChatSidebar from "$lib/components/ChatSidebar.svelte";
   import LatestDiscussions from "$lib/components/LatestDiscussions.svelte";
   import LoginModal from "$lib/components/LoginModal.svelte";
+  import SearchModal from "$lib/components/SearchModal.svelte";
   import JoinModal from "$lib/components/JoinModal.svelte";
   import NewDiscussionModal from "$lib/components/NewDiscussionModal.svelte";
   import DeleteModal from "$lib/components/DeleteModal.svelte";
@@ -25,7 +26,12 @@
   import { startChat } from "$lib/chat.svelte";
   import { resetForumConnection } from "$lib/relay";
   import { activeGroup, setActiveGroup } from "$lib/active.svelte";
-  import { MODE, ACCENT_COLOR, SECONDARY_COLOR } from "$lib/config";
+  import {
+    MODE,
+    ACCENT_COLOR,
+    SECONDARY_COLOR,
+    SEARCH_ENABLED,
+  } from "$lib/config";
 
   let { children } = $props();
 
@@ -284,6 +290,9 @@
 />
 
 <LoginModal />
+{#if SEARCH_ENABLED}
+  <SearchModal />
+{/if}
 <JoinModal />
 <NewDiscussionModal />
 <DeleteModal />
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index bf8ca5b..6126a9c 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,12 +1,11 @@
 <script lang="ts">
   import DiscussionsFeed from "$lib/components/DiscussionsFeed.svelte";
   import PostContent from "$lib/components/PostContent.svelte";
-  import SearchBox from "$lib/components/SearchBox.svelte";
   import Tag from "$lib/components/Tag.svelte";
   import { groupsStore } from "$lib/groups.svelte";
   import { overviewStore, loadOverview } from "$lib/overview.svelte";
   import { partialsStore } from "$lib/partials.svelte";
-  import { MODE, GROUP_ID, SEARCH_ENABLED } from "$lib/config";
+  import { MODE, GROUP_ID } from "$lib/config";
   import type { NostrUser } from "@nostr/gadgets/metadata";
 
   const partial = $derived(partialsStore.get("home"));
@@ -52,12 +51,6 @@
   {/if}
 {/snippet}
 
-{#if SEARCH_ENABLED}
-  <div class="mt-2 mb-6">
-    <SearchBox />
-  </div>
-{/if}
-
 {#if partial}
   <div class="mt-2 mb-8">
     <PostContent content={partial.content} headingOffset={0} />

From b18b201fbbc7636d56fa1531ed5cec1cefd6a3b4 Mon Sep 17 00:00:00 2001
From: dtonon <git@dtonon.com>
Date: Thu, 16 Jul 2026 22:35:11 +0100
Subject: [PATCH 12/15] Restore a search trigger on the homepage

---
 src/routes/+page.svelte | 34 +++++++++++++++++++++++++++++++++-
 1 file changed, 33 insertions(+), 1 deletion(-)

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 6126a9c..5cee3b6 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -5,7 +5,8 @@
   import { groupsStore } from "$lib/groups.svelte";
   import { overviewStore, loadOverview } from "$lib/overview.svelte";
   import { partialsStore } from "$lib/partials.svelte";
-  import { MODE, GROUP_ID } from "$lib/config";
+  import { MODE, GROUP_ID, SEARCH_ENABLED } from "$lib/config";
+  import { openSearch } from "$lib/searchModal.svelte";
   import type { NostrUser } from "@nostr/gadgets/metadata";
 
   const partial = $derived(partialsStore.get("home"));
@@ -51,6 +52,37 @@
   {/if}
 {/snippet}
 
+<!-- Looks like the search input but only opens the global search modal, so
+     there is a single search implementation. -->
+{#if SEARCH_ENABLED}
+  <button
+    type="button"
+    onclick={openSearch}
+    class="focus:ring-accent relative mt-2 mb-6 flex w-full items-center gap-3 rounded border border-neutral-200 bg-neutral-100 px-4 py-2 text-neutral-400 focus:ring-1 focus:outline-none dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-500"
+  >
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      class="h-5 w-5"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+      stroke-width="2"
+      aria-hidden="true"
+    >
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"
+      />
+    </svg>
+    Search
+    <kbd
+      class="pointer-events-none absolute top-1/2 right-3 flex h-6 w-6 -translate-y-1/2 items-center justify-center rounded-md bg-neutral-200 font-sans text-sm text-neutral-500 dark:bg-neutral-700 dark:text-neutral-400"
+      aria-hidden="true">/</kbd
+    >
+  </button>
+{/if}
+
 {#if partial}
   <div class="mt-2 mb-8">
     <PostContent content={partial.content} headingOffset={0} />

From d256abb42fd999f0c2dfe3bf03e640fe54821069 Mon Sep 17 00:00:00 2001
From: dtonon <git@dtonon.com>
Date: Thu, 16 Jul 2026 13:23:28 +0100
Subject: [PATCH 13/15] Split search into shared state with inline homepage
 input and modal

---
 src/lib/components/SearchInline.svelte  |  96 ++++++++++++++
 src/lib/components/SearchModal.svelte   | 161 +++---------------------
 src/lib/components/SearchResults.svelte |  76 +++++++++++
 src/lib/searchModal.svelte.ts           |  15 ++-
 src/lib/searchState.svelte.ts           | 107 ++++++++++++++++
 src/routes/+page.svelte                 |  33 +----
 6 files changed, 316 insertions(+), 172 deletions(-)
 create mode 100644 src/lib/components/SearchInline.svelte
 create mode 100644 src/lib/components/SearchResults.svelte
 create mode 100644 src/lib/searchState.svelte.ts

diff --git a/src/lib/components/SearchInline.svelte b/src/lib/components/SearchInline.svelte
new file mode 100644
index 0000000..66e20e4
--- /dev/null
+++ b/src/lib/components/SearchInline.svelte
@@ -0,0 +1,96 @@
+<script lang="ts">
+  import { goto } from "$app/navigation";
+  import type { SearchResult } from "$lib/search";
+  import { createSearchState } from "$lib/searchState.svelte";
+  import { registerInlineSearch } from "$lib/searchModal.svelte";
+  import SearchResults from "$lib/components/SearchResults.svelte";
+
+  const search = createSearchState();
+
+  let open = $state(false);
+  let inputEl = $state<HTMLInputElement | null>(null);
+
+  // Route the global "/" shortcut and the sidebar/menu triggers here while
+  // this input is on screen
+  $effect(() => registerInlineSearch(() => inputEl?.focus()));
+
+  function onInput() {
+    search.schedule();
+    open = search.query.trim().length >= 2;
+  }
+
+  function select(r: SearchResult) {
+    open = false;
+    goto(`/thread/${r.threadId}`);
+  }
+
+  function onKeydown(e: KeyboardEvent) {
+    if (e.key === "Escape") {
+      open = false;
+      return;
+    }
+    if (!open) return;
+    search.navigate(e, select);
+  }
+
+  function onFocus() {
+    if (search.query.trim().length >= 2) open = true;
+  }
+
+  function onBlur() {
+    // Delay so a mousedown on a result still lands
+    setTimeout(() => (open = false), 120);
+  }
+</script>
+
+<div class="relative">
+  <div class="relative">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      class="pointer-events-none absolute top-1/2 left-4 h-5 w-5 -translate-y-1/2 text-neutral-400 dark:text-neutral-500"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+      stroke-width="2"
+      aria-hidden="true"
+    >
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"
+      />
+    </svg>
+    <input
+      bind:this={inputEl}
+      bind:value={search.query}
+      type="search"
+      placeholder="Search"
+      role="combobox"
+      aria-expanded={open}
+      aria-controls={open ? "search-results-inline" : undefined}
+      aria-activedescendant={search.activeIndex >= 0
+        ? `search-results-inline-${search.activeIndex}`
+        : undefined}
+      aria-label="Search discussions"
+      autocomplete="off"
+      oninput={onInput}
+      onkeydown={onKeydown}
+      onfocus={onFocus}
+      onblur={onBlur}
+      class="focus:ring-accent focus:dark:ring-accent w-full rounded border border-neutral-200 bg-neutral-100 py-2 pr-12 pl-11 text-neutral-800 placeholder-neutral-400 focus:bg-neutral-50 focus:ring-1 focus:outline-none dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-200 dark:placeholder-neutral-500 focus:dark:bg-neutral-950"
+    />
+    <kbd
+      class="pointer-events-none absolute top-1/2 right-3 flex h-6 w-6 -translate-y-1/2 items-center justify-center rounded-md bg-neutral-200 font-sans text-sm text-neutral-500 dark:bg-neutral-700 dark:text-neutral-400"
+      aria-hidden="true">/</kbd
+    >
+  </div>
+
+  {#if open}
+    <SearchResults
+      {search}
+      idBase="search-results-inline"
+      class="absolute right-0 left-0 z-30 mt-2 max-h-96 overflow-auto rounded-lg border border-neutral-200 bg-white py-2 shadow-xl dark:border-neutral-700 dark:bg-neutral-900"
+      onselect={select}
+    />
+  {/if}
+</div>
diff --git a/src/lib/components/SearchModal.svelte b/src/lib/components/SearchModal.svelte
index ef72802..9d07dbf 100644
--- a/src/lib/components/SearchModal.svelte
+++ b/src/lib/components/SearchModal.svelte
@@ -1,19 +1,14 @@
 <script lang="ts">
   import { tick } from "svelte";
   import { goto } from "$app/navigation";
-  import { searchThreads, type SearchResult } from "$lib/search";
+  import type { SearchResult } from "$lib/search";
+  import { createSearchState } from "$lib/searchState.svelte";
   import { searchModal, openSearch, closeSearch } from "$lib/searchModal.svelte";
+  import SearchResults from "$lib/components/SearchResults.svelte";
+
+  const search = createSearchState();
 
-  let query = $state("");
-  let results = $state<SearchResult[]>([]);
-  let resultsQuery = $state(""); // The query that produced the current results
-  let searching = $state(false);
-  let activeIndex = $state(-1);
   let inputEl = $state<HTMLInputElement | null>(null);
-  let timer: ReturnType<typeof setTimeout> | null = null;
-  let seq = 0;
-
-  const active = $derived(resultsQuery.trim().length >= 2);
 
   // Focus (and select, so a stale query is typed over) when the modal opens
   $effect(() => {
@@ -24,67 +19,11 @@
       });
   });
 
-  function schedule() {
-    const q = query.trim();
-    if (timer) clearTimeout(timer);
-    activeIndex = -1;
-    if (q.length < 2) {
-      seq++; // Supersede any in-flight query
-      results = [];
-      resultsQuery = "";
-      searching = false;
-      return;
-    }
-    searching = true;
-    timer = setTimeout(async () => {
-      const id = ++seq;
-      try {
-        const r = await searchThreads(q);
-        if (id !== seq) return;
-        results = r;
-        resultsQuery = q;
-      } finally {
-        if (id === seq) searching = false;
-      }
-    }, 300);
-  }
-
   function select(r: SearchResult) {
     closeSearch();
     goto(`/thread/${r.threadId}`);
   }
 
-  function onInputKeydown(e: KeyboardEvent) {
-    if (results.length === 0) return;
-    if (e.key === "ArrowDown") {
-      e.preventDefault();
-      activeIndex = (activeIndex + 1) % results.length;
-    } else if (e.key === "ArrowUp") {
-      e.preventDefault();
-      activeIndex = (activeIndex - 1 + results.length) % results.length;
-    } else if (e.key === "Enter" && activeIndex >= 0) {
-      e.preventDefault();
-      select(results[activeIndex]);
-    }
-  }
-
-  const terms = $derived(resultsQuery.split(/\s+/).filter((t) => t.length >= 2));
-
-  function escapeRe(s: string): string {
-    return s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-  }
-
-  // Split into alternating plain/matched segments for <mark> rendering
-  function highlight(text: string): { text: string; hit: boolean }[] {
-    if (!text || terms.length === 0) return [{ text, hit: false }];
-    const alts = terms.map(escapeRe).join("|");
-    const exact = new RegExp(`^(${alts})$`, "i");
-    return text
-      .split(new RegExp(`(${alts})`, "gi"))
-      .filter((s) => s !== "")
-      .map((s) => ({ text: s, hit: exact.test(s) }));
-  }
-
   // Global "/" opens the search from any page, unless typing somewhere else
   function onWindowKeydown(e: KeyboardEvent) {
     if (searchModal.open) {
@@ -110,7 +49,7 @@
     <button
       type="button"
       aria-label="Close search"
-      class="absolute inset-0 bg-black/40"
+      class="absolute inset-0 bg-black/40 dark:bg-black/65"
       onclick={closeSearch}
     ></button>
     <div
@@ -137,19 +76,19 @@
         </svg>
         <input
           bind:this={inputEl}
-          bind:value={query}
+          bind:value={search.query}
           type="search"
           placeholder="Search"
           role="combobox"
-          aria-expanded={active}
-          aria-controls={active ? "search-results" : undefined}
-          aria-activedescendant={activeIndex >= 0
-            ? `search-result-${activeIndex}`
+          aria-expanded={search.active}
+          aria-controls={search.active ? "search-results-modal" : undefined}
+          aria-activedescendant={search.activeIndex >= 0
+            ? `search-results-modal-${search.activeIndex}`
             : undefined}
           aria-label="Search discussions"
           autocomplete="off"
-          oninput={schedule}
-          onkeydown={onInputKeydown}
+          oninput={search.schedule}
+          onkeydown={(e) => search.navigate(e, select)}
           class="focus:ring-accent focus:dark:ring-accent w-full rounded border border-neutral-200 bg-neutral-100 py-2 pr-14 pl-11 text-neutral-800 placeholder-neutral-400 focus:bg-neutral-50 focus:ring-1 focus:outline-none dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-200 dark:placeholder-neutral-500 focus:dark:bg-neutral-950"
         />
         <kbd
@@ -158,75 +97,13 @@
         >
       </div>
 
-      {#if active || searching}
-        <div
-          id="search-results"
-          role="listbox"
-          aria-label="Search results"
+      {#if search.active || search.searching}
+        <SearchResults
+          {search}
+          idBase="search-results-modal"
           class="mt-3 max-h-[50vh] overflow-auto border-t border-neutral-100 pt-2 dark:border-neutral-800"
-        >
-          {#if searching}
-            <div
-              class="flex items-center gap-2 px-4 py-2 text-sm text-neutral-400 dark:text-neutral-500"
-              aria-live="polite"
-            >
-              <span
-                class="inline-block h-3 w-3 animate-spin rounded-full border border-neutral-300 border-t-neutral-600 dark:border-neutral-600"
-                aria-hidden="true"
-              ></span>
-              <span>Searching…</span>
-            </div>
-          {:else if results.length === 0}
-            <div
-              class="px-4 py-2 text-sm text-neutral-400 dark:text-neutral-500"
-            >
-              No results
-            </div>
-          {/if}
-          {#snippet marked(text: string)}
-            {#each highlight(text) as p}
-              {#if p.hit}<mark
-                  class="bg-secondary/40 dark:bg-secondary/30 rounded-sm text-inherit"
-                  >{p.text}</mark
-                >{:else}{p.text}{/if}
-            {/each}
-          {/snippet}
-          {#each results as r, i (r.threadId)}
-            <a
-              id="search-result-{i}"
-              href="/thread/{r.threadId}"
-              role="option"
-              aria-selected={i === activeIndex}
-              class="block rounded px-4 py-2 {i === activeIndex
-                ? 'bg-neutral-100 dark:bg-neutral-800'
-                : ''}"
-              onmousedown={(e) => {
-                e.preventDefault();
-                select(r);
-              }}
-              onmouseenter={() => (activeIndex = i)}
-            >
-              <span
-                class="block truncate font-medium text-neutral-800 dark:text-neutral-200"
-              >
-                {@render marked(r.title)}
-                {#if r.matchKind === "reply"}
-                  <span
-                    class="ml-1 text-xs font-normal text-neutral-400 dark:text-neutral-500"
-                    >reply</span
-                  >
-                {/if}
-              </span>
-              {#if r.snippet}
-                <span
-                  class="block truncate text-sm text-neutral-500 dark:text-neutral-400"
-                >
-                  {@render marked(r.snippet)}
-                </span>
-              {/if}
-            </a>
-          {/each}
-        </div>
+          onselect={select}
+        />
       {/if}
     </div>
   </div>
diff --git a/src/lib/components/SearchResults.svelte b/src/lib/components/SearchResults.svelte
new file mode 100644
index 0000000..a8585c1
--- /dev/null
+++ b/src/lib/components/SearchResults.svelte
@@ -0,0 +1,76 @@
+<script lang="ts">
+  import type { SearchState } from "$lib/searchState.svelte";
+  import type { SearchResult } from "$lib/search";
+
+  type Props = {
+    search: SearchState;
+    // Base for the listbox and option element ids (aria-activedescendant)
+    idBase: string;
+    class?: string;
+    onselect: (r: SearchResult) => void;
+  };
+
+  let { search, idBase, class: cls = "", onselect }: Props = $props();
+</script>
+
+<div id={idBase} role="listbox" aria-label="Search results" class={cls}>
+  {#if search.searching}
+    <div
+      class="flex items-center gap-2 px-4 py-2 text-sm text-neutral-400 dark:text-neutral-500"
+      aria-live="polite"
+    >
+      <span
+        class="inline-block h-3 w-3 animate-spin rounded-full border border-neutral-300 border-t-neutral-600 dark:border-neutral-600"
+        aria-hidden="true"
+      ></span>
+      <span>Searching…</span>
+    </div>
+  {:else if search.results.length === 0}
+    <div class="px-4 py-2 text-sm text-neutral-400 dark:text-neutral-500">
+      No results
+    </div>
+  {/if}
+  {#snippet marked(text: string)}
+    {#each search.highlight(text) as p}
+      {#if p.hit}<mark
+          class="bg-secondary/40 dark:bg-secondary/30 rounded-sm text-inherit"
+          >{p.text}</mark
+        >{:else}{p.text}{/if}
+    {/each}
+  {/snippet}
+  {#each search.results as r, i (r.threadId)}
+    <a
+      id="{idBase}-{i}"
+      href="/thread/{r.threadId}"
+      role="option"
+      aria-selected={i === search.activeIndex}
+      class="block rounded px-4 py-2 {i === search.activeIndex
+        ? 'bg-neutral-100 dark:bg-neutral-800'
+        : ''}"
+      onmousedown={(e) => {
+        e.preventDefault();
+        onselect(r);
+      }}
+      onmouseenter={() => (search.activeIndex = i)}
+    >
+      <span
+        class="block truncate font-medium text-neutral-800 dark:text-neutral-200"
+      >
+        {@render marked(r.title)}
+        {#if r.matchKind === "reply"}
+          <span
+            class="ml-1 text-xs font-normal text-neutral-400 dark:text-neutral-500"
+            >reply</span
+          >
+        {/if}
+      </span>
+      {#if r.snippet}
+        <span
+          class="block truncate text-sm text-neutral-500 dark:text-neutral-400"
+        >
+          {@render marked(r.snippet)}
+        </span>
+      {/if}
+    </a>
+  {/each}
+</div>
diff --git a/src/lib/searchModal.svelte.ts b/src/lib/searchModal.svelte.ts
index 8e3892d..101af29 100644
--- a/src/lib/searchModal.svelte.ts
+++ b/src/lib/searchModal.svelte.ts
@@ -1,13 +1,26 @@
 let open = $state(false);
 
+// When a page hosts an inline search input (the homepage), it registers a
+// focus function here and every search trigger routes to it instead of the
+// modal, so a modal input never opens on top of an inline one.
+let inlineFocus: (() => void) | null = null;
+
 export const searchModal = {
   get open() {
     return open;
   },
 };
 
+export function registerInlineSearch(focus: () => void): () => void {
+  inlineFocus = focus;
+  return () => {
+    if (inlineFocus === focus) inlineFocus = null;
+  };
+}
+
 export function openSearch() {
-  open = true;
+  if (inlineFocus) inlineFocus();
+  else open = true;
 }
 
 export function closeSearch() {
diff --git a/src/lib/searchState.svelte.ts b/src/lib/searchState.svelte.ts
new file mode 100644
index 0000000..beb9870
--- /dev/null
+++ b/src/lib/searchState.svelte.ts
@@ -0,0 +1,107 @@
+import { searchThreads, type SearchResult } from "$lib/search";
+
+// Debounced-search state machine shared by the inline (homepage) and modal
+// search shells, so behavior lives in one place and the shells only differ
+// in chrome and positioning.
+export function createSearchState() {
+  let query = $state("");
+  let results = $state<SearchResult[]>([]);
+  let resultsQuery = $state(""); // The query that produced the current results
+  let searching = $state(false);
+  let activeIndex = $state(-1);
+  let timer: ReturnType<typeof setTimeout> | null = null;
+  let seq = 0;
+
+  const terms = $derived(
+    resultsQuery.split(/\s+/).filter((t) => t.length >= 2),
+  );
+
+  function schedule() {
+    const q = query.trim();
+    if (timer) clearTimeout(timer);
+    activeIndex = -1;
+    if (q.length < 2) {
+      seq++; // Supersede any in-flight query
+      results = [];
+      resultsQuery = "";
+      searching = false;
+      return;
+    }
+    searching = true;
+    timer = setTimeout(async () => {
+      const id = ++seq;
+      try {
+        const r = await searchThreads(q);
+        if (id !== seq) return;
+        results = r;
+        resultsQuery = q;
+      } finally {
+        if (id === seq) searching = false;
+      }
+    }, 300);
+  }
+
+  function escapeRe(s: string): string {
+    return s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  }
+
+  // Split into alternating plain/matched segments for <mark> rendering
+  function highlight(text: string): { text: string; hit: boolean }[] {
+    if (!text || terms.length === 0) return [{ text, hit: false }];
+    const alts = terms.map(escapeRe).join("|");
+    const exact = new RegExp(`^(${alts})$`, "i");
+    return text
+      .split(new RegExp(`(${alts})`, "gi"))
+      .filter((s) => s !== "")
+      .map((s) => ({ text: s, hit: exact.test(s) }));
+  }
+
+  // Arrow/Enter handling; returns true when the event was consumed
+  function navigate(
+    e: KeyboardEvent,
+    pick: (r: SearchResult) => void,
+  ): boolean {
+    if (results.length === 0) return false;
+    if (e.key === "ArrowDown") {
+      activeIndex = (activeIndex + 1) % results.length;
+    } else if (e.key === "ArrowUp") {
+      activeIndex = (activeIndex - 1 + results.length) % results.length;
+    } else if (e.key === "Enter" && activeIndex >= 0) {
+      pick(results[activeIndex]);
+    } else {
+      return false;
+    }
+    e.preventDefault();
+    return true;
+  }
+
+  return {
+    get query() {
+      return query;
+    },
+    set query(v: string) {
+      query = v;
+    },
+    get results() {
+      return results;
+    },
+    get searching() {
+      return searching;
+    },
+    get activeIndex() {
+      return activeIndex;
+    },
+    set activeIndex(v: number) {
+      activeIndex = v;
+    },
+    // True once a query has produced (or is about to produce) results
+    get active() {
+      return resultsQuery.trim().length >= 2;
+    },
+    schedule,
+    highlight,
+    navigate,
+  };
+}
+
+export type SearchState = ReturnType<typeof createSearchState>;
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 5cee3b6..0a006cd 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -6,7 +6,7 @@
   import { overviewStore, loadOverview } from "$lib/overview.svelte";
   import { partialsStore } from "$lib/partials.svelte";
   import { MODE, GROUP_ID, SEARCH_ENABLED } from "$lib/config";
-  import { openSearch } from "$lib/searchModal.svelte";
+  import SearchInline from "$lib/components/SearchInline.svelte";
   import type { NostrUser } from "@nostr/gadgets/metadata";
 
   const partial = $derived(partialsStore.get("home"));
@@ -52,35 +52,10 @@
   {/if}
 {/snippet}
 
-<!-- Looks like the search input but only opens the global search modal, so
-     there is a single search implementation. -->
 {#if SEARCH_ENABLED}
-  <button
-    type="button"
-    onclick={openSearch}
-    class="focus:ring-accent relative mt-2 mb-6 flex w-full items-center gap-3 rounded border border-neutral-200 bg-neutral-100 px-4 py-2 text-neutral-400 focus:ring-1 focus:outline-none dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-500"
-  >
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      class="h-5 w-5"
-      fill="none"
-      viewBox="0 0 24 24"
-      stroke="currentColor"
-      stroke-width="2"
-      aria-hidden="true"
-    >
-      <path
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"
-      />
-    </svg>
-    Search
-    <kbd
-      class="pointer-events-none absolute top-1/2 right-3 flex h-6 w-6 -translate-y-1/2 items-center justify-center rounded-md bg-neutral-200 font-sans text-sm text-neutral-500 dark:bg-neutral-700 dark:text-neutral-400"
-      aria-hidden="true">/</kbd
-    >
-  </button>
+  <div class="mt-2 mb-6">
+    <SearchInline />
+  </div>
 {/if}
 
 {#if partial}

From a5237a5e757bad0d61c9bc81b2387173bac9f86b Mon Sep 17 00:00:00 2001
From: dtonon <git@dtonon.com>
Date: Fri, 17 Jul 2026 18:22:16 +0100
Subject: [PATCH 14/15] Darken the chat composer in dark mode

---
 src/lib/components/ChatSidebar.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/ChatSidebar.svelte b/src/lib/components/ChatSidebar.svelte
index ca773ef..6551b79 100644
--- a/src/lib/components/ChatSidebar.svelte
+++ b/src/lib/components/ChatSidebar.svelte
@@ -502,7 +502,7 @@
           disabled={sending}
           placeholder="Message..."
           {contextPubkeys}
-          textareaClass="block w-full resize-none rounded border border-neutral-200 dark:border-neutral-700 py-2 pl-3 pr-11 text-sm focus:outline-none focus:ring-1 focus:ring-accent disabled:opacity-50"
+          textareaClass="block w-full resize-none rounded border border-neutral-200 dark:border-neutral-700 dark:bg-neutral-900 focus:dark:bg-neutral-950 py-2 pl-3 pr-11 text-sm focus:outline-none focus:ring-1 focus:ring-accent disabled:opacity-50"
         />
         <button
           type="button"

From fecfbaab8b7b0293dc1476e6207f2a045b8cbc68 Mon Sep 17 00:00:00 2001
From: dtonon <git@dtonon.com>
Date: Tue, 28 Jul 2026 12:03:45 +0100
Subject: [PATCH 15/15] Route search triggers to the inline input via the DOM

---
 src/lib/components/SearchInline.svelte |  8 +-------
 src/lib/searchModal.svelte.ts          | 22 +++++++++-------------
 2 files changed, 10 insertions(+), 20 deletions(-)

diff --git a/src/lib/components/SearchInline.svelte b/src/lib/components/SearchInline.svelte
index 66e20e4..40e0155 100644
--- a/src/lib/components/SearchInline.svelte
+++ b/src/lib/components/SearchInline.svelte
@@ -2,17 +2,11 @@
   import { goto } from "$app/navigation";
   import type { SearchResult } from "$lib/search";
   import { createSearchState } from "$lib/searchState.svelte";
-  import { registerInlineSearch } from "$lib/searchModal.svelte";
   import SearchResults from "$lib/components/SearchResults.svelte";
 
   const search = createSearchState();
 
   let open = $state(false);
-  let inputEl = $state<HTMLInputElement | null>(null);
-
-  // Route the global "/" shortcut and the sidebar/menu triggers here while
-  // this input is on screen
-  $effect(() => registerInlineSearch(() => inputEl?.focus()));
 
   function onInput() {
     search.schedule();
@@ -61,8 +55,8 @@
       />
     </svg>
     <input
-      bind:this={inputEl}
       bind:value={search.query}
+      data-search-inline
       type="search"
       placeholder="Search"
       role="combobox"
diff --git a/src/lib/searchModal.svelte.ts b/src/lib/searchModal.svelte.ts
index 101af29..c923ea9 100644
--- a/src/lib/searchModal.svelte.ts
+++ b/src/lib/searchModal.svelte.ts
@@ -1,25 +1,21 @@
 let open = $state(false);
 
-// When a page hosts an inline search input (the homepage), it registers a
-// focus function here and every search trigger routes to it instead of the
-// modal, so a modal input never opens on top of an inline one.
-let inlineFocus: (() => void) | null = null;
-
 export const searchModal = {
   get open() {
     return open;
   },
 };
 
-export function registerInlineSearch(focus: () => void): () => void {
-  inlineFocus = focus;
-  return () => {
-    if (inlineFocus === focus) inlineFocus = null;
-  };
-}
-
+// When the page hosts an inline search input (the homepage), every search
+// trigger focuses it instead of opening the modal, so a modal input never
+// opens on top of an inline one. Resolved through the DOM rather than a
+// registration callback: it needs no lifecycle bookkeeping and stays correct
+// even if HMR instantiates this module twice in dev.
 export function openSearch() {
-  if (inlineFocus) inlineFocus();
+  const inline = document.querySelector<HTMLInputElement>(
+    "[data-search-inline]",
+  );
+  if (inline) inline.focus();
   else open = true;
 }