v3: localization fixes, char counters & limits on all text fields, ux fixes

src/pages/DumpEdit.tsx

@@ -1,9 +1,9 @@
 import { useEffect, useState } from "react";
 import { Link, useNavigate, useParams } from "react-router";
-import { t } from "@lingui/core/macro"
+import { t } from "@lingui/core/macro";
 import { Trans } from "@lingui/react/macro";
 
-import { API_URL } from "../config/api.ts";
+import { API_URL, VALIDATION } from "../config/api.ts";
 import type { Dump, RawDump, UpdateDumpRequest } from "../model.ts";
 import { deserializeDump, parseAPIResponse } from "../model.ts";
 import { useRequiredAuth } from "../hooks/useAuth.ts";
@@ -65,7 +65,9 @@ export function DumpEdit() {
   }, [selectedDump, token]);
 
   const handleSave = async () => {
-    if (state.status !== "loaded") return;
+    if (
+      state.status !== "loaded" || comment.length > VALIDATION.DUMP_COMMENT_MAX
+    ) return;
 
     let res: Response;
 
@@ -140,7 +142,9 @@ export function DumpEdit() {
   if (state.status === "loading") {
     return (
       <PageShell>
-        <p className="page-loading"><Trans>Loading dump…</Trans></p>
+        <p className="page-loading">
+          <Trans>Loading dump…</Trans>
+        </p>
       </PageShell>
     );
   }
@@ -177,7 +181,9 @@ export function DumpEdit() {
     <PageShell>
       <div className="form-page form-page--two-col">
         <div className="form-page-header">
-          <p className="form-page-eyebrow"><Trans>Editing</Trans></p>
+          <p className="form-page-eyebrow">
+            <Trans>Editing</Trans>
+          </p>
           <h1 className="form-page-title">{dump.title}</h1>
         </div>
 
@@ -203,7 +209,9 @@ export function DumpEdit() {
               onClick={handleRefreshMetadata}
               disabled={refreshing}
             >
-              {refreshing ? <Trans>Refreshing…</Trans> : <Trans>Refresh metadata</Trans>}
+              {refreshing
+                ? <Trans>Refreshing…</Trans>
+                : <Trans>Refresh metadata</Trans>}
             </button>
           )}
         </div>
@@ -218,7 +226,9 @@ export function DumpEdit() {
           {dump.kind === "url"
             ? (
               <div className="form-group">
-                <label htmlFor="url"><Trans>URL</Trans></label>
+                <label htmlFor="url">
+                  <Trans>URL</Trans>
+                </label>
                 <input
                   id="url"
                   type="url"
@@ -255,6 +265,7 @@ export function DumpEdit() {
               onChange={setComment}
               placeholder={t`Tell the community what makes this worth their time...`}
               rows={3}
+              maxLength={VALIDATION.DUMP_COMMENT_MAX}
             />
           </div>
 
@@ -287,7 +298,11 @@ export function DumpEdit() {
               <Link to={dumpUrl(dump)} className="form-cancel">
                 <Trans>Cancel</Trans>
               </Link>
-              <button type="submit" className="btn-primary">
+              <button
+                type="submit"
+                className="btn-primary"
+                disabled={comment.length > VALIDATION.DUMP_COMMENT_MAX}
+              >
                 <Trans>Save</Trans>
               </button>
             </div>