mail page imap connection 8

app/mail/page.tsx

@@ -41,10 +41,33 @@ interface Email {
   category: string;
 }
 
+// Add MIME decoding function
+const decodeMimeContent = (content: string) => {
+  try {
+    // Remove MIME headers
+    const contentWithoutHeaders = content.replace(/^.*?Content-Type:.*?\n\n/s, '');
+    
+    // Decode quoted-printable
+    const decoded = contentWithoutHeaders
+      .replace(/=\n/g, '') // Remove soft line breaks
+      .replace(/=([0-9A-F]{2})/g, (_, hex) => String.fromCharCode(parseInt(hex, 16)))
+      .replace(/=C2=A0/g, ' ') // Replace non-breaking spaces
+      .replace(/\[LINK: (.*?)\]/g, '$1') // Format links
+      .replace(/\[IMG: (.*?)\]/g, '') // Remove image placeholders
+      .trim();
+    
+    return decoded;
+  } catch (error) {
+    console.error('Error decoding MIME content:', error);
+    return content;
+  }
+};
+
 export default function MailPage() {
   // Single IMAP account for now
   const [accounts, setAccounts] = useState<Account[]>([
-    { id: 1, name: 'Work', email: 'contact@governance-labs.org', color: 'bg-blue-500' }
+    { id: 1, name: 'Mail', email: 'contact@governance-labs.org', color: 'bg-blue-500' },
+    { id: 2, name: 'Work', email: 'work@governance-labs.org', color: 'bg-green-500' }
   ]);
 
   // State declarations
@@ -234,6 +257,24 @@ export default function MailPage() {
     return emails.find(email => email.id === selectedEmail);
   };
 
+  // Add account management functions
+  const handleAddAccount = () => {
+    // Implementation for adding a new account
+  };
+
+  const handleRemoveAccount = (accountId: number) => {
+    setAccounts(accounts.filter(acc => acc.id !== accountId));
+    if (selectedAccount === accountId) {
+      setSelectedAccount(accounts[0].id);
+    }
+  };
+
+  const handleEditAccount = (accountId: number, newName: string) => {
+    setAccounts(accounts.map(acc => 
+      acc.id === accountId ? { ...acc, name: newName } : acc
+    ));
+  };
+
   if (loading) {
     return (
       <div className="flex h-[calc(100vh-theme(spacing.12))] items-center justify-center bg-gray-100 mt-12">
@@ -316,6 +357,33 @@ export default function MailPage() {
                       </div>
                     </div>
                   </Button>
+
+                  {/* Account Actions Dropdown */}
+                  {showAccountActions === account.id && (
+                    <div className="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-10">
+                      <button
+                        className="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
+                        onClick={() => {
+                          const newName = prompt('Enter new account name:', account.name);
+                          if (newName) handleEditAccount(account.id, newName);
+                          setShowAccountActions(null);
+                        }}
+                      >
+                        Edit Account
+                      </button>
+                      <button
+                        className="block w-full text-left px-4 py-2 text-sm text-red-600 hover:bg-gray-100"
+                        onClick={() => {
+                          setDeleteType('account');
+                          setItemToDelete(account.id);
+                          setShowDeleteConfirm(true);
+                          setShowAccountActions(null);
+                        }}
+                      >
+                        Remove Account
+                      </button>
+                    </div>
+                  )}
                 </div>
               ))}
             </div>
@@ -504,7 +572,7 @@ export default function MailPage() {
                       </Button>
                     </div>
                     <p className="text-sm text-gray-600 truncate">
-                      {email.body}
+                      {decodeMimeContent(email.body)}
                     </p>
                   </div>
                 </li>