diff --git a/app/courrier/page.tsx b/app/courrier/page.tsx index 7926deb6..f3bcb455 100644 --- a/app/courrier/page.tsx +++ b/app/courrier/page.tsx @@ -36,7 +36,6 @@ import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuIte // Import components import EmailSidebar from '@/components/email/EmailSidebar'; import EmailList from '@/components/email/EmailList'; -import EmailSidebarContent from '@/components/email/EmailSidebarContent'; import EmailDetailView from '@/components/email/EmailDetailView'; import ComposeEmail from '@/components/email/ComposeEmail'; import { DeleteConfirmDialog } from '@/components/email/EmailDialogs'; @@ -743,323 +742,29 @@ export default function CourrierPage() {
{/* Panel 1: Sidebar - Always visible */} -
- {/* Courrier Title */} -
-
- - COURRIER -
-
- - {/* Compose button and refresh button */} -
- - -
- - {/* Scrollable area for accounts and folders */} -
- {/* Accounts Section */} -
-
- Accounts - -
- - {/* Display all accounts */} -
- {/* Form for adding a new account */} - {showAddAccountForm && ( -
-

Add IMAP Account

-
{ - e.preventDefault(); - setLoading(true); - - const formData = new FormData(e.currentTarget); - - // Pull values from form with proper type handling - const formValues = { - email: formData.get('email')?.toString() || '', - password: formData.get('password')?.toString() || '', - host: formData.get('host')?.toString() || '', - port: parseInt(formData.get('port')?.toString() || '993'), - secure: formData.get('secure') === 'on', - display_name: formData.get('display_name')?.toString() || '', - smtp_host: formData.get('smtp_host')?.toString() || '', - smtp_port: formData.get('smtp_port')?.toString() ? - parseInt(formData.get('smtp_port')?.toString() || '587') : undefined, - smtp_secure: formData.get('smtp_secure') === 'on' - }; - - // If display_name is empty, use email - if (!formValues.display_name) { - formValues.display_name = formValues.email; - } - - try { - // First test the connection - const testResponse = await fetch('/api/courrier/test-connection', { - method: 'POST', - headers: { - 'Content-Type': 'application/json' - }, - body: JSON.stringify({ - email: formValues.email, - password: formValues.password, - host: formValues.host, - port: formValues.port, - secure: formValues.secure - }) - }); - - const testResult = await testResponse.json(); - - if (!testResponse.ok) { - throw new Error(testResult.error || 'Connection test failed'); - } - - console.log('Connection test successful:', testResult); - - // Only declare realAccounts once before using for color assignment - const realAccounts = accounts.filter(a => a.id !== 'loading-account'); - const saveResponse = await fetch('/api/courrier/account', { - method: 'POST', - headers: { - 'Content-Type': 'application/json' - }, - body: JSON.stringify(formValues) - }); - const saveResult = await saveResponse.json(); - if (!saveResponse.ok) { - throw new Error(saveResult.error || 'Failed to add account'); - } - const realAccount = saveResult.account; - realAccount.color = colorPalette[realAccounts.length % colorPalette.length]; - realAccount.folders = testResult.details.sampleFolders || ['INBOX', 'Sent', 'Drafts', 'Trash']; - setAccounts(prev => [...prev, realAccount]); - setShowAddAccountForm(false); - toast({ - title: "Account added successfully", - description: `Your email account ${formValues.email} has been added.`, - duration: 5000 - }); - } catch (error) { - console.error('Error adding account:', error); - toast({ - title: "Failed to add account", - description: error instanceof Error ? error.message : 'Unknown error', - variant: "destructive", - duration: 5000 - }); - } finally { - setLoading(false); - } - }}> -
- - - IMAP - SMTP - - - -
- -
-
- -
-
- -
-
- -
-
-
- -
-
-
- - -
-
-
- - - -
- -
-
-
- -
-
-
- - -
-
-
-
- Note: SMTP settings needed for sending emails -
- - - -
- - -
-
-
-
- )} - - {accounts.map((account) => ( -
-
handleAccountSelect(account)} - tabIndex={0} - role="button" - onKeyDown={e => { if (e.key === 'Enter' || e.key === ' ') handleAccountSelect(account); }} - > -
- {account.name} - {/* More options button (⋮) */} - {account.id !== 'loading-account' && ( - - - - - - { e.stopPropagation(); setAccountToEdit(account); setShowEditModal(true); }}> - Edit - - { e.stopPropagation(); setAccountToDelete(account); setShowDeleteDialog(true); }}> - Delete - - - - )} - {/* Expand/collapse arrow */} - {account.id !== 'loading-account' && ( - - )} -
- {/* Show folders for any expanded account */} - {expandedAccounts[account.id] && account.folders && account.folders.length > 0 && ( -
- {account.folders.map((folder) => renderFolderButton(folder, account.id))} -
- )} -
- ))} -
-
-
+
+ { + const account = accounts.find(a => a.id === accountId); + if (account) { + setSelectedAccount(account); + changeFolder(folder); + } + }} + onRefresh={() => { + if (selectedAccount) { + loadEmails(selectedAccount.id, currentFolder); + } + }} + onCompose={() => { + setComposeType('new'); + setShowComposeModal(true); + }} + isLoading={isLoading} + />
{/* Panel 2: Email List - Always visible */} diff --git a/components/email/EmailSidebar.tsx b/components/email/EmailSidebar.tsx index 3c0eee48..df70d7dc 100644 --- a/components/email/EmailSidebar.tsx +++ b/components/email/EmailSidebar.tsx @@ -4,24 +4,32 @@ import React, { useState } from 'react'; import { Inbox, Send, Trash, Archive, Star, File, RefreshCw, Plus, MailOpen, Settings, - ChevronDown, ChevronRight, Mail + ChevronDown, ChevronRight, ChevronUp, Mail, AlertCircle, + MoreVertical, Edit, Trash2, AlertOctagon, Folder } from 'lucide-react'; import { Button } from '@/components/ui/button'; import { cn } from '@/lib/utils'; import { ScrollArea } from '@/components/ui/scroll-area'; import { Badge } from '@/components/ui/badge'; +import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from '@/components/ui/dropdown-menu'; +import { toast } from '@/components/ui/use-toast'; interface EmailSidebarProps { currentFolder: string; currentAccount: string; accounts: Array<{ id: string; + name: string; email: string; + color: string; folders: string[]; }>; onFolderChange: (folder: string, accountId: string) => void; onRefresh: () => void; onCompose: () => void; + onAddAccount: () => void; + onEditAccount: (accountId: string) => void; + onDeleteAccount: (accountId: string) => void; isLoading: boolean; } @@ -32,6 +40,9 @@ export default function EmailSidebar({ onFolderChange, onRefresh, onCompose, + onAddAccount, + onEditAccount, + onDeleteAccount, isLoading }: EmailSidebarProps) { const [showAccounts, setShowAccounts] = useState(true); @@ -41,42 +52,26 @@ export default function EmailSidebar({ const getFolderIcon = (folder: string) => { const folderLower = folder.toLowerCase(); - switch (folderLower) { - case 'inbox': - return ; - case 'sent': - case 'sent items': - return ; - case 'drafts': - return ; - case 'trash': - case 'deleted': - case 'bin': - return ; - case 'archive': - case 'archived': - return ; - case 'starred': - case 'important': - return ; - default: - return ; + if (folderLower.includes('inbox')) { + return ; + } else if (folderLower.includes('sent')) { + return ; + } else if (folderLower.includes('trash')) { + return ; + } else if (folderLower.includes('archive')) { + return ; + } else if (folderLower.includes('draft')) { + return ; + } else if (folderLower.includes('spam') || folderLower.includes('junk')) { + return ; + } else { + return ; } }; - // Group folders into standard and custom - const getStandardFolders = (folders: string[]) => { - const standardFolders = ['INBOX', 'Sent', 'Drafts', 'Trash', 'Archive', 'Junk']; - return standardFolders.filter(f => - folders.includes(f) || folders.some(folder => folder.toLowerCase() === f.toLowerCase()) - ); - }; - - const getCustomFolders = (folders: string[]) => { - const standardFolders = ['INBOX', 'Sent', 'Drafts', 'Trash', 'Archive', 'Junk']; - return folders.filter(f => - !standardFolders.some(sf => sf.toLowerCase() === f.toLowerCase()) - ); + // Helper to format folder names + const formatFolderName = (folder: string) => { + return folder.charAt(0).toUpperCase() + folder.slice(1).toLowerCase(); }; const handleAccountClick = (accountId: string) => { @@ -102,16 +97,26 @@ export default function EmailSidebar({ {/* Accounts header with toggle */}
Accounts - +
+ + +
{/* Accounts list */} @@ -120,66 +125,73 @@ export default function EmailSidebar({ {accounts.map((account) => (
{/* Account button */} - + + + onEditAccount(account.id)}> + Edit + + onDeleteAccount(account.id)}> + Delete + + + )} - + + {/* Expand/collapse arrow */} + {account.id !== 'loading-account' && ( + + )} +
{/* Account folders - shown when account is expanded */} - {expandedAccount === account.id && ( -
- {getStandardFolders(account.folders).map((folder) => ( + {expandedAccount === account.id && account.folders && account.folders.length > 0 && ( +
+ {account.folders.map((folder) => ( ))} - - {/* Custom folders */} - {getCustomFolders(account.folders).map(folder => ( - - ))}
)}
diff --git a/components/email/EmailSidebarContent.tsx b/components/email/EmailSidebarContent.tsx deleted file mode 100644 index 2b2a6862..00000000 --- a/components/email/EmailSidebarContent.tsx +++ /dev/null @@ -1,68 +0,0 @@ -import React from 'react'; -import { - Inbox, Send, Star, Trash, Folder, - AlertOctagon, Archive, Edit -} from 'lucide-react'; -import { Button } from '@/components/ui/button'; - -interface EmailSidebarContentProps { - mailboxes: string[]; - currentFolder: string; - onFolderChange: (folder: string) => void; -} - -export default function EmailSidebarContent({ - mailboxes, - currentFolder, - onFolderChange -}: EmailSidebarContentProps) { - - // Helper to format folder names - const formatFolderName = (folder: string) => { - return folder.charAt(0).toUpperCase() + folder.slice(1).toLowerCase(); - }; - - // Helper to get folder icons - const getFolderIcon = (folder: string) => { - const folderLower = folder.toLowerCase(); - - if (folderLower.includes('inbox')) { - return ; - } else if (folderLower.includes('sent')) { - return ; - } else if (folderLower.includes('trash')) { - return ; - } else if (folderLower.includes('archive')) { - return ; - } else if (folderLower.includes('draft')) { - return ; - } else if (folderLower.includes('spam') || folderLower.includes('junk')) { - return ; - } else { - return ; - } - }; - - return ( - - ); -} \ No newline at end of file