From 338f23104e4892afff45c325e41924447263f2be Mon Sep 17 00:00:00 2001
From: alma <alma@governance-labs.org>
Date: Thu, 24 Apr 2025 16:36:21 +0200
Subject: [PATCH] mime change

---
 app/courrier/page.tsx | 338 ++++++++++++++++++++++++++++++++----------
 1 file changed, 258 insertions(+), 80 deletions(-)

diff --git a/app/courrier/page.tsx b/app/courrier/page.tsx
index 21938c49..6e931607 100644
--- a/app/courrier/page.tsx
+++ b/app/courrier/page.tsx
@@ -1128,6 +1128,184 @@ export default function CourrierPage() {
     }
   };
 
+  // Add back the renderSidebarNav function
+  const renderSidebarNav = () => (
+    <nav className="p-3">
+      <ul className="space-y-0.5 px-2">
+        {sidebarItems.map((item) => (
+          <li key={item.view}>
+            <Button 
+              variant={currentView === item.view ? 'secondary' : 'ghost'}
+              className={`w-full justify-start py-2 ${
+                currentView === item.view ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:text-gray-900'
+              }`}
+              onClick={() => {
+                setCurrentView(item.view);
+                setSelectedEmail(null);
+              }}
+            >
+              <div className="flex items-center justify-between w-full">
+                <div className="flex items-center">
+                  <item.icon className="h-4 w-4 mr-2" />
+                  <span>{item.label}</span>
+                </div>
+                {item.view === 'INBOX' && unreadCount > 0 && (
+                  <span className="ml-auto bg-blue-600 text-white text-xs px-2 py-0.5 rounded-full">
+                    {unreadCount}
+                  </span>
+                )}
+              </div>
+            </Button>
+          </li>
+        ))}
+      </ul>
+    </nav>
+  );
+
+  // Add back the handleReply function
+  const handleReply = (type: 'reply' | 'reply-all' | 'forward') => {
+    if (!selectedEmail) return;
+
+    const getReplyTo = () => {
+      if (type === 'forward') return '';
+      return selectedEmail.from;
+    };
+
+    const getReplyCc = () => {
+      if (type !== 'reply-all') return '';
+      return selectedEmail.cc || '';
+    };
+
+    const getReplySubject = () => {
+      const subject = selectedEmail.subject || '';
+      if (type === 'forward') {
+        return subject.startsWith('Fwd:') ? subject : `Fwd: ${subject}`;
+      }
+      return subject.startsWith('Re:') ? subject : `Re: ${subject}`;
+    };
+
+    // Get the formatted original email content
+    const originalContent = getReplyBody(selectedEmail, type);
+    
+    // Create a clean structure with clear separation
+    const formattedContent = `
+      <div id="new-reply-area" dir="ltr" style="margin-bottom: 20px; min-height: 40px;"></div>
+      <div id="original-email" dir="ltr" style="border-top: 1px solid #e0e0e0; padding-top: 10px; color: #555;">
+        ${originalContent}
+      </div>
+    `;
+
+    // Update the compose form
+    setComposeTo(getReplyTo());
+    setComposeCc(getReplyCc());
+    setComposeSubject(getReplySubject());
+    setComposeBody(formattedContent);
+    setComposeBcc('');
+
+    // Show the compose form and CC field for Reply All
+    setShowCompose(true);
+    setShowCc(type === 'reply-all');
+    setShowBcc(false);
+    setAttachments([]);
+  };
+
+  // Add back the toggleStarred function
+  const toggleStarred = async (emailId: number, e?: React.MouseEvent) => {
+    if (e) {
+      e.stopPropagation();
+    }
+
+    const email = emails.find(e => e.id === emailId);
+    if (!email) return;
+
+    try {
+      const response = await fetch('/api/courrier/toggle-star', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ emailId, starred: !email.starred }),
+      });
+
+      if (!response.ok) {
+        throw new Error('Failed to toggle star');
+      }
+
+      // Update email in state
+      setEmails(emails.map(e => 
+        e.id === emailId ? { ...e, starred: !e.starred } : e
+      ));
+    } catch (error) {
+      console.error('Error toggling star:', error);
+    }
+  };
+
+  // Add back the handleSend function
+  const handleSend = async () => {
+    if (!composeTo) {
+      alert('Please specify at least one recipient');
+      return;
+    }
+
+    try {
+      const response = await fetch('/api/courrier/send', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          to: composeTo,
+          cc: composeCc,
+          bcc: composeBcc,
+          subject: composeSubject,
+          body: composeBody,
+          attachments: attachments,
+        }),
+      });
+
+      const data = await response.json();
+
+      if (!response.ok) {
+        if (data.error === 'Attachment size limit exceeded') {
+          alert(`Error: ${data.error}\nThe following files are too large:\n${data.details.oversizedFiles.join('\n')}`);
+        } else {
+          alert(`Error sending email: ${data.error}`);
+        }
+        return;
+      }
+
+      // Clear compose form and close modal
+      setComposeTo('');
+      setComposeCc('');
+      setComposeBcc('');
+      setComposeSubject('');
+      setComposeBody('');
+      setAttachments([]);
+      setShowCompose(false);
+    } catch (error) {
+      console.error('Error sending email:', error);
+      alert('Failed to send email. Please try again.');
+    }
+  };
+
+  // Add back the renderDeleteConfirmDialog function
+  const renderDeleteConfirmDialog = () => (
+    <AlertDialog open={showDeleteConfirm} onOpenChange={setShowDeleteConfirm}>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Delete Emails</AlertDialogTitle>
+          <AlertDialogDescription>
+            Are you sure you want to delete {selectedEmails.length} selected email{selectedEmails.length > 1 ? 's' : ''}? This action cannot be undone.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>Cancel</AlertDialogCancel>
+          <AlertDialogAction onClick={handleDeleteConfirm}>Delete</AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+
   if (error) {
     return (
       <div className="flex h-[calc(100vh-theme(spacing.12))] items-center justify-center bg-gray-100 mt-12">
@@ -1152,92 +1330,92 @@ export default function CourrierPage() {
       <main className="w-full h-screen bg-black">
         <div className="w-full h-full px-4 pt-12 pb-4">
           <div className="flex h-full bg-carnet-bg">
-        {/* Sidebar */}
-        <div className={`${sidebarOpen ? 'w-60' : 'w-16'} bg-white/95 backdrop-blur-sm border-r border-gray-100 flex flex-col transition-all duration-300 ease-in-out
-                      ${mobileSidebarOpen ? 'fixed inset-y-0 left-0 z-40' : 'hidden'} md:block`}>
-          {/* Courrier Title */}
-          <div className="p-3 border-b border-gray-100">
-            <div className="flex items-center gap-2">
-              <Mail className="h-6 w-6 text-gray-600" />
-              <span className="text-xl font-semibold text-gray-900">COURRIER</span>
-            </div>
-          </div>
-
-          {/* Compose button and refresh button */}
-          <div className="p-2 border-b border-gray-100 flex items-center gap-2">
-            <Button 
-              className="flex-1 bg-blue-600 text-white rounded-lg hover:bg-blue-700 flex items-center justify-center transition-all py-1.5 text-sm"
-              onClick={() => {
-                setShowCompose(true);
-                setComposeTo('');
-                setComposeCc('');
-                setComposeBcc('');
-                setComposeSubject('');
-                setComposeBody('');
-                setShowCc(false);
-                setShowBcc(false);
-              }}
-            >
-              <div className="flex items-center gap-2">
-                <PlusIcon className="h-3.5 w-3.5" />
-                <span>Compose</span>
+            {/* Sidebar */}
+            <div className={`${sidebarOpen ? 'w-60' : 'w-16'} bg-white/95 backdrop-blur-sm border-r border-gray-100 flex flex-col transition-all duration-300 ease-in-out
+                          ${mobileSidebarOpen ? 'fixed inset-y-0 left-0 z-40' : 'hidden'} md:block`}>
+              {/* Courrier Title */}
+              <div className="p-3 border-b border-gray-100">
+                <div className="flex items-center gap-2">
+                  <Mail className="h-6 w-6 text-gray-600" />
+                  <span className="text-xl font-semibold text-gray-900">COURRIER</span>
+                </div>
               </div>
-            </Button>
-            <Button
-              variant="ghost"
-              size="icon"
-              onClick={() => handleMailboxChange('INBOX')}
-              className="text-gray-600 hover:text-gray-900 hover:bg-gray-100"
-            >
-              <RefreshCw className="h-4 w-4" />
-            </Button>
-          </div>
 
-          {/* Accounts Section */}
-          <div className="p-3 border-b border-gray-100">
-            <Button 
-              variant="ghost"
-              className="w-full justify-between mb-2 text-sm font-medium text-gray-500"
-              onClick={() => setAccountsDropdownOpen(!accountsDropdownOpen)}
-            >
-              <span>Accounts</span>
-              {accountsDropdownOpen ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
-            </Button>
-            
-            {accountsDropdownOpen && (
-              <div className="space-y-1 pl-2">
-                {accounts.map(account => (
-                  <div key={account.id} className="relative group">
-                    <Button
-                      variant="ghost"
-                      className="w-full justify-between px-2 py-1.5 text-sm group"
-                      onClick={() => setSelectedAccount(account)}
-                    >
-                      <div className="flex flex-col items-start">
-                        <div className="flex items-center gap-2">
-                          <div className={`w-2.5 h-2.5 rounded-full ${account.color}`}></div>
-                          <span className="font-medium">{account.name}</span>
-                        </div>
-                        <span className="text-xs text-gray-500 ml-4">{account.email}</span>
-                      </div>
-                    </Button>
+              {/* Compose button and refresh button */}
+              <div className="p-2 border-b border-gray-100 flex items-center gap-2">
+                <Button 
+                  className="flex-1 bg-blue-600 text-white rounded-lg hover:bg-blue-700 flex items-center justify-center transition-all py-1.5 text-sm"
+                  onClick={() => {
+                    setShowCompose(true);
+                    setComposeTo('');
+                    setComposeCc('');
+                    setComposeBcc('');
+                    setComposeSubject('');
+                    setComposeBody('');
+                    setShowCc(false);
+                    setShowBcc(false);
+                  }}
+                >
+                  <div className="flex items-center gap-2">
+                    <PlusIcon className="h-3.5 w-3.5" />
+                    <span>Compose</span>
                   </div>
-                ))}
+                </Button>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  onClick={() => handleMailboxChange('INBOX')}
+                  className="text-gray-600 hover:text-gray-900 hover:bg-gray-100"
+                >
+                  <RefreshCw className="h-4 w-4" />
+                </Button>
               </div>
-            )}
-          </div>
 
-          {/* Navigation */}
-          {renderSidebarNav()}
-        </div>
+              {/* Accounts Section */}
+              <div className="p-3 border-b border-gray-100">
+                <Button 
+                  variant="ghost"
+                  className="w-full justify-between mb-2 text-sm font-medium text-gray-500"
+                  onClick={() => setAccountsDropdownOpen(!accountsDropdownOpen)}
+                >
+                  <span>Accounts</span>
+                  {accountsDropdownOpen ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
+                </Button>
+                
+                {accountsDropdownOpen && (
+                  <div className="space-y-1 pl-2">
+                    {accounts.map(account => (
+                      <div key={account.id} className="relative group">
+                        <Button
+                          variant="ghost"
+                          className="w-full justify-between px-2 py-1.5 text-sm group"
+                          onClick={() => setSelectedAccount(account)}
+                        >
+                          <div className="flex flex-col items-start">
+                            <div className="flex items-center gap-2">
+                              <div className={`w-2.5 h-2.5 rounded-full ${account.color}`}></div>
+                              <span className="font-medium">{account.name}</span>
+                            </div>
+                            <span className="text-xs text-gray-500 ml-4">{account.email}</span>
+                          </div>
+                        </Button>
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </div>
 
-        {/* Main content area */}
-        <div className="flex-1 flex overflow-hidden">
-          {/* Email list panel */}
-          {renderEmailListWrapper()}
-        </div>
-      </div>
+              {/* Navigation */}
+              {renderSidebarNav()}
             </div>
+
+            {/* Main content area */}
+            <div className="flex-1 flex overflow-hidden">
+              {/* Email list panel */}
+              {renderEmailListWrapper()}
+            </div>
+          </div>
+        </div>
       </main>
 
       {/* Compose Email Modal */}
@@ -1283,4 +1461,4 @@ export default function CourrierPage() {
       {renderDeleteConfirmDialog()}
     </>
   );
-}
+}
\ No newline at end of file