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

---
 app/mail/page.tsx | 514 ++++++++++++++++++++++++----------------------
 1 file changed, 274 insertions(+), 240 deletions(-)

diff --git a/app/mail/page.tsx b/app/mail/page.tsx
index 176bf70..85c6609 100644
--- a/app/mail/page.tsx
+++ b/app/mail/page.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useMemo } from 'react';
 import { useRouter } from 'next/navigation';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
@@ -31,6 +31,7 @@ interface Account {
   name: string;
   email: string;
   color: string;
+  folders?: string[];
 }
 
 interface Email {
@@ -426,8 +427,7 @@ export default function MailPage() {
   const router = useRouter();
   const [loading, setLoading] = useState(true);
   const [accounts, setAccounts] = useState<Account[]>([
-    { id: 1, name: 'Mail', email: 'alma@governance-labs.org', color: 'bg-blue-500' },
-    { id: 2, name: 'Work', email: 'work@governance-labs.org', color: 'bg-green-500' }
+    { id: 1, name: 'Mail', email: 'alma@governance-labs.org', color: 'bg-blue-500' }
   ]);
   const [selectedAccount, setSelectedAccount] = useState<Account | null>(null);
   const [currentView, setCurrentView] = useState('inbox');
@@ -459,6 +459,7 @@ export default function MailPage() {
   const [showCc, setShowCc] = useState(false);
   const [contentLoading, setContentLoading] = useState(false);
   const [attachments, setAttachments] = useState<Attachment[]>([]);
+  const [folders, setFolders] = useState<string[]>([]);
 
   // Move getSelectedEmail inside the component
   const getSelectedEmail = () => {
@@ -495,18 +496,27 @@ export default function MailPage() {
   }, [router]);
 
   // Fetch emails from IMAP API
-  const loadEmails = async () => {
+  const loadEmails = async (view?: string, accountId?: number, folder?: string) => {
     try {
-      console.log('Starting to load emails...');
+      console.log('Loading emails...', { view, accountId, folder });
       setLoading(true);
       setError(null);
       
-      const response = await fetch('/api/mail');
-      console.log('API response status:', response.status);
+      let url = '/api/mail';
+      const params = new URLSearchParams();
+      
+      if (view) params.append('view', view);
+      if (accountId) params.append('accountId', accountId.toString());
+      if (folder) params.append('folder', folder);
+      
+      if (params.toString()) {
+        url += `?${params.toString()}`;
+      }
+      
+      const response = await fetch(url);
       
       if (!response.ok) {
         const errorData = await response.json();
-        console.error('API error:', errorData);
         if (errorData.error === 'No stored credentials found') {
           router.push('/mail/login');
           return;
@@ -515,11 +525,17 @@ export default function MailPage() {
       }
       
       const data = await response.json();
-      console.log('Received data:', data);
       
-      if (!data.emails || !Array.isArray(data.emails)) {
-        console.error('Invalid response format:', data);
-        throw new Error('Invalid response format: emails array not found');
+      // Update accounts and folders if provided in the response
+      if (data.accounts) {
+        setAccounts([
+          { id: 0, name: 'All', email: '', color: 'bg-gray-500' },
+          ...data.accounts
+        ]);
+      }
+      
+      if (data.folders) {
+        setFolders(data.folders);
       }
       
       // Process the emails array from data.emails
@@ -528,12 +544,10 @@ export default function MailPage() {
         date: new Date(email.date),
         read: email.read || false,
         starred: email.starred || false,
-        category: email.category || 'inbox',
-        body: decodeMimeContent(email.body)
+        category: email.category || 'inbox'
       }));
       
       setEmails(processedEmails);
-      console.log('Emails loaded successfully:', processedEmails.length);
     } catch (err) {
       console.error('Error loading emails:', err);
       setError(err instanceof Error ? err.message : 'Failed to load emails');
@@ -542,6 +556,36 @@ export default function MailPage() {
     }
   };
 
+  // Update useEffect to load emails when view changes
+  useEffect(() => {
+    loadEmails(currentView, selectedAccount?.id);
+  }, [currentView, selectedAccount]);
+
+  // Filter emails based on current view and selected account
+  const filteredEmails = useMemo(() => {
+    return emails.filter(email => {
+      // First filter by account if one is selected
+      if (selectedAccount && selectedAccount.id !== 0) {
+        if (email.accountId !== selectedAccount.id) return false;
+      }
+      
+      // Then filter by current view
+      switch (currentView) {
+        case 'inbox':
+          return !email.deleted && email.category === 'inbox';
+        case 'starred':
+          return !email.deleted && email.starred;
+        case 'sent':
+          return !email.deleted && email.category === 'sent';
+        case 'trash':
+          return email.deleted;
+        default:
+          // Handle folder views
+          return !email.deleted && email.category === currentView;
+      }
+    });
+  }, [emails, currentView, selectedAccount]);
+
   // Mock folders data
   const folders = [
     { id: 1, name: 'Important' },
@@ -618,11 +662,11 @@ export default function MailPage() {
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ emailId })
       });
-      
-      const updatedEmails = emails.map(email => 
-        email.id === emailId ? { ...email, starred: !email.starred } : email
-      );
-      setEmails(updatedEmails);
+
+    const updatedEmails = emails.map(email => 
+      email.id === emailId ? { ...email, starred: !email.starred } : email
+    );
+    setEmails(updatedEmails);
     } catch (error) {
       console.error('Error toggling star:', error);
     }
@@ -882,21 +926,21 @@ 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
-                      ${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 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`}>
+        {/* 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={() => {
                 console.log('Compose button clicked');
@@ -914,197 +958,187 @@ 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="flex flex-col min-h-0 flex-1">
-            <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)}
-              >
-                <span>Accounts</span>
-                {foldersDropdownOpen ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
-              </Button>
-              
-              {foldersDropdownOpen && (
-                <div className="space-y-1 pl-2">
-                  {accounts.map(account => (
-                    <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
-                          variant="ghost"
-                          size="icon"
-                          className="h-6 w-6 text-gray-400 opacity-0 group-hover:opacity-100 transition-opacity"
-                          onClick={(e) => {
-                            e.stopPropagation();
-                            setShowAccountActions(account.id);
-                          }}
-                        >
-                          <MoreVertical className="h-4 w-4" />
-                        </Button>
-                      </Button>
+          <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={() => setAccountsDropdownOpen(!accountsDropdownOpen)}
+            >
+              <span>Accounts</span>
+              {accountsDropdownOpen ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
+            </Button>
+            
+            {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>
+            )}
+          </div>
 
-                      {/* Account Actions Dropdown */}
-                      {showAccountActions === account.id && (
-                        <div className="absolute right-0 mt-1 w-48 bg-white rounded-md shadow-lg py-1 z-10">
-                          <Button
-                            variant="ghost"
-                            className="w-full justify-start px-4 py-2 text-sm text-gray-600 hover:text-gray-900"
-                            onClick={() => handleAccountAction(account.id, 'edit')}
-                          >
-                            <Edit className="h-4 w-4 mr-2" />
-                            Edit account
-                          </Button>
-                          <Button
-                            variant="ghost"
-                            className="w-full justify-start px-4 py-2 text-sm text-red-600 hover:text-red-700"
-                            onClick={() => handleAccountAction(account.id, 'delete')}
-                          >
-                            <Trash2 className="h-4 w-4 mr-2" />
-                            Remove account
-                          </Button>
-                        </div>
-                      )}
-                    </div>
-                  ))}
-
-                  {/* Add Account Button */}
-                  <Button
-                    variant="ghost"
-                    className="w-full justify-start px-2 py-1.5 text-sm text-blue-600 hover:text-blue-700 hover:bg-blue-50"
-                    onClick={() => {/* Handle add account */}}
-                  >
-                    <Plus className="h-4 w-4 mr-2" />
-                    Add Account
-                  </Button>
-                </div>
-              )}
-            </div>
-
-            {/* Navigation */}
-            <nav className="p-3">
-              <ul className="space-y-0.5 px-2">
+          {/* Navigation */}
+          <nav className="flex-1 overflow-y-auto p-3">
+            <ul className="space-y-1">
+              {/* Standard folders */}
                 <li>
                   <Button 
                     variant={currentView === 'inbox' ? 'secondary' : 'ghost'}
-                    className={`w-full justify-start py-2 ${currentView === 'inbox' ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:text-gray-900'}`}
+                  className="w-full justify-start"
                     onClick={() => {setCurrentView('inbox'); setSelectedEmail(null);}}
                   >
                     <Inbox className="h-4 w-4 mr-2" />
-                    <span>Inbox</span>
+                  <span>Inbox</span>
+                  {emails.filter(e => !e.read && e.category === 'inbox').length > 0 && (
+                    <span className="ml-auto bg-blue-600 text-white text-xs px-2 py-0.5 rounded-full">
+                      {emails.filter(e => !e.read && e.category === 'inbox').length}
+                    </span>
+                  )}
                   </Button>
                 </li>
                 <li>
                   <Button 
                     variant={currentView === 'starred' ? 'secondary' : 'ghost'}
-                    className={`w-full justify-start py-2 ${currentView === 'starred' ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:text-gray-900'}`}
+                  className="w-full justify-start"
                     onClick={() => {setCurrentView('starred'); setSelectedEmail(null);}}
                   >
                     <Star className="h-4 w-4 mr-2" />
-                    <span>Starred</span>
+                  <span>Starred</span>
                   </Button>
                 </li>
                 <li>
                   <Button 
                     variant={currentView === 'sent' ? 'secondary' : 'ghost'}
-                    className={`w-full justify-start py-2 ${currentView === 'sent' ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:text-gray-900'}`}
+                  className="w-full justify-start"
                     onClick={() => {setCurrentView('sent'); setSelectedEmail(null);}}
                   >
                     <Send className="h-4 w-4 mr-2" />
-                    <span>Sent</span>
+                  <span>Sent</span>
                   </Button>
                 </li>
                 <li>
                   <Button 
                     variant={currentView === 'trash' ? 'secondary' : 'ghost'}
-                    className={`w-full justify-start py-2 ${currentView === 'trash' ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:text-gray-900'}`}
+                  className="w-full justify-start"
                     onClick={() => {setCurrentView('trash'); setSelectedEmail(null);}}
                   >
                     <Trash className="h-4 w-4 mr-2" />
-                    <span>Trash</span>
+                  <span>Trash</span>
                   </Button>
                 </li>
+
+              {/* Account-specific folders */}
+              {selectedAccount && selectedAccount.id !== 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}>
+                          <Button
+                        variant={currentView === folder ? 'secondary' : 'ghost'}
+                        className="w-full justify-start pl-8"
+                        onClick={() => {setCurrentView(folder); setSelectedEmail(null);}}
+                      >
+                        <span>{folder}</span>
+                          </Button>
+                        </li>
+                      ))}
+                </>
+                  )}
               </ul>
             </nav>
