feat: search bar in topbar with Gmail-style query syntax

- Search form in topbar routes to /app/search?q=... - SearchResults page with infinite scroll, same row style as FolderView - Supports Gmail-like operators: from:, is:unread, has:attachment, after:, before: - SearchApi.query() calls GET /search which runs through the existing GmailQueryParser - Input sanitised via encodeURIComponent on submit; external links use noopener/noreferrer Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-06-30 20:15:45 +02:00
parent 4d15a3a8fb
commit 498536451e
5 changed files with 164 additions and 1 deletions
@@ -0,0 +1,126 @@
+import { useEffect, useState, useCallback, useRef } from 'react';
+import { useSearchParams } from 'react-router-dom';
+import { SearchApi } from '../api/client.js';
+
+const PAGE_SIZE = 50;
+
+const fmtDate = (iso) => {
+  const d = new Date(iso);
+  const now = new Date();
+  const diffDays = (now - d) / 86400000;
+  if (diffDays < 1) return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+  if (diffDays < 7) return d.toLocaleDateString([], { weekday: 'short' });
+  return d.toLocaleDateString([], { month: 'short', day: 'numeric' });
+};
+
+const fmtSize = (b) => {
+  if (b < 1024) return `${b} B`;
+  if (b < 1048576) return `${(b / 1024).toFixed(0)} KB`;
+  return `${(b / 1048576).toFixed(1)} MB`;
+};
+
+export default function SearchResults() {
+  const [searchParams] = useSearchParams();
+  const q = searchParams.get('q') ?? '';
+
+  const [emails, setEmails] = useState([]);
+  const [totalCount, setTotalCount] = useState(null);
+  const [page, setPage] = useState(1);
+  const [hasMore, setHasMore] = useState(true);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    setEmails([]);
+    setTotalCount(null);
+    setPage(1);
+    setHasMore(true);
+    setError(null);
+  }, [q]);
+
+  const fetchPage = useCallback((p) => {
+    if (!q.trim()) return;
+    setLoading(true);
+    SearchApi.query(q, p, PAGE_SIZE)
+      .then((r) => {
+        setEmails((prev) => p === 1 ? r.items : [...prev, ...r.items]);
+        setTotalCount(r.totalCount);
+        setHasMore(p < r.totalPages);
+        setPage(p);
+      })
+      .catch(() => setError('Search failed. Please try again.'))
+      .finally(() => setLoading(false));
+  }, [q]);
+
+  useEffect(() => { fetchPage(1); }, [fetchPage]);
+
+  const sentinelRef = useRef(null);
+  useEffect(() => {
+    const el = sentinelRef.current;
+    if (!el) return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0].isIntersecting && hasMore && !loading) fetchPage(page + 1);
+      },
+      { rootMargin: '200px' }
+    );
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [hasMore, loading, page, fetchPage]);
+
+  return (
+    <div className="folder-view">
+      <div className="folder-view-head">
+        <h2 className="folder-view-title">🔍 "{q}"</h2>
+        {totalCount !== null && (
+          <span className="folder-view-count">{totalCount.toLocaleString()} result{totalCount !== 1 ? 's' : ''}</span>
+        )}
+      </div>
+
+      {!q.trim() && <div className="fv-empty">Enter a search query above.</div>}
+      {error && <div className="fv-error">{error}</div>}
+      {!loading && !error && q.trim() && emails.length === 0 && !hasMore && (
+        <div className="fv-empty">No results for "{q}".</div>
+      )}
+
+      {emails.length > 0 && (
+        <table className="email-list">
+          <tbody>
+            {emails.map((e) => (
+              <tr
+                key={e.id}
+                className={`email-row${e.isUnread ? ' email-row--unread' : ''}`}
+                onClick={() => window.open(
+                  `https://mail.google.com/mail/u/0/#all/${e.gmailMessageId}`,
+                  '_blank',
+                  'noopener,noreferrer'
+                )}
+                title="Open in Gmail"
+              >
+                <td className="el-unread">{e.isUnread && <span className="unread-dot" />}</td>
+                <td className="el-sender" title={e.senderAddress}>
+                  {e.senderDisplayName || e.senderAddress}
+                </td>
+                <td className="el-subject">
+                  <span className="el-subj-text">{e.subject || '(no subject)'}</span>
+                  {e.snippet && <span className="el-snippet"> — {e.snippet}</span>}
+                </td>
+                <td className="el-meta">
+                  {e.hasAttachments && <span className="el-attach" title="Has attachment">📎</span>}
+                  {e.sizeEstimateBytes > 1048576 && <span className="el-size">{fmtSize(e.sizeEstimateBytes)}</span>}
+                </td>
+                <td className="el-date">{fmtDate(e.sentAtUtc)}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      )}
+
+      <div ref={sentinelRef} className="fv-sentinel" />
+      {loading && <div className="fv-loading-more">Loading…</div>}
+      {!hasMore && emails.length > 0 && (
+        <div className="fv-end">— {emails.length.toLocaleString()} results —</div>
+      )}
+    </div>
+  );
+}