512 lines
18 KiB
TypeScript
512 lines
18 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useRef, useEffect } from 'react';
|
|
import { useTranslations } from 'next-intl';
|
|
import { useEmailStore } from '@/stores/email-store';
|
|
import { useAuthStore } from '@/stores/auth-store';
|
|
import { useSettingsStore } from '@/stores/settings-store';
|
|
import { toast } from '@/stores/toast-store';
|
|
import { SettingsSection, SettingItem, Select } from './settings-section';
|
|
import {
|
|
Plus, Pencil, Trash2, Check, X, FolderPlus, Folder,
|
|
Inbox, Send, FileText, Trash, ShieldAlert, Archive,
|
|
Star, Heart, Bookmark, Tag, Flag, Briefcase, Users,
|
|
Bell, Zap, Globe, Lock, Eye, MessageSquare, Mail,
|
|
type LucideIcon,
|
|
} from 'lucide-react';
|
|
import { cn, buildMailboxTree, type MailboxNode } from '@/lib/utils';
|
|
import { ChevronRight, ChevronDown } from 'lucide-react';
|
|
|
|
const STANDARD_ROLES = ['inbox', 'drafts', 'sent', 'trash', 'junk', 'archive'] as const;
|
|
|
|
const ROLE_ICONS: Record<string, LucideIcon> = {
|
|
inbox: Inbox,
|
|
drafts: FileText,
|
|
sent: Send,
|
|
trash: Trash,
|
|
junk: ShieldAlert,
|
|
archive: Archive,
|
|
};
|
|
|
|
const ICON_CHOICES: { name: string; icon: LucideIcon }[] = [
|
|
{ name: 'Folder', icon: Folder },
|
|
{ name: 'Star', icon: Star },
|
|
{ name: 'Heart', icon: Heart },
|
|
{ name: 'Bookmark', icon: Bookmark },
|
|
{ name: 'Tag', icon: Tag },
|
|
{ name: 'Flag', icon: Flag },
|
|
{ name: 'Briefcase', icon: Briefcase },
|
|
{ name: 'Users', icon: Users },
|
|
{ name: 'Bell', icon: Bell },
|
|
{ name: 'Zap', icon: Zap },
|
|
{ name: 'Globe', icon: Globe },
|
|
{ name: 'Lock', icon: Lock },
|
|
{ name: 'Eye', icon: Eye },
|
|
{ name: 'MessageSquare', icon: MessageSquare },
|
|
{ name: 'Mail', icon: Mail },
|
|
{ name: 'Inbox', icon: Inbox },
|
|
{ name: 'Archive', icon: Archive },
|
|
{ name: 'FileText', icon: FileText },
|
|
];
|
|
|
|
function IconPicker({ currentIcon, onSelect, onClose }: {
|
|
currentIcon: string;
|
|
onSelect: (iconName: string) => void;
|
|
onClose: () => void;
|
|
}) {
|
|
const ref = useRef<HTMLDivElement>(null);
|
|
|
|
useEffect(() => {
|
|
const handleClick = (e: MouseEvent) => {
|
|
if (ref.current && !ref.current.contains(e.target as Node)) onClose();
|
|
};
|
|
const handleKey = (e: KeyboardEvent) => {
|
|
if (e.key === 'Escape') onClose();
|
|
};
|
|
document.addEventListener('mousedown', handleClick);
|
|
document.addEventListener('keydown', handleKey);
|
|
return () => {
|
|
document.removeEventListener('mousedown', handleClick);
|
|
document.removeEventListener('keydown', handleKey);
|
|
};
|
|
}, [onClose]);
|
|
|
|
return (
|
|
<div
|
|
ref={ref}
|
|
className="absolute left-0 top-full mt-1 z-50 bg-background border border-border rounded-lg shadow-lg p-2 grid grid-cols-6 gap-1 w-52"
|
|
>
|
|
{ICON_CHOICES.map(({ name, icon: Icon }) => (
|
|
<button
|
|
key={name}
|
|
onClick={() => onSelect(name)}
|
|
className={cn(
|
|
"p-1.5 rounded-md transition-colors flex items-center justify-center",
|
|
currentIcon === name
|
|
? "bg-primary text-primary-foreground"
|
|
: "hover:bg-accent text-muted-foreground hover:text-foreground"
|
|
)}
|
|
title={name}
|
|
>
|
|
<Icon className="w-4 h-4" />
|
|
</button>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function FolderSettings() {
|
|
const t = useTranslations('settings.folders');
|
|
const { client } = useAuthStore();
|
|
const { mailboxes, createMailbox, renameMailbox, deleteMailbox, setMailboxRole } = useEmailStore();
|
|
const { folderIcons, setFolderIcon } = useSettingsStore();
|
|
|
|
const [isCreating, setIsCreating] = useState(false);
|
|
const [creatingParentId, setCreatingParentId] = useState<string | null>(null);
|
|
const [newFolderName, setNewFolderName] = useState('');
|
|
const [editingId, setEditingId] = useState<string | null>(null);
|
|
const [editingName, setEditingName] = useState('');
|
|
const [deletingId, setDeletingId] = useState<string | null>(null);
|
|
const [iconPickerId, setIconPickerId] = useState<string | null>(null);
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
const [expandedFolders, setExpandedFolders] = useState<Set<string>>(new Set());
|
|
|
|
const ownMailboxes = mailboxes.filter(mb => !mb.isShared);
|
|
const folderTree = buildMailboxTree(ownMailboxes);
|
|
|
|
const getRoleMailboxId = (role: string): string => {
|
|
const mb = ownMailboxes.find(m => m.role === role);
|
|
return mb?.id ?? '';
|
|
};
|
|
|
|
const getIconForMailbox = (mb: { id: string; role?: string }): LucideIcon => {
|
|
// Custom icon takes priority for non-role folders
|
|
const customIconName = folderIcons[mb.id];
|
|
if (customIconName) {
|
|
const found = ICON_CHOICES.find(c => c.name === customIconName);
|
|
if (found) return found.icon;
|
|
}
|
|
// Role folders get their role icon
|
|
if (mb.role && ROLE_ICONS[mb.role]) return ROLE_ICONS[mb.role];
|
|
return Folder;
|
|
};
|
|
|
|
const getIconName = (mb: { id: string; role?: string }): string => {
|
|
if (folderIcons[mb.id]) return folderIcons[mb.id];
|
|
if (mb.role && ROLE_ICONS[mb.role]) {
|
|
const entry = Object.entries(ROLE_ICONS).find(([r]) => r === mb.role);
|
|
if (entry) {
|
|
const found = ICON_CHOICES.find(c => c.icon === entry[1]);
|
|
if (found) return found.name;
|
|
}
|
|
}
|
|
return 'Folder';
|
|
};
|
|
|
|
const toggleExpanded = (id: string) => {
|
|
setExpandedFolders(prev => {
|
|
const next = new Set(prev);
|
|
if (next.has(id)) next.delete(id);
|
|
else next.add(id);
|
|
return next;
|
|
});
|
|
};
|
|
|
|
const startCreateSubfolder = (parentId: string) => {
|
|
setCreatingParentId(parentId);
|
|
setIsCreating(true);
|
|
setNewFolderName('');
|
|
setExpandedFolders(prev => new Set(prev).add(parentId));
|
|
};
|
|
|
|
const handleCreate = async () => {
|
|
if (!client || !newFolderName.trim()) return;
|
|
setIsLoading(true);
|
|
try {
|
|
await createMailbox(client, newFolderName.trim(), creatingParentId ?? undefined);
|
|
setNewFolderName('');
|
|
setIsCreating(false);
|
|
setCreatingParentId(null);
|
|
toast.success(t('folder_created'));
|
|
} catch {
|
|
toast.error(t('error_create'));
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleRename = async (mailboxId: string) => {
|
|
if (!client || !editingName.trim()) return;
|
|
setIsLoading(true);
|
|
try {
|
|
await renameMailbox(client, mailboxId, editingName.trim());
|
|
setEditingId(null);
|
|
setEditingName('');
|
|
toast.success(t('folder_renamed'));
|
|
} catch {
|
|
toast.error(t('error_rename'));
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleDelete = async (mailboxId: string) => {
|
|
if (!client) return;
|
|
setIsLoading(true);
|
|
try {
|
|
await deleteMailbox(client, mailboxId);
|
|
setDeletingId(null);
|
|
toast.success(t('folder_deleted'));
|
|
} catch {
|
|
toast.error(t('error_delete'));
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleRoleChange = async (role: string, mailboxId: string) => {
|
|
if (!client) return;
|
|
setIsLoading(true);
|
|
try {
|
|
if (mailboxId === '') {
|
|
const current = ownMailboxes.find(m => m.role === role);
|
|
if (current) {
|
|
await setMailboxRole(client, current.id, null);
|
|
}
|
|
} else {
|
|
await setMailboxRole(client, mailboxId, role);
|
|
}
|
|
toast.success(t('role_updated'));
|
|
} catch {
|
|
toast.error(t('error_role'));
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
const startEdit = (mb: { id: string; name: string }) => {
|
|
setEditingId(mb.id);
|
|
setEditingName(mb.name);
|
|
};
|
|
|
|
const cancelEdit = () => {
|
|
setEditingId(null);
|
|
setEditingName('');
|
|
};
|
|
|
|
const renderCreateInline = (parentId: string | null, depth: number) => {
|
|
if (!isCreating || creatingParentId !== parentId) return null;
|
|
const parentName = parentId ? ownMailboxes.find(m => m.id === parentId)?.name : null;
|
|
return (
|
|
<div
|
|
className="flex items-center gap-2 mt-1 p-2.5 bg-muted/30 rounded-md border border-border"
|
|
style={{ marginLeft: depth * 16 }}
|
|
>
|
|
<FolderPlus className="w-4 h-4 text-primary flex-shrink-0" />
|
|
<div className="flex-1 flex flex-col gap-1">
|
|
{parentName && (
|
|
<span className="text-xs text-muted-foreground">
|
|
{t('subfolder_of', { name: parentName })}
|
|
</span>
|
|
)}
|
|
<input
|
|
type="text"
|
|
value={newFolderName}
|
|
onChange={(e) => setNewFolderName(e.target.value)}
|
|
onKeyDown={(e) => {
|
|
if (e.key === 'Enter') handleCreate();
|
|
if (e.key === 'Escape') {
|
|
setIsCreating(false);
|
|
setNewFolderName('');
|
|
setCreatingParentId(null);
|
|
}
|
|
}}
|
|
placeholder={parentId ? t('subfolder_name') : t('new_folder_name')}
|
|
className="flex-1 px-2 py-1 text-sm rounded border border-border bg-background text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
|
|
autoFocus
|
|
disabled={isLoading}
|
|
/>
|
|
</div>
|
|
<button
|
|
onClick={handleCreate}
|
|
disabled={isLoading || !newFolderName.trim()}
|
|
className="px-3 py-1 text-xs font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 disabled:opacity-50"
|
|
>
|
|
{t('create')}
|
|
</button>
|
|
<button
|
|
onClick={() => {
|
|
setIsCreating(false);
|
|
setNewFolderName('');
|
|
setCreatingParentId(null);
|
|
}}
|
|
className="px-3 py-1 text-xs bg-muted text-foreground rounded-md hover:bg-accent"
|
|
>
|
|
{t('cancel')}
|
|
</button>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const renderFolderNode = (node: MailboxNode): React.ReactNode => {
|
|
const mb = node;
|
|
const hasChildren = node.children.length > 0;
|
|
const isExpanded = expandedFolders.has(node.id);
|
|
const depth = node.depth;
|
|
const Icon = getIconForMailbox(mb);
|
|
|
|
if (editingId === mb.id) {
|
|
return (
|
|
<div key={mb.id}>
|
|
<div className="flex items-center gap-2 py-2 px-3" style={{ paddingLeft: 12 + depth * 16 }}>
|
|
<Icon className="w-4 h-4 text-muted-foreground flex-shrink-0" />
|
|
<input
|
|
type="text"
|
|
value={editingName}
|
|
onChange={(e) => setEditingName(e.target.value)}
|
|
onKeyDown={(e) => {
|
|
if (e.key === 'Enter') handleRename(mb.id);
|
|
if (e.key === 'Escape') cancelEdit();
|
|
}}
|
|
className="flex-1 px-2 py-1 text-sm rounded border border-border bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-ring"
|
|
autoFocus
|
|
disabled={isLoading}
|
|
/>
|
|
<button
|
|
onClick={() => handleRename(mb.id)}
|
|
disabled={isLoading || !editingName.trim()}
|
|
className="p-1.5 text-primary hover:bg-accent rounded-md disabled:opacity-50"
|
|
title={t('rename')}
|
|
>
|
|
<Check className="w-4 h-4" />
|
|
</button>
|
|
<button
|
|
onClick={cancelEdit}
|
|
className="p-1.5 text-muted-foreground hover:bg-accent rounded-md"
|
|
title={t('cancel')}
|
|
>
|
|
<X className="w-4 h-4" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (deletingId === mb.id) {
|
|
return (
|
|
<div key={mb.id}>
|
|
<div className="flex items-center gap-3 py-2.5 px-3 bg-destructive/5 rounded-md border border-destructive/20" style={{ marginLeft: depth * 16 }}>
|
|
<Trash2 className="w-4 h-4 text-destructive flex-shrink-0" />
|
|
<p className="text-sm text-foreground flex-1">
|
|
{t('confirm_delete', { name: mb.name })}
|
|
</p>
|
|
<button
|
|
onClick={() => handleDelete(mb.id)}
|
|
disabled={isLoading}
|
|
className="px-3 py-1 text-xs font-medium bg-destructive text-destructive-foreground rounded-md hover:bg-destructive/90 disabled:opacity-50"
|
|
>
|
|
{t('delete')}
|
|
</button>
|
|
<button
|
|
onClick={() => setDeletingId(null)}
|
|
className="px-3 py-1 text-xs bg-muted text-foreground rounded-md hover:bg-accent"
|
|
>
|
|
{t('cancel')}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div key={mb.id}>
|
|
<div
|
|
className="flex items-center justify-between py-2 px-3 rounded-md hover:bg-muted/50"
|
|
style={{ paddingLeft: 12 + depth * 16 }}
|
|
>
|
|
<div className="flex items-center gap-2.5 min-w-0">
|
|
{/* Expand/collapse toggle for folders with children */}
|
|
{hasChildren ? (
|
|
<button
|
|
onClick={() => toggleExpanded(mb.id)}
|
|
className="p-0.5 text-muted-foreground hover:text-foreground rounded transition-colors flex-shrink-0"
|
|
>
|
|
{isExpanded
|
|
? <ChevronDown className="w-3.5 h-3.5" />
|
|
: <ChevronRight className="w-3.5 h-3.5" />
|
|
}
|
|
</button>
|
|
) : (
|
|
<span className="w-4.5 flex-shrink-0" />
|
|
)}
|
|
<div className="relative flex-shrink-0">
|
|
<button
|
|
onClick={() => setIconPickerId(iconPickerId === mb.id ? null : mb.id)}
|
|
className={cn(
|
|
"p-1 rounded-md transition-colors",
|
|
iconPickerId === mb.id
|
|
? "bg-accent"
|
|
: "hover:bg-accent"
|
|
)}
|
|
title={t('change_icon')}
|
|
>
|
|
<Icon className={cn(
|
|
"w-4 h-4",
|
|
mb.role ? "text-primary" : "text-muted-foreground"
|
|
)} />
|
|
</button>
|
|
{iconPickerId === mb.id && (
|
|
<IconPicker
|
|
currentIcon={getIconName(mb)}
|
|
onSelect={(iconName) => {
|
|
setFolderIcon(mb.id, iconName);
|
|
setIconPickerId(null);
|
|
}}
|
|
onClose={() => setIconPickerId(null)}
|
|
/>
|
|
)}
|
|
</div>
|
|
<span className="text-sm text-foreground truncate">{mb.name}</span>
|
|
{mb.role && (
|
|
<span className="text-xs px-1.5 py-0.5 rounded-full bg-primary/10 text-primary font-medium flex-shrink-0">
|
|
{t(`role_${mb.role}`)}
|
|
</span>
|
|
)}
|
|
{mb.unreadEmails > 0 && (
|
|
<span className="text-xs tabular-nums px-1.5 py-0.5 rounded-full bg-primary text-primary-foreground font-medium flex-shrink-0">
|
|
{mb.unreadEmails}
|
|
</span>
|
|
)}
|
|
</div>
|
|
<div className="flex items-center gap-0.5">
|
|
{mb.myRights?.mayCreateChild && (
|
|
<button
|
|
onClick={() => startCreateSubfolder(mb.id)}
|
|
className="p-1.5 text-muted-foreground hover:text-foreground hover:bg-accent rounded-md transition-colors"
|
|
title={t('create_subfolder')}
|
|
>
|
|
<FolderPlus className="w-3.5 h-3.5" />
|
|
</button>
|
|
)}
|
|
{mb.myRights?.mayRename && (
|
|
<button
|
|
onClick={() => startEdit(mb)}
|
|
className="p-1.5 text-muted-foreground hover:text-foreground hover:bg-accent rounded-md transition-colors"
|
|
title={t('rename')}
|
|
>
|
|
<Pencil className="w-3.5 h-3.5" />
|
|
</button>
|
|
)}
|
|
{mb.myRights?.mayDelete && !mb.role && (
|
|
<button
|
|
onClick={() => setDeletingId(mb.id)}
|
|
className="p-1.5 text-muted-foreground hover:text-destructive hover:bg-destructive/10 rounded-md transition-colors"
|
|
title={t('delete')}
|
|
>
|
|
<Trash2 className="w-3.5 h-3.5" />
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
{/* Inline subfolder creation */}
|
|
{renderCreateInline(mb.id, depth + 1)}
|
|
{/* Render children if expanded */}
|
|
{hasChildren && isExpanded && (
|
|
<div>
|
|
{node.children.map(child => renderFolderNode(child))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-8">
|
|
{/* Folder List — primary section */}
|
|
<SettingsSection title={t('folder_list')} description={t('folder_list_description')}>
|
|
<div className="space-y-0.5">
|
|
{folderTree.length === 0 ? (
|
|
<div className="flex flex-col items-center justify-center py-8 text-center">
|
|
<Folder className="w-10 h-10 text-muted-foreground/40 mb-3" />
|
|
<p className="text-sm text-muted-foreground">{t('no_folders')}</p>
|
|
</div>
|
|
) : (
|
|
folderTree.map(node => renderFolderNode(node))
|
|
)}
|
|
</div>
|
|
|
|
{/* Create top-level folder */}
|
|
{renderCreateInline(null, 0)}
|
|
{!isCreating && (
|
|
<button
|
|
onClick={() => { setIsCreating(true); setCreatingParentId(null); setNewFolderName(''); }}
|
|
className="flex items-center gap-2 mt-3 px-3 py-2 text-sm text-primary hover:bg-primary/5 rounded-md transition-colors w-full border border-dashed border-primary/30 hover:border-primary/50"
|
|
>
|
|
<Plus className="w-4 h-4" />
|
|
{t('create_folder')}
|
|
</button>
|
|
)}
|
|
</SettingsSection>
|
|
|
|
{/* Standard Folder Roles — advanced section */}
|
|
<SettingsSection title={t('standard_roles')} description={t('standard_roles_description')}>
|
|
{STANDARD_ROLES.map((role) => (
|
|
<SettingItem key={role} label={t(`role_${role}`)}>
|
|
<Select
|
|
value={getRoleMailboxId(role)}
|
|
onChange={(value) => handleRoleChange(role, value)}
|
|
options={[
|
|
{ value: '', label: t('role_none') },
|
|
...ownMailboxes.map(mb => ({
|
|
value: mb.id,
|
|
label: mb.name,
|
|
})),
|
|
]}
|
|
/>
|
|
</SettingItem>
|
|
))}
|
|
</SettingsSection>
|
|
</div>
|
|
);
|
|
}
|