courrier redis login

app/courrier/page.tsx

@@ -107,6 +107,7 @@ export default function CourrierPage() {
   const [unreadCount, setUnreadCount] = useState(0);
   const [loading, setLoading] = useState(false);
   const [prefetchStarted, setPrefetchStarted] = useState(false);
+  const [showFolders, setShowFolders] = useState(true);
   
   // Mock accounts for the sidebar
   const [accounts, setAccounts] = useState<Account[]>([
@@ -347,16 +348,27 @@ export default function CourrierPage() {
                         <Button
                           variant="ghost"
                           className="w-full justify-between px-2 py-1.5 text-sm group"
-                          onClick={() => setSelectedAccount(account)}
+                          onClick={() => {
+                            if (account.id !== 0) {
+                              // Only toggle folders for non-All accounts
+                              setShowFolders(!showFolders);
+                            }
+                            setSelectedAccount(account);
+                          }}
                         >
                           <div className="flex items-center gap-2">
                             <div className={`w-2.5 h-2.5 rounded-full ${account.color}`}></div>
                             <span className="font-medium text-gray-700">{account.name}</span>
                           </div>
+                          {account.id !== 0 && (
+                            showFolders ? 
+                              <ChevronDown className="h-3.5 w-3.5 text-gray-500" /> : 
+                              <ChevronRight className="h-3.5 w-3.5 text-gray-500" />
+                          )}
                         </Button>
                         
                         {/* Show folders for email accounts (not for "All" account) without the "Folders" header */}
-                        {account.id !== 0 && (
+                        {account.id !== 0 && showFolders && (
                           <div className="pl-4 mt-1 mb-2 space-y-0.5 border-l border-gray-200">
                             {account.folders && account.folders.length > 0 ? (
                               account.folders.map((folder) => (

components/email/EmailSidebar.tsx

@@ -1,9 +1,10 @@
 'use client';
 
-import React from 'react';
+import React, { useState } from 'react';
 import { 
   Inbox, Send, Trash, Archive, Star, 
-  File, RefreshCw, Plus, MailOpen, Settings
+  File, RefreshCw, Plus, MailOpen, Settings,
+  ChevronDown, ChevronRight, Mail
 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { cn } from '@/lib/utils';
@@ -27,6 +28,8 @@ export default function EmailSidebar({
   onCompose,
   isLoading
 }: EmailSidebarProps) {
+  const [showFolders, setShowFolders] = useState(true);
+
   // Get the appropriate icon for a folder
   const getFolderIcon = (folder: string) => {
     const folderLower = folder.toLowerCase();
@@ -80,6 +83,34 @@ export default function EmailSidebar({
       {/* Folder 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" />}
+          </div>
+          
+          {/* Mail account with toggle arrow */}
+          <div className="px-2">
+            <Button
+              variant="ghost"
+              className="w-full justify-between p-2 text-gray-600 hover:text-gray-900 hover:bg-gray-100"
+              onClick={() => setShowFolders(!showFolders)}
+            >
+              <div className="flex items-center">
+                <Mail className="h-4 w-4 mr-2" />
+                <span>Mail</span>
+              </div>
+              {showFolders ? (
+                <ChevronDown className="h-4 w-4" />
+              ) : (
+                <ChevronRight className="h-4 w-4" />
+              )}
+            </Button>
+          </div>
+          
+          {/* Folders list - shown only when showFolders is true */}
+          {showFolders && (
+            <div className="pl-6 space-y-1">
               {visibleStandardFolders.map((folder) => (
                 <Button
                   key={folder}
@@ -124,6 +155,8 @@ export default function EmailSidebar({
                 </>
               )}
             </div>
+          )}
+        </div>
       </ScrollArea>
       
       {/* Settings button (bottom) */}