From e99d08fccfa79530ae62cb441c910e761144cf40 Mon Sep 17 00:00:00 2001
From: alma <alma@governance-labs.org>
Date: Mon, 28 Apr 2025 10:52:53 +0200
Subject: [PATCH] courrier multi account restore compose

---
 components/email/ComposeEmail.tsx | 683 +++++-------------------------
 1 file changed, 112 insertions(+), 571 deletions(-)

diff --git a/components/email/ComposeEmail.tsx b/components/email/ComposeEmail.tsx
index 5af7cc38..542cf5bd 100644
--- a/components/email/ComposeEmail.tsx
+++ b/components/email/ComposeEmail.tsx
@@ -39,37 +39,6 @@ import {
  * for consistent handling of email content and text direction.
  */
 
-// Define interface for the legacy props
-interface LegacyComposeEmailProps {
-  showCompose: boolean;
-  setShowCompose: (show: boolean) => void;
-  composeTo: string;
-  setComposeTo: (to: string) => void;
-  composeCc: string;
-  setComposeCc: (cc: string) => void;
-  composeBcc: string;
-  setComposeBcc: (bcc: string) => void;
-  composeSubject: string;
-  setComposeSubject: (subject: string) => void;
-  composeBody: string;
-  setComposeBody: (body: string) => void;
-  showCc: boolean;
-  setShowCc: (show: boolean) => void;
-  showBcc: boolean;
-  setShowBcc: (show: boolean) => void;
-  attachments: any[];
-  setAttachments: (attachments: any[]) => void;
-  handleSend: () => Promise<void>;
-  originalEmail?: {
-    content: string;
-    type: 'reply' | 'reply-all' | 'forward';
-  };
-  onSend: (email: any) => Promise<void>;
-  onCancel: () => void;
-  replyTo?: any | null;
-  forwardFrom?: any | null;
-}
-
 // Define interface for the modern props
 interface ComposeEmailProps {
   initialEmail?: EmailMessage | null;
@@ -89,55 +58,7 @@ interface ComposeEmailProps {
   }) => Promise<void>;
 }
 
