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

mail page fix

Browse Source
This commit is contained in:
alma 2025-04-21 18:51:39 +02:00
parent cfa4502c23
commit 3c7a41f179
1 changed files with 78 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

156
app/courrier/page.tsx
View File

@ -1519,92 +1519,90 @@ export default function CourrierPage() {
return ( return (
<> <>
{/* Main layout */} {/* Main layout */}
<div className="container mx-auto px-4 py-6 h-[calc(100vh-3rem)]"> <div className="flex h-[calc(100vh-theme(spacing.12))] bg-gray-50 text-gray-900 overflow-hidden mt-12">
<div className="flex h-full bg-gray-50 text-gray-900 overflow-hidden"> {/* Sidebar */}
{/* Sidebar */} <div className={`${sidebarOpen ? 'w-60' : 'w-16'} bg-white/95 backdrop-blur-sm border-r border-gray-100 flex flex-col transition-all duration-300 ease-in-out
<div className={`${sidebarOpen ? 'w-60' : 'w-16'} bg-white/95 backdrop-blur-sm border-r border-gray-100 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`}> {/* Courrier Title */}
{/* Courrier Title */} <div className="p-3 border-b border-gray-100">
<div className="p-3 border-b border-gray-100"> <div className="flex items-center gap-2">
<Mail className="h-6 w-6 text-gray-600" />
<span className="text-xl font-semibold text-gray-900">COURRIER</span>
</div>
</div>
{/* Compose button and refresh button */}
<div className="p-2 border-b border-gray-100 flex items-center gap-2">
<Button
className="flex-1 bg-blue-600 text-white rounded-lg hover:bg-blue-700 flex items-center justify-center transition-all py-1.5 text-sm"
onClick={() => {
setShowCompose(true);
setComposeTo('');
setComposeCc('');
setComposeBcc('');
setComposeSubject('');
setComposeBody('');
setShowCc(false);
setShowBcc(false);
}}
>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Mail className="h-6 w-6 text-gray-600" /> <PlusIcon className="h-3.5 w-3.5" />
<span className="text-xl font-semibold text-gray-900">COURRIER</span> <span>Compose</span>
</div> </div>
</div> </Button>
<Button
variant="ghost"
size="icon"
onClick={() => handleMailboxChange('INBOX')}
className="text-gray-600 hover:text-gray-900 hover:bg-gray-100"
>
<RefreshCw className="h-4 w-4" />
</Button>
</div>
{/* Compose button and refresh button */} {/* Accounts Section */}
<div className="p-2 border-b border-gray-100 flex items-center gap-2"> <div className="p-3 border-b border-gray-100">
<Button <Button
className="flex-1 bg-blue-600 text-white rounded-lg hover:bg-blue-700 flex items-center justify-center transition-all py-1.5 text-sm" variant="ghost"
onClick={() => { className="w-full justify-between mb-2 text-sm font-medium text-gray-500"
setShowCompose(true); onClick={() => setAccountsDropdownOpen(!accountsDropdownOpen)}
setComposeTo(''); >
setComposeCc(''); <span>Accounts</span>
setComposeBcc(''); {accountsDropdownOpen ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
setComposeSubject(''); </Button>
setComposeBody('');
setShowCc(false);
setShowBcc(false);
}}
>
<div className="flex items-center gap-2">
<PlusIcon className="h-3.5 w-3.5" />
<span>Compose</span>
</div>
</Button>
<Button
variant="ghost"
size="icon"
onClick={() => handleMailboxChange('INBOX')}
className="text-gray-600 hover:text-gray-900 hover:bg-gray-100"
>
<RefreshCw className="h-4 w-4" />
</Button>
</div>
{/* Accounts Section */} {accountsDropdownOpen && (
<div className="p-3 border-b border-gray-100"> <div className="space-y-1 pl-2">
<Button {accounts.map(account => (
variant="ghost" <div key={account.id} className="relative group">
className="w-full justify-between mb-2 text-sm font-medium text-gray-500" <Button
onClick={() => setAccountsDropdownOpen(!accountsDropdownOpen)} variant="ghost"
> className="w-full justify-between px-2 py-1.5 text-sm group"
<span>Accounts</span> onClick={() => setSelectedAccount(account)}
{accountsDropdownOpen ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />} >
</Button> <div className="flex flex-col items-start">
<div className="flex items-center gap-2">
{accountsDropdownOpen && ( <div className={`w-2.5 h-2.5 rounded-full ${account.color}`}></div>
<div className="space-y-1 pl-2"> <span className="font-medium">{account.name}</span>
{accounts.map(account => (
<div key={account.id} className="relative group">
<Button
variant="ghost"
className="w-full justify-between px-2 py-1.5 text-sm group"
onClick={() => setSelectedAccount(account)}
>
<div className="flex flex-col items-start">
<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>
<span className="text-xs text-gray-500 ml-4">{account.email}</span>
</div> </div>
</Button> <span className="text-xs text-gray-500 ml-4">{account.email}</span>
</div> </div>
))} </Button>
</div> </div>
)} ))}
</div> </div>
)}
{/* Navigation */}
{renderSidebarNav()}
</div> </div>
{/* Main content area */} {/* Navigation */}
<div className="flex-1 flex overflow-hidden"> {renderSidebarNav()}
{/* Email list panel */} </div>
{renderEmailListWrapper()}
</div> {/* Main content area */}
<div className="flex-1 flex overflow-hidden">
{/* Email list panel */}
{renderEmailListWrapper()}
</div> </div>
</div> </div>