mail page custum 5

app/mail/page.tsx

@@ -6,7 +6,7 @@ import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
 import { Avatar, AvatarFallback } from "@/components/ui/avatar";
-import { Mail, Inbox, Send, Star, Trash, Plus, ChevronLeft, ChevronRight, Search, ChevronDown } from 'lucide-react';
+import { Mail, Inbox, Send, Star, Trash, Plus, ChevronLeft, ChevronRight, Search, ChevronDown, Folder, ChevronUp } from 'lucide-react';
 
 interface Account {
   id: number;
@@ -86,6 +86,16 @@ export default function MailPage() {
   const [sidebarOpen, setSidebarOpen] = useState(true);
   const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
   const [composeOpen, setComposeOpen] = useState(false);
+  const [accountsDropdownOpen, setAccountsDropdownOpen] = useState(false);
+  const [foldersDropdownOpen, setFoldersDropdownOpen] = useState(false);
+
+  // Mock folders data
+  const folders = [
+    { id: 1, name: 'Important' },
+    { id: 2, name: 'Work' },
+    { id: 3, name: 'Personal' },
+    { id: 4, name: 'Archive' }
+  ];
 
   // Filter emails based on selected account and view
   const filteredEmails = emails.filter(email => 
@@ -137,7 +147,7 @@ export default function MailPage() {
   return (
     <div className="flex h-[calc(100vh-theme(spacing.12))] bg-gray-50 text-gray-900 overflow-hidden mt-12">
       {/* Sidebar */}
-      <div className={`${sidebarOpen ? 'w-64' : 'w-20'} bg-white/95 backdrop-blur-sm border-0 shadow-lg flex flex-col transition-all duration-300 ease-in-out
+      <div className={`${sidebarOpen ? 'w-72' : 'w-20'} bg-white/95 backdrop-blur-sm border-0 shadow-lg flex flex-col transition-all duration-300 ease-in-out
                     ${mobileSidebarOpen ? 'fixed inset-y-0 left-0 z-40' : 'hidden'} md:block`}>
         {/* Logo and toggle */}
         <div className="p-3 flex items-center justify-between border-b border-gray-100">
@@ -153,26 +163,55 @@ export default function MailPage() {
         </div>
 
         {/* Account Selection */}
-        <div className="p-3 border-b border-gray-100">
+        <div className="relative">
-          {sidebarOpen ? (
+          <div className="p-3 border-b border-gray-100">
-            <Button 
+            {sidebarOpen ? (
-              variant="ghost"
+              <Button 
-              className="w-full justify-between text-gray-600 hover:text-gray-900"
+                variant="ghost"
-            >
+                className="w-full justify-between text-gray-600 hover:text-gray-900"
-              <div className="flex items-center gap-2">
+                onClick={() => setAccountsDropdownOpen(!accountsDropdownOpen)}
-                <div className="w-2.5 h-2.5 rounded-full bg-blue-500"></div>
+              >
-                <span>All accounts</span>
+                <div className="flex items-center gap-2">
-              </div>
+                  <div className={`w-2.5 h-2.5 rounded-full ${getAccountColor(selectedAccount)}`}></div>
-              <ChevronDown className="h-4 w-4" />
+                  <span>{accounts.find(acc => acc.id === selectedAccount)?.name || 'All accounts'}</span>
-            </Button>
+                </div>
-          ) : (
+                {accountsDropdownOpen ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
-            <Button
+              </Button>
-              variant="ghost"
+            ) : (
-              size="icon"
+              <Button
-              className="w-full aspect-square"
+                variant="ghost"
-            >
+                size="icon"
-              <div className="w-2.5 h-2.5 rounded-full bg-blue-500"></div>
+                className="w-full aspect-square"
-            </Button>
+                onClick={() => setAccountsDropdownOpen(!accountsDropdownOpen)}
+              >
+                <div className={`w-2.5 h-2.5 rounded-full ${getAccountColor(selectedAccount)}`}></div>
+              </Button>
+            )}
+          </div>
+
+          {/* Accounts Dropdown */}
+          {accountsDropdownOpen && sidebarOpen && (
+            <div className="absolute top-full left-0 w-full bg-white border border-gray-100 shadow-lg rounded-b-lg z-50">
+              {accounts.map(account => (
+                <Button
+                  key={account.id}
+                  variant="ghost"
+                  className="w-full justify-start px-4 py-2 text-sm"
+                  onClick={() => {
+                    setSelectedAccount(account.id);
+                    setAccountsDropdownOpen(false);
+                  }}
+                >
+                  <div className="flex items-center gap-2">
+                    <div className={`w-2.5 h-2.5 rounded-full ${account.color}`}></div>
+                    <div className="flex flex-col items-start">
+                      <span className="font-medium">{account.name}</span>
+                      <span className="text-xs text-gray-500">{account.email}</span>
+                    </div>
+                  </div>
+                </Button>
+              ))}
+            </div>
           )}
         </div>
 
@@ -234,6 +273,41 @@ export default function MailPage() {
                 {sidebarOpen && <span>Trash</span>}
               </Button>
             </li>
+
+            {/* Folders Section */}
+            <li className="mt-4">
+              <Button 
+                variant="ghost"
+                className="w-full justify-between py-2 text-gray-600 hover:text-gray-900"
+                onClick={() => setFoldersDropdownOpen(!foldersDropdownOpen)}
+              >
+                <div className="flex items-center">
+                  <Folder className="h-4 w-4 mr-2" />
+                  {sidebarOpen && <span>Folders</span>}
+                </div>
+                {sidebarOpen && (foldersDropdownOpen ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />)}
+              </Button>
+
+              {/* Folders Dropdown */}
+              {foldersDropdownOpen && sidebarOpen && (
+                <ul className="mt-1 space-y-1">
+                  {folders.map(folder => (
+                    <li key={folder.id}>
+                      <Button
+                        variant="ghost"
+                        className="w-full justify-start py-1.5 pl-8 text-sm text-gray-600 hover:text-gray-900"
+                        onClick={() => {
+                          setCurrentView(folder.name.toLowerCase());
+                          setSelectedEmail(null);
+                        }}
+                      >
+                        {folder.name}
+                      </Button>
+                    </li>
+                  ))}
+                </ul>
+              )}
+            </li>
           </ul>
         </nav>
       </div>
@@ -259,7 +333,7 @@ export default function MailPage() {
         {/* Email list and detail view */}
         <div className="flex-1 flex overflow-hidden">
           {/* Email list */}
-          <div className={`${selectedEmail ? 'hidden md:block md:w-1/3 xl:w-2/5' : 'w-full'} bg-white/95 backdrop-blur-sm border-r border-gray-100 overflow-y-auto`}>
+          <div className={`${selectedEmail ? 'hidden md:block md:w-2/5 xl:w-1/2' : 'w-full'} bg-white/95 backdrop-blur-sm border-r border-gray-100 overflow-y-auto`}>
             <div className="p-4 border-b border-gray-100 flex justify-between items-center">
               <h2 className="text-lg font-semibold text-gray-800 capitalize">
                 {currentView === 'starred' ? 'Starred' : currentView}