-          </div>
-        </div>
+      </div>
 
         {/* Main content area */}
-        <div className="flex-1 flex overflow-hidden">
-          {/* Email list */}
-          <div className="w-[380px] bg-white/95 backdrop-blur-sm border-r border-gray-100 overflow-y-auto">
+      <div className="flex-1 flex overflow-hidden">
+        {/* Email list */}
+        <div className="w-[380px] bg-white/95 backdrop-blur-sm border-r border-gray-100 overflow-y-auto">
             {/* Email list header */}
-            <div className="p-4 border-b border-gray-100 flex justify-between items-center">
-              <div className="flex items-center gap-4">
+          <div className="p-4 border-b border-gray-100 flex justify-between items-center">
+            <div className="flex items-center gap-4">
                 {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">
+                />
+              )}
+              <h2 className="text-lg font-semibold text-gray-800 capitalize">
+                {currentView === 'starred' ? 'Starred' : currentView}
+              </h2>
+            </div>
+            <div className="text-sm text-gray-500">
                 {emails.length} emails
+            </div>
+          </div>
+
+          {/* Bulk Actions Bar */}
+          {showBulkActions && selectedEmails.length > 0 && (
+            <div className="p-2 bg-gray-50 border-b border-gray-100 flex items-center justify-between">
+              <span className="text-sm text-gray-600">{selectedEmails.length} selected</span>
+              <div className="flex items-center gap-2">
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="text-red-600 hover:text-red-700"
+                  onClick={handleBulkDelete}
+                >
+                  <Trash2 className="h-4 w-4 mr-2" />
+                  Delete
+                </Button>
               </div>
             </div>
+          )}
 
