mail page imap connection mime 4

app/mail/page.tsx

@@ -28,17 +28,18 @@ interface Account {
 }
 
 interface Email {
-  id: number;
+  id: string;
-  accountId: number;
+  accountId: string;
   from: string;
-  fromName: string;
+  fromName?: string;
   to: string;
   subject: string;
   body: string;
-  date: string;
+  preview: string;
+  category: string;
+  date: Date;
   read: boolean;
   starred: boolean;
-  category: string;
 }
 
 // Improved MIME Decoder Implementation for Infomaniak
@@ -319,6 +320,27 @@ function cleanHtml(html: string): string {
   if (!html) return '';
   
   return html
+    // Fix common Infomaniak-specific character encodings
+    .replace(/=C2=A0/g, ' ')  // non-breaking space
+    .replace(/=E2=80=93/g, '\u2013')  // en dash
+    .replace(/=E2=80=94/g, '\u2014')  // em dash
+    .replace(/=E2=80=98/g, '\u2018')  // left single quote
+    .replace(/=E2=80=99/g, '\u2019')  // right single quote
+    .replace(/=E2=80=9C/g, '\u201C')  // left double quote
+    .replace(/=E2=80=9D/g, '\u201D')  // right double quote
+    .replace(/=C3=A0/g, 'à')
+    .replace(/=C3=A2/g, 'â')
+    .replace(/=C3=A9/g, 'é')
+    .replace(/=C3=A8/g, 'è')
+    .replace(/=C3=AA/g, 'ê')
+    .replace(/=C3=AB/g, 'ë')
+    .replace(/=C3=B4/g, 'ô')
+    .replace(/=C3=B9/g, 'ù')
+    .replace(/=C3=BB/g, 'û')
+    .replace(/=C3=80/g, 'À')
+    .replace(/=C3=89/g, 'É')
+    .replace(/=C3=87/g, 'Ç')
+    // Clean up HTML entities
     .replace(/ç/g, 'ç')
     .replace(/é/g, 'é')
     .replace(/è/g, 'ë')
@@ -329,48 +351,38 @@ function cleanHtml(html: string): string {
     .replace(/\xA0/g, ' ');
 }
 
-// Update the decodeMimeContent function to use the new implementation
 function decodeMimeContent(content: string): string {
   if (!content) return '';
 
-  try {
+  // Check if this is an Infomaniak multipart message
-    // Handle the special case with InfomaniakPhpMail boundary
+  if (content.includes('Content-Type: multipart/')) {
-    if (content.includes('---InfomaniakPhpMail')) {
+    const boundary = content.match(/boundary="([^"]+)"/)?.[1];
-      const boundaryMatch = content.match(/---InfomaniakPhpMail[\w\d]+/);
+    if (boundary) {
-      if (boundaryMatch) {
+      const parts = content.split('--' + boundary);
-        const boundary = boundaryMatch[0];
+      let htmlContent = '';
-        const result = processMultipartEmail(content, boundary);
+      let textContent = '';
-        return result.html || result.text || content;
+
-      }
+      parts.forEach(part => {
+        if (part.includes('Content-Type: text/html')) {
+          const match = part.match(/\r?\n\r?\n([\s\S]+?)(?=\r?\n--)/);
+          if (match) {
+            htmlContent = cleanHtml(match[1]);
+          }
+        } else if (part.includes('Content-Type: text/plain')) {
+          const match = part.match(/\r?\n\r?\n([\s\S]+?)(?=\r?\n--)/);
+          if (match) {
+            textContent = cleanHtml(match[1]);
+          }
+        }
+      });
+
+      // Prefer HTML content if available
+      return htmlContent || textContent;
     }
-    
-    // Regular email parsing
-    const result = parseFullEmail(content);
-    if ('html' in result && result.html) {
-      return extractHtmlBody(result.html);
-    } else if ('text' in result && result.text) {
-      return result.text;
-    }
-    
-    // If parsing fails, try simple decoding
-    if (content.includes('Content-Type:') || content.includes('Content-Transfer-Encoding:')) {
-      const simpleDecoded = processSinglePartEmail(content);
-      return simpleDecoded.text || simpleDecoded.html || content;
-    }
-    
-    // Try to detect encoding and decode accordingly
-    if (content.includes('=?UTF-8?B?') || content.includes('=?utf-8?B?')) {
-      return decodeMIME(content, 'base64', 'utf-8');
-    } else if (content.includes('=?UTF-8?Q?') || content.includes('=?utf-8?Q?') || content.includes('=20')) {
-      return decodeMIME(content, 'quoted-printable', 'utf-8');
-    }
-    
-    // If nothing else worked, return the original content
-    return content;
-  } catch (error) {
-    console.error('Error decoding email content:', error);
-    return content;
   }
+
+  // If not multipart or no boundary found, clean the content directly
+  return cleanHtml(content);
 }
 
 export default function MailPage() {
@@ -383,7 +395,7 @@ export default function MailPage() {
   // State declarations
   const [selectedAccount, setSelectedAccount] = useState(1);
   const [currentView, setCurrentView] = useState('inbox');
-  const [selectedEmail, setSelectedEmail] = useState<number | null>(null);
+  const [selectedEmail, setSelectedEmail] = useState<Email | null>(null);
   const [sidebarOpen, setSidebarOpen] = useState(true);
   const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
   const [composeOpen, setComposeOpen] = useState(false);
@@ -391,7 +403,7 @@ export default function MailPage() {
   const [foldersDropdownOpen, setFoldersDropdownOpen] = useState(false);
   const [showAccountActions, setShowAccountActions] = useState<number | null>(null);
   const [showEmailActions, setShowEmailActions] = useState(false);
-  const [selectedEmails, setSelectedEmails] = useState<number[]>([]);
+  const [selectedEmails, setSelectedEmails] = useState<string[]>([]);
   const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
   const [deleteType, setDeleteType] = useState<'email' | 'emails' | 'account'>('email');
   const [itemToDelete, setItemToDelete] = useState<number | null>(null);
@@ -399,37 +411,29 @@ export default function MailPage() {
   const [showCc, setShowCc] = useState(false);
   const [showBcc, setShowBcc] = useState(false);
   const [emails, setEmails] = useState<Email[]>([]);
-  const [loading, setLoading] = useState(true);
+  const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [composeSubject, setComposeSubject] = useState('');
   const [composeRecipient, setComposeRecipient] = useState('');
   const [composeContent, setComposeContent] = useState('');
 
   // Fetch emails from IMAP API
-  useEffect(() => {
+  const loadEmails = async () => {
-    async function fetchEmails() {
+    setLoading(true);
-      try {
+    setError(null);
-        setError(null);
+    try {
-        setLoading(true);
+      const response = await fetch('/api/mail');
-        const res = await fetch('/api/mail');
+      if (!response.ok) {
-        if (!res.ok) {
+        throw new Error('Failed to fetch emails');
-          throw new Error('Failed to fetch emails');
-        }
-        const data = await res.json();
-        if (data.error) {
-          throw new Error(data.error);
-        }
-        setEmails(data.messages || []);
-      } catch (error) {
-        console.error('Error fetching emails:', error);
-        setError('Unable to load emails. Please try again later.');
-      } finally {
-        setLoading(false);
       }
+      const data = await response.json();
+      setEmails(data);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'An error occurred');
+    } finally {
+      setLoading(false);
     }
-
+  };
-    fetchEmails();
-  }, [currentView]);
 
   // Mock folders data
   const folders = [
@@ -445,11 +449,23 @@ export default function MailPage() {
     ...accounts
   ];
 
-  // Filter emails based on selected account and view
+  // Filter emails based on current view
-  const filteredEmails = emails.filter(email => 
+  const filteredEmails = emails.filter(email => {
-    (selectedAccount === 0 || email.accountId === selectedAccount) && 
+    if (selectedAccount !== 'all' && email.accountId !== selectedAccount) {
-    (currentView === 'starred' ? email.starred : email.category === currentView)
+      return false;
-  );
+    }
+    
+    switch (currentView) {
+      case 'starred':
+        return email.starred;
+      case 'sent':
+        return email.category === 'sent';
+      case 'trash':
+        return email.category === 'trash';
+      default:
+        return email.category === 'inbox';
+    }
+  });
 
   // Format date for display
   const formatDate = (dateString: string) => {
@@ -470,17 +486,12 @@ export default function MailPage() {
   };
 
   // Update email click handler to work without mark-read endpoint
-  const handleEmailClick = (emailId: number) => {
+  const handleEmailSelect = (email: Email) => {
-    // Since the mark-read endpoint is not available, just update the UI
+    setSelectedEmail(selectedEmail?.id === email.id ? null : email);
-    const updatedEmails = emails.map(email => 
-      email.id === emailId ? { ...email, read: true } : email
-    );
-    setEmails(updatedEmails);
-    setSelectedEmail(emailId);
   };
 
   // Toggle starred status
-  const toggleStarred = async (emailId: number, e: React.MouseEvent) => {
+  const toggleStarred = async (emailId: string, e: React.MouseEvent) => {
     e.stopPropagation();
     
     // Toggle star in IMAP
@@ -501,7 +512,7 @@ export default function MailPage() {
   };
 
   // Handle bulk selection
-  const toggleEmailSelection = (emailId: number, e: React.MouseEvent) => {
+  const toggleEmailSelection = (emailId: string, e: React.MouseEvent) => {
     e.stopPropagation();
     setSelectedEmails(prev => 
       prev.includes(emailId) 
@@ -608,6 +619,66 @@ export default function MailPage() {
     setComposeContent(content);
   };
 
+  const handleEmailCheckbox = (e: React.ChangeEvent<HTMLInputElement>, emailId: string) => {
+    e.stopPropagation();
+    if (e.target.checked) {
+      setSelectedEmails([...selectedEmails, emailId]);
+    } else {
+      setSelectedEmails(selectedEmails.filter(id => id !== emailId));
+    }
+  };
+
+  // Update the mock data with all required properties
+  const mockEmails: Email[] = [
+    {
+      id: "1",
+      accountId: "1",
+      from: "john@example.com",
+      fromName: "John Doe",
+      to: "me@example.com",
+      subject: "Hello",
+      body: "This is a test email",
+      preview: "This is a test email",
+      category: "inbox",
+      date: new Date(),
+      read: false,
+      starred: false
+    }
+  ];
+
+  // Update the email action handlers to use string IDs
+  const handleMarkAsRead = (emailId: string, isRead: boolean) => {
+    setEmails(emails.map(email => 
+      email.id === emailId ? { ...email, read: isRead } : email
+    ));
+  };
+
+  const handleDeleteEmail = (emailId: string) => {
+    setEmails(emails.filter(email => email.id !== emailId));
+    setSelectedEmails(selectedEmails.filter(id => id !== emailId));
+  };
+
+  // Update the bulk action handlers
+  const handleBulkAction = (action: 'delete' | 'mark-read' | 'mark-unread') => {
+    selectedEmails.forEach(emailId => {
+      const email = emails.find(e => e.id === emailId);
+      if (email) {
+        switch (action) {
+          case 'delete':
+            handleDeleteEmail(emailId);
+            break;
+          case 'mark-read':
+            handleMarkAsRead(emailId, true);
+            break;
+          case 'mark-unread':
+            handleMarkAsRead(emailId, false);
+            break;
+        }
+      }
+    });
+    setSelectedEmails([]);
+  };
+
   if (loading) {
     return (
       <div className="flex h-[calc(100vh-theme(spacing.12))] items-center justify-center bg-gray-100 mt-12">
@@ -898,347 +969,82 @@ export default function MailPage() {
           )}
 
           {/* Email List */}
-          {filteredEmails.length > 0 ? (
+          <div className="flex flex-col flex-1 overflow-hidden">
-            <ul>
+            <div className="flex-1 overflow-auto">
-              {filteredEmails.map(email => (
+              {loading ? (
-                <li 
+                <div className="flex items-center justify-center h-full">
-                  key={email.id}
+                  <div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-blue-500"></div>
-                  className={`border-b border-gray-100 cursor-pointer ${email.read ? 'bg-white/95' : 'bg-blue-50/95'} hover:bg-gray-50/95`}
+                  <span className="ml-3 text-gray-600">Loading emails...</span>
-                  onClick={() => handleEmailClick(email.id)}
-                >
-                  <div className="p-4">
-                    <div className="flex justify-between items-start mb-1">
-                      <div className="flex items-center gap-3">
-                        <Checkbox
-                          checked={selectedEmails.includes(email.id)}
-                          onClick={(e) => toggleEmailSelection(email.id, e)}
-                        />
-                        <div className="flex items-center">
-                          <div className={`w-2 h-2 rounded-full ${!email.read ? 'bg-blue-600' : 'bg-transparent'} mr-2`}></div>
-                          <span className={`font-medium ${!email.read ? 'font-semibold' : ''} text-gray-900`}>{email.fromName}</span>
-                        </div>
-                      </div>
-                      <div className="text-xs text-gray-500">{formatDate(email.date)}</div>
-                    </div>
-                    <div className="flex justify-between items-center mb-1">
-                      <h3 className={`${!email.read ? 'font-semibold' : ''} text-gray-800`}>{email.subject}</h3>
-                      <Button 
-                        variant="ghost"
-                        size="sm"
-                        className="text-gray-400 hover:text-yellow-500"
-                        onClick={(e) => toggleStarred(email.id, e)}
-                      >
-                        <Star className="h-4 w-4" fill={email.starred ? 'currentColor' : 'none'} color={email.starred ? '#F59E0B' : 'currentColor'} />
-                      </Button>
-                    </div>
-                    <p className="text-sm text-gray-600 truncate">
-                      {decodeMimeContent(email.body)}
-                    </p>
-                  </div>
-                </li>
-              ))}
-            </ul>
-          ) : (
-            <div className="flex flex-col items-center justify-center h-64 text-gray-500">
-              <Mail className="h-12 w-12 mb-4 opacity-30" />
-              <p>No emails in this folder</p>
-            </div>
-          )}
-        </div>
-
-        {/* Email detail view */}
-        <div className="flex-1 overflow-y-auto bg-white">
-          {selectedEmail ? (
-            <div className="h-full flex flex-col">
-              {/* Email actions header */}
-              <div className="p-4 border-b border-gray-100 flex items-center justify-between">
-                <div className="flex items-center gap-2">
-                  <Button
-                    variant="ghost"
-                    size="sm"
-                    className="text-gray-700 hover:bg-gray-100 hover:text-gray-900"
-                    onClick={() => handleReply('reply')}
-                  >
-                    <Reply className="h-4 w-4 mr-2" />
-                    Reply
-                  </Button>
-                  <Button
-                    variant="ghost"
-                    size="sm"
-                    className="text-gray-700 hover:bg-gray-100 hover:text-gray-900"
-                    onClick={() => handleReply('replyAll')}
-                  >
-                    <ReplyAll className="h-4 w-4 mr-2" />
-                    Reply all
-                  </Button>
-                  <Button
-                    variant="ghost"
-                    size="sm"
-                    className="text-gray-700 hover:bg-gray-100 hover:text-gray-900"
-                    onClick={() => handleReply('forward')}
-                  >
-                    <Forward className="h-4 w-4 mr-2" />
-                    Forward
-                  </Button>
                 </div>
-                <div className="flex items-center gap-2">
+              ) : error ? (
-                  <Button
+                <div className="flex flex-col items-center justify-center h-full">
-                    variant="ghost"
+                  <div className="text-red-500 mb-4">Error loading emails</div>
-                    size="icon"
+                  <button
-                    className="text-gray-500 hover:text-gray-700"
+                    onClick={() => loadEmails()}
-                    onClick={() => setShowEmailActions(!showEmailActions)}
+                    className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
                   >
-                    <MoreHorizontal className="h-4 w-4" />
+                    Try Again
-                  </Button>
+                  </button>
                 </div>
-              </div>
+              ) : emails.length === 0 ? (
-
+                <div className="flex flex-col items-center justify-center h-full">
-              {/* Email content */}
+                  <div className="text-gray-500 mb-4">No emails found</div>
-              <div className="flex-1 p-6">
+                </div>
-                <div className="max-w-3xl mx-auto">
+              ) : (
-                  {getSelectedEmail() && (
+                <ul className="divide-y divide-gray-200">
-                    <>
+                  {filteredEmails.map((email) => (
-                      <div className="mb-6">
+                    <li
-                        <div className="flex justify-between items-center mb-4">
+                      key={email.id}
-                          <h1 className="text-xl font-bold">{getSelectedEmail()?.subject}</h1>
+                      className={`flex items-center p-4 hover:bg-gray-50 cursor-pointer ${
-                          <Button 
+                        selectedEmail?.id === email.id ? 'bg-blue-50' : ''
-                            variant="ghost"
+                      }`}
-                            size="sm"
+                      onClick={() => handleEmailSelect(email)}
-                            className="text-gray-400 hover:text-yellow-400"
+                    >
-                            onClick={(e) => getSelectedEmail() && toggleStarred(getSelectedEmail()!.id, e)}
+                      <div className="flex-1 min-w-0">
-                          >
+                        <div className="flex items-center justify-between">
-                            <Star className="h-5 w-5" fill={getSelectedEmail()?.starred ? 'currentColor' : 'none'} />
+                          <div className="flex items-center space-x-4">
-                          </Button>
+                            <input
-                        </div>
+                              type="checkbox"
-                        
+                              checked={selectedEmails.includes(email.id)}
-                        <div className="flex items-center">
+                              onChange={(e) => handleEmailCheckbox(e, email.id)}
-                          <Avatar>
+                              onClick={(e) => e.stopPropagation()}
-                            <AvatarFallback className={`${getAccountColor(getSelectedEmail()!.accountId)}`}>
+                              className="h-4 w-4 text-blue-600"
-                              {getSelectedEmail()?.fromName.charAt(0)}
+                            />
-                            </AvatarFallback>
+                            <div className="min-w-0">
-                          </Avatar>
+                              <p className="text-sm font-medium text-gray-900 truncate">
-                          <div className="ml-3">
+                                {email.fromName || email.from}
-                            <div className="font-medium">{getSelectedEmail()?.fromName}</div>
+                              </p>
-                            <div className="text-sm text-gray-500 flex items-center">
+                              <p className="text-sm text-gray-500 truncate">{email.subject}</p>
-                              <span>{getSelectedEmail()?.from}</span>
-                              <span className="mx-2">•</span>
-                              <span>{new Date(getSelectedEmail()!.date).toLocaleString([], { dateStyle: 'medium', timeStyle: 'short' })}</span>
                             </div>
                           </div>
+                          <div className="flex items-center space-x-2">
+                            <span className="text-sm text-gray-500">
+                              {formatDate(email.date.toISOString())}
+                            </span>
+                            <button
+                              onClick={(e) => {
+                                e.stopPropagation();
+                                toggleStarred(email.id, e);
+                              }}
+                              className="text-gray-400 hover:text-yellow-400"
+                            >
+                              {email.starred ? (
+                                <Star className="h-5 w-5 text-yellow-400" />
+                              ) : (
+                                <Star className="h-5 w-5" />
+                              )}
+                            </button>
+                          </div>
                         </div>
                       </div>
-                      
+                    </li>
-                      <div className="border-t border-gray-200 pt-6 prose max-w-none">
+                  ))}
-                        <p className="whitespace-pre-wrap">{decodeMimeContent(getSelectedEmail()?.body || '')}</p>
+                </ul>
-                      </div>
+              )}
-                    </>
-                  )}
-                </div>
-              </div>
             </div>
-          ) : (
+          </div>
-            <div className="h-full flex items-center justify-center">
-              <div className="text-center">
-                <Mail className="h-16 w-16 mx-auto mb-4 text-gray-300" />
-                <p className="text-gray-500">No email selected</p>
-                <p className="text-sm text-gray-400">Choose an email from the list to read its contents</p>
-              </div>
-            </div>
-          )}
         </div>
       </div>
-
-      {/* Compose email modal */}
-      {composeOpen && (
-        <div className="fixed inset-0 bg-black/25 backdrop-blur-sm flex items-center justify-center p-4 z-50">
-          <Card className="w-full max-w-2xl bg-white max-h-[90vh] flex flex-col">
-            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2 border-b">
-              <CardTitle className="text-xl">New Message</CardTitle>
-              <Button 
-                variant="ghost"
-                size="icon"
-                className="text-gray-500 hover:text-gray-700"
-                onClick={() => setComposeOpen(false)}
-              >
-                <X className="h-4 w-4" />
-              </Button>
-            </CardHeader>
-            <CardContent className="space-y-3 overflow-y-auto flex-1 pt-2">
-              <div className="space-y-2 border-b border-gray-100 pb-3">
-                <div>
-                  <Label className="text-sm text-gray-700 mb-0.5">From</Label>
-                  <select className="w-full bg-white border border-gray-200 rounded-lg px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
-                    {accounts.map(account => (
-                      <option key={account.id} value={account.id}>
-                        {account.name} ({account.email})
-                      </option>
-                    ))}
-                  </select>
-                </div>
-                <div>
-                  <div className="flex items-center justify-between mb-0.5">
-                    <Label className="text-sm text-gray-700">To</Label>
-                    <div className="flex items-center gap-2">
-                      {!showCc && (
-                        <Button
-                          variant="ghost"
-                          size="sm"
-                          className="h-6 text-xs text-gray-500 hover:text-gray-700"
-                          onClick={() => setShowCc(true)}
-                        >
-                          Add Cc
-                        </Button>
-                      )}
-                      {!showBcc && (
-                        <Button
-                          variant="ghost"
-                          size="sm"
-                          className="h-6 text-xs text-gray-500 hover:text-gray-700"
-                          onClick={() => setShowBcc(true)}
-                        >
-                          Add Bcc
-                        </Button>
-                      )}
-                    </div>
-                  </div>
-                  <Input 
-                    type="email" 
-                    placeholder="email@example.com" 
-                    value={composeRecipient}
-                    onChange={(e) => setComposeRecipient(e.target.value)}
-                    className="bg-white border-gray-200 py-1.5"
-                  />
-                </div>
-                {showCc && (
-                  <div>
-                    <div className="flex items-center justify-between mb-0.5">
-                      <Label className="text-sm text-gray-700">Cc</Label>
-                      <Button
-                        variant="ghost"
-                        size="sm"
-                        className="h-6 text-xs text-gray-500 hover:text-gray-700"
-                        onClick={() => setShowCc(false)}
-                      >
-                        Remove
-                      </Button>
-                    </div>
-                    <Input 
-                      type="email" 
-                      placeholder="cc@example.com" 
-                      className="bg-white border-gray-200 py-1.5"
-                    />
-                  </div>
-                )}
-                {showBcc && (
-                  <div>
-                    <div className="flex items-center justify-between mb-0.5">
-                      <Label className="text-sm text-gray-700">Bcc</Label>
-                      <Button
-                        variant="ghost"
-                        size="sm"
-                        className="h-6 text-xs text-gray-500 hover:text-gray-700"
-                        onClick={() => setShowBcc(false)}
-                      >
-                        Remove
-                      </Button>
-                    </div>
-                    <Input 
-                      type="email" 
-                      placeholder="bcc@example.com" 
-                      className="bg-white border-gray-200 py-1.5"
-                    />
-                  </div>
-                )}
-                <div>
-                  <Label className="text-sm text-gray-700 mb-0.5">Subject</Label>
-                  <Input 
-                    type="text" 
-                    placeholder="Subject" 
-                    value={composeSubject}
-                    onChange={(e) => setComposeSubject(e.target.value)}
-                    className="bg-white border-gray-200 py-1.5"
-                  />
-                </div>
-              </div>
-
-              <div className="flex-1">
-                <Label className="text-sm text-gray-700 mb-0.5">Message</Label>
-                <Textarea 
-                  className="mt-0.5 h-[calc(100%-1.5rem)] min-h-[200px] bg-white border-gray-200 resize-none"
-                  placeholder="Write your message here..."
-                  value={composeContent}
-                  onChange={(e) => setComposeContent(e.target.value)}
-                />
-              </div>
-
-              {/* File Attachment Section */}
-              <div className="border-t border-gray-100 pt-3">
-                <div className="flex items-center gap-4">
-                  <Button
-                    variant="ghost"
-                    size="sm"
-                    className="border border-gray-200 text-blue-600 hover:bg-blue-50 hover:text-blue-700"
-                    onClick={() => document.getElementById('file-upload')?.click()}
-                  >
-                    <Paperclip className="h-4 w-4 mr-2" />
-                    Attach files
-                  </Button>
-                  <span className="text-xs text-gray-500">Maximum file size: 25 MB</span>
-                </div>
-                <input
-                  type="file"
-                  id="file-upload"
-                  multiple
-                  className="hidden"
-                  onChange={(e) => {
-                    // Handle file upload
-                    console.log(e.target.files);
-                  }}
-                />
-              </div>
-
-              <div className="flex justify-end gap-3 pt-3 border-t border-gray-100">
-                <Button 
-                  variant="ghost"
-                  className="border border-gray-200 text-blue-600 hover:bg-blue-50 hover:text-blue-700"
-                  onClick={() => setComposeOpen(false)}
-                >
-                  Cancel
-                </Button>
-                <Button 
-                  className="bg-blue-600 text-white hover:bg-blue-700"
-                  onClick={() => setComposeOpen(false)}
-                >
-                  Send
-                </Button>
-              </div>
-            </CardContent>
-          </Card>
-        </div>
-      )}
-
-      {/* Delete Confirmation Dialog */}
-      <AlertDialog open={showDeleteConfirm} onOpenChange={setShowDeleteConfirm}>
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>Are you sure?</AlertDialogTitle>
-            <AlertDialogDescription>
-              {deleteType === 'email' && "This email will be moved to trash."}
-              {deleteType === 'emails' && `${selectedEmails.length} emails will be moved to trash.`}
-              {deleteType === 'account' && "This account will be permanently removed. This action cannot be undone."}
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel onClick={() => setShowDeleteConfirm(false)}>Cancel</AlertDialogCancel>
-            <AlertDialogAction
-              className={deleteType === 'account' ? 'bg-red-600 hover:bg-red-700' : ''}
-              onClick={handleDeleteConfirm}
-            >
-              {deleteType === 'account' ? 'Delete Account' : 'Move to Trash'}
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
     </div>
   );
 }