courrier multi account restore compose
This commit is contained in:
parent
4770b9858e
commit
a0fcbc3b62
@ -4,32 +4,24 @@ import React, { useState } from 'react';
|
||||
import {
|
||||
Inbox, Send, Trash, Archive, Star,
|
||||
File, RefreshCw, Plus, MailOpen, Settings,
|
||||
ChevronDown, ChevronRight, ChevronUp, Mail, AlertCircle,
|
||||
MoreVertical, Edit, Trash2, AlertOctagon, Folder
|
||||
ChevronDown, ChevronRight, Mail
|
||||
} 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;
|
||||
}
|
||||
|
||||
@ -40,9 +32,6 @@ export default function EmailSidebar({
|
||||
onFolderChange,
|
||||
onRefresh,
|
||||
onCompose,
|
||||
onAddAccount,
|
||||
onEditAccount,
|
||||
onDeleteAccount,
|
||||
isLoading
|
||||
}: EmailSidebarProps) {
|
||||
const [showAccounts, setShowAccounts] = useState(true);
|
||||
@ -52,26 +41,42 @@ export default function EmailSidebar({
|
||||
const getFolderIcon = (folder: string) => {
|
||||
const folderLower = folder.toLowerCase();
|
||||
|
||||
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 <Folder className="h-4 w-4 text-gray-500" />;
|
||||
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" />;
|
||||
}
|
||||
};
|
||||
|
||||
// Helper to format folder names
|
||||
const formatFolderName = (folder: string) => {
|
||||
return folder.charAt(0).toUpperCase() + folder.slice(1).toLowerCase();
|
||||
// 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())
|
||||
);
|
||||
};
|
||||
|
||||
const handleAccountClick = (accountId: string) => {
|
||||
@ -97,15 +102,6 @@ export default function EmailSidebar({
|
||||
{/* 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>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-7 w-7 p-0 text-gray-400 hover:text-gray-600"
|
||||
onClick={onAddAccount}
|
||||
>
|
||||
<Plus className="h-4 w-4" />
|
||||
</Button>
|
||||
<button
|
||||
onClick={() => setShowAccounts(!showAccounts)}
|
||||
className="text-gray-400 hover:text-gray-600"
|
||||
@ -117,7 +113,6 @@ export default function EmailSidebar({
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Accounts list */}
|
||||
{showAccounts && (
|
||||
@ -125,73 +120,66 @@ export default function EmailSidebar({
|
||||
{accounts.map((account) => (
|
||||
<div key={account.id} className="space-y-1">
|
||||
{/* Account button */}
|
||||
<div
|
||||
className={`flex items-center w-full px-2 py-1 rounded-md cursor-pointer ${
|
||||
currentAccount === account.id ? 'bg-gray-100' : ''
|
||||
<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={`w-3 h-3 rounded-full ${account.color} 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"
|
||||
onClick={e => e.stopPropagation()}
|
||||
>
|
||||
<span style={{ fontSize: '18px', lineHeight: 1 }}>⋮</span>
|
||||
</button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem onClick={() => onEditAccount(account.id)}>
|
||||
Edit
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => onDeleteAccount(account.id)}>
|
||||
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"
|
||||
onClick={e => { e.stopPropagation(); handleAccountClick(account.id); }}
|
||||
>
|
||||
{expandedAccount === account.id ? <ChevronUp className="h-3 w-3" /> : <ChevronDown className="h-3 w-3" />}
|
||||
</button>
|
||||
)}
|
||||
<div className="flex items-center">
|
||||
<Mail className="h-4 w-4 mr-2" />
|
||||
<span className="truncate">{account.email}</span>
|
||||
</div>
|
||||
{expandedAccount === account.id ? (
|
||||
<ChevronDown className="h-4 w-4" />
|
||||
) : (
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
)}
|
||||
</Button>
|
||||
|
||||
{/* Account folders - shown when account is expanded */}
|
||||
{expandedAccount === account.id && account.folders && account.folders.length > 0 && (
|
||||
<div className="pl-4">
|
||||
{account.folders.map((folder) => (
|
||||
{expandedAccount === account.id && (
|
||||
<div className="pl-6 space-y-1">
|
||||
{getStandardFolders(account.folders).map((folder) => (
|
||||
<Button
|
||||
key={folder}
|
||||
variant="ghost"
|
||||
className={`w-full justify-start text-xs py-1 h-7 ${
|
||||
currentFolder === folder && currentAccount === account.id ? 'bg-gray-100' : ''
|
||||
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 truncate text-gray-700">{formatFolderName(folder)}</span>
|
||||
<span className="ml-2 capitalize">{folder.toLowerCase()}</span>
|
||||
</span>
|
||||
{folder === 'INBOX' && (
|
||||
<span className="ml-auto bg-blue-500 text-white text-[10px] px-1.5 rounded-full">
|
||||
<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>
|
||||
))}
|
||||
|
||||
{/* 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>
|
||||
</div>
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user