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

src/pages/UserUpvoted.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import { Link, useParams } from "react-router";
-import { t } from "@lingui/core/macro"
+import { t } from "@lingui/core/macro";
 import { Plural, Trans } from "@lingui/react/macro";
 
 import { API_URL } from "../config/api.ts";
@@ -69,6 +69,7 @@ export function UserUpvoted() {
   useEffect(() => {
     if (!profileUserId || me?.id !== profileUserId) return;
     if (prevMyVotesRef.current === null) {
+      // setVotedIds + prevMyVotesRef must be co-located to stay consistent.
       // eslint-disable-next-line react-hooks/set-state-in-effect
       setVotedIds(new Set(myVotes));
       prevMyVotesRef.current = new Set(myVotes);
@@ -87,6 +88,8 @@ export function UserUpvoted() {
     if (voterId !== profileUserId) return;
 
     if (action === "remove") {
+      // setVotedIds and startFading must fire together to avoid a render with
+      // stale votedIds between the two updates.
       // eslint-disable-next-line react-hooks/set-state-in-effect
       setVotedIds((prev) => {
         const n = new Set(prev);
@@ -116,7 +119,9 @@ export function UserUpvoted() {
   if (state.status === "loading") {
     return (
       <PageShell>
-        <p className="page-loading"><Trans>Loading…</Trans></p>
+        <p className="page-loading">
+          <Trans>Loading…</Trans>
+        </p>
       </PageShell>
     );
   }
@@ -148,7 +153,11 @@ export function UserUpvoted() {
       />
 
       {visibleDumps.length === 0
-        ? <p className="empty-state"><Trans>Nothing here yet.</Trans></p>
+        ? (
+          <p className="empty-state">
+            <Trans>Nothing here yet.</Trans>
+          </p>
+        )
         : (
           <ul className="dump-feed">
             {visibleDumps.map((dump) => {
@@ -177,11 +186,21 @@ export function UserUpvoted() {
 
       <div ref={sentinelRef} />
       {loadingMore && (
-        <p className="feed-loading-more"><Trans>Loading more…</Trans></p>
+        <p className="feed-loading-more">
+          <Trans>Loading more…</Trans>
+        </p>
       )}
       {!hasMore && visibleDumps.length > 0 && (
         <p className="index-status">
-          <Trans>All <Plural value={votes.length} one="# upvoted dump" other="# upvoted dumps" /> loaded.</Trans>
+          <Trans>
+            All{" "}
+            <Plural
+              value={votes.length}
+              one="# upvoted dump"
+              other="# upvoted dumps"
+            />{" "}
+            loaded.
+          </Trans>
         </p>
       )}
     </PageShell>