From f00f56c18b20d71d59214aecc62fc6676f7369c9 Mon Sep 17 00:00:00 2001
From: alma <alma@governance-labs.org>
Date: Tue, 15 Apr 2025 21:23:28 +0200
Subject: [PATCH] mail page imap connection 9

---
 app/mail/page.tsx | 81 ++++++++++++++++-------------------------------
 1 file changed, 28 insertions(+), 53 deletions(-)

diff --git a/app/mail/page.tsx b/app/mail/page.tsx
index 43e25b8..7e8c055 100644
--- a/app/mail/page.tsx
+++ b/app/mail/page.tsx
@@ -309,37 +309,39 @@ 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`}>
-        {/* Account Selection */}
+        {/* Mail Title and Account Selection */}
         <div className="relative">
           <div className="p-3 border-b border-gray-100">
-            {sidebarOpen ? (
-              <Button 
-                variant="ghost"
-                className="w-full justify-between text-gray-600 hover:text-gray-900"
-                onClick={() => setAccountsDropdownOpen(!accountsDropdownOpen)}
-              >
-                <div className="flex items-center gap-2">
-                  <div className={`w-2.5 h-2.5 rounded-full ${getAccountColor(selectedAccount)}`}></div>
-                  <span>{accounts.find(acc => acc.id === selectedAccount)?.name || 'All accounts'}</span>
-                </div>
-                {accountsDropdownOpen ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
-              </Button>
-            ) : (
-              <Button
-                variant="ghost"
-                size="icon"
-                className="w-full aspect-square"
-                onClick={() => setAccountsDropdownOpen(!accountsDropdownOpen)}
-              >
-                <div className={`w-2.5 h-2.5 rounded-full ${getAccountColor(selectedAccount)}`}></div>
-              </Button>
-            )}
+            <Button 
+              variant="ghost"
+              className="w-full justify-between text-gray-900 hover:text-gray-900 font-semibold"
+              onClick={() => setAccountsDropdownOpen(!accountsDropdownOpen)}
+            >
+              <div className="flex items-center gap-2">
+                <div className={`w-2.5 h-2.5 rounded-full bg-blue-600`}></div>
+                <span>Mail</span>
+              </div>
+              <ChevronDown className="h-4 w-4" />
+            </Button>
           </div>
 
           {/* Accounts Dropdown */}
-          {accountsDropdownOpen && sidebarOpen && (
+          {accountsDropdownOpen && (
             <div className="absolute top-full left-0 w-full bg-white border border-gray-100 shadow-lg rounded-b-lg z-50">
-              {allAccounts.map(account => (
+              <Button
+                variant="ghost"
+                className="w-full justify-start px-4 py-2 text-sm"
+                onClick={() => {
+                  setSelectedAccount(0);
+                  setAccountsDropdownOpen(false);
+                }}
+              >
+                <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 accounts</span>
+                </div>
+              </Button>
+              {accounts.map(account => (
                 <div key={account.id} className="relative group">
                   <Button
                     variant="ghost"
@@ -353,37 +355,10 @@ export default function MailPage() {
                       <div className={`w-2.5 h-2.5 rounded-full ${account.color}`}></div>
                       <div className="flex flex-col items-start flex-1">
                         <span className="font-medium">{account.name}</span>
-                        {account.email && <span className="text-xs text-gray-500">{account.email}</span>}
+                        <span className="text-xs text-gray-500">{account.email}</span>
                       </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>