courrier clean 2

components/ComposeEmail.tsx

@@ -86,6 +86,7 @@ export default function ComposeEmail({
   const [sending, setSending] = useState(false);
   const editorRef = useRef<HTMLDivElement>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
+  const composeBodyRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     if (editorRef.current) {
@@ -101,7 +102,19 @@ export default function ComposeEmail({
       const formattedEmail = formatEmailForReply(replyTo as any, 'reply');
       setComposeTo(formattedEmail.to);
       setComposeSubject(formattedEmail.subject);
-      setComposeBody(formattedEmail.body);
+      
+      // Use the body but preserve the original UI styling
+      // Extract just the content portion from the client formatter output 
+      // and apply the original styling
+      let bodyContent = formattedEmail.body;
+      
+      // Apply DOMPurify to the content for safety
+      bodyContent = DOMPurify.sanitize(bodyContent, {
+        ADD_TAGS: ['style'],
+        FORBID_TAGS: ['script', 'iframe']
+      });
+      
+      setComposeBody(bodyContent);
       
       // Show CC if needed for reply-all
       if (formattedEmail.cc) {
@@ -116,36 +129,49 @@ export default function ComposeEmail({
 
   // Initialize forwarded email content
   const initializeForwardedEmail = async (email: any) => {
-    console.log('Initializing forwarded email:', email);
+    if (!email) return;
 
+    console.log('Initializing forwarded email:', email);
+    
     // Use our client-side formatter
     const formattedEmail = formatEmailForForward(email);
     
     // Set the formatted subject with Fwd: prefix
     setComposeSubject(formattedEmail.subject);
     
-    // Get the email content and create a forward with proper formatting
+    // Create header for forwarded email - use the original styling
-    let finalContent = '';
+    const headerHtml = formattedEmail.headerHtml;
     
-    // Add the email header with proper styling
+    // Prepare content
-    finalContent += formattedEmail.headerHtml;
+    let contentHtml = '<div style="color: #666; font-style: italic; padding: 15px; border: 1px dashed #ccc; margin: 10px 0; text-align: center; background-color: #f9f9f9;">No content available</div>';
     
-    // Add the original content
     if (email.content) {
-      finalContent += email.content;
+      // Sanitize the content
+      contentHtml = DOMPurify.sanitize(email.content, {
+        ADD_TAGS: ['style'],
+        FORBID_TAGS: ['script', 'iframe']
+      });
     } else if (email.html) {
-      finalContent += email.html;
+      contentHtml = DOMPurify.sanitize(email.html, {
+        ADD_TAGS: ['style'],
+        FORBID_TAGS: ['script', 'iframe']
+      });
     } else if (email.text) {
-      finalContent += `<pre>${email.text}</pre>`;
+      contentHtml = `<pre>${email.text}</pre>`;
     } else if (email.body) {
-      finalContent += email.body;
+      contentHtml = DOMPurify.sanitize(email.body, {
-    } else {
+        ADD_TAGS: ['style'],
-      finalContent += `<div style="border: 1px dashed #ccc; padding: 10px; margin: 10px 0; text-align: center; background-color: #f9f9f9;">
+        FORBID_TAGS: ['script', 'iframe']
-        No content available
+      });
-      </div>`;
     }
     
-    setComposeBody(finalContent);
+    // Set body with header and content, preserving the original UI layout
+    setComposeBody(`
+      ${headerHtml}
+      <div style="margin-top: 10px;">
+        ${contentHtml}
+      </div>
+    `);
   };
 
   if (!showCompose) return null;
@@ -162,99 +188,106 @@ export default function ComposeEmail({
     }
   };
 
+  // Body input area
+  const renderBodyInput = () => (
+    <div 
+      className="min-h-[200px] max-h-[400px] overflow-y-auto p-3 bg-white border border-gray-300 rounded-md"
+      contentEditable 
+      dangerouslySetInnerHTML={{ __html: composeBody || '' }}
+      onInput={(e) => {
+        const target = e.target as HTMLDivElement;
+        setComposeBody(target.innerHTML);
+      }}
+      ref={composeBodyRef}
+      style={{ direction: 'ltr' }}
+    />
+  );
+
   return (
-    <div className="fixed inset-0 bg-black/60 flex items-center justify-center z-50 p-4">
+    <Card className={`fixed inset-0 z-50 mx-auto my-8 max-w-3xl rounded-md bg-white shadow-lg flex flex-col ${showCompose ? 'block' : 'hidden'}`} style={{ maxHeight: 'calc(100vh - 4rem)' }}>
-      <Card className="w-full max-w-3xl">
+      <CardHeader className="bg-white p-4 border-b">
-        <CardHeader className="flex flex-row items-center border-b p-4">
+        <div className="flex justify-between items-center">
-          <CardTitle className="text-lg">
+          <CardTitle className="text-xl font-semibold text-gray-800">{replyTo ? 'Reply' : forwardFrom ? 'Forward' : 'New Message'}</CardTitle>
-            {replyTo ? 'Reply' : forwardFrom ? 'Forward' : 'New Message'}
+          <Button variant="ghost" size="icon" onClick={onCancel}>
-          </CardTitle>
+            <X className="h-5 w-5" />
-          <Button
-            variant="ghost"
-            size="icon"
-            className="ml-auto"
-            onClick={onCancel}
-          >
-            <X className="h-4 w-4" />
           </Button>
-        </CardHeader>
+        </div>
-        <CardContent className="p-4 space-y-4">
+      </CardHeader>
-          <div className="space-y-2">
+      <CardContent className="flex-grow overflow-auto p-4 bg-white">
-            <div className="flex items-center border-b py-2">
+        <div className="space-y-4">
-              <span className="w-16 text-sm text-gray-500">To:</span>
+          <div className="flex items-center">
-              <Input
+            <span className="w-16 text-sm font-medium text-gray-600">To:</span>
-                value={composeTo}
+            <Input 
-                onChange={(e) => setComposeTo(e.target.value)}
+              className="flex-1 bg-white" 
-                className="border-0 focus-visible:ring-0"
+              value={composeTo} 
-                placeholder="recipient@example.com"
+              onChange={(e) => setComposeTo(e.target.value)} 
-              />
+            />
-            </div>
-
-            {showCc && (
-              <div className="flex items-center border-b py-2">
-                <span className="w-16 text-sm text-gray-500">Cc:</span>
-                <Input
-                  value={composeCc}
-                  onChange={(e) => setComposeCc(e.target.value)}
-                  className="border-0 focus-visible:ring-0"
-                  placeholder="cc@example.com"
-                />
-              </div>
-            )}
-
-            {showBcc && (
-              <div className="flex items-center border-b py-2">
-                <span className="w-16 text-sm text-gray-500">Bcc:</span>
-                <Input
-                  value={composeBcc}
-                  onChange={(e) => setComposeBcc(e.target.value)}
-                  className="border-0 focus-visible:ring-0"
-                  placeholder="bcc@example.com"
-                />
-              </div>
-            )}
-
-            <div className="flex items-center border-b py-2">
-              <span className="w-16 text-sm text-gray-500">Subject:</span>
-              <Input
-                value={composeSubject}
-                onChange={(e) => setComposeSubject(e.target.value)}
-                className="border-0 focus-visible:ring-0"
-                placeholder="Subject"
-              />
-            </div>
-
-            <div className="flex items-center text-xs text-blue-600 space-x-2 py-1">
-              {!showCc && (
-                <button onClick={() => setShowCc(true)} className="hover:underline">
-                  Add Cc
-                </button>
-              )}
-              {!showBcc && (
-                <button onClick={() => setShowBcc(true)} className="hover:underline">
-                  Add Bcc
-                </button>
-              )}
-            </div>
           </div>
 
-          <div
+          {showCc && (
-            ref={editorRef}
+            <div className="flex items-center">
-            className="min-h-[300px] p-2 focus:outline-none overflow-auto"
+              <span className="w-16 text-sm font-medium text-gray-600">Cc:</span>
-            contentEditable
+              <Input 
-            dangerouslySetInnerHTML={{ __html: composeBody }}
+                className="flex-1 bg-white" 
-            onInput={(e) => setComposeBody(e.currentTarget.innerHTML)}
+                value={composeCc} 
-          />
+                onChange={(e) => setComposeCc(e.target.value)} 
+              />
+            </div>
+          )}
+
+          {showBcc && (
+            <div className="flex items-center">
+              <span className="w-16 text-sm font-medium text-gray-600">Bcc:</span>
+              <Input 
+                className="flex-1 bg-white" 
+                value={composeBcc} 
+                onChange={(e) => setComposeBcc(e.target.value)} 
+              />
+            </div>
+          )}
+
+          <div className="flex">
+            <Button variant="link" onClick={() => setShowCc(!showCc)} className="p-0 h-auto text-sm">
+              {showCc ? (
+                <ChevronUp className="h-4 w-4 mr-1" />
+              ) : (
+                <ChevronDown className="h-4 w-4 mr-1" />
+              )}
+              Cc
+            </Button>
+            <Button variant="link" onClick={() => setShowBcc(!showBcc)} className="p-0 h-auto text-sm ml-4">
+              {showBcc ? (
+                <ChevronUp className="h-4 w-4 mr-1" />
+              ) : (
+                <ChevronDown className="h-4 w-4 mr-1" />
+              )}
+              Bcc
+            </Button>
+          </div>
+
+          <div className="flex items-center">
+            <span className="w-16 text-sm font-medium text-gray-600">Subject:</span>
+            <Input 
+              className="flex-1 bg-white" 
+              value={composeSubject} 
+              onChange={(e) => setComposeSubject(e.target.value)} 
+            />
+          </div>
+
+          {renderBodyInput()}
 
           {attachments.length > 0 && (
-            <div className="border-t pt-3">
+            <div className="mt-4">
-              <h4 className="text-sm font-medium mb-2">Attachments</h4>
+              <h4 className="text-sm font-medium text-gray-600 mb-2">Attachments:</h4>
               <div className="flex flex-wrap gap-2">
-                {attachments.map((attachment, index) => (
+                {attachments.map((file, index) => (
-                  <div key={index} className="flex items-center bg-gray-100 rounded px-2 py-1">
+                  <div key={index} className="flex items-center bg-gray-100 rounded-md p-2">
-                    <span className="text-sm truncate max-w-[150px]">{attachment.name}</span>
+                    <Paperclip className="h-4 w-4 mr-2 text-gray-500" />
-                    <button
+                    <span className="text-sm mr-2">{file.name}</span>
-                      className="ml-1 text-gray-500 hover:text-gray-700"
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="h-5 w-5 p-0 hover:bg-gray-200"
                       onClick={() => {
                         const newAttachments = [...attachments];
                         newAttachments.splice(index, 1);
@@ -262,59 +295,55 @@ export default function ComposeEmail({
                       }}
                     >
                       <X className="h-3 w-3" />
-                    </button>
+                    </Button>
                   </div>
                 ))}
               </div>
             </div>
           )}
-        </CardContent>
+        </div>
-        <CardFooter className="border-t p-4 flex justify-between">
+      </CardContent>
-          <div className="flex items-center space-x-2">
+      <CardFooter className="flex justify-between p-4 border-t bg-white">
-            <input
+        <div className="flex gap-2">
-              type="file"
-              ref={fileInputRef}
-              className="hidden"
-              onChange={handleFileSelection}
-              multiple
-            />
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={() => fileInputRef.current?.click()}
-            >
-              <Paperclip className="h-4 w-4 mr-1" />
-              Attach
-            </Button>
-          </div>
           <Button
-            onClick={async () => {
+            variant="outline"
-              setSending(true);
+            onClick={handleFileSelection}
-              try {
+            className="flex items-center gap-1 bg-white"
-                await handleSend();
-                onCancel();
-              } catch (error) {
-                console.error('Error sending email:', error);
-              } finally {
-                setSending(false);
-              }
-            }}
-            disabled={sending || !composeTo.trim()}
           >
-            {sending ? (
+            <Paperclip className="h-4 w-4" />
-              <>
+            Attach
-                <Loader2 className="h-4 w-4 mr-1 animate-spin" />
-                Sending...
-              </>
-            ) : (
-              <>
-                <SendHorizontal className="h-4 w-4 mr-1" />
-                Send
-              </>
-            )}
           </Button>
-        </CardFooter>
+          <input
-      </Card>
+            type="file"
-    </div>
+            ref={fileInputRef}
+            className="hidden"
+            onChange={handleFileSelection}
+            multiple
+          />
+        </div>
+        <Button
+          onClick={async () => {
+            setSending(true);
+            try {
+              await handleSend();
+              onCancel();
+            } catch (error) {
+              console.error('Error sending email:', error);
+            } finally {
+              setSending(false);
+            }
+          }}
+          disabled={sending || !composeTo.trim()}
+          className="flex items-center gap-2"
+        >
+          {sending ? (
+            <Loader2 className="h-4 w-4 animate-spin" />
+          ) : (
+            <SendHorizontal className="h-4 w-4" />
+          )}
+          Send
+        </Button>
+      </CardFooter>
+    </Card>
   );
 }