140 lines
4.0 KiB
TypeScript
140 lines
4.0 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import {
|
|
Inbox, Send, Trash, Archive, Star,
|
|
File, RefreshCw, Plus, MailOpen
|
|
} 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';
|
|
|
|
interface EmailSidebarProps {
|
|
currentFolder: string;
|
|
folders: string[];
|
|
onFolderChange: (folder: string) => void;
|
|
onRefresh: () => void;
|
|
onCompose: () => void;
|
|
isLoading: boolean;
|
|
}
|
|
|
|
export default function EmailSidebar({
|
|
currentFolder,
|
|
folders,
|
|
onFolderChange,
|
|
onRefresh,
|
|
onCompose,
|
|
isLoading
|
|
}: EmailSidebarProps) {
|
|
// 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" />;
|
|
}
|
|
};
|
|
|
|
// Group folders into standard and custom
|
|
const standardFolders = ['INBOX', 'Sent', 'Drafts', 'Trash', 'Archive', 'Junk'];
|
|
const visibleStandardFolders = standardFolders.filter(f =>
|
|
folders.includes(f) || folders.some(folder => folder.toLowerCase() === f.toLowerCase())
|
|
);
|
|
|
|
const customFolders = folders.filter(f =>
|
|
!standardFolders.some(sf => sf.toLowerCase() === f.toLowerCase())
|
|
);
|
|
|
|
return (
|
|
<aside className="w-60 border-r h-full flex flex-col">
|
|
<div className="p-4">
|
|
<Button
|
|
className="w-full gap-2"
|
|
size="sm"
|
|
onClick={onCompose}
|
|
>
|
|
<Plus className="h-4 w-4" />
|
|
Compose
|
|
</Button>
|
|
</div>
|
|
|
|
<div className="px-4 py-2">
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="w-full justify-start gap-2"
|
|
onClick={onRefresh}
|
|
disabled={isLoading}
|
|
>
|
|
<RefreshCw className={cn(
|
|
"h-4 w-4",
|
|
isLoading && "animate-spin"
|
|
)} />
|
|
Refresh
|
|
</Button>
|
|
</div>
|
|
|
|
<ScrollArea className="flex-1">
|
|
<div className="space-y-1 p-2">
|
|
<div className="text-xs font-medium text-muted-foreground px-2 py-1">
|
|
FOLDERS
|
|
</div>
|
|
|
|
{/* Standard folders */}
|
|
{visibleStandardFolders.map(folder => (
|
|
<Button
|
|
key={folder}
|
|
variant={currentFolder === folder ? "secondary" : "ghost"}
|
|
size="sm"
|
|
className="w-full justify-start gap-2"
|
|
onClick={() => onFolderChange(folder)}
|
|
>
|
|
{getFolderIcon(folder)}
|
|
<span className="capitalize">{folder.toLowerCase()}</span>
|
|
</Button>
|
|
))}
|
|
|
|
{/* Custom folders section */}
|
|
{customFolders.length > 0 && (
|
|
<>
|
|
<div className="text-xs font-medium text-muted-foreground px-2 py-1 mt-4">
|
|
CUSTOM FOLDERS
|
|
</div>
|
|
{customFolders.map(folder => (
|
|
<Button
|
|
key={folder}
|
|
variant={currentFolder === folder ? "secondary" : "ghost"}
|
|
size="sm"
|
|
className="w-full justify-start gap-2"
|
|
onClick={() => onFolderChange(folder)}
|
|
>
|
|
{getFolderIcon(folder)}
|
|
<span className="truncate">{folder}</span>
|
|
</Button>
|
|
))}
|
|
</>
|
|
)}
|
|
</div>
|
|
</ScrollArea>
|
|
</aside>
|
|
);
|
|
}
|