From 790e7ed9408c79a9f18024f91142bdf4027a26fb Mon Sep 17 00:00:00 2001
From: alma <alma@governance-labs.org>
Date: Tue, 15 Apr 2025 21:33:43 +0200
Subject: [PATCH] mail page imap connection 11

---
 app/mail/page.tsx | 217 ++++++++++++++++++++++++----------------------
 1 file changed, 113 insertions(+), 104 deletions(-)

diff --git a/app/mail/page.tsx b/app/mail/page.tsx
index 3191052..830c70d 100644
--- a/app/mail/page.tsx
+++ b/app/mail/page.tsx
@@ -41,22 +41,22 @@ interface Email {
   category: string;
 }
 
-// Add MIME decoding function
+// Update MIME decoding function for better formatting
 const decodeMimeContent = (content: string) => {
   try {
-    // Remove MIME headers
-    const contentWithoutHeaders = content.replace(/^.*?Content-Type:.*?\n\n/s, '');
-    
-    // Decode quoted-printable
-    const decoded = contentWithoutHeaders
+    // Remove MIME headers and metadata
+    const contentWithoutHeaders = content.replace(/^.*?Content-Type:.*?\n\n/s, '')
+      .replace(/---InfomaniakPhpMail.*?Content-Transfer-Encoding:.*?\n/g, '')
+      .replace(/=C2=A0/g, ' ') // Replace non-breaking spaces
       .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
+      .replace(/\[IMG:.*?\]/g, '') // Remove image placeholders
+      .replace(/\[LINK:\s*(.*?)\s*\]/g, '$1') // Clean up links
+      .replace(/\*([^*]+)\*/g, '$1') // Remove asterisks
+      .replace(/\s+/g, ' ') // Normalize whitespace
       .trim();
     
-    return decoded;
+    return contentWithoutHeaders;
   } catch (error) {
     console.error('Error decoding MIME content:', error);
     return content;
@@ -309,111 +309,120 @@ export default function MailPage() {
       {/* Sidebar */}
       <div className={`${sidebarOpen ? 'w-72' : 'w-20'} bg-white/95 backdrop-blur-sm border-0 shadow-lg flex flex-col transition-all duration-300 ease-in-out
                     ${mobileSidebarOpen ? 'fixed inset-y-0 left-0 z-40' : 'hidden'} md:block`}>
-        {/* Courrier Title */}
+        {/* Mail Title */}
         <div className="p-3 border-b border-gray-100">
           <div className="flex items-center gap-2">
-            <MessageSquare className="h-5 w-5 text-gray-600" />
-            <span className="font-semibold text-gray-900">Courrier</span>
+            <Mail className="h-5 w-5 text-gray-600" />
+            <span className="font-semibold text-gray-900">Mail</span>
           </div>
         </div>
 
-        {/* Accounts Section */}
-        <div className="p-3 border-b border-gray-100">
-          <div className="text-sm font-medium text-gray-500 mb-2">Accounts</div>
-          
-          {/* All Accounts Option */}
-          <Button
-            variant="ghost"
-            className="w-full justify-start px-2 py-1.5 text-sm mb-1"
-            onClick={() => setSelectedAccount(0)}
-          >
-            <div className="flex items-center gap-2 w-full">
-              <div className="w-2.5 h-2.5 rounded-full bg-gray-400"></div>
-              <span className="font-medium">All</span>
-            </div>
-          </Button>
-
-          {/* Mail Accounts List */}
-          {accounts.map(account => (
-            <div key={account.id} className="relative group">
-              <Button
-                variant="ghost"
-                className="w-full justify-between px-2 py-1.5 text-sm mb-1 group"
-                onClick={() => setSelectedAccount(account.id)}
-              >
-                <div className="flex items-center gap-2">
-                  <div className={`w-2.5 h-2.5 rounded-full ${account.color}`}></div>
-                  <span className="font-medium">{account.name}</span>
-                </div>
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  className="h-6 w-6 text-gray-400 opacity-0 group-hover:opacity-100 transition-opacity"
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    setShowAccountActions(account.id);
-                  }}
-                >
-                  <MoreVertical className="h-4 w-4" />
-                </Button>
-              </Button>
-
-              {/* Account Actions Dropdown */}
-              {showAccountActions === account.id && (
-                <div className="absolute right-0 mt-1 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 className="h-4 w-4 inline-block mr-2" />
-                    Modify 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);
-                    }}
-                  >
-                    <Trash2 className="h-4 w-4 inline-block mr-2" />
-                    Remove Account
-                  </button>
-                </div>
-              )}
-            </div>
-          ))}
-
-          {/* Add Account Button */}
-          <Button
-            variant="ghost"
-            className="w-full justify-start px-2 py-1.5 text-sm text-blue-600 hover:text-blue-700 hover:bg-blue-50"
-            onClick={handleAddAccount}
-          >
-            <Plus className="h-4 w-4 mr-2" />
-            Add Account
-          </Button>
-        </div>
-
         {/* Compose button */}
