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

---
 app/mail/page.tsx | 385 +++++++++++++++++++++++++---------------------
 1 file changed, 210 insertions(+), 175 deletions(-)

diff --git a/app/mail/page.tsx b/app/mail/page.tsx
index 0e7a65b..a62bdb2 100644
--- a/app/mail/page.tsx
+++ b/app/mail/page.tsx
@@ -1042,6 +1042,130 @@ export default function MailPage() {
     </nav>
   );
 
+  // Add debug logging for the email list
+  useEffect(() => {
+    console.log('Current view:', currentView);
+    console.log('Filtered emails:', filteredEmails.map(email => ({
+      id: email.id,
+      subject: email.subject,
+      folder: email.folder,
+      from: email.from
+    })));
+  }, [currentView, filteredEmails]);
+
+  // Email list panel section
+  const renderEmailList = () => (
+    <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">
+            <h2 className="text-lg font-semibold text-gray-800">
+              {currentView === 'INBOX' ? 'Inbox' :
+               currentView === 'starred' ? 'Starred' :
+               currentView.charAt(0).toUpperCase() + currentView.slice(1)}
+            </h2>
+          </div>
+          <div className="text-sm text-gray-500">
+            {filteredEmails.length} emails
+          </div>
+        </div>
+      </div>
+
+      {/* Email list */}
+      <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>
+        ) : filteredEmails.length === 0 ? (
+          <div className="flex flex-col items-center justify-center h-64">
+            <Mail className="h-8 w-8 text-gray-400 mb-2" />
+            <p className="text-gray-500 text-sm">
+              {currentView === 'INBOX' && 'No emails in inbox'}
+              {currentView === 'starred' && 'No starred emails'}
+              {currentView === 'Sent' && 'No sent emails'}
+              {currentView === 'Trash' && 'No emails in trash'}
+              {currentView === 'Drafts' && 'No drafts'}
+              {currentView === 'Spam' && 'No spam emails'}
+              {currentView === 'Archives' && 'No archived emails'}
+            </p>
+            {/* Debug info */}
+            <div className="text-xs text-gray-400 mt-2">
+              <p>Current view: {currentView}</p>
+              <p>Total emails: {emails.length}</p>
+              <p>Folders present: {[...new Set(emails.map(e => e.folder))].join(', ')}</p>
+            </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)}
+              >
+                <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()}
+                      onCheckedChange={(checked) => {
+                        if (checked) {
+                          setSelectedEmails([...selectedEmails, email.id.toString()]);
+                        } else {
+                          setSelectedEmails(selectedEmails.filter(id => id !== email.id.toString()));
+                        }
+                      }}
+                    />
+                    <span className="text-sm font-medium text-gray-900">
+                      {currentView === 'Sent' ? email.to : (email.fromName || email.from)}
+                    </span>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <span className="text-xs text-gray-500">
+                      {formatDate(email.date)}
+                    </span>
+                    {/* Show folder badge if it doesn't match current view */}
+                    {email.folder !== currentView && currentView === 'starred' && (
+                      <span className="text-xs bg-gray-100 text-gray-600 px-2 py-0.5 rounded">
+                        {email.folder}
+                      </span>
+                    )}
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      className="text-gray-400 hover:text-yellow-400"
+                      onClick={(e) => toggleStarred(email.id, e)}
+                    >
+                      <Star className={`h-4 w-4 ${email.starred ? 'fill-yellow-400 text-yellow-400' : ''}`} />
+                    </Button>
+                  </div>
+                </div>
+                <div className="ml-8">
+                  <h3 className={`text-sm ${!email.read ? 'font-semibold' : ''} text-gray-900 mb-0.5`}>
+                    {email.subject || '(No subject)'}
+                  </h3>
+                  <p className="text-xs text-gray-500 line-clamp-1">
+                    {email.body.replace(/<[^>]*>/g, '').substring(0, 100)}...
+                  </p>
+                </div>
+                {/* Debug info - only in development */}
+                {process.env.NODE_ENV === 'development' && (
+                  <div className="ml-8 mt-1 text-xs text-gray-400">
+                    Folder: {email.folder}
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+
   if (error) {
     return (
       <div className="flex h-[calc(100vh-theme(spacing.12))] items-center justify-center bg-gray-100 mt-12">
@@ -1063,21 +1187,21 @@ export default function MailPage() {
   return (
     <>
       {/* Main layout */}
-      <div className="flex h-[calc(100vh-theme(spacing.12))] bg-gray-50 text-gray-900 overflow-hidden mt-12">
-        {/* Sidebar */}
+    <div className="flex h-[calc(100vh-theme(spacing.12))] bg-gray-50 text-gray-900 overflow-hidden mt-12">
+      {/* 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 gap-2">
-              <Mail className="h-6 w-6 text-gray-600" />
-              <span className="text-xl font-semibold text-gray-900">COURRIER</span>
-            </div>
+        {/* Courrier Title */}
+        <div className="p-3 border-b border-gray-100">
+          <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>
 
-          {/* Compose button */}
+        {/* Compose button */}
           <div className="p-2 border-b border-gray-100">
-            <Button 
+          <Button 
               className="w-full bg-blue-600 text-white rounded-lg hover:bg-blue-700 flex items-center justify-center transition-all py-1.5 text-sm"
               onClick={() => {
                 setShowCompose(true);
@@ -1093,9 +1217,9 @@ export default function MailPage() {
               <div className="flex items-center gap-2">
                 <PlusIcon className="h-3.5 w-3.5" />
                 <span>Compose</span>
-              </div>
-            </Button>
-          </div>
+            </div>
+          </Button>
+        </div>
 
           {/* Accounts Section */}
           <div className="p-3 border-b border-gray-100">
@@ -1124,7 +1248,7 @@ export default function MailPage() {
                         </div>
                         <span className="text-xs text-gray-500 ml-4">{account.email}</span>
                       </div>
-                    </Button>
+                      </Button>
                   </div>
                 ))}
               </div>
@@ -1133,101 +1257,12 @@ export default function MailPage() {
 
           {/* Navigation */}
           {renderSidebarNav()}
-        </div>
+                    </div>
 
         {/* Main content area */}
-        <div className="flex-1 flex overflow-hidden">
+      <div className="flex-1 flex overflow-hidden">
           {/* 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">
-                  <h2 className="text-lg font-semibold text-gray-800 capitalize">
-                    {currentView}
-                  </h2>
-                </div>
-                <div className="text-sm text-gray-500">
-                  {filteredEmails.length} emails
-                </div>
-              </div>
-            </div>
-
-            {/* Email list */}
-            <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>
-              ) : filteredEmails.length === 0 ? (
-                <div className="flex flex-col items-center justify-center h-64">
-                  <Mail className="h-8 w-8 text-gray-400 mb-2" />
-                  <p className="text-gray-500 text-sm">
-                    {currentView === 'INBOX' && 'No emails in inbox'}
-                    {currentView === 'starred' && 'No starred emails'}
-                    {currentView === 'Sent' && 'No sent emails'}
-                    {currentView === 'Trash' && 'No emails in trash'}
-                  </p>
-                  {/* Add debug info */}
-                  <p className="text-xs text-gray-400 mt-2">
-                    Total emails: {emails.length}
-                  </p>
-                </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)}
-                    >
-                      <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()}
-                            onCheckedChange={(checked) => {
-                              if (checked) {
-                                setSelectedEmails([...selectedEmails, email.id.toString()]);
-                              } else {
-                                setSelectedEmails(selectedEmails.filter(id => id !== email.id.toString()));
-                              }
-                            }}
-                          />
-                          <span className="text-sm font-medium text-gray-900">
-                            {currentView === 'Sent' ? email.to : (email.fromName || email.from)}
-                          </span>
-                        </div>
-                        <div className="flex items-center gap-2">
-                          <span className="text-xs text-gray-500">
-                            {formatDate(email.date)}
-                          </span>
-                          <Button
-                            variant="ghost"
-                            size="sm"
-                            className="text-gray-400 hover:text-yellow-400"
-                            onClick={(e) => toggleStarred(email.id, e)}
-                          >
-                            <Star className={`h-4 w-4 ${email.starred ? 'fill-yellow-400 text-yellow-400' : ''}`} />
-                          </Button>
-                        </div>
-                      </div>
-                      <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>
-          </div>
+          {renderEmailList()}
 
           {/* Preview panel - will automatically take remaining space */}
           <div className="flex-1 bg-white/95 backdrop-blur-sm flex flex-col">
@@ -1236,56 +1271,56 @@ export default function MailPage() {
                 {/* Email actions header */}
                 <div className="flex-none p-4 border-b border-gray-100">
                   <div className="flex items-center justify-between">
-                    <div className="flex items-center gap-2">
-                      <Button
-                        variant="ghost"
+              <div className="flex items-center gap-2">
+                <Button
+                  variant="ghost"
                         size="icon"
                         onClick={() => setSelectedEmail(null)}
                         className="md:hidden"
                       >
                         <ChevronLeft className="h-5 w-5" />
-                      </Button>
+                </Button>
                       <h2 className="text-xl font-semibold text-gray-900 truncate">
                         {selectedEmail.subject}
                       </h2>
-                    </div>
-                    <div className="flex items-center gap-2">
-                      <Button
-                        variant="ghost"
-                        size="icon"
-                        className="text-gray-400 hover:text-gray-900"
-                        onClick={() => handleReply('reply')}
-                      >
-                        <Reply className="h-5 w-5" />
-                      </Button>
-                      <Button
-                        variant="ghost"
-                        size="icon"
-                        className="text-gray-400 hover:text-gray-900"
-                        onClick={() => handleReply('replyAll')}
-                      >
-                        <ReplyAll className="h-5 w-5" />
-                      </Button>
-                      <Button
-                        variant="ghost"
-                        size="icon"
-                        className="text-gray-400 hover:text-gray-900"
-                        onClick={() => handleReply('forward')}
-                      >
-                        <Forward className="h-5 w-5" />
-                      </Button>
-                      <Button
-                        variant="ghost"
-                        size="icon"
-                        className="text-gray-400 hover:text-gray-900"
+              </div>
+                <div className="flex items-center gap-2">
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="text-gray-400 hover:text-gray-900"
+                    onClick={() => handleReply('reply')}
+                  >
+                    <Reply className="h-5 w-5" />
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="text-gray-400 hover:text-gray-900"
+                    onClick={() => handleReply('replyAll')}
+                  >
+                    <ReplyAll className="h-5 w-5" />
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="text-gray-400 hover:text-gray-900"
+                    onClick={() => handleReply('forward')}
+                  >
+                    <Forward className="h-5 w-5" />
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="text-gray-400 hover:text-gray-900"
                         onClick={(e) => toggleStarred(selectedEmail.id, e)}
                       >
                         <Star className={`h-5 w-5 ${selectedEmail.starred ? 'fill-yellow-400 text-yellow-400' : ''}`} />
-                      </Button>
-                      <Button
-                        variant="ghost"
-                        size="icon"
-                        className="text-gray-400 hover:text-gray-900"
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="text-gray-400 hover:text-gray-900"
                         onClick={() => {/* Add to folder logic */}}
                       >
                         <FolderOpen className="h-5 w-5" />
@@ -1297,33 +1332,33 @@ export default function MailPage() {
                         onClick={() => {/* Mark as spam logic */}}
                       >
                         <MessageSquare className="h-5 w-5" />
-                      </Button>
+                  </Button>
                     </div>
-                  </div>
                 </div>
+              </div>
 
                 {/* Scrollable content area */}
                 <ScrollArea className="flex-1 p-6">
-                  <div className="flex items-center gap-4 mb-6">
-                    <Avatar className="h-10 w-10">
-                      <AvatarFallback>
-                        {selectedEmail.fromName?.charAt(0) || selectedEmail.from.charAt(0)}
-                      </AvatarFallback>
-                    </Avatar>
-                    <div>
-                      <p className="font-medium text-gray-900">
-                        {selectedEmail.fromName || selectedEmail.from}
-                      </p>
-                      <p className="text-sm text-gray-500">
-                        to {selectedEmail.to}
-                      </p>
-                    </div>
-                    <div className="ml-auto text-sm text-gray-500">
-                      {formatDate(selectedEmail.date)}
-                    </div>
-                  </div>
+              <div className="flex items-center gap-4 mb-6">
+                <Avatar className="h-10 w-10">
+                  <AvatarFallback>
+                    {selectedEmail.fromName?.charAt(0) || selectedEmail.from.charAt(0)}
+                  </AvatarFallback>
+                </Avatar>
+                <div>
+                  <p className="font-medium text-gray-900">
+                    {selectedEmail.fromName || selectedEmail.from}
+                  </p>
+                  <p className="text-sm text-gray-500">
+                    to {selectedEmail.to}
+                  </p>
+                </div>
+                <div className="ml-auto text-sm text-gray-500">
+                  {formatDate(selectedEmail.date)}
+                </div>
+              </div>
 
-                  <div className="prose max-w-none">
+              <div className="prose max-w-none">
                     {(() => {
                       try {
                         const parsed = parseFullEmail(selectedEmail.body);
@@ -1345,9 +1380,9 @@ export default function MailPage() {
                                       <span className="text-sm text-gray-600 truncate">
                                         {attachment.filename}
                                       </span>
-                                    </div>
+              </div>
                                   ))}
-                                </div>
+            </div>
                               </div>
                             )}
                           </div>
@@ -1360,15 +1395,15 @@ export default function MailPage() {
                   </div>
                 </ScrollArea>
               </>
-            ) : (
-              <div className="flex flex-col items-center justify-center h-full">
-                <Mail className="h-12 w-12 text-gray-400 mb-4" />
-                <p className="text-gray-500">Select an email to view its contents</p>
-              </div>
-            )}
-          </div>
+          ) : (
+            <div className="flex flex-col items-center justify-center h-full">
+              <Mail className="h-12 w-12 text-gray-400 mb-4" />
+              <p className="text-gray-500">Select an email to view its contents</p>
+            </div>
+          )}
         </div>
       </div>
+    </div>
 
       {/* Compose Email Modal */}
       {showCompose && (