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

---
 app/mail/page.tsx | 121 ++++++++++++++++++++++++++++++----------------
 1 file changed, 78 insertions(+), 43 deletions(-)

diff --git a/app/mail/page.tsx b/app/mail/page.tsx
index 7e8c055..3191052 100644
--- a/app/mail/page.tsx
+++ b/app/mail/page.tsx
@@ -18,7 +18,7 @@ import {
 } from "@/components/ui/alert-dialog";
 import { Avatar, AvatarFallback } from "@/components/ui/avatar";
 import { Label } from "@/components/ui/label";
-import { MoreVertical, Settings, Plus as PlusIcon, Trash2, Edit, Mail, Inbox, Send, Star, Trash, Plus, ChevronLeft, ChevronRight, Search, ChevronDown, Folder, ChevronUp, Reply, Forward, ReplyAll, MoreHorizontal, FolderOpen, X, Paperclip } from 'lucide-react';
+import { MoreVertical, Settings, Plus as PlusIcon, Trash2, Edit, Mail, Inbox, Send, Star, Trash, Plus, ChevronLeft, ChevronRight, Search, ChevronDown, Folder, ChevronUp, Reply, Forward, ReplyAll, MoreHorizontal, FolderOpen, X, Paperclip, MessageSquare } from 'lucide-react';
 
 interface Account {
   id: number;
@@ -309,60 +309,95 @@ 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`}>
-        {/* Mail Title and Account Selection */}
-        <div className="relative">
-          <div className="p-3 border-b border-gray-100">
-            <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>
+        {/* Courrier 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>
           </div>
+        </div>
 
-          {/* Accounts Dropdown */}
-          {accountsDropdownOpen && (
-            <div className="absolute top-full left-0 w-full bg-white border border-gray-100 shadow-lg rounded-b-lg z-50">
+        {/* 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-start px-4 py-2 text-sm"
-                onClick={() => {
-                  setSelectedAccount(0);
-                  setAccountsDropdownOpen(false);
-                }}
+                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 w-full">
-                  <div className="w-2.5 h-2.5 rounded-full bg-gray-400"></div>
-                  <span className="font-medium">All accounts</span>
+                <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>
-              {accounts.map(account => (
-                <div key={account.id} className="relative group">
-                  <Button
-                    variant="ghost"
-                    className="w-full justify-start px-4 py-2 text-sm"
+
+              {/* 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={() => {
-                      setSelectedAccount(account.id);
-                      setAccountsDropdownOpen(false);
+                      const newName = prompt('Enter new account name:', account.name);
+                      if (newName) handleEditAccount(account.id, newName);
+                      setShowAccountActions(null);
                     }}
                   >
-                    <div className="flex items-center gap-2 w-full">
-                      <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>
-                        <span className="text-xs text-gray-500">{account.email}</span>
-                      </div>
-                    </div>
-                  </Button>
+                    <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 */}