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/LabelManager.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 { Card } from '@/components/ui/Card';
@@ -30,11 +33,23 @@ export function LabelManager() {
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const [showForm, setShowForm] = useState(false);
-  const [name, setName] = useState('');
-  const [color, setColor] = useState(PRESET_COLORS[0]);
   const [saving, setSaving] = useState(false);
   const [deleteTarget, setDeleteTarget] = useState<MailLabel | null>(null);
 
+  // ── Label form (RHF + Zod) ──
+  const labelSchema = z.object({
+    name: z.string().min(1, 'required'),
+    color: z.string().optional().default(PRESET_COLORS[0]),
+  });
+  type LabelFormData = z.infer<typeof labelSchema>;
+
+  const { register: registerLabel, handleSubmit: handleSubmitLabel, reset: resetLabel, watch: watchLabel, setValue: setLabelValue, formState: { errors: labelErrors } } = useForm<LabelFormData>({
+    resolver: zodResolver(labelSchema),
+    defaultValues: { name: '', color: PRESET_COLORS[0] },
+  });
+
+  const colorValue = watchLabel('color');
+
   const load = useCallback(() => {
     setLoading(true);
     fetchLabels()
@@ -50,22 +65,20 @@ export function LabelManager() {
 
   useEffect(() => { load(); }, [load]);
 
-  const handleSave = useCallback(async () => {
-    if (!name.trim()) return;
+  const handleSave = useCallback(async (data: LabelFormData) => {
     setSaving(true);
     try {
-      const label = await createLabel({ name, color });
+      const label = await createLabel({ name: data.name, color: data.color });
       setLabels((prev) => [...prev, label]);
       toast.success(t('mail.labelCreated'));
       setShowForm(false);
-      setName('');
-      setColor(PRESET_COLORS[0]);
+      resetLabel({ name: '', color: PRESET_COLORS[0] });
     } catch (err) {
       toast.error(err instanceof Error ? err.message : String(err));
     } finally {
       setSaving(false);
     }
-  }, [name, color, toast, t]);
+  }, [toast, t, resetLabel]);
 
   const handleDelete = useCallback(async () => {
     if (!deleteTarget) return;
@@ -104,11 +117,11 @@ export function LabelManager() {
 
       {showForm && (
         <Card className="mb-4" data-testid="label-form">
-          <div className="space-y-3">
+          <form onSubmit={handleSubmitLabel(handleSave)} className="space-y-3">
             <Input
               label={t('mail.labelName')}
-              value={name}
-              onChange={(e) => setName(e.target.value)}
+              {...registerLabel('name')}
+              error={labelErrors.name?.message === 'required' ? t('validation.required') : undefined}
               placeholder={t('mail.labelName')}
               required
             />
@@ -119,8 +132,8 @@ export function LabelManager() {
                   <button
                     key={c}
                     type="button"
-                    onClick={() => setColor(c)}
-                    className={`w-8 h-8 rounded-full ${color === c ? 'ring-2 ring-offset-2 ring-primary-500' : ''}`}
+                    onClick={() => setLabelValue('color', c)}
+                    className={`w-8 h-8 rounded-full ${colorValue === c ? 'ring-2 ring-offset-2 ring-primary-500' : ''}`}
                     style={{ backgroundColor: c }}
                     aria-label={c}
                   />
@@ -128,10 +141,10 @@ export function LabelManager() {
               </div>
             </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>
       )}