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
@@ -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