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,33 +83,35 @@ export default function EmailSidebar({
       {/* Folder navigation */}
       <ScrollArea className="flex-1">
         <div className="p-2 space-y-1">
-          {visibleStandardFolders.map((folder) => (
+          {/* Accounts header with toggle */}
-            <Button
+          <div className="flex items-center justify-between px-2 py-2 text-sm font-medium text-gray-600">
-              key={folder}
+            <span>Accounts</span>
-              variant={currentFolder === folder ? "secondary" : "ghost"}
+            {isLoading && <RefreshCw className="h-3 w-3 animate-spin text-gray-400" />}
-              className={`w-full justify-start ${
+          </div>
-                currentFolder === folder ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:text-gray-900'
-              }`}
-              onClick={() => onFolderChange(folder)}
-            >
-              <div className="flex items-center w-full">
-                <span className="flex items-center">
-                  {getFolderIcon(folder)}
-                  <span className="ml-2 capitalize">{folder.toLowerCase()}</span>
-                </span>
-                {folder === 'INBOX' && (
-                  <span className="ml-auto bg-blue-600 text-white text-xs px-2 py-0.5 rounded-full">
-                    {/* Unread count would go here */}
-                  </span>
-                )}
-              </div>
-            </Button>
-          ))}
           
-          {/* Custom folders section */}
+          {/* Mail account with toggle arrow */}
-          {customFolders.length > 0 && (
+          <div className="px-2">
-            <>
+            <Button
-              {customFolders.map(folder => (
+              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}
                   variant={currentFolder === folder ? "secondary" : "ghost"}
@@ -115,13 +120,41 @@ export default function EmailSidebar({
                   }`}
                   onClick={() => onFolderChange(folder)}
                 >
-                  <div className="flex items-center">
+                  <div className="flex items-center w-full">
-                    {getFolderIcon(folder)}
+                    <span className="flex items-center">
-                    <span className="ml-2 truncate">{folder}</span>
+                      {getFolderIcon(folder)}
+                      <span className="ml-2 capitalize">{folder.toLowerCase()}</span>
+                    </span>
+                    {folder === 'INBOX' && (
+                      <span className="ml-auto bg-blue-600 text-white text-xs px-2 py-0.5 rounded-full">
+                        {/* Unread count would go here */}
+                      </span>
+                    )}
                   </div>
                 </Button>
               ))}
-            </>
+              
+              {/* Custom folders section */}
+              {customFolders.length > 0 && (
+                <>
+                  {customFolders.map(folder => (
+                    <Button
+                      key={folder}
+                      variant={currentFolder === folder ? "secondary" : "ghost"}
+                      className={`w-full justify-start ${
+                        currentFolder === folder ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:text-gray-900'
+                      }`}
+                      onClick={() => onFolderChange(folder)}
+                    >
+                      <div className="flex items-center">
+                        {getFolderIcon(folder)}
+                        <span className="ml-2 truncate">{folder}</span>
+                      </div>
+                    </Button>
+                  ))}
+                </>
+              )}
+            </div>
           )}
         </div>
       </ScrollArea>