courrier refactor

app/globals.css

@@ -158,3 +158,57 @@ div[style*="---------- Forwarded message ---------"] {
   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;
+}
+

components/email/EmailContent.tsx

@@ -43,7 +43,7 @@ export default function EmailContent({ email }: EmailContentProps) {
         if (isForwarded || isReply) {
           setContent(
             <div 
-              className="email-content prose max-w-none"
+              className="email-content prose max-w-none preserve-email-formatting"
               dangerouslySetInnerHTML={{ __html: sanitizedHtml }}
               dir="rtl"
               style={{ textAlign: 'right' }}
@@ -53,7 +53,7 @@ export default function EmailContent({ email }: EmailContentProps) {
           // For regular emails, wrap in the same structure used in the compose editor
           setContent(
             <div 
-              className="email-content prose max-w-none" 
+              className="email-content prose max-w-none preserve-email-formatting" 
               dir="rtl" 
               style={{ textAlign: 'right' }}
             >

components/email/EmailPreview.tsx

@@ -72,7 +72,7 @@ export default function EmailPreview({ email, loading = false, onReply }: EmailP
       if (isForwarded || isReply) {
         return (
           <div 
-            className="email-content prose max-w-none dark:prose-invert"
+            className="email-content prose max-w-none dark:prose-invert preserve-email-formatting"
             dangerouslySetInnerHTML={{ __html: sanitizedContent }}
             dir="rtl"
             style={{ textAlign: 'right' }}
@@ -80,10 +80,10 @@ export default function EmailPreview({ email, loading = false, onReply }: EmailP
         );
       }
       
-      // For regular emails, wrap in the same structure used in the compose editor
+      // For regular emails, preserve all HTML elements with minimal wrapping
       return (
         <div 
-          className="email-content prose max-w-none dark:prose-invert" 
+          className="email-content prose max-w-none dark:prose-invert preserve-email-formatting" 
           dir="rtl" 
           style={{ textAlign: 'right' }}
         >

lib/utils/email-formatter.ts

@@ -108,14 +108,34 @@ export function formatEmailDate(date: Date | string | undefined): string {
 /**
  * Sanitize HTML content before processing or displaying
  * This ensures the content is properly sanitized while preserving text direction
- * @param content HTML content to sanitize
+ * @param html HTML content to sanitize
  * @returns Sanitized HTML with preserved text direction
  */
-export function sanitizeHtml(content: string): string {
-  if (!content) return '';
+export function sanitizeHtml(html: string): string {
+  if (!html) return '';
   
-  // Sanitize the HTML using our configured DOMPurify with text direction preserved
-  return DOMPurify.sanitize(content);
+  try {
+    // Use DOMPurify but ensure we keep all elements and attributes that might be in emails
+    const clean = DOMPurify.sanitize(html, {
+      ADD_TAGS: ['button', 'style', 'img', 'iframe', 'meta'],
+      ADD_ATTR: ['target', 'rel', 'style', 'class', 'id', 'href', 'src', 'alt', 'title', 'width', 'height', 'onclick'],
+      KEEP_CONTENT: true,
+      WHOLE_DOCUMENT: false,
+      ALLOW_DATA_ATTR: true,
+      ALLOW_UNKNOWN_PROTOCOLS: true,
+      FORCE_BODY: false,
+      RETURN_DOM: false,
+      RETURN_DOM_FRAGMENT: false,
+    });
+    
+    return clean;
+  } catch (e) {
+    console.error('Error sanitizing HTML:', e);
+    // Fall back to a basic sanitization approach
+    return html
+      .replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '')
+      .replace(/on\w+="[^"]*"/g, '');
+  }
 }
 
 /**