From 945083b9ee3e393628658afdd501ab9a9141e2fc Mon Sep 17 00:00:00 2001
From: alma <alma@governance-labs.org>
Date: Wed, 16 Apr 2025 13:35:49 +0200
Subject: [PATCH] mail page ui correction maj compose 18

---
 app/mail/page.tsx | 974 +++++++++++++++++++++++++++-------------------
 1 file changed, 569 insertions(+), 405 deletions(-)

diff --git a/app/mail/page.tsx b/app/mail/page.tsx
index 524e0c4..a9ca033 100644
--- a/app/mail/page.tsx
+++ b/app/mail/page.tsx
@@ -910,430 +910,594 @@ 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 - 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">
-            <div className="flex items-center gap-2">
-              <Mail className="h-6 w-6 text-blue-600" />
-              <span className="text-xl font-semibold text-gray-900">COURRIER</span>
-            </div>
-            <Button
-              variant="ghost"
-              size="icon"
-              className="md:hidden"
-              onClick={() => setSidebarOpen(!sidebarOpen)}
-            >
-              {sidebarOpen ? <ChevronLeft className="h-5 w-5" /> : <ChevronRight className="h-5 w-5" />}
-            </Button>
-          </div>
-        </div>
-
-        {/* Compose button */}
-        <div className="p-2 border-b border-gray-100">
-          <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);
-              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>
-        </div>
-
-        {/* Accounts Section */}
-        <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>
-
-        {/* Folder Management Section */}
-        <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)}
-          >
-            <div className="flex items-center gap-2">
-              <Folder className="h-4 w-4" />
-              <span>Folders</span>
-            </div>
-            {foldersDropdownOpen ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
-          </Button>
-          
-          {foldersDropdownOpen && (
-            <div className="space-y-1 pl-2">
-              {folders.map((folder) => (
-                <Button
-                  key={folder}
-                  variant="ghost"
-                  className="w-full justify-start px-2 py-1.5 text-sm"
-                  onClick={() => setCurrentView(folder)}
-                >
-                  <FolderOpen className="h-4 w-4 mr-2" />
-                  <span>{folder}</span>
-                </Button>
-              ))}
-              <Button
-                variant="ghost"
-                className="w-full justify-start px-2 py-1.5 text-sm text-blue-600"
-                onClick={() => {/* Add new folder logic */}}
-              >
-                <Plus className="h-4 w-4 mr-2" />
-                <span>New Folder</span>
-              </Button>
-            </div>
-          )}
-        </div>
-
-        {/* Navigation */}
-        <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 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" />
-                <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'}`}
-                onClick={() => {setCurrentView('starred'); setSelectedEmail(null);}}
-              >
-                <Star className="h-4 w-4 mr-2" />
-                <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'}`}
-                onClick={() => {setCurrentView('sent'); setSelectedEmail(null);}}
-              >
-                <Send className="h-4 w-4 mr-2" />
-                <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'}`}
-                onClick={() => {setCurrentView('trash'); setSelectedEmail(null);}}
-              >
-                <Trash className="h-4 w-4 mr-2" />
-                <span>Trash</span>
-              </Button>
-            </li>
-
-            {/* 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
-                      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>
-                  ))}
-                </div>
-              )}
-            </li>
-          </ul>
-        </nav>
-      </div>
-
-      {/* Main content area */}
-      <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">
+    <>
+      {/* Main layout */}
+      <div className="flex h-[calc(100vh-theme(spacing.12))] bg-gray-50 text-gray-900 overflow-hidden mt-12">
+        {/* 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">
               <div className="flex items-center gap-2">
-                {emails.length > 0 && (
-                  <Checkbox
-                    checked={selectedEmails.length === emails.length}
-                    onCheckedChange={toggleSelectAll}
-                  />
-                )}
-                <span className="text-sm text-gray-500">
-                  {filteredEmails.length} emails
-                </span>
+                <Mail className="h-6 w-6 text-blue-600" />
+                <span className="text-xl font-semibold text-gray-900">COURRIER</span>
               </div>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="md:hidden"
+                onClick={() => setSidebarOpen(!sidebarOpen)}
+              >
+                {sidebarOpen ? <ChevronLeft className="h-5 w-5" /> : <ChevronRight className="h-5 w-5" />}
+              </Button>
             </div>
           </div>
 
-          {/* 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>
+          {/* Compose button */}
+          <div className="p-2 border-b border-gray-100">
+            <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);
+                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>
-            ) : (
-              <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()}
-                          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">
-                          {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>
+            </Button>
+          </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>
+          {/* Accounts Section */}
+          <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>
-                  </div>
+                  </Button>
                 ))}
               </div>
             )}
           </div>