-        <Button 
-          className={`mx-3 mt-3 mb-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 flex items-center justify-center transition-all ${sidebarOpen ? 'py-2 px-4' : 'p-2'}`}
-          onClick={() => setComposeOpen(true)}
-        >
-          {sidebarOpen ? (
+        <div className="p-3 border-b border-gray-100">
+          <Button 
+            className="w-full bg-blue-600 text-white rounded-lg hover:bg-blue-700 flex items-center justify-center transition-all py-2"
+            onClick={() => setComposeOpen(true)}
+          >
             <div className="flex items-center">
               <PlusIcon className="h-4 w-4" />
               <span className="ml-2">Compose</span>
             </div>
-          ) : (
-            <PlusIcon className="h-4 w-4" />
+          </Button>
+        </div>
+
+        {/* Accounts Section */}
+        <div className="p-3 border-b border-gray-100">
+          <Button 
+            variant="ghost"
+            className="w-full justify-between mb-2 text-sm font-medium text-gray-500"
+            onClick={() => setAccountsDropdownOpen(!accountsDropdownOpen)}
+          >
+            <span>Accounts</span>
+            {accountsDropdownOpen ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
+          </Button>
+          
+          {accountsDropdownOpen && (
+            <div className="space-y-1 pl-2">
+              {/* All Accounts Option */}
+              <Button
+                variant="ghost"
+                className="w-full justify-start px-2 py-1.5 text-sm"
+                onClick={() => setSelectedAccount(0)}
+              >
+                <div className="flex items-center gap-2 w-full">
+                  <div className="w-2.5 h-2.5 rounded-full bg-gray-400"></div>
+                  <span className="font-medium">All</span>
+                </div>
+              </Button>
+
+              {/* Mail Accounts List */}
+              {accounts.map(account => (
+                <div key={account.id} className="relative group">
+                  <Button
+                    variant="ghost"
+                    className="w-full justify-between px-2 py-1.5 text-sm group"
+                    onClick={() => setSelectedAccount(account.id)}
+                  >
+                    <div className="flex items-center gap-2">
+                      <div className={`w-2.5 h-2.5 rounded-full ${account.color}`}></div>
+                      <span className="font-medium">{account.name}</span>
+                    </div>
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="h-6 w-6 text-gray-400 opacity-0 group-hover:opacity-100 transition-opacity"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        setShowAccountActions(account.id);
+                      }}
+                    >
+                      <MoreVertical className="h-4 w-4" />
+                    </Button>
+                  </Button>
+
+                  {/* Account Actions Dropdown */}
+                  {showAccountActions === account.id && (
+                    <div className="absolute right-0 mt-1 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 className="h-4 w-4 inline-block mr-2" />
+                        Modify 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);
+                        }}
+                      >
+                        <Trash2 className="h-4 w-4 inline-block mr-2" />
+                        Remove Account
+                      </button>
+                    </div>
+                  )}
+                </div>
+              ))}
+
+              {/* Add Account Button */}
+              <Button
+                variant="ghost"
+                className="w-full justify-start px-2 py-1.5 text-sm text-blue-600 hover:text-blue-700 hover:bg-blue-50"
+                onClick={handleAddAccount}
+              >
+                <Plus className="h-4 w-4 mr-2" />
+                Add Account
+              </Button>
+            </div>
           )}
-        </Button>
+        </div>
 
         {/* Navigation */}
         <nav className="flex-1 overflow-y-auto py-2">