Staging

apps/mail/actions/mail.ts

@@ -1,6 +1,6 @@
 'use server';
+import { deleteActiveConnection, FatalErrors, getActiveDriver } from './utils';
 import { IGetThreadResponse } from '@/app/api/driver/types';
-import { getActiveDriver } from './utils';
 import { ParsedMessage } from '@/types';
 
 export const getMail = async ({ id }: { id: string }): Promise<IGetThreadResponse | null> => {
@@ -113,3 +113,16 @@ export const toggleStar = async ({ ids }: { ids: string[] }) => {
     throw error;
   }
 };
+
+export const deleteThread = async ({ id }: { id: string }) => {
+  console.log('Deleting thread:', id);
+  try {
+    const driver = await getActiveDriver();
+    await driver.delete(id);
+    return { success: true };
+  } catch (error) {
+    if (FatalErrors.includes((error as Error).message)) await deleteActiveConnection();
+    console.error('Error deleting thread:', error);
+    throw error;
+  }
+};

apps/mail/actions/send.ts

@@ -14,6 +14,7 @@ export async function sendEmail({
   headers: additionalHeaders = {},
   threadId,
   fromEmail,
+  draftId,
 }: {
   to: Sender[];
   subject: string;
@@ -24,6 +25,7 @@ export async function sendEmail({
   bcc?: Sender[];
   threadId?: string;
   fromEmail?: string;
+  draftId?: string;
 }) {
   if (!to || !subject || !message) {
     throw new Error('Missing required fields');
@@ -43,7 +45,7 @@ export async function sendEmail({
     },
   });
 
-  await driver.create({
+  const emailData = {
     subject,
     to,
     message,
@@ -53,7 +55,13 @@ export async function sendEmail({
     bcc,
     threadId,
     fromEmail,
-  });
+  };
+
+  if (draftId) {
+    await driver.sendDraft(draftId, emailData);
+  } else {
+    await driver.create(emailData);
+  }
 
   return { success: true };
 }

apps/mail/app/api/driver/google.ts

@@ -832,6 +832,25 @@ export const driver = async (config: IConfig): Promise<MailManager> => {
         { threadIds, options },
       );
     },
+    sendDraft: async (draftId: string, data: IOutgoingMessage) => {
+      return withErrorHandler(
+        'sendDraft',
+        async () => {
+          const { raw } = await parseOutgoing(data);
+          await gmail.users.drafts.send({
+            userId: 'me',
+            requestBody: {
+              id: draftId,
+              message: {
+                raw,
+                id: draftId,
+              },
+            },
+          });
+        },
+        { draftId, data },
+      );
+    },
     getDraft: async (draftId: string) => {
       return withErrorHandler(
         'getDraft',

apps/mail/app/api/driver/types.ts

@@ -10,6 +10,7 @@ export interface IGetThreadResponse {
 export interface MailManager {
   get(id: string): Promise<IGetThreadResponse>;
   create(data: IOutgoingMessage): Promise<any>;
+  sendDraft(id: string, data: IOutgoingMessage): Promise<any>;
   createDraft(data: any): Promise<any>;
   getDraft: (id: string) => Promise<any>;
   listDrafts: (q?: string, maxResults?: number, pageToken?: string) => Promise<any>;

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

@@ -26,7 +26,7 @@ import {
   MailOpen,
 } from 'lucide-react';
 import { moveThreadsTo, ThreadDestination } from '@/lib/thread-actions';
-import { markAsRead, markAsUnread, toggleStar } from '@/actions/mail';
+import { deleteThread, markAsRead, markAsUnread, toggleStar } from '@/actions/mail';
 import { useThread, useThreads } from '@/hooks/use-threads';
 import { useSearchValue } from '@/hooks/use-search-value';
 import { useParams, useRouter } from 'next/navigation';
@@ -236,6 +236,22 @@ export function ThreadContextMenu({
       disabled: false,
     },
   ];
+  const handleDelete = () => async () => {
+		try {
+        const promise = deleteThread({ id: threadId }).then(() => {
+          setMail(prev => ({ ...prev, bulkSelected: [] }));
+          return mutate();
+        });
+        toast.promise(promise, {
+          loading: t('common.actions.deletingMail'),
+          success: t('common.actions.deletedMail'),
+          error: t('common.actions.failedToDeleteMail'),
+        });
+    } catch (error) {
+        console.error(`Error deleting ${threadId? 'email' : 'thread'}:`, error);
+      }
+    };
+
 
   const getActions = () => {
     if (isSpam) {
@@ -266,6 +282,13 @@ export function ThreadContextMenu({
           action: handleMove(LABELS.TRASH, LABELS.INBOX),
           disabled: false,
         },
+        {
+          id: 'delete-from-bin',
+          label: t('common.mail.deleteFromBin'),
+          icon: <Trash className="mr-2.5 h-4 w-4" />,
+          action: handleDelete(),
+          disabled: false,
+        }
       ];
     }
 

apps/mail/components/create/create-email.tsx

@@ -268,6 +268,25 @@ export function CreateEmail({
     }
   };
 
+  const handleEditEmail = (type: 'to' | 'cc' | 'bcc', index: number, newEmail: string) => {
+    // Only validate and edit when Enter is pressed
+    const trimmedEmail = newEmail.trim();
+    if (!trimmedEmail) return;
+
+    const emailState = type === 'to' ? toEmails : type === 'cc' ? ccEmails : bccEmails;
+    const setEmailState = type === 'to' ? setToEmails : type === 'cc' ? setCcEmails : setBccEmails;
+
+    if (isValidEmail(trimmedEmail)) {
+      const newEmails = [...emailState];
+      newEmails[index] = trimmedEmail;
+      setEmailState(newEmails);
+      setHasUnsavedChanges(true);
+    } else {
+      // Show error for invalid email
+      toast.error(t('pages.createEmail.invalidEmail'));
+    }
+  };
+
   const saveDraft = React.useCallback(async () => {
     if (!hasUnsavedChanges) return;
     if (!toEmails.length || !subjectInput || !messageContent) return;
@@ -335,7 +354,7 @@ export function CreateEmail({
       // Use the selected from email or the first alias (or default user email)
       const fromEmail = selectedFromEmail || (aliases?.[0]?.email ?? userEmail);
 
-      await sendEmail({
+      const emailData = {
         to: toEmails.map((email) => ({ email, name: email.split('@')[0] || email })),
         cc: showCc
           ? ccEmails.map((email) => ({ email, name: email.split('@')[0] || email }))
@@ -347,7 +366,13 @@ export function CreateEmail({
         message: messageContent,
         attachments: attachments,
         fromEmail: fromEmail,
-      });
+      };
+
+      if (draftId) {
+        await sendEmail({ ...emailData, draftId });
+      } else {
+        await sendEmail(emailData);
+      }
 
       // Track different email sending scenarios
       if (showCc && showBcc) {
@@ -379,6 +404,8 @@ export function CreateEmail({
       setResetEditorKey((prev) => prev + 1);
 
       setHasUnsavedChanges(false);
+      // Clear the draftId after successful send
+      setDraftId(null);
     } catch (error) {
       console.error('Error sending email:', error);
       setIsLoading(false);
@@ -570,6 +597,7 @@ export function CreateEmail({
                   filteredContacts={[]}
                   isLoading={isLoading}
                   onAddEmail={handleAddEmail}
+                  onEditEmail={handleEditEmail}
                   hasUnsavedChanges={hasUnsavedChanges}
                   setHasUnsavedChanges={setHasUnsavedChanges}
                   className="w-24 text-right"
@@ -585,6 +613,7 @@ export function CreateEmail({
                     filteredContacts={[]}
                     isLoading={isLoading}
                     onAddEmail={handleAddEmail}
+                    onEditEmail={handleEditEmail}
                     hasUnsavedChanges={hasUnsavedChanges}
                     setHasUnsavedChanges={setHasUnsavedChanges}
                     className="w-24 text-right"
@@ -601,6 +630,7 @@ export function CreateEmail({
                     filteredContacts={[]}
                     isLoading={isLoading}
                     onAddEmail={handleAddEmail}
+                    onEditEmail={handleEditEmail}
                     hasUnsavedChanges={hasUnsavedChanges}
                     setHasUnsavedChanges={setHasUnsavedChanges}
                     className="w-24 text-right"
@@ -784,7 +814,7 @@ export function CreateEmail({
                             </p>
                           </div>
                           <Separator />
-                          <div className="touch-auto overflow-y-auto  max-h-[40vh] overflow-x-hidden overscroll-contain px-1 py-1">
+                          <div className="max-h-[40vh] touch-auto overflow-y-auto overflow-x-hidden overscroll-contain px-1 py-1">
                             <div className="grid grid-cols-2 gap-2">
                               {attachments.map((file, index) => (
                                 <div

apps/mail/components/create/email-input.tsx

@@ -11,6 +11,7 @@ interface EmailInputProps {
   filteredContacts: any[];
   isLoading: boolean;
   onAddEmail: (type: 'to' | 'cc' | 'bcc', email: string) => void;
+  onEditEmail: (type: 'to' | 'cc' | 'bcc', index: number, email: string) => void;
   hasUnsavedChanges: boolean;
   setHasUnsavedChanges: (value: boolean) => void;
   className?: string;
@@ -25,13 +26,17 @@ export function EmailInput({
   filteredContacts,
   isLoading,
   onAddEmail,
+  onEditEmail,
   className,
   setHasUnsavedChanges,
 }: EmailInputProps) {
   const t = useTranslations();
   const [selectedContactIndex, setSelectedContactIndex] = useState(0);
+  const [editingIndex, setEditingIndex] = useState<number | null>(null);
+  const [editValue, setEditValue] = useState('');
   const dropdownRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLInputElement>(null);
+  const editInputRef = useRef<HTMLInputElement>(null);
 
   const handleEmailInputChange = (value: string) => {
     setInputValue(value);
@@ -66,11 +71,35 @@ export function EmailInput({
     setHasUnsavedChanges(true);
   };
 
+  const handleChipClick = (index: number, email: string) => {
+    setEditingIndex(index);
+    setEditValue(email);
+    setTimeout(() => {
+      const input = editInputRef.current;
+      if (input) {
+        input.focus();
+        // Move cursor to the end instead of selecting
+        const length = input.value.length;
+        input.setSelectionRange(length, length);
+      }
+    }, 0);
+  };
+
+  const handleEditKeyDown = (e: React.KeyboardEvent<HTMLInputElement>, index: number) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      onEditEmail(type, index, editValue);
+      setEditingIndex(null);
+      setEditValue('');
+    } else if (e.key === 'Escape') {
+      setEditingIndex(null);
+      setEditValue('');
+    }
+  };
+
   return (
     <div className="flex items-center">
-      <div
-        className={`text-muted-foreground flex-shrink-0 pr-3 text-[1rem] font-[600] opacity-50 ${className}`}
-      >
+      <div className={`text-muted-foreground flex-shrink-0 pr-3 text-[1rem] font-[600] opacity-50 ${className}`}>
         {type === 'to'
           ? t('common.mailDisplay.to')
           : `${type.charAt(0).toUpperCase()}${type.slice(1)}`}
@@ -81,9 +110,27 @@ export function EmailInput({
             key={index}
             className="bg-accent flex items-center gap-1 rounded-md border px-2 text-sm font-medium"
           >
-            <span className="max-w-[150px] overflow-hidden text-ellipsis whitespace-nowrap">
-              {email}
-            </span>
+            {editingIndex === index ? (
+              <div className="relative flex items-center">
+                <input
+                  ref={editInputRef}
+                  type="text"
+                  value={editValue}
+                  onChange={(e) => setEditValue(e.target.value)}
+                  onKeyDown={(e) => handleEditKeyDown(e, index)}
+                  onBlur={() => setEditingIndex(null)}
+                  className="w-[150px] bg-transparent focus:outline-none pr-6"
+                />
+                <span className="absolute right-1 text-xs text-muted-foreground">↵</span>
+              </div>
+            ) : (
+              <span
+                onClick={() => handleChipClick(index, email)}
+                className="max-w-[150px] cursor-pointer overflow-hidden text-ellipsis whitespace-nowrap"
+              >
+                {email}
+              </span>
+            )}
             <button
               tabIndex={-1}
               type="button"

apps/mail/i18n/config.ts

@@ -1,6 +1,8 @@
 const LANGUAGES = {
   en: 'English',
   ar: 'Arabic',
+  zh_TW: 'Chinese (Traditional)',
+  zh_CN: 'Chinese (Simplified)',
   ca: 'Catalan',
   de: 'German',
   es: 'Spanish',

apps/mail/locales/en.json

@@ -19,6 +19,9 @@
       "movingToInbox": "Moving to inbox...",
       "movedToSpam": "Moved to spam",
       "movingToSpam": "Moving to spam...",
+      "deletingMail": "Deleting mail...",
+      "failedToDeleteMail": "Failed to delete mail",
+      "deletedMail": "Mail deleted",
       "archiving": "Archiving...",
       "archived": "Archived",
       "failedToMove": "Failed to move message",
@@ -249,6 +252,7 @@
       "mute": "Mute",
       "moveToSpam": "Move to Spam",
       "moveToInbox": "Move to Inbox",
+      "deleteFromBin": "Delete from Bin",
       "unarchive": "Unarchive",
       "archive": "Archive",
       "moveToBin": "Move to Bin",