-// Union type for handling both types of props
-type ComposeEmailAllProps = ComposeEmailProps | LegacyComposeEmailProps;
-
-// Type guard to check if props are legacy
-function isLegacyProps(
-  props: ComposeEmailAllProps
-): props is LegacyComposeEmailProps {
-  return 'showCompose' in props;
-}
-
-// Helper function to adapt EmailMessage to QuotedEmailContent props format
-function EmailMessageToQuotedContentAdapter({
-  email, 
-  type
-}: {
-  email: EmailMessage, 
-  type: 'reply' | 'reply-all' | 'forward'
-}) {
-  // Get the email content
-  const content = email.content || email.html || email.text || '';
-  
-  // Get the sender
-  const sender = email.from && email.from.length > 0 
-    ? { 
-        name: email.from[0].name, 
-        email: email.from[0].address 
-      } 
-    : { email: 'unknown@example.com' };
-  
-  // Map the type to what QuotedEmailContent expects
-  const mappedType = type === 'reply-all' ? 'reply' : type;
-  
-  return (
-    <QuotedEmailContent
-      content={content}
-      sender={sender}
-      date={email.date}
-      type={mappedType}
-    />
-  );
-}
-
-export default function ComposeEmail(props: ComposeEmailAllProps) {
-  // Handle legacy props by adapting them to new component
-  if (isLegacyProps(props)) {
-    return <LegacyAdapter {...props} />;
-  }
-  
-  // Continue with modern implementation for new props
+export default function ComposeEmail(props: ComposeEmailProps) {
   const { initialEmail, type = 'new', onClose, onSend } = props;
   
   // Email form state
@@ -359,132 +280,118 @@ export default function ComposeEmail(props: ComposeEmailAllProps) {
   }, []);
   
   return (
-    <div className="fixed inset-0 bg-gray-900/80 z-50 flex items-center justify-center">
-      <div className="w-full max-w-2xl h-[90vh] bg-white rounded-xl shadow-xl flex flex-col mx-4">
-        {/* Modal Header */}
-        <div className="flex-none flex items-center justify-between px-6 py-3 border-b border-gray-200">
-          <h3 className="text-lg font-semibold text-gray-900">
-            {type === 'reply' ? 'Reply' : type === 'forward' ? 'Forward' : type === 'reply-all' ? 'Reply All' : 'New Message'}
-          </h3>
-          <Button
-            variant="ghost"
-            size="icon"
-            className="hover:bg-gray-100 rounded-full"
-            onClick={onClose}
-          >
-            <X className="h-5 w-5 text-gray-500" />
-          </Button>
-        </div>
-
-        {/* Modal Body */}
-        <div className="flex-1 overflow-hidden">
-          <div className="h-full flex flex-col p-6 space-y-4 overflow-y-auto">
-            {/* To Field */}
-            <div className="flex-none">
-              <Label htmlFor="to" className="block text-sm font-medium text-gray-700">To</Label>
-              <Input
-                id="to"
-                value={to}
-                onChange={(e) => setTo(e.target.value)}
-                placeholder="recipient@example.com"
-                className="w-full mt-1 bg-white border-gray-300 text-gray-900"
-              />
-            </div>
-
-            {/* CC/BCC Toggle Buttons */}
-            <div className="flex-none 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>
-
-            {/* CC Field */}
-            {showCc && (
-              <div className="flex-none">
-                <Label htmlFor="cc" className="block text-sm font-medium text-gray-700">Cc</Label>
-                <Input
-                  id="cc"
-                  value={cc}
-                  onChange={(e) => setCc(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 className="flex-none">
-                <Label htmlFor="bcc" className="block text-sm font-medium text-gray-700">Bcc</Label>
-                <Input
-                  id="bcc"
-                  value={bcc}
-                  onChange={(e) => setBcc(e.target.value)}
-                  placeholder="bcc@example.com"
-                  className="w-full mt-1 bg-white border-gray-300 text-gray-900"
-                />
-              </div>
-            )}
-
-            {/* Subject Field */}
-            <div className="flex-none">
-              <Label htmlFor="subject" className="block text-sm font-medium text-gray-700">Subject</Label>
-              <Input
-                id="subject"
-                value={subject}
-                onChange={(e) => setSubject(e.target.value)}
-                placeholder="Enter subject"
-                className="w-full mt-1 bg-white border-gray-300 text-gray-900"
-              />
-            </div>
-
-            {/* Message Body */}
-            <div className="flex-1 min-h-[200px] flex flex-col overflow-hidden">
-              <Label htmlFor="message" className="flex-none block text-sm font-medium text-gray-700 mb-2">Message</Label>
-              <div className="flex-1 border border-gray-300 rounded-md overflow-hidden">
-                <RichEmailEditor
-                  initialContent={emailContent}
-                  onChange={setEmailContent}
-                  minHeight="200px"
-                  maxHeight="none"
-                  preserveFormatting={true}
-                />
-              </div>
-            </div>
-            
-            {/* Attachments */}
-            {attachments.length > 0 && (
-              <div className="border rounded-md p-3 mt-4">
-                <h3 className="text-sm font-medium mb-2 text-gray-700">Attachments</h3>
-                <div className="space-y-2">
-                  {attachments.map((file, index) => (
-                    <div key={index} className="flex items-center justify-between text-sm border rounded p-2">
-                      <span className="truncate max-w-[200px] text-gray-800">{file.name}</span>
-                      <Button 
-                        variant="ghost"
-                        size="sm"
-                        onClick={() => handleAttachmentRemove(index)}
-                        className="h-6 w-6 p-0 text-gray-500 hover:text-gray-700"
-                      >
-                        <X className="h-4 w-4" />
-                      </Button>
-                    </div>
-                  ))}
-                </div>
-              </div>
-            )}
+    <div className="flex flex-col h-full">
+      <ComposeEmailHeader 
+        type={type}
+        onClose={onClose}
+      />
+      <div className="flex-1 overflow-y-auto p-4">
+        <div className="h-full flex flex-col p-6 space-y-4 overflow-y-auto">
+          {/* To Field */}
+          <div className="flex-none">
+            <Label htmlFor="to" className="block text-sm font-medium text-gray-700">To</Label>
+            <Input
+              id="to"
+              value={to}
+              onChange={(e) => setTo(e.target.value)}
+              placeholder="recipient@example.com"
+              className="w-full mt-1 bg-white border-gray-300 text-gray-900"
+            />
           </div>
+
+          {/* CC/BCC Toggle Buttons */}
+          <div className="flex-none 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>
+
+          {/* CC Field */}
+          {showCc && (
+            <div className="flex-none">
+              <Label htmlFor="cc" className="block text-sm font-medium text-gray-700">Cc</Label>
+              <Input
+                id="cc"
+                value={cc}
+                onChange={(e) => setCc(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 className="flex-none">
+              <Label htmlFor="bcc" className="block text-sm font-medium text-gray-700">Bcc</Label>
+              <Input
+                id="bcc"
+                value={bcc}
+                onChange={(e) => setBcc(e.target.value)}
+                placeholder="bcc@example.com"
+                className="w-full mt-1 bg-white border-gray-300 text-gray-900"
+              />
+            </div>
+          )}
+
+          {/* Subject Field */}
+          <div className="flex-none">
+            <Label htmlFor="subject" className="block text-sm font-medium text-gray-700">Subject</Label>
+            <Input
+              id="subject"
+              value={subject}
+              onChange={(e) => setSubject(e.target.value)}
+              placeholder="Enter subject"
+              className="w-full mt-1 bg-white border-gray-300 text-gray-900"
+            />
+          </div>
+
+          {/* Message Body */}
+          <div className="flex-1 min-h-[200px] flex flex-col overflow-hidden">
+            <Label htmlFor="message" className="flex-none block text-sm font-medium text-gray-700 mb-2">Message</Label>
+            <div className="flex-1 border border-gray-300 rounded-md overflow-hidden">
+              <RichEmailEditor
+                initialContent={emailContent}
+                onChange={setEmailContent}
+                minHeight="200px"
+                maxHeight="none"
+                preserveFormatting={true}
+              />
+            </div>
+          </div>
+          
+          {/* Attachments */}
+          {attachments.length > 0 && (
+            <div className="border rounded-md p-3 mt-4">
+              <h3 className="text-sm font-medium mb-2 text-gray-700">Attachments</h3>
+              <div className="space-y-2">
+                {attachments.map((file, index) => (
+                  <div key={index} className="flex items-center justify-between text-sm border rounded p-2">
+                    <span className="truncate max-w-[200px] text-gray-800">{file.name}</span>
+                    <Button 
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => handleAttachmentRemove(index)}
+                      className="h-6 w-6 p-0 text-gray-500 hover:text-gray-700"
+                    >
+                      <X className="h-4 w-4" />
+                    </Button>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
         </div>
 
         {/* Modal Footer */}
@@ -548,370 +455,4 @@ export default function ComposeEmail(props: ComposeEmailAllProps) {
       </div>
     </div>
   );
-}
-
-// Legacy adapter to maintain backward compatibility
-function LegacyAdapter({
-  showCompose,
-  setShowCompose,
-  composeTo,
-  setComposeTo,
-  composeCc,
-  setComposeCc,
-  composeBcc,
-  setComposeBcc,
-  composeSubject,
-  setComposeSubject,
-  composeBody,
-  setComposeBody,
-  showCc,
-  setShowCc,
-  showBcc,
-  setShowBcc,
-  attachments,
-  setAttachments,
-  handleSend,
-  originalEmail,
-  onSend,
-  onCancel,
-  replyTo,
-  forwardFrom
-}: LegacyComposeEmailProps) {
-  const [sending, setSending] = useState(false);
-  
-  // Determine the type based on legacy props
-  const determineType = (): 'new' | 'reply' | 'reply-all' | 'forward' => {
-    if (originalEmail?.type === 'forward') return 'forward';
-    if (originalEmail?.type === 'reply-all') return 'reply-all';
-    if (originalEmail?.type === 'reply') return 'reply';
-    if (replyTo) return 'reply';
-    if (forwardFrom) return 'forward';
-    return 'new';
-  };
-  
-  // Format legacy content on mount if necessary
-  useEffect(() => {
-    // Only format if we have original email and no content was set yet
-    if ((originalEmail || replyTo || forwardFrom) && 
-       (!composeBody || composeBody === '<p></p>' || composeBody === '<br>')) {
-      
-      const type = determineType();
-      
-      if (type === 'reply' || type === 'reply-all') {
-        // For reply, format with sender info and original content
-        const content = originalEmail?.content || '';
-        const sender = replyTo?.name || replyTo?.email || 'Unknown sender';
-        const date = new Date().toLocaleString('en-US', {
-          weekday: 'short',
-          year: 'numeric', 
-          month: 'short',
-          day: 'numeric',
-          hour: '2-digit',
-          minute: '2-digit'
-        });
-        
-        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 ${date}, ${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>
-        `;
-        
-        setComposeBody(replyContent);
-      }
-      else if (type === 'forward') {
-        // For forward, format with original message details
-        const content = originalEmail?.content || '';
-        const fromString = forwardFrom?.name || forwardFrom?.email || 'Unknown';
-        const toString = 'Recipients';
-        const date = new Date().toLocaleString('en-US', {
-          weekday: 'short',
-          year: 'numeric',
-          month: 'short',
-          day: 'numeric',
-          hour: '2-digit',
-          minute: '2-digit'
-        });
-        
-        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> ${date}</div>
-                <div><b>Subject:</b> ${composeSubject || ''}</div>
-                <div><b>To:</b> ${toString}</div>
-              </div>
-              <div class="email-original-content">
-                ${content}
-              </div>
-            </div>
-          </div>
-        `;
-        
-        setComposeBody(forwardContent);
-      }
-    }
-  }, [originalEmail, replyTo, forwardFrom, composeBody, determineType, composeSubject]);
-  
-  // Converts attachments to the expected format
-  const convertAttachments = () => {
-    return attachments.map(att => ({
-      name: att.name || att.filename || 'attachment',
-      content: att.content || '',
-      type: att.type || att.contentType || 'application/octet-stream'
-    }));
-  };
-  
-  // Handle sending in the legacy format
-  const handleLegacySend = async () => {
-    setSending(true);
-    
-    try {
-      if (onSend) {
-        // New API
-        await onSend({
-          to: composeTo,
-          cc: composeCc,
-          bcc: composeBcc,
-          subject: composeSubject,
-          body: composeBody,
-          attachments: convertAttachments()
-        });
-      } else if (handleSend) {
-        // Old API
-        await handleSend();
-      }
-      
-      // Close compose window
-      setShowCompose(false);
-    } catch (error) {
-      console.error('Error sending email:', error);
-      alert('Failed to send email. Please try again.');
-    } finally {
-      setSending(false);
-    }
-  };
-  
-  // Handle file selection for legacy interface
-  const handleFileSelection = (files: FileList) => {
-    const newAttachments = Array.from(files).map(file => ({
-      name: file.name,
-      type: file.type,
-      content: URL.createObjectURL(file),
-      size: file.size
-    }));
-    
-    setAttachments([...attachments, ...newAttachments]);
-  };
-  
-  if (!showCompose) return null;
-  
-  return (
-    <div className="fixed inset-0 bg-gray-900/80 z-50 flex items-center justify-center">
-      <div className="w-full max-w-2xl h-[90vh] bg-white rounded-xl shadow-xl flex flex-col mx-4">
-        {/* Modal Header */}
-        <div className="flex-none flex items-center justify-between px-6 py-3 border-b border-gray-200">
-          <h3 className="text-lg font-semibold text-gray-900">
-            {determineType() === 'reply' ? 'Reply' : determineType() === 'forward' ? 'Forward' : determineType() === 'reply-all' ? 'Reply All' : 'New Message'}
-          </h3>
-          <Button
-            variant="ghost"
-            size="icon"
-            className="hover:bg-gray-100 rounded-full"
-            onClick={() => {
-              if (onCancel) onCancel();
-              setShowCompose(false);
-            }}
-          >
-            <X className="h-5 w-5 text-gray-500" />
-          </Button>
-        </div>
-
-        {/* Modal Body */}
-        <div className="flex-1 overflow-hidden">
-          <div className="h-full flex flex-col p-6 space-y-4 overflow-y-auto">
-            {/* To Field */}
-            <div className="flex-none">
-              <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>
-
-            {/* CC/BCC Toggle Buttons */}
-            <div className="flex-none 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>
-
-            {/* CC Field */}
-            {showCc && (
-              <div className="flex-none">
-                <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 className="flex-none">
-                <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 className="flex-none">
-              <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 className="flex-1 min-h-[200px] flex flex-col overflow-hidden">
-              <Label htmlFor="message" className="flex-none block text-sm font-medium text-gray-700 mb-2">Message</Label>
-              <div className="flex-1 border border-gray-300 rounded-md overflow-hidden">
-                <RichEmailEditor
-                  initialContent={composeBody}
-                  onChange={setComposeBody}
-                  minHeight="200px"
-                  maxHeight="none"
-                  preserveFormatting={true}
-                />
-              </div>
-            </div>
-            
-            {/* Attachments */}
-            {attachments.length > 0 && (
-              <div className="border rounded-md p-3 mt-4">
-                <h3 className="text-sm font-medium mb-2 text-gray-700">Attachments</h3>
-                <div className="space-y-2">
-                  {attachments.map((file, index) => (
-                    <div key={index} className="flex items-center justify-between text-sm border rounded p-2">
-                      <span className="truncate max-w-[200px] text-gray-800">{file.name || file.filename}</span>
-                      <Button 
-                        variant="ghost"
-                        size="sm"
-                        onClick={() => setAttachments(attachments.filter((_, i) => i !== index))}
-                        className="h-6 w-6 p-0 text-gray-500 hover:text-gray-700"
-                      >
-                        <X className="h-4 w-4" />
-                      </Button>
-                    </div>
-                  ))}
-                </div>
-              </div>
-            )}
-          </div>
-        </div>
-
-        {/* Modal Footer */}
-        <div className="flex-none 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-legacy"
-              className="hidden"
-              multiple
-              onChange={(e) => {
-                if (e.target.files && e.target.files.length > 0) {
-                  handleFileSelection(e.target.files);
-                }
-              }}
-            />
-            <label htmlFor="file-attachment-legacy">
-              <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-legacy')?.click();
-                }}
-              >
-                <Paperclip className="h-4 w-4 text-gray-600" />
-              </Button>
-            </label>
-            {sending && <span className="text-xs text-gray-500 ml-2">Preparing attachment...</span>}
-          </div>
-          <div className="flex items-center gap-3">
-            <Button 
-              variant="ghost"
-              className="text-gray-600 hover:text-gray-700 hover:bg-gray-100"
-              onClick={() => {
-                if (onCancel) onCancel();
-                setShowCompose(false);
-              }}
-              disabled={sending}
-            >
-              Cancel
-            </Button>
-            <Button
-              className="bg-blue-600 text-white hover:bg-blue-700"
-              onClick={handleLegacySend}
-              disabled={sending}
-            >
-              {sending ? (
-                <>
-                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                  Sending...
-                </>
-              ) : (
-                <>
-                  <SendHorizontal className="mr-2 h-4 w-4" />
-                  Send
-                </>
-              )}
-            </Button>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
 } 
\ No newline at end of file