cesnimda/Inboxintel
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

feat(ui): bulk-action UX + keyboard nav (PHASE 4)
CI / backend (pull_request) Successful in 1m14s
Details
CI / frontend (pull_request) Successful in 11s
Details

Browse Source 
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>
This commit is contained in:
cesnimda
2026-07-04 16:49:39 +02:00
parent 8c2e52ad60
commit 5bcce1dea0
2 changed files with 106 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/hooks/useListKeyboardNav.js
+57 -23
View File
@@ -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)
/// trashes it. Ignored while an input/textarea/select has focus, or while
/// the "/" search shortcut is active, so typing is never hijacked.
/// Keyboard navigation for an email list. Shortcuts:
/// j / ArrowDown move focus down
/// 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;
if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT') return;
// Never hijack typing or modifier chords (Ctrl+C, Cmd+K, Alt+…).
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') {
e.preventDefault();
const next = idx < 0 ? 0 : Math.min(idx + 1, emails.length - 1);
setFocusedId(emails[next].id);
} else if (e.key === 'k') {
e.preventDefault();
const prev = idx < 0 ? 0 : Math.max(idx - 1, 0);
setFocusedId(emails[prev].id);
} else if (e.key === 'e' && idx >= 0) {
e.preventDefault();
const id = emails[idx].id;
await BulkApi.archive([id]);
onRemoved(id);
} else if (e.key === '#' && idx >= 0) {
e.preventDefault();
const id = emails[idx].id;
await BulkApi.trash([id]);
onRemoved(id);
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);
break;
}
case 'k':
case 'ArrowUp': {
e.preventDefault();
const prev = idx < 0 ? 0 : Math.max(idx - 1, 0);
setFocusedId(emails[prev].id);
break;
}
case 'e': {
if (idx < 0) break;
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;
}
};