feat: mail attachment support — sync, display, download, upload

frontend/src/components/mail/ComposeModal.tsx

@@ -11,6 +11,7 @@ import { Input } from '@/components/ui/Input';
 import { Select } from '@/components/ui/Select';
 import { TemplatePicker } from './TemplatePicker';
 import type { Mail, MailSignature, SendMailPayload, ReplyPayload, ForwardPayload } from '@/api/mail';
+import { uploadAttachment, type UploadedAttachment } from '@/api/mail';
 
 export type ComposeMode = 'new' | 'reply' | 'forward';
 
@@ -46,6 +47,9 @@ export function ComposeModal({
   const [sending, setSending] = useState(false);
   const [selectedSignatureId, setSelectedSignatureId] = useState('');
   const [showTemplatePicker, setShowTemplatePicker] = useState(false);
+  const [attachments, setAttachments] = useState<UploadedAttachment[]>([]);
+  const [uploadingFile, setUploadingFile] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
     if (!open) return;
@@ -63,6 +67,7 @@ export function ComposeModal({
       setBcc('');
       setSubject('');
       setBody('');
+      setAttachments([]);
     }
   }, [open, mode, replyToMail, forwardMail, t]);
 
@@ -102,6 +107,41 @@ export function ComposeModal({
     setShowTemplatePicker(false);
   }, []);
 
+  const handleFileSelect = useCallback(async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = e.target.files;
+    if (!files || files.length === 0) return;
+    setUploadingFile(true);
+    try {
+      for (let i = 0; i < files.length; i++) {
+        const file = files[i];
+        if (file.size > 25 * 1024 * 1024) {
+          alert(`${file.name} exceeds 25 MB limit`);
+          continue;
+        }
+        const uploaded = await uploadAttachment(file);
+        setAttachments((prev) => [...prev, uploaded]);
+      }
+    } catch (err) {
+      console.error('Attachment upload failed:', err);
+      alert('Failed to upload attachment');
+    } finally {
+      setUploadingFile(false);
+      if (fileInputRef.current) {
+        fileInputRef.current.value = '';
+      }
+    }
+  }, []);
+
+  const handleRemoveAttachment = useCallback((attId: string) => {
+    setAttachments((prev) => prev.filter((a) => a.id !== attId));
+  }, []);
+
+  const formatBytes = (bytes: number): string => {
+    if (bytes < 1024) return `${bytes} B`;
+    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+  };
+
   const handleSend = useCallback(async () => {
     if (!to.trim()) return;
     setSending(true);
@@ -139,14 +179,16 @@ export function ComposeModal({
           body,
           is_html: true,
           signature_id: selectedSignatureId || null,
+          attachments: attachments.map((a) => a.id),
         };
         await onSend(sendPayload, 'new');
       }
+      setAttachments([]);
       onClose();
     } finally {
       setSending(false);
     }
-  }, [to, cc, bcc, subject, body, mode, replyToMail, forwardMail, accountId, selectedSignatureId, onSend, onClose]);
+  }, [to, cc, bcc, subject, body, mode, replyToMail, forwardMail, accountId, selectedSignatureId, attachments, onSend, onClose]);
 
   const title = mode === 'reply' ? t('mail.reply') : mode === 'forward' ? t('mail.forward') : t('mail.compose');
 
@@ -266,6 +308,61 @@ export function ComposeModal({
           />
         </div>
 
+        {/* Attachments */}
+        <div data-testid="compose-attachments">
+          <label className="block text-sm font-medium text-secondary-700 mb-1">{t('mail.attachments')}</label>
+          <div className="flex items-center gap-2">
+            <input
+              ref={fileInputRef}
+              type="file"
+              multiple
+              onChange={handleFileSelect}
+              className="hidden"
+              data-testid="compose-file-input"
+            />
+            <Button
+              variant="secondary"
+              size="sm"
+              type="button"
+              onClick={() => fileInputRef.current?.click()}
+              isLoading={uploadingFile}
+              icon={
+                <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" />
+                </svg>
+              }
+            >
+              {t('mail.addAttachment')}
+            </Button>
+            <span className="text-xs text-secondary-400">Max 25 MB per file</span>
+          </div>
+          {attachments.length > 0 && (
+            <ul className="mt-2 space-y-1">
+              {attachments.map((att) => (
+                <li key={att.id} className="flex items-center gap-3 p-2 rounded-md bg-secondary-50">
+                  <svg className="w-5 h-5 text-secondary-400 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+                  </svg>
+                  <div className="flex-1 min-w-0">
+                    <p className="text-sm text-secondary-800 truncate">{att.filename}</p>
+                    <p className="text-xs text-secondary-400">{formatBytes(att.size_bytes)}</p>
+                  </div>
+                  <button
+                    type="button"
+                    onClick={() => handleRemoveAttachment(att.id)}
+                    className="p-1 rounded hover:bg-secondary-200 text-secondary-500"
+                    aria-label={t('common.remove')}
+                  >
+                    <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                    </svg>
+                  </button>
+                </li>
+              ))}
+            </ul>
+          )}
+        </div>
+
         {/* Signature */}
         <Select
           label={t('mail.signature')}

frontend/src/components/mail/MailDetail.tsx

@@ -200,7 +200,7 @@ export function MailDetail({
                 </svg>
                 <div className="flex-1 min-w-0">
                   <p className="text-sm text-secondary-800 truncate">{att.filename}</p>
-                  <p className="text-xs text-secondary-400">{formatBytes(att.size)}</p>
+                  <p className="text-xs text-secondary-400">{formatBytes(att.size_bytes)}</p>
                 </div>
                 <Button
                   variant="secondary"