v3: fix the frontend's findings, and the backend pieces they needed — each by a rule the code now keeps everywhere. Votes and likes go through one useOptimisticToggles in WSProvider: clicks on one item before any ack share one baseline, which a failure or the timeout restores (a second click used to cancel the first one's rollback), only the last ack's count is applied, a votes_update or comment_likes_update waits while this tab has toggles in flight, and a welcome reconciles them against the server's sets (a vote cast offline left its count one too high). lastLikeEvent, which nothing read, is gone. Follows are refetched when the new follows_changed message, sent to the follower's sockets on every follow write, says another tab changed them; a failed load keeps the Follow buttons disabled and is retried 10 s later instead of leaving them disabled for good (success: false) or enabled over empty sets (network error); follow and unfollow resolve to whether they worked, and the button says when they didn't. CategoriesProvider follows the same rule, so a network error no longer turns every category URL into a 404. Every list is kept by one rule: useDumpListSync and usePlaylistListSync never add an item, and usePositionAwareSync remembers the place of any item that leaves a list, whatever took it out, and puts it back when its next event shows it again; with dump_created now setting lastDumpEvent, a dump going private and back returns to its place on another user's profile, which never happened before, and an updated playlist missing from a list is no longer prepended. useFeedCache keys every cache by viewer (the profile pages restored the owner's private dumps to whoever went back) and reads it again when its key changes (another profile in the same page showed the previous one's list). Every response of a list's first page or next pages goes through expectOk (Index, UserPlaylists, useUserDumpFeed and Notifications read body.data unchecked).

Smaller fixes: the redirects from / and /<slug> keep the navigation state, so the index hides the dump DumpEdit just deleted; Index's mainFetchDone ref, which blocked nothing, is gone; DumpEdit refuses someone else's dump up front, as the API does; the Dump page takes a handed-over dump once and clears it from the history entry, so a reload fetches; a newly upvoted dump is fetched with the viewer's token; the notifications page sends read-all once per notification; the profile's followed and invitees tabs finish loading when left mid-fetch; UserListPopover no longer closes when its own list scrolls; the vote and like counts open their lists for visitors too (a disabled button swallowed the click; they are aria-disabled now); the removal of a playlist's dump forgets it (an edit brought it back), a failed removal puts it back where it was, an undo waits for the removal in flight, and a refused undo says so; PlaylistCreateForm tells whether the dump made it into the new playlist; the cover preview's object URL is revoked; the muted icon has its cross; the bell no longer stays rung after two notifications within 700 ms; a stale invite check can't overwrite a newer one; a stored theme or color scheme is checked; the default feed tab is one store every reader follows, across tabs; the file fields enforce the size they state, derived from DUMP_MAX_FILE_SIZE_BYTES; formatBytes, friendlyFetchError and ImagePicker are translated (Intl names the units), and ImagePicker ignores keys while uploading; visited dumps and playlists keep a week of visits and are parsed once; a chime is claimed under a Web Lock, so two tabs can't both play it; a date in the future reads as "now". Dead code goes: PageShell's centerSlot, overLimit, the exports of isSafeHex and hueFromString, the comment tree's token prop and ChatContext's isChatOpen and closeChat. The French catalogue has the 11 new messages. 214 backend and 632 frontend tests pass; tsc, deno lint, ESLint and doc:lint are clean.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

src/contexts/ws/WSProvider.tsx

@@ -20,7 +20,6 @@ import {
   type ChatError,
   type ChatReplyTarget,
   type CommentEvent,
-  type LikeEvent,
   type PendingChatMessage,
   type PlaylistEvent,
   type UserEvent,
@@ -94,16 +93,106 @@ const CHAT_READ_THROTTLE = 1_000;
  */
 const CHAT_ECHO_WINDOW = 60_000;
 
-/** An optimistic vote waiting for the server. */
-interface PendingVote {
+/** Toggles of one item that the server hasn't acknowledged yet. */
+interface PendingToggle {
   timeout: ReturnType<typeof setTimeout>;
-  rollback: () => void;
+  /** The count and state before the first of them, to restore on failure. */
+  count: number;
+  on: boolean;
+  /** How many acks are still to come. */
+  outstanding: number;
 }
 
-/** An optimistic like waiting for the server. */
-interface PendingLike {
-  timeout: ReturnType<typeof setTimeout>;
-  rollback: () => void;
+/**
+ * Returned by {@link useOptimisticToggles}, for the vote and like actions and
+ * the socket's handlers.
+ */
+interface OptimisticToggles {
+  /** Records a toggle already shown, from the count and state before it. */
+  begin: (id: string, count: number, on: boolean) => void;
+  /** Settles one toggle; true once none of the item's is left in flight. */
+  ack: (id: string) => boolean;
+  /** Checks whether the item has toggles in flight. */
+  pending: (id: string) => boolean;
+  /** Restores the item as it was before its toggles, now. */
+  fail: (id: string) => void;
+  /**
+   * Settles every toggle against the server's set after a (re)connect: each
+   * count moves by one from its baseline when the server's state differs.
+   */
+  reconcile: (serverOn: Set<string>) => void;
+  /** Forgets every toggle, for a new session. */
+  clear: () => void;
+}
+
+/**
+ * Tracks optimistic toggles of votes or likes, which show at once and go back
+ * when the server refuses them or doesn't answer within {@link ACK_TIMEOUT}.
+ * Several clicks on one item before any ack share one baseline, so a failure
+ * restores what was there before the first, and only the last ack's count is
+ * applied.
+ */
+function useOptimisticToggles(
+  setOn: React.Dispatch<React.SetStateAction<Set<string>>>,
+  setCounts: React.Dispatch<React.SetStateAction<Record<string, number>>>,
+): OptimisticToggles {
+  const ref = useRef(new Map<string, PendingToggle>());
+  return useMemo(() => {
+    const pendingMap = ref.current;
+    const restore = (id: string, count: number, on: boolean) => {
+      setOn((prev) => {
+        const next = new Set(prev);
+        if (on) next.add(id);
+        else next.delete(id);
+        return next;
+      });
+      setCounts((prev) => ({ ...prev, [id]: count }));
+    };
+    const fail = (id: string) => {
+      const entry = pendingMap.get(id);
+      if (!entry) return;
+      clearTimeout(entry.timeout);
+      pendingMap.delete(id);
+      restore(id, entry.count, entry.on);
+    };
+    return {
+      begin(id, count, on) {
+        const entry = pendingMap.get(id);
+        if (entry) clearTimeout(entry.timeout);
+        // Nothing is sent while the socket is down, so the timer fails it.
+        pendingMap.set(id, {
+          count: entry?.count ?? count,
+          on: entry?.on ?? on,
+          outstanding: (entry?.outstanding ?? 0) + 1,
+          timeout: setTimeout(() => fail(id), ACK_TIMEOUT),
+        });
+      },
+      ack(id) {
+        const entry = pendingMap.get(id);
+        if (!entry) return true;
+        entry.outstanding -= 1;
+        if (entry.outstanding > 0) return false;
+        clearTimeout(entry.timeout);
+        pendingMap.delete(id);
+        return true;
+      },
+      pending: (id) => pendingMap.has(id),
+      fail,
+      reconcile(serverOn) {
+        for (const [id, entry] of pendingMap) {
+          clearTimeout(entry.timeout);
+          const on = serverOn.has(id);
+          const count = entry.count + (on === entry.on ? 0 : on ? 1 : -1);
+          setCounts((prev) => ({ ...prev, [id]: Math.max(0, count) }));
+        }
+        pendingMap.clear();
+      },
+      clear() {
+        for (const entry of pendingMap.values()) clearTimeout(entry.timeout);
+        pendingMap.clear();
+      },
+    };
+  }, [setOn, setCounts]);
 }
 
 /**
@@ -149,7 +238,6 @@ export function WSProvider({ children }: WSProviderProps): React.JSX.Element {
   const [recentDumps, setRecentDumps] = useState<Dump[]>([]);
   const [deletedDumpIds, setDeletedDumpIds] = useState<Set<string>>(new Set());
   const [lastVoteEvent, setLastVoteEvent] = useState<VoteEvent | null>(null);
-  const [lastLikeEvent, setLastLikeEvent] = useState<LikeEvent | null>(null);
   const [lastDumpEvent, setLastDumpEvent] = useState<Dump | null>(null);
   const [lastPlaylistEvent, setLastPlaylistEvent] = useState<
     PlaylistEvent | null
@@ -179,6 +267,7 @@ export function WSProvider({ children }: WSProviderProps): React.JSX.Element {
   >({});
   // Never reset: pages compare it with the value they last saw.
   const [connectionEpoch, setConnectionEpoch] = useState(0);
+  const [followsVersion, setFollowsVersion] = useState(0);
 
   // A new token means another session: the `welcome` resyncs votes, likes and
   // unread counts, but what the last session gathered (another account's
@@ -196,7 +285,6 @@ export function WSProvider({ children }: WSProviderProps): React.JSX.Element {
     setRecentDumps([]);
     setDeletedDumpIds(new Set());
     setLastVoteEvent(null);
-    setLastLikeEvent(null);
     setLastDumpEvent(null);
     setLastPlaylistEvent(null);
     setDeletedPlaylistIds(new Set());
@@ -274,64 +362,8 @@ export function WSProvider({ children }: WSProviderProps): React.JSX.Element {
   // By dump id, and by comment id for likes. One per item: a second click
   // before the answer replaces the first's timer, so only the latest change
   // can be rolled back.
-  const pendingRef = useRef<Map<string, PendingVote>>(
-    new Map(),
-  );
-  const pendingLikesRef = useRef<Map<string, PendingLike>>(
-    new Map(),
-  );
-
-  const clearPendingVote = useCallback((dumpId: string) => {
-    const pending = pendingRef.current.get(dumpId);
-    if (!pending) return;
-    clearTimeout(pending.timeout);
-    pendingRef.current.delete(dumpId);
-  }, []);
-
-  const clearAllPendingVotes = useCallback(() => {
-    for (const pending of pendingRef.current.values()) {
-      clearTimeout(pending.timeout);
-    }
-    pendingRef.current.clear();
-  }, []);
-
-  const schedulePendingVote = useCallback((
-    dumpId: string,
-    rollback: () => void,
-  ) => {
-    clearPendingVote(dumpId);
-    const timeout = setTimeout(() => {
-      pendingRef.current.delete(dumpId);
-      rollback();
-    }, ACK_TIMEOUT);
-    pendingRef.current.set(dumpId, { timeout, rollback });
-  }, [clearPendingVote]);
-
-  const clearPendingLike = useCallback((commentId: string) => {
-    const pending = pendingLikesRef.current.get(commentId);
-    if (!pending) return;
-    clearTimeout(pending.timeout);
-    pendingLikesRef.current.delete(commentId);
-  }, []);
-
-  const clearAllPendingLikes = useCallback(() => {
-    for (const pending of pendingLikesRef.current.values()) {
-      clearTimeout(pending.timeout);
-    }
-    pendingLikesRef.current.clear();
-  }, []);
-
-  const schedulePendingLike = useCallback((
-    commentId: string,
-    rollback: () => void,
-  ) => {
-    clearPendingLike(commentId);
-    const timeout = setTimeout(() => {
-      pendingLikesRef.current.delete(commentId);
-      rollback();
-    }, ACK_TIMEOUT);
-    pendingLikesRef.current.set(commentId, { timeout, rollback });
-  }, [clearPendingLike]);
+  const votes = useOptimisticToggles(setMyVotes, setVoteCounts);
+  const likes = useOptimisticToggles(setMyLikes, setLikeCounts);
 
   useEffect(() => {
     let closed = false;
@@ -387,6 +419,10 @@ export function WSProvider({ children }: WSProviderProps): React.JSX.Element {
           case "welcome":
             backoff = 500;
             setOnlineUsers(msg.users);
+            // Toggles sent before a reconnect may or may not have landed: the
+            // server's sets say which, and fix the counts shown for them.
+            votes.reconcile(new Set(msg.myVotes));
+            likes.reconcile(new Set(msg.myCommentLikes));
             setMyVotes(new Set(msg.myVotes));
             setMyLikes(new Set(msg.myCommentLikes));
             setUnreadNotificationCount(msg.unreadNotificationCount);
@@ -399,10 +435,6 @@ export function WSProvider({ children }: WSProviderProps): React.JSX.Element {
                 readAt.getTime(),
               );
             }
-            // The server's sets replace whatever was pending. The optimistic
-            // counts stay, though, until a live count replaces them.
-            clearAllPendingVotes();
-            clearAllPendingLikes();
             welcomeCount += 1;
             if (welcomeCount > 1) {
               setConnectionEpoch((n) => n + 1);
@@ -445,12 +477,13 @@ export function WSProvider({ children }: WSProviderProps): React.JSX.Element {
 
           case "votes_update": {
             const { dumpId, voteCount, voterId, action } = msg;
-            setVoteCounts((prev) => ({ ...prev, [dumpId]: voteCount }));
             setLastVoteEvent({ dumpId, voterId, action });
-            // The user's own vote, from this tab or another: it settles the
-            // pending one and keeps every tab's button in step.
+            // While this tab has votes on it in flight, their acks settle it.
+            if (votes.pending(dumpId)) break;
+            setVoteCounts((prev) => ({ ...prev, [dumpId]: voteCount }));
+            // The user's own vote from another tab keeps this tab's button in
+            // step.
             if (voterId === userIdRef.current) {
-              clearPendingVote(dumpId);
               setMyVotes((prev) => {
                 const next = new Set(prev);
                 if (action === "cast") next.add(dumpId);
@@ -462,12 +495,12 @@ export function WSProvider({ children }: WSProviderProps): React.JSX.Element {
           }
 
           case "comment_likes_update": {
-            const { commentId, likeCount, likerId, action } = msg;
-            setLikeCounts((prev) => ({ ...prev, [commentId]: likeCount }));
-            setLastLikeEvent({ commentId, likerId, action });
+            const { commentId, likeCount, likerId } = msg;
             // As for votes.
+            if (likes.pending(commentId)) break;
+            setLikeCounts((prev) => ({ ...prev, [commentId]: likeCount }));
             if (likerId === userIdRef.current) {
-              clearPendingLike(commentId);
+              const { action } = msg;
               setMyLikes((prev) => {
                 const next = new Set(prev);
                 if (action === "cast") next.add(commentId);
@@ -494,6 +527,8 @@ export function WSProvider({ children }: WSProviderProps): React.JSX.Element {
                 MAX_RECENT_DUMPS,
               )
             );
+            // The profiles put a dump back where it was when it turns public.
+            setLastDumpEvent(dump);
             break;
           }
 
@@ -511,7 +546,7 @@ export function WSProvider({ children }: WSProviderProps): React.JSX.Element {
           }
 
           case "dump_deleted": {
-            // Also sent when a dump goes private.
+            // Also sent to others when someone's dump goes private.
             const { dumpId } = msg;
             setDeletedDumpIds((prev) => new Set([...prev, dumpId]));
             setRecentDumps((prev) => prev.filter((d) => d.id !== dumpId));
@@ -520,7 +555,8 @@ export function WSProvider({ children }: WSProviderProps): React.JSX.Element {
 
           case "vote_ack": {
             const { dumpId, action, voteCount } = msg;
-            clearPendingVote(dumpId);
+            // With more clicks in flight, the last ack tells how it ended.
+            if (!votes.ack(dumpId)) break;
             setVoteCounts((prev) => ({ ...prev, [dumpId]: voteCount }));
             setMyVotes((prev) => {
               const next = new Set(prev);
@@ -533,7 +569,7 @@ export function WSProvider({ children }: WSProviderProps): React.JSX.Element {
 
           case "comment_like_ack": {
             const { commentId, action, likeCount } = msg;
-            clearPendingLike(commentId);
+            if (!likes.ack(commentId)) break;
             setLikeCounts((prev) => ({ ...prev, [commentId]: likeCount }));
             setMyLikes((prev) => {
               const next = new Set(prev);
@@ -669,6 +705,10 @@ export function WSProvider({ children }: WSProviderProps): React.JSX.Element {
             setTypingUsers(msg.users);
             break;
 
+          case "follows_changed":
+            setFollowsVersion((n) => n + 1);
+            break;
+
           case "chat_read_update": {
             // Sent to every socket of the user, whichever tab moved it.
             const readAt = new Date(msg.readAt);
@@ -690,21 +730,8 @@ export function WSProvider({ children }: WSProviderProps): React.JSX.Element {
             }
             // A failed vote or like names its dump or comment, so it is
             // rolled back at once. Other errors leave it to the timer.
-            if (msg.dumpId) {
-              const pending = pendingRef.current.get(msg.dumpId);
-              if (pending) {
-                clearTimeout(pending.timeout);
-                pendingRef.current.delete(msg.dumpId);
-                pending.rollback();
-              }
-            } else if (msg.commentId) {
-              const pending = pendingLikesRef.current.get(msg.commentId);
-              if (pending) {
-                clearTimeout(pending.timeout);
-                pendingLikesRef.current.delete(msg.commentId);
-                pending.rollback();
-              }
-            }
+            if (msg.dumpId) votes.fail(msg.dumpId);
+            else if (msg.commentId) likes.fail(msg.commentId);
             break;
           }
         }
@@ -743,172 +770,122 @@ export function WSProvider({ children }: WSProviderProps): React.JSX.Element {
 
     connect();
 
-    const pending = pendingRef.current;
-    const pendingLikes = pendingLikesRef.current;
     return () => {
       closed = true;
       if (reconnectTimer) clearTimeout(reconnectTimer);
       if (connectTimeout) clearTimeout(connectTimeout);
       socketRef.current?.close();
       socketRef.current = null;
-      for (const pendingVote of pending.values()) {
-        clearTimeout(pendingVote.timeout);
-      }
-      pending.clear();
-      for (const pendingLike of pendingLikes.values()) {
-        clearTimeout(pendingLike.timeout);
-      }
-      pendingLikes.clear();
+      votes.clear();
+      likes.clear();
     };
   }, [
-    clearAllPendingVotes,
-    clearPendingVote,
-    clearAllPendingLikes,
-    clearPendingLike,
+    votes,
+    likes,
     failPendingChat,
     isViewingChat,
     retirePendingChat,
     token,
   ]);
 
-  const castVote = useCallback((dumpId: string, shownCount?: number) => {
+  /**
+   * Shows a vote or like toggled at once, records it with `toggles`, and sends
+   * `type` for it. `on` is the state wanted; a click that asks for the state
+   * already shown does nothing.
+   */
+  const toggle = useCallback((
+    toggles: OptimisticToggles,
+    onRef: React.RefObject<Set<string>>,
+    countsRef: React.RefObject<Record<string, number>>,
+    setOn: React.Dispatch<React.SetStateAction<Set<string>>>,
+    setCounts: React.Dispatch<React.SetStateAction<Record<string, number>>>,
+    id: string,
+    on: boolean,
+    shownCount: number | undefined,
+    message: ClientToServerMessage,
+  ) => {
     // Until the socket brings a count, the one on screen is the only one.
-    const prevCount = voteCountsRef.current[dumpId] ?? shownCount ?? 0;
-    const prevVoted = myVotesRef.current.has(dumpId);
-    if (prevVoted) return;
-
-    setMyVotes((prev) => {
-      const n = new Set(prev);
-      n.add(dumpId);
-      return n;
+    const prevCount = countsRef.current[id] ?? shownCount ?? 0;
+    const prevOn = onRef.current.has(id);
+    if (prevOn === on) return;
+    setOn((prev) => {
+      const next = new Set(prev);
+      if (on) next.add(id);
+      else next.delete(id);
+      return next;
     });
-    setVoteCounts((prev) => ({ ...prev, [dumpId]: prevCount + 1 }));
-
-    schedulePendingVote(dumpId, () => {
-      setMyVotes((prev) => {
-        const n = new Set(prev);
-        n.delete(dumpId);
-        return n;
-      });
-      setVoteCounts((prev) => ({ ...prev, [dumpId]: prevCount }));
-    });
-
-    if (socketRef.current?.readyState === WebSocket.OPEN) {
-      socketRef.current.send(
-        JSON.stringify(
-          { type: "vote_cast", dumpId } satisfies ClientToServerMessage,
-        ),
-      );
-    }
-    // Nothing is sent while the socket is down, so the timer rolls it back.
-  }, [schedulePendingVote]);
-
-  const removeVote = useCallback((dumpId: string, shownCount?: number) => {
-    const prevCount = voteCountsRef.current[dumpId] ?? shownCount ?? 0;
-    const prevVoted = myVotesRef.current.has(dumpId);
-    if (!prevVoted) return;
-
-    setMyVotes((prev) => {
-      const n = new Set(prev);
-      n.delete(dumpId);
-      return n;
-    });
-    setVoteCounts((prev) => ({
+    setCounts((prev) => ({
       ...prev,
-      [dumpId]: Math.max(0, prevCount - 1),
+      [id]: Math.max(0, prevCount + (on ? 1 : -1)),
     }));
-
-    schedulePendingVote(dumpId, () => {
-      setMyVotes((prev) => {
-        const n = new Set(prev);
-        n.add(dumpId);
-        return n;
-      });
-      setVoteCounts((prev) => ({ ...prev, [dumpId]: prevCount }));
-    });
-
+    toggles.begin(id, prevCount, prevOn);
     if (socketRef.current?.readyState === WebSocket.OPEN) {
-      socketRef.current.send(
-        JSON.stringify(
-          { type: "vote_remove", dumpId } satisfies ClientToServerMessage,
-        ),
-      );
+      socketRef.current.send(JSON.stringify(message));
     }
-  }, [schedulePendingVote]);
+  }, []);
+
+  const castVote = useCallback(
+    (dumpId: string, shownCount?: number) =>
+      toggle(
+        votes,
+        myVotesRef,
+        voteCountsRef,
+        setMyVotes,
+        setVoteCounts,
+        dumpId,
+        true,
+        shownCount,
+        { type: "vote_cast", dumpId },
+      ),
+    [toggle, votes],
+  );
+
+  const removeVote = useCallback(
+    (dumpId: string, shownCount?: number) =>
+      toggle(
+        votes,
+        myVotesRef,
+        voteCountsRef,
+        setMyVotes,
+        setVoteCounts,
+        dumpId,
+        false,
+        shownCount,
+        { type: "vote_remove", dumpId },
+      ),
+    [toggle, votes],
+  );
 
   const castCommentLike = useCallback(
-    (commentId: string, shownCount?: number) => {
-      const prevCount = likeCountsRef.current[commentId] ?? shownCount ?? 0;
-      const prevLiked = myLikesRef.current.has(commentId);
-      if (prevLiked) return;
-
-      setMyLikes((prev) => {
-        const n = new Set(prev);
-        n.add(commentId);
-        return n;
-      });
-      setLikeCounts((prev) => ({ ...prev, [commentId]: prevCount + 1 }));
-
-      schedulePendingLike(commentId, () => {
-        setMyLikes((prev) => {
-          const n = new Set(prev);
-          n.delete(commentId);
-          return n;
-        });
-        setLikeCounts((prev) => ({ ...prev, [commentId]: prevCount }));
-      });
-
-      if (socketRef.current?.readyState === WebSocket.OPEN) {
-        socketRef.current.send(
-          JSON.stringify(
-            {
-              type: "comment_like_cast",
-              commentId,
-            } satisfies ClientToServerMessage,
-          ),
-        );
-      }
-    },
-    [schedulePendingLike],
+    (commentId: string, shownCount?: number) =>
+      toggle(
+        likes,
+        myLikesRef,
+        likeCountsRef,
+        setMyLikes,
+        setLikeCounts,
+        commentId,
+        true,
+        shownCount,
+        { type: "comment_like_cast", commentId },
+      ),
+    [toggle, likes],
   );
 
   const removeCommentLike = useCallback(
-    (commentId: string, shownCount?: number) => {
-      const prevCount = likeCountsRef.current[commentId] ?? shownCount ?? 0;
-      const prevLiked = myLikesRef.current.has(commentId);
-      if (!prevLiked) return;
-
-      setMyLikes((prev) => {
-        const n = new Set(prev);
-        n.delete(commentId);
-        return n;
-      });
-      setLikeCounts((prev) => ({
-        ...prev,
-        [commentId]: Math.max(0, prevCount - 1),
-      }));
-
-      schedulePendingLike(commentId, () => {
-        setMyLikes((prev) => {
-          const n = new Set(prev);
-          n.add(commentId);
-          return n;
-        });
-        setLikeCounts((prev) => ({ ...prev, [commentId]: prevCount }));
-      });
-
-      if (socketRef.current?.readyState === WebSocket.OPEN) {
-        socketRef.current.send(
-          JSON.stringify(
-            {
-              type: "comment_like_remove",
-              commentId,
-            } satisfies ClientToServerMessage,
-          ),
-        );
-      }
-    },
-    [schedulePendingLike],
+    (commentId: string, shownCount?: number) =>
+      toggle(
+        likes,
+        myLikesRef,
+        likeCountsRef,
+        setMyLikes,
+        setLikeCounts,
+        commentId,
+        false,
+        shownCount,
+        { type: "comment_like_remove", commentId },
+      ),
+    [toggle, likes],
   );
 
   const injectDump = useCallback((dump: Dump) => {
@@ -1143,7 +1120,6 @@ export function WSProvider({ children }: WSProviderProps): React.JSX.Element {
     recentDumps,
     deletedDumpIds,
     lastVoteEvent,
-    lastLikeEvent,
     lastDumpEvent,
     lastPlaylistEvent,
     deletedPlaylistIds,
@@ -1152,6 +1128,7 @@ export function WSProvider({ children }: WSProviderProps): React.JSX.Element {
     unreadNotificationCount,
     lastNotification,
     connectionEpoch,
+    followsVersion,
     castVote,
     removeVote,
     castCommentLike,
@@ -1168,7 +1145,6 @@ export function WSProvider({ children }: WSProviderProps): React.JSX.Element {
     recentDumps,
     deletedDumpIds,
     lastVoteEvent,
-    lastLikeEvent,
     lastDumpEvent,
     lastPlaylistEvent,
     deletedPlaylistIds,
@@ -1177,6 +1153,7 @@ export function WSProvider({ children }: WSProviderProps): React.JSX.Element {
     unreadNotificationCount,
     lastNotification,
     connectionEpoch,
+    followsVersion,
     castVote,
     removeVote,
     castCommentLike,