courrier refactor rebuild preview

app/globals.css

@@ -74,144 +74,6 @@
   }
 }
 
-/* Email specific styles */
-.email-content table { width: 100%; border-collapse: collapse; }
-.email-content table.table-container { width: auto; margin-bottom: 20px; }
-.email-content td, .email-content th { padding: 8px; border: 1px solid #e5e7eb; }
-.email-content img { max-width: 100%; height: auto; }
-.email-content div[style] { max-width: 100% !important; }
-.email-content * { max-width: 100% !important; word-wrap: break-word; }
-.email-content font { font-family: inherit; }
-.email-content .total-row td { border-top: 1px solid #e5e7eb; }
-.email-content a { color: #3b82f6; text-decoration: underline; }
-.email-content p { margin-bottom: 0.75em; }
-.email-content .header { margin-bottom: 1em; }
-.email-content .footer { font-size: 0.875rem; color: #6b7280; margin-top: 1em; }
-
-/* Email editor styles */
-.email-editor {
-  /* Allow text direction to be controlled by component */
-  direction: inherit;
-  unicode-bidi: isolate;
-  text-align: inherit;
-}
-
-/* Email content wrapper should respect natural text direction */
-.email-content-wrapper {
-  direction: rtl;
-  unicode-bidi: isolate;
-  text-align: right;
-  border: 1px solid #e2e8f0;
-  border-radius: 0.375rem;
-  overflow: hidden;
-}
-
-.email-content {
-  direction: rtl;
-  text-align: right;
-}
-
-.email-content-wrapper * {
-  max-width: 100%;
-  word-wrap: break-word;
-}
-
-/* Styles for forwarded/replied content */
-.email-original-content {
-  padding-left: 10px;
-  border-left: 2px solid #e0e0e0;
-  margin: 10px 0;
-  color: #555;
-  font-size: 13px;
-}
-
-.quote-header {
-  margin: 10px 0;
-  color: #666;
-  font-size: 13px;
-}
-
-blockquote.quoted-content {
-  padding-left: 10px;
-  border-left: 3px solid #ddd;
-  margin: 5px 0;
-  color: #555;
-  background-color: #f8f8f8;
-  border-radius: 4px;
-  font-size: 13px;
-}
-
-/* Forwarded message header styling */
-div[style*="---------- Forwarded message ---------"] {
-  color: #555;
-  font-family: Arial, sans-serif;
-  margin-bottom: 15px;
-}
-
-/* Make sure reply-body class is properly styled */
-.reply-body {
-  margin-top: 20px;
-}
-
-/* Match spacing in ComposerEmail */
-.email-content > div[style*="min-height"] {
-  padding: 16px;
-}
-
-/* Enhanced email content preservation */
-.preserve-email-formatting button,
-.preserve-email-formatting a[role="button"],
-.preserve-email-formatting a.button,
-.preserve-email-formatting .button,
-.preserve-email-formatting [class*="btn"],
-.preserve-email-formatting [class*="button"] {
-  display: inline-block;
-  padding: 0.5rem 1rem;
-  border-radius: 0.25rem;
-  background-color: #f97316; /* Orange for the Confirm Now button */
-  color: white !important;
-  text-decoration: none;
-  font-weight: 500;
-  text-align: center;
-  cursor: pointer;
-  border: none;
-  margin: 0.5rem 0;
-}
-
-/* Ensure images are displayed properly */
-.preserve-email-formatting img {
-  max-width: 100%;
-  height: auto;
-  display: inline-block;
-}
-
-/* Ensure divs with background images are displayed */
-.preserve-email-formatting [style*="background-image"] {
-  background-size: contain;
-  background-repeat: no-repeat;
-  background-position: center;
-  min-height: 40px;
-}
-
-/* Preserve text styling */
-.preserve-email-formatting p,
-.preserve-email-formatting div,
-.preserve-email-formatting span {
-  margin-bottom: 0.75rem;
-  max-width: 100%;
-  word-break: break-word;
-}
-
-/* Ensure the prose class doesn't override important email styling */
-.prose.preserve-email-formatting a {
-  text-decoration: none;
-  color: #3b82f6;
-}
-
-.prose.preserve-email-formatting img {
-  margin: 0;
-}
-
 /* Email display styles */
 .email-content-display {
   max-width: 100%;
@@ -311,3 +173,17 @@ div[style*="---------- Forwarded message ---------"] {
   margin-bottom: 0;
 }
 
+/* Forwarded message header styling */
+.email-content-display div {
+  color: #555;
+}
+
+/* Forwarded message styling */
+.email-content-display div[style*="forwarded message"],
+.email-content-display div[class*="forwarded-message"],
+.email-content-display div[class*="forwarded_message"] {
+  color: #555;
+  font-family: Arial, sans-serif;
+  margin-bottom: 15px;
+}
+

components/email/EmailContent.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
 import { Loader2, Paperclip, Download } from 'lucide-react';
 import { sanitizeHtml } from '@/lib/utils/email-formatter';
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';

components/email/EmailPreview.tsx

@@ -52,8 +52,6 @@ interface EmailPreviewProps {
 }
 
 export default function EmailPreview({ email, loading = false, onReply }: EmailPreviewProps) {
-  const [contentLoading, setContentLoading] = useState<boolean>(false);
-  
   // Format the date
   const formatDate = (date: Date | string) => {
     if (!date) return '';
@@ -81,7 +79,7 @@ export default function EmailPreview({ email, loading = false, onReply }: EmailP
   };
   
   // Display loading state
-  if (loading || contentLoading) {
+  if (loading) {
     return (
       <div className="flex items-center justify-center h-full p-6">
         <div className="text-center">