+
+          {/* Folder Management Section */}
+          <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)}
+            >
+              <div className="flex items-center gap-2">
+                <Folder className="h-4 w-4" />
+                <span>Folders</span>
+              </div>
+              {foldersDropdownOpen ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
+            </Button>
+            
+            {foldersDropdownOpen && (
+              <div className="space-y-1 pl-2">
+                {folders.map((folder) => (
+                  <Button
+                    key={folder}
+                    variant="ghost"
+                    className="w-full justify-start px-2 py-1.5 text-sm"
+                    onClick={() => setCurrentView(folder)}
+                  >
+                    <FolderOpen className="h-4 w-4 mr-2" />
+                    <span>{folder}</span>
+                  </Button>
+                ))}
+                <Button
+                  variant="ghost"
+                  className="w-full justify-start px-2 py-1.5 text-sm text-blue-600"
+                  onClick={() => {/* Add new folder logic */}}
+                >
+                  <Plus className="h-4 w-4 mr-2" />
+                  <span>New Folder</span>
+                </Button>
+              </div>
+            )}
+          </div>
+
+          {/* Navigation */}
+          <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 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" />
+                  <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'}`}
+                  onClick={() => {setCurrentView('starred'); setSelectedEmail(null);}}
+                >
+                  <Star className="h-4 w-4 mr-2" />
+                  <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'}`}
+                  onClick={() => {setCurrentView('sent'); setSelectedEmail(null);}}
+                >
+                  <Send className="h-4 w-4 mr-2" />
+                  <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'}`}
+                  onClick={() => {setCurrentView('trash'); setSelectedEmail(null);}}
+                >
+                  <Trash className="h-4 w-4 mr-2" />
+                  <span>Trash</span>
+                </Button>
+              </li>
+
+              {/* 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
+                        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>
+                    ))}
+                  </div>
+                )}
+              </li>
+            </ul>
+          </nav>
         </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>
+        {/* Main content area */}
+        <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-2">
+                  {emails.length > 0 && (
+                    <Checkbox
+                      checked={selectedEmails.length === emails.length}
+                      onCheckedChange={toggleSelectAll}
+                    />
+                  )}
+                  <span className="text-sm text-gray-500">
+                    {filteredEmails.length} emails
+                  </span>
                 </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>
-          )}
+
+            {/* 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()}
+                            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">
+                            {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>
+
+                      {/* 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>
+          </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>
         </div>
       </div>
-    </div>
+
+      {/* Compose Email Modal */}
+      {showCompose && (
+        <div className="fixed inset-0 bg-gray-600/30 backdrop-blur-sm z-50 flex items-center justify-center">
+          <div className="w-full max-w-2xl h-[80vh] bg-white rounded-xl shadow-xl flex flex-col mx-4">
+            {/* Modal Header */}
+            <div className="flex items-center justify-between px-6 py-3 border-b border-gray-200">
+              <h3 className="text-lg font-semibold text-gray-900">
+                {composeSubject.startsWith('Re:') ? 'Reply' : 
+                 composeSubject.startsWith('Fwd:') ? 'Forward' : 'New Message'}
+              </h3>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="hover:bg-gray-100 rounded-full"
+                onClick={() => {
+                  setShowCompose(false);
+                  setComposeTo('');
+                  setComposeCc('');
+                  setComposeBcc('');
+                  setComposeSubject('');
+                  setComposeBody('');
+                  setShowCc(false);
+                  setShowBcc(false);
+                }}
+              >
+                <X className="h-5 w-5 text-gray-500" />
+              </Button>
+            </div>
+
+            {/* Modal Body */}
+            <div className="flex-1 overflow-y-auto">
+              <div className="p-6 space-y-4">
+                {/* To Field */}
+                <div>
+                  <Label htmlFor="to" className="block text-sm font-medium text-gray-700">To</Label>
+                  <Input
+                    id="to"
+                    value={composeTo}
+                    onChange={(e) => setComposeTo(e.target.value)}
+                    placeholder="recipient@example.com"
+                    className="w-full mt-1 bg-white border-gray-300 text-gray-900"
+                  />
+                </div>
+
+                {/* CC/BCC Toggle Buttons */}
+                <div className="flex items-center gap-4">
+                  <button
+                    type="button"
+                    className="text-blue-600 hover:text-blue-700 text-sm font-medium"
+                    onClick={() => setShowCc(!showCc)}
+                  >
+                    {showCc ? 'Hide Cc' : 'Add Cc'}
+                  </button>
+                  <button
+                    type="button"
+                    className="text-blue-600 hover:text-blue-700 text-sm font-medium"
+                    onClick={() => setShowBcc(!showBcc)}
+                  >
+                    {showBcc ? 'Hide Bcc' : 'Add Bcc'}
+                  </button>
+                </div>
+
+                {/* CC Field */}
+                {showCc && (
+                  <div>
+                    <Label htmlFor="cc" className="block text-sm font-medium text-gray-700">Cc</Label>
+                    <Input
+                      id="cc"
+                      value={composeCc}
+                      onChange={(e) => setComposeCc(e.target.value)}
+                      placeholder="cc@example.com"
+                      className="w-full mt-1 bg-white border-gray-300 text-gray-900"
+                    />
+                  </div>
+                )}
+
+                {/* BCC Field */}
+                {showBcc && (
+                  <div>
+                    <Label htmlFor="bcc" className="block text-sm font-medium text-gray-700">Bcc</Label>
+                    <Input
+                      id="bcc"
+                      value={composeBcc}
+                      onChange={(e) => setComposeBcc(e.target.value)}
+                      placeholder="bcc@example.com"
+                      className="w-full mt-1 bg-white border-gray-300 text-gray-900"
+                    />
+                  </div>
+                )}
+
+                {/* Subject Field */}
+                <div>
+                  <Label htmlFor="subject" className="block text-sm font-medium text-gray-700">Subject</Label>
+                  <Input
+                    id="subject"
+                    value={composeSubject}
+                    onChange={(e) => setComposeSubject(e.target.value)}
+                    placeholder="Enter subject"
+                    className="w-full mt-1 bg-white border-gray-300 text-gray-900"
+                  />
+                </div>
+
+                {/* Message Body */}
+                <div>
+                  <Label htmlFor="message" className="block text-sm font-medium text-gray-700">Message</Label>
+                  <Textarea
+                    id="message"
+                    value={composeBody}
+                    onChange={(e) => setComposeBody(e.target.value)}
+                    placeholder="Write your message..."
+                    className="w-full mt-1 min-h-[200px] bg-white border-gray-300 text-gray-900 resize-none"
+                  />
+                </div>
+              </div>
+            </div>
+
+            {/* Modal Footer */}
+            <div className="flex items-center justify-between px-6 py-3 border-t border-gray-200 bg-white">
+              <div className="flex items-center gap-2">
+                {/* File Input for Attachments */}
+                <input
+                  type="file"
+                  id="file-attachment"
+                  className="hidden"
+                  multiple
+                  onChange={handleFileAttachment}
+                />
+                <label htmlFor="file-attachment">
+                  <Button 
+                    variant="outline" 
+                    size="icon"
+                    className="rounded-full bg-white hover:bg-gray-100 border-gray-300"
+                    onClick={(e) => {
+                      e.preventDefault();
+                      document.getElementById('file-attachment')?.click();
+                    }}
+                  >
+                    <Paperclip className="h-4 w-4 text-gray-600" />
+                  </Button>
+                </label>
+              </div>
+              <div className="flex items-center gap-3">
+                <Button 
+                  variant="ghost"
+                  className="text-gray-600 hover:text-gray-700 hover:bg-gray-100"
+                  onClick={() => setShowCompose(false)}
+                >
+                  Cancel
+                </Button>
+                <Button
+                  className="bg-blue-600 text-white hover:bg-blue-700"
+                  onClick={handleSend}
+                >
+                  Send
+                </Button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
   );
 }
\ No newline at end of file