Implement thread deletion functionality (#1799)

# Implement Thread Deletion Functionality

## Description

This PR implements thread deletion functionality, allowing users to permanently delete threads from the bin. The implementation includes:

1. Replacing the optimistic delete with a real deletion using TRPC mutation
2. Enabling the previously disabled delete button in the thread context menu
3. Adding server-side support for thread deletion from the database
4. Adding folder name normalization to handle 'bin' vs 'trash' naming differences

## Type of Change

- [x] ✨ New feature (non-breaking change which adds functionality)
- [x] 🐛 Bug fix (non-breaking change which fixes an issue)

## Areas Affected

- [x] Email Integration (Gmail, IMAP, etc.)
- [x] User Interface/Experience
- [x] Data Storage/Management

## Testing Done

- [x] Manual testing performed

## Checklist

- [x] I have performed a self-review of my code
- [x] My changes generate no new warnings

## Additional Notes

The implementation now properly deletes threads from the database when the user selects the delete option from the context menu. The UI provides toast notifications to indicate the deletion status.

_By submitting this pull request, I confirm that my contribution is made under the terms of the project's license._

Author: MrgSub

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

@@ -25,10 +25,13 @@ import {
 } from 'lucide-react';
 import { useOptimisticThreadState } from '@/components/mail/optimistic-thread-state';
 import { useOptimisticActions } from '@/hooks/use-optimistic-actions';
+import { ExclamationCircle, Mail, Clock } from '../icons/icons';
+import { SnoozeDialog } from '@/components/mail/snooze-dialog';
 import { type ThreadDestination } from '@/lib/thread-actions';
 import { useThread, useThreads } from '@/hooks/use-threads';
-import { ExclamationCircle, Mail, Clock } from '../icons/icons';
 import { useMemo, type ReactNode, useState } from 'react';
+import { useTRPC } from '@/providers/query-provider';
+import { useMutation } from '@tanstack/react-query';
 import { useLabels } from '@/hooks/use-labels';
 import { FOLDERS, LABELS } from '@/lib/utils';
 import { useMail } from '../mail/use-mail';
@@ -37,7 +40,6 @@ import { m } from '@/paraglide/messages';
 import { useParams } from 'react-router';
 import { useQueryState } from 'nuqs';
 import { toast } from 'sonner';
-import { SnoozeDialog } from '@/components/mail/snooze-dialog';
 
 interface EmailAction {
   id: string;
@@ -93,10 +95,14 @@ const LabelsList = ({ threadId, bulkSelected }: { threadId: string; bulkSelected
       {labels
         .filter((label) => label.id)
         .map((label) => {
-          let isChecked = label.id ? thread!.labels?.some((l) => l.id === label.id) ?? false : false;
+          let isChecked = label.id
+            ? (thread!.labels?.some((l) => l.id === label.id) ?? false)
+            : false;
 
           if (rightClickedThreadOptimisticState.optimisticLabels) {
-            if (rightClickedThreadOptimisticState.optimisticLabels.addedLabelIds.includes(label.id)) {
+            if (
+              rightClickedThreadOptimisticState.optimisticLabels.addedLabelIds.includes(label.id)
+            ) {
               isChecked = true;
             } else if (
               rightClickedThreadOptimisticState.optimisticLabels.removedLabelIds.includes(label.id)
@@ -141,16 +147,18 @@ export function ThreadContextMenu({
   const { data: threadData } = useThread(threadId);
   const [, setActiveReplyId] = useQueryState('activeReplyId');
   const optimisticState = useOptimisticThreadState(threadId);
+  const trpc = useTRPC();
   const {
     optimisticMoveThreadsTo,
     optimisticToggleStar,
     optimisticToggleImportant,
     optimisticMarkAsRead,
     optimisticMarkAsUnread,
-    optimisticDeleteThreads,
+    // optimisticDeleteThreads,
     optimisticSnooze,
     optimisticUnsnooze,
   } = useOptimisticActions();
+  const { mutateAsync: deleteThread } = useMutation(trpc.mail.delete.mutationOptions());
 
   const { isUnread, isStarred, isImportant } = useMemo(() => {
     const unread = threadData?.hasUnread ?? false;
@@ -305,18 +313,18 @@ export function ThreadContextMenu({
   const handleDelete = () => () => {
     const targets = mail.bulkSelected.length ? mail.bulkSelected : [threadId];
 
-    // Use optimistic update with undo functionality
-    optimisticDeleteThreads(targets, currentFolder);
-
-    // Clear bulk selection after action
-    if (mail.bulkSelected.length) {
-      setMail((prev) => ({ ...prev, bulkSelected: [] }));
-    }
-
-    // Navigation removed to prevent route change on current thread action
-    // if (!mail.bulkSelected.length && threadId) {
-    //   navigate(`/mail/${currentFolder}`);
-    // }
+    toast.promise(
+      Promise.all(
+        targets.map(async (id) => {
+          return deleteThread({ id });
+        }),
+      ),
+      {
+        loading: 'Deleting...',
+        success: 'Deleted',
+        error: 'Failed to delete',
+      },
+    );
   };
 
   const getActions = useMemo(() => {
@@ -353,7 +361,6 @@ export function ThreadContextMenu({
           label: m['common.mail.deleteFromBin'](),
           icon: <Trash className="mr-2.5 h-4 w-4 opacity-60" />,
           action: handleDelete(),
-          disabled: true,
         },
       ];
     }
@@ -493,15 +500,7 @@ export function ThreadContextMenu({
         disabled: false,
       },
     ],
-    [
-      isUnread,
-      isImportant,
-      isStarred,
-      m,
-      handleReadUnread,
-      handleToggleImportant,
-      handleFavorites,
-    ],
+    [isUnread, isImportant, isStarred, m, handleReadUnread, handleToggleImportant, handleFavorites],
   );
 
   const renderAction = (action: EmailAction) => {

apps/server/src/routes/agent/index.ts

@@ -367,6 +367,16 @@ export class ZeroDriver extends AIChatAgent<typeof env> {
         DROP TABLE IF EXISTS threads;`;
   }
 
+  async deleteThread(id: string) {
+    void this.sql`
+      DELETE FROM threads WHERE thread_id = ${id};
+    `;
+    this.agent?.broadcastChatMessage({
+      type: OutgoingMessageType.Mail_List,
+      folder: 'bin',
+    });
+  }
+
   async syncThread({ threadId }: { threadId: string }) {
     if (this.name === 'general') return;
     if (!this.driver) {
@@ -384,7 +394,7 @@ export class ZeroDriver extends AIChatAgent<typeof env> {
     }
     this.syncThreadsInProgress.set(threadId, true);
 
-    console.log('Server: syncThread called for thread', threadId);
+    // console.log('Server: syncThread called for thread', threadId);
     try {
       const threadData = await this.getWithRetry(threadId);
       const latest = threadData.latest;
@@ -432,10 +442,10 @@ export class ZeroDriver extends AIChatAgent<typeof env> {
             threadId,
           });
         this.syncThreadsInProgress.delete(threadId);
-        console.log('Server: syncThread result', {
-          threadId,
-          labels: threadData.labels,
-        });
+        // console.log('Server: syncThread result', {
+        //   threadId,
+        //   labels: threadData.labels,
+        // });
         return { success: true, threadId, threadData };
       } else {
         this.syncThreadsInProgress.delete(threadId);
@@ -656,22 +666,26 @@ export class ZeroDriver extends AIChatAgent<typeof env> {
     };
   }
 
+  normalizeFolderName(folderName: string) {
+    if (folderName === 'bin') return 'trash';
+    return folderName;
+  }
+
   async getThreadsFromDB(params: {
     labelIds?: string[];
     folder?: string;
     q?: string;
     maxResults?: number;
     pageToken?: string;
   }): Promise<IGetThreadsResponse> {
-    const { labelIds = [], folder, q, maxResults = 50, pageToken } = params;
+    const { labelIds = [], q, maxResults = 50, pageToken } = params;
+    let folder = params.folder ?? 'inbox';
 
     try {
+      folder = this.normalizeFolderName(folder);
       const folderThreadCount = (await this.count()).find((c) => c.label === folder)?.count;
       const currentThreadCount = await this.getThreadCount();
 
-      console.log('folderThreadCount', folderThreadCount, folder);
-      console.log('currentThreadCount', currentThreadCount);
-
       if (folderThreadCount && folderThreadCount > currentThreadCount && folder) {
         this.ctx.waitUntil(this.syncThreads(folder));
       }

apps/server/src/routes/agent/rpc.ts

@@ -161,7 +161,9 @@ export class DriverRpcDO extends RpcTarget {
   }
 
   async delete(id: string) {
-    return await this.mainDo.delete(id);
+    const result = await this.mainDo.delete(id);
+    await this.mainDo.deleteThread(id);
+    return result;
   }
 
   async deleteAllSpam() {