v3: allow users to edit dump title

src/pages/DumpEdit.tsx

@@ -30,6 +30,7 @@ export function DumpEdit() {
 
   const [state, setState] = useState<DumpEditState>({ status: "loading" });
   const [url, setUrl] = useState("");
+  const [title, setTitle] = useState("");
   const [comment, setComment] = useState("");
   const [isPrivate, setIsPrivate] = useState(false);
   const [newFile, setNewFile] = useState<File | null>(null);
@@ -52,6 +53,7 @@ export function DumpEdit() {
         if (apiResponse.success) {
           const dump: Dump = deserializeDump(apiResponse.data);
           setUrl(dump.url ?? "");
+          setTitle(dump.title);
           setComment(dump.comment ?? "");
           setIsPrivate(dump.isPrivate);
           setState({ status: "loaded", dump });
@@ -65,8 +67,11 @@ export function DumpEdit() {
   }, [selectedDump, token]);
 
   const handleSave = async () => {
+    const trimmedTitle = title.trim();
     if (
-      state.status !== "loaded" || comment.length > VALIDATION.DUMP_COMMENT_MAX
+      state.status !== "loaded" ||
+      comment.length > VALIDATION.DUMP_COMMENT_MAX ||
+      !trimmedTitle || trimmedTitle.length > VALIDATION.DUMP_TITLE_MAX
     ) return;
 
     let res: Response;
@@ -74,6 +79,7 @@ export function DumpEdit() {
     if (state.dump.kind === "file" && newFile) {
       const formData = new FormData();
       formData.append("file", newFile);
+      formData.append("title", trimmedTitle);
       if (comment.trim()) formData.append("comment", comment.trim());
       res = await authFetch(`${API_URL}/api/dumps/${state.dump.id}/file`, {
         method: "PUT",
@@ -83,10 +89,11 @@ export function DumpEdit() {
       const body: UpdateDumpRequest = state.dump.kind === "url"
         ? {
           url: url.trim() || undefined,
+          title: trimmedTitle,
           comment: comment.trim() || undefined,
           isPrivate,
         }
-        : { comment: comment.trim() || undefined, isPrivate };
+        : { title: trimmedTitle, comment: comment.trim() || undefined, isPrivate };
       res = await authFetch(`${API_URL}/api/dumps/${state.dump.id}`, {
         method: "PUT",
         body: JSON.stringify(body),
@@ -223,6 +230,20 @@ export function DumpEdit() {
             handleSave();
           }}
         >
+          <div className="form-group">
+            <label htmlFor="title">
+              <Trans>Title</Trans>
+            </label>
+            <input
+              id="title"
+              type="text"
+              value={title}
+              onChange={(e) => setTitle(e.currentTarget.value)}
+              maxLength={VALIDATION.DUMP_TITLE_MAX}
+              required
+            />
+          </div>
+
           {dump.kind === "url"
             ? (
               <div className="form-group">
@@ -301,7 +322,9 @@ export function DumpEdit() {
               <button
                 type="submit"
                 className="btn-primary"
-                disabled={comment.length > VALIDATION.DUMP_COMMENT_MAX}
+                disabled={comment.length > VALIDATION.DUMP_COMMENT_MAX ||
+                  !title.trim() ||
+                  title.trim().length > VALIDATION.DUMP_TITLE_MAX}
               >
                 <Trans>Save</Trans>
               </button>