feat: add Gmail-style keyboard navigation to spec and plan

Task 14: keyboard.js with focus cursor, multi-select, and action
keys (j/k navigate, x/Space select, # delete, e archive, Shift+i/u
read/unread, v move). New keyboardMultiSelect setting and CSS.
This commit is contained in:
Joel Brock
2026-04-23 08:46:24 -07:00
parent afe51a3e6a
commit 984bfd6cb9
2 changed files with 651 additions and 1 deletions

View File

@@ -175,6 +175,40 @@ Changing the density preset sets all individual density toggles to the preset's
| Auto-resize compose window | Boolean | On |
| Throttle desktop notifications | Boolean | Off |
### Keyboard Navigation
Gmail-style keyboard navigation and multi-select for the message list. OWA lacks the ability to select multiple messages and act on them purely from the keyboard — this is the single biggest functionality gap vs Gmail.
| Toggle | Type | Default |
|--------|------|---------|
| Keyboard multi-select mode | Boolean | On |
**Key bindings (active when message list is focused, not during compose):**
| Key | Action |
|-----|--------|
| `j` / `Down Arrow` | Move focus to next message |
| `k` / `Up Arrow` | Move focus to previous message |
| `x` or `Space` | Toggle select on focused message (multi-select) |
| `Shift+j` / `Shift+Down` | Select and move to next (extend selection) |
| `Shift+k` / `Shift+Up` | Select and move to previous (extend selection) |
| `#` | Delete selected message(s) |
| `e` | Archive selected message(s) |
| `Shift+i` | Mark selected as read |
| `Shift+u` | Mark selected as unread |
| `v` | Move selected (open OWA's move-to-folder dialog) |
| `Escape` | Deselect all |
| `Enter` / `o` | Open focused message in reading pane |
**Implementation approach:**
- The extension manages its own "focus cursor" on the message list, visually distinguished from OWA's native selection (e.g., a left-border highlight or subtle background tint)
- A Set tracks "checked" (multi-selected) message elements, visually marked with a checkbox indicator or distinct background
- Action keys (`#`, `e`, `Shift+i`, etc.) iterate over checked messages and dispatch OWA's native actions for each (via toolbar button clicks, context menu triggers, or keyboard shortcut forwarding)
- If no messages are checked, actions apply to the currently focused message (single-select behavior, matching Gmail)
- All keyboard handling is suppressed when a compose window, search bar, or dialog has focus — detected via `activeElement` checks
- A new file `content/keyboard.js` encapsulates all keyboard navigation logic, separate from `behavior.js`
### Quick Actions (injected UI)
| Toggle | Type | Default |
@@ -202,6 +236,7 @@ outlook-relook/
│ ├── observer.js # MutationObserver logic, element suppression
│ ├── selectors.js # Selector registry (logical name -> strategies)
│ ├── behavior.js # JS behavior tweaks
│ ├── keyboard.js # Gmail-style keyboard navigation & multi-select
│ └── injector.js # DOM injection (mark-all-read, folder jump)
├── themes/
│ ├── base.css # Shared density/spacing/hiding overrides