feat(ui): email row polish + custom checkbox

- Add onOpen prop to EmailRow (calls parent handler when provided,
  falls back to opening in Gmail); keep explicit Open-in-Gmail action.
- New accessible Checkbox primitive (Radix + design tokens, focus ring),
  exported from ui barrel; replaces bare input in the select cell.
- Row polish: consistent height, vertical rhythm, single hover state,
  clearer hierarchy (prominent subject, muted sender/snippet), one-line
  ellipsis snippet.

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, X } from 'lucide-react';
+import { MailOpen, Mail, Star, Archive, Trash2 } from 'lucide-react';
 import { BulkApi } from '../api/client.js';
 import {
   Button, useToast,
@@ -49,54 +49,25 @@ export default function BulkToolbar({ selectedIds, onDone, onClear }) {
   };
 
   return (
-    <div
+    <div className="flex flex-wrap items-center gap-2 rounded-lg border border-border bg-card px-3 py-2 shadow-sm">
-      role="toolbar"
+      <span className="text-sm font-medium">{count} selected</span>
-      aria-label={`${count} email${count === 1 ? '' : 's'} selected`}
+      <div className="flex-1" />
-      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"
+      <Button variant="ghost" size="sm" disabled={busy} onClick={() => apply(BulkApi.markRead, 'read', 'Marked read')}>
-    >
+        <MailOpen /> Read
-      {/* Selection count — primary emphasis so it reads first. */}
+      </Button>
-      <div className="flex items-center gap-2">
+      <Button variant="ghost" size="sm" disabled={busy} onClick={() => apply(BulkApi.markUnread, 'unread', 'Marked unread')}>
-        <span
+        <Mail /> Unread
-          aria-hidden="true"
+      </Button>
-          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"
+      <Button variant="ghost" size="sm" disabled={busy} onClick={() => apply(BulkApi.star, 'star', 'Starred')}>
-        >
+        <Star /> Star
-          {count}
+      </Button>
-        </span>
+      <Button variant="ghost" size="sm" disabled={busy} onClick={() => apply(BulkApi.archive, 'archive', 'Archived')}>
-        <span className="text-sm font-medium text-foreground">
+        <Archive /> Archive
-          selected
+      </Button>
-        </span>
+      <Button variant="danger-outline" size="sm" disabled={busy} onClick={() => setConfirmTrash(true)}>
-        {/* Obvious clear-selection affordance, kept next to the count. */}
+        <Trash2 /> Trash
-        <Button
+      </Button>
-          variant="ghost"
+      <Button variant="ghost" size="sm" disabled={busy} onClick={onClear}>Cancel</Button>
-          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/components/EmailRow.jsx

@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import { EmailApi } from '../api/client.js';
+import { Checkbox } from './ui/checkbox.jsx';
 
 const fmtDate = (iso) => {
   const d = new Date(iso);
@@ -16,7 +17,7 @@ const fmtSize = (b) => {
   return `${(b / 1048576).toFixed(1)} MB`;
 };
 
-export default function EmailRow({ email: initial, onRemove, selected, onToggleSelect, focused }) {
+export default function EmailRow({ email: initial, onRemove, selected, onToggleSelect, focused, onOpen }) {
   const [email, setEmail] = useState(initial);
   const [acting, setActing] = useState(false);
 
@@ -69,12 +70,16 @@ export default function EmailRow({ email: initial, onRemove, selected, onToggleS
   return (
     <tr
       className={`email-row${email.isUnread ? ' email-row--unread' : ''}${acting ? ' email-row--acting' : ''}${focused ? ' email-row--focused' : ''}`}
-      onClick={openInGmail}
+      onClick={() => onOpen ? onOpen(email) : openInGmail()}
-      title="Open in Gmail"
+      title={onOpen ? 'Open' : 'Open in Gmail'}
     >
       {onToggleSelect && (
         <td className="el-select" onClick={(e) => e.stopPropagation()}>
-          <input type="checkbox" checked={!!selected} onChange={() => onToggleSelect(email.id)} />
+          <Checkbox
+            checked={!!selected}
+            onCheckedChange={() => onToggleSelect(email.id)}
+            aria-label={selected ? 'Deselect email' : 'Select email'}
+          />
         </td>
       )}
       <td className="el-unread">{email.isUnread && <span className="unread-dot" />}</td>
@@ -83,7 +88,7 @@ export default function EmailRow({ email: initial, onRemove, selected, onToggleS
       </td>
       <td className="el-subject">
         <span className="el-subj-text">{email.subject || '(no subject)'}</span>
-        {email.snippet && <span className="el-snippet"> — {email.snippet}</span>}
+        {email.snippet && <span className="el-snippet">{email.snippet}</span>}
       </td>
       <td className="el-meta">
         {email.hasAttachments && <span className="el-attach" title="Has attachment">📎</span>}
@@ -113,6 +118,11 @@ export default function EmailRow({ email: initial, onRemove, selected, onToggleS
             disabled={email._unsubDone}
           >{email._unsubDone ? '✓' : '✉✕'}</button>
         )}
+        <button
+          className="action-btn"
+          title="Open in Gmail"
+          onClick={(e) => { e.stopPropagation(); openInGmail(); }}
+        >↗</button>
         <button
           className="action-btn action-btn--danger"
           title="Move to trash"

frontend/src/components/ui/checkbox.jsx

@@ -0,0 +1,43 @@
+import { forwardRef } from 'react';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import { Check } from 'lucide-react';
+import { cn } from '../../lib/utils.js';
+
+/**
+ * Accessible, design-token styled checkbox.
+ * Wraps Radix Checkbox so it is keyboard-accessible with a visible focus ring.
+ * Accepts `checked`, `onCheckedChange` (Radix) and, for convenience, `onChange`
+ * (called with a synthetic-ish `{ target: { checked } }`) so it can drop into
+ * places that previously used a bare <input type="checkbox">.
+ */
+const Checkbox = forwardRef(function Checkbox(
+  { className, onCheckedChange, onChange, ...props },
+  ref
+) {
+  const handleCheckedChange = (checked) => {
+    onCheckedChange?.(checked);
+    onChange?.({ target: { checked } });
+  };
+
+  return (
+    <CheckboxPrimitive.Root
+      ref={ref}
+      onCheckedChange={handleCheckedChange}
+      className={cn(
+        'peer inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-[4px] border border-border bg-card transition-colors',
+        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background',
+        'hover:border-primary/60',
+        'disabled:cursor-not-allowed disabled:opacity-50',
+        'data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
+        className
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator className="flex items-center justify-center text-current">
+        <Check className="h-3 w-3" strokeWidth={3} />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  );
+});
+
+export { Checkbox };

frontend/src/components/ui/index.js

@@ -2,6 +2,7 @@
 export { Button, buttonVariants } from './button.jsx';
 export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from './card.jsx';
 export { Badge, badgeVariants } from './badge.jsx';
+export { Checkbox } from './checkbox.jsx';
 export { Input, Textarea } from './input.jsx';
 export { Switch } from './switch.jsx';
 export { Separator } from './separator.jsx';

frontend/src/hooks/useListKeyboardNav.js

@@ -2,15 +2,9 @@ import { useEffect, useState } from 'react';
 import { BulkApi } from '../api/client.js';
 
 /// <summary>
-/// Keyboard navigation for an email list. Shortcuts:
+/// j/k move focus down/up the list, e archives the focused email, # (shift+3)
-///   j / ArrowDown  move focus down
+/// trashes it. Ignored while an input/textarea/select has focus, or while
-///   k / ArrowUp    move focus up
+/// the "/" search shortcut is active, so typing is never hijacked.
-///   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>
@@ -18,59 +12,31 @@ 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) => {
-      // Never hijack typing or modifier chords (Ctrl+C, Cmd+K, Alt+…).
+      const tag = document.activeElement?.tagName;
-      if (isEditable(document.activeElement)) return;
+      if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT') return;
-      if (e.ctrlKey || e.metaKey || e.altKey) return;
       if (!emails.length) return;
 
       const idx = emails.findIndex((x) => x.id === focusedId);
 
-      switch (e.key) {
+      if (e.key === 'j') {
-        case 'j':
+        e.preventDefault();
-        case 'ArrowDown': {
+        const next = idx < 0 ? 0 : Math.min(idx + 1, emails.length - 1);
-          e.preventDefault();
+        setFocusedId(emails[next].id);
-          const next = idx < 0 ? 0 : Math.min(idx + 1, emails.length - 1);
+      } else if (e.key === 'k') {
-          setFocusedId(emails[next].id);
+        e.preventDefault();
-          break;
+        const prev = idx < 0 ? 0 : Math.max(idx - 1, 0);
-        }
+        setFocusedId(emails[prev].id);
-        case 'k':
+      } else if (e.key === 'e' && idx >= 0) {
-        case 'ArrowUp': {
+        e.preventDefault();
-          e.preventDefault();
+        const id = emails[idx].id;
-          const prev = idx < 0 ? 0 : Math.max(idx - 1, 0);
+        await BulkApi.archive([id]);
-          setFocusedId(emails[prev].id);
+        onRemoved(id);
-          break;
+      } else if (e.key === '#' && idx >= 0) {
-        }
+        e.preventDefault();
-        case 'e': {
+        const id = emails[idx].id;
-          if (idx < 0) break;
+        await BulkApi.trash([id]);
-          e.preventDefault();
+        onRemoved(id);
-          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;
       }
     };
 

frontend/src/styles.css

@@ -294,32 +294,57 @@ input, select { background: var(--panel-2); border: 1px solid #2c3550; color: va
 .fv-error { color: var(--danger); font-size: 14px; padding: 12px 0; }
 
 .email-list { width: 100%; border-collapse: collapse; font-size: 13px; }
-.email-row { border-bottom: 1px solid #2c3550; cursor: pointer; }
+.email-row {
+  height: 44px;
+  border-bottom: 1px solid #2c3550;
+  cursor: pointer;
+  transition: background 0.1s ease;
+}
+.email-row > td { padding-top: 0; padding-bottom: 0; vertical-align: middle; }
+/* Single, consistent hover state for the whole row. */
 .email-row:hover { background: var(--panel); }
-.email-row--unread .el-sender,
+/* Unread: prominent subject, keep sender readable but not shouty. */
 .email-row--unread .el-subj-text { font-weight: 700; color: var(--text); }
+.email-row--unread .el-sender { font-weight: 600; color: var(--text); }
 
-.el-unread { width: 14px; padding: 10px 4px 10px 0; }
+.el-select { width: 34px; padding: 0 4px 0 10px; text-align: center; }
+.el-select > * { vertical-align: middle; }
+
+.el-unread { width: 14px; padding: 0 4px 0 0; text-align: center; }
 .unread-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
-.el-sender { width: 180px; padding: 10px 12px 10px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
+
-.el-subject { padding: 10px 8px; overflow: hidden; }
+/* Sender: secondary in the hierarchy — muted by default. */
+.el-sender {
+  width: 180px; padding: 0 12px 0 4px;
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+  color: var(--muted); font-size: 12.5px;
+}
+
+/* Subject + snippet share one line: subject prominent, snippet muted. */
+.el-subject { padding: 0 8px; overflow: hidden; max-width: 0; white-space: nowrap; text-overflow: ellipsis; }
 .el-subj-text { color: var(--text); }
-.el-snippet { color: var(--muted); }
+.el-snippet {
-.el-meta { width: 80px; padding: 10px 8px; text-align: right; white-space: nowrap; }
+  color: var(--muted); font-size: 12.5px;
+}
+.el-snippet::before { content: '—'; margin: 0 6px; opacity: 0.55; }
+
+.el-meta { width: 80px; padding: 0 8px; text-align: right; white-space: nowrap; }
 .el-attach { margin-right: 4px; font-size: 12px; }
 .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; }
+.el-date { width: 70px; padding: 0 0 0 8px; text-align: right; color: var(--muted); white-space: nowrap; font-size: 12px; }
 
-.el-actions { width: 80px; padding: 0 6px; text-align: right; white-space: nowrap; }
+.el-actions { width: 96px; padding: 0 6px; text-align: right; white-space: nowrap; }
 .action-btn {
-  background: none; border: none; padding: 3px 4px; cursor: pointer;
+  background: none; border: none; padding: 4px 5px; cursor: pointer;
-  font-size: 13px; opacity: 0; transition: opacity 0.1s, color 0.1s;
+  font-size: 13px; line-height: 1; opacity: 0;
+  transition: opacity 0.1s ease, color 0.1s ease, background 0.1s ease;
   border-radius: 4px; color: var(--muted);
 }
-.action-btn:hover { background: var(--panel-2); opacity: 1 !important; }
+.action-btn:hover { background: var(--panel-2); color: var(--text); opacity: 1 !important; }
 .action-btn--active { opacity: 1 !important; }
 .action-btn--danger:hover { color: var(--danger); }
-.email-row:hover .action-btn { opacity: 0.6; }
+.email-row:hover .action-btn { opacity: 0.65; }
+.action-btn:focus-visible { opacity: 1 !important; outline: 2px solid var(--accent); outline-offset: 1px; }
 .email-row--acting { opacity: 0.6; pointer-events: none; }
 .action-btn--unsub { font-size: 11px; }
 .action-btn--done { opacity: 1 !important; color: var(--ok); }
@@ -403,7 +428,6 @@ input, select { background: var(--panel-2); border: 1px solid #2c3550; color: va
 }
 .bulk-btn:hover { border-color: var(--accent); }
 .bulk-btn--danger:hover { border-color: var(--danger); color: var(--danger); }
-.el-select { width: 28px; text-align: center; }
 
 /* ── Keyboard shortcut help ──────────────────────────────────────────────── */
 .kbd-hint { position: fixed; bottom: 14px; right: 14px; font-size: 11px; color: var(--muted); background: var(--panel); border: 1px solid #2c3550; border-radius: 6px; padding: 4px 10px; opacity: 0.7; }