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

courrier multi account

Browse Source
This commit is contained in:
alma 2025-04-27 18:46:23 +02:00
parent 697e4d6d17
commit 92440af7da
1 changed files with 69 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

118
app/courrier/page.tsx
View File

@ -133,6 +133,9 @@ export default function CourrierPage() {
]);
const [selectedAccount, setSelectedAccount] = useState<Account | null>(null);
// Track expanded folders for each account
const [expandedAccounts, setExpandedAccounts] = useState<Record<string, boolean>>({});
// Update account folders when mailboxes change - update this to maintain account IDs
useEffect(() => {
console.log('Mailboxes updated:', mailboxes);
@ -678,57 +681,74 @@ export default function CourrierPage() {
{/* Display all accounts */}
<div className="mt-1">
{accounts.map((account) => (
<Button
key={account.id}
variant="ghost"
className={`w-full justify-start text-xs mb-1 ${selectedAccount?.id === account.id ? 'bg-gray-100' : ''}`}
onClick={() => {
setSelectedAccount(account);
setShowFolders(true);
if (account.id === 'all-accounts') {
handleMailboxChange('INBOX');
} else {
handleMailboxChange('INBOX', account.id);
}
}}
>
<div className="flex items-center w-full">
<div className={`w-3 h-3 rounded-full ${account.color?.startsWith('#') ? 'bg-blue-500' : account.color || 'bg-blue-500'} mr-2`}></div>
<span className="truncate text-gray-700">{account.name}</span>
</div>
</Button>
))}
</div>
</div>
{/* Folders Section - Always Display */}
<div className="p-3">
{/* Display folders if available */}
{selectedAccount?.folders?.map((folder) => (
<Button
key={folder}
variant="ghost"
className={`w-full justify-start text-xs mb-1 ${currentFolder === folder ? 'bg-gray-100' : ''}`}
onClick={() => handleMailboxChange(folder, selectedAccount.id !== 'all-accounts' ? selectedAccount.id : undefined)}
>
<div className="flex items-center w-full">
{getFolderIcon(folder)}
<span className="ml-2 truncate text-gray-700">{formatFolderName(folder)}</span>
{folder === 'INBOX' && unreadCount > 0 && (
<span className="ml-auto bg-blue-500 text-white text-[10px] px-1.5 rounded-full">
{unreadCount}
</span>
<div key={account.id} className="mb-1">
<Button
variant="ghost"
className={`w-full justify-start text-xs ${selectedAccount?.id === account.id ? 'bg-gray-100' : ''}`}
onClick={() => {
setSelectedAccount(account);
setShowFolders(true);
// Auto-expand this account when selected
if (account.id !== 'all-accounts') {
setExpandedAccounts(prev => ({
...prev,
[account.id]: true
}));
}
if (account.id === 'all-accounts') {
handleMailboxChange('INBOX');
} else {
handleMailboxChange('INBOX', account.id);
}
}}
>
<div className="flex items-center w-full">
<div className={`w-3 h-3 rounded-full ${account.color?.startsWith('#') ? 'bg-blue-500' : account.color || 'bg-blue-500'} mr-2`}></div>
<span className="truncate text-gray-700">{account.name}</span>
{account.id !== 'all-accounts' && (
<button
className="ml-auto text-gray-400 hover:text-gray-600"
onClick={(e) => {
e.stopPropagation();
// Toggle this specific account's expanded state
setExpandedAccounts(prev => ({
...prev,
[account.id]: !prev[account.id]
}));
}}
>
{expandedAccounts[account.id] ? <ChevronUp className="h-3 w-3" /> : <ChevronDown className="h-3 w-3" />}
</button>
)}
</div>
</Button>
{/* Show folders for this account if expanded */}
{expandedAccounts[account.id] && account.id !== 'all-accounts' && account.folders && (
<div className="pl-4">
{account.folders.map((folder) => (
<Button
key={folder}
variant="ghost"
className={`w-full justify-start text-xs py-1 h-7 ${currentFolder === folder ? 'bg-gray-100' : ''}`}
onClick={() => handleMailboxChange(folder, account.id !== 'all-accounts' ? account.id : undefined)}
>
<div className="flex items-center w-full">
{getFolderIcon(folder)}
<span className="ml-2 truncate text-gray-700">{formatFolderName(folder)}</span>
{folder === 'INBOX' && unreadCount > 0 && (
<span className="ml-auto bg-blue-500 text-white text-[10px] px-1.5 rounded-full">
{unreadCount}
</span>
)}
</div>
</Button>
))}
</div>
)}
</div>
</Button>
))}
{/* Fallback if no folders */}
{(!selectedAccount?.folders || selectedAccount.folders.length === 0) && (
<div className="text-xs text-gray-500 italic p-2">
No folders available for this account.
</div>
)}
))}
</div>
</div>
</div>
</div>