made required changes

Author: Saksham1387

apps/web/components/email-list/EmailList.tsx

@@ -32,6 +32,7 @@ import {
   deleteEmails,
   markReadThreads,
 } from "@/store/archive-queue";
+import { useTableKeyboardNavigation } from "@/hooks/useTableKeyboardNavigation";
 
 export function List({
   emails,
@@ -364,52 +365,70 @@ export function EmailList({
     );
   }, [selectedRows, refetch]);
 
-  const [focusedIndex, setFocusedIndex] = useState(0);
-
-  useEffect(() => {
-    function handleKeyDown(e: KeyboardEvent) {
-      if (
-        document.activeElement?.tagName === "INPUT" ||
-        document.activeElement?.tagName === "TEXTAREA"
-      )
-        return;
-
-      const isCmdOrCtrl = e.metaKey || e.ctrlKey;
-
-      if (e.key === "ArrowDown") {
-        setFocusedIndex((prev) => Math.min(prev + 1, threads.length - 1));
-      }
-
-      if (e.key === "ArrowUp") {
-        setFocusedIndex((prev) => Math.max(prev - 1, 0));
-      }
-
-      if (e.key === "r" || e.key === "R") {
-        if (isCmdOrCtrl) {
-          e.preventDefault();
-        }
-        const thread = threads[focusedIndex];
-        if (thread) {
-          setOpenThreadId(thread.id);
-          markReadThreads([thread.id], () => refetch());
-          scrollToId(thread.id);
-        }
-      }
-
-      if (e.key === "e" || e.key === "E") {
-        if (isCmdOrCtrl) {
-          e.preventDefault();
-        }
-        const thread = threads[focusedIndex];
-        if (thread) {
-          onArchive(thread);
-        }
+  // useEffect(() => {
+  //   function handleKeyDown(e: KeyboardEvent) {
+  //     if (
+  //       document.activeElement?.tagName === "INPUT" ||
+  //       document.activeElement?.tagName === "TEXTAREA"
+  //     )
+  //       return;
+
+  //     const isCmdOrCtrl = e.metaKey || e.ctrlKey;
+
+  //     if (e.key === "ArrowDown") {
+  //       setFocusedIndex((prev) => Math.min(prev + 1, threads.length - 1));
+  //     }
+
+  //     if (e.key === "ArrowUp") {
+  //       setFocusedIndex((prev) => Math.max(prev - 1, 0));
+  //     }
+
+  //     if (e.key === "r" || e.key === "R") {
+  //       if (isCmdOrCtrl) {
+  //         e.preventDefault();
+  //       }
+  //       const thread = threads[focusedIndex];
+  //       if (thread) {
+  // setOpenThreadId(thread.id);
+  // markReadThreads([thread.id], () => refetch());
+  // scrollToId(thread.id);
+  //       }
+  //     }
+
+  //     if (e.key === "e" || e.key === "E") {
+  //       if (isCmdOrCtrl) {
+  //         e.preventDefault();
+  //       }
+  //       const thread = threads[focusedIndex];
+  //       if (thread) {
+  //         onArchive(thread);
+  //       }
+  //     }
+  //   }
+
+  //   window.addEventListener("keydown", handleKeyDown);
+  //   return () => window.removeEventListener("keydown", handleKeyDown);
+  // }, [threads, focusedIndex, setOpenThreadId, onArchive, refetch]);
+
+  // const [focusedIndex, setFocusedIndex] = useState(0);
+
+  const handleAction = useCallback(
+    async (index: number, action: "reply" | "archive") => {
+      const thread = threads[index];
+      if (!thread) return;
+
+      if (action === "reply") {
+        setOpenThreadId(thread.id);
+        markReadThreads([thread.id], () => refetch());
+        scrollToId(thread.id);
+      } else if (action === "archive") {
+        onArchive(thread);
       }
-    }
+    },
+    [threads, setOpenThreadId],
+  );
 
-    window.addEventListener("keydown", handleKeyDown);
-    return () => window.removeEventListener("keydown", handleKeyDown);
-  }, [threads, focusedIndex, setOpenThreadId, onArchive, refetch]);
+  const { selectedIndex } = useEmailListKeyboardNav(threads, handleAction);
 
   const onPlanAiBulk = useCallback(async () => {
     toast.promise(
@@ -502,7 +521,6 @@ export function EmailList({
 
                 return (
                   <EmailListItem
-                    focused={focusedIndex === index}
                     key={thread.id}
                     ref={(node) => {
                       const map = getMap();
@@ -516,7 +534,7 @@ export function EmailList({
                     thread={thread}
                     opened={openThreadId === thread.id}
                     closePanel={closePanel}
-                    selected={selectedRows[thread.id]}
+                    selected={selectedIndex === index}
                     onSelected={onSetSelectedRow}
                     splitView={!!openThreadId}
                     onClick={onOpen}
@@ -574,6 +592,26 @@ export function EmailList({
   );
 }
 
+function useEmailListKeyboardNav(
+  items: { id: string }[],
+  onAction: (index: number, action: "reply" | "archive") => void,
+) {
+  const handleKeyAction = useCallback(
+    (index: number, key: string) => {
+      if (key === "r") onAction(index, "reply");
+      else if (key === "e") onAction(index, "archive");
+    },
+    [onAction],
+  );
+
+  const { selectedIndex, setSelectedIndex, getRefCallback } =
+    useTableKeyboardNavigation({
+      items,
+      onKeyAction: handleKeyAction,
+    });
+  return { selectedIndex, setSelectedIndex, getRefCallback };
+}
+
 function ResizeGroup({
   left,
   right,

apps/web/components/email-list/EmailListItem.tsx

@@ -26,7 +26,6 @@ export const EmailListItem = forwardRef(
   (
     props: {
       userEmailAddress: string;
-      focused?: boolean;
       thread: Thread;
       opened: boolean;
       selected: boolean;
@@ -77,12 +76,11 @@ export const EmailListItem = forwardRef(
           ref={ref}
           className={clsx("group relative cursor-pointer border-l-4 py-3", {
             "hover:bg-slate-50 dark:hover:bg-slate-950":
-              !props.selected && !props.opened && !props.focused,
+              !props.selected && !props.opened,
             "bg-blue-50 dark:bg-blue-950": props.selected,
             "bg-blue-100 dark:bg-blue-900": props.opened,
             "bg-slate-100 dark:bg-background":
               !isUnread && !props.selected && !props.opened,
-            "z-10 ring-2 ring-blue-400": props.focused,
           })}
           onClick={props.onClick}
           onKeyDown={(e) => {