courrier multi account restore compose
This commit is contained in:
parent
53b95dd240
commit
d6c6832a21
@ -13,8 +13,13 @@ import { Badge } from '@/components/ui/badge';
|
||||
|
||||
interface EmailSidebarProps {
|
||||
currentFolder: string;
|
||||
currentAccount: string;
|
||||
accounts: Array<{
|
||||
id: string;
|
||||
email: string;
|
||||
folders: string[];
|
||||
onFolderChange: (folder: string) => void;
|
||||
}>;
|
||||
onFolderChange: (folder: string, accountId: string) => void;
|
||||
onRefresh: () => void;
|
||||
onCompose: () => void;
|
||||
isLoading: boolean;
|
||||
@ -22,13 +27,15 @@ interface EmailSidebarProps {
|
||||
|
||||
export default function EmailSidebar({
|
||||
currentFolder,
|
||||
folders,
|
||||
currentAccount,
|
||||
accounts,
|
||||
onFolderChange,
|
||||
onRefresh,
|
||||
onCompose,
|
||||
isLoading
|
||||
}: EmailSidebarProps) {
|
||||
const [showFolders, setShowFolders] = useState(true);
|
||||
const [showAccounts, setShowAccounts] = useState(true);
|
||||
const [expandedAccount, setExpandedAccount] = useState<string | null>(currentAccount);
|
||||
|
||||
// Get the appropriate icon for a folder
|
||||
const getFolderIcon = (folder: string) => {
|
||||
@ -58,14 +65,23 @@ export default function EmailSidebar({
|
||||
};
|
||||
|
||||
// Group folders into standard and custom
|
||||
const getStandardFolders = (folders: string[]) => {
|
||||
const standardFolders = ['INBOX', 'Sent', 'Drafts', 'Trash', 'Archive', 'Junk'];
|
||||
const visibleStandardFolders = standardFolders.filter(f =>
|
||||
return standardFolders.filter(f =>
|
||||
folders.includes(f) || folders.some(folder => folder.toLowerCase() === f.toLowerCase())
|
||||
);
|
||||
};
|
||||
|
||||
const customFolders = folders.filter(f =>
|
||||
const getCustomFolders = (folders: string[]) => {
|
||||
const standardFolders = ['INBOX', 'Sent', 'Drafts', 'Trash', 'Archive', 'Junk'];
|
||||
return folders.filter(f =>
|
||||
!standardFolders.some(sf => sf.toLowerCase() === f.toLowerCase())
|
||||
);
|
||||
};
|
||||
|
||||
const handleAccountClick = (accountId: string) => {
|
||||
setExpandedAccount(expandedAccount === accountId ? null : accountId);
|
||||
};
|
||||
|
||||
return (
|
||||
<aside className="w-64 border-r h-full flex flex-col bg-white/95 backdrop-blur-sm">
|
||||
@ -76,49 +92,63 @@ export default function EmailSidebar({
|
||||
onClick={onCompose}
|
||||
>
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
New Email
|
||||
Compose
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Folder navigation */}
|
||||
{/* Accounts and folders navigation */}
|
||||
<ScrollArea className="flex-1">
|
||||
<div className="p-2 space-y-1">
|
||||
{/* Accounts header with toggle */}
|
||||
<div className="flex items-center justify-between px-2 py-2 text-sm font-medium text-gray-600">
|
||||
<span>Accounts</span>
|
||||
{isLoading && <RefreshCw className="h-3 w-3 animate-spin text-gray-400" />}
|
||||
<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>
|
||||
</div>
|
||||
|
||||
{/* Mail account with toggle arrow */}
|
||||
<div className="px-2">
|
||||
{/* 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"
|
||||
onClick={() => setShowFolders(!showFolders)}
|
||||
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>Mail</span>
|
||||
<span className="truncate">{account.email}</span>
|
||||
</div>
|
||||
{showFolders ? (
|
||||
{expandedAccount === account.id ? (
|
||||
<ChevronDown className="h-4 w-4" />
|
||||
) : (
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Folders list - shown only when showFolders is true */}
|
||||
{showFolders && (
|
||||
{/* Account folders - shown when account is expanded */}
|
||||
{expandedAccount === account.id && (
|
||||
<div className="pl-6 space-y-1">
|
||||
{visibleStandardFolders.map((folder) => (
|
||||
{getStandardFolders(account.folders).map((folder) => (
|
||||
<Button
|
||||
key={folder}
|
||||
variant={currentFolder === folder ? "secondary" : "ghost"}
|
||||
variant={currentFolder === folder && currentAccount === account.id ? "secondary" : "ghost"}
|
||||
className={`w-full justify-start ${
|
||||
currentFolder === folder ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:text-gray-900'
|
||||
currentFolder === folder && currentAccount === account.id ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:text-gray-900'
|
||||
}`}
|
||||
onClick={() => onFolderChange(folder)}
|
||||
onClick={() => onFolderChange(folder, account.id)}
|
||||
>
|
||||
<div className="flex items-center w-full">
|
||||
<span className="flex items-center">
|
||||
@ -134,17 +164,15 @@ export default function EmailSidebar({
|
||||
</Button>
|
||||
))}
|
||||
|
||||
{/* Custom folders section */}
|
||||
{customFolders.length > 0 && (
|
||||
<>
|
||||
{customFolders.map(folder => (
|
||||
{/* Custom folders */}
|
||||
{getCustomFolders(account.folders).map(folder => (
|
||||
<Button
|
||||
key={folder}
|
||||
variant={currentFolder === folder ? "secondary" : "ghost"}
|
||||
variant={currentFolder === folder && currentAccount === account.id ? "secondary" : "ghost"}
|
||||
className={`w-full justify-start ${
|
||||
currentFolder === folder ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:text-gray-900'
|
||||
currentFolder === folder && currentAccount === account.id ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:text-gray-900'
|
||||
}`}
|
||||
onClick={() => onFolderChange(folder)}
|
||||
onClick={() => onFolderChange(folder, account.id)}
|
||||
>
|
||||
<div className="flex items-center">
|
||||
{getFolderIcon(folder)}
|
||||
@ -152,9 +180,11 @@ export default function EmailSidebar({
|
||||
</div>
|
||||
</Button>
|
||||
))}
|
||||
</>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user