-            {/* Bulk Actions Bar */}
-            {showBulkActions && selectedEmails.length > 0 && (
-              <div className="p-2 bg-gray-50 border-b border-gray-100 flex items-center justify-between">
-                <span className="text-sm text-gray-600">{selectedEmails.length} selected</span>
-                <div className="flex items-center gap-2">
-                  <Button
-                    variant="ghost"
-                    size="sm"
-                    className="text-red-600 hover:text-red-700"
-                    onClick={handleBulkDelete}
-                  >
-                    <Trash2 className="h-4 w-4 mr-2" />
-                    Delete
-                  </Button>
-                </div>
-              </div>
-            )}
-
-            {/* Email List */}
-            {loading ? (
+          {/* Email List */}
+              {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="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-blue-500"></div>
+                </div>
+              ) : (
               <ul className="divide-y divide-gray-100">
                 {emails.map((email) => (
-                  <li
-                    key={email.id}
+                    <li
+                      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">
+                        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">
                           <Checkbox
                             checked={selectedEmails.includes(email.id.toString())}
-                            onClick={(e) => e.stopPropagation()}
+                              onClick={(e) => e.stopPropagation()}
                             onCheckedChange={(checked) => {
                               if (checked) {
                                 setSelectedEmails([...selectedEmails, email.id.toString()]);
@@ -1115,11 +1149,11 @@ export default function MailPage() {
                           />
                           <div>
                             <p className={`text-sm ${!email.read ? 'font-semibold' : ''}`}>
-                              {email.fromName || email.from}
-                            </p>
+                                {email.fromName || email.from}
+                              </p>
                             <p className="text-sm text-gray-600 truncate">{email.subject}</p>
-                          </div>
-                        </div>
+                              </div>
+                            </div>
                         <div className="flex items-center space-x-2">
                           <span className="text-xs text-gray-500">{formatDate(email.date)}</span>
                           <Button
@@ -1131,76 +1165,76 @@ export default function MailPage() {
                             <Star className={`h-4 w-4 ${email.starred ? 'fill-yellow-400 text-yellow-400' : ''}`} />
                           </Button>
                         </div>
+                        </div>
                       </div>
-                    </div>
-                  </li>
-                ))}
-              </ul>
-            )}
-          </div>
+                    </li>
+                  ))}
+                </ul>
+              )}
+        </div>
 
-          {/* Email preview panel */}
-          <div className="flex-1 bg-white/95 backdrop-blur-sm overflow-y-auto">
-            {selectedEmail ? (
-              <div className="p-6">
-                <div className="flex items-center justify-between mb-6">
-                  <h2 className="text-xl font-semibold text-gray-900">{selectedEmail.subject}</h2>
-                  <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"
+        {/* Email preview panel */}
+        <div className="flex-1 bg-white/95 backdrop-blur-sm overflow-y-auto">
+          {selectedEmail ? (
+            <div className="p-6">
+              <div className="flex items-center justify-between mb-6">
+                <h2 className="text-xl font-semibold text-gray-900">{selectedEmail.subject}</h2>
+                <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>
-                  </div>
+                  </Button>
                 </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 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);
@@ -1234,17 +1268,17 @@ export default function MailPage() {
                       return selectedEmail.body;
                     }
                   })()}
-                </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 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 - Updated Design */}
       {showCompose && (