From b91c218c48cd95cee7607d8125762f6b7eb28a4f Mon Sep 17 00:00:00 2001
From: alma <alma@governance-labs.org>
Date: Wed, 16 Apr 2025 19:24:51 +0200
Subject: [PATCH] Neah version mail design fix 9

---
 app/mail/page.tsx | 218 ++++++++++++++++++++++++++++++++++++++++------
 1 file changed, 190 insertions(+), 28 deletions(-)

diff --git a/app/mail/page.tsx b/app/mail/page.tsx
index cfc2176..2a07524 100644
--- a/app/mail/page.tsx
+++ b/app/mail/page.tsx
@@ -737,7 +737,55 @@ export default function MailPage() {
     }
   };
 
-  // Update the email list header to include search and adjust spacing
+  // Add filtered emails based on search query
+  const filteredEmails = useMemo(() => {
+    if (!searchQuery) return emails;
+    
+    const query = searchQuery.toLowerCase();
+    return emails.filter(email => 
+      email.subject.toLowerCase().includes(query) ||
+      email.from.toLowerCase().includes(query) ||
+      email.to.toLowerCase().includes(query) ||
+      email.body.toLowerCase().includes(query)
+    );
+  }, [emails, searchQuery]);
+
+  // Update the email list to use filtered emails
+  const renderEmailList = () => (
+    <div className="w-[320px] bg-white/95 backdrop-blur-sm border-r border-gray-100 flex flex-col">
+      {renderEmailListHeader()}
+      {renderBulkActionsToolbar()}
+      
+      <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>
+        ) : 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">
+              {searchQuery ? 'No emails match your search' : 'No emails in this folder'}
+            </p>
+          </div>
+        ) : (
+          <div className="divide-y divide-gray-100">
+            {filteredEmails.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>
+    </div>
+  );
+
+  // Update the email count in the header to show filtered count
   const renderEmailListHeader = () => (
     <div className="border-b border-gray-100">
       <div className="px-4 py-2">
@@ -755,13 +803,13 @@ export default function MailPage() {
       <div className="flex items-center px-4 h-14">
         <div className="flex items-center gap-3">
           <Checkbox
-            checked={emails.length > 0 && selectedEmails.length === emails.length}
+            checked={filteredEmails.length > 0 && selectedEmails.length === filteredEmails.length}
             onCheckedChange={toggleSelectAll}
             className="mt-0.5"
           />
           <h2 className="text-base font-semibold text-gray-900">Inbox</h2>
           <span className="text-sm text-gray-600 ml-4">
-            {emails.length} emails
+            {searchQuery ? `${filteredEmails.length} of ${emails.length} emails` : `${emails.length} emails`}
           </span>
         </div>
       </div>
@@ -822,32 +870,146 @@ export default function MailPage() {
   };
 
   // Update the email list to include the toolbar right after the header
-  const renderEmailList = () => (
-    <div className="w-[320px] bg-white/95 backdrop-blur-sm border-r border-gray-100 flex flex-col">
-      {renderEmailListHeader()}
-      {renderBulkActionsToolbar()}
-      
-      <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>
+  const renderEmailListWrapper = () => (
+    <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>
         )}
       </div>