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