courrier clean 2

DEPRECATED_FUNCTIONS.md

@@ -48,6 +48,28 @@ This document tracks functions that have been marked as deprecated and should be
 - **Status**: Deleted
 - **Replacement**: Use `app/api/courrier/send/route.ts` instead.
 
+## Deprecated Components
+
+### ComposeEmail (components/ComposeEmail.tsx)
+
+**Status:** Deprecated since November 2023  
+**Replacement:** Use `components/email/ComposeEmail.tsx` instead  
+
+This component has been deprecated in favor of the more modular and better structured version in the email directory. The newer version has the following improvements:
+
+- Better separation between user message and quoted content in replies/forwards
+- Improved styling and visual hierarchy
+- Support for RTL/LTR text direction toggling
+- More modern UI using Card components instead of a modal
+- Better state management for email composition
+
+A compatibility layer has been added to the new component to ensure backward compatibility with existing code that uses the old component. This allows for a smooth transition without breaking changes.
+
+**Migration Plan:**
+1. Update imports in files using the old component to import from `@/components/email/ComposeEmail`
+2. Test to ensure functionality works with the new component
+3. Delete the old component file once all usages have been migrated
+
 ## Migration Plan
 
 ### Phase 1: Deprecation (Current)

app/courrier/page.tsx

@@ -50,7 +50,7 @@ import {
 } from '@/components/ui/command';
 import { useSession } from 'next-auth/react';
 import DOMPurify from 'isomorphic-dompurify';
-import ComposeEmail from '@/components/ComposeEmail';
+import ComposeEmail from '@/components/email/ComposeEmail';
 import { decodeEmail, cleanHtml } from '@/lib/mail-parser-wrapper';
 import { Attachment as MailParserAttachment } from 'mailparser';
 import { LoadingFix } from './loading-fix';

components/email/ComposeEmail.tsx

@@ -11,6 +11,38 @@ import { Input } from '@/components/ui/input';
 import { Card, CardContent, CardHeader, CardTitle, CardFooter } from '@/components/ui/card';
 import DOMPurify from 'isomorphic-dompurify';
 
+// Legacy interface for backward compatibility with old ComposeEmail component
+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;
+}
+
+// New interface for the modern ComposeEmail component
 interface ComposeEmailProps {
   initialEmail?: EmailMessage | null;
   type?: 'new' | 'reply' | 'reply-all' | 'forward';
@@ -29,12 +61,23 @@ interface ComposeEmailProps {
   }) => Promise<void>;
 }
 
-export default function ComposeEmail({ 
-  initialEmail, 
-  type = 'new', 
-  onClose, 
-  onSend 
-}: ComposeEmailProps) {
+// Union type to handle both new and legacy props
+type ComposeEmailAllProps = ComposeEmailProps | LegacyComposeEmailProps;
+
+// Type guard to check if props are legacy
+function isLegacyProps(props: ComposeEmailAllProps): props is LegacyComposeEmailProps {
+  return 'showCompose' in props && 'setShowCompose' in props;
+}
+
+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
+  const { initialEmail, type = 'new', onClose, onSend } = props;
+  
   // Email form state
   const [to, setTo] = useState<string>('');
   const [cc, setCc] = useState<string>('');
@@ -528,4 +571,89 @@ export default function ComposeEmail({
       </CardFooter>
     </Card>
   );
+}
+
+// Adapter component for legacy props
+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) {
+  // Determine the type from the original email or subject
+  const determineType = (): 'new' | 'reply' | 'reply-all' | 'forward' => {
+    if (originalEmail) {
+      return originalEmail.type;
+    }
+    
+    if (composeSubject.startsWith('Re:')) {
+      return 'reply';
+    }
+    
+    if (composeSubject.startsWith('Fwd:')) {
+      return 'forward';
+    }
+    
+    return 'new';
+  };
+  
+  // Convert legacy attachments format to new format
+  const convertAttachments = () => {
+    return (attachments || []).map((att: any) => ({
+      name: att.name || 'attachment',
+      content: typeof att.content === 'string' ? att.content : '',
+      type: att.type || 'application/octet-stream'
+    }));
+  };
+  
+  // If not showing compose, return null
+  if (!showCompose) {
+    return null;
+  }
+  
+  return (
+    <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 max-h-[90vh] bg-white rounded-xl shadow-xl overflow-auto mx-4">
+        <ComposeEmail
+          initialEmail={null} // Not using initialEmail directly
+          type={determineType()}
+          onClose={() => {
+            onCancel?.();
+            setShowCompose(false);
+          }}
+          onSend={async (emailData) => {
+            // Update legacy state before sending
+            setComposeTo(emailData.to);
+            if (emailData.cc) setComposeCc(emailData.cc);
+            if (emailData.bcc) setComposeBcc(emailData.bcc);
+            setComposeSubject(emailData.subject);
+            setComposeBody(emailData.body);
+            
+            // Call the legacy onSend function
+            await onSend(emailData);
+          }}
+        />
+      </div>
+    </div>
+  );
 }