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

frontend/src/pages/FolderView.jsx

@@ -2,7 +2,9 @@ import { useEffect, useState, useCallback, useRef } from 'react';
 import { useParams } 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';
 
@@ -35,6 +37,20 @@ const FOLDER_META = {
 
 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 FolderView() {
   const { slug } = useParams();
@@ -46,6 +62,7 @@ export default function FolderView() {
   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)));
 
@@ -56,6 +73,7 @@ export default function FolderView() {
     setPage(1);
     setHasMore(true);
     setError(null);
+    setSelectedEmail(null);
     clear();
   }, [slug, clear]);
 
@@ -115,34 +133,57 @@ export default function FolderView() {
         }}
       />
 
-      {!loading && !error && emails.length === 0 && (
-        <div className="fv-empty">No emails in this folder.</div>
-      )}
+      <div className={`sv-split${selectedEmail ? ' sv-split--open' : ''}`}>
+        <div className="sv-list-pane">
+          {loading && emails.length === 0 && !error && <ListSkeleton />}
 
-      {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>
-      )}
+          {!loading && !error && emails.length === 0 && (
+            <EmptyState
+              title="No emails in this folder"
+              description="Nothing here yet — try another folder or run a sync."
+            />
+          )}
 
-      {/* Sentinel — triggers next page load when scrolled into view */}
-      <div ref={sentinelRef} className="fv-sentinel" />
+          {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>
+          )}
 
-      {loading && <div className="fv-loading-more">Loading…</div>}
-      {!hasMore && emails.length > 0 && (
-        <div className="fv-end">— {emails.length.toLocaleString()} emails —</div>
-      )}
+          {/* Sentinel — triggers next page load when scrolled into view */}
+          <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()} emails —</div>
+          )}
+        </div>
+
+        {selectedEmail && (
+          <aside className="sv-reading-pane">
+            <EmailDetail
+              key={selectedEmail.id}
+              email={selectedEmail}
+              onClose={() => setSelectedEmail(null)}
+            />
+          </aside>
+        )}
+      </div>
     </div>
   );
 }