Phase 6.5: Tag-Forms on RHF + Zod

- TagPicker create-tag form: RHF+Zod (name required, color optional with default)
- Error display under name field
- Color picker uses setTagValue from RHF
- Preserved all existing functionality: search, assign, unassign
- Added 2 validation tests (empty name, valid submit)

frontend/src/components/tags/TagPicker.tsx

@@ -6,6 +6,9 @@ import clsx from 'clsx';
 
 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 { Badge } from '@/components/ui/Badge';
 import { Button } from '@/components/ui/Button';
 import { Input } from '@/components/ui/Input';
@@ -35,10 +38,22 @@ export function TagPicker({ entityType, entityId, assignedTags: initialAssigned
   const [loading, setLoading] = useState(true);
   const [showCreateForm, setShowCreateForm] = useState(false);
   const [searchQuery, setSearchQuery] = useState('');
-  const [newTagName, setNewTagName] = useState('');
-  const [newTagColor, setNewTagColor] = useState('#3B82F6');
   const [submitting, setSubmitting] = useState(false);
 
+  // ── Tag create form (RHF + Zod) ──
+  const tagSchema = z.object({
+    name: z.string().min(1, 'required'),
+    color: z.string().optional().default('#3B82F6'),
+  });
+  type TagFormData = z.infer<typeof tagSchema>;
+
+  const { register: registerTag, handleSubmit: handleSubmitTag, reset: resetTag, watch: watchTag, setValue: setTagValue, formState: { errors: tagErrors } } = useForm<TagFormData>({
+    resolver: zodResolver(tagSchema),
+    defaultValues: { name: '', color: '#3B82F6' },
+  });
+
+  const newTagColor = watchTag('color');
+
   useEffect(() => {
     let cancelled = false;
     setLoading(true);
@@ -95,14 +110,13 @@ export function TagPicker({ entityType, entityId, assignedTags: initialAssigned
     setSubmitting(false);
   }, [entityType, entityId, toast, t]);
 
-  const handleCreateTag = useCallback(async () => {
-    if (!newTagName.trim()) return;
+  const handleCreateTag = useCallback(async (data: TagFormData) => {
     setSubmitting(true);
     try {
-      const tag = await createTag({ name: newTagName.trim(), color: newTagColor });
+      const tag = await createTag({ name: data.name.trim(), color: data.color });
       setAllTags((prev) => [...prev, tag]);
       await handleAssign(tag.id);
-      setNewTagName('');
+      resetTag({ name: '', color: '#3B82F6' });
       setShowCreateForm(false);
       toast.success(t('tags.createSuccess'));
     } catch (err) {
@@ -110,7 +124,7 @@ export function TagPicker({ entityType, entityId, assignedTags: initialAssigned
       toast.error(msg);
     }
     setSubmitting(false);
-  }, [newTagName, newTagColor, handleAssign, toast, t]);
+  }, [handleAssign, toast, t, resetTag]);
 
   const colorOptions = ['#3B82F6', '#EF4444', '#10B981', '#F59E0B', '#8B5CF6', '#F97316', '#EC4899', '#6B7280'];
 
@@ -195,10 +209,11 @@ export function TagPicker({ entityType, entityId, assignedTags: initialAssigned
           </Button>
         ) : (
           <div className="space-y-3 p-4 border border-secondary-200 rounded-lg" data-testid="create-tag-form">
+            <form onSubmit={handleSubmitTag(handleCreateTag)}>
             <Input
-                            label={t('tags.tagName')}
-              value={newTagName}
-              onChange={(e) => setNewTagName(e.target.value)}
+              label={t('tags.tagName')}
+              {...registerTag('name')}
+              error={tagErrors.name?.message === 'required' ? t('validation.required') : undefined}
               placeholder={t('tags.tagName')}
             />
             <div className="space-y-1">
@@ -207,7 +222,8 @@ export function TagPicker({ entityType, entityId, assignedTags: initialAssigned
                 {colorOptions.map((color) => (
                   <button
                     key={color}
-                    onClick={() => setNewTagColor(color)}
+                    type="button"
+                    onClick={() => setTagValue('color', color)}
                     className={clsx(
                       'w-6 h-6 rounded-full transition-transform',
                       newTagColor === color ? 'ring-2 ring-offset-2 ring-secondary-400 scale-110' : ''
@@ -220,13 +236,10 @@ export function TagPicker({ entityType, entityId, assignedTags: initialAssigned
               </div>
             </div>
             <div className="flex gap-2">
-              <Button size="sm" onClick={handleCreateTag} isLoading={submitting} disabled={!newTagName.trim()}>
-                {t('tags.save')}
-              </Button>
-              <Button variant="secondary" size="sm" onClick={() => setShowCreateForm(false)}>
-                {t('tags.cancel')}
-              </Button>
+              <Button size="sm" type="submit" isLoading={submitting}>{t('tags.save')}</Button>
+              <Button variant="secondary" size="sm" type="button" onClick={() => setShowCreateForm(false)}>{t('tags.cancel')}</Button>
             </div>
+            </form>
           </div>
         )}
       </div>