Undo last vote functionality

app/modules/plus-server/usePlusVoting.ts

@@ -52,15 +52,20 @@ export function usePlusVoting(usersForVotingFromServer: UsersForVoting) {
 
   const currentUser = usersForVoting?.[votes.length];
 
+  const progress: [currentAmount: number, targetAmount: number] | undefined =
+    usersForVoting ? [votes.length, usersForVoting.length] : undefined;
+
   return {
     vote,
     undoLast,
     currentUser,
     previous: previousUser({ usersForVoting, votes }),
     isReady: Boolean(usersForVoting),
+    progress,
   };
 }
 
+// xxx: with this implementation i guess bio's / suggestions won't update mid-voting?
 function useLoadInitialStateFromLocalStorageEffect({
   usersForVotingFromServer,
   setUsersForVoting,
@@ -116,7 +121,7 @@ function previousUser({
   invariant(previousScore);
 
   return {
-    user: previousUser,
+    ...previousUser,
     score: previousScore,
   };
 }

app/routes/plus/voting/index.tsx

@@ -17,6 +17,7 @@ import { isVotingActive } from "~/permissions";
 import { discordFullName } from "~/utils/strings";
 import { assertUnreachable } from "~/utils/types";
 import { PlusSuggestionComments } from "../suggestions";
+import * as React from "react";
 
 type PlusVotingLoaderData =
   // voting is not active OR user is not eligible to vote
@@ -99,15 +100,36 @@ function VotingTimingInfo(
   );
 }
 
+const tips = [
+  "Voting progress is saved locally",
+  "Use left and right arrows on desktop to vote",
+  "You +1 yourself automatically",
+];
+
 function Voting(data: Extract<PlusVotingLoaderData, { type: "voting" }>) {
-  const { currentUser, previous, vote, undoLast, isReady } = usePlusVoting(
-    data.usersForVoting
-  );
+  const [randomTip] = React.useState(tips[Math.floor(Math.random() * 3)]);
+  const { currentUser, previous, vote, undoLast, isReady, progress } =
+    usePlusVoting(data.usersForVoting);
 
   if (!isReady) return null;
 
   return (
-    <div>
+    <div className="stack md">
+      {previous ? (
+        <p className="button-text-paragraph text-sm text-lighter">
+          Previously{" "}
+          <span>
+            {previous.score > 0 ? "+" : ""}
+            {previous.score}
+          </span>{" "}
+          on {discordFullName(previous.user)}.
+          <Button variant="minimal" onClick={undoLast}>
+            Undo?
+          </Button>
+        </p>
+      ) : (
+        <p className="text-sm text-lighter">Tip: {randomTip}</p>
+      )}
       {currentUser ? (
         <div className="stack md items-center">
           <Avatar