courrier refactor rebuild 2

components/email/ComposeEmail.tsx

@@ -146,7 +146,7 @@ export default function ComposeEmail(props: ComposeEmailAllProps) {
   const [cc, setCc] = useState<string>('');
   const [bcc, setBcc] = useState<string>('');
   const [subject, setSubject] = useState<string>('');
-  const [emailContent, setEmailContent] = useState<string>('');
+  const [emailContent, setEmailContent] = useState<string>('<div></div>');
   const [showCc, setShowCc] = useState<boolean>(false);
   const [showBcc, setShowBcc] = useState<boolean>(false);
   const [sending, setSending] = useState<boolean>(false);
@@ -158,129 +158,36 @@ export default function ComposeEmail(props: ComposeEmailAllProps) {
   
   // Initialize the form when replying to or forwarding an email
   useEffect(() => {
-    if (initialEmail && type !== 'new') {
+    if (initialEmail && (type === 'reply' || type === 'reply-all' || type === 'forward')) {
       try {
-        // Set recipients based on type
+        // Handle reply and reply all
         if (type === 'reply' || type === 'reply-all') {
-          // Reply goes to the original sender
+          const result = formatReplyEmail(initialEmail, type === 'reply-all' ? 'reply-all' : 'reply');
-          setTo(formatEmailAddresses(initialEmail.from || []));
           
-          // For reply-all, include all original recipients in CC
+          setTo(result.to || '');
-          if (type === 'reply-all') {
+          if (type === 'reply-all' && result.cc) {
-            const allRecipients = [
+            setCc(result.cc);
-              ...(initialEmail.to || []),
+            setShowCc(Boolean(result.cc));
-              ...(initialEmail.cc || [])
-            ];
-            // Filter out the current user if they were a recipient
-            // This would need some user context to properly implement
-            setCc(formatEmailAddresses(allRecipients));
           }
+          setSubject(result.subject || `Re: ${initialEmail.subject || ''}`);
+          setEmailContent('<div></div>');
+        }
+        
+        // Handle forward
+        if (type === 'forward') {
+          const result = formatForwardedEmail(initialEmail);
           
-          // Set subject with Re: prefix
+          setSubject(result.subject || `Fwd: ${initialEmail.subject || ''}`);
-          const subjectBase = initialEmail.subject || '(No subject)';
+          setEmailContent('<div></div>');
-          const subject = subjectBase.match(/^Re:/i) ? subjectBase : `Re: ${subjectBase}`;
-          setSubject(subject);
-          
-          // Format the reply content with the quoted message included directly
-          const content = initialEmail.content || initialEmail.html || initialEmail.text || '';
-          const sender = initialEmail.from && initialEmail.from.length > 0 
-            ? initialEmail.from[0].name || initialEmail.from[0].address 
-            : 'Unknown sender';
-          const date = initialEmail.date ? 
-            (typeof initialEmail.date === 'string' ? new Date(initialEmail.date) : initialEmail.date) : 
-            new Date();
-          
-          // Format date for display
-          const formattedDate = date.toLocaleString('en-US', {
-            weekday: 'short',
-            year: 'numeric',
-            month: 'short',
-            day: 'numeric',
-            hour: '2-digit',
-            minute: '2-digit'
-          });
-          
-          // Create reply content with quote
-          const replyContent = `
-            <div><br></div>
-            <div><br></div>
-            <div><br></div>
-            <div><br></div>
-            <div style="font-weight: 400; color: #555; margin: 20px 0 8px 0; font-size: 13px;">On ${formattedDate}, ${sender} wrote:</div>
-            <blockquote style="margin: 0; padding: 10px 0 10px 15px; border-left: 2px solid #ddd; color: #505050; background-color: #f9f9f9; border-radius: 4px;">
-              <div style="font-size: 13px;">
-                ${content}
-              </div>
-            </blockquote>
-          `;
-          
-          setEmailContent(replyContent);
-          
-          // Show CC field if there are CC recipients
-          if (initialEmail.cc && initialEmail.cc.length > 0) {
-            setShowCc(true);
-          }
-        } 
-        else if (type === 'forward') {
-          // Set subject with Fwd: prefix
-          const subjectBase = initialEmail.subject || '(No subject)';
-          const subject = subjectBase.match(/^(Fwd|FW|Forward):/i) ? subjectBase : `Fwd: ${subjectBase}`;
-          setSubject(subject);
-          
-          // Format the forward content with the original email included directly
-          const content = initialEmail.content || initialEmail.html || initialEmail.text || '';
-          const fromString = formatEmailAddresses(initialEmail.from || []);
-          const toString = formatEmailAddresses(initialEmail.to || []);
-          const date = initialEmail.date ? 
-            (typeof initialEmail.date === 'string' ? new Date(initialEmail.date) : initialEmail.date) : 
-            new Date();
-          
-          // Format date for display
-          const formattedDate = date.toLocaleString('en-US', {
-            weekday: 'short',
-            year: 'numeric',
-            month: 'short',
-            day: 'numeric',
-            hour: '2-digit',
-            minute: '2-digit'
-          });
-          
-          // Create forwarded content
-          const forwardContent = `
-            <div><br></div>
-            <div><br></div>
-            <div><br></div>
-            <div><br></div>
-            <div style="border-top: 1px solid #ccc; margin-top: 10px; padding-top: 10px;">
-              <div style="font-family: Arial, sans-serif; color: #333;">
-                <div style="margin-bottom: 15px;">
-                  <div>---------- Forwarded message ---------</div>
-                  <div><b>From:</b> ${fromString}</div>
-                  <div><b>Date:</b> ${formattedDate}</div>
-                  <div><b>Subject:</b> ${initialEmail.subject || ''}</div>
-                  <div><b>To:</b> ${toString}</div>
-                </div>
-                <div class="email-original-content">
-                  ${content}
-                </div>
-              </div>
-            </div>
-          `;
-          
-          setEmailContent(forwardContent);
-          
-          // If the original email has attachments, we should include them
-          if (initialEmail.attachments && initialEmail.attachments.length > 0) {
-            const formattedAttachments = initialEmail.attachments.map(att => ({
-              name: att.filename || 'attachment',
-              type: att.contentType || 'application/octet-stream',
-              content: att.content || ''
-            }));
-            setAttachments(formattedAttachments);
-          }
         }
       } catch (error) {
         console.error('Error initializing compose form:', error);
+        // Set default subject if we couldn't format it
+        if (initialEmail.subject) {
+          setSubject(type === 'forward' 
+            ? `Fwd: ${initialEmail.subject}` 
+            : `Re: ${initialEmail.subject}`);
+        }
       }
     }
   }, [initialEmail, type]);
@@ -462,6 +369,25 @@ export default function ComposeEmail(props: ComposeEmailAllProps) {
                   preserveFormatting={true}
                 />
               </div>
+              
+              {/* Use QuotedEmailContent component */}
+              {initialEmail && (type === 'reply' || type === 'reply-all' || type === 'forward') && (
+                <QuotedEmailContent
+                  content={initialEmail.content || initialEmail.html || initialEmail.text || ''}
+                  sender={{ 
+                    name: initialEmail.from && initialEmail.from.length > 0 ? initialEmail.from[0].name : undefined,
+                    email: initialEmail.from && initialEmail.from.length > 0 ? initialEmail.from[0].address : 'unknown@example.com'
+                  }}
+                  date={initialEmail.date || new Date()}
+                  type={type === 'forward' ? 'forward' : 'reply'}
+                  subject={initialEmail.subject}
+                  recipients={initialEmail.to?.map(to => ({
+                    name: to.name,
+                    email: to.address
+                  }))}
+                  className="mt-4"
+                />
+              )}
             </div>
             
             {/* Attachments */}
@@ -813,18 +739,14 @@ function LegacyAdapter({
               />
             </div>
 
-            {/* Message Body */}
+            {/* Message content */}
-            <div className="flex-1 min-h-[200px] flex flex-col overflow-hidden">
+            <div className="flex-1 p-4 mt-2 border rounded-md relative min-h-[200px] bg-white">
-              <Label htmlFor="message" className="flex-none block text-sm font-medium text-gray-700 mb-2">Message</Label>
+              <div
-              <div className="flex-1 border border-gray-300 rounded-md overflow-hidden">
+                className="outline-none w-full h-full"
-                <RichEmailEditor
+                contentEditable
-                  initialContent={composeBody}
+                dangerouslySetInnerHTML={{ __html: composeBody }}
-                  onChange={setComposeBody}
+                onInput={(e) => setComposeBody(e.currentTarget.innerHTML)}
-                  minHeight="200px"
+              />
-                  maxHeight="none"
-                  preserveFormatting={true}
-                />
-              </div>
             </div>
             
             {/* Attachments */}

components/email/QuotedEmailContent.tsx

@@ -12,6 +12,8 @@ interface QuotedEmailContentProps {
   date: Date | string;
   type: 'reply' | 'forward';
   className?: string;
+  subject?: string;
+  recipients?: Array<{name?: string; email: string}>;
 }
 
 /**
@@ -22,7 +24,9 @@ const QuotedEmailContent: React.FC<QuotedEmailContentProps> = ({
   sender,
   date,
   type,
-  className = ''
+  className = '',
+  subject,
+  recipients
 }) => {
   // Format the date
   const formatDate = (date: Date | string) => {
@@ -48,6 +52,16 @@ const QuotedEmailContent: React.FC<QuotedEmailContentProps> = ({
   const senderName = sender.name || sender.email;
   const formattedDate = formatDate(date);
   
+  // Format recipients for display
+  const formatRecipientList = (recipients?: Array<{name?: string; email: string}>) => {
+    if (!recipients || recipients.length === 0) return '';
+    
+    return recipients.map(r => {
+      const displayName = r.name || r.email;
+      return `${displayName} <${r.email}>`;
+    }).join(', ');
+  };
+  
   // Create header based on type
   const renderQuoteHeader = () => {
     if (type === 'reply') {
@@ -62,8 +76,8 @@ const QuotedEmailContent: React.FC<QuotedEmailContentProps> = ({
           <div>---------- Forwarded message ---------</div>
           <div><b>From:</b> {senderName} &lt;{sender.email}&gt;</div>
           <div><b>Date:</b> {formattedDate}</div>
-          <div><b>Subject:</b> {/* Subject would be passed as a prop if needed */}</div>
+          <div><b>Subject:</b> {subject || 'No Subject'}</div>
-          <div><b>To:</b> {/* Recipients would be passed as a prop if needed */}</div>
+          <div><b>To:</b> {formatRecipientList(recipients) || 'No Recipients'}</div>
         </div>
       );
     }