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
2026-07-16 09:40:59 +02:00
parent 560e4ac69d
commit 2a80aeb0af
6 changed files with 92 additions and 39 deletions
@@ -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>
@@ -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,13 +208,15 @@ export function MailList({
        ))}
      </ul>
      {totalPages > 1 && (
-        <Pagination
-          currentPage={currentPage}
-          totalPages={totalPages}
-          total={total}
-          pageSize={pageSize}
-          onPageChange={onPageChange}
-        />
+        <div className="flex-shrink-0">
+          <Pagination
+            currentPage={currentPage}
+            totalPages={totalPages}
+            total={total}
+            pageSize={pageSize}
+            onPageChange={onPageChange}
+          />
+        </div>
      )}
    </div>
  );
@@ -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>