courrier refactor

app/courrier/page.tsx

@@ -2,10 +2,14 @@
 
 import React, { useState, useEffect } from 'react';
 import { useRouter } from 'next/navigation';
-import { Loader2, AlertCircle, Mail } from 'lucide-react';
+import { 
+  Mail, Loader2, AlertCircle, 
+  ChevronLeft, ChevronRight, Reply, ReplyAll, Forward,
+  Star, FolderOpen
+} from 'lucide-react';
 import { Dialog, DialogContent } from '@/components/ui/dialog';
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
-import { 
+import {
   AlertDialog,
   AlertDialogAction,
   AlertDialogCancel,
@@ -15,6 +19,9 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
 } from "@/components/ui/alert-dialog";
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { Avatar, AvatarFallback } from '@/components/ui/avatar';
+import { Button } from '@/components/ui/button';
 
 // Import components
 import EmailSidebar from '@/components/email/EmailSidebar';
@@ -214,6 +221,18 @@ export default function CourrierPage() {
     };
   };
 
+  // Format date for display
+  const formatDate = (dateString: string) => {
+    const date = new Date(dateString);
+    const now = new Date();
+    
+    if (date.toDateString() === now.toDateString()) {
+      return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+    } else {
+      return date.toLocaleDateString([], { month: 'short', day: 'numeric' });
+    }
+  };
+
   return (
     <div className="h-screen">
       <SimplifiedLoadingFix />
@@ -275,37 +294,41 @@ export default function CourrierPage() {
           onSearch={searchEmails}
         />
         
-        {/* Main content area */}
+        {/* Main content area - fixed-width sidebar and list panel layout */}
         <div className="flex-1 flex overflow-hidden">
-          {/* Sidebar */}
+          {/* Sidebar - fixed width 64px */}
-          <EmailSidebar 
+          <div className="w-64 flex-shrink-0">
-            currentFolder={currentFolder}
+            <EmailSidebar 
-            folders={mailboxes}
+              currentFolder={currentFolder}
-            onFolderChange={changeFolder}
+              folders={mailboxes}
-            onRefresh={() => loadEmails(false)}
+              onFolderChange={changeFolder}
-            onCompose={handleComposeNew}
+              onRefresh={() => loadEmails(false)}
-            isLoading={isLoading}
+              onCompose={handleComposeNew}
-          />
+              isLoading={isLoading}
+            />
+          </div>
           
-          {/* Email list */}
+          {/* Email list - fixed width 320px */}
-          <EmailList 
+          <div className="w-[320px] flex-shrink-0">
-            emails={emails}
+            <EmailList 
-            selectedEmailIds={selectedEmailIds}
+              emails={emails}
-            selectedEmail={selectedEmail}
+              selectedEmailIds={selectedEmailIds}
-            currentFolder={currentFolder}
+              selectedEmail={selectedEmail}
-            isLoading={isLoading}
+              currentFolder={currentFolder}
-            totalEmails={emails.length}
+              isLoading={isLoading}
-            hasMoreEmails={hasMoreEmails}
+              totalEmails={emails.length}
-            onSelectEmail={handleEmailSelect}
+              hasMoreEmails={hasMoreEmails}
-            onToggleSelect={toggleEmailSelection}
+              onSelectEmail={handleEmailSelect}
-            onToggleSelectAll={toggleSelectAll}
+              onToggleSelect={toggleEmailSelection}
-            onBulkAction={handleBulkAction}
+              onToggleSelectAll={toggleSelectAll}
-            onToggleStarred={toggleStarred}
+              onBulkAction={handleBulkAction}
-            onLoadMore={handleLoadMore}
+              onToggleStarred={toggleStarred}
-            onSearch={searchEmails}
+              onLoadMore={handleLoadMore}
-          />
+              onSearch={searchEmails}
+            />
+          </div>
           
-          {/* Email content */}
+          {/* Email content - takes remaining space */}
           <div className="flex-1 h-full overflow-hidden flex flex-col">
             {selectedEmail ? (
               <>
@@ -321,33 +344,36 @@ export default function CourrierPage() {
                     </div>
                     <div className="flex items-center gap-2 flex-shrink-0">
                       <div className="flex items-center border-l border-gray-200 pl-4">
-                        <button 
+                        <Button 
+                          variant="ghost"
                           className="text-gray-600 hover:text-gray-900 px-2 py-1"
                           onClick={() => handleReplyOrForward('reply')}
                         >
                           Reply
-                        </button>
+                        </Button>
-                        <button 
+                        <Button 
+                          variant="ghost"
                           className="text-gray-600 hover:text-gray-900 px-2 py-1"
                           onClick={() => handleReplyOrForward('reply-all')}
                         >
                           Reply All
-                        </button>
+                        </Button>
-                        <button 
+                        <Button 
+                          variant="ghost"
                           className="text-gray-600 hover:text-gray-900 px-2 py-1"
                           onClick={() => handleReplyOrForward('forward')}
                         >
                           Forward
-                        </button>
+                        </Button>
                       </div>
                     </div>
                   </div>
                 </div>
-                
+
-                {/* Email content area */}
+                {/* Email content with avatar and proper scroll area */}
-                <div className="flex-1 overflow-auto">
+                <ScrollArea className="flex-1">
                   <EmailContent email={selectedEmail} />
-                </div>
+                </ScrollArea>
               </>
             ) : (
               <div className="flex flex-col items-center justify-center h-full">

components/email/BulkActionsToolbar.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import React from 'react';
-import { Trash2, EyeOff, Archive } from 'lucide-react';
+import { Trash2, Archive, EyeOff } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 
 interface BulkActionsToolbarProps {
@@ -28,7 +28,7 @@ export default function BulkActionsToolbar({
           onClick={() => onBulkAction('mark-read')}
         >
           <EyeOff className="h-4 w-4 mr-1" />
-          <span className="text-sm">Mark Read</span>
+          <span className="text-sm">Mark as read</span>
         </Button>
         <Button
           variant="ghost"

components/email/EmailContent.tsx

@@ -7,6 +7,7 @@ import { Button } from '@/components/ui/button';
 import { Email } from '@/hooks/use-courrier';
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 import { ScrollArea } from '@/components/ui/scroll-area';
+import { Avatar, AvatarFallback } from '@/components/ui/avatar';
 
 interface EmailContentProps {
   email: Email;
@@ -93,28 +94,48 @@ export default function EmailContent({ email }: EmailContentProps) {
     );
   }
 
-  return (
+  // Format the date for display
-    <ScrollArea className="flex-1">
+  const formatDate = (dateObj: Date) => {
-      <div className="p-6">
+    const now = new Date();
-        <div className="flex items-center gap-4 mb-6">
+    const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
-          <div className="h-10 w-10 bg-gray-100 rounded-full flex items-center justify-center">
+    const yesterday = new Date(today);
-            <span className="text-gray-600 font-medium">
+    yesterday.setDate(yesterday.getDate() - 1);
-              {email.from?.[0]?.name?.[0] || email.from?.[0]?.address?.[0] || '?'}
+    
-            </span>
+    const date = new Date(dateObj);
-          </div>
+    const formattedTime = date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
-          <div>
+    
-            <p className="font-medium text-gray-900">
+    if (date >= today) {
-              {email.from?.[0]?.name || email.from?.[0]?.address || 'Unknown'}
+      return formattedTime;
-            </p>
+    } else if (date >= yesterday) {
-            <p className="text-sm text-gray-500">
+      return `Yesterday, ${formattedTime}`;
-              to {email.to?.[0]?.address || 'you'}
+    } else {
-            </p>
+      return date.toLocaleDateString([], { month: 'short', day: 'numeric' });
-          </div>
+    }
-        </div>
+  };
 
-        {content}
+  return (
-        {renderAttachments()}
+    <div className="email-content p-6">
+      <div className="flex items-center gap-4 mb-6">
+        <Avatar className="h-10 w-10 bg-gray-100">
+          <AvatarFallback className="text-gray-600 font-medium">
+            {email.from?.[0]?.name?.[0] || email.from?.[0]?.address?.[0] || '?'}
+          </AvatarFallback>
+        </Avatar>
+        <div>
+          <p className="font-medium text-gray-900">
+            {email.from?.[0]?.name || email.from?.[0]?.address || 'Unknown'}
+          </p>
+          <p className="text-sm text-gray-500">
+            to {email.to?.[0]?.address || 'you'}
+          </p>
+        </div>
+        <div className="ml-auto text-sm text-gray-500">
+          {formatDate(new Date(email.date))}
+        </div>
       </div>
-    </ScrollArea>
+
+      {content}
+      {renderAttachments()}
+    </div>
   );
 } 

components/email/EmailHeader.tsx

@@ -41,10 +41,10 @@ export default function EmailHeader({
 
   return (
     <div className="border-b bg-white/95 backdrop-blur-sm flex flex-col">
-      {/* Courrier Title */}
+      {/* Courrier Title with improved styling */}
       <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" />
+          <Mail className="h-6 w-6 text-blue-600" />
           <span className="text-xl font-semibold text-gray-900">COURRIER</span>
         </div>
       </div>
@@ -58,7 +58,7 @@ export default function EmailHeader({
               placeholder="Search emails..."
               value={searchQuery}
               onChange={(e) => setSearchQuery(e.target.value)}
-              className="pl-8 pr-8 h-9 bg-gray-50"
+              className="pl-8 pr-8 h-9 bg-gray-50 border-gray-200 focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50"
             />
             {searchQuery && (
               <button
@@ -66,7 +66,7 @@ export default function EmailHeader({
                 onClick={clearSearch}
                 className="absolute right-2 top-1/2 transform -translate-y-1/2"
               >
-                <X className="h-4 w-4 text-gray-400" />
+                <X className="h-4 w-4 text-gray-400 hover:text-gray-600" />
               </button>
             )}
           </form>