alma/NeahFront9
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

mail page imap connection 9

Browse Source
This commit is contained in:
alma 2025-04-15 21:23:28 +02:00
parent ab83073fb5
commit f00f56c18b
1 changed files with 28 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
app/mail/page.tsx
View File

@ -309,37 +309,39 @@ export default function MailPage() {
{/* Sidebar */} {/* 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 <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`}> ${mobileSidebarOpen ? 'fixed inset-y-0 left-0 z-40' : 'hidden'} md:block`}>
{/* Account Selection */} {/* Mail Title and Account Selection */}
<div className="relative"> <div className="relative">
<div className="p-3 border-b border-gray-100"> <div className="p-3 border-b border-gray-100">
{sidebarOpen ? ( <Button
<Button variant="ghost"
variant="ghost" className="w-full justify-between text-gray-900 hover:text-gray-900 font-semibold"
className="w-full justify-between text-gray-600 hover:text-gray-900" onClick={() => setAccountsDropdownOpen(!accountsDropdownOpen)}
onClick={() => setAccountsDropdownOpen(!accountsDropdownOpen)} >
> <div className="flex items-center gap-2">
<div className="flex items-center gap-2"> <div className={`w-2.5 h-2.5 rounded-full bg-blue-600`}></div>
<div className={`w-2.5 h-2.5 rounded-full ${getAccountColor(selectedAccount)}`}></div> <span>Mail</span>
<span>{accounts.find(acc => acc.id === selectedAccount)?.name || 'All accounts'}</span> </div>
</div> <ChevronDown className="h-4 w-4" />
{accountsDropdownOpen ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />} </Button>
</Button>
) : (
<Button
variant="ghost"
size="icon"
className="w-full aspect-square"
onClick={() => setAccountsDropdownOpen(!accountsDropdownOpen)}
>
<div className={`w-2.5 h-2.5 rounded-full ${getAccountColor(selectedAccount)}`}></div>
</Button>
)}
</div> </div>
{/* Accounts Dropdown */} {/* Accounts Dropdown */}
{accountsDropdownOpen && sidebarOpen && ( {accountsDropdownOpen && (
<div className="absolute top-full left-0 w-full bg-white border border-gray-100 shadow-lg rounded-b-lg z-50"> <div className="absolute top-full left-0 w-full bg-white border border-gray-100 shadow-lg rounded-b-lg z-50">
{allAccounts.map(account => ( <Button
variant="ghost"
className="w-full justify-start px-4 py-2 text-sm"
onClick={() => {
setSelectedAccount(0);
setAccountsDropdownOpen(false);
}}
>
<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>
</Button>
{accounts.map(account => (
<div key={account.id} className="relative group"> <div key={account.id} className="relative group">
<Button <Button
variant="ghost" variant="ghost"
@ -353,37 +355,10 @@ export default function MailPage() {
<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 flex-1"> <div className="flex flex-col items-start flex-1">
<span className="font-medium">{account.name}</span> <span className="font-medium">{account.name}</span>
{account.email && <span className="text-xs text-gray-500">{account.email}</span>} <span className="text-xs text-gray-500">{account.email}</span>
</div> </div>
</div> </div>
</Button> </Button>
{/* Account Actions Dropdown */}
{showAccountActions === account.id && (
<div className="absolute right-0 mt-2 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={() => {
const newName = prompt('Enter new account name:', account.name);
if (newName) handleEditAccount(account.id, newName);
setShowAccountActions(null);
}}
>
Edit 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);
}}
>
Remove Account
</button>
</div>
)}
</div> </div>
))} ))}
</div> </div>