diff --git a/apps/mail/components/mail/mail.tsx b/apps/mail/components/mail/mail.tsx index 25df912ed..5a92e32d4 100644 --- a/apps/mail/components/mail/mail.tsx +++ b/apps/mail/components/mail/mail.tsx @@ -9,6 +9,7 @@ import { Bell, Lightning, Mail, ScanEye, Tag, User, X, Search } from '../icons/i import { useCategorySettings, useDefaultCategoryId } from '@/hooks/use-categories'; import { ResizablePanel, ResizablePanelGroup } from '@/components/ui/resizable'; import { useCommandPalette } from '../context/command-palette-context'; +import { useHotkeys, useHotkeysContext } from 'react-hotkeys-hook'; import { ThreadDisplay } from '@/components/mail/thread-display'; import { useActiveConnection } from '@/hooks/use-connections'; import { Check, ChevronDown, RefreshCcw } from 'lucide-react'; @@ -17,7 +18,6 @@ import useSearchLabels from '@/hooks/use-labels-search'; import * as CustomIcons from '@/components/icons/icons'; import { isMac } from '@/lib/hotkeys/use-hotkey-utils'; import { MailList } from '@/components/mail/mail-list'; -import { useHotkeysContext } from 'react-hotkeys-hook'; import { useNavigate, useParams } from 'react-router'; import { useMail } from '@/components/mail/use-mail'; import { SidebarToggle } from '../ui/sidebar-toggle'; @@ -678,6 +678,42 @@ function CategoryDropdown({ isMultiSelectMode }: CategoryDropdownProps) { const folder = params?.folder ?? 'inbox'; const [isOpen, setIsOpen] = useState(false); + categorySettings.forEach((category, index) => { + if (index < 9) { + const keyNumber = (index + 1).toString(); + useHotkeys( + keyNumber, + () => { + const isCurrentlyActive = labels.includes(category.searchValue); + + if (isCurrentlyActive) { + setLabels(labels.filter((label) => label !== category.searchValue)); + } else { + setLabels([...labels, category.searchValue]); + } + }, + { + scopes: ['mail-list'], + preventDefault: true, + enableOnFormTags: false, + }, + [category.searchValue, labels, setLabels], // Dependencies + ); + } + }); + + useHotkeys( + '0', + () => { + setLabels([]); + }, + { + scopes: ['mail-list'], + preventDefault: true, + enableOnFormTags: false, + }, + ); + if (folder !== 'inbox' || isMultiSelectMode) return null; const handleLabelChange = (searchValue: string) => { diff --git a/apps/mail/lib/hotkeys/mail-list-hotkeys.tsx b/apps/mail/lib/hotkeys/mail-list-hotkeys.tsx index ad1a5765e..2e3836d56 100644 --- a/apps/mail/lib/hotkeys/mail-list-hotkeys.tsx +++ b/apps/mail/lib/hotkeys/mail-list-hotkeys.tsx @@ -1,13 +1,16 @@ import { useOptimisticActions } from '@/hooks/use-optimistic-actions'; import { enhancedKeyboardShortcuts } from '@/config/shortcuts'; -import { useSearchValue } from '@/hooks/use-search-value'; -import { useLocation, useParams } from 'react-router'; +// import { useSearchValue } from '@/hooks/use-search-value'; +import { + // useLocation, + useParams, +} from 'react-router'; import { useMail } from '@/components/mail/use-mail'; import { useCallback, useMemo, useRef } from 'react'; -import { Categories } from '@/components/mail/mail'; +// import { Categories } from '@/components/mail/mail'; import { useShortcuts } from './use-hotkey-utils'; import { useThreads } from '@/hooks/use-threads'; -import { cleanSearchValue } from '@/lib/utils'; +// import { cleanSearchValue } from '@/lib/utils'; import { m } from '@/paraglide/messages'; import { toast } from 'sonner'; @@ -16,9 +19,9 @@ export function MailListHotkeys() { const [mail, setMail] = useMail(); const [, items] = useThreads(); const hoveredEmailId = useRef(null); - const categories = Categories(); - const [searchValue, setSearchValue] = useSearchValue(); - const pathname = useLocation().pathname; + // const categories = Categories(); + // const [searchValue, setSearchValue] = useSearchValue(); + // const pathname = useLocation().pathname; const params = useParams<{ folder: string }>(); const folder = params?.folder ?? 'inbox'; const shouldUseHover = mail.bulkSelected.length === 0; @@ -172,38 +175,38 @@ export function MailListHotkeys() { })); }, [shouldUseHover]); - const switchMailListCategory = useCallback( - (category: string | null) => { - if (pathname?.includes('/mail/inbox')) { - const cat = categories.find((cat) => cat.id === category); - if (!cat) { - // setCategory(null); - setSearchValue({ - value: '', - highlight: searchValue.highlight, - folder: '', - }); - return; - } - // setCategory(cat.id); - setSearchValue({ - value: `${cat.searchValue} ${cleanSearchValue(searchValue.value).trim().length ? `AND ${cleanSearchValue(searchValue.value)}` : ''}`, - highlight: searchValue.highlight, - folder: '', - }); - } - }, - [categories, pathname, searchValue, setSearchValue], - ); + // const switchMailListCategory = useCallback( + // (category: string | null) => { + // if (pathname?.includes('/mail/inbox')) { + // const cat = categories.find((cat) => cat.id === category); + // if (!cat) { + // // setCategory(null); + // setSearchValue({ + // value: '', + // highlight: searchValue.highlight, + // folder: '', + // }); + // return; + // } + // // setCategory(cat.id); + // setSearchValue({ + // value: `${cat.searchValue} ${cleanSearchValue(searchValue.value).trim().length ? `AND ${cleanSearchValue(searchValue.value)}` : ''}`, + // highlight: searchValue.highlight, + // folder: '', + // }); + // } + // }, + // [categories, pathname, searchValue, setSearchValue], + // ); - const switchCategoryByIndex = useCallback( - (idx: number) => { - const cat = categories[idx]; - if (!cat) return; - switchMailListCategory(cat.id); - }, - [categories, switchMailListCategory], - ); + // const switchCategoryByIndex = useCallback( + // (idx: number) => { + // const cat = categories[idx]; + // if (!cat) return; + // switchMailListCategory(cat.id); + // }, + // [categories, switchMailListCategory], + // ); const handlers = useMemo( () => ({ @@ -216,15 +219,15 @@ export function MailListHotkeys() { bulkDelete, bulkStar, exitSelectionMode, - showImportant: () => switchCategoryByIndex(0), - showAllMail: () => switchCategoryByIndex(1), - showPersonal: () => switchCategoryByIndex(2), - showUpdates: () => switchCategoryByIndex(3), - showPromotions: () => switchCategoryByIndex(4), - showUnread: () => switchCategoryByIndex(5), + // showImportant: () => switchCategoryByIndex(0), + // showAllMail: () => switchCategoryByIndex(1), + // showPersonal: () => switchCategoryByIndex(2), + // showUpdates: () => switchCategoryByIndex(3), + // showPromotions: () => switchCategoryByIndex(4), + // showUnread: () => switchCategoryByIndex(5), }), [ - switchCategoryByIndex, + // switchCategoryByIndex, markAsRead, markAsUnread, markAsImportant,