courrier multi account restore compose

components/email/EmailSidebar.tsx

@@ -13,8 +13,13 @@ import { Badge } from '@/components/ui/badge';
 
 interface EmailSidebarProps {
   currentFolder: string;
+  currentAccount: string;
+  accounts: Array<{
+    id: string;
+    email: string;
     folders: string[];
-  onFolderChange: (folder: string) => void;
+  }>;
+  onFolderChange: (folder: string, accountId: string) => void;
   onRefresh: () => void;
   onCompose: () => void;
   isLoading: boolean;
@@ -22,13 +27,15 @@ interface EmailSidebarProps {
 
 export default function EmailSidebar({
   currentFolder,
-  folders,
+  currentAccount,
+  accounts,
   onFolderChange,
   onRefresh,
   onCompose,
   isLoading
 }: EmailSidebarProps) {
-  const [showFolders, setShowFolders] = useState(true);
+  const [showAccounts, setShowAccounts] = useState(true);
+  const [expandedAccount, setExpandedAccount] = useState<string | null>(currentAccount);
 
   // Get the appropriate icon for a folder
   const getFolderIcon = (folder: string) => {
@@ -58,14 +65,23 @@ export default function EmailSidebar({
   };
 
   // Group folders into standard and custom
+  const getStandardFolders = (folders: string[]) => {
     const standardFolders = ['INBOX', 'Sent', 'Drafts', 'Trash', 'Archive', 'Junk'];
-  const visibleStandardFolders = standardFolders.filter(f => 
+    return standardFolders.filter(f => 
       folders.includes(f) || folders.some(folder => folder.toLowerCase() === f.toLowerCase())
     );
+  };
   
-  const customFolders = folders.filter(f => 
+  const getCustomFolders = (folders: string[]) => {
+    const standardFolders = ['INBOX', 'Sent', 'Drafts', 'Trash', 'Archive', 'Junk'];
+    return folders.filter(f => 
       !standardFolders.some(sf => sf.toLowerCase() === f.toLowerCase())
     );
+  };
+
+  const handleAccountClick = (accountId: string) => {
+    setExpandedAccount(expandedAccount === accountId ? null : accountId);
+  };
 
   return (
     <aside className="w-64 border-r h-full flex flex-col bg-white/95 backdrop-blur-sm">
@@ -76,49 +92,63 @@ export default function EmailSidebar({
           onClick={onCompose}
         >
           <Plus className="h-4 w-4 mr-2" />
-          New Email
+          Compose
         </Button>
       </div>
       
-      {/* Folder navigation */}
+      {/* Accounts and folders navigation */}
       <ScrollArea className="flex-1">
         <div className="p-2 space-y-1">
           {/* Accounts header with toggle */}
           <div className="flex items-center justify-between px-2 py-2 text-sm font-medium text-gray-600">
             <span>Accounts</span>
-            {isLoading && <RefreshCw className="h-3 w-3 animate-spin text-gray-400" />}
+            <button 
+              onClick={() => setShowAccounts(!showAccounts)}
+              className="text-gray-400 hover:text-gray-600"
+            >
+              {showAccounts ? (
+                <ChevronDown className="h-4 w-4" />
+              ) : (
+                <ChevronRight className="h-4 w-4" />
+              )}
+            </button>
           </div>
           
-          {/* Mail account with toggle arrow */}
+          {/* Accounts list */}
-          <div className="px-2">
+          {showAccounts && (
+            <div className="space-y-1">
+              {accounts.map((account) => (
+                <div key={account.id} className="space-y-1">
+                  {/* Account button */}
                   <Button
                     variant="ghost"
-              className="w-full justify-between p-2 text-gray-600 hover:text-gray-900 hover:bg-gray-100"
+                    className={`w-full justify-between p-2 text-gray-600 hover:text-gray-900 hover:bg-gray-100 ${
-              onClick={() => setShowFolders(!showFolders)}
+                      expandedAccount === account.id ? 'bg-gray-100' : ''
+                    }`}
+                    onClick={() => handleAccountClick(account.id)}
                   >
                     <div className="flex items-center">
                       <Mail className="h-4 w-4 mr-2" />
-                <span>Mail</span>
+                      <span className="truncate">{account.email}</span>
                     </div>
-              {showFolders ? (
+                    {expandedAccount === account.id ? (
                       <ChevronDown className="h-4 w-4" />
                     ) : (
                       <ChevronRight className="h-4 w-4" />
                     )}
                   </Button>
-          </div>
                   
-          {/* Folders list - shown only when showFolders is true */}
+                  {/* Account folders - shown when account is expanded */}
-          {showFolders && (
+                  {expandedAccount === account.id && (
                     <div className="pl-6 space-y-1">
-              {visibleStandardFolders.map((folder) => (
+                      {getStandardFolders(account.folders).map((folder) => (
                         <Button
                           key={folder}
-                  variant={currentFolder === folder ? "secondary" : "ghost"}
+                          variant={currentFolder === folder && currentAccount === account.id ? "secondary" : "ghost"}
                           className={`w-full justify-start ${
-                    currentFolder === folder ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:text-gray-900'
+                            currentFolder === folder && currentAccount === account.id ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:text-gray-900'
                           }`}
-                  onClick={() => onFolderChange(folder)}
+                          onClick={() => onFolderChange(folder, account.id)}
                         >
                           <div className="flex items-center w-full">
                             <span className="flex items-center">
@@ -134,17 +164,15 @@ export default function EmailSidebar({
                         </Button>
                       ))}
                       
-              {/* Custom folders section */}
+                      {/* Custom folders */}
-              {customFolders.length > 0 && (
+                      {getCustomFolders(account.folders).map(folder => (
-                <>
-                  {customFolders.map(folder => (
                         <Button
                           key={folder}
-                      variant={currentFolder === folder ? "secondary" : "ghost"}
+                          variant={currentFolder === folder && currentAccount === account.id ? "secondary" : "ghost"}
                           className={`w-full justify-start ${
-                        currentFolder === folder ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:text-gray-900'
+                            currentFolder === folder && currentAccount === account.id ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:text-gray-900'
                           }`}
-                      onClick={() => onFolderChange(folder)}
+                          onClick={() => onFolderChange(folder, account.id)}
                         >
                           <div className="flex items-center">
                             {getFolderIcon(folder)}
@@ -152,9 +180,11 @@ export default function EmailSidebar({
                           </div>
                         </Button>
                       ))}
-                </>
+                    </div>
                   )}
                 </div>
+              ))}
+            </div>
           )}
         </div>
       </ScrollArea>