From d35d89ea9d92485fb51d5e489ee83c812b562884 Mon Sep 17 00:00:00 2001
From: alma <alma@governance-labs.org>
Date: Wed, 16 Apr 2025 19:14:20 +0200
Subject: [PATCH] Neah version mail design fix 7 bis ??

---
 app/mail/page.tsx | 513 ++++++++++++++++++++++++----------------------
 1 file changed, 263 insertions(+), 250 deletions(-)

diff --git a/app/mail/page.tsx b/app/mail/page.tsx
index dc4268a..18ddd5b 100644
--- a/app/mail/page.tsx
+++ b/app/mail/page.tsx
@@ -737,11 +737,10 @@ export default function MailPage() {
     }
   };
 
-  // Update the email list header with inline bulk actions
+  // Update the email list header to be cleaner
   const renderEmailListHeader = () => (
     <div className="border-b border-gray-100">
       <div className="flex items-center px-4 h-14">
-        {/* Left side with checkbox and title */}
         <div className="flex items-center gap-3">
           <Checkbox
             checked={emails.length > 0 && selectedEmails.length === emails.length}
@@ -753,53 +752,93 @@ export default function MailPage() {
             {emails.length} emails
           </span>
         </div>
-
-        {/* Bulk actions right after the title */}
-        {selectedEmails.length > 0 ? (
-          <div className="flex items-center gap-2 ml-6">
-            <Button
-              variant="ghost"
-              size="sm"
-              className="text-gray-600 hover:text-gray-900 h-8 px-2 py-1"
-              onClick={() => {
-                // Check if all selected emails are read
-                const allSelectedRead = selectedEmails.every(id => 
-                  emails.find(email => email.id.toString() === id)?.read
-                );
-                handleBulkAction(allSelectedRead ? 'mark-unread' : 'mark-read');
-              }}
-            >
-              <EyeOff className="h-4 w-4" />
-              <span className="ml-1.5 text-sm">
-                Mark as {selectedEmails.every(id => 
-                  emails.find(email => email.id.toString() === id)?.read
-                ) ? 'unread' : 'read'}
-              </span>
-            </Button>
-            <Button
-              variant="ghost"
-              size="sm"
-              className="text-gray-600 hover:text-gray-900 h-8 px-2 py-1"
-              onClick={() => handleBulkAction('archive')}
-            >
-              <Archive className="h-4 w-4" />
-              <span className="ml-1.5 text-sm">Archive</span>
-            </Button>
-            <Button
-              variant="ghost"
-              size="sm"
-              className="text-red-600 hover:text-red-700 h-8 px-2 py-1"
-              onClick={() => handleBulkAction('delete')}
-            >
-              <Trash2 className="h-4 w-4" />
-              <span className="ml-1.5 text-sm">Delete</span>
-            </Button>
-          </div>
-        ) : null}
       </div>
     </div>
   );
 
+  // Add a fixed bottom toolbar for bulk actions
+  const renderBulkActionsToolbar = () => {
+    if (selectedEmails.length === 0) return null;
+
+    return (
+      <div className="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 px-4 py-2 flex items-center justify-between shadow-lg">
+        <div className="flex items-center gap-1">
+          <span className="text-sm text-gray-600 mr-4">
+            {selectedEmails.length} selected
+          </span>
+          <Button
+            variant="ghost"
+            size="sm"
+            className="text-gray-600 hover:text-gray-900"
+            onClick={() => {
+              const allSelectedRead = selectedEmails.every(id => 
+                emails.find(email => email.id.toString() === id)?.read
+              );
+              handleBulkAction(allSelectedRead ? 'mark-unread' : 'mark-read');
+            }}
+          >
+            <EyeOff className="h-4 w-4 mr-2" />
+            Mark as {selectedEmails.every(id => 
+              emails.find(email => email.id.toString() === id)?.read
+            ) ? 'unread' : 'read'}
+          </Button>
+          <Button
+            variant="ghost"
+            size="sm"
+            className="text-gray-600 hover:text-gray-900"
+            onClick={() => handleBulkAction('archive')}
+          >
+            <Archive className="h-4 w-4 mr-2" />
+            Archive
+          </Button>
+          <Button
+            variant="ghost"
+            size="sm"
+            className="text-red-600 hover:text-red-700"
+            onClick={() => handleBulkAction('delete')}
+          >
+            <Trash2 className="h-4 w-4 mr-2" />
+            Delete
+          </Button>
+        </div>
+      </div>
+    );
+  };
+
+  // Update the email list wrapper to include the bulk actions toolbar
+  const renderEmailList = () => (
+    <div className="w-[320px] bg-white/95 backdrop-blur-sm border-r border-gray-100 flex flex-col relative">
+      {renderEmailListHeader()}
+      
+      <div 
+        className="flex-1 overflow-y-auto"
+        onScroll={handleScroll}
+      >
+        {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>
+        ) : emails.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">No emails in this folder</p>
+          </div>
+        ) : (
+          <div className="divide-y divide-gray-100">
+            {emails.map((email) => renderEmailListItem(email))}
+            {isLoadingMore && (
+              <div className="flex items-center justify-center p-4">
+                <div className="animate-spin rounded-full h-4 w-4 border-t-2 border-b-2 border-blue-500"></div>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+
+      {renderBulkActionsToolbar()}
+    </div>
+  );
+
   // Update sidebar items when available folders change
   useEffect(() => {
     if (availableFolders.length > 0) {
@@ -926,33 +965,146 @@ export default function MailPage() {
   );
 
   // Render the email list using sorted emails
-  const renderEmailList = () => (
-    <div className="w-[320px] bg-white/95 backdrop-blur-sm border-r border-gray-100 flex flex-col">
-      {/* Email list header */}
-      {renderEmailListHeader()}
+  const renderEmailListWrapper = () => (
+    <div className="flex-1 flex overflow-hidden">
+      {/* Email list panel */}
+      {renderEmailList()}
 
-      {/* Email list with scroll handler */}
-      <div 
-        className="flex-1 overflow-y-auto"
-        onScroll={handleScroll}
-      >
-        {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>
-        ) : emails.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">No emails in this folder</p>
-          </div>
-        ) : (
-          <div className="divide-y divide-gray-100">
-            {emails.map((email) => renderEmailListItem(email))}
-            {isLoadingMore && (
-              <div className="flex items-center justify-center p-4">
-                <div className="animate-spin rounded-full h-4 w-4 border-t-2 border-b-2 border-blue-500"></div>
+      {/* Preview panel - will automatically take remaining space */}
+      <div className="flex-1 bg-white/95 backdrop-blur-sm flex flex-col">
+        {selectedEmail ? (
+          <>
+            {/* 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"
+                    size="icon"
+                    onClick={() => setSelectedEmail(null)}
+                    className="md:hidden"
+                  >
+                    <ChevronLeft className="h-5 w-5" />
+                  </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"
+                    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"
+                    onClick={() => {/* Add to folder logic */}}
+                  >
+                    <FolderOpen className="h-5 w-5" />
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="text-gray-400 hover:text-gray-900"
+                    onClick={() => {/* Mark as spam logic */}}
+                  >
+                    <MessageSquare className="h-5 w-5" />
+                  </Button>
+                </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="prose max-w-none">
+                {(() => {
+                  try {
+                    const parsed = parseFullEmail(selectedEmail.body);
+                    return (
+                      <div>
+                        {/* Display HTML content if available, otherwise fallback to text */}
+                        <div dangerouslySetInnerHTML={{ 
+                          __html: parsed.html || parsed.text || decodeMimeContent(selectedEmail.body) 
+                        }} />
+                        
+                        {/* Display attachments if present */}
+                        {parsed.attachments && parsed.attachments.length > 0 && (
+                          <div className="mt-6 border-t border-gray-200 pt-6">
+                            <h3 className="text-sm font-semibold text-gray-900 mb-4">Attachments</h3>
+                            <div className="grid grid-cols-2 gap-4">
+                              {parsed.attachments.map((attachment, index) => (
+                                <div key={index} className="flex items-center space-x-2 p-2 border rounded">
+                                  <Paperclip className="h-4 w-4 text-gray-400" />
+                                  <span className="text-sm text-gray-600 truncate">
+                                    {attachment.filename}
+                                  </span>
+                                </div>
+                              ))}
+                            </div>
+                          </div>
+                        )}
+                      </div>
+                    );
+                  } catch (e) {
+                    console.error('Error parsing email:', e);
+                    return selectedEmail.body;
+                  }
+                })()}
+              </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>
@@ -1220,47 +1372,47 @@ 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>
-        </div>
-
-        {/* Compose button and refresh button */}
-        <div className="p-2 border-b border-gray-100 flex items-center gap-2">
-          <Button 
-            className="flex-1 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);
-              setComposeTo('');
-              setComposeCc('');
-              setComposeBcc('');
-              setComposeSubject('');
-              setComposeBody('');
-              setShowCc(false);
-              setShowBcc(false);
-            }}
-          >
+          {/* Courrier Title */}
+          <div className="p-3 border-b border-gray-100">
             <div className="flex items-center gap-2">
-              <PlusIcon className="h-3.5 w-3.5" />
-              <span>Compose</span>
+              <Mail className="h-6 w-6 text-gray-600" />
+              <span className="text-xl font-semibold text-gray-900">COURRIER</span>
             </div>
-          </Button>
-          <Button
-            variant="ghost"
-            size="icon"
-            onClick={() => loadEmails()}
-            className="text-gray-600 hover:text-gray-900 hover:bg-gray-100"
-          >
-            <RefreshCw className="h-4 w-4" />
-          </Button>
-        </div>
+          </div>
+
+          {/* Compose button and refresh button */}
+          <div className="p-2 border-b border-gray-100 flex items-center gap-2">
+            <Button 
+              className="flex-1 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);
+                setComposeTo('');
+                setComposeCc('');
+                setComposeBcc('');
+                setComposeSubject('');
+                setComposeBody('');
+                setShowCc(false);
+                setShowBcc(false);
+              }}
+            >
+              <div className="flex items-center gap-2">
+                <PlusIcon className="h-3.5 w-3.5" />
+                <span>Compose</span>
+              </div>
+            </Button>
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={() => loadEmails()}
+              className="text-gray-600 hover:text-gray-900 hover:bg-gray-100"
+            >
+              <RefreshCw className="h-4 w-4" />
+            </Button>
+          </div>
 
           {/* Accounts Section */}
           <div className="p-3 border-b border-gray-100">
@@ -1289,7 +1441,7 @@ export default function MailPage() {
                         </div>
                         <span className="text-xs text-gray-500 ml-4">{account.email}</span>
                       </div>
-                      </Button>
+                    </Button>
                   </div>
                 ))}
               </div>
@@ -1298,153 +1450,14 @@ 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 */}
-          {renderEmailList()}
-
-          {/* Preview panel - will automatically take remaining space */}
-          <div className="flex-1 bg-white/95 backdrop-blur-sm flex flex-col">
-            {selectedEmail ? (
-              <>
-                {/* 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"
-                        size="icon"
-                        onClick={() => setSelectedEmail(null)}
-                        className="md:hidden"
-                      >
-                        <ChevronLeft className="h-5 w-5" />
-                </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"
-                        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"
-                        onClick={() => {/* Add to folder logic */}}
-                      >
-                        <FolderOpen className="h-5 w-5" />
-                      </Button>
-                      <Button
-                        variant="ghost"
-                        size="icon"
-                        className="text-gray-400 hover:text-gray-900"
-                        onClick={() => {/* Mark as spam logic */}}
-                      >
-                        <MessageSquare className="h-5 w-5" />
-                  </Button>
-                    </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="prose max-w-none">
-                    {(() => {
-                      try {
-                        const parsed = parseFullEmail(selectedEmail.body);
-                        return (
-                          <div>
-                            {/* Display HTML content if available, otherwise fallback to text */}
-                            <div dangerouslySetInnerHTML={{ 
-                              __html: parsed.html || parsed.text || decodeMimeContent(selectedEmail.body) 
-                            }} />
-                            
-                            {/* Display attachments if present */}
-                            {parsed.attachments && parsed.attachments.length > 0 && (
-                              <div className="mt-6 border-t border-gray-200 pt-6">
-                                <h3 className="text-sm font-semibold text-gray-900 mb-4">Attachments</h3>
-                                <div className="grid grid-cols-2 gap-4">
-                                  {parsed.attachments.map((attachment, index) => (
-                                    <div key={index} className="flex items-center space-x-2 p-2 border rounded">
-                                      <Paperclip className="h-4 w-4 text-gray-400" />
-                                      <span className="text-sm text-gray-600 truncate">
-                                        {attachment.filename}
-                                      </span>
-              </div>
-                                  ))}
-            </div>
-                              </div>
-                            )}
-                          </div>
-                        );
-                      } catch (e) {
-                        console.error('Error parsing email:', e);
-                        return selectedEmail.body;
-                      }
-                    })()}
-                  </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>
-          )}
+          {renderEmailListWrapper()}
         </div>
       </div>
-    </div>
 
       {/* Compose Email Modal */}
       {showCompose && (