From 49b084808babae32631a40a33f58ad1d3200f16f Mon Sep 17 00:00:00 2001
From: alma <alma@governance-labs.org>
Date: Wed, 16 Apr 2025 13:40:06 +0200
Subject: [PATCH] mail page ui correction maj compose 19

---
 app/mail/page.tsx | 117 ++++++++--------------------------------------
 1 file changed, 19 insertions(+), 98 deletions(-)

diff --git a/app/mail/page.tsx b/app/mail/page.tsx
index a9ca033..e766da1 100644
--- a/app/mail/page.tsx
+++ b/app/mail/page.tsx
@@ -913,24 +913,14 @@ export default function MailPage() {
     <>
       {/* Main layout */}
       <div className="flex h-[calc(100vh-theme(spacing.12))] bg-gray-50 text-gray-900 overflow-hidden mt-12">
-        {/* Sidebar - make it narrower */}
+        {/* Sidebar */}
         <div className={`${sidebarOpen ? 'w-60' : 'w-16'} bg-white/95 backdrop-blur-sm border-r border-gray-100 flex flex-col transition-all duration-300 ease-in-out
                       ${mobileSidebarOpen ? 'fixed inset-y-0 left-0 z-40' : 'hidden'} md:block`}>
           {/* Courrier Title */}
           <div className="p-3 border-b border-gray-100">
-            <div className="flex items-center justify-between">
-              <div className="flex items-center gap-2">
-                <Mail className="h-6 w-6 text-blue-600" />
-                <span className="text-xl font-semibold text-gray-900">COURRIER</span>
-              </div>
-              <Button
-                variant="ghost"
-                size="icon"
-                className="md:hidden"
-                onClick={() => setSidebarOpen(!sidebarOpen)}
-              >
-                {sidebarOpen ? <ChevronLeft className="h-5 w-5" /> : <ChevronRight className="h-5 w-5" />}
-              </Button>
+            <div className="flex items-center gap-2">
+              <Mail className="h-6 w-6 text-gray-600" />
+              <span className="text-xl font-semibold text-gray-900">COURRIER</span>
             </div>
           </div>
 
@@ -970,68 +960,29 @@ export default function MailPage() {
             {accountsDropdownOpen && (
               <div className="space-y-1 pl-2">
                 {accounts.map(account => (
-                  <Button
-                    key={account.id}
-                    variant="ghost"
-                    className="w-full justify-start px-2 py-1.5 text-sm"
-                    onClick={() => setSelectedAccount(account)}
-                  >
-                    <div className="flex items-center gap-2 w-full">
-                      <div className={`w-2.5 h-2.5 rounded-full ${account.color}`}></div>
-                      <span className="font-medium">{account.name}</span>
-                      {account.id !== 0 && (
-                        <span className="text-xs text-gray-500 truncate">{account.email}</span>
-                      )}
-                    </div>
-                  </Button>
+                  <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)}
+                    >
+                      <div className="flex flex-col items-start">
+                        <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>
+                        <span className="text-xs text-gray-500 ml-4">{account.email}</span>
+                      </div>
+                    </Button>
+                  </div>
                 ))}
               </div>
             )}
           </div>
 
-          {/* Folder Management 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={() => setFoldersDropdownOpen(!foldersDropdownOpen)}
-            >
-              <div className="flex items-center gap-2">
-                <Folder className="h-4 w-4" />
-                <span>Folders</span>
-              </div>
-              {foldersDropdownOpen ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
-            </Button>
-            
-            {foldersDropdownOpen && (
-              <div className="space-y-1 pl-2">
-                {folders.map((folder) => (
-                  <Button
-                    key={folder}
-                    variant="ghost"
-                    className="w-full justify-start px-2 py-1.5 text-sm"
-                    onClick={() => setCurrentView(folder)}
-                  >
-                    <FolderOpen className="h-4 w-4 mr-2" />
-                    <span>{folder}</span>
-                  </Button>
-                ))}
-                <Button
-                  variant="ghost"
-                  className="w-full justify-start px-2 py-1.5 text-sm text-blue-600"
-                  onClick={() => {/* Add new folder logic */}}
-                >
-                  <Plus className="h-4 w-4 mr-2" />
-                  <span>New Folder</span>
-                </Button>
-              </div>
-            )}
-          </div>
-
           {/* Navigation */}
           <nav className="p-3">
             <ul className="space-y-0.5 px-2">
-              {/* Standard navigation items */}
               <li>
                 <Button 
                   variant={currentView === 'inbox' ? 'secondary' : 'ghost'}
@@ -1077,36 +1028,6 @@ export default function MailPage() {
                   <span>Trash</span>
                 </Button>
               </li>
-
-              {/* Folders section - moved below Trash */}
-              <li className="mt-4">
-                <Button 
-                  variant="ghost"
-                  className="w-full justify-between text-sm font-medium text-gray-500"
-                  onClick={() => setFoldersDropdownOpen(!foldersDropdownOpen)}
-                >
-                  <div className="flex items-center">
-                    <Folder className="h-4 w-4 mr-2" />
-                    <span>Folders</span>
-                  </div>
-                  {foldersDropdownOpen ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
-                </Button>
-                
-                {foldersDropdownOpen && (
-                  <div className="mt-1 space-y-1 pl-6">
-                    {folders.map((folder) => (
-                      <Button
-                        key={folder}
-                        variant="ghost"
-                        className={`w-full justify-start py-1.5 text-sm ${currentView === folder ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:text-gray-900'}`}
-                        onClick={() => {setCurrentView(folder); setSelectedEmail(null);}}
-                      >
-                        <span>{folder}</span>
-                      </Button>
-                    ))}
-                  </div>
-                )}
-              </li>
             </ul>
           </nav>
         </div>