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,25 +49,54 @@ 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`}
-      <Button variant="ghost" size="sm" disabled={busy} onClick={() => apply(BulkApi.markRead, 'read', 'Marked read')}>
+      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"
-        <MailOpen /> Read
+    >
-      </Button>
+      {/* Selection count — primary emphasis so it reads first. */}
-      <Button variant="ghost" size="sm" disabled={busy} onClick={() => apply(BulkApi.markUnread, 'unread', 'Marked unread')}>
+      <div className="flex items-center gap-2">
-        <Mail /> Unread
+        <span
-      </Button>
+          aria-hidden="true"
-      <Button variant="ghost" size="sm" disabled={busy} onClick={() => apply(BulkApi.star, 'star', 'Starred')}>
+          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"
-        <Star /> Star
+        >
-      </Button>
+          {count}
-      <Button variant="ghost" size="sm" disabled={busy} onClick={() => apply(BulkApi.archive, 'archive', 'Archived')}>
+        </span>
-        <Archive /> Archive
+        <span className="text-sm font-medium text-foreground">
-      </Button>
+          selected
-      <Button variant="danger-outline" size="sm" disabled={busy} onClick={() => setConfirmTrash(true)}>
+        </span>
-        <Trash2 /> Trash
+        {/* Obvious clear-selection affordance, kept next to the count. */}
-      </Button>
+        <Button
-      <Button variant="ghost" size="sm" disabled={busy} onClick={onClear}>Cancel</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>
+        <Button variant="ghost" size="sm" disabled={busy} onClick={() => apply(BulkApi.markUnread, 'unread', 'Marked unread')}>
+          <Mail /> Unread
+        </Button>
+        <Button variant="ghost" size="sm" disabled={busy} onClick={() => apply(BulkApi.star, 'star', 'Starred')}>
+          <Star /> Star
+        </Button>
+        <Button variant="ghost" size="sm" disabled={busy} onClick={() => apply(BulkApi.archive, 'archive', 'Archived')}>
+          <Archive /> Archive
+        </Button>
+        <Button variant="danger-outline" size="sm" disabled={busy} onClick={() => setConfirmTrash(true)}>
+          <Trash2 /> Trash
+        </Button>
+      </div>
 
       <Dialog open={confirmTrash} onOpenChange={(o) => !busy && setConfirmTrash(o)}>
         <DialogContent>

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) {
-        e.preventDefault();
+        case 'j':
-        const next = idx < 0 ? 0 : Math.min(idx + 1, emails.length - 1);
+        case 'ArrowDown': {
-        setFocusedId(emails[next].id);
+          e.preventDefault();
-      } else if (e.key === 'k') {
+          const next = idx < 0 ? 0 : Math.min(idx + 1, emails.length - 1);
-        e.preventDefault();
+          setFocusedId(emails[next].id);
-        const prev = idx < 0 ? 0 : Math.max(idx - 1, 0);
+          break;
-        setFocusedId(emails[prev].id);
+        }
-      } else if (e.key === 'e' && idx >= 0) {
+        case 'k':
-        e.preventDefault();
+        case 'ArrowUp': {
-        const id = emails[idx].id;
+          e.preventDefault();
-        await BulkApi.archive([id]);
+          const prev = idx < 0 ? 0 : Math.max(idx - 1, 0);
-        onRemoved(id);
+          setFocusedId(emails[prev].id);
-      } else if (e.key === '#' && idx >= 0) {
+          break;
-        e.preventDefault();
+        }
-        const id = emails[idx].id;
+        case 'e': {
-        await BulkApi.trash([id]);
+          if (idx < 0) break;
-        onRemoved(id);
+          e.preventDefault();
+          const id = emails[idx].id;
+          await BulkApi.archive([id]);
+          onRemoved(id);
+          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;
       }
     };