From 11e756fc9d02b569b37a1a5bb44ee47f94b79863 Mon Sep 17 00:00:00 2001
From: alma <alma@governance-labs.org>
Date: Wed, 16 Apr 2025 13:29:58 +0200
Subject: [PATCH] mail page ui correction maj compose 17

---
 app/mail/page.tsx | 179 +++++++++++++++++++++++-----------------------
 1 file changed, 89 insertions(+), 90 deletions(-)

diff --git a/app/mail/page.tsx b/app/mail/page.tsx
index e790e83..524e0c4 100644
--- a/app/mail/page.tsx
+++ b/app/mail/page.tsx
@@ -911,9 +911,9 @@ export default function MailPage() {
 
   return (
     <div className="flex h-[calc(100vh-theme(spacing.12))] bg-gray-50 text-gray-900 overflow-hidden mt-12">
-      {/* 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
-                    ${foldersOpen ? 'fixed inset-y-0 left-0 z-40' : 'hidden'} md:block`}>
+      {/* Sidebar - make it narrower */}
+      <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">
@@ -1027,13 +1027,13 @@ export default function MailPage() {
         </div>
 
         {/* Navigation */}
-        <nav className="flex-1 overflow-y-auto p-3">
-          <ul className="space-y-1">
-            {/* Standard folders */}
+        <nav className="p-3">
+          <ul className="space-y-0.5 px-2">
+            {/* Standard navigation items */}
             <li>
               <Button 
                 variant={currentView === 'inbox' ? 'secondary' : 'ghost'}
-                className="w-full justify-start"
+                className={`w-full justify-start py-2 ${currentView === 'inbox' ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:text-gray-900'}`}
                 onClick={() => {setCurrentView('inbox'); setSelectedEmail(null);}}
               >
                 <Inbox className="h-4 w-4 mr-2" />
@@ -1048,7 +1048,7 @@ export default function MailPage() {
             <li>
               <Button 
                 variant={currentView === 'starred' ? 'secondary' : 'ghost'}
-                className="w-full justify-start"
+                className={`w-full justify-start py-2 ${currentView === 'starred' ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:text-gray-900'}`}
                 onClick={() => {setCurrentView('starred'); setSelectedEmail(null);}}
               >
                 <Star className="h-4 w-4 mr-2" />
@@ -1058,7 +1058,7 @@ export default function MailPage() {
             <li>
               <Button 
                 variant={currentView === 'sent' ? 'secondary' : 'ghost'}
-                className="w-full justify-start"
+                className={`w-full justify-start py-2 ${currentView === 'sent' ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:text-gray-900'}`}
                 onClick={() => {setCurrentView('sent'); setSelectedEmail(null);}}
               >
                 <Send className="h-4 w-4 mr-2" />
@@ -1068,7 +1068,7 @@ export default function MailPage() {
             <li>
               <Button 
                 variant={currentView === 'trash' ? 'secondary' : 'ghost'}
-                className="w-full justify-start"
+                className={`w-full justify-start py-2 ${currentView === 'trash' ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:text-gray-900'}`}
                 onClick={() => {setCurrentView('trash'); setSelectedEmail(null);}}
               >
                 <Trash className="h-4 w-4 mr-2" />
@@ -1076,89 +1076,79 @@ export default function MailPage() {
               </Button>
             </li>
 
-            {/* Account-specific folders */}
-            {selectedAccount && selectedAccount.id !== 0 && folders.length > 0 && (
-              <>
-                <li className="mt-4">
-                  <Button 
-                    variant="ghost"
-                    className="w-full justify-between"
-                    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>
-                </li>
-                {foldersDropdownOpen && folders.map((folder, index) => (
-                  <li key={index}>
+            {/* 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
-                      variant={currentView === folder ? 'secondary' : 'ghost'}
-                      className="w-full justify-start pl-8"
+                      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>
-                  </li>
-                ))}
-              </>
-            )}
+                  ))}
+                </div>
+              )}
+            </li>
           </ul>
         </nav>
       </div>
 
-      {/* Main content */}
+      {/* Main content area */}
       <div className="flex-1 flex overflow-hidden">
-        {/* Email list */}
-        <div className="w-[400px] bg-white/95 backdrop-blur-sm border-r border-gray-100 flex flex-col">
-          <div className="flex-none p-4 border-b border-gray-100">
-            <div className="flex items-center gap-2 mb-4">
-              <div className="relative flex-1">
-                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
-                <Input
-                  type="text"
-                  placeholder="Search emails..."
-                  value={searchQuery}
-                  onChange={(e) => setSearchQuery(e.target.value)}
-                  className="pl-10 w-full bg-gray-50"
-                />
-              </div>
-            </div>
+        {/* Email list panel */}
+        <div className="w-[320px] bg-white/95 backdrop-blur-sm border-r border-gray-100 flex flex-col">
+          {/* Email list header */}
+          <div className="p-4 border-b border-gray-100">
             <div className="flex items-center justify-between">
-              <div className="flex items-center gap-4">
-                {filteredEmails.length > 0 && (
-                  <input
-                    type="checkbox"
-                    checked={selectedEmails.length === filteredEmails.length}
-                    onChange={toggleSelectAll}
-                    className="h-4 w-4 text-blue-600 rounded border-gray-300 focus:ring-blue-500"
+              <div className="flex items-center gap-2">
+                {emails.length > 0 && (
+                  <Checkbox
+                    checked={selectedEmails.length === emails.length}
+                    onCheckedChange={toggleSelectAll}
                   />
                 )}
-                <h2 className="text-lg font-semibold text-gray-800 capitalize">
-                  {currentView === 'starred' ? 'Starred' : currentView}
-                </h2>
-              </div>
-              <div className="text-sm text-gray-500">
-                {filteredEmails.length} emails
+                <span className="text-sm text-gray-500">
+                  {filteredEmails.length} emails
+                </span>
               </div>
             </div>
           </div>
-          
-          <ScrollArea className="flex-1">
-            <div className="divide-y divide-gray-100">
-              {filteredEmails.map((email) => (
-                <div
-                  key={email.id}
-                  className={`flex items-center p-4 hover:bg-gray-50 cursor-pointer ${
-                    selectedEmail?.id === email.id ? 'bg-blue-50' : ''
-                  } ${!email.read ? 'bg-blue-50/20' : ''}`}
-                  onClick={() => handleEmailSelect(email.id)}
-                >
-                  <div className="flex-1 min-w-0">
-                    <div className="flex items-center justify-between">
-                      <div className="flex items-center space-x-3">
+
+          {/* Email list with proper spacing and layout */}
+          <div className="flex-1 overflow-y-auto">
+            {loading ? (
+              <div className="flex items-center justify-center h-64">
+                <div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-blue-500"></div>
+              </div>
+            ) : (
+              <div className="divide-y divide-gray-100">
+                {filteredEmails.map((email) => (
+                  <div
+                    key={email.id}
+                    className={`flex flex-col p-3 hover:bg-gray-50 cursor-pointer ${
+                      selectedEmail?.id === email.id ? 'bg-blue-50' : ''
+                    } ${!email.read ? 'bg-blue-50/20' : ''}`}
+                    onClick={() => handleEmailSelect(email.id)}
+                  >
+                    {/* Email header with checkbox and date */}
+                    <div className="flex items-center justify-between mb-1">
+                      <div className="flex items-center gap-3">
                         <Checkbox
                           checked={selectedEmails.includes(email.id.toString())}
                           onClick={(e) => e.stopPropagation()}
@@ -1170,15 +1160,14 @@ export default function MailPage() {
                             }
                           }}
                         />
-                        <div>
-                          <p className={`text-sm ${!email.read ? 'font-semibold' : ''}`}>
-                            {email.fromName || email.from}
-                          </p>
-                          <p className="text-sm text-gray-600 truncate">{email.subject}</p>
-                        </div>
+                        <span className="text-sm font-medium text-gray-900">
+                          {email.fromName || email.from}
+                        </span>
                       </div>
-                      <div className="flex items-center space-x-2">
-                        <span className="text-xs text-gray-500">{formatDate(email.date)}</span>
+                      <div className="flex items-center gap-2">
+                        <span className="text-xs text-gray-500">
+                          {formatDate(email.date)}
+                        </span>
                         <Button
                           variant="ghost"
                           size="sm"
@@ -1189,14 +1178,24 @@ export default function MailPage() {
                         </Button>
                       </div>
                     </div>
+
+                    {/* Email subject and preview */}
+                    <div className="ml-8">
+                      <h3 className={`text-sm ${!email.read ? 'font-semibold' : ''} text-gray-900 mb-0.5`}>
+                        {email.subject}
+                      </h3>
+                      <p className="text-xs text-gray-500 line-clamp-1">
+                        {email.body.replace(/<[^>]*>/g, '').substring(0, 100)}...
+                      </p>
+                    </div>
                   </div>
-                </div>
-              ))}
-            </div>
-          </ScrollArea>
+                ))}
+              </div>
+            )}
+          </div>
         </div>
 
-        {/* Email preview panel */}
+        {/* Preview panel - will automatically take remaining space */}
         <div className="flex-1 bg-white/95 backdrop-blur-sm flex flex-col">
           {selectedEmail ? (
             <>