mail page ui correction maj compose 15

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,10 +916,20 @@ 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 justify-between">
             <div className="flex items-center gap-2">
-            <Mail className="h-6 w-6 text-gray-600" />
+              <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 */}
@@ -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,8 +1112,21 @@ 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="w-[400px] bg-white/95 backdrop-blur-sm border-r border-gray-100 flex flex-col">
-          <div className="p-4 border-b border-gray-100 flex justify-between items-center">
+          <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"
+                />
+              </div>
+            </div>
+            <div className="flex items-center justify-between">
               <div className="flex items-center gap-4">
                 {filteredEmails.length > 0 && (
                   <input
@@ -1081,9 +1144,10 @@ export default function MailPage() {
                 {filteredEmails.length} emails
               </div>
             </div>
+          </div>
           
-          {/* Email List */}
+          <ScrollArea className="flex-1">
-          <div className="divide-y divide-gray-200">
+            <div className="divide-y divide-gray-100">
               {filteredEmails.map((email) => (
                 <div
                   key={email.id}
@@ -1129,14 +1193,29 @@ export default function MailPage() {
                 </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">
+              {/* Email actions header */}
-                <h2 className="text-xl font-semibold text-gray-900">{selectedEmail.subject}</h2>
+              <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"
@@ -1170,9 +1249,28 @@ export default function MailPage() {
                     >
                       <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>
@@ -1227,7 +1325,8 @@ export default function MailPage() {
                     }
                   })()}
                 </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" />