v3: fixed roles propagation bug, fixed inconsistent file drop zone, fixed chat attachments wrongfully pruned, some visual tweaks

src/pages/DumpEdit.tsx

@@ -16,11 +16,11 @@ import { friendlyFetchError } from "../utils/apiError.ts";
 import { ConfirmModal } from "../components/ConfirmModal.tsx";
 import RichContentCard from "../components/RichContentCard.tsx";
 import FilePreview from "../components/FilePreview.tsx";
-import { FileDropZone } from "../components/FileDropZone.tsx";
 import { ImagePicker } from "../components/ImagePicker.tsx";
 import { CategorySelect } from "../components/CategorySelect.tsx";
 import {
   expectOk,
+  FileField,
   FormError,
   FormProvider,
   RichTextField,
@@ -30,7 +30,6 @@ import {
   VisibilityToggle,
 } from "../components/form/index.ts";
 import { useAuth } from "../hooks/useAuth.ts";
-import { Controller } from "react-hook-form";
 
 type DumpEditState =
   | { status: "loading" }
@@ -69,7 +68,10 @@ export function DumpEdit() {
         const apiResponse = parseAPIResponse<RawDump>(await res.json());
 
         if (apiResponse.success) {
-          setState({ status: "loaded", dump: deserializeDump(apiResponse.data) });
+          setState({
+            status: "loaded",
+            dump: deserializeDump(apiResponse.data),
+          });
         } else {
           setState({ status: "error", error: apiResponse.error.message });
         }
@@ -414,22 +416,17 @@ function DumpEditForm({
           )
           : (
             <div className="form-field">
+              <span className="form-label">
+                <Trans>Replace file</Trans>
+              </span>
               <p className="dump-file-notice">
                 <strong>{dump.fileName}</strong>
                 {dump.fileSize != null && ` — ${formatBytes(dump.fileSize)}`}
               </p>
-              <Controller
+              <FileField<EditValues>
                 name="newFile"
-                control={form.control}
-                render={({ field }) => (
-                  <FileDropZone
-                    file={field.value}
-                    onChange={field.onChange}
-                    label={t`Replace file`}
-                    hint={t`Drop a replacement here`}
-                    showLimit={false}
-                  />
-                )}
+                hint={t`Drop a replacement here`}
+                showLimit={false}
               />
             </div>
           )}