feat: mail UI improvements - folder mapping, display name, resize perf, list header
- Add configurable folder mapping (sent/drafts/spam/trash) per account - Migration 0005_folder_mapping.sql with 4 new columns on mail_accounts - Backend: send_mail uses account.sent_folder_imap_name if set - Backend: _build_folder_hierarchy respects folder_mapping for is_standard - Frontend: MailSettings shows folder mapping editor per account - Frontend: MailSettings allows editing display_name for existing accounts - Frontend: MailFolderTree shows display_name || email, removes MailIcon - Frontend: ResizablePanel isDragging state with contain:strict + pointer-events:none - Frontend: MailList merges select-all and sort controls into one line
This commit is contained in:
Agent Zero
@@ -207,8 +207,7 @@ function AccountNode({
|
||||
data-testid={`account-${account.id}`}
|
||||
>
|
||||
<ChevronIcon expanded={expanded} />
|
||||
<MailIcon />
|
||||
<span className="flex-1 truncate text-left">{account.email}</span>
|
||||
<span className="flex-1 truncate text-left">{account.display_name || account.email}</span>
|
||||
</button>
|
||||
{expanded && (
|
||||
<div role="group" className="ml-2">
|
||||
|
||||
@@ -91,56 +91,57 @@ export function MailList({
|
||||
|
||||
return (
|
||||
<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 flex-shrink-0">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={allSelected}
|
||||
onChange={onSelectAll}
|
||||
className="w-4 h-4 rounded border-secondary-300 text-primary-600 focus:ring-primary-500"
|
||||
aria-label={t('mail.selectAll')}
|
||||
data-testid="mail-select-all"
|
||||
/>
|
||||
{selectedMailIds.size > 0 && (
|
||||
<span className="text-xs text-secondary-600">
|
||||
{t('mail.selectedCount', { count: selectedMailIds.size })}
|
||||
</span>
|
||||
{/* Select-all + Sort header in one row */}
|
||||
<div className="flex items-center justify-between gap-2 px-3 py-2 md:px-4 md:py-2 border-b border-secondary-200 bg-secondary-50 flex-shrink-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={allSelected}
|
||||
onChange={onSelectAll}
|
||||
className="w-4 h-4 rounded border-secondary-300 text-primary-600 focus:ring-primary-500"
|
||||
aria-label={t('mail.selectAll')}
|
||||
data-testid="mail-select-all"
|
||||
/>
|
||||
{selectedMailIds.size > 0 && (
|
||||
<span className="text-xs text-secondary-600">
|
||||
{t('mail.selectedCount', { count: selectedMailIds.size })}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{onSortChange && (
|
||||
<div className="flex items-center gap-2" data-testid="mail-sort-bar">
|
||||
<label htmlFor="mail-sort-by" className="text-xs text-secondary-600">
|
||||
{t('mail.sortBy')}:
|
||||
</label>
|
||||
<select
|
||||
id="mail-sort-by"
|
||||
value={sortBy}
|
||||
onChange={handleSortFieldChange}
|
||||
className="text-xs rounded border border-secondary-300 bg-white px-1.5 py-0.5 text-secondary-700 focus:outline-none focus:ring-1 focus:ring-primary-500"
|
||||
aria-label={t('mail.sortBy')}
|
||||
data-testid="mail-sort-by"
|
||||
>
|
||||
<option value="date">{t('mail.sortDate')}</option>
|
||||
<option value="from">{t('mail.sortFrom')}</option>
|
||||
<option value="subject">{t('mail.sortSubject')}</option>
|
||||
</select>
|
||||
<button
|
||||
onClick={handleSortOrderToggle}
|
||||
className="inline-flex items-center gap-1 text-xs rounded border border-secondary-300 bg-white px-1.5 py-0.5 text-secondary-700 hover:bg-secondary-100 focus:outline-none focus:ring-1 focus:ring-primary-500"
|
||||
aria-label={sortOrder === 'asc' ? t('mail.sortAsc') : t('mail.sortDesc')}
|
||||
title={sortOrder === 'asc' ? t('mail.sortAsc') : t('mail.sortDesc')}
|
||||
data-testid="mail-sort-order"
|
||||
>
|
||||
<svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
|
||||
{sortOrder === 'asc'
|
||||
? <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 15l7-7 7 7" />
|
||||
: <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />}
|
||||
</svg>
|
||||
<span>{sortOrder === 'asc' ? t('mail.sortAsc') : t('mail.sortDesc')}</span>
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</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 flex-shrink-0" data-testid="mail-sort-bar">
|
||||
<label htmlFor="mail-sort-by" className="text-xs text-secondary-600">
|
||||
{t('mail.sortBy')}:
|
||||
</label>
|
||||
<select
|
||||
id="mail-sort-by"
|
||||
value={sortBy}
|
||||
onChange={handleSortFieldChange}
|
||||
className="text-xs rounded border border-secondary-300 bg-white px-1.5 py-0.5 text-secondary-700 focus:outline-none focus:ring-1 focus:ring-primary-500"
|
||||
aria-label={t('mail.sortBy')}
|
||||
data-testid="mail-sort-by"
|
||||
>
|
||||
<option value="date">{t('mail.sortDate')}</option>
|
||||
<option value="from">{t('mail.sortFrom')}</option>
|
||||
<option value="subject">{t('mail.sortSubject')}</option>
|
||||
</select>
|
||||
<button
|
||||
onClick={handleSortOrderToggle}
|
||||
className="inline-flex items-center gap-1 text-xs rounded border border-secondary-300 bg-white px-1.5 py-0.5 text-secondary-700 hover:bg-secondary-100 focus:outline-none focus:ring-1 focus:ring-primary-500"
|
||||
aria-label={sortOrder === 'asc' ? t('mail.sortAsc') : t('mail.sortDesc')}
|
||||
title={sortOrder === 'asc' ? t('mail.sortAsc') : t('mail.sortDesc')}
|
||||
data-testid="mail-sort-order"
|
||||
>
|
||||
<svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
|
||||
{sortOrder === 'asc'
|
||||
? <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 15l7-7 7 7" />
|
||||
: <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />}
|
||||
</svg>
|
||||
<span>{sortOrder === 'asc' ? t('mail.sortAsc') : t('mail.sortDesc')}</span>
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
{/* Mail list — scrolls, pagination stays fixed */}
|
||||
<ul className="divide-y divide-secondary-100 flex-1 overflow-y-auto" role="list">
|
||||
{mails.map((mail) => (
|
||||
|
||||
@@ -38,6 +38,7 @@ export function ResizablePanel({
|
||||
...rest
|
||||
}: ResizablePanelProps) {
|
||||
const [width, setWidth] = useState(initialWidth);
|
||||
const [isDragging, setIsDragging] = useState(false);
|
||||
const isResizing = useRef(false);
|
||||
const startX = useRef(0);
|
||||
const startWidth = useRef(0);
|
||||
@@ -47,6 +48,7 @@ export function ResizablePanel({
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
isResizing.current = true;
|
||||
setIsDragging(true);
|
||||
startX.current = e.clientX;
|
||||
startWidth.current = width;
|
||||
document.body.style.cursor = 'col-resize';
|
||||
@@ -66,6 +68,7 @@ export function ResizablePanel({
|
||||
const handleMouseUp = () => {
|
||||
if (isResizing.current) {
|
||||
isResizing.current = false;
|
||||
setIsDragging(false);
|
||||
document.body.style.cursor = '';
|
||||
document.body.style.userSelect = '';
|
||||
}
|
||||
@@ -90,7 +93,14 @@ export function ResizablePanel({
|
||||
data-testid={rest['data-testid']}
|
||||
>
|
||||
{/* Inner scrollable content area — scrollbar stays inside, never overlaps handle */}
|
||||
<div className="flex-1 overflow-y-auto overflow-x-hidden min-h-0">
|
||||
<div
|
||||
className="flex-1 overflow-y-auto overflow-x-hidden min-h-0"
|
||||
style={{
|
||||
contain: 'strict',
|
||||
pointerEvents: isDragging ? 'none' : 'auto',
|
||||
willChange: isDragging ? 'width' : undefined,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
{resizable && (
|
||||
|
||||
Reference in New Issue
Block a user