chore: invalidate query count on marking read/uread

apps/mail/components/context/thread-context.tsx

@@ -26,12 +26,12 @@ import {
   MailOpen,
 } from 'lucide-react';
 import { moveThreadsTo, type ThreadDestination } from '@/lib/thread-actions';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { backgroundQueueAtom } from '@/store/backgroundQueue';
 import { useThread, useThreads } from '@/hooks/use-threads';
 import { useSearchValue } from '@/hooks/use-search-value';
 import { useParams, useRouter } from 'next/navigation';
 import { useTRPC } from '@/providers/query-provider';
-import { useMutation } from '@tanstack/react-query';
 import { useLabels } from '@/hooks/use-labels';
 import { LABELS, FOLDERS } from '@/lib/utils';
 import { useStats } from '@/hooks/use-stats';
@@ -132,8 +132,15 @@ export function ThreadContextMenu({
   const [, setBackgroundQueue] = useAtom(backgroundQueueAtom);
   const { refetch: refetchThread, data: threadData } = useThread(threadId);
   const trpc = useTRPC();
-  const { mutateAsync: markAsRead } = useMutation(trpc.mail.markAsRead.mutationOptions());
-  const { mutateAsync: markAsUnread } = useMutation(trpc.mail.markAsUnread.mutationOptions());
+  const queryClient = useQueryClient();
+  const invalidateCount = () =>
+    queryClient.invalidateQueries({ queryKey: trpc.mail.count.queryKey() });
+  const { mutateAsync: markAsRead } = useMutation(
+    trpc.mail.markAsRead.mutationOptions({ onSuccess: () => invalidateCount() }),
+  );
+  const { mutateAsync: markAsUnread } = useMutation(
+    trpc.mail.markAsUnread.mutationOptions({ onSuccess: () => invalidateCount() }),
+  );
   const { mutateAsync: toggleStar } = useMutation(trpc.mail.toggleStar.mutationOptions());
   const { mutateAsync: deleteThread } = useMutation(trpc.mail.delete.mutationOptions());
 

apps/mail/components/mail/mail-quick-actions.tsx

@@ -1,10 +1,10 @@
 'use client';
 
 import { moveThreadsTo, type ThreadDestination } from '@/lib/thread-actions';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { useThread, useThreads } from '@/hooks/use-threads';
 import { useParams, useRouter } from 'next/navigation';
 import { useTRPC } from '@/providers/query-provider';
-import { useMutation } from '@tanstack/react-query';
 import { Archive, Mail, Inbox } from 'lucide-react';
 import { useCallback, memo, useState } from 'react';
 import { Button } from '@/components/ui/button';
@@ -32,9 +32,17 @@ export const MailQuickActions = memo(
     selectedQuickActionIndex = 0,
     resetNavigation,
   }: MailQuickActionsProps) => {
+    const queryClient = useQueryClient();
+    const invalidateCount = () =>
+      queryClient.invalidateQueries({ queryKey: trpc.mail.count.queryKey() });
+
     const trpc = useTRPC();
-    const { mutateAsync: markAsRead } = useMutation(trpc.mail.markAsRead.mutationOptions());
-    const { mutateAsync: markAsUnread } = useMutation(trpc.mail.markAsUnread.mutationOptions());
+    const { mutateAsync: markAsRead } = useMutation(
+      trpc.mail.markAsRead.mutationOptions({ onSuccess: () => invalidateCount() }),
+    );
+    const { mutateAsync: markAsUnread } = useMutation(
+      trpc.mail.markAsUnread.mutationOptions({ onSuccess: () => invalidateCount() }),
+    );
 
     const { data: threadData, refetch: refetchThread } = useThread(id);
     const latestMessage = threadData?.latest;

apps/mail/components/mail/mail.tsx

@@ -423,13 +423,20 @@ function BulkSelectActions() {
   const [{ refetch: refetchThreads }] = useThreads();
   const { refetch: refetchStats } = useStats();
   const trpc = useTRPC();
-  const { mutateAsync: markAsRead } = useMutation(trpc.mail.markAsRead.mutationOptions());
-  const { mutateAsync: markAsImportant } = useMutation(trpc.mail.markAsImportant.mutationOptions());
+  const queryClient = useQueryClient();
+  const invalidateCount = () =>
+    queryClient.invalidateQueries({ queryKey: trpc.mail.count.queryKey() });
+
+  const { mutateAsync: markAsRead } = useMutation(
+    trpc.mail.markAsRead.mutationOptions({ onSuccess: () => invalidateCount() }),
+  );
+  const { mutateAsync: markAsImportant } = useMutation(
+    trpc.mail.markAsImportant.mutationOptions({ onSuccess: () => invalidateCount() }),
+  );
   const { mutateAsync: bulkArchive } = useMutation(trpc.mail.bulkArchive.mutationOptions());
   const { mutateAsync: bulkStar } = useMutation(trpc.mail.bulkStar.mutationOptions());
   const [, setBackgroundQueue] = useAtom(backgroundQueueAtom);
   const { mutateAsync: bulkDeleteThread } = useMutation(trpc.mail.bulkDelete.mutationOptions());
-  const queryClient = useQueryClient();
 
   const handleMassUnsubscribe = async () => {
     setIsLoading(true);

apps/mail/components/mail/thread-display.tsx

@@ -28,6 +28,7 @@ import {
 import { CircleAlertIcon, Inbox, ShieldAlertIcon, StopCircleIcon } from 'lucide-react';
 import { moveThreadsTo, type ThreadDestination } from '@/lib/thread-actions';
 import { useState, useEffect, useCallback, useRef, useMemo } from 'react';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { useMailNavigation } from '@/hooks/use-mail-navigation';
 import { focusedIndexAtom } from '@/hooks/use-mail-navigation';
 import { backgroundQueueAtom } from '@/store/backgroundQueue';
@@ -37,7 +38,6 @@ import { useAISidebar } from '@/components/ui/ai-sidebar';
 import { useHotkeysContext } from 'react-hotkeys-hook';
 import { MailDisplaySkeleton } from './mail-skeleton';
 import { useTRPC } from '@/providers/query-provider';
-import { useMutation } from '@tanstack/react-query';
 import { useIsMobile } from '@/hooks/use-mobile';
 import { Button } from '@/components/ui/button';
 import { useStats } from '@/hooks/use-stats';
@@ -168,7 +168,12 @@ export function ThreadDisplay() {
   const { resolvedTheme } = useTheme();
   const [focusedIndex, setFocusedIndex] = useAtom(focusedIndexAtom);
   const trpc = useTRPC();
-  const { mutateAsync: markAsRead } = useMutation(trpc.mail.markAsRead.mutationOptions());
+  const queryClient = useQueryClient();
+  const invalidateCount = () =>
+    queryClient.invalidateQueries({ queryKey: trpc.mail.count.queryKey() });
+  const { mutateAsync: markAsRead } = useMutation(
+    trpc.mail.markAsRead.mutationOptions({ onSuccess: () => invalidateCount() }),
+  );
   const [, setIsComposeOpen] = useQueryState('isComposeOpen');
 
   const handlePrevious = useCallback(() => {

apps/mail/lib/hotkeys/mail-list-hotkeys.tsx

@@ -19,9 +19,16 @@ export function MailListHotkeys() {
   const t = useTranslations();
   const hoveredEmailId = useRef<string | null>(null);
   const trpc = useTRPC();
+  const queryClient = useQueryClient();
+  const invalidateCount = () =>
+    queryClient.invalidateQueries({ queryKey: trpc.mail.count.queryKey() });
   const { mutateAsync: bulkArchive } = useMutation(trpc.mail.bulkArchive.mutationOptions());
-  const { mutateAsync: markAsUnreadAction } = useMutation(trpc.mail.markAsUnread.mutationOptions());
-  const { mutateAsync: markAsReadAction } = useMutation(trpc.mail.markAsRead.mutationOptions());
+  const { mutateAsync: markAsReadAction } = useMutation(
+    trpc.mail.markAsRead.mutationOptions({ onSuccess: () => invalidateCount() }),
+  );
+  const { mutateAsync: markAsUnreadAction } = useMutation(
+    trpc.mail.markAsUnread.mutationOptions({ onSuccess: () => invalidateCount() }),
+  );
 
   useEffect(() => {
     const handleEmailHover = (event: CustomEvent<{ id: string | null }>) => {