mail page ui correction maj compose 19
This commit is contained in:
parent
945083b9ee
commit
49b084808b
@ -913,24 +913,14 @@ export default function MailPage() {
|
||||
<>
|
||||
{/* Main layout */}
|
||||
<div className="flex h-[calc(100vh-theme(spacing.12))] bg-gray-50 text-gray-900 overflow-hidden mt-12">
|
||||
{/* Sidebar - make it narrower */}
|
||||
{/* 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
|
||||
${mobileSidebarOpen ? 'fixed inset-y-0 left-0 z-40' : 'hidden'} md:block`}>
|
||||
{/* Courrier Title */}
|
||||
<div className="p-3 border-b border-gray-100">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<Mail className="h-6 w-6 text-blue-600" />
|
||||
<span className="text-xl font-semibold text-gray-900">COURRIER</span>
|
||||
</div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="md:hidden"
|
||||
onClick={() => setSidebarOpen(!sidebarOpen)}
|
||||
>
|
||||
{sidebarOpen ? <ChevronLeft className="h-5 w-5" /> : <ChevronRight className="h-5 w-5" />}
|
||||
</Button>
|
||||
<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>
|
||||
|
||||
@ -970,68 +960,29 @@ export default function MailPage() {
|
||||
{accountsDropdownOpen && (
|
||||
<div className="space-y-1 pl-2">
|
||||
{accounts.map(account => (
|
||||
<Button
|
||||
key={account.id}
|
||||
variant="ghost"
|
||||
className="w-full justify-start px-2 py-1.5 text-sm"
|
||||
onClick={() => setSelectedAccount(account)}
|
||||
>
|
||||
<div className="flex items-center gap-2 w-full">
|
||||
<div className={`w-2.5 h-2.5 rounded-full ${account.color}`}></div>
|
||||
<span className="font-medium">{account.name}</span>
|
||||
{account.id !== 0 && (
|
||||
<span className="text-xs text-gray-500 truncate">{account.email}</span>
|
||||
)}
|
||||
</div>
|
||||
</Button>
|
||||
<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>
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Folder Management 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={() => setFoldersDropdownOpen(!foldersDropdownOpen)}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<Folder className="h-4 w-4" />
|
||||
<span>Folders</span>
|
||||
</div>
|
||||
{foldersDropdownOpen ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
|
||||
</Button>
|
||||
|
||||
{foldersDropdownOpen && (
|
||||
<div className="space-y-1 pl-2">
|
||||
{folders.map((folder) => (
|
||||
<Button
|
||||
key={folder}
|
||||
variant="ghost"
|
||||
className="w-full justify-start px-2 py-1.5 text-sm"
|
||||
onClick={() => setCurrentView(folder)}
|
||||
>
|
||||
<FolderOpen className="h-4 w-4 mr-2" />
|
||||
<span>{folder}</span>
|
||||
</Button>
|
||||
))}
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="w-full justify-start px-2 py-1.5 text-sm text-blue-600"
|
||||
onClick={() => {/* Add new folder logic */}}
|
||||
>
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
<span>New Folder</span>
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Navigation */}
|
||||
<nav className="p-3">
|
||||
<ul className="space-y-0.5 px-2">
|
||||
{/* Standard navigation items */}
|
||||
<li>
|
||||
<Button
|
||||
variant={currentView === 'inbox' ? 'secondary' : 'ghost'}
|
||||
@ -1077,36 +1028,6 @@ export default function MailPage() {
|
||||
<span>Trash</span>
|
||||
</Button>
|
||||
</li>
|
||||
|
||||
{/* Folders section - moved below Trash */}
|
||||
<li className="mt-4">
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="w-full justify-between text-sm font-medium text-gray-500"
|
||||
onClick={() => setFoldersDropdownOpen(!foldersDropdownOpen)}
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<Folder className="h-4 w-4 mr-2" />
|
||||
<span>Folders</span>
|
||||
</div>
|
||||
{foldersDropdownOpen ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
|
||||
</Button>
|
||||
|
||||
{foldersDropdownOpen && (
|
||||
<div className="mt-1 space-y-1 pl-6">
|
||||
{folders.map((folder) => (
|
||||
<Button
|
||||
key={folder}
|
||||
variant="ghost"
|
||||
className={`w-full justify-start py-1.5 text-sm ${currentView === folder ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:text-gray-900'}`}
|
||||
onClick={() => {setCurrentView(folder); setSelectedEmail(null);}}
|
||||
>
|
||||
<span>{folder}</span>
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user