Neah version mail design fix 7 bis

app/mail/page.tsx

@@ -1012,6 +1012,159 @@ export default function MailPage() {
     );
   };
 
+  // Add attachment handling functions
+  const handleFileAttachment = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (!e.target.files) return;
+    
+    const newAttachments: Attachment[] = [];
+    
+    for (const file of e.target.files) {
+      try {
+        // Read file as base64
+        const base64Content = await new Promise<string>((resolve) => {
+          const reader = new FileReader();
+          reader.onloadend = () => {
+            const base64 = reader.result as string;
+            resolve(base64.split(',')[1]); // Remove data URL prefix
+          };
+          reader.readAsDataURL(file);
+        });
+
+        newAttachments.push({
+          name: file.name,
+          type: file.type,
+          content: base64Content,
+          encoding: 'base64'
+        });
+      } catch (error) {
+        console.error('Error processing attachment:', error);
+      }
+    }
+
+    setAttachments([...attachments, ...newAttachments]);
+  };
+
+  // Add handleSend function for email composition
+  const handleSend = async () => {
+    if (!composeTo) {
+      alert('Please specify at least one recipient');
+      return;
+    }
+
+    try {
+      const response = await fetch('/api/mail/send', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          to: composeTo,
+          cc: composeCc,
+          bcc: composeBcc,
+          subject: composeSubject,
+          body: composeBody,
+          attachments: attachments
+        }),
+      });
+
+      if (!response.ok) {
+        throw new Error('Failed to send email');
+      }
+
+      // Clear compose form and close modal
+      setShowCompose(false);
+      setComposeTo('');
+      setComposeCc('');
+      setComposeBcc('');
+      setComposeSubject('');
+      setComposeBody('');
+      setAttachments([]);
+      setShowCc(false);
+      setShowBcc(false);
+
+      // Reload emails to show sent email
+      loadEmails();
+    } catch (error) {
+      console.error('Error sending email:', error);
+      alert('Failed to send email. Please try again.');
+    }
+  };
+
+  // Add toggleStarred function
+  const toggleStarred = async (emailId: number, e?: React.MouseEvent) => {
+    if (e) {
+      e.stopPropagation();
+    }
+
+    const email = emails.find(e => e.id === emailId);
+    if (!email) return;
+
+    try {
+      const response = await fetch('/api/mail/toggle-star', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ emailId, starred: !email.starred }),
+      });
+
+      if (!response.ok) {
+        throw new Error('Failed to toggle star');
+      }
+
+      // Update email in state
+      setEmails(emails.map(e => 
+        e.id === emailId ? { ...e, starred: !e.starred } : e
+      ));
+    } catch (error) {
+      console.error('Error toggling star:', error);
+    }
+  };
+
+  // Add handleReply function
+  const handleReply = (type: 'reply' | 'replyAll' | 'forward') => {
+    if (!selectedEmail) return;
+
+    const getReplySubject = () => {
+      const subject = selectedEmail.subject;
+      if (type === 'forward') {
+        return subject.startsWith('Fwd:') ? subject : `Fwd: ${subject}`;
+      }
+      return subject.startsWith('Re:') ? subject : `Re: ${subject}`;
+    };
+
+    const getReplyTo = () => {
+      switch (type) {
+        case 'reply':
+          return selectedEmail.from;
+        case 'replyAll':
+          // Combine from and cc, excluding current user's email
+          const addresses = new Set([selectedEmail.from, ...(selectedEmail.cc?.split(',') || [])]);
+          return Array.from(addresses).filter(addr => addr !== accounts[1]?.email).join(', ');
+        case 'forward':
+          return '';
+      }
+    };
+
+    const getReplyBody = () => {
+      const date = new Date(selectedEmail.date);
+      const formattedDate = date.toLocaleString();
+      const separator = '\n\n------------ Original Message ------------\n';
+      return `${separator}On ${formattedDate}, ${selectedEmail.from} wrote:\n${selectedEmail.body}`;
+    };
+
+    // Open compose modal with reply details
+    setShowCompose(true);
+    setComposeTo(getReplyTo());
+    setComposeSubject(getReplySubject());
+    setComposeBody(getReplyBody());
+    setComposeCc('');
+    setComposeBcc('');
+    setShowCc(false);
+    setShowBcc(false);
+    setAttachments([]);
+  };
+
   if (error) {
     return (
       <div className="flex h-[calc(100vh-theme(spacing.12))] items-center justify-center bg-gray-100 mt-12">