mail page imap connection 10
This commit is contained in:
parent
f00f56c18b
commit
d6065d4934
@ -18,7 +18,7 @@ import {
|
||||
} from "@/components/ui/alert-dialog";
|
||||
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { MoreVertical, Settings, Plus as PlusIcon, Trash2, Edit, Mail, Inbox, Send, Star, Trash, Plus, ChevronLeft, ChevronRight, Search, ChevronDown, Folder, ChevronUp, Reply, Forward, ReplyAll, MoreHorizontal, FolderOpen, X, Paperclip } from 'lucide-react';
|
||||
import { MoreVertical, Settings, Plus as PlusIcon, Trash2, Edit, Mail, Inbox, Send, Star, Trash, Plus, ChevronLeft, ChevronRight, Search, ChevronDown, Folder, ChevronUp, Reply, Forward, ReplyAll, MoreHorizontal, FolderOpen, X, Paperclip, MessageSquare } from 'lucide-react';
|
||||
|
||||
interface Account {
|
||||
id: number;
|
||||
@ -309,60 +309,95 @@ export default function MailPage() {
|
||||
{/* Sidebar */}
|
||||
<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`}>
|
||||
{/* Mail Title and Account Selection */}
|
||||
<div className="relative">
|
||||
<div className="p-3 border-b border-gray-100">
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="w-full justify-between text-gray-900 hover:text-gray-900 font-semibold"
|
||||
onClick={() => setAccountsDropdownOpen(!accountsDropdownOpen)}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className={`w-2.5 h-2.5 rounded-full bg-blue-600`}></div>
|
||||
<span>Mail</span>
|
||||
</div>
|
||||
<ChevronDown className="h-4 w-4" />
|
||||
</Button>
|
||||
{/* Courrier Title */}
|
||||
<div className="p-3 border-b border-gray-100">
|
||||
<div className="flex items-center gap-2">
|
||||
<MessageSquare className="h-5 w-5 text-gray-600" />
|
||||
<span className="font-semibold text-gray-900">Courrier</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Accounts Dropdown */}
|
||||
{accountsDropdownOpen && (
|
||||
<div className="absolute top-full left-0 w-full bg-white border border-gray-100 shadow-lg rounded-b-lg z-50">
|
||||
{/* Accounts Section */}
|
||||
<div className="p-3 border-b border-gray-100">
|
||||
<div className="text-sm font-medium text-gray-500 mb-2">Accounts</div>
|
||||
|
||||
{/* All Accounts Option */}
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="w-full justify-start px-2 py-1.5 text-sm mb-1"
|
||||
onClick={() => setSelectedAccount(0)}
|
||||
>
|
||||
<div className="flex items-center gap-2 w-full">
|
||||
<div className="w-2.5 h-2.5 rounded-full bg-gray-400"></div>
|
||||
<span className="font-medium">All</span>
|
||||
</div>
|
||||
</Button>
|
||||
|
||||
{/* Mail Accounts List */}
|
||||
{accounts.map(account => (
|
||||
<div key={account.id} className="relative group">
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="w-full justify-start px-4 py-2 text-sm"
|
||||
onClick={() => {
|
||||
setSelectedAccount(0);
|
||||
setAccountsDropdownOpen(false);
|
||||
}}
|
||||
className="w-full justify-between px-2 py-1.5 text-sm mb-1 group"
|
||||
onClick={() => setSelectedAccount(account.id)}
|
||||
>
|
||||
<div className="flex items-center gap-2 w-full">
|
||||
<div className="w-2.5 h-2.5 rounded-full bg-gray-400"></div>
|
||||
<span className="font-medium">All accounts</span>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className={`w-2.5 h-2.5 rounded-full ${account.color}`}></div>
|
||||
<span className="font-medium">{account.name}</span>
|
||||
</div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-6 w-6 text-gray-400 opacity-0 group-hover:opacity-100 transition-opacity"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setShowAccountActions(account.id);
|
||||
}}
|
||||
>
|
||||
<MoreVertical className="h-4 w-4" />
|
||||
</Button>
|
||||
</Button>
|
||||
{accounts.map(account => (
|
||||
<div key={account.id} className="relative group">
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="w-full justify-start px-4 py-2 text-sm"
|
||||
|
||||
{/* Account Actions Dropdown */}
|
||||
{showAccountActions === account.id && (
|
||||
<div className="absolute right-0 mt-1 w-48 bg-white rounded-md shadow-lg py-1 z-10">
|
||||
<button
|
||||
className="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
|
||||
onClick={() => {
|
||||
setSelectedAccount(account.id);
|
||||
setAccountsDropdownOpen(false);
|
||||
const newName = prompt('Enter new account name:', account.name);
|
||||
if (newName) handleEditAccount(account.id, newName);
|
||||
setShowAccountActions(null);
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center gap-2 w-full">
|
||||
<div className={`w-2.5 h-2.5 rounded-full ${account.color}`}></div>
|
||||
<div className="flex flex-col items-start flex-1">
|
||||
<span className="font-medium">{account.name}</span>
|
||||
<span className="text-xs text-gray-500">{account.email}</span>
|
||||
</div>
|
||||
</div>
|
||||
</Button>
|
||||
<Edit className="h-4 w-4 inline-block mr-2" />
|
||||
Modify Account
|
||||
</button>
|
||||
<button
|
||||
className="block w-full text-left px-4 py-2 text-sm text-red-600 hover:bg-gray-100"
|
||||
onClick={() => {
|
||||
setDeleteType('account');
|
||||
setItemToDelete(account.id);
|
||||
setShowDeleteConfirm(true);
|
||||
setShowAccountActions(null);
|
||||
}}
|
||||
>
|
||||
<Trash2 className="h-4 w-4 inline-block mr-2" />
|
||||
Remove Account
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
))}
|
||||
|
||||
{/* Add Account Button */}
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="w-full justify-start px-2 py-1.5 text-sm text-blue-600 hover:text-blue-700 hover:bg-blue-50"
|
||||
onClick={handleAddAccount}
|
||||
>
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
Add Account
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Compose button */}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user