From b0387982bf2ce7f724546f0096d62a72d4502ee7 Mon Sep 17 00:00:00 2001
From: alma <alma@governance-labs.org>
Date: Sat, 26 Apr 2025 13:34:15 +0200
Subject: [PATCH] courrier clean 2

---
 components/ComposeEmail.tsx | 246 ++++++++++++++++++------------------
 1 file changed, 123 insertions(+), 123 deletions(-)

diff --git a/components/ComposeEmail.tsx b/components/ComposeEmail.tsx
index 9da23628..917e5b70 100644
--- a/components/ComposeEmail.tsx
+++ b/components/ComposeEmail.tsx
@@ -91,7 +91,7 @@ export default function ComposeEmail({
   const [userMessage, setUserMessage] = useState('');
   const [quotedContent, setQuotedContent] = useState('');
   const [hasStartedTyping, setHasStartedTyping] = useState(false);
-
+  
   useEffect(() => {
     // When forwarding or replying, use rich editor
     setUseRichEditor(!!replyTo || !!forwardFrom);
@@ -274,7 +274,7 @@ export default function ComposeEmail({
     <>
       {/* 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="fixed inset-0 bg-gray-600/30 backdrop-blur-sm z-50 flex items-center justify-center">
           {/* Add global styles for email direction */}
           <style dangerouslySetInnerHTML={{ __html: `
             .force-ltr {
@@ -304,16 +304,16 @@ export default function ComposeEmail({
           `}} />
           
           <div className="w-full max-w-2xl h-[80vh] bg-white rounded-xl shadow-xl flex flex-col mx-4">
-            {/* Modal Header */}
+        {/* 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">
+          <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"
+          </h3>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="hover:bg-gray-100 rounded-full"
                 onClick={() => {
                   setShowCompose(false);
                   setComposeTo('');
@@ -324,83 +324,83 @@ export default function ComposeEmail({
                   setShowCc(false);
                   setShowBcc(false);
                 }}
-              >
-                <X className="h-5 w-5 text-gray-500" />
-              </Button>
-            </div>
+          >
+            <X className="h-5 w-5 text-gray-500" />
+          </Button>
+        </div>
 
-            {/* Modal Body */}
+        {/* Modal Body */}
             <div className="flex-1 overflow-y-auto">
               <div className="p-6 space-y-4">
-                {/* To Field */}
+            {/* 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>
+              <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 */}
+            {/* 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>
+              <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 && (
+            {/* 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>
-                )}
+                <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 && (
+            {/* 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>
-                )}
+                <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 */}
+            {/* 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>
+              <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 - conditionally render either rich editor or textarea */}
                 <div>
@@ -438,7 +438,7 @@ export default function ComposeEmail({
                         >
                           <div 
                             className="p-3 opacity-90 text-sm email-content force-ltr"
-                            contentEditable="true"
+                contentEditable="true"
                             dangerouslySetInnerHTML={{ __html: quotedContent }}
                             onInput={(e) => {
                               const target = e.currentTarget;
@@ -455,8 +455,8 @@ export default function ComposeEmail({
                                 setComposeBody(combined);
                               }
                             }}
-                            style={{ 
-                              direction: 'ltr', 
+                style={{ 
+                  direction: 'ltr',
                               textAlign: 'left',
                               unicodeBidi: 'isolate',
                               writingMode: 'horizontal-tb'
@@ -475,55 +475,55 @@ export default function ComposeEmail({
                       style={{ direction: 'ltr', textAlign: 'left' }}
                     />
                   )}
-                </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={handleSendWithCombinedContent}
-                  disabled={isSending}
-                >
-                  {isSending ? 'Sending...' : 'Send'}
-                </Button>
-              </div>
             </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={handleSendWithCombinedContent}
+                  disabled={isSending}
+            >
+                  {isSending ? 'Sending...' : 'Send'}
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
       )}
     </>
   );
-} 
\ No newline at end of file
+}
\ No newline at end of file