From 195f8b7115b0df7e1bd49822b6a1de7e6c6749ef Mon Sep 17 00:00:00 2001
From: alma <alma@governance-labs.org>
Date: Sat, 26 Apr 2025 11:58:58 +0200
Subject: [PATCH] courrier clean 2

---
 components/ComposeEmail.tsx | 342 ++++++++++++++++++------------------
 1 file changed, 169 insertions(+), 173 deletions(-)

diff --git a/components/ComposeEmail.tsx b/components/ComposeEmail.tsx
index 2e8965db..fe049a85 100644
--- a/components/ComposeEmail.tsx
+++ b/components/ComposeEmail.tsx
@@ -4,7 +4,8 @@ import { useState, useRef, useEffect } from 'react';
 import { X, Paperclip, ChevronDown, ChevronUp, SendHorizontal, Loader2 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
-import { Card, CardContent, CardHeader, CardTitle, CardFooter } from '@/components/ui/card';
+import { Textarea } from '@/components/ui/textarea';
+import { Label } from '@/components/ui/label';
 import DOMPurify from 'isomorphic-dompurify';
 import { formatEmailForReply, formatEmailForForward } from '@/lib/email-formatter';
 
@@ -84,17 +85,8 @@ export default function ComposeEmail({
   onCancel
 }: ComposeEmailProps) {
   const [isSending, setIsSending] = useState(false);
-  const editorRef = useRef<HTMLDivElement>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
-  const composeBodyRef = useRef<HTMLDivElement>(null);
 
-  useEffect(() => {
-    if (editorRef.current) {
-      editorRef.current.focus();
-    }
-  }, [showCompose]);
-
-  // Initialize content when replying or forwarding
   useEffect(() => {
     // Initialize reply if replyTo is provided
     if (replyTo) {
@@ -115,17 +107,15 @@ export default function ComposeEmail({
       });
       
       setComposeBody(bodyContent);
-      
-      // Show CC if needed for reply-all
-      if (formattedEmail.cc) {
-        setComposeCc(formattedEmail.cc);
-        setShowCc(true);
-      }
-    } else if (forwardFrom) {
-      // Initialize forward email if forwardFrom is provided
+    }
+  }, [replyTo, setComposeTo, setComposeSubject, setComposeBody]);
+  
+  useEffect(() => {
+    // Initialize forward email if forwardFrom is provided
+    if (forwardFrom) {
       initializeForwardedEmail(forwardFrom);
     }
-  }, [replyTo, forwardFrom]);
+  }, [forwardFrom]);
 
   // Initialize forwarded email content
   const initializeForwardedEmail = async (email: any) => {
@@ -174,171 +164,177 @@ export default function ComposeEmail({
     `);
   };
 
-  if (!showCompose) return null;
-
-  const handleFileSelection = (e: React.ChangeEvent<HTMLInputElement>) => {
-    if (e.target.files && e.target.files.length > 0) {
-      const newAttachments = Array.from(e.target.files).map(file => ({
-        name: file.name,
-        type: file.type,
-        size: file.size,
-        file
-      }));
-      setAttachments([...attachments, ...newAttachments]);
+  // Handle file attachment selection
+  const handleFileAttachment = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files) {
+      const newFiles = Array.from(e.target.files);
+      setAttachments([...attachments, ...newFiles]);
     }
   };
 
-  // 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 (
-    <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)' }}>
-      <CardHeader className="bg-white p-4 border-b">
-        <div className="flex justify-between items-center">
-          <CardTitle className="text-xl font-semibold text-gray-800">{replyTo ? 'Reply' : forwardFrom ? 'Forward' : 'New Message'}</CardTitle>
-          <Button variant="ghost" size="icon" onClick={onCancel}>
-            <X className="h-5 w-5" />
-          </Button>
-        </div>
-      </CardHeader>
-      <CardContent className="flex-grow overflow-auto p-4 bg-white">
-        <div className="space-y-4">
-          <div className="flex items-center">
-            <span className="w-16 text-sm font-medium text-gray-600">To:</span>
-            <Input 
-              className="flex-1 bg-white" 
-              value={composeTo} 
-              onChange={(e) => setComposeTo(e.target.value)} 
-            />
-          </div>
-
-          {showCc && (
-            <div className="flex items-center">
-              <span className="w-16 text-sm font-medium text-gray-600">Cc:</span>
-              <Input 
-                className="flex-1 bg-white" 
-                value={composeCc} 
-                onChange={(e) => setComposeCc(e.target.value)} 
-              />
+    <>
+      {/* Compose Email Modal */}
+      {showCompose && (
+        <div className="fixed inset-0 bg-gray-600/30 backdrop-blur-sm z-50 flex items-center justify-center">
+          <div className="w-full max-w-2xl h-[80vh] bg-white rounded-xl shadow-xl flex flex-col mx-4">
+            {/* Modal Header */}
+            <div className="flex items-center justify-between px-6 py-3 border-b border-gray-200">
+              <h3 className="text-lg font-semibold text-gray-900">
+                {composeSubject.startsWith('Re:') ? 'Reply' : 
+                 composeSubject.startsWith('Fwd:') ? 'Forward' : 'New Message'}
+              </h3>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="hover:bg-gray-100 rounded-full"
+                onClick={() => {
+                  setShowCompose(false);
+                  setComposeTo('');
+                  setComposeCc('');
+                  setComposeBcc('');
+                  setComposeSubject('');
+                  setComposeBody('');
+                  setShowCc(false);
+                  setShowBcc(false);
+                }}
+              >
+                <X className="h-5 w-5 text-gray-500" />
+              </Button>
             </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>
-          )}
+            {/* Modal Body */}
+            <div className="flex-1 overflow-y-auto">
+              <div className="p-6 space-y-4">
+                {/* To Field */}
+                <div>
+                  <Label htmlFor="to" className="block text-sm font-medium text-gray-700">To</Label>
+                  <Input
+                    id="to"
+                    value={composeTo}
+                    onChange={(e) => setComposeTo(e.target.value)}
+                    placeholder="recipient@example.com"
+                    className="w-full mt-1 bg-white border-gray-300 text-gray-900"
+                  />
+                </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>
+                {/* CC/BCC Toggle Buttons */}
+                <div className="flex items-center gap-4">
+                  <button
+                    type="button"
+                    className="text-blue-600 hover:text-blue-700 text-sm font-medium"
+                    onClick={() => setShowCc(!showCc)}
+                  >
+                    {showCc ? 'Hide Cc' : 'Add Cc'}
+                  </button>
+                  <button
+                    type="button"
+                    className="text-blue-600 hover:text-blue-700 text-sm font-medium"
+                    onClick={() => setShowBcc(!showBcc)}
+                  >
+                    {showBcc ? 'Hide Bcc' : 'Add 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="mt-4">
-              <h4 className="text-sm font-medium text-gray-600 mb-2">Attachments:</h4>
-              <div className="flex flex-wrap gap-2">
-                {attachments.map((file, index) => (
-                  <div key={index} className="flex items-center bg-gray-100 rounded-md p-2">
-                    <Paperclip className="h-4 w-4 mr-2 text-gray-500" />
-                    <span className="text-sm mr-2">{file.name}</span>
-                    <Button
-                      variant="ghost"
-                      size="icon"
-                      className="h-5 w-5 p-0 hover:bg-gray-200"
-                      onClick={() => {
-                        const newAttachments = [...attachments];
-                        newAttachments.splice(index, 1);
-                        setAttachments(newAttachments);
-                      }}
-                    >
-                      <X className="h-3 w-3" />
-                    </Button>
+                {/* CC Field */}
+                {showCc && (
+                  <div>
+                    <Label htmlFor="cc" className="block text-sm font-medium text-gray-700">Cc</Label>
+                    <Input
+                      id="cc"
+                      value={composeCc}
+                      onChange={(e) => setComposeCc(e.target.value)}
+                      placeholder="cc@example.com"
+                      className="w-full mt-1 bg-white border-gray-300 text-gray-900"
+                    />
                   </div>
-                ))}
+                )}
+
+                {/* BCC Field */}
+                {showBcc && (
+                  <div>
+                    <Label htmlFor="bcc" className="block text-sm font-medium text-gray-700">Bcc</Label>
+                    <Input
+                      id="bcc"
+                      value={composeBcc}
+                      onChange={(e) => setComposeBcc(e.target.value)}
+                      placeholder="bcc@example.com"
+                      className="w-full mt-1 bg-white border-gray-300 text-gray-900"
+                    />
+                  </div>
+                )}
+
+                {/* Subject Field */}
+                <div>
+                  <Label htmlFor="subject" className="block text-sm font-medium text-gray-700">Subject</Label>
+                  <Input
+                    id="subject"
+                    value={composeSubject}
+                    onChange={(e) => setComposeSubject(e.target.value)}
+                    placeholder="Enter subject"
+                    className="w-full mt-1 bg-white border-gray-300 text-gray-900"
+                  />
+                </div>
+
+                {/* Message Body */}
+                <div>
+                  <Label htmlFor="message" className="block text-sm font-medium text-gray-700">Message</Label>
+                  <Textarea
+                    id="message"
+                    value={composeBody}
+                    onChange={(e) => setComposeBody(e.target.value)}
+                    placeholder="Write your message..."
+                    className="w-full mt-1 min-h-[200px] bg-white border-gray-300 text-gray-900 resize-none"
+                  />
+                </div>
               </div>
             </div>
-          )}
+
+            {/* Modal Footer */}
+            <div className="flex items-center justify-between px-6 py-3 border-t border-gray-200 bg-white">
+              <div className="flex items-center gap-2">
+                {/* File Input for Attachments */}
+                <input
+                  type="file"
+                  id="file-attachment"
+                  className="hidden"
+                  multiple
+                  onChange={handleFileAttachment}
+                />
+                <label htmlFor="file-attachment">
+                  <Button 
+                    variant="outline" 
+                    size="icon"
+                    className="rounded-full bg-white hover:bg-gray-100 border-gray-300"
+                    onClick={(e) => {
+                      e.preventDefault();
+                      document.getElementById('file-attachment')?.click();
+                    }}
+                  >
+                    <Paperclip className="h-4 w-4 text-gray-600" />
+                  </Button>
+                </label>
+              </div>
+              <div className="flex items-center gap-3">
+                <Button 
+                  variant="ghost"
+                  className="text-gray-600 hover:text-gray-700 hover:bg-gray-100"
+                  onClick={() => setShowCompose(false)}
+                >
+                  Cancel
+                </Button>
+                <Button
+                  className="bg-blue-600 text-white hover:bg-blue-700"
+                  onClick={handleSend}
+                  disabled={isSending}
+                >
+                  {isSending ? 'Sending...' : 'Send'}
+                </Button>
+              </div>
+            </div>
+          </div>
         </div>
-      </CardContent>
-      <CardFooter className="flex justify-between p-4 border-t bg-white">
-        <div className="flex gap-2">
-          <Button
-            variant="outline"
-            onClick={() => fileInputRef.current?.click()}
-            className="flex items-center gap-1 bg-white"
-          >
-            <Paperclip className="h-4 w-4" />
-            Attach
-          </Button>
-          <input
-            type="file"
-            ref={fileInputRef}
-            className="hidden"
-            onChange={handleFileSelection}
-            multiple
-          />
-        </div>
-        <Button
-          onClick={handleSend}
-          disabled={isSending || !composeTo.trim()}
-          className="flex items-center gap-2"
-        >
-          {isSending ? (
-            <>
-              <Loader2 className="h-4 w-4 mr-1 animate-spin" />
-              Sending...
-            </>
-          ) : (
-            <>
-              <SendHorizontal className="h-4 w-4 mr-1" />
-              Send
-            </>
-          )}
-        </Button>
-      </CardFooter>
-    </Card>
+      )}
+    </>
   );
 } 
\ No newline at end of file