From 063a7c9637f9783db1e7786ffe49c5673234e97b Mon Sep 17 00:00:00 2001
From: alma <alma@governance-labs.org>
Date: Wed, 16 Apr 2025 13:17:26 +0200
Subject: [PATCH] mail page ui correction maj compose 15

---
 app/mail/page.tsx | 331 ++++++++++++++++++++++++++++++----------------
 1 file changed, 215 insertions(+), 116 deletions(-)

diff --git a/app/mail/page.tsx b/app/mail/page.tsx
index 656bb8f..e790e83 100644
--- a/app/mail/page.tsx
+++ b/app/mail/page.tsx
@@ -25,6 +25,7 @@ import {
   Search, ChevronDown, Folder, ChevronUp, Reply, Forward, ReplyAll, 
   MoreHorizontal, FolderOpen, X, Paperclip, MessageSquare, Copy, EyeOff 
 } from 'lucide-react';
+import { ScrollArea } from '@/components/ui/scroll-area';
 
 interface Account {
   id: number;
@@ -915,9 +916,19 @@ export default function MailPage() {
                     ${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 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>
 
@@ -976,6 +987,45 @@ export default function MailPage() {
           )}
         </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="flex-1 overflow-y-auto p-3">
           <ul className="space-y-1">
@@ -1062,137 +1112,185 @@ export default function MailPage() {
       {/* Main content */}
       <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="p-4 border-b border-gray-100 flex justify-between items-center">
-            <div className="flex items-center gap-4">
-              {filteredEmails.length > 0 && (
-                <input
-                  type="checkbox"
-                  checked={selectedEmails.length === filteredEmails.length}
-                  onChange={toggleSelectAll}
-                  className="h-4 w-4 text-blue-600 rounded border-gray-300 focus:ring-blue-500"
+        <div className="w-[400px] bg-white/95 backdrop-blur-sm border-r border-gray-100 flex flex-col">
+          <div className="flex-none p-4 border-b border-gray-100">
+            <div className="flex items-center gap-2 mb-4">
+              <div className="relative flex-1">
+                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
+                <Input
+                  type="text"
+                  placeholder="Search emails..."
+                  value={searchQuery}
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                  className="pl-10 w-full bg-gray-50"
                 />
-              )}
-              <h2 className="text-lg font-semibold text-gray-800 capitalize">
-                {currentView === 'starred' ? 'Starred' : currentView}
-              </h2>
+              </div>
             </div>
-            <div className="text-sm text-gray-500">
-              {filteredEmails.length} emails
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-4">
+                {filteredEmails.length > 0 && (
+                  <input
+                    type="checkbox"
+                    checked={selectedEmails.length === filteredEmails.length}
+                    onChange={toggleSelectAll}
+                    className="h-4 w-4 text-blue-600 rounded border-gray-300 focus:ring-blue-500"
+                  />
+                )}
+                <h2 className="text-lg font-semibold text-gray-800 capitalize">
+                  {currentView === 'starred' ? 'Starred' : currentView}
+                </h2>
+              </div>
+              <div className="text-sm text-gray-500">
+                {filteredEmails.length} emails
+              </div>
             </div>
           </div>
-
-          {/* Email List */}
-          <div className="divide-y divide-gray-200">
-            {filteredEmails.map((email) => (
-              <div
-                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">
-                  <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()}
-                        onCheckedChange={(checked) => {
-                          if (checked) {
-                            setSelectedEmails([...selectedEmails, email.id.toString()]);
-                          } else {
-                            setSelectedEmails(selectedEmails.filter(id => id !== email.id.toString()));
-                          }
-                        }}
-                      />
-                      <div>
-                        <p className={`text-sm ${!email.read ? 'font-semibold' : ''}`}>
-                          {email.fromName || email.from}
-                        </p>
-                        <p className="text-sm text-gray-600 truncate">{email.subject}</p>
+          
+          <ScrollArea className="flex-1">
+            <div className="divide-y divide-gray-100">
+              {filteredEmails.map((email) => (
+                <div
+                  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">
+                    <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()}
+                          onCheckedChange={(checked) => {
+                            if (checked) {
+                              setSelectedEmails([...selectedEmails, email.id.toString()]);
+                            } else {
+                              setSelectedEmails(selectedEmails.filter(id => id !== email.id.toString()));
+                            }
+                          }}
+                        />
+                        <div>
+                          <p className={`text-sm ${!email.read ? 'font-semibold' : ''}`}>
+                            {email.fromName || email.from}
+                          </p>
+                          <p className="text-sm text-gray-600 truncate">{email.subject}</p>
+                        </div>
+                      </div>
+                      <div className="flex items-center space-x-2">
+                        <span className="text-xs text-gray-500">{formatDate(email.date)}</span>
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          className="text-gray-400 hover:text-yellow-400"
+                          onClick={(e) => toggleStarred(email.id, e)}
+                        >
+                          <Star className={`h-4 w-4 ${email.starred ? 'fill-yellow-400 text-yellow-400' : ''}`} />
+                        </Button>
                       </div>
-                    </div>
-                    <div className="flex items-center space-x-2">
-                      <span className="text-xs text-gray-500">{formatDate(email.date)}</span>
-                      <Button
-                        variant="ghost"
-                        size="sm"
-                        className="text-gray-400 hover:text-yellow-400"
-                        onClick={(e) => toggleStarred(email.id, e)}
-                      >
-                        <Star className={`h-4 w-4 ${email.starred ? 'fill-yellow-400 text-yellow-400' : ''}`} />
-                      </Button>
                     </div>
                   </div>
                 </div>
-              </div>
-            ))}
-          </div>
+              ))}
+            </div>
+          </ScrollArea>
         </div>
 
         {/* Email preview panel */}
-        <div className="flex-1 bg-white/95 backdrop-blur-sm overflow-y-auto">
+        <div className="flex-1 bg-white/95 backdrop-blur-sm flex flex-col">
           {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 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>
+                    <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>
 
-              <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>
+              {/* 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="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);
@@ -1226,8 +1324,9 @@ export default function MailPage() {
                       return selectedEmail.body;
                     }
                   })()}
-              </div>
-            </div>
+                </div>
+              </ScrollArea>
+            </>
           ) : (
             <div className="flex flex-col items-center justify-center h-full">
               <Mail className="h-12 w-12 text-gray-400 mb-4" />