feat: folder mapping UI on account add (probe + map modal)

ADD now probes both connections, lists folders on each side, and opens a
mapping modal to route source->destination folders (e.g. Спам -> Spam) so we
append into the existing folder instead of creating a duplicate.

- store: SetTaskFolderMapping (+ round-trip test)
- httpapi: POST /tasks/{id}/probe (test both, return folder lists),
  PUT /tasks/{id}/folder-mapping
- web: FolderMappingModal (reuses Modal, size=lg), submitAccount probes then
  opens the modal; confirm creates the account and saves the task mapping

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01MMHQTtnQtQqL8muAXHr9kd
This commit is contained in:
2026-07-02 14:39:31 +07:00
co-authored by Claude Opus 4.8
parent 331497aff4
commit 0bb584fe10
9 changed files with 329 additions and 7 deletions
+3 -2
View File
@@ -6,6 +6,7 @@ type ModalProps = {
title?: string
onClose: () => void
children: ReactNode
size?: 'md' | 'lg'
}
function focusable(root: HTMLElement | null): HTMLElement[] {
@@ -19,7 +20,7 @@ function focusable(root: HTMLElement | null): HTMLElement[] {
// Reusable modal shell: portal to <body>, ESC to close, Tab focus-trap,
// focus-on-open (prefers [data-modal-autofocus]), focus restore on close,
// click-on-overlay to close, and body scroll lock while open.
export function Modal({ open, title, onClose, children }: ModalProps) {
export function Modal({ open, title, onClose, children, size = 'md' }: ModalProps) {
const dialogRef = useRef<HTMLDivElement>(null)
const prevFocus = useRef<HTMLElement | null>(null)
const onCloseRef = useRef(onClose)
@@ -78,7 +79,7 @@ export function Modal({ open, title, onClose, children }: ModalProps) {
if (e.target === e.currentTarget) onClose()
}}
>
<div className="modal-dialog" role="dialog" aria-modal="true" aria-label={title} ref={dialogRef} tabIndex={-1}>
<div className={`modal-dialog modal-${size}`} role="dialog" aria-modal="true" aria-label={title} ref={dialogRef} tabIndex={-1}>
{title && <div className="modal-title">{title}</div>}
{children}
</div>