courrier multi account

app/courrier/page.tsx

@@ -64,8 +64,8 @@ function SimplifiedLoadingFix() {
   );
 }
 
-interface Account {
+interface SidebarAccount {
-  id: number;
+  id: number | string;
   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<Account[]>([
+  const [accounts, setAccounts] = useState<SidebarAccount[]>([
     { id: 0, name: 'All', email: '', color: 'bg-gray-500' },
     { id: 1, name: 'Loading...', email: '', color: 'bg-blue-500', folders: mailboxes }
   ]);
-  const [selectedAccount, setSelectedAccount] = useState<Account | null>(null);
+  const [selectedAccount, setSelectedAccount] = useState<SidebarAccount | null>(null);
   
   // Update account folders when mailboxes change
   useEffect(() => {
@@ -148,8 +148,10 @@ 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
-      return (!email.read && email.read !== undefined) || 
+      // Use type assertion to avoid TypeScript errors
-             (email.flags && !email.flags.seen) || 
+      const emailAny = email as any;
+      return (!emailAny.read && emailAny.read !== undefined) || 
+             (emailAny.flags && !emailAny.flags.seen) || 
              false;
     }).filter(email => currentFolder === 'INBOX').length;
     setUnreadCount(unreadInInbox);
@@ -220,7 +222,7 @@ export default function CourrierPage() {
               console.log('Multiple accounts found:', data.allAccounts.length);
               
               // Add each account from the server
-              data.allAccounts.forEach((account, index) => {
+              data.allAccounts.forEach((account: { id?: string | number, email: string, display_name?: string, color?: string }, index: number) => {
                 console.log(`[DEBUG] Processing account: ${account.email}, display_name: ${account.display_name}, has folders: ${!!data.mailboxes}`);
                 
                 const accountWithFolders = {
@@ -789,98 +791,4 @@ 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)}
-      />
-    </>
-  );
-}