From f7b9c14db37dd69ac4b30484b0af6d7691ba176e Mon Sep 17 00:00:00 2001
From: alma <alma@governance-labs.org>
Date: Mon, 28 Apr 2025 18:30:46 +0200
Subject: [PATCH] courrier multi account restore compose

---
 app/courrier/page.tsx | 69 +++++++++++++++++++------------------------
 1 file changed, 31 insertions(+), 38 deletions(-)

diff --git a/app/courrier/page.tsx b/app/courrier/page.tsx
index 8844c118..63facf48 100644
--- a/app/courrier/page.tsx
+++ b/app/courrier/page.tsx
@@ -1026,50 +1026,43 @@ export default function CourrierPage() {
                     
                     {accounts.map((account) => (
                       <div key={account.id} className="mb-1">
-                        <Button
-                          variant="ghost"
-                          className={`w-full justify-start text-xs ${selectedAccount?.id === account.id ? 'bg-gray-100' : ''}`}
+                        <div className={`flex items-center w-full px-1 py-1 rounded-md cursor-pointer ${selectedAccount?.id === account.id ? 'bg-gray-100' : ''}`}
                           onClick={() => handleAccountSelect(account)}
+                          tabIndex={0}
+                          role="button"
+                          onKeyDown={e => { if (e.key === 'Enter' || e.key === ' ') handleAccountSelect(account); }}
                         >
-                          <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>
-                            {/* More options button */}
-                            {account.id !== 'all-accounts' && (
-                              <DropdownMenu>
-                                <DropdownMenuTrigger asChild>
-                                  <Button variant="ghost" size="icon" className="ml-1 h-5 w-5 p-0 text-gray-400 hover:text-gray-600" onClick={e => e.stopPropagation()}>
-                                    <MoreHorizontal className="h-4 w-4" />
-                                  </Button>
-                                </DropdownMenuTrigger>
-                                <DropdownMenuContent align="end">
-                                  <DropdownMenuItem onClick={e => { e.stopPropagation(); setAccountToEdit(account); setShowEditModal(true); }}>Edit</DropdownMenuItem>
-                                  <DropdownMenuItem onClick={e => { e.stopPropagation(); setAccountToDelete(account); setShowDeleteDialog(true); }}>Delete</DropdownMenuItem>
-                                </DropdownMenuContent>
-                              </DropdownMenu>
-                            )}
-                            {account.id !== 'all-accounts' && (
-                              <span
-                                className="ml-1 text-gray-400 hover:text-gray-600 cursor-pointer"
-                                onClick={e => { e.stopPropagation(); setExpandedAccounts(prev => ({ ...prev, [account.id]: !prev[account.id] })); }}
-                              >
-                                {expandedAccounts[account.id] ? <ChevronUp className="h-3 w-3" /> : <ChevronDown className="h-3 w-3" />}
-                              </span>
-                            )}
-                          </div>
-                        </Button>
-                        
+                          <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 flex-1">{account.name}</span>
+                          {/* More options button */}
+                          {account.id !== 'all-accounts' && (
+                            <DropdownMenu>
+                              <DropdownMenuTrigger asChild>
+                                <button type="button" className="ml-1 h-5 w-5 p-0 text-gray-400 hover:text-gray-600 flex items-center justify-center" onClick={e => e.stopPropagation()}>
+                                  <MoreVertical className="h-4 w-4" />
+                                </button>
+                              </DropdownMenuTrigger>
+                              <DropdownMenuContent align="end">
+                                <DropdownMenuItem onClick={e => { e.stopPropagation(); setAccountToEdit(account); setShowEditModal(true); }}>Edit</DropdownMenuItem>
+                                <DropdownMenuItem onClick={e => { e.stopPropagation(); setAccountToDelete(account); setShowDeleteDialog(true); }}>Delete</DropdownMenuItem>
+                              </DropdownMenuContent>
+                            </DropdownMenu>
+                          )}
+                          {account.id !== 'all-accounts' && (
+                            <button
+                              type="button"
+                              className="ml-1 text-gray-400 hover:text-gray-600 cursor-pointer flex items-center justify-center h-5 w-5"
+                              tabIndex={-1}
+                              onClick={e => { e.stopPropagation(); 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>
                         {/* Show folders for this account if expanded */}
                         {(() => {
                           const isExpanded = expandedAccounts[account.id];
                           const hasFolders = account.folders && account.folders.length > 0;
-                          console.log('[DEBUG] Folder rendering check:', {
-                            accountId: account.id,
-                            isExpanded,
-                            hasFolders,
-                            folders: account.folders
-                          });
-                          
                           return isExpanded && account.id !== 'all-accounts' && hasFolders && (
                             <div className="pl-4">
                               {account.folders.map((folder) => renderFolderButton(folder, account.id))}