courrier multi account restore compose
This commit is contained in:
parent
2fb4fcd069
commit
c2bb904fde
@ -102,6 +102,18 @@ interface EmailMessage {
|
||||
};
|
||||
}
|
||||
|
||||
interface AccountData {
|
||||
email: string;
|
||||
password: string;
|
||||
host: string;
|
||||
port: number;
|
||||
secure: boolean;
|
||||
display_name: string;
|
||||
smtp_host?: string;
|
||||
smtp_port?: number;
|
||||
smtp_secure?: boolean;
|
||||
}
|
||||
|
||||
// Define a color palette for account circles
|
||||
const colorPalette = [
|
||||
'bg-blue-500',
|
||||
@ -654,11 +666,16 @@ export default function CourrierPage() {
|
||||
|
||||
// Handle sending email
|
||||
const handleSendEmail = async (emailData: EmailData) => {
|
||||
const result = await sendEmail(emailData);
|
||||
if (!result.success) {
|
||||
throw new Error(result.error);
|
||||
try {
|
||||
const result = await sendEmail(emailData);
|
||||
if (!result.success) {
|
||||
throw new Error(result.error);
|
||||
}
|
||||
return result;
|
||||
} catch (error) {
|
||||
// Handle any errors
|
||||
throw error;
|
||||
}
|
||||
return result;
|
||||
};
|
||||
|
||||
// Handle delete confirmation
|
||||
@ -742,325 +759,123 @@ export default function CourrierPage() {
|
||||
<main className="w-full h-screen bg-black">
|
||||
<div className="w-full h-full px-4 pt-12 pb-4">
|
||||
<div className="flex h-full bg-carnet-bg">
|
||||
{/* Panel 1: Sidebar - Always visible */}
|
||||
<div className="w-60 bg-white/95 backdrop-blur-sm border-r border-gray-100 flex flex-col md:flex" style={{display: "flex !important"}}>
|
||||
{/* Courrier Title */}
|
||||
<div className="p-3 border-b border-gray-100">
|
||||
<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>
|
||||
|
||||
{/* Compose button and refresh button */}
|
||||
<div className="p-2 border-b border-gray-100 flex items-center gap-2">
|
||||
<Button
|
||||
className="flex-1 bg-blue-600 text-white rounded-lg hover:bg-blue-700 flex items-center justify-center transition-all py-1.5 text-sm"
|
||||
onClick={handleComposeNew}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<PlusIcon className="h-3.5 w-3.5" />
|
||||
<span>Compose</span>
|
||||
</div>
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-9 w-9 text-gray-400 hover:text-gray-600"
|
||||
onClick={() => {
|
||||
setLoading(true);
|
||||
// Reset to page 1 when manually refreshing
|
||||
setPage(1);
|
||||
// Load emails
|
||||
loadEmails().finally(() => setLoading(false));
|
||||
}}
|
||||
>
|
||||
<RefreshCw className={`h-4 w-4 ${loading ? 'animate-spin' : ''}`} />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Scrollable area for accounts and folders */}
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
{/* Accounts Section */}
|
||||
<div className="p-3 border-b border-gray-100">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<span className="text-sm font-medium text-gray-500">Accounts</span>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-7 w-7 p-0 text-gray-400 hover:text-gray-600"
|
||||
onClick={() => setShowAddAccountForm(!showAddAccountForm)}
|
||||
>
|
||||
<Plus className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
{/* Use EmailSidebar component instead of inline sidebar */}
|
||||
<EmailSidebar
|
||||
accounts={accounts}
|
||||
selectedAccount={selectedAccount}
|
||||
selectedFolders={selectedFolders}
|
||||
currentFolder={currentFolder}
|
||||
expandedAccounts={expandedAccounts}
|
||||
loading={loading}
|
||||
unreadCount={unreadCount}
|
||||
showAddAccountForm={showAddAccountForm}
|
||||
onFolderChange={handleMailboxChange}
|
||||
onRefresh={() => {
|
||||
setLoading(true);
|
||||
setPage(1);
|
||||
loadEmails().finally(() => setLoading(false));
|
||||
}}
|
||||
onComposeNew={handleComposeNew}
|
||||
onAccountSelect={handleAccountSelect}
|
||||
onToggleExpand={(accountId, expanded) => {
|
||||
setExpandedAccounts(prev => ({ ...prev, [accountId]: expanded }));
|
||||
}}
|
||||
onShowAddAccountForm={setShowAddAccountForm}
|
||||
onAddAccount={async (formData) => {
|
||||
setLoading(true);
|
||||
|
||||
// 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
|
||||
})
|
||||
});
|
||||
|
||||
{/* Display all accounts */}
|
||||
<div className="mt-1">
|
||||
{/* Form for adding a new account */}
|
||||
{showAddAccountForm && (
|
||||
<div className="mb-2 p-2 border border-gray-200 rounded-md bg-white">
|
||||
<h4 className="text-xs font-medium mb-0.5 text-gray-700">Add IMAP Account</h4>
|
||||
<form onSubmit={async (e) => {
|
||||
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);
|
||||
}
|
||||
}}>
|
||||
<div>
|
||||
<Tabs defaultValue="imap" className="w-full">
|
||||
<TabsList className="grid w-full grid-cols-2 h-6 mb-0.5 bg-gray-100">
|
||||
<TabsTrigger value="imap" className="text-xs h-5 data-[state=active]:bg-blue-500 data-[state=active]:text-white">IMAP</TabsTrigger>
|
||||
<TabsTrigger value="smtp" className="text-xs h-5 data-[state=active]:bg-blue-500 data-[state=active]:text-white">SMTP</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="imap" className="mt-0.5 space-y-0.5">
|
||||
<div>
|
||||
<Input
|
||||
id="email"
|
||||
name="email"
|
||||
placeholder="email@example.com"
|
||||
className="h-7 text-xs bg-white border-gray-300 mb-0.5 text-gray-900"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Input
|
||||
id="password"
|
||||
name="password"
|
||||
type="password"
|
||||
placeholder="•••••••••"
|
||||
className="h-7 text-xs bg-white border-gray-300 mb-0.5 text-gray-900"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Input
|
||||
id="display_name"
|
||||
name="display_name"
|
||||
placeholder="John Doe"
|
||||
className="h-7 text-xs bg-white border-gray-300 mb-0.5 text-gray-900"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Input
|
||||
id="host"
|
||||
name="host"
|
||||
placeholder="imap.example.com"
|
||||
className="h-7 text-xs bg-white border-gray-300 mb-0.5 text-gray-900"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="flex gap-1">
|
||||
<div className="flex-1">
|
||||
<Input
|
||||
id="port"
|
||||
name="port"
|
||||
placeholder="993"
|
||||
className="h-7 text-xs bg-white border-gray-300 text-gray-900"
|
||||
defaultValue="993"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center pl-1">
|
||||
<div className="flex items-center space-x-1">
|
||||
<Checkbox id="secure" name="secure" defaultChecked />
|
||||
<Label htmlFor="secure" className="text-xs">SSL</Label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="smtp" className="mt-0.5 space-y-0.5">
|
||||
<div>
|
||||
<Input
|
||||
id="smtp_host"
|
||||
name="smtp_host"
|
||||
placeholder="smtp.example.com"
|
||||
className="h-7 text-xs bg-white border-gray-300 mb-0.5 text-gray-900"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex gap-1">
|
||||
<div className="flex-1">
|
||||
<Input
|
||||
id="smtp_port"
|
||||
name="smtp_port"
|
||||
placeholder="587"
|
||||
className="h-7 text-xs bg-white border-gray-300 text-gray-900"
|
||||
defaultValue="587"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center pl-1">
|
||||
<div className="flex items-center space-x-1">
|
||||
<Checkbox id="smtp_secure" name="smtp_secure" defaultChecked />
|
||||
<Label htmlFor="smtp_secure" className="text-xs">SSL</Label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-xs text-gray-500 italic">
|
||||
Note: SMTP settings needed for sending emails
|
||||
</div>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
|
||||
<div className="flex gap-1 mt-1">
|
||||
<Button
|
||||
type="submit"
|
||||
className="flex-1 h-6 text-xs bg-blue-500 hover:bg-blue-600 text-white rounded-md px-2 py-0"
|
||||
disabled={loading}
|
||||
>
|
||||
{loading ? <Loader2 className="h-3 w-3 animate-spin mr-1" /> : null}
|
||||
Test & Add
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
className="h-6 text-xs bg-gray-200 text-gray-800 hover:bg-gray-300 rounded-md px-2 py-0"
|
||||
onClick={() => setShowAddAccountForm(false)}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{accounts.map((account) => (
|
||||
<div key={account.id} className="mb-1">
|
||||
<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={`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 !== 'loading-account' && (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<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()}
|
||||
aria-label="Account options"
|
||||
>
|
||||
<span style={{ fontSize: '18px', lineHeight: 1 }}>⋮</span>
|
||||
</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>
|
||||
)}
|
||||
{/* Expand/collapse arrow */}
|
||||
{account.id !== 'loading-account' && (
|
||||
<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 any expanded account */}
|
||||
{expandedAccounts[account.id] && account.folders && account.folders.length > 0 && (
|
||||
<div className="pl-4">
|
||||
{account.folders.map((folder) => renderFolderButton(folder, account.id))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
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);
|
||||
}
|
||||
}}
|
||||
onEditAccount={(account) => {
|
||||
setAccountToEdit(account);
|
||||
setShowEditModal(true);
|
||||
}}
|
||||
onDeleteAccount={(account) => {
|
||||
setAccountToDelete(account);
|
||||
setShowDeleteDialog(true);
|
||||
}}
|
||||
onSelectEmail={(emailId, accountId, folder) => {
|
||||
if (typeof emailId === 'string') {
|
||||
handleEmailSelect(emailId, accountId || '', folder || currentFolder);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Panel 2: Email List - Always visible */}
|
||||
<div className="w-80 flex flex-col border-r border-gray-100 overflow-hidden">
|
||||
@ -1160,7 +975,7 @@ export default function CourrierPage() {
|
||||
emails={emails}
|
||||
selectedEmailIds={selectedEmailIds}
|
||||
selectedEmail={selectedEmail}
|
||||
onSelectEmail={handleEmailSelect}
|
||||
onSelectEmail={(emailId) => handleEmailSelect(emailId, selectedAccount?.id || '', currentFolder)}
|
||||
onToggleSelect={toggleEmailSelection}
|
||||
onToggleSelectAll={toggleSelectAll}
|
||||
onToggleStarred={toggleStarred}
|
||||
@ -1184,9 +999,9 @@ export default function CourrierPage() {
|
||||
<div className="flex-1 overflow-hidden bg-white">
|
||||
{selectedEmail ? (
|
||||
<EmailDetailView
|
||||
email={selectedEmail}
|
||||
email={selectedEmail as any}
|
||||
onBack={() => {
|
||||
handleEmailSelect('');
|
||||
handleEmailSelect('', '', '');
|
||||
// Ensure sidebar stays visible
|
||||
setSidebarOpen(true);
|
||||
}}
|
||||
@ -1234,7 +1049,10 @@ export default function CourrierPage() {
|
||||
<ComposeEmail
|
||||
type={composeType}
|
||||
initialEmail={composeType !== 'new' ? selectedEmail : undefined}
|
||||
onSend={handleSendEmail}
|
||||
onSend={(emailData) => {
|
||||
const result = sendEmail(emailData);
|
||||
return result;
|
||||
}}
|
||||
onClose={() => setShowComposeModal(false)}
|
||||
/>
|
||||
</DialogContent>
|
||||
|
||||
@ -3,206 +3,361 @@
|
||||
import React, { useState } from 'react';
|
||||
import {
|
||||
Inbox, Send, Trash, Archive, Star,
|
||||
File, RefreshCw, Plus, MailOpen, Settings,
|
||||
ChevronDown, ChevronRight, Mail
|
||||
File, RefreshCw, Plus as PlusIcon, Edit,
|
||||
ChevronDown, ChevronUp, Mail, Menu,
|
||||
Settings, Loader2, AlertOctagon, MessageSquare
|
||||
} 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 { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Checkbox } from '@/components/ui/checkbox';
|
||||
import { Label } from '@/components/ui/label';
|
||||
|
||||
interface Account {
|
||||
id: string;
|
||||
name: string;
|
||||
email: string;
|
||||
color: string;
|
||||
folders: string[];
|
||||
}
|
||||
|
||||
interface EmailSidebarProps {
|
||||
accounts: Account[];
|
||||
selectedAccount: Account | null;
|
||||
selectedFolders: Record<string, string>;
|
||||
currentFolder: string;
|
||||
currentAccount: string;
|
||||
accounts: Array<{
|
||||
id: string;
|
||||
email: string;
|
||||
folders: string[];
|
||||
}>;
|
||||
expandedAccounts: Record<string, boolean>;
|
||||
loading: boolean;
|
||||
unreadCount: number;
|
||||
showAddAccountForm: boolean;
|
||||
// Actions
|
||||
onFolderChange: (folder: string, accountId: string) => void;
|
||||
onRefresh: () => void;
|
||||
onCompose: () => void;
|
||||
isLoading: boolean;
|
||||
onComposeNew: () => void;
|
||||
onAccountSelect: (account: Account) => void;
|
||||
onToggleExpand: (accountId: string, expanded: boolean) => void;
|
||||
onShowAddAccountForm: (show: boolean) => void;
|
||||
onAddAccount: (formData: FormData) => Promise<void>;
|
||||
onEditAccount: (account: Account) => void;
|
||||
onDeleteAccount: (account: Account) => void;
|
||||
onSelectEmail?: (emailId: string, accountId: string, folder: string) => void;
|
||||
}
|
||||
|
||||
export default function EmailSidebar({
|
||||
currentFolder,
|
||||
currentAccount,
|
||||
accounts,
|
||||
selectedAccount,
|
||||
selectedFolders,
|
||||
currentFolder,
|
||||
expandedAccounts,
|
||||
loading,
|
||||
unreadCount,
|
||||
showAddAccountForm,
|
||||
onFolderChange,
|
||||
onRefresh,
|
||||
onCompose,
|
||||
isLoading
|
||||
onComposeNew,
|
||||
onAccountSelect,
|
||||
onToggleExpand,
|
||||
onShowAddAccountForm,
|
||||
onAddAccount,
|
||||
onEditAccount,
|
||||
onDeleteAccount
|
||||
}: EmailSidebarProps) {
|
||||
const [showAccounts, setShowAccounts] = useState(true);
|
||||
const [expandedAccount, setExpandedAccount] = useState<string | null>(currentAccount);
|
||||
|
||||
// Get the appropriate icon for a folder
|
||||
const getFolderIcon = (folder: string) => {
|
||||
const folderLower = folder.toLowerCase();
|
||||
|
||||
switch (folderLower) {
|
||||
case 'inbox':
|
||||
return <Inbox className="h-4 w-4" />;
|
||||
case 'sent':
|
||||
case 'sent items':
|
||||
return <Send className="h-4 w-4" />;
|
||||
case 'drafts':
|
||||
return <File className="h-4 w-4" />;
|
||||
case 'trash':
|
||||
case 'deleted':
|
||||
case 'bin':
|
||||
return <Trash className="h-4 w-4" />;
|
||||
case 'archive':
|
||||
case 'archived':
|
||||
return <Archive className="h-4 w-4" />;
|
||||
case 'starred':
|
||||
case 'important':
|
||||
return <Star className="h-4 w-4" />;
|
||||
default:
|
||||
return <MailOpen className="h-4 w-4" />;
|
||||
if (folderLower.includes('inbox')) {
|
||||
return <Inbox className="h-4 w-4 text-gray-500" />;
|
||||
} else if (folderLower.includes('sent')) {
|
||||
return <Send className="h-4 w-4 text-gray-500" />;
|
||||
} else if (folderLower.includes('trash')) {
|
||||
return <Trash className="h-4 w-4 text-gray-500" />;
|
||||
} else if (folderLower.includes('archive')) {
|
||||
return <Archive className="h-4 w-4 text-gray-500" />;
|
||||
} else if (folderLower.includes('draft')) {
|
||||
return <Edit className="h-4 w-4 text-gray-500" />;
|
||||
} else if (folderLower.includes('spam') || folderLower.includes('junk')) {
|
||||
return <AlertOctagon className="h-4 w-4 text-gray-500" />;
|
||||
} else {
|
||||
return <MessageSquare className="h-4 w-4 text-gray-500" />;
|
||||
}
|
||||
};
|
||||
|
||||
// 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())
|
||||
);
|
||||
// Format folder names
|
||||
const formatFolderName = (folder: string) => {
|
||||
return folder.charAt(0).toUpperCase() + folder.slice(1).toLowerCase();
|
||||
};
|
||||
|
||||
const handleAccountClick = (accountId: string) => {
|
||||
setExpandedAccount(accountId);
|
||||
// Render folder button with exact same styling as in courrier page
|
||||
const renderFolderButton = (folder: string, accountId: string) => {
|
||||
// Get the account prefix from the folder name
|
||||
const folderAccountId = folder.includes(':') ? folder.split(':')[0] : accountId;
|
||||
|
||||
// Only show folders that belong to this account
|
||||
if (folderAccountId !== accountId) return null;
|
||||
|
||||
const isSelected = selectedFolders[accountId] === folder;
|
||||
|
||||
// Get the base folder name for display
|
||||
const baseFolder = folder.includes(':') ? folder.split(':')[1] : folder;
|
||||
|
||||
return (
|
||||
<Button
|
||||
key={folder}
|
||||
variant="ghost"
|
||||
className={`w-full justify-start text-xs py-1 h-7 ${isSelected ? 'bg-gray-100' : ''}`}
|
||||
onClick={() => onFolderChange(folder, accountId)}
|
||||
>
|
||||
<div className="flex items-center w-full">
|
||||
{getFolderIcon(baseFolder)}
|
||||
<span className="ml-2 truncate text-gray-700">{formatFolderName(baseFolder)}</span>
|
||||
{baseFolder === 'INBOX' && unreadCount > 0 && (
|
||||
<span className="ml-auto bg-blue-500 text-white text-[10px] px-1.5 rounded-full">
|
||||
{unreadCount}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</Button>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<aside className="w-64 border-r h-full flex flex-col bg-white/95 backdrop-blur-sm">
|
||||
{/* Compose button area */}
|
||||
<div className="p-4">
|
||||
<div className="w-60 bg-white/95 backdrop-blur-sm border-r border-gray-100 flex flex-col md:flex" style={{display: "flex !important"}}>
|
||||
{/* Courrier Title */}
|
||||
<div className="p-3 border-b border-gray-100">
|
||||
<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>
|
||||
|
||||
{/* Compose button and refresh button */}
|
||||
<div className="p-2 border-b border-gray-100 flex items-center gap-2">
|
||||
<Button
|
||||
className="w-full bg-blue-600 text-white rounded-lg hover:bg-blue-700 flex items-center justify-center py-2"
|
||||
onClick={onCompose}
|
||||
className="flex-1 bg-blue-600 text-white rounded-lg hover:bg-blue-700 flex items-center justify-center transition-all py-1.5 text-sm"
|
||||
onClick={onComposeNew}
|
||||
>
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
Compose
|
||||
<div className="flex items-center gap-2">
|
||||
<PlusIcon className="h-3.5 w-3.5" />
|
||||
<span>Compose</span>
|
||||
</div>
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-9 w-9 text-gray-400 hover:text-gray-600"
|
||||
onClick={onRefresh}
|
||||
>
|
||||
<RefreshCw className={`h-4 w-4 ${loading ? 'animate-spin' : ''}`} />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Accounts and folders navigation */}
|
||||
<ScrollArea className="flex-1">
|
||||
<div className="p-2 space-y-1">
|
||||
{/* Accounts header with toggle and add button */}
|
||||
<div className="flex items-center justify-between px-2 py-2 text-sm font-medium text-gray-600">
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={() => setShowAccounts(!showAccounts)}
|
||||
className="text-gray-400 hover:text-gray-600"
|
||||
>
|
||||
{showAccounts ? (
|
||||
<ChevronDown className="h-4 w-4" />
|
||||
) : (
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
)}
|
||||
</button>
|
||||
<span>Accounts</span>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => {/* Add account logic here */}}
|
||||
className="text-gray-400 hover:text-gray-600"
|
||||
|
||||
{/* Scrollable area for accounts and folders */}
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
{/* Accounts Section */}
|
||||
<div className="p-3 border-b border-gray-100">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<span className="text-sm font-medium text-gray-500">Accounts</span>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-7 w-7 p-0 text-gray-400 hover:text-gray-600"
|
||||
onClick={() => onShowAddAccountForm(!showAddAccountForm)}
|
||||
>
|
||||
<Plus className="h-4 w-4" />
|
||||
</button>
|
||||
<PlusIcon className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Accounts list */}
|
||||
{showAccounts && (
|
||||
<div className="space-y-1">
|
||||
{accounts.map((account) => (
|
||||
<div key={account.id} className="space-y-1">
|
||||
{/* Account button */}
|
||||
<Button
|
||||
variant="ghost"
|
||||
className={`w-full justify-between p-2 text-gray-600 hover:text-gray-900 hover:bg-gray-100 ${
|
||||
expandedAccount === account.id ? 'bg-gray-100' : ''
|
||||
}`}
|
||||
onClick={() => handleAccountClick(account.id)}
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<Mail className="h-4 w-4 mr-2" />
|
||||
<span className="truncate">{account.email}</span>
|
||||
</div>
|
||||
</Button>
|
||||
|
||||
{/* Account folders - shown when account is selected */}
|
||||
{expandedAccount === account.id && (
|
||||
<div className="pl-6 space-y-1">
|
||||
{getStandardFolders(account.folders).map((folder) => (
|
||||
<Button
|
||||
key={folder}
|
||||
variant={currentFolder === folder && currentAccount === account.id ? "secondary" : "ghost"}
|
||||
className={`w-full justify-start ${
|
||||
currentFolder === folder && currentAccount === account.id ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:text-gray-900'
|
||||
}`}
|
||||
onClick={() => onFolderChange(folder, account.id)}
|
||||
>
|
||||
<div className="flex items-center w-full">
|
||||
<span className="flex items-center">
|
||||
{getFolderIcon(folder)}
|
||||
<span className="ml-2 capitalize">{folder.toLowerCase()}</span>
|
||||
</span>
|
||||
{folder === 'INBOX' && (
|
||||
<span className="ml-auto bg-blue-600 text-white text-xs px-2 py-0.5 rounded-full">
|
||||
{/* Unread count would go here */}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</Button>
|
||||
))}
|
||||
{/* Display all accounts */}
|
||||
<div className="mt-1">
|
||||
{/* Form for adding a new account - Content is identical to courrier page */}
|
||||
{showAddAccountForm && (
|
||||
<div className="mb-2 p-2 border border-gray-200 rounded-md bg-white">
|
||||
<h4 className="text-xs font-medium mb-0.5 text-gray-700">Add IMAP Account</h4>
|
||||
<form onSubmit={async (e) => {
|
||||
e.preventDefault();
|
||||
await onAddAccount(new FormData(e.currentTarget));
|
||||
}}>
|
||||
<div>
|
||||
<Tabs defaultValue="imap" className="w-full">
|
||||
<TabsList className="grid w-full grid-cols-2 h-6 mb-0.5 bg-gray-100">
|
||||
<TabsTrigger value="imap" className="text-xs h-5 data-[state=active]:bg-blue-500 data-[state=active]:text-white">IMAP</TabsTrigger>
|
||||
<TabsTrigger value="smtp" className="text-xs h-5 data-[state=active]:bg-blue-500 data-[state=active]:text-white">SMTP</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
{/* Custom folders */}
|
||||
{getCustomFolders(account.folders).map(folder => (
|
||||
<Button
|
||||
key={folder}
|
||||
variant={currentFolder === folder && currentAccount === account.id ? "secondary" : "ghost"}
|
||||
className={`w-full justify-start ${
|
||||
currentFolder === folder && currentAccount === account.id ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:text-gray-900'
|
||||
}`}
|
||||
onClick={() => onFolderChange(folder, account.id)}
|
||||
>
|
||||
<div className="flex items-center">
|
||||
{getFolderIcon(folder)}
|
||||
<span className="ml-2 truncate">{folder}</span>
|
||||
<TabsContent value="imap" className="mt-0.5 space-y-0.5">
|
||||
<div>
|
||||
<Input
|
||||
id="email"
|
||||
name="email"
|
||||
placeholder="email@example.com"
|
||||
className="h-7 text-xs bg-white border-gray-300 mb-0.5 text-gray-900"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Input
|
||||
id="password"
|
||||
name="password"
|
||||
type="password"
|
||||
placeholder="•••••••••"
|
||||
className="h-7 text-xs bg-white border-gray-300 mb-0.5 text-gray-900"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Input
|
||||
id="display_name"
|
||||
name="display_name"
|
||||
placeholder="John Doe"
|
||||
className="h-7 text-xs bg-white border-gray-300 mb-0.5 text-gray-900"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Input
|
||||
id="host"
|
||||
name="host"
|
||||
placeholder="imap.example.com"
|
||||
className="h-7 text-xs bg-white border-gray-300 mb-0.5 text-gray-900"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="flex gap-1">
|
||||
<div className="flex-1">
|
||||
<Input
|
||||
id="port"
|
||||
name="port"
|
||||
placeholder="993"
|
||||
className="h-7 text-xs bg-white border-gray-300 text-gray-900"
|
||||
defaultValue="993"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</Button>
|
||||
))}
|
||||
<div className="flex items-center pl-1">
|
||||
<div className="flex items-center space-x-1">
|
||||
<Checkbox id="secure" name="secure" defaultChecked />
|
||||
<Label htmlFor="secure" className="text-xs">SSL</Label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="smtp" className="mt-0.5 space-y-0.5">
|
||||
<div>
|
||||
<Input
|
||||
id="smtp_host"
|
||||
name="smtp_host"
|
||||
placeholder="smtp.example.com"
|
||||
className="h-7 text-xs bg-white border-gray-300 mb-0.5 text-gray-900"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex gap-1">
|
||||
<div className="flex-1">
|
||||
<Input
|
||||
id="smtp_port"
|
||||
name="smtp_port"
|
||||
placeholder="587"
|
||||
className="h-7 text-xs bg-white border-gray-300 text-gray-900"
|
||||
defaultValue="587"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center pl-1">
|
||||
<div className="flex items-center space-x-1">
|
||||
<Checkbox id="smtp_secure" name="smtp_secure" defaultChecked />
|
||||
<Label htmlFor="smtp_secure" className="text-xs">SSL</Label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-xs text-gray-500 italic">
|
||||
Note: SMTP settings needed for sending emails
|
||||
</div>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
|
||||
<div className="flex gap-1 mt-1">
|
||||
<Button
|
||||
type="submit"
|
||||
className="flex-1 h-6 text-xs bg-blue-500 hover:bg-blue-600 text-white rounded-md px-2 py-0"
|
||||
disabled={loading}
|
||||
>
|
||||
{loading ? <Loader2 className="h-3 w-3 animate-spin mr-1" /> : null}
|
||||
Test & Add
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
className="h-6 text-xs bg-gray-200 text-gray-800 hover:bg-gray-300 rounded-md px-2 py-0"
|
||||
onClick={() => onShowAddAccountForm(false)}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{accounts.map((account) => (
|
||||
<div key={account.id} className="mb-1">
|
||||
<div className={`flex items-center w-full px-1 py-1 rounded-md cursor-pointer ${selectedAccount?.id === account.id ? 'bg-gray-100' : ''}`}
|
||||
onClick={() => onAccountSelect(account)}
|
||||
tabIndex={0}
|
||||
role="button"
|
||||
onKeyDown={e => { if (e.key === 'Enter' || e.key === ' ') onAccountSelect(account); }}
|
||||
>
|
||||
<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 !== 'loading-account' && (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<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()}
|
||||
aria-label="Account options"
|
||||
>
|
||||
<span style={{ fontSize: '18px', lineHeight: 1 }}>⋮</span>
|
||||
</button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem onClick={e => { e.stopPropagation(); onEditAccount(account); }}>
|
||||
Edit
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={e => { e.stopPropagation(); onDeleteAccount(account); }}>
|
||||
Delete
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
)}
|
||||
{/* Expand/collapse arrow */}
|
||||
{account.id !== 'loading-account' && (
|
||||
<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(); onToggleExpand(account.id, !expandedAccounts[account.id]); }}
|
||||
>
|
||||
{expandedAccounts[account.id] ? <ChevronUp className="h-3 w-3" /> : <ChevronDown className="h-3 w-3" />}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{/* Show folders for any expanded account */}
|
||||
{expandedAccounts[account.id] && account.folders && account.folders.length > 0 && (
|
||||
<div className="pl-4">
|
||||
{account.folders.map((folder) => renderFolderButton(folder, account.id))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</ScrollArea>
|
||||
|
||||
{/* Settings button (bottom) */}
|
||||
<div className="p-2 border-t border-gray-100">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="w-full justify-start text-gray-600 hover:text-gray-900"
|
||||
>
|
||||
<Settings className="h-4 w-4 mr-2" />
|
||||
<span>Email settings</span>
|
||||
</Button>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user