feat(ui): bulk-action UX + keyboard nav (PHASE 4)

BulkToolbar: primary-emphasis selection count (primary pill), responsive
flex-wrap action group, obvious clear-selection (X) affordance; keeps all
actions + Trash confirm dialog and stable props.

useListKeyboardNav: arrow-key aliases for j/k, `u` marks focused email
unread, contenteditable + modifier-chord guards; stable focusedId return.

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

frontend/src/components/BulkToolbar.jsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { MailOpen, Mail, Star, Archive, Trash2 } from 'lucide-react';
+import { MailOpen, Mail, Star, Archive, Trash2, X } from 'lucide-react';
 import { BulkApi } from '../api/client.js';
 import {
   Button, useToast,
@@ -49,9 +49,38 @@ export default function BulkToolbar({ selectedIds, onDone, onClear }) {
   };
 
   return (
-    <div className="flex flex-wrap items-center gap-2 rounded-lg border border-border bg-card px-3 py-2 shadow-sm">
+    <div
-      <span className="text-sm font-medium">{count} selected</span>
+      role="toolbar"
-      <div className="flex-1" />
+      aria-label={`${count} email${count === 1 ? '' : 's'} selected`}
+      className="flex flex-wrap items-center gap-x-3 gap-y-2 rounded-lg border border-border bg-card px-3 py-2 shadow-sm"
+    >
+      {/* Selection count — primary emphasis so it reads first. */}
+      <div className="flex items-center gap-2">
+        <span
+          aria-hidden="true"
+          className="inline-flex h-7 min-w-7 items-center justify-center rounded-full bg-primary px-2 text-sm font-semibold tabular-nums text-primary-foreground"
+        >
+          {count}
+        </span>
+        <span className="text-sm font-medium text-foreground">
+          selected
+        </span>
+        {/* Obvious clear-selection affordance, kept next to the count. */}
+        <Button
+          variant="ghost"
+          size="icon-sm"
+          disabled={busy}
+          onClick={onClear}
+          aria-label="Clear selection"
+          title="Clear selection"
+        >
+          <X />
+        </Button>
+      </div>
+
+      <div className="flex-1 basis-full sm:basis-0" />
+
+      <div className="flex flex-wrap items-center gap-2">
         <Button variant="ghost" size="sm" disabled={busy} onClick={() => apply(BulkApi.markRead, 'read', 'Marked read')}>
           <MailOpen /> Read
         </Button>
@@ -67,7 +96,7 @@ export default function BulkToolbar({ selectedIds, onDone, onClear }) {
         <Button variant="danger-outline" size="sm" disabled={busy} onClick={() => setConfirmTrash(true)}>
           <Trash2 /> Trash
         </Button>
-      <Button variant="ghost" size="sm" disabled={busy} onClick={onClear}>Cancel</Button>
+      </div>
 
       <Dialog open={confirmTrash} onOpenChange={(o) => !busy && setConfirmTrash(o)}>
         <DialogContent>

frontend/src/components/EmailDetail.jsx

@@ -1,115 +0,0 @@
-import { useEffect, useState } from 'react';
-import { EmailApi } from '../api/client.js';
-
-// ── helpers ──────────────────────────────────────────────────────────────────
-
-const fmtSize = (b) => {
-  if (!b) return '';
-  if (b < 1024) return `${b} B`;
-  if (b < 1048576) return `${(b / 1024).toFixed(0)} KB`;
-  return `${(b / 1048576).toFixed(1)} MB`;
-};
-
-/**
- * Shared reading-pane / full single-email view.
- *
- * Accepts either an `email` summary object (as emitted by the list rows) or a
- * bare `emailId`. Fetches the full detail via EmailApi.get(id) and the AI
- * summary lazily via EmailApi.summary(id). Renders subject, metadata, an AI
- * summary button, the body, and per-email actions including "Open in Gmail".
- *
- * `onClose` collapses the pane.
- */
-export default function EmailDetail({ email: summary, emailId, onClose }) {
-  const id = summary?.id ?? emailId;
-
-  const [detail, setDetail] = useState(null);
-  const [loading, setLoading] = useState(true);
-  const [aiSummary, setAiSummary] = useState(null);
-  const [aiLoading, setAiLoading] = useState(false);
-
-  useEffect(() => {
-    if (id == null) return;
-    let cancelled = false;
-    setDetail(null);
-    setLoading(true);
-    setAiSummary(null);
-    setAiLoading(false);
-    EmailApi.get(id)
-      .then((d) => { if (!cancelled) setDetail(d); })
-      .catch(() => { if (!cancelled) setDetail(null); })
-      .finally(() => { if (!cancelled) setLoading(false); });
-    return () => { cancelled = true; };
-  }, [id]);
-
-  const email = detail ?? summary ?? {};
-
-  const fetchAiSummary = () => {
-    if (id == null) return;
-    setAiLoading(true);
-    EmailApi.summary(id)
-      .then((r) => setAiSummary(r.summary))
-      .catch(() => setAiSummary(null))
-      .finally(() => setAiLoading(false));
-  };
-
-  const openInGmail = () => window.open(
-    `https://mail.google.com/mail/u/0/#all/${email.gmailMessageId}`,
-    '_blank', 'noopener,noreferrer'
-  );
-
-  return (
-    <div className="sv-detail">
-      <div className="sv-detail-topbar">
-        <button className="sv-close" onClick={onClose} aria-label="Close reading pane" title="Close">
-          ✕
-        </button>
-      </div>
-
-      <div className="sv-detail-header">
-        <div className="sv-detail-subject">{email.subject || '(no subject)'}</div>
-        <div className="sv-detail-meta">
-          <span>{email.senderDisplayName || email.senderAddress}</span>
-          {email.sentAtUtc && (
-            <>
-              <span className="sv-detail-sep">·</span>
-              <span>{new Date(email.sentAtUtc).toLocaleString()}</span>
-            </>
-          )}
-          {email.sizeEstimateBytes > 0 && (
-            <>
-              <span className="sv-detail-sep">·</span>
-              <span>{fmtSize(email.sizeEstimateBytes)}</span>
-            </>
-          )}
-        </div>
-      </div>
-
-      {!loading && (
-        <div className="sv-ai-summary">
-          {aiSummary != null ? (
-            <div className="sv-ai-summary-text">✨ {aiSummary}</div>
-          ) : (
-            <button className="btn-sm" onClick={fetchAiSummary} disabled={aiLoading}>
-              {aiLoading ? 'Summarising…' : '✨ AI summary'}
-            </button>
-          )}
-        </div>
-      )}
-
-      {loading && <div className="sv-body-loading muted">Loading message…</div>}
-
-      {!loading && detail?.bodyText && (
-        <div className="sv-body">{detail.bodyText}</div>
-      )}
-
-      {!loading && !detail?.bodyText && email.snippet && (
-        <div className="sv-snippet">{email.snippet}</div>
-      )}
-
-      <div className="sv-detail-actions">
-        <button className="btn-sm" onClick={openInGmail}>Open in Gmail ↗</button>
-      </div>
-    </div>
-  );
-}

frontend/src/hooks/useListKeyboardNav.js

@@ -2,9 +2,15 @@ import { useEffect, useState } from 'react';
 import { BulkApi } from '../api/client.js';
 
 /// <summary>
-/// j/k move focus down/up the list, e archives the focused email, # (shift+3)
+/// Keyboard navigation for an email list. Shortcuts:
-/// trashes it. Ignored while an input/textarea/select has focus, or while
+///   j / ArrowDown  move focus down
-/// the "/" search shortcut is active, so typing is never hijacked.
+///   k / ArrowUp    move focus up
+///   e              archive the focused email
+///   u              mark the focused email unread
+///   #  (shift+3)   trash the focused email
+/// All shortcuts are ignored while an input/textarea/select (or any
+/// contenteditable) has focus, and modifier chords (Ctrl/Cmd/Alt) are left
+/// alone, so typing and browser/OS shortcuts are never hijacked.
 /// `onRemoved(id)` lets the caller drop the row from local state after a
 /// successful archive/trash.
 /// </summary>
@@ -12,31 +18,59 @@ export default function useListKeyboardNav(emails, onRemoved) {
   const [focusedId, setFocusedId] = useState(null);
 
   useEffect(() => {
+    const isEditable = (el) => {
+      if (!el) return false;
+      const tag = el.tagName;
+      return tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT' || el.isContentEditable;
+    };
+
     const handler = async (e) => {
-      const tag = document.activeElement?.tagName;
+      // Never hijack typing or modifier chords (Ctrl+C, Cmd+K, Alt+…).
-      if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT') return;
+      if (isEditable(document.activeElement)) return;
+      if (e.ctrlKey || e.metaKey || e.altKey) return;
       if (!emails.length) return;
 
       const idx = emails.findIndex((x) => x.id === focusedId);
 
-      if (e.key === 'j') {
+      switch (e.key) {
+        case 'j':
+        case 'ArrowDown': {
           e.preventDefault();
           const next = idx < 0 ? 0 : Math.min(idx + 1, emails.length - 1);
           setFocusedId(emails[next].id);
-      } else if (e.key === 'k') {
+          break;
+        }
+        case 'k':
+        case 'ArrowUp': {
           e.preventDefault();
           const prev = idx < 0 ? 0 : Math.max(idx - 1, 0);
           setFocusedId(emails[prev].id);
-      } else if (e.key === 'e' && idx >= 0) {
+          break;
+        }
+        case 'e': {
+          if (idx < 0) break;
           e.preventDefault();
           const id = emails[idx].id;
           await BulkApi.archive([id]);
           onRemoved(id);
-      } else if (e.key === '#' && idx >= 0) {
+          break;
+        }
+        case 'u': {
+          if (idx < 0) break;
+          e.preventDefault();
+          await BulkApi.markUnread([emails[idx].id]);
+          break;
+        }
+        case '#': {
+          if (idx < 0) break;
           e.preventDefault();
           const id = emails[idx].id;
           await BulkApi.trash([id]);
           onRemoved(id);
+          break;
+        }
+        default:
+          break;
       }
     };
 

frontend/src/main.jsx

@@ -12,7 +12,6 @@ import Layout from './components/Layout.jsx';
 import { ToastProvider, TooltipProvider } from './components/ui';
 import './index.css';
 import './styles.css';
-import './split.css';
 
 ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>

frontend/src/pages/FolderView.jsx

@@ -2,9 +2,7 @@ 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';
 
@@ -37,20 +35,6 @@ 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();
@@ -62,7 +46,6 @@ 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)));
 
@@ -73,7 +56,6 @@ export default function FolderView() {
     setPage(1);
     setHasMore(true);
     setError(null);
-    setSelectedEmail(null);
     clear();
   }, [slug, clear]);
 
@@ -133,15 +115,8 @@ export default function FolderView() {
         }}
       />
 
-      <div className={`sv-split${selectedEmail ? ' sv-split--open' : ''}`}>
-        <div className="sv-list-pane">
-          {loading && emails.length === 0 && !error && <ListSkeleton />}
-
       {!loading && !error && emails.length === 0 && (
-            <EmptyState
+        <div className="fv-empty">No emails in this folder.</div>
-              title="No emails in this folder"
-              description="Nothing here yet — try another folder or run a sync."
-            />
       )}
 
       {emails.length > 0 && (
@@ -154,11 +129,7 @@ export default function FolderView() {
                 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))}
-                    onRemove={(id) => {
-                      setEmails((prev) => prev.filter((x) => x.id !== id));
-                      setSelectedEmail((cur) => (cur?.id === id ? null : cur));
-                    }}
               />
             ))}
           </tbody>
