mail page custum 6

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, Folder, ChevronUp } from 'lucide-react';
+import { MoreVertical, Settings, Plus as PlusIcon, Trash2, Edit, Mail, Inbox, Send, Star, Trash, Plus, ChevronLeft, ChevronRight, Search, ChevronDown, Folder, ChevronUp } from 'lucide-react';
 
 interface Account {
   id: number;
@@ -88,6 +88,7 @@ export default function MailPage() {
   const [composeOpen, setComposeOpen] = useState(false);
   const [accountsDropdownOpen, setAccountsDropdownOpen] = useState(false);
   const [foldersDropdownOpen, setFoldersDropdownOpen] = useState(false);
+  const [showAccountActions, setShowAccountActions] = useState<number | null>(null);
 
   // Mock folders data
   const folders = [
@@ -97,9 +98,15 @@ export default function MailPage() {
     { id: 4, name: 'Archive' }
   ];
 
+  // Modified accounts array with "All" option
+  const allAccounts = [
+    { id: 0, name: 'All', email: '', color: 'bg-gray-500' },
+    ...accounts
+  ];
+
   // Filter emails based on selected account and view
   const filteredEmails = emails.filter(email => 
-    email.accountId === selectedAccount && 
+    (selectedAccount === 0 || email.accountId === selectedAccount) && 
     (currentView === 'starred' ? email.starred : email.category === currentView)
   );
 
@@ -144,6 +151,17 @@ export default function MailPage() {
     return account ? account.color : 'bg-gray-500';
   };
 
+  const handleAccountAction = (accountId: number, action: 'edit' | 'delete') => {
+    setShowAccountActions(null);
+    if (action === 'delete') {
+      setAccounts(accounts.filter(acc => acc.id !== accountId));
+      if (selectedAccount === accountId) {
+        setSelectedAccount(0);
+      }
+    }
+    // Handle edit in a real application
+  };
+
   return (
     <div className="flex h-[calc(100vh-theme(spacing.12))] bg-gray-50 text-gray-900 overflow-hidden mt-12">
       {/* Sidebar */}
@@ -192,25 +210,74 @@ export default function MailPage() {
           {/* 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 => (
+              {allAccounts.map(account => (
-                <Button
+                <div key={account.id} className="relative group">
-                  key={account.id}
+                  <Button
-                  variant="ghost"
+                    variant="ghost"
-                  className="w-full justify-start px-4 py-2 text-sm"
+                    className="w-full justify-start px-4 py-2 text-sm"
-                  onClick={() => {
+                    onClick={() => {
-                    setSelectedAccount(account.id);
+                      setSelectedAccount(account.id);
-                    setAccountsDropdownOpen(false);
+                      setAccountsDropdownOpen(false);
-                  }}
+                    }}
-                >
+                  >
-                  <div className="flex items-center gap-2">
+                    <div className="flex items-center gap-2 w-full">
-                    <div className={`w-2.5 h-2.5 rounded-full ${account.color}`}></div>
+                      <div className={`w-2.5 h-2.5 rounded-full ${account.color}`}></div>
-                    <div className="flex flex-col items-start">
+                      <div className="flex flex-col items-start flex-1">
-                      <span className="font-medium">{account.name}</span>
+                        <span className="font-medium">{account.name}</span>
-                      <span className="text-xs text-gray-500">{account.email}</span>
+                        {account.email && <span className="text-xs text-gray-500">{account.email}</span>}
+                      </div>
+                      {account.id !== 0 && (
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          className="opacity-0 group-hover:opacity-100"
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            setShowAccountActions(account.id);
+                          }}
+                        >
+                          <MoreVertical className="h-4 w-4 text-gray-500" />
+                        </Button>
+                      )}
                     </div>
-                  </div>
+                  </Button>
-                </Button>
+                  
+                  {/* Account Actions Dropdown */}
+                  {showAccountActions === account.id && account.id !== 0 && (
+                    <div className="absolute right-0 mt-1 w-48 bg-white border border-gray-100 shadow-lg rounded-lg z-50">
+                      <Button
+                        variant="ghost"
+                        className="w-full justify-start px-4 py-2 text-sm text-gray-600 hover:text-gray-900"
+                        onClick={() => handleAccountAction(account.id, 'edit')}
+                      >
+                        <Edit className="h-4 w-4 mr-2" />
+                        Edit account
+                      </Button>
+                      <Button
+                        variant="ghost"
+                        className="w-full justify-start px-4 py-2 text-sm text-red-600 hover:text-red-700"
+                        onClick={() => handleAccountAction(account.id, 'delete')}
+                      >
+                        <Trash2 className="h-4 w-4 mr-2" />
+                        Remove account
+                      </Button>
+                    </div>
+                  )}
+                </div>
               ))}
+              
+              {/* Add Account Button */}
+              <Button
+                variant="ghost"
+                className="w-full justify-start px-4 py-2 text-sm text-blue-600 hover:text-blue-700 border-t border-gray-100"
+                onClick={() => {
+                  setAccountsDropdownOpen(false);
+                  // Handle add account in a real application
+                }}
+              >
+                <PlusIcon className="h-4 w-4 mr-2" />
+                Add account
+              </Button>
             </div>
           )}
         </div>
@@ -222,11 +289,11 @@ export default function MailPage() {
         >
           {sidebarOpen ? (
             <div className="flex items-center">
-              <Plus className="h-4 w-4" />
+              <PlusIcon className="h-4 w-4" />
               <span className="ml-2">Compose</span>
             </div>
           ) : (
-            <Plus className="h-4 w-4" />
+            <PlusIcon className="h-4 w-4" />
           )}
         </Button>
 
@@ -333,7 +400,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-2/5 xl:w-1/2' : 'w-full'} bg-white/95 backdrop-blur-sm border-r border-gray-100 overflow-y-auto`}>
+          <div className={`${selectedEmail ? 'hidden md:block md:w-[380px]' : '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}