courrier multi account restore compose

app/courrier/page.tsx

@@ -618,7 +618,7 @@ 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 - Make sure it's visible regardless of email selection */}
+            {/* Panel 1: Sidebar - Always visible */}
             <div className="w-60 bg-white/95 backdrop-blur-sm border-r border-gray-100 flex flex-col md:flex" style={{display: "flex !important"}}>
               {/* Courrier Title */}
               <div className="p-3 border-b border-gray-100">
@@ -975,9 +975,9 @@ export default function CourrierPage() {
               </div>
             </div>
 
-            {/* Main Content Area - conditionally show email list or detail view */}
+            {/* Panel 2: Email List - Always visible */}
-            <div className="flex-1 flex flex-col overflow-hidden" style={{ maxWidth: 'calc(100% - 240px)' }}>
+            <div className="w-1/3 flex flex-col border-r border-gray-100 overflow-hidden">
-              {/* Header bar with search */}
+              {/* Header with search */}
               <div className="p-2 border-b border-gray-100 bg-white flex items-center justify-between">
                 <Button 
                   variant="ghost" 
@@ -1038,7 +1038,7 @@ export default function CourrierPage() {
                 </div>
               </div>
               
-              {/* Email List or Detail View */}
+              {/* Email List - Always visible */}
               <div className="flex-1 overflow-hidden bg-white">
                 {isLoading ? (
                   <div className="h-full flex items-center justify-center">
@@ -1069,19 +1069,6 @@ export default function CourrierPage() {
                       </Alert>
                     </div>
                   </div>
-                ) : selectedEmail ? (
-                  <EmailDetailView 
-                    email={selectedEmail} 
-                    onBack={() => {
-                      handleEmailSelect('');
-                      // Ensure sidebar stays visible
-                      setSidebarOpen(true);
-                    }}
-                    onReply={handleReply}
-                    onReplyAll={handleReplyAll}
-                    onForward={handleForward}
-                    onToggleStar={() => toggleStarred(selectedEmail.id)}
-                  />
                 ) : (
                   <div className="h-full overflow-hidden flex flex-col">
                     {/* Email List */}
@@ -1120,6 +1107,49 @@ export default function CourrierPage() {
                 )}
               </div>
             </div>
+            
+            {/* Panel 3: Email Detail or Compose - Always visible */}
+            <div className="flex-1 flex flex-col overflow-hidden">
+              {/* Content for Panel 3 based on state but always visible */}
+              <div className="flex-1 overflow-hidden bg-white">
+                {showComposeModal ? (
+                  <ComposeEmail 
+                    type={composeType}
+                    initialEmail={composeType !== 'new' ? selectedEmail : undefined}
+                    onSend={handleSendEmail}
+                    onClose={() => setShowComposeModal(false)}
+                  />
+                ) : selectedEmail ? (
+                  <EmailDetailView 
+                    email={selectedEmail} 
+                    onBack={() => {
+                      handleEmailSelect('');
+                      // Ensure sidebar stays visible
+                      setSidebarOpen(true);
+                    }}
+                    onReply={handleReply}
+                    onReplyAll={handleReplyAll}
+                    onForward={handleForward}
+                    onToggleStar={() => toggleStarred(selectedEmail.id)}
+                  />
+                ) : (
+                  <div className="h-full flex items-center justify-center">
+                    <div className="text-center text-muted-foreground">
+                      <p>Select an email to view or</p>
+                      <button 
+                        className="text-primary mt-2 hover:underline"
+                        onClick={() => {
+                          setComposeType('new');
+                          setShowComposeModal(true);
+                        }}
+                      >
+                        Compose a new message
+                      </button>
+                    </div>
+                  </div>
+                )}
+              </div>
+            </div>
           </div>
         </div>
       </main>
@@ -1137,18 +1167,6 @@ export default function CourrierPage() {
         onLogin={handleGoToLogin}
         onClose={() => setShowLoginNeeded(false)}
       />
-      
-      <Dialog open={showComposeModal} onOpenChange={setShowComposeModal}>
-        <DialogContent className="sm:max-w-[800px] h-[80vh] p-0 overflow-hidden">
-          <ComposeEmail 
-            type={composeType}
-            initialEmail={composeType !== 'new' ? selectedEmail : undefined}
-            onSend={handleSendEmail}
-            onClose={() => setShowComposeModal(false)}
-            isSending={isSending}
-          />
-        </DialogContent>
-      </Dialog>
     </>
   );
 }