Phase 6.6: Mail-Settings-Forms on RHF + Zod

- MailSettings account form: RHF+Zod (email valid, password required, imap/smtp host required, ports numeric)
- SignatureManager: RHF+Zod (name required, body_html, is_default)
- RuleEditor: RHF+Zod (name required, priority numeric)
- LabelManager: RHF+Zod (name required, color optional)
- VacationResponder: RHF+Zod (enabled, dates with end>start validation, subject, body)
- Error display under each field
- Preserved all existing functionality: CRUD, templates, variables
- Added 2 validation tests for MailSettings account form

frontend/src/components/mail/RuleEditor.tsx

@@ -4,6 +4,9 @@
 
 import React, { useState, useEffect, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
 import { Button } from '@/components/ui/Button';
 import { Input } from '@/components/ui/Input';
 import { Select } from '@/components/ui/Select';
@@ -47,13 +50,23 @@ export function RuleEditor({ accountId }: { accountId: string }) {
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const [showForm, setShowForm] = useState(false);
-  const [name, setName] = useState('');
-  const [priority, setPriority] = useState(1);
   const [conditions, setConditions] = useState<RuleCondition[]>([{ type: 'from_contains', value: '' }]);
   const [actions, setActions] = useState<RuleAction[]>([{ type: 'mark_as_read', value: '' }]);
   const [saving, setSaving] = useState(false);
   const [deleteTarget, setDeleteTarget] = useState<MailRule | null>(null);
 
+  // ── Rule form (RHF + Zod) ──
+  const ruleSchema = z.object({
+    name: z.string().min(1, 'required'),
+    priority: z.coerce.number().int().min(1, 'invalidNumber').default(1),
+  });
+  type RuleFormData = z.infer<typeof ruleSchema>;
+
+  const { register: registerRule, handleSubmit: handleSubmitRule, reset: resetRule, formState: { errors: ruleErrors } } = useForm<RuleFormData>({
+    resolver: zodResolver(ruleSchema),
+    defaultValues: { name: '', priority: 1 },
+  });
+
   const load = useCallback(() => {
     setLoading(true);
     fetchRules()
@@ -93,14 +106,13 @@ export function RuleEditor({ accountId }: { accountId: string }) {
     setActions((prev) => prev.filter((_, i) => i !== index));
   };
 
-  const handleSave = useCallback(async () => {
-    if (!name.trim()) return;
+  const handleSave = useCallback(async (data: RuleFormData) => {
     setSaving(true);
     try {
       const rule = await createRule({
-        name,
+        name: data.name,
         account_id: accountId,
-        priority,
+        priority: data.priority,
         is_active: true,
         conditions,
         actions,
@@ -108,8 +120,7 @@ export function RuleEditor({ accountId }: { accountId: string }) {
       setRules((prev) => [...prev, rule].sort((a, b) => a.priority - b.priority));
       toast.success(t('mail.ruleCreated'));
       setShowForm(false);
-      setName('');
-      setPriority(1);
+      resetRule({ name: '', priority: 1 });
       setConditions([{ type: 'from_contains', value: '' }]);
       setActions([{ type: 'mark_as_read', value: '' }]);
     } catch (err) {
@@ -117,7 +128,7 @@ export function RuleEditor({ accountId }: { accountId: string }) {
     } finally {
       setSaving(false);
     }
-  }, [name, accountId, priority, conditions, actions, toast, t]);
+  }, [accountId, conditions, actions, toast, t, resetRule]);
 
   const handleDelete = useCallback(async () => {
     if (!deleteTarget) return;
@@ -156,19 +167,19 @@ export function RuleEditor({ accountId }: { accountId: string }) {
 
       {showForm && (
         <Card className="mb-4" data-testid="rule-form">
-          <div className="space-y-4">
+          <form onSubmit={handleSubmitRule(handleSave)} className="space-y-4">
             <Input
               label={t('mail.ruleName')}
-              value={name}
-              onChange={(e) => setName(e.target.value)}
+              {...registerRule('name')}
+              error={ruleErrors.name?.message === 'required' ? t('validation.required') : undefined}
               placeholder={t('mail.ruleName')}
               required
             />
             <Input
               label={t('mail.rulePriority')}
               type="number"
-              value={String(priority)}
-              onChange={(e) => setPriority(Number(e.target.value))}
+              {...registerRule('priority')}
+              error={ruleErrors.priority?.message === 'invalidNumber' ? t('validation.invalidNumber', 'Invalid number') : undefined}
             />
 
             {/* Conditions */}
@@ -226,10 +237,10 @@ export function RuleEditor({ accountId }: { accountId: string }) {
             </div>
 
             <div className="flex gap-2">
-              <Button onClick={handleSave} isLoading={saving} size="sm">{t('common.save')}</Button>
-              <Button variant="secondary" size="sm" onClick={() => setShowForm(false)}>{t('common.cancel')}</Button>
+              <Button type="submit" isLoading={saving} size="sm">{t('common.save')}</Button>
+              <Button variant="secondary" size="sm" type="button" onClick={() => setShowForm(false)}>{t('common.cancel')}</Button>
             </div>
-          </div>
+          </form>
         </Card>
       )}