courrier refactor

2025-04-26 23:18:51 +02:00 · 2025-04-26 23:18:51 +02:00 · a30198cb2b
commit a30198cb2b
parent dcc2594195
4 changed files with 114 additions and 67 deletions
--- a/app/courrier/page.tsx
+++ b/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 */}
-          <EmailSidebar 
-            currentFolder={currentFolder}
-            folders={mailboxes}
-            onFolderChange={changeFolder}
-            onRefresh={() => loadEmails(false)}
-            onCompose={handleComposeNew}
-            isLoading={isLoading}
-          />
+          {/* Sidebar - fixed width 64px */}
+          <div className="w-64 flex-shrink-0">
+            <EmailSidebar 
+              currentFolder={currentFolder}
+              folders={mailboxes}
+              onFolderChange={changeFolder}
+              onRefresh={() => loadEmails(false)}
+              onCompose={handleComposeNew}
+              isLoading={isLoading}
+            />
+          </div>
          
-          {/* Email list */}
-          <EmailList 
-            emails={emails}
-            selectedEmailIds={selectedEmailIds}
-            selectedEmail={selectedEmail}
-            currentFolder={currentFolder}
-            isLoading={isLoading}
-            totalEmails={emails.length}
-            hasMoreEmails={hasMoreEmails}
-            onSelectEmail={handleEmailSelect}
-            onToggleSelect={toggleEmailSelection}
-            onToggleSelectAll={toggleSelectAll}
-            onBulkAction={handleBulkAction}
-            onToggleStarred={toggleStarred}
-            onLoadMore={handleLoadMore}
-            onSearch={searchEmails}
-          />
+          {/* Email list - fixed width 320px */}
+          <div className="w-[320px] flex-shrink-0">
+            <EmailList 
+              emails={emails}
+              selectedEmailIds={selectedEmailIds}
+              selectedEmail={selectedEmail}
+              currentFolder={currentFolder}
+              isLoading={isLoading}
+              totalEmails={emails.length}
+              hasMoreEmails={hasMoreEmails}
+              onSelectEmail={handleEmailSelect}
+              onToggleSelect={toggleEmailSelection}
+              onToggleSelectAll={toggleSelectAll}
+              onBulkAction={handleBulkAction}
+              onToggleStarred={toggleStarred}
+              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 */}
-                <div className="flex-1 overflow-auto">
+
+                {/* Email content with avatar and proper scroll area */}
+                <ScrollArea className="flex-1">
                  <EmailContent email={selectedEmail} />
-                </div>
+                </ScrollArea>
              </>
            ) : (
              <div className="flex flex-col items-center justify-center h-full">
--- a/components/email/BulkActionsToolbar.tsx
+++ b/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"
--- a/components/email/EmailContent.tsx
+++ b/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 (
-    <ScrollArea className="flex-1">
-      <div className="p-6">
-        <div className="flex items-center gap-4 mb-6">
-          <div className="h-10 w-10 bg-gray-100 rounded-full flex items-center justify-center">
-            <span className="text-gray-600 font-medium">
-              {email.from?.[0]?.name?.[0] || email.from?.[0]?.address?.[0] || '?'}
-            </span>
-          </div>
-          <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>
+  // Format the date for display
+  const formatDate = (dateObj: Date) => {
+    const now = new Date();
+    const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+    const yesterday = new Date(today);
+    yesterday.setDate(yesterday.getDate() - 1);
+    
+    const date = new Date(dateObj);
+    const formattedTime = date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+    
+    if (date >= today) {
+      return formattedTime;
+    } else if (date >= yesterday) {
+      return `Yesterday, ${formattedTime}`;
+    } else {
+      return date.toLocaleDateString([], { month: 'short', day: 'numeric' });
+    }
+  };

-        {content}
-        {renderAttachments()}
+  return (
+    <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>
  );
 } 
--- a/components/email/EmailHeader.tsx
+++ b/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>