feat: infinite scroll for folder view

Replace page buttons with IntersectionObserver sentinel — scrolling near
the bottom automatically fetches and appends the next page of results.
Shows a loading indicator while fetching and a total count footer when
all emails are loaded.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/pages/FolderView.jsx

@@ -1,4 +1,4 @@
-import { useEffect, useState, useCallback } from 'react';
+import { useEffect, useState, useCallback, useRef } from 'react';
 import { useParams } from 'react-router-dom';
 import { SearchApi } from '../api/client.js';
 
@@ -50,43 +50,72 @@ export default function FolderView() {
   const { slug } = useParams();
   const meta = FOLDER_META[slug] ?? { icon: '📁', label: slug };
 
-  const [result, setResult] = useState(null);
+  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);
 
-  const load = useCallback((p) => {
+  // Reset when the folder changes
-    setLoading(true);
+  useEffect(() => {
+    setEmails([]);
+    setTotalCount(null);
+    setPage(1);
+    setHasMore(true);
     setError(null);
+  }, [slug]);
+
+  // Fetch a page and append results
+  const fetchPage = useCallback((p) => {
+    setLoading(true);
     SearchApi.folder(slug, p, PAGE_SIZE)
-      .then((r) => { setResult(r); setPage(p); })
+      .then((r) => {
+        setEmails((prev) => p === 1 ? r.items : [...prev, ...r.items]);
+        setTotalCount(r.totalCount);
+        setHasMore(p < r.totalPages);
+        setPage(p);
+      })
       .catch(() => setError('Failed to load emails.'))
       .finally(() => setLoading(false));
   }, [slug]);
 
-  useEffect(() => { load(1); }, [load]);
+  // Initial load
+  useEffect(() => { fetchPage(1); }, [fetchPage]);
 
-  const emails = result?.items ?? [];
+  // Sentinel div observed to trigger next page
-  const totalPages = result?.totalPages ?? 1;
+  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">{meta.icon} {meta.label}</h2>
-        {result && (
+        {totalCount !== null && (
-          <span className="folder-view-count">{result.totalCount.toLocaleString()} email{result.totalCount !== 1 ? 's' : ''}</span>
+          <span className="folder-view-count">{totalCount.toLocaleString()} email{totalCount !== 1 ? 's' : ''}</span>
         )}
       </div>
 
-      {loading && <div className="fv-loading">Loading…</div>}
       {error && <div className="fv-error">{error}</div>}
 
       {!loading && !error && emails.length === 0 && (
         <div className="fv-empty">No emails in this folder.</div>
       )}
 
-      {!loading && emails.length > 0 && (
+      {emails.length > 0 && (
-        <>
         <table className="email-list">
           <tbody>
             {emails.map((e) => (
@@ -108,15 +137,14 @@ export default function FolderView() {
             ))}
           </tbody>
         </table>
-
-          {totalPages > 1 && (
-            <div className="fv-pagination">
-              <button disabled={page <= 1} onClick={() => load(page - 1)}>← Prev</button>
-              <span>Page {page} of {totalPages}</span>
-              <button disabled={page >= totalPages} onClick={() => load(page + 1)}>Next →</button>
-            </div>
       )}
-        </>
+
+      {/* Sentinel — triggers next page load when scrolled into view */}
+      <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()} emails —</div>
       )}
     </div>
   );

frontend/src/styles.css

@@ -225,9 +225,9 @@ input, select { background: var(--panel-2); border: 1px solid #2c3550; color: va
 .el-size { font-size: 11px; color: var(--muted); }
 .el-date { width: 70px; padding: 10px 0 10px 8px; text-align: right; color: var(--muted); white-space: nowrap; font-size: 12px; }
 
-.fv-pagination { display: flex; align-items: center; gap: 14px; margin-top: 16px; font-size: 13px; color: var(--muted); }
+.fv-sentinel { height: 1px; }
-.fv-pagination button { background: var(--panel); border: 1px solid #2c3550; color: var(--text); padding: 6px 12px; }
+.fv-loading-more { color: var(--muted); font-size: 13px; padding: 16px 0; text-align: center; }
-.fv-pagination button:disabled { opacity: 0.35; cursor: default; }
+.fv-end { color: var(--muted); font-size: 12px; padding: 20px 0 8px; text-align: center; }
 
 /* ── Sync splash ── */
 .splash {