From 76d40bb4e362df0ce5a51097adef1f738e33087b Mon Sep 17 00:00:00 2001
From: alma <alma@governance-labs.org>
Date: Sun, 27 Apr 2025 22:51:45 +0200
Subject: [PATCH] courrier multi account restore compose

---
 .DS_Store                         | Bin 10244 -> 10244 bytes
 app/.DS_Store                     | Bin 6148 -> 10244 bytes
 components/email/ComposeEmail.tsx | 346 ++++++++++++++++--------------
 3 files changed, 182 insertions(+), 164 deletions(-)

diff --git a/.DS_Store b/.DS_Store
index bafcc976482b1c83319306d25be226cabc0122d3..f0a55f973d84cb5698e28561134f6f40b28cd7f6 100644
GIT binary patch
delta 1629
zcmah}L2nX47=2(1t)(rXfgWr^qS1q}u|}I-8>>kVT2kxTEL)1$g{3T58>4&a%}Wz*
z9`xkd82*=u-t>a+n^Kq=s5aT1+39=VyzhPA$7%Vre71A#CV&`_M&MQapu(?oe{JP!
zvY(urnY$zZy#g04w6^^*f~T8&oPqiS`l<9n@`i=@rXzZT+^57wv2g#vdhbi#i<aRb
zK!bq;G*RW#K?n!0`R0ikDz>VJ;y#6aRPYi<=#tyU37H|ke2e$d;^nc0$0%br;_`?&
z>~Y;<peJ~NXFS=%Hg>ps&VUW<Tj73N;j)wwFp)zgqNJr1^2DL6hAk;xQ!%2Uas0SS
z0plPCsKZCqyjYq2`NC{+7EmK9pa(8jhcX=T&tgddbk;0hkrPmE7@1IIunxVYaynr~
za*fNc60Mf3+T3}3S9#i@SSeo#$6VV)9Vq-U<xDT66h!X1%ZFQOE}uavmK-s9B&RpX
z=b}Z`C2x6UiB~uA=CZ7n!6Po?ERC3sDo~Rm>-0}aH18FkV@sOP%NN{;aB0{vxgi-^
zbQ*5ZQ^W@>PL&<jP`fVEt=c?s-{5697B25Q<hw?E36YdR4*p@R5h7)UxQs`q4PI7F
zWJsSqmRlxLr5%k-o07L!ZUjj%NSh{y%-Xd)5{o}*77Mn^MwT}4EUfr>j*Sn{%dD(M
z^VsFYZgOOva-BA#;-wxxNfpwsb>1^EA~E)(fld(J;oMHE60M31aF$S)fqk}rou!s3
zG@E4NLS>aMZ&5^9tf`};dei%%IXA16wkG=t;+u|~XGShPXj0&?kxZvm2M!tEkAB7a
j$-<wR-dQHs|9Sm({J%f!ne!j^_r=1yjfZQ+!uq|x{G_?#

delta 125
zcmZn(XbG6$FUrBdz`)4BAiz*ukd%|31mx{VD%e;!jeTMR?`C!m77lKZ3TB2xh609y
z$%W!goA(LSvw;|s_X)U8wvbTaXJ*J@$Ye-LDNfEw%FoZ4JY7b1W65No0dAYw6@Ia7
ORu>gxLe{{<%m4smD<ks&

diff --git a/app/.DS_Store b/app/.DS_Store
index 1a958b34c4c023dc035781ac9042b8366f64dc6c..6305bedb589a6b98c1b7e915ae04e974ada740fc 100644
GIT binary patch
literal 10244
zcmeI1&u-gB5XNU^{h^|!@F4|qDL|x`9voXP?4m)9Ky{OYksON3Z4XK6N)}@irb&gO
zq6&rsozr*dEA-l@=&_H{drs*$vrEalQm#SZ>;mLa(l^WHZ)S(yH4&-(@nD-MB%%NZ
z+x1UyTG9A-K9*X=d~+98!Jnw0m@-P~*+H_T_Fs4co`5Id33vjYz=uEp?`&>COIv^T
z1UvyxU`~MRLx_WI$Jm*+QaW&wB>-#{UrWO^)&b%Z8rv~;rmeW5PrZ6j##NamhSKi%
zJ!Cm-$Jm*++MSekCuQ!e%nC)x-QgFCoK#0!fA$1Cfn@@`c5l)X8c{^YSJ&^^aX-oW
z_?0KrcQ`iRO1pzy1FBPxPT-N!fO-dsrTuH6{pk?b4bjGwU~izH$X2V*7wR7#;<^fT
zLg#L;>W_u)4v%>ax*^3*Z*LZ=#|OA>ifTx?87r*qQ8`(76a}vN$#RS{f$iH`q41}s
zaGZ(u7^(!^#*{c(reL(w$G8rlI+f8dg{5%_2czE`Lf@F{!HjadccEd_+nZ3|fI0)U
zq3phJTnZXFKFr4WMALWq^e3aCiTmIEVG@sucKcsdS*zCSji3><f@j^+Y|<@y#dx&e
z%b)P4!z@es<#n(Ba~w^M)^B~ErA04Jqg))~K?KRuU*dF-P4=^KIv9y>SN{++gXYot
z?Td?@_PveptDW7;jqu`|-R+I=>-Ns&Wi$Bfi>+^eJUUCx)9f|Ij;73ufNtu~^D}44
zN**t}d75M?N1S~*BD_~sAS#^s4ll_J!|PEr*N+jq9GScn6V49xsm_k+{Z;yF!d7#;
z!olIX2AVmY+u28$4<((g7<B5W91*Hcj5?CqTAmA~HsWa2pp6lwoTiQvu`ZP-Iz|J;
zbR_*ELT*eI=0K_68ldL}#_$5OH^$7tXzboO1Lo>8sH+(3iW(-7f2AXT{}FU8=n{;h
zFV$g0n;?QQ*}V%9<F&U1uR6SPc#Sa@M=L~(R&wix)TgPa3-pidrQhxTxkf1C6LKxA
za#h9nok}H4jILmYbKNz`*ZK1}dD;Yz$Yhq;x3&pN{0*6$XY@@}iwvw|dX9r@f4Sf7
z#7i>bKb;Z19G)%727brp^iuq?<!qLWFkWXmn}^Wydv<k%d7c=3cY?drkU3iKj7M_8
zD04mgSjpLzxNk(s2cvB^(Q5@W<YWaIqdDx#opbcZvoy1nOrr9usfv402FTP?+;<}U
zK*Z6bPL%qH$<<{pqeh_b6?LN2Ldmn))D!eSro!%-8CdETqIU|mcO?(FW(YgS3l(F@
zD;5uai}Rb~jH7CMapqWFHQZ~us>TSPe>5L?h8jk$^TdfEXGi6#vW`rO<%#hYv+vLK
z!qQ6D{^SXG0-k^;;0XwUHO(Px!9INV|NlKLPrwtn#spOLLHEHv9<ba}ai5j<+Cv<_
z;o!!)nYQABlWfPs%62?H@OJ!{I9S_e%MI5ZV`tjp8?^WS&j9?v?brVRkG);L{>Lir
IBV7Og4{f!(DgXcg

delta 135
zcmZn(XfcprU|?W$DortDU=RQ@Ie-{MGjUEV6q~50D9Qqo2a6RkWHO{O6eX1x7i=tC
z&dA6zIZ62UWLdEn8%rcu7PE732r>iJ0)YTGkZ=W=v9a(w^JIP%N022TQ$U6>FhOhq
Li*1hQnZpbKAt)8f

diff --git a/components/email/ComposeEmail.tsx b/components/email/ComposeEmail.tsx
index 242ef1ca..1c77745c 100644
--- a/components/email/ComposeEmail.tsx
+++ b/components/email/ComposeEmail.tsx
@@ -360,174 +360,192 @@ export default function ComposeEmail(props: ComposeEmailAllProps) {
   }, []);
   
   return (
-    <div className="w-full h-full flex flex-col overflow-hidden">
-      <div className="border-b py-2 px-4">
-        <div className="flex justify-between items-center">
-          <h2 className="text-lg font-semibold">
-            {type === 'new' ? 'New Message' : 
-              type === 'reply' ? 'Reply' : 
-              type === 'reply-all' ? 'Reply All' : 
-              'Forward'}
-          </h2>
-          <Button variant="ghost" size="icon" onClick={onClose}>
-            <X className="h-4 w-4" />
-          </Button>
-        </div>
-      </div>
-      
-      <div className="p-0 flex-1 flex flex-col overflow-hidden">
-        {/* Email header fields */}
-        <div className="p-3 border-b space-y-2">
-          <div className="flex items-center">
-            <span className="w-16 text-sm font-medium">To:</span>
-            <Input 
-              value={to} 
-              onChange={(e) => setTo(e.target.value)} 
-              className="flex-1 border-0 shadow-none h-8 focus-visible:ring-0"
-              placeholder="recipient@example.com"
-            />
-          </div>
-          
-          {showCc && (
-            <div className="flex items-center">
-              <span className="w-16 text-sm font-medium">Cc:</span>
-              <Input 
-                value={cc} 
-                onChange={(e) => setCc(e.target.value)} 
-                className="flex-1 border-0 shadow-none h-8 focus-visible:ring-0"
-                placeholder="cc@example.com"
-              />
-            </div>
-          )}
-          
-          {showBcc && (
-            <div className="flex items-center">
-              <span className="w-16 text-sm font-medium">Bcc:</span>
-              <Input 
-                value={bcc} 
-                onChange={(e) => setBcc(e.target.value)} 
-                className="flex-1 border-0 shadow-none h-8 focus-visible:ring-0"
-                placeholder="bcc@example.com"
-              />
-            </div>
-          )}
-          
-          {/* CC/BCC controls */}
-          <div className="flex items-center text-xs">
-            <button 
-              className="text-primary hover:underline mr-3 flex items-center"
-              onClick={() => setShowCc(!showCc)}
-            >
-              {showCc ? (
-                <>
-                  <ChevronUp className="h-3 w-3 mr-0.5" />
-                  Hide Cc
-                </>
-              ) : (
-                <>
-                  <ChevronDown className="h-3 w-3 mr-0.5" />
-                  Show Cc
-                </>
-              )}
-            </button>
-            
-            <button 
-              className="text-primary hover:underline flex items-center"
-              onClick={() => setShowBcc(!showBcc)}
-            >
-              {showBcc ? (
-                <>
-                  <ChevronUp className="h-3 w-3 mr-0.5" />
-                  Hide Bcc
-                </>
-              ) : (
-                <>
-                  <ChevronDown className="h-3 w-3 mr-0.5" />
-                  Show Bcc
-                </>
-              )}
-            </button>
-          </div>
-          
-          <div className="flex items-center">
-            <span className="w-16 text-sm font-medium">Subject:</span>
-            <Input 
-              value={subject} 
-              onChange={(e) => setSubject(e.target.value)} 
-              className="flex-1 border-0 shadow-none h-8 focus-visible:ring-0"
-              placeholder="Subject"
-            />
-          </div>
-        </div>
-        
-        {/* Email body editor */}
-        <div 
-          ref={editorRef}
-          className="flex-1 overflow-auto p-4 focus:outline-none email-content"
-          contentEditable={true}
-          onInput={handleEditorInput}
-          dangerouslySetInnerHTML={{ __html: body }}
-          style={{ minHeight: '200px' }}
-        />
-        
-        {/* Attachments list */}
-        {attachments.length > 0 && (
-          <div className="border-t p-2">
-            <div className="text-sm font-medium mb-1">Attachments:</div>
-            <div className="flex flex-wrap gap-2">
-              {attachments.map((attachment, index) => (
-                <div key={index} className="flex items-center gap-1 text-sm bg-muted px-2 py-1 rounded">
-                  <Paperclip className="h-3 w-3" />
-                  <span>{attachment.name}</span>
-                  <button 
-                    onClick={() => removeAttachment(index)}
-                    className="ml-1 text-muted-foreground hover:text-destructive"
-                  >
-                    <X className="h-3 w-3" />
-                  </button>
-                </div>
-              ))}
-            </div>
-          </div>
-        )}
-      </div>
-      
-      <div className="border-t p-3 flex justify-between">
-        <div>
-          <input
-            type="file"
-            ref={attachmentInputRef}
-            className="hidden"
-            onChange={handleFileSelection}
-            multiple
-          />
+    <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-[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="outline"
-            size="sm"
-            onClick={handleAttachmentClick}
+            variant="ghost"
+            size="icon"
+            className="hover:bg-gray-100 rounded-full"
+            onClick={onClose}
           >
-            <Paperclip className="h-4 w-4 mr-1" />
-            Attach
+            <X className="h-5 w-5 text-gray-500" />
           </Button>
         </div>
-        
-        <Button 
-          size="sm" 
-          onClick={handleSend}
-          disabled={sending}
-        >
-          {sending ? (
-            <>
-              <Loader2 className="h-4 w-4 mr-1 animate-spin" />
-              Sending...
-            </>
-          ) : (
-            <>
-              <SendHorizontal className="h-4 w-4 mr-1" />
-              Send
-            </>
-          )}
-        </Button>
+
+        {/* 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>
+        </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"
+              className="hidden"
+              multiple
+              onChange={(e) => {
+                if (e.target.files && e.target.files.length > 0) {
+                  handleAttachmentAdd(e.target.files);
+                }
+              }}
+            />
+            <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>
+            {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={onClose}
+              disabled={sending}
+            >
+              Cancel
+            </Button>
+            <Button
+              className="bg-blue-600 text-white hover:bg-blue-700"
+              onClick={handleSend}
+              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>
   );