fix(mail): sync Object error, MIME subject decoding, sticky compact pagination

- Fix sync error: backend returns {synced, error?} not {success, synced_count}; frontend now checks error field
- Decode MIME encoded-words (=?UTF-8?Q?...?=) in backend during IMAP sync for subject/from/to/cc headers
- Add frontend decodeMimeHeader() utility for already-stored encoded subjects (MailList + MailDetail)
- Make pagination sticky at bottom of mail list (flex-col h-full, ul scrolls, pagination flex-shrink-0)
- Make pagination compact: smaller padding (px-1.5 py-0.5), text-xs, smaller icons, tighter spacing

app/plugins/builtins/mail/services.py

@@ -707,11 +707,22 @@ async def imap_sync_account(
                             else:
                                 body_text = decoded
 
+                    from email.header import decode_header, make_header
+
+                    def _decode_mime_header(value: str) -> str:
+                        """Decode MIME encoded-words (=?UTF-8?Q?...?=) to readable text."""
+                        if not value:
+                            return ""
+                        try:
+                            return str(make_header(decode_header(value)))
+                        except Exception:
+                            return value
+
                     message_id = msg.get("Message-ID", make_msgid())
-                    subject = msg.get("Subject", "")
-                    from_addr = msg.get("From", "")
-                    to_addrs = msg.get("To", "")
-                    cc_addrs = msg.get("Cc", "")
+                    subject = _decode_mime_header(msg.get("Subject", ""))
+                    from_addr = _decode_mime_header(msg.get("From", ""))
+                    to_addrs = _decode_mime_header(msg.get("To", ""))
+                    cc_addrs = _decode_mime_header(msg.get("Cc", ""))
                     refs = msg.get("References", "")
                     in_reply_to = msg.get("In-Reply-To")
                     date_str = msg.get("Date", "")

frontend/src/api/mail.ts

@@ -381,8 +381,40 @@ export function testConnection(accountId: string): Promise<{ success: boolean; m
   return apiPost<{ success: boolean; message: string }>(`/mail/accounts/${accountId}/test-connection`);
 }
 
-export function triggerSync(accountId: string): Promise<{ success: boolean; synced_count: number }> {
-  return apiPost<{ success: boolean; synced_count: number }>(`/mail/accounts/${accountId}/sync`);
+export function triggerSync(accountId: string): Promise<{ synced: number; error?: string }> {
+  return apiPost<{ synced: number; error?: string }>(`/mail/accounts/${accountId}/sync`);
+}
+
+/**
+ * Decode MIME encoded-words (=?UTF-8?Q?...?=) to readable text.
+ * Used for mail subjects/from names that were stored before backend decoding was added.
+ */
+export function decodeMimeHeader(value: string | undefined | null): string {
+  if (!value) return '';
+  // Check if value contains MIME encoded-words
+  if (!value.includes('=?')) return value;
+  try {
+    // Decode all encoded-words in the string
+    return value.replace(/=\?([^?]+)\?([BQ])\?([^?]*)\?=/gi, (_match, _charset, encoding, encoded) => {
+      try {
+        if (encoding.toUpperCase() === 'B') {
+          // Base64 decode
+          const decoded = atob(encoded);
+          return decodeURIComponent(escape(decoded));
+        } else {
+          // Q encoding: replace _ with space, then decode =XX hex sequences
+          const qDecoded = encoded.replace(/_/g, ' ').replace(/=([0-9A-F]{2})/gi, (_m, hex) => {
+            return String.fromCharCode(parseInt(hex, 16));
+          });
+          return decodeURIComponent(escape(qDecoded));
+        }
+      } catch {
+        return _match;
+      }
+    });
+  } catch {
+    return value;
+  }
 }
 
 // ─── Folders ────────────────────────────────────────────────────────────────

frontend/src/components/mail/MailDetail.tsx

@@ -7,6 +7,7 @@
 import React, { useMemo, useRef, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import type { Mail, MailAttachment } from '@/api/mail';
+import { decodeMimeHeader } from '@/api/mail';
 import { Button } from '@/components/ui/Button';
 import { EmptyState } from '@/components/ui/EmptyState';
 
@@ -97,7 +98,7 @@ export function MailDetail({
       {/* Headers */}
       <div className="px-3 py-2 md:px-4 md:py-3 border-b border-secondary-200" data-testid="mail-detail-headers">
         <div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-2 sm:gap-4">
-          <h2 className="text-base md:text-lg font-semibold text-secondary-900 flex-1">{mail.subject || t('mail.noSubject')}</h2>
+          <h2 className="text-base md:text-lg font-semibold text-secondary-900 flex-1">{decodeMimeHeader(mail.subject) || t('mail.noSubject')}</h2>
           {mail.labels && mail.labels.length > 0 && (
             <div className="flex gap-1 flex-shrink-0">
               {mail.labels.map((label) => (
@@ -111,7 +112,7 @@ export function MailDetail({
         <div className="mt-2 space-y-1 text-xs md:text-sm text-secondary-600">
           <div className="flex flex-col sm:flex-row sm:gap-2">
             <span className="font-medium text-secondary-500 flex-shrink-0">{t('mail.from')}:</span>
-            <span className="break-words">{mail.from_name ? `${mail.from_name} <${mail.from_address}>` : mail.from_address}</span>
+            <span className="break-words">{decodeMimeHeader(mail.from_name) ? `${decodeMimeHeader(mail.from_name)} <${mail.from_address}>` : mail.from_address}</span>
           </div>
           <div className="flex flex-col sm:flex-row sm:gap-2">
             <span className="font-medium text-secondary-500 flex-shrink-0">{t('mail.to')}:</span>

frontend/src/components/mail/MailList.tsx

@@ -7,6 +7,7 @@ import React from 'react';
 import clsx from 'clsx';
 import { useTranslation } from 'react-i18next';
 import type { Mail } from '@/api/mail';
+import { decodeMimeHeader } from '@/api/mail';
 import { EmptyState } from '@/components/ui/EmptyState';
 import { Pagination } from '@/components/ui/Pagination';
 
@@ -89,9 +90,9 @@ export function MailList({
   }
 
   return (
-    <div data-testid="mail-list" role="listbox" aria-label={t('mail.selectMail')}>
+    <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">
+      <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}
@@ -108,7 +109,7 @@ export function MailList({
       </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" data-testid="mail-sort-bar">
+        <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>
@@ -140,7 +141,8 @@ export function MailList({
           </button>
         </div>
       )}
-      <ul className="divide-y divide-secondary-100" role="list">
+      {/* Mail list — scrolls, pagination stays fixed */}
+      <ul className="divide-y divide-secondary-100 flex-1 overflow-y-auto" role="list">
         {mails.map((mail) => (
           <li key={mail.id} role="listitem" className={clsx(selectedMailIds.has(mail.id) && 'bg-primary-50')}>
             <div className="flex items-start gap-2">
@@ -182,12 +184,12 @@ export function MailList({
                   <div className="flex-1 min-w-0">
                     <div className="flex items-center justify-between gap-2">
                       <span className={clsx('text-sm truncate', !mail.is_seen ? 'text-secondary-900 font-semibold' : 'text-secondary-700')}>
-                        {mail.from_name || mail.from_address}
+                        {decodeMimeHeader(mail.from_name) || mail.from_address}
                       </span>
                       <span className="text-xs text-secondary-400 flex-shrink-0">{formatDate(mail.date)}</span>
                     </div>
                     <p className={clsx('text-xs md:text-sm truncate mt-0.5', !mail.is_seen ? 'text-secondary-800' : 'text-secondary-600')}>
-                      {mail.subject || t('mail.noSubject')}
+                      {decodeMimeHeader(mail.subject) || t('mail.noSubject')}
                     </p>
                     {mail.labels && mail.labels.length > 0 && (
                       <div className="flex gap-1 mt-1">
@@ -206,6 +208,7 @@ export function MailList({
         ))}
       </ul>
       {totalPages > 1 && (
+        <div className="flex-shrink-0">
           <Pagination
             currentPage={currentPage}
             totalPages={totalPages}
@@ -213,6 +216,7 @@ export function MailList({
             pageSize={pageSize}
             onPageChange={onPageChange}
           />
+        </div>
       )}
     </div>
   );

frontend/src/components/ui/Pagination.tsx

@@ -30,18 +30,18 @@ export function Pagination({ currentPage, totalPages, total, pageSize, onPageCha
   if (totalPages <= 1) return null;
 
   return (
-    <nav className="flex items-center justify-between px-6 py-3 border-t border-secondary-200" aria-label="Pagination">
-      <div className="text-sm text-secondary-600">
-        <span>{start}–{end}</span> <span>{t('table.of')}</span> <span>{total}</span> <span>{t('table.results')}</span>
+    <nav className="flex items-center justify-between px-3 py-1.5 border-t border-secondary-200 bg-white" aria-label="Pagination">
+      <div className="text-xs text-secondary-500">
+        <span>{start}–{end}</span> <span>{t('table.of')}</span> <span>{total}</span>
       </div>
-      <div className="flex items-center gap-1">
+      <div className="flex items-center gap-0.5">
         <button
           onClick={() => onPageChange(currentPage - 1)}
           disabled={currentPage <= 1}
-          className="px-3 py-1.5 text-sm rounded-md border border-secondary-300 hover:bg-secondary-50 disabled:opacity-50 disabled:cursor-not-allowed min-h-touch min-w-touch flex items-center justify-center focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500"
+          className="px-1.5 py-0.5 text-xs rounded border border-secondary-300 hover:bg-secondary-50 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center focus:outline-none focus-visible:ring-1 focus-visible:ring-primary-500"
           aria-label={t('pagination.previous')}
         >
-          <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+          <svg className="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
           </svg>
         </button>
@@ -49,12 +49,12 @@ export function Pagination({ currentPage, totalPages, total, pageSize, onPageCha
           <>
             <button
               onClick={() => onPageChange(1)}
-              className="px-3 py-1.5 text-sm rounded-md border border-secondary-300 hover:bg-secondary-50 min-h-touch min-w-touch focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500"
+              className="px-1.5 py-0.5 text-xs rounded border border-secondary-300 hover:bg-secondary-50 focus:outline-none focus-visible:ring-1 focus-visible:ring-primary-500"
               aria-label={t('pagination.first')}
             >
               1
             </button>
-            {startPage > 2 && <span className="px-1 text-secondary-400" aria-hidden="true">…</span>}
+            {startPage > 2 && <span className="px-0.5 text-secondary-400" aria-hidden="true">…</span>}
           </>
         )}
         {pages.map((page) => (
@@ -62,7 +62,7 @@ export function Pagination({ currentPage, totalPages, total, pageSize, onPageCha
             key={page}
             onClick={() => onPageChange(page)}
             className={clsx(
-              'px-3 py-1.5 text-sm rounded-md border min-h-touch min-w-touch focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500',
+              'px-1.5 py-0.5 text-xs rounded border focus:outline-none focus-visible:ring-1 focus-visible:ring-primary-500',
               page === currentPage
                 ? 'border-primary-500 bg-primary-50 text-primary-700 font-semibold'
                 : 'border-secondary-300 hover:bg-secondary-50'
@@ -75,10 +75,10 @@ export function Pagination({ currentPage, totalPages, total, pageSize, onPageCha
         ))}
         {endPage < totalPages && (
           <>
-            {endPage < totalPages - 1 && <span className="px-1 text-secondary-400" aria-hidden="true">…</span>}
+            {endPage < totalPages - 1 && <span className="px-0.5 text-secondary-400" aria-hidden="true">…</span>}
             <button
               onClick={() => onPageChange(totalPages)}
-              className="px-3 py-1.5 text-sm rounded-md border border-secondary-300 hover:bg-secondary-50 min-h-touch min-w-touch focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500"
+              className="px-1.5 py-0.5 text-xs rounded border border-secondary-300 hover:bg-secondary-50 focus:outline-none focus-visible:ring-1 focus-visible:ring-primary-500"
               aria-label={t('pagination.last')}
             >
               {totalPages}
@@ -88,10 +88,10 @@ export function Pagination({ currentPage, totalPages, total, pageSize, onPageCha
         <button
           onClick={() => onPageChange(currentPage + 1)}
           disabled={currentPage >= totalPages}
-          className="px-3 py-1.5 text-sm rounded-md border border-secondary-300 hover:bg-secondary-50 disabled:opacity-50 disabled:cursor-not-allowed min-h-touch min-w-touch flex items-center justify-center focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500"
+          className="px-1.5 py-0.5 text-xs rounded border border-secondary-300 hover:bg-secondary-50 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center focus:outline-none focus-visible:ring-1 focus-visible:ring-primary-500"
           aria-label={t('pagination.next')}
         >
-          <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+          <svg className="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
           </svg>
         </button>

frontend/src/pages/Mail.tsx

@@ -599,11 +599,16 @@ export function MailPage() {
           if (!selectedAccountId) return;
           setIsSyncing(true);
           try {
-            await triggerSync(selectedAccountId);
+            const result = await triggerSync(selectedAccountId);
+            if ((result as any)?.error) {
+              toast.error((result as any).error);
+            } else {
               await loadMails();
               toast.success(t('mail.syncSuccess'));
-          } catch (err) {
-            toast.error(err instanceof Error ? err.message : String(err));
+            }
+          } catch (err: any) {
+            const msg = err?.message || err?.detail || (typeof err === 'string' ? err : 'Sync failed');
+            toast.error(msg);
           } finally {
             setIsSyncing(false);
           }