courrier multi account

app/courrier/page.tsx

@@ -64,8 +64,8 @@ function SimplifiedLoadingFix() {
   );
 }
 
-interface SidebarAccount {
-  id: number | string;
+interface Account {
+  id: number;
   name: string;
   email: string;
   color: string;
@@ -119,11 +119,11 @@ export default function CourrierPage() {
   const [showAddAccountForm, setShowAddAccountForm] = useState(false);
   
   // Email accounts for the sidebar
-  const [accounts, setAccounts] = useState<SidebarAccount[]>([
+  const [accounts, setAccounts] = useState<Account[]>([
     { id: 0, name: 'All', email: '', color: 'bg-gray-500' },
     { id: 1, name: 'Loading...', email: '', color: 'bg-blue-500', folders: mailboxes }
   ]);
-  const [selectedAccount, setSelectedAccount] = useState<SidebarAccount | null>(null);
+  const [selectedAccount, setSelectedAccount] = useState<Account | null>(null);
   
   // Update account folders when mailboxes change
   useEffect(() => {
@@ -148,10 +148,8 @@ export default function CourrierPage() {
     // Example: counting unread emails in the inbox
     const unreadInInbox = (emails || []).filter(email => {
       // Access the 'read' property safely, handling both old and new email formats
-      // Use type assertion to avoid TypeScript errors
-      const emailAny = email as any;
-      return (!emailAny.read && emailAny.read !== undefined) || 
-             (emailAny.flags && !emailAny.flags.seen) || 
+      return (!email.read && email.read !== undefined) || 
+             (email.flags && !email.flags.seen) || 
              false;
     }).filter(email => currentFolder === 'INBOX').length;
     setUnreadCount(unreadInInbox);
@@ -222,7 +220,7 @@ export default function CourrierPage() {
               console.log('Multiple accounts found:', data.allAccounts.length);
               
               // Add each account from the server
-              data.allAccounts.forEach((account: { id?: string | number, email: string, display_name?: string, color?: string }, index: number) => {
+              data.allAccounts.forEach((account, index) => {
                 console.log(`[DEBUG] Processing account: ${account.email}, display_name: ${account.display_name}, has folders: ${!!data.mailboxes}`);
                 
                 const accountWithFolders = {
@@ -791,4 +789,98 @@ export default function CourrierPage() {
                       variant="ghost"
                       className={`w-full justify-start text-sm py-1 px-2 ${
                         currentView === 'starred' ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:text-gray-900'
-                      }`
+                      }`}
+                      onClick={() => handleMailboxChange('starred')}
+                    >
+                      <div className="flex gap-2 items-center">
+                        <Star className="h-3.5 w-3.5" />
+                        <span>Starred</span>
+                      </div>
+                    </Button>
+                  </div>
+                </div>
+              </ScrollArea>
+            </div>
+            
+            {/* Email List and Content View */}
+            <div className="flex-1 flex overflow-hidden">
+              {/* Email List */}
+              <EmailList 
+                emails={emails}
+                selectedEmailIds={selectedEmailIds}
+                selectedEmail={selectedEmail}
+                currentFolder={currentFolder}
+                isLoading={isLoading}
+                totalEmails={emails.length}
+                hasMoreEmails={hasMoreEmails}
+                onSelectEmail={handleEmailSelect}
+                onToggleSelect={toggleEmailSelection}
+                onToggleSelectAll={toggleSelectAll}
+                onBulkAction={handleBulkAction}
+                onToggleStarred={toggleStarred}
+                onLoadMore={handleLoadMore}
+                onSearch={searchEmails}
+              />
+              
+              {/* Email Content View */}
+              <div className="flex-1 bg-white/95 backdrop-blur-sm flex flex-col">
+                {selectedEmail ? (
+                  <EmailDetailView
+                    email={selectedEmail}
+                    onBack={() => handleEmailSelect('')}
+                    onReply={handleReply}
+                    onReplyAll={handleReplyAll}
+                    onForward={handleForward}
+                    onToggleStar={() => toggleStarred(selectedEmail.id)}
+                  />
+                ) : (
+                  <div className="flex-1 flex flex-col items-center justify-center text-center p-8">
+                    <Mail className="h-12 w-12 text-gray-300 mb-4" />
+                    <h3 className="text-lg font-medium text-gray-900 mb-1">Select an email to read</h3>
+                    <p className="text-sm text-gray-500 max-w-sm">
+                      Choose an email from the list or compose a new message to get started.
+                    </p>
+                    <Button
+                      className="mt-6 bg-blue-600 hover:bg-blue-700"
+                      onClick={handleComposeNew}
+                    >
+                      <PlusIcon className="mr-2 h-4 w-4" />
+                      Compose New
+                    </Button>
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+      </main>
+      
+      {/* Login needed alert */}
+      <LoginNeededAlert 
+        show={showLoginNeeded}
+        onLogin={handleGoToLogin}
+        onClose={() => setShowLoginNeeded(false)}
+      />
+      
+      {/* Compose Modal */}
+      {showComposeModal && (
+        <ComposeEmail
+          initialEmail={selectedEmail}
+          type={composeType}
+          onClose={() => setShowComposeModal(false)}
+          onSend={async (emailData: EmailData) => {
+            await sendEmail(emailData);
+          }}
+        />
+      )}
+      
+      {/* Delete Confirmation Dialog */}
+      <DeleteConfirmDialog
+        show={showDeleteConfirm}
+        selectedCount={selectedEmailIds.length}
+        onConfirm={handleDeleteConfirm}
+        onCancel={() => setShowDeleteConfirm(false)}
+      />
+    </>
+  );
+}