feat: add keyboard shortcuts to mail view

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

@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useRef, useState, useMemo } from "react";
+import { useCallback, useRef, useState, useMemo, useEffect } from "react";
 import { useQueryState } from "nuqs";
 import Link from "next/link";
 import { toast } from "sonner";
@@ -31,6 +31,7 @@ import {
 import { useAccount } from "@/providers/EmailAccountProvider";
 import { prefixPath } from "@/utils/path";
 import { useIsMobile } from "@/hooks/use-mobile";
+import { useMailKeyboardNavigation } from "@/hooks/useMailKeyboardNavigation";
 
 export function List({
   emails,
@@ -278,6 +279,58 @@ export function EmailList({
     setOpenThreadId(prevOrNextRowId);
   }
 
+  // Keyboard shortcuts: Arrow Up/Down to navigate, R to reply, E to archive
+  const onKeyboardReply = useCallback(
+    (index: number) => {
+      const thread = threads[index];
+      if (!thread) return;
+      setOpenThreadId(thread.id);
+      // Dispatch a custom event so EmailMessage can open its reply form.
+      // Small delay to allow the panel to render before triggering reply.
+      setTimeout(() => {
+        window.dispatchEvent(
+          new CustomEvent("mail:reply", { detail: { threadId: thread.id } }),
+        );
+      }, 100);
+    },
+    [threads, setOpenThreadId],
+  );
+
+  const onKeyboardArchive = useCallback(
+    (index: number) => {
+      const thread = threads[index];
+      if (!thread) return;
+      onArchive(thread);
+    },
+    [threads, onArchive],
+  );
+
+  const { selectedIndex, setSelectedIndex, getRefCallback } =
+    useMailKeyboardNavigation({
+      threads,
+      onReply: onKeyboardReply,
+      onArchive: onKeyboardArchive,
+    });
+
+  // Sync keyboard selection with the opened thread panel
+  const prevSelectedIndexRef = useRef(selectedIndex);
+  useEffect(() => {
+    if (
+      selectedIndex >= 0 &&
+      selectedIndex !== prevSelectedIndexRef.current &&
+      threads[selectedIndex]
+    ) {
+      const thread = threads[selectedIndex];
+      setOpenThreadId(thread.id);
+      markReadThreads({
+        threadIds: [thread.id],
+        onSuccess: () => refetch(),
+        emailAccountId,
+      });
+    }
+    prevSelectedIndexRef.current = selectedIndex;
+  }, [selectedIndex, threads, setOpenThreadId, refetch, emailAccountId]);
+
   const onArchiveBulk = useCallback(async () => {
     toast.promise(
       async () => {
@@ -407,10 +460,11 @@ export function EmailList({
               className="divide-y divide-border overflow-y-auto scroll-smooth"
               ref={listRef}
             >
-              {threads.map((thread) => {
+              {threads.map((thread, index) => {
                 const onOpen = () => {
                   const alreadyOpen = !!openThreadId;
                   setOpenThreadId(thread.id);
+                  setSelectedIndex(index);
 
                   if (!alreadyOpen) scrollToId(thread.id);
 
@@ -421,6 +475,8 @@ export function EmailList({
                   });
                 };
 
+                const keyboardRefCallback = getRefCallback(index);
+
                 return (
                   <EmailListItem
                     key={thread.id}
@@ -431,6 +487,8 @@ export function EmailList({
                       } else {
                         map.delete(thread.id);
                       }
+                      // Also register with keyboard navigation
+                      keyboardRefCallback(node);
                     }}
                     userEmail={userEmail}
                     provider={provider}

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

@@ -1,4 +1,10 @@
-import { useCallback, useMemo, useState, useRef, useEffect } from "react";
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+  useRef,
+} from "react";
 import {
   ForwardIcon,
   ReplyIcon,
@@ -52,6 +58,19 @@ export function EmailMessage({
   const [showDetails, setShowDetails] = useState(false);
 
   const onReply = useCallback(() => setShowReply(true), []);
+
+  // Listen for keyboard shortcut reply event (R key from mail list)
+  useEffect(() => {
+    if (!expanded) return;
+
+    const handleMailReply = (e: Event) => {
+      const detail = (e as CustomEvent).detail;
+      if (detail?.threadId && detail.threadId !== message.threadId) return;
+      setShowReply(true);
+    };
+    window.addEventListener("mail:reply", handleMailReply);
+    return () => window.removeEventListener("mail:reply", handleMailReply);
+  }, [expanded, message.threadId]);
   const [showForward, setShowForward] = useState(false);
   const onForward = useCallback(() => setShowForward(true), []);
 

apps/web/hooks/useMailKeyboardNavigation.ts

@@ -0,0 +1,30 @@
+import { useCallback } from "react";
+import { useTableKeyboardNavigation } from "@/hooks/useTableKeyboardNavigation";
+
+interface UseMailKeyboardNavigationOptions {
+  threads: { id: string }[];
+  onReply: (index: number) => void;
+  onArchive: (index: number) => void;
+}
+
+export function useMailKeyboardNavigation({
+  threads,
+  onReply,
+  onArchive,
+}: UseMailKeyboardNavigationOptions) {
+  const handleKeyAction = useCallback(
+    (index: number, key: string) => {
+      if (key === "r" || key === "R") {
+        onReply(index);
+      } else if (key === "e" || key === "E") {
+        onArchive(index);
+      }
+    },
+    [onReply, onArchive],
+  );
+
+  return useTableKeyboardNavigation({
+    items: threads,
+    onKeyAction: handleKeyAction,
+  });
+}

apps/web/hooks/useTableKeyboardNavigation.ts

@@ -48,6 +48,7 @@ export function useTableKeyboardNavigation<T>({
           prev >= items.length - 1 ? items.length - 1 : prev + 1,
         );
       } else if (onKeyAction && selectedIndex >= 0) {
+        if (e.metaKey || e.ctrlKey || e.altKey) return;
         onKeyAction(selectedIndex, e.key);
       }
     },