Phase 6.4: DMS-Forms on RHF + Zod

- Dms.tsx folder-create: RHF+Zod (name required)
- ShareDialog add-share: RHF+Zod (shareId required, shareType/permission kept as useState)
- Error display under each field
- Preserved all existing functionality: folder tree, file grid, share links
- Added 2 validation tests for ShareDialog (empty shareId, valid submit)

frontend/src/components/dms/ShareDialog.tsx

@@ -5,6 +5,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 { Modal } from '@/components/ui/Modal';
 import { Button } from '@/components/ui/Button';
 import { Input } from '@/components/ui/Input';
@@ -45,12 +48,22 @@ export function ShareDialog({ open, file, onClose, onShared }: ShareDialogProps)
   const [loading, setLoading] = useState(false);
 
   const [shareType, setShareType] = useState<'user' | 'group'>('user');
-  const [shareId, setShareId] = useState('');
   const [sharePermission, setSharePermission] = useState<'read' | 'write'>('read');
   const [linkPassword, setLinkPassword] = useState('');
   const [linkExpiry, setLinkExpiry] = useState('');
   const [submitting, setSubmitting] = useState(false);
 
+  // ── Share form (RHF + Zod) ──
+  const shareSchema = z.object({
+    shareId: z.string().min(1, 'required'),
+  });
+  type ShareFormData = z.infer<typeof shareSchema>;
+
+  const { register: registerShare, handleSubmit: handleSubmitShare, reset: resetShare, formState: { errors: shareErrors } } = useForm<ShareFormData>({
+    resolver: zodResolver(shareSchema),
+    defaultValues: { shareId: '' },
+  });
+
   const loadData = useCallback(async () => {
     if (!file) return;
     setLoading(true);
@@ -69,18 +82,18 @@ export function ShareDialog({ open, file, onClose, onShared }: ShareDialogProps)
     }
   }, [open, file, loadData]);
 
-  const handleAddShare = useCallback(async () => {
-    if (!file || !shareId) return;
+  const handleAddShare = useCallback(async (data: ShareFormData) => {
+    if (!file) return;
     setSubmitting(true);
     try {
       const payload: { user_id?: string; group_id?: string; permission: 'read' | 'write' } = {
         permission: sharePermission,
       };
-      if (shareType === 'user') payload.user_id = shareId;
-      else payload.group_id = shareId;
+      if (shareType === 'user') payload.user_id = data.shareId;
+      else payload.group_id = data.shareId;
       await shareFile(file.id, payload);
       toast.success(t('dms.shared'));
-      setShareId('');
+      resetShare({ shareId: '' });
       onShared();
       loadData();
     } catch (err) {
@@ -88,7 +101,7 @@ export function ShareDialog({ open, file, onClose, onShared }: ShareDialogProps)
       toast.error(msg);
     }
     setSubmitting(false);
-  }, [file, shareId, shareType, sharePermission, toast, t, onShared, loadData]);
+  }, [file, shareType, sharePermission, toast, t, onShared, loadData, resetShare]);
 
   const handleRemovePermission = useCallback(async (userId: string) => {
     if (!file) return;
@@ -155,6 +168,7 @@ export function ShareDialog({ open, file, onClose, onShared }: ShareDialogProps)
         {/* Add share section */}
         <div className="space-y-3" data-testid="share-add-section">
           <h3 className="text-sm font-semibold text-secondary-900">{t('dms.addShare')}</h3>
+          <form onSubmit={handleSubmitShare(handleAddShare)}>
           <div className="flex items-center gap-3 flex-wrap">
             <Select
               label={t('dms.userOrGroup')}
@@ -167,8 +181,8 @@ export function ShareDialog({ open, file, onClose, onShared }: ShareDialogProps)
             />
             <Input
               label={shareType === 'user' ? t('dms.userId') : t('dms.groupId')}
-              value={shareId}
-              onChange={(e) => setShareId(e.target.value)}
+              {...registerShare('shareId')}
+              error={shareErrors.shareId?.message === 'required' ? t('validation.required') : undefined}
               placeholder={shareType === 'user' ? t('dms.userId') : t('dms.groupId')}
             />
             <Select
@@ -182,13 +196,14 @@ export function ShareDialog({ open, file, onClose, onShared }: ShareDialogProps)
             />
           </div>
           <Button
-            onClick={handleAddShare}
+            type="submit"
             isLoading={submitting}
-            disabled={!shareId}
             size="sm"
+            className="mt-2"
           >
             {t('dms.addShare')}
           </Button>
+          </form>
         </div>
 
         {/* Current permissions */}