Redesign email inbox as flat two-pane view with search

Restyle the read-only mailbox to match the admin support layout: flat
two-pane (thread list + detail), no cards, top search bar. Drops the
write-oriented chrome (view dropdown, new thread, archive, reply box).

Wire server-side thread search through the mailbox DO, route, and
service so the search bar filters by subject or sender.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Author: bchapuis

apps/api/src/durable-objects/mailbox-do.ts

@@ -381,19 +381,38 @@ export class MailboxDO extends DurableObject<Bindings> {
   async listThreads(
     emailId: string,
     limit: number,
-    offset: number
+    offset: number,
+    search?: string
   ): Promise<MailboxThreadRow[]> {
     this.ensureSchema();
-    const rows = this.ctx.storage.sql
-      .exec(
-        `SELECT id, email_id, subject, from_email, last_message_at, created_at
-         FROM threads WHERE email_id = ?
-         ORDER BY last_message_at DESC LIMIT ? OFFSET ?`,
-        emailId,
-        limit,
-        offset
-      )
-      .toArray() as Record<string, unknown>[];
+    const term = search?.trim();
+    const sql = this.ctx.storage.sql;
+    // Escape the LIKE wildcards a user might type so they match themselves
+    // rather than acting as patterns.
+    const like = term && `%${term.replace(/[\\%_]/g, "\\$&")}%`;
+    const rows = (
+      like
+        ? sql.exec(
+            `SELECT id, email_id, subject, from_email, last_message_at, created_at
+             FROM threads
+             WHERE email_id = ?
+               AND (subject LIKE ? ESCAPE '\\' OR from_email LIKE ? ESCAPE '\\')
+             ORDER BY last_message_at DESC LIMIT ? OFFSET ?`,
+            emailId,
+            like,
+            like,
+            limit,
+            offset
+          )
+        : sql.exec(
+            `SELECT id, email_id, subject, from_email, last_message_at, created_at
+             FROM threads WHERE email_id = ?
+             ORDER BY last_message_at DESC LIMIT ? OFFSET ?`,
+            emailId,
+            limit,
+            offset
+          )
+    ).toArray() as Record<string, unknown>[];
     return rows.map((r) => ({
       id: r.id as string,
       emailId: r.email_id as string,

apps/api/src/routes/emails.ts

@@ -269,6 +269,7 @@ emailRoutes.get(
     z.object({
       limit: z.coerce.number().min(1).max(100).default(50),
       offset: z.coerce.number().min(0).default(0),
+      search: z.string().trim().optional(),
     })
   ),
   async (c) => {
@@ -281,11 +282,12 @@ emailRoutes.get(
       return c.json({ error: "Email not found" }, 404);
     }
 
-    const { limit, offset } = c.req.valid("query");
+    const { limit, offset, search } = c.req.valid("query");
     const threads = await mailboxStub(c.env, organizationId).listThreads(
       id,
       limit,
-      offset
+      offset,
+      search
     );
 
     const response: ListMailboxThreadsResponse = {