Skip to content

added shortcuts in /mail #392

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

added shortcuts in /mail #392

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8a99439
added shortcuts in /mail
Saksham1387 Apr 6, 2025
bf690d1
made required changes
Saksham1387 Apr 6, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
92 changes: 89 additions & 3 deletions apps/web/components/email-list/EmailList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 countBy from "lodash/countBy";
import { capitalCase } from "capital-case";
Expand Down Expand Up @@ -32,6 +32,7 @@ import {
deleteEmails,
markReadThreads,
} from "@/store/archive-queue";
import { useTableKeyboardNavigation } from "@/hooks/useTableKeyboardNavigation";

export function List({
emails,
Expand Down Expand Up @@ -364,6 +365,71 @@ export function EmailList({
);
}, [selectedRows, refetch]);

// 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],
);
Comment on lines +415 to +429
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Missing dependencies in useCallback dependency array

The handleAction callback has missing dependencies in its dependency array:

- }, [threads, setOpenThreadId],
+ }, [threads, setOpenThreadId, onArchive, refetch, scrollToId],

These dependencies are used inside the callback but not included in the dependency array, which could lead to stale closures and unexpected behavior.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
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],
);
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, onArchive, refetch, scrollToId],
);
🧰 Tools
🪛 Biome (1.9.4)

[error] 415-415: This hook does not specify all of its dependencies: onArchive

This dependency is not specified in the hook dependency list.

(lint/correctness/useExhaustiveDependencies)

[error] 415-415: This hook does not specify all of its dependencies: refetch

This dependency is not specified in the hook dependency list.

(lint/correctness/useExhaustiveDependencies)

[error] 415-415: This hook does not specify all of its dependencies: scrollToId

This dependency is not specified in the hook dependency list.

(lint/correctness/useExhaustiveDependencies)


const { selectedIndex } = useEmailListKeyboardNav(threads, handleAction);

const onPlanAiBulk = useCallback(async () => {
toast.promise(
async () => {
Expand Down Expand Up @@ -443,7 +509,7 @@ 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);
Expand All @@ -468,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}
Expand Down Expand Up @@ -526,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,
Expand Down