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:50:54 +02:00
parent b983d5fdc9
commit cfa4502c23
1 changed files with 80 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

158
app/courrier/page.tsx
View File

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