From c7ead8caaeb318a2224434795148465d54d473c6 Mon Sep 17 00:00:00 2001
From: cesnimda <connor.babbington@cesnimda.co.uk>
Date: Tue, 30 Jun 2026 21:58:40 +0200
Subject: [PATCH] feat: keyboard shortcuts on Senders email list

Wires the shared useListKeyboardNav hook into SenderEmails so j/k/e/#
work there too, matching FolderView and SearchResults.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/pages/Senders.jsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/frontend/src/pages/Senders.jsx b/frontend/src/pages/Senders.jsx
index e432dc3..98101f1 100644
--- a/frontend/src/pages/Senders.jsx
+++ b/frontend/src/pages/Senders.jsx
@@ -2,6 +2,7 @@ import { useEffect, useCallback, useRef, useState } from 'react';
 import { AnalyticsApi, SearchApi, EmailApi } from '../api/client.js';
 import BulkToolbar from '../components/BulkToolbar.jsx';
 import useSelection from '../hooks/useSelection.js';
+import useListKeyboardNav from '../hooks/useListKeyboardNav.js';
 
 // ── helpers ──────────────────────────────────────────────────────────────────
 
@@ -125,7 +126,7 @@ function EmailDetail({ email: summary, onBack }) {
 
 // ── EmailListRow (row inside sender email list) ───────────────────────────────
 
-function EmailListRow({ email: initial, onRemove, onOpen, selected, onToggleSelect }) {
+function EmailListRow({ email: initial, onRemove, onOpen, selected, onToggleSelect, focused }) {
   const [email, setEmail] = useState(initial);
   const [acting, setActing] = useState(false);
 
@@ -147,7 +148,7 @@ function EmailListRow({ email: initial, onRemove, onOpen, selected, onToggleSele
 
   return (
     <tr
-      className={`email-row${email.isUnread ? ' email-row--unread' : ''}${acting ? ' email-row--acting' : ''}`}
+      className={`email-row${email.isUnread ? ' email-row--unread' : ''}${acting ? ' email-row--acting' : ''}${focused ? ' email-row--focused' : ''}`}
       onClick={() => onOpen(email)}
       title="View email"
       style={{ cursor: 'pointer' }}
@@ -201,6 +202,7 @@ function SenderEmails({ sender }) {
   const [openEmail, setOpenEmail] = useState(null);
   const sentinelRef = useRef(null);
   const { selected, toggle, clear, removeIds, selectedIds } = useSelection();
+  const focusedId = useListKeyboardNav(emails, (id) => setEmails((prev) => prev.filter((x) => x.id !== id)));
 
   // Reset when sender changes
   useEffect(() => {
@@ -272,6 +274,7 @@ function SenderEmails({ sender }) {
                 email={e}
                 selected={selected.has(e.id)}
                 onToggleSelect={toggle}
+                focused={focusedId === e.id}
                 onOpen={setOpenEmail}
                 onRemove={(id) => setEmails((prev) => prev.filter((x) => x.id !== id))}
               />