feat: mail UI improvements - folder mapping, display name, resize perf, list header
- Add configurable folder mapping (sent/drafts/spam/trash) per account - Migration 0005_folder_mapping.sql with 4 new columns on mail_accounts - Backend: send_mail uses account.sent_folder_imap_name if set - Backend: _build_folder_hierarchy respects folder_mapping for is_standard - Frontend: MailSettings shows folder mapping editor per account - Frontend: MailSettings allows editing display_name for existing accounts - Frontend: MailFolderTree shows display_name || email, removes MailIcon - Frontend: ResizablePanel isDragging state with contain:strict + pointer-events:none - Frontend: MailList merges select-all and sort controls into one line
This commit is contained in:
Agent Zero
@@ -19,6 +19,10 @@ export interface MailAccount {
|
||||
smtp_port: number;
|
||||
is_shared: boolean;
|
||||
is_active: boolean;
|
||||
sent_folder_imap_name?: string | null;
|
||||
drafts_folder_imap_name?: string | null;
|
||||
spam_folder_imap_name?: string | null;
|
||||
trash_folder_imap_name?: string | null;
|
||||
created_at?: string | null;
|
||||
updated_at?: string | null;
|
||||
}
|
||||
@@ -195,6 +199,10 @@ export interface CreateAccountPayload {
|
||||
username?: string;
|
||||
password: string;
|
||||
is_shared?: boolean;
|
||||
sent_folder_imap_name?: string | null;
|
||||
drafts_folder_imap_name?: string | null;
|
||||
spam_folder_imap_name?: string | null;
|
||||
trash_folder_imap_name?: string | null;
|
||||
}
|
||||
|
||||
export interface UpdateAccountPayload {
|
||||
@@ -205,6 +213,10 @@ export interface UpdateAccountPayload {
|
||||
smtp_port?: number;
|
||||
password?: string;
|
||||
is_active?: boolean;
|
||||
sent_folder_imap_name?: string | null;
|
||||
drafts_folder_imap_name?: string | null;
|
||||
spam_folder_imap_name?: string | null;
|
||||
trash_folder_imap_name?: string | null;
|
||||
}
|
||||
|
||||
export interface CreateFolderPayload {
|
||||
|
||||
@@ -207,8 +207,7 @@ function AccountNode({
|
||||
data-testid={`account-${account.id}`}
|
||||
>
|
||||
<ChevronIcon expanded={expanded} />
|
||||
<MailIcon />
|
||||
<span className="flex-1 truncate text-left">{account.email}</span>
|
||||
<span className="flex-1 truncate text-left">{account.display_name || account.email}</span>
|
||||
</button>
|
||||
{expanded && (
|
||||
<div role="group" className="ml-2">
|
||||
|
||||
@@ -91,56 +91,57 @@ export function MailList({
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full" data-testid="mail-list" role="listbox" aria-label={t('mail.selectMail')}>
|
||||
{/* Select-all header */}
|
||||
<div className="flex items-center gap-2 px-3 py-2 md:px-4 md:py-2 border-b border-secondary-200 bg-secondary-50 flex-shrink-0">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={allSelected}
|
||||
onChange={onSelectAll}
|
||||
className="w-4 h-4 rounded border-secondary-300 text-primary-600 focus:ring-primary-500"
|
||||
aria-label={t('mail.selectAll')}
|
||||
data-testid="mail-select-all"
|
||||
/>
|
||||
{selectedMailIds.size > 0 && (
|
||||
<span className="text-xs text-secondary-600">
|
||||
{t('mail.selectedCount', { count: selectedMailIds.size })}
|
||||
</span>
|
||||
{/* Select-all + Sort header in one row */}
|
||||
<div className="flex items-center justify-between gap-2 px-3 py-2 md:px-4 md:py-2 border-b border-secondary-200 bg-secondary-50 flex-shrink-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={allSelected}
|
||||
onChange={onSelectAll}
|
||||
className="w-4 h-4 rounded border-secondary-300 text-primary-600 focus:ring-primary-500"
|
||||
aria-label={t('mail.selectAll')}
|
||||
data-testid="mail-select-all"
|
||||
/>
|
||||
{selectedMailIds.size > 0 && (
|
||||
<span className="text-xs text-secondary-600">
|
||||
{t('mail.selectedCount', { count: selectedMailIds.size })}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{onSortChange && (
|
||||
<div className="flex items-center gap-2" data-testid="mail-sort-bar">
|
||||
<label htmlFor="mail-sort-by" className="text-xs text-secondary-600">
|
||||
{t('mail.sortBy')}:
|
||||
</label>
|
||||
<select
|
||||
id="mail-sort-by"
|
||||
value={sortBy}
|
||||
onChange={handleSortFieldChange}
|
||||
className="text-xs rounded border border-secondary-300 bg-white px-1.5 py-0.5 text-secondary-700 focus:outline-none focus:ring-1 focus:ring-primary-500"
|
||||
aria-label={t('mail.sortBy')}
|
||||
data-testid="mail-sort-by"
|
||||
>
|
||||
<option value="date">{t('mail.sortDate')}</option>
|
||||
<option value="from">{t('mail.sortFrom')}</option>
|
||||
<option value="subject">{t('mail.sortSubject')}</option>
|
||||
</select>
|
||||
<button
|
||||
onClick={handleSortOrderToggle}
|
||||
className="inline-flex items-center gap-1 text-xs rounded border border-secondary-300 bg-white px-1.5 py-0.5 text-secondary-700 hover:bg-secondary-100 focus:outline-none focus:ring-1 focus:ring-primary-500"
|
||||
aria-label={sortOrder === 'asc' ? t('mail.sortAsc') : t('mail.sortDesc')}
|
||||
title={sortOrder === 'asc' ? t('mail.sortAsc') : t('mail.sortDesc')}
|
||||
data-testid="mail-sort-order"
|
||||
>
|
||||
<svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
|
||||
{sortOrder === 'asc'
|
||||
? <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 15l7-7 7 7" />
|
||||
: <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />}
|
||||
</svg>
|
||||
<span>{sortOrder === 'asc' ? t('mail.sortAsc') : t('mail.sortDesc')}</span>
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{/* Sort header */}
|
||||
{onSortChange && (
|
||||
<div className="flex items-center gap-2 px-3 py-1.5 md:px-4 border-b border-secondary-200 bg-secondary-50 flex-shrink-0" data-testid="mail-sort-bar">
|
||||
<label htmlFor="mail-sort-by" className="text-xs text-secondary-600">
|
||||
{t('mail.sortBy')}:
|
||||
</label>
|
||||
<select
|
||||
id="mail-sort-by"
|
||||
value={sortBy}
|
||||
onChange={handleSortFieldChange}
|
||||
className="text-xs rounded border border-secondary-300 bg-white px-1.5 py-0.5 text-secondary-700 focus:outline-none focus:ring-1 focus:ring-primary-500"
|
||||
aria-label={t('mail.sortBy')}
|
||||
data-testid="mail-sort-by"
|
||||
>
|
||||
<option value="date">{t('mail.sortDate')}</option>
|
||||
<option value="from">{t('mail.sortFrom')}</option>
|
||||
<option value="subject">{t('mail.sortSubject')}</option>
|
||||
</select>
|
||||
<button
|
||||
onClick={handleSortOrderToggle}
|
||||
className="inline-flex items-center gap-1 text-xs rounded border border-secondary-300 bg-white px-1.5 py-0.5 text-secondary-700 hover:bg-secondary-100 focus:outline-none focus:ring-1 focus:ring-primary-500"
|
||||
aria-label={sortOrder === 'asc' ? t('mail.sortAsc') : t('mail.sortDesc')}
|
||||
title={sortOrder === 'asc' ? t('mail.sortAsc') : t('mail.sortDesc')}
|
||||
data-testid="mail-sort-order"
|
||||
>
|
||||
<svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
|
||||
{sortOrder === 'asc'
|
||||
? <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 15l7-7 7 7" />
|
||||
: <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />}
|
||||
</svg>
|
||||
<span>{sortOrder === 'asc' ? t('mail.sortAsc') : t('mail.sortDesc')}</span>
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
{/* Mail list — scrolls, pagination stays fixed */}
|
||||
<ul className="divide-y divide-secondary-100 flex-1 overflow-y-auto" role="list">
|
||||
{mails.map((mail) => (
|
||||
|
||||
@@ -38,6 +38,7 @@ export function ResizablePanel({
|
||||
...rest
|
||||
}: ResizablePanelProps) {
|
||||
const [width, setWidth] = useState(initialWidth);
|
||||
const [isDragging, setIsDragging] = useState(false);
|
||||
const isResizing = useRef(false);
|
||||
const startX = useRef(0);
|
||||
const startWidth = useRef(0);
|
||||
@@ -47,6 +48,7 @@ export function ResizablePanel({
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
isResizing.current = true;
|
||||
setIsDragging(true);
|
||||
startX.current = e.clientX;
|
||||
startWidth.current = width;
|
||||
document.body.style.cursor = 'col-resize';
|
||||
@@ -66,6 +68,7 @@ export function ResizablePanel({
|
||||
const handleMouseUp = () => {
|
||||
if (isResizing.current) {
|
||||
isResizing.current = false;
|
||||
setIsDragging(false);
|
||||
document.body.style.cursor = '';
|
||||
document.body.style.userSelect = '';
|
||||
}
|
||||
@@ -90,7 +93,14 @@ export function ResizablePanel({
|
||||
data-testid={rest['data-testid']}
|
||||
>
|
||||
{/* Inner scrollable content area — scrollbar stays inside, never overlaps handle */}
|
||||
<div className="flex-1 overflow-y-auto overflow-x-hidden min-h-0">
|
||||
<div
|
||||
className="flex-1 overflow-y-auto overflow-x-hidden min-h-0"
|
||||
style={{
|
||||
contain: 'strict',
|
||||
pointerEvents: isDragging ? 'none' : 'auto',
|
||||
willChange: isDragging ? 'width' : undefined,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
{resizable && (
|
||||
|
||||
@@ -21,7 +21,10 @@ import {
|
||||
deleteAccount,
|
||||
testConnection,
|
||||
triggerSync,
|
||||
updateAccount,
|
||||
fetchFolders,
|
||||
type MailAccount,
|
||||
type MailFolder,
|
||||
type CreateAccountPayload,
|
||||
} from '@/api/mail';
|
||||
|
||||
@@ -47,6 +50,12 @@ export function MailSettingsPage() {
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [testing, setTesting] = useState<string | null>(null);
|
||||
const [syncing, setSyncing] = useState<string | null>(null);
|
||||
const [editingDisplayName, setEditingDisplayName] = useState<string | null>(null);
|
||||
const [displayNameValue, setDisplayNameValue] = useState('');
|
||||
const [accountFolders, setAccountFolders] = useState<Record<string, MailFolder[]>>({});
|
||||
const [folderMappingEdit, setFolderMappingEdit] = useState<string | null>(null);
|
||||
const [folderMappingValues, setFolderMappingValues] = useState<Record<string, string>>({});
|
||||
const [savingMapping, setSavingMapping] = useState(false);
|
||||
|
||||
const loadAccounts = useCallback(async () => {
|
||||
setLoading(true);
|
||||
@@ -134,6 +143,63 @@ export function MailSettingsPage() {
|
||||
}
|
||||
}, [toast, t]);
|
||||
|
||||
const handleSaveDisplayName = useCallback(async (accountId: string) => {
|
||||
try {
|
||||
const updated = await updateAccount(accountId, { display_name: displayNameValue });
|
||||
setAccounts((prev) => prev.map((a) => (a.id === accountId ? updated : a)));
|
||||
setEditingDisplayName(null);
|
||||
toast.success(t('common.saved'));
|
||||
} catch (err: any) {
|
||||
toast.error(err?.message || err?.detail || 'Save failed');
|
||||
}
|
||||
}, [displayNameValue, toast, t]);
|
||||
|
||||
const handleStartEditDisplayName = useCallback((acc: MailAccount) => {
|
||||
setEditingDisplayName(acc.id);
|
||||
setDisplayNameValue(acc.display_name || '');
|
||||
}, []);
|
||||
|
||||
const loadAccountFolders = useCallback(async (accountId: string) => {
|
||||
try {
|
||||
const folders = await fetchFolders(accountId);
|
||||
setAccountFolders((prev) => ({ ...prev, [accountId]: folders }));
|
||||
} catch {
|
||||
// non-critical
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleStartFolderMapping = useCallback((acc: MailAccount) => {
|
||||
setFolderMappingEdit(acc.id);
|
||||
setFolderMappingValues({
|
||||
sent: acc.sent_folder_imap_name || '',
|
||||
drafts: acc.drafts_folder_imap_name || '',
|
||||
spam: acc.spam_folder_imap_name || '',
|
||||
trash: acc.trash_folder_imap_name || '',
|
||||
});
|
||||
if (!accountFolders[acc.id]) {
|
||||
loadAccountFolders(acc.id);
|
||||
}
|
||||
}, [accountFolders, loadAccountFolders]);
|
||||
|
||||
const handleSaveFolderMapping = useCallback(async (accountId: string) => {
|
||||
setSavingMapping(true);
|
||||
try {
|
||||
const payload: Record<string, string | null> = {};
|
||||
payload.sent_folder_imap_name = folderMappingValues.sent || null;
|
||||
payload.drafts_folder_imap_name = folderMappingValues.drafts || null;
|
||||
payload.spam_folder_imap_name = folderMappingValues.spam || null;
|
||||
payload.trash_folder_imap_name = folderMappingValues.trash || null;
|
||||
const updated = await updateAccount(accountId, payload);
|
||||
setAccounts((prev) => prev.map((a) => (a.id === accountId ? updated : a)));
|
||||
setFolderMappingEdit(null);
|
||||
toast.success(t('common.saved'));
|
||||
} catch (err: any) {
|
||||
toast.error(err?.message || err?.detail || 'Save failed');
|
||||
} finally {
|
||||
setSavingMapping(false);
|
||||
}
|
||||
}, [folderMappingValues, toast, t]);
|
||||
|
||||
const activeTab = searchParams.get('tab') || 'accounts';
|
||||
|
||||
const tabs = [
|
||||
@@ -238,7 +304,32 @@ export function MailSettingsPage() {
|
||||
<Card key={acc.id}>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="font-medium text-secondary-900">{acc.display_name || acc.email}</p>
|
||||
{editingDisplayName === acc.id ? (
|
||||
<div className="flex items-center gap-2">
|
||||
<Input
|
||||
value={displayNameValue}
|
||||
onChange={(e) => setDisplayNameValue(e.target.value)}
|
||||
placeholder={acc.email}
|
||||
className="flex-1"
|
||||
/>
|
||||
<Button size="sm" onClick={() => handleSaveDisplayName(acc.id)}>{t('common.save')}</Button>
|
||||
<Button variant="secondary" size="sm" onClick={() => setEditingDisplayName(null)}>{t('common.cancel')}</Button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center gap-2">
|
||||
<p className="font-medium text-secondary-900">{acc.display_name || acc.email}</p>
|
||||
<button
|
||||
onClick={() => handleStartEditDisplayName(acc)}
|
||||
className="text-xs text-secondary-400 hover:text-secondary-600"
|
||||
aria-label={t('common.edit')}
|
||||
data-testid={`edit-display-name-${acc.id}`}
|
||||
>
|
||||
<svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
<p className="text-sm text-secondary-500 truncate">{acc.email}</p>
|
||||
<p className="text-xs text-secondary-400 mt-1">
|
||||
{t('mail.serverInfo')}: {acc.imap_host}:{acc.imap_port} / {acc.smtp_host}:{acc.smtp_port}
|
||||
@@ -277,6 +368,43 @@ export function MailSettingsPage() {
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
{/* Folder mapping section */}
|
||||
{folderMappingEdit === acc.id ? (
|
||||
<div className="mt-3 pt-3 border-t border-secondary-200 space-y-2" data-testid={`folder-mapping-${acc.id}`}>
|
||||
<p className="text-xs font-medium text-secondary-600">Ordner-Zuordnung</p>
|
||||
{(['sent', 'drafts', 'spam', 'trash'] as const).map((type) => (
|
||||
<div key={type} className="flex items-center gap-2">
|
||||
<label className="text-xs text-secondary-500 w-20">
|
||||
{type === 'sent' ? 'Gesendet' : type === 'drafts' ? 'Entwürfe' : type === 'spam' ? 'Spam' : 'Papierkorb'}
|
||||
</label>
|
||||
<select
|
||||
value={folderMappingValues[type] || ''}
|
||||
onChange={(e) => setFolderMappingValues((prev) => ({ ...prev, [type]: e.target.value }))}
|
||||
className="text-xs rounded border border-secondary-300 bg-white px-1.5 py-0.5 text-secondary-700 focus:outline-none focus:ring-1 focus:ring-primary-500 flex-1"
|
||||
>
|
||||
<option value="">(automatisch)</option>
|
||||
{(accountFolders[acc.id] || []).map((f) => (
|
||||
<option key={f.id} value={f.imap_name}>{f.imap_name}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
))}
|
||||
<div className="flex gap-2 mt-2">
|
||||
<Button size="sm" onClick={() => handleSaveFolderMapping(acc.id)} isLoading={savingMapping}>{t('common.save')}</Button>
|
||||
<Button variant="secondary" size="sm" onClick={() => setFolderMappingEdit(null)}>{t('common.cancel')}</Button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="mt-2">
|
||||
<button
|
||||
onClick={() => handleStartFolderMapping(acc)}
|
||||
className="text-xs text-secondary-400 hover:text-secondary-600"
|
||||
data-testid={`folder-mapping-btn-${acc.id}`}
|
||||
>
|
||||
Ordner-Zuordnung bearbeiten
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user