feat(ui): email dashboard UX refactor (PHASES 1/3/4) (#44)

frontend/src/pages/SearchResults.jsx

@@ -2,13 +2,29 @@ import { useEffect, useState, useCallback, useRef } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import { SearchApi } from '../api/client.js';
 import EmailRow from '../components/EmailRow.jsx';
+import EmailDetail from '../components/EmailDetail.jsx';
 import BulkToolbar from '../components/BulkToolbar.jsx';
+import { Skeleton, EmptyState } from '../components/ui';
 import useSelection from '../hooks/useSelection.js';
 import useListKeyboardNav from '../hooks/useListKeyboardNav.js';
 import useSavedSearches from '../hooks/useSavedSearches.js';
 
 const PAGE_SIZE = 50;
 
+function ListSkeleton({ rows = 6 }) {
+  return (
+    <div className="sv-skeleton-list" aria-hidden="true">
+      {Array.from({ length: rows }).map((_, i) => (
+        <div className="sv-skeleton-row" key={i}>
+          <Skeleton className="h-3 w-3 rounded-full" />
+          <Skeleton className="h-3 flex-1" />
+          <Skeleton className="h-3 w-16" />
+        </div>
+      ))}
+    </div>
+  );
+}
+
 
 export default function SearchResults() {
   const [searchParams] = useSearchParams();
@@ -20,6 +36,7 @@ export default function SearchResults() {
   const [hasMore, setHasMore] = useState(true);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState(null);
+  const [selectedEmail, setSelectedEmail] = useState(null);
   const { selected, toggle, clear, removeIds, selectedIds } = useSelection();
   const focusedId = useListKeyboardNav(emails, (id) => setEmails((prev) => prev.filter((x) => x.id !== id)));
   const { searches: savedSearches, add: addSavedSearch } = useSavedSearches();
@@ -36,6 +53,7 @@ export default function SearchResults() {
     setPage(1);
     setHasMore(true);
     setError(null);
+    setSelectedEmail(null);
     clear();
   }, [q, clear]);
 
@@ -83,11 +101,13 @@ export default function SearchResults() {
         )}
       </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>
+      {!q.trim() && (
+        <EmptyState
+          title="Search your mail"
+          description="Enter a search query above to find emails."
+        />
       )}
+      {error && <div className="fv-error">{error}</div>}
 
       <BulkToolbar
         selectedIds={selectedIds}
@@ -100,27 +120,56 @@ export default function SearchResults() {
         }}
       />
 
-      {emails.length > 0 && (
-        <table className="email-list">
-          <tbody>
-            {emails.map((e) => (
-              <EmailRow
-                key={e.id}
-                email={e}
-                selected={selected.has(e.id)}
-                onToggleSelect={toggle}
-                focused={focusedId === e.id}
-                onRemove={(id) => setEmails((prev) => prev.filter((x) => x.id !== id))}
-              />
-            ))}
-          </tbody>
-        </table>
-      )}
+      {q.trim() && (
+        <div className={`sv-split${selectedEmail ? ' sv-split--open' : ''}`}>
+          <div className="sv-list-pane">
+            {loading && emails.length === 0 && !error && <ListSkeleton />}
 
-      <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>
+            {!loading && !error && emails.length === 0 && !hasMore && (
+              <EmptyState
+                title={`No results for "${q}"`}
+                description="Try a different search term or filter."
+              />
+            )}
+
+            {emails.length > 0 && (
+              <table className="email-list">
+                <tbody>
+                  {emails.map((e) => (
+                    <EmailRow
+                      key={e.id}
+                      email={e}
+                      selected={selected.has(e.id)}
+                      onToggleSelect={toggle}
+                      focused={focusedId === e.id}
+                      onOpen={(email) => setSelectedEmail(email)}
+                      onRemove={(id) => {
+                        setEmails((prev) => prev.filter((x) => x.id !== id));
+                        setSelectedEmail((cur) => (cur?.id === id ? null : cur));
+                      }}
+                    />
+                  ))}
+                </tbody>
+              </table>
+            )}
+
+            <div ref={sentinelRef} className="fv-sentinel" />
+            {loading && emails.length > 0 && <div className="fv-loading-more">Loading…</div>}
+            {!hasMore && emails.length > 0 && (
+              <div className="fv-end">— {emails.length.toLocaleString()} results —</div>
+            )}
+          </div>
+
+          {selectedEmail && (
+            <aside className="sv-reading-pane">
+              <EmailDetail
+                key={selectedEmail.id}
+                email={selectedEmail}
+                onClose={() => setSelectedEmail(null)}
+              />
+            </aside>
+          )}
+        </div>
       )}
     </div>
   );