+
{children}
{resizable && (
diff --git a/frontend/src/pages/MailSettings.tsx b/frontend/src/pages/MailSettings.tsx
index 56dd6bc..efd73b5 100644
--- a/frontend/src/pages/MailSettings.tsx
+++ b/frontend/src/pages/MailSettings.tsx
@@ -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
(null);
const [syncing, setSyncing] = useState(null);
+ const [editingDisplayName, setEditingDisplayName] = useState(null);
+ const [displayNameValue, setDisplayNameValue] = useState('');
+ const [accountFolders, setAccountFolders] = useState>({});
+ const [folderMappingEdit, setFolderMappingEdit] = useState(null);
+ const [folderMappingValues, setFolderMappingValues] = useState>({});
+ 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 = {};
+ 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() {
-
{acc.display_name || acc.email}
+ {editingDisplayName === acc.id ? (
+
+ setDisplayNameValue(e.target.value)}
+ placeholder={acc.email}
+ className="flex-1"
+ />
+
+
+
+ ) : (
+
+
{acc.display_name || acc.email}
+
+
+ )}
{acc.email}
{t('mail.serverInfo')}: {acc.imap_host}:{acc.imap_port} / {acc.smtp_host}:{acc.smtp_port}
@@ -277,6 +368,43 @@ export function MailSettingsPage() {
+ {/* Folder mapping section */}
+ {folderMappingEdit === acc.id ? (
+
+
Ordner-Zuordnung
+ {(['sent', 'drafts', 'spam', 'trash'] as const).map((type) => (
+
+
+
+
+ ))}
+
+
+
+
+
+
+
+ )}
))}