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

frontend/src/components/mail/MailFolderTree.tsx

@@ -11,6 +11,36 @@ import type { MailAccount, MailFolder } from '@/api/mail';
 import { Badge } from '@/components/ui/Badge';
 import { EmptyState } from '@/components/ui/EmptyState';
 
+/**
+ * Map IMAP folder names to German display names.
+ */
+const FOLDER_NAME_MAP: Record<string, string> = {
+  INBOX: 'Posteingang',
+  Sent: 'Gesendet',
+  Drafts: 'Entwürfe',
+  Spam: 'Spam',
+  Junk: 'Spam',
+  Trash: 'Papierkorb',
+  'Sent Items': 'Gesendet',
+  'Sent Mail': 'Gesendet',
+  'Draft': 'Entwürfe',
+  'Deleted': 'Papierkorb',
+  'Deleted Items': 'Papierkorb',
+  'Junk Email': 'Spam',
+  'Junk E-mail': 'Spam',
+};
+
+/**
+ * Get the display name for a folder — uses the German name from the map
+ * if the imap_name matches a known folder, otherwise uses the stored name.
+ */
+function getFolderDisplayName(folder: MailFolder): string {
+  if (folder.imap_name && FOLDER_NAME_MAP[folder.imap_name]) {
+    return FOLDER_NAME_MAP[folder.imap_name];
+  }
+  return folder.name;
+}
+
 export interface MailFolderTreeProps {
   accounts: MailAccount[];
   folders: MailFolder[];
@@ -90,7 +120,7 @@ function FolderNode({
   const hasChildren = folder.children && folder.children.length > 0;
 
   return (
-    <div role="treeitem" aria-selected={isSelected} aria-label={folder.name}>
+    <div role="treeitem" aria-selected={isSelected} aria-label={getFolderDisplayName(folder)}>
       <div className="flex items-center" style={{ paddingLeft: `${depth * 12}px` }}>
         {hasChildren ? (
           <button
@@ -119,7 +149,7 @@ function FolderNode({
           data-testid={`folder-${folder.id}`}
         >
           <FolderIcon />
-          <span className="flex-1 truncate text-left">{folder.name}</span>
+          <span className="flex-1 truncate text-left">{getFolderDisplayName(folder)}</span>
           {folder.unread_count > 0 && (
             <Badge variant="primary" className="text-xs">{folder.unread_count}</Badge>
           )}

frontend/src/components/ui/ResizablePanel.tsx

@@ -84,7 +84,8 @@ export function ResizablePanel({
       {children}
       {resizable && (
         <div
-          className="absolute top-0 right-0 h-full w-1 cursor-col-resize bg-transparent hover:bg-primary-300 active:bg-primary-400 transition-colors z-10"
+          className="absolute top-0 right-0 h-full w-1.5 cursor-col-resize bg-transparent hover:bg-primary-300 active:bg-primary-400 transition-colors z-50 pointer-events-auto"
+          style={{ marginRight: '-3px' }}
           onMouseDown={handleMouseDown}
           data-testid="resize-handle"
           role="separator"