Leopoldadmin/leocrm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 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
This commit is contained in:
Agent Zero
2026-07-16 09:40:59 +02:00
parent 560e4ac69d
commit 2a80aeb0af
6 changed files with 92 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/ui/Pagination.tsx
+13 -13
View File
@@ -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>