fix: mail UI German labels, multi-folder sync, account management, resizable panel fix

frontend/src/pages/MailSettings.tsx

@@ -18,6 +18,7 @@ import { PgpSettings } from '@/components/mail/PgpSettings';
 import {
   fetchAccounts,
   createAccount,
+  deleteAccount,
   testConnection,
   triggerSync,
   type MailAccount,
@@ -113,6 +114,17 @@ export function MailSettingsPage() {
     }
   }, [toast, t]);
 
+  const handleDeleteAccount = useCallback(async (accountId: string) => {
+    if (!window.confirm(t('mail.confirmDeleteAccount'))) return;
+    try {
+      await deleteAccount(accountId);
+      setAccounts((prev) => prev.filter((a) => a.id !== accountId));
+      toast.success(t('mail.accountDeleted'));
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : String(err));
+    }
+  }, [toast, t]);
+
   const activeTab = searchParams.get('tab') || 'accounts';
 
   const tabs = [
@@ -201,15 +213,18 @@ export function MailSettingsPage() {
               {accounts.map((acc) => (
                 <Card key={acc.id}>
                   <div className="flex items-center justify-between">
-                    <div>
-                      <p className="font-medium text-secondary-900">{acc.display_name}</p>
-                      <p className="text-sm text-secondary-500">{acc.email}</p>
+                    <div className="min-w-0 flex-1">
+                      <p className="font-medium text-secondary-900">{acc.display_name || acc.email}</p>
+                      <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}
+                      </p>
                       <p className="text-xs text-secondary-400">
-                        {acc.is_shared ? t('mail.shared') : t('mail.personal')} · 
+                        {acc.is_shared ? t('mail.shared') : t('mail.personal')} ·
                         {acc.is_active ? t('common.active') : t('common.inactive')}
                       </p>
                     </div>
-                    <div className="flex gap-2">
+                    <div className="flex gap-2 flex-shrink-0">
                       <Button
                         variant="secondary"
                         size="sm"
@@ -228,6 +243,14 @@ export function MailSettingsPage() {
                       >
                         {t('mail.syncNow')}
                       </Button>
+                      <Button
+                        variant="danger"
+                        size="sm"
+                        onClick={() => handleDeleteAccount(acc.id)}
+                        data-testid={`delete-account-${acc.id}`}
+                      >
+                        {t('mail.deleteAccount')}
+                      </Button>
                     </div>
                   </div>
                 </Card>