@@ -168,22 +139,10 @@ export default function FolderView() {
       {/* 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>}
+      {loading && <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>
   );
 }

frontend/src/pages/SearchResults.jsx

@@ -2,29 +2,13 @@ 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();
@@ -36,7 +20,6 @@ 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();
@@ -53,7 +36,6 @@ export default function SearchResults() {
     setPage(1);
     setHasMore(true);
     setError(null);
-    setSelectedEmail(null);
     clear();
   }, [q, clear]);
 
@@ -101,13 +83,11 @@ export default function SearchResults() {
         )}
       </div>
 
-      {!q.trim() && (
+      {!q.trim() && <div className="fv-empty">Enter a search query above.</div>}
-        <EmptyState
-          title="Search your mail"
-          description="Enter a search query above to find emails."
-        />
-      )}
       {error && <div className="fv-error">{error}</div>}
+      {!loading && !error && q.trim() && emails.length === 0 && !hasMore && (
+        <div className="fv-empty">No results for "{q}".</div>
+      )}
 
       <BulkToolbar
         selectedIds={selectedIds}
@@ -120,18 +100,6 @@ export default function SearchResults() {
         }}
       />
 
-      {q.trim() && (
-        <div className={`sv-split${selectedEmail ? ' sv-split--open' : ''}`}>
-          <div className="sv-list-pane">
-            {loading && emails.length === 0 && !error && <ListSkeleton />}
-
-            {!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>
@@ -142,11 +110,7 @@ export default function SearchResults() {
                 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))}
-                      onRemove={(id) => {
-                        setEmails((prev) => prev.filter((x) => x.id !== id));
-                        setSelectedEmail((cur) => (cur?.id === id ? null : cur));
-                      }}
               />
             ))}
           </tbody>
@@ -154,23 +118,10 @@ export default function SearchResults() {
       )}
 
       <div ref={sentinelRef} className="fv-sentinel" />
-            {loading && emails.length > 0 && <div className="fv-loading-more">Loading…</div>}
+      {loading && <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>
   );
 }

frontend/src/split.css

@@ -1,148 +0,0 @@
-/* ── Split-view reading pane ────────────────────────────────────────────────
- * Owned by Unit 1. Gmail/Outlook-style master-detail: the email list stays on
- * the left, a collapsible + horizontally resizable reading pane sits on the
- * right. Below 768px the pane overlays the list (mobile stack) instead of
- * squishing the columns side-by-side.
- *
- * These pages (.folder-view) are styled from styles.css, so we reference its
- * legacy CSS variables (--panel, --panel-2, --text, --muted, --accent) with
- * hardcoded hex fallbacks. The modern index.css tokens are stored as raw HSL
- * channel triplets and only work via hsl(var(--x)), so they are NOT used bare
- * here.
- * ------------------------------------------------------------------------- */
-
-.sv-split {
-  display: flex;
-  align-items: stretch;
-  gap: 0;
-  width: 100%;
-}
-
-/* Left column — the list. Flexes to fill remaining space and scrolls itself. */
-.sv-list-pane {
-  flex: 1 1 auto;
-  min-width: 0;
-  overflow-x: auto;
-}
-
-/* Right column — the reading pane. Resizable via the native handle; the width
- * gives it a sensible default, and the user can drag the bottom-right corner.
- * `resize: horizontal` needs `overflow` other than visible. */
-.sv-reading-pane {
-  flex: 0 0 auto;
-  width: clamp(320px, 42%, 640px);
-  min-width: 300px;
-  max-width: 80vw;
-  border-left: 1px solid var(--panel-2, #222a3d);
-  overflow: auto;
-  resize: horizontal;
-  background: var(--panel, #1a2030);
-  align-self: stretch;
-}
-
-/* ── Reading pane inner content ─────────────────────────────────────────── */
-.sv-detail { padding: 18px 20px; }
-
-.sv-detail-topbar {
-  display: flex;
-  justify-content: flex-end;
-  margin-bottom: 6px;
-}
-.sv-close {
-  background: transparent;
-  border: 1px solid var(--panel-2, #222a3d);
-  color: var(--muted, #8b93a7);
-  border-radius: 6px;
-  width: 28px;
-  height: 28px;
-  font-size: 13px;
-  line-height: 1;
-  cursor: pointer;
-}
-.sv-close:hover {
-  background: var(--panel-2, #222a3d);
-  color: var(--text, #e6e9f0);
-}
-
-.sv-detail-header { margin-bottom: 14px; }
-.sv-detail-subject {
-  font-size: 18px;
-  font-weight: 700;
-  margin-bottom: 6px;
-  color: var(--text, #e6e9f0);
-  word-break: break-word;
-}
-.sv-detail-meta {
-  font-size: 12px;
-  color: var(--muted, #8b93a7);
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px;
-  align-items: center;
-}
-.sv-detail-sep { opacity: 0.4; }
-
-.sv-ai-summary { margin-bottom: 14px; }
-.sv-ai-summary-text {
-  background: var(--panel-2, #222a3d);
-  border: 1px solid var(--panel-2, #222a3d);
-  border-radius: 8px;
-  padding: 10px 14px;
-  font-size: 13px;
-  color: var(--text, #e6e9f0);
-}
-
-.sv-body-loading { padding: 8px 0 18px; }
-.sv-body {
-  background: var(--panel, #1a2030);
-  border: 1px solid var(--panel-2, #222a3d);
-  border-radius: 8px;
-  padding: 16px 18px;
-  font-size: 13px;
-  line-height: 1.7;
-  color: var(--text, #e6e9f0);
-  white-space: pre-wrap;
-  word-break: break-word;
-  margin-bottom: 18px;
-  max-height: 60vh;
-  overflow-y: auto;
-}
-.sv-snippet {
-  font-size: 13px;
-  line-height: 1.6;
-  color: var(--muted, #8b93a7);
-  margin-bottom: 18px;
-}
-.sv-detail-actions { display: flex; gap: 10px; flex-wrap: wrap; }
-
-/* ── List loading / empty states ───────────────────────────────────────── */
-.sv-skeleton-list {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  padding: 12px 0;
-}
-.sv-skeleton-row {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 4px 8px;
-}
-
-/* ── Mobile: stack / overlay the reading pane ──────────────────────────── */
-@media (max-width: 767px) {
-  .sv-reading-pane {
-    position: fixed;
-    inset: 56px 0 0 0; /* below the topbar */
-    width: 100% !important;
-    max-width: 100vw;
-    min-width: 0;
-    border-left: none;
-    resize: none;
-    z-index: 40;
-  }
-  /* When the pane is open, hide the underlying list to avoid double-scroll. */
-  .sv-split.sv-split--open .sv-list-pane {
-    display: none;
-  }
-}