Improve stance defaults and refresh logic in vote pages: refine default stances for comments based on voting behavior, update stance tracking, and ensure vote casting refreshes badges and tallies.

Author: MartinBraquet

web/components/votes/vote-comments.tsx

@@ -152,7 +152,12 @@ export function VoteCommentSection(props: {
         >
           <Col className="gap-3">
             <DiscussionGuidance />
-            <VoteCommentInput voteId={voteId} askForStance onPosted={onPosted} />
+            <VoteCommentInput
+              voteId={voteId}
+              askForStance
+              userChoice={user ? choicesByUserId[user.id] : undefined}
+              onPosted={onPosted}
+            />
           </Col>
         </ShowMore>
       ) : (
@@ -279,6 +284,7 @@ function VoteCommentThread(props: {
 }) {
   const {voteId, thread, choicesByUserId, canComment, onPosted, idInUrl, className} = props
   const {parent: parentComment, replies} = thread
+  const user = useUser()
   const [replyToUserInfo, setReplyToUserInfo] = useState<ReplyToUserInfo>()
 
   const idInThisThread =
@@ -332,6 +338,7 @@ function VoteCommentThread(props: {
             replyToUserInfo={replyToUserInfo}
             clearReply={clearReply}
             parentStance={parentComment.stance}
+            userChoice={user ? choicesByUserId[user.id] : undefined}
             askForStance
             onPosted={onPosted}
             className="w-full min-w-0 grow"
@@ -749,6 +756,8 @@ export function VoteCommentInput(props: {
   askForStance?: boolean
   /** Stance of the comment being replied to, used to pick a sensible default for this one. */
   parentStance?: Stance
+  /** The viewer's own recorded choice (1 / 0 / -1), used as the other default. */
+  userChoice?: number
   onPosted?: () => void
   className?: string
 }) {
@@ -759,16 +768,33 @@ export function VoteCommentInput(props: {
     clearReply,
     askForStance,
     parentStance,
+    userChoice,
     onPosted,
     className,
   } = props
   const t = useT()
   const user = useUser()
-  // Replying to a question is almost always answering it, so that chip starts selected — still one
-  // click to clear or change, but the common case costs nothing.
-  const [stance, setStance] = useState<Stance | undefined>(
-    parentStance === 'question' ? 'answer' : undefined,
-  )
+  // Two defaults, both still one click to clear or change. Replying to a question is almost always
+  // answering it, so that wins. Otherwise someone who has already voted is almost always writing for
+  // the side they voted — and a stanceless argument is invisible to the highlighted-arguments
+  // ranking, which reads `stance`, not the ballot. Abstain and not-yet-voted leave it blank rather
+  // than guess a side.
+  const defaultStance: Stance | undefined =
+    parentStance === 'question'
+      ? 'answer'
+      : userChoice === 1
+        ? 'for'
+        : userChoice === -1
+          ? 'against'
+          : undefined
+  const [stance, setStance] = useState<Stance | undefined>(defaultStance)
+  // The ballot is fetched with the page, so it can land after this mounts, and it can change while
+  // the composer sits open. Track it until the writer picks a chip themselves — after that the
+  // default never overrides a deliberate choice.
+  const stanceTouched = useRef(false)
+  useEffect(() => {
+    if (!stanceTouched.current) setStance(defaultStance)
+  }, [defaultStance])
   const [isSubmitting, setIsSubmitting] = useState(false)
 
   const key = `vote-comment ${voteId} ${parentCommentId ?? ''}`
@@ -795,7 +821,8 @@ export function VoteCommentInput(props: {
       replyToCommentId: parentCommentId,
       stance,
     })
-    setStance(undefined)
+    setStance(defaultStance)
+    stanceTouched.current = false
     clearReply?.()
     onPosted?.()
     track('vote comment', {voteId, stance})
@@ -836,7 +863,10 @@ export function VoteCommentInput(props: {
             <button
               key={s}
               type="button"
-              onClick={() => setStance((prev) => (prev === s ? undefined : s))}
+              onClick={() => {
+                stanceTouched.current = true
+                setStance((prev) => (prev === s ? undefined : s))
+              }}
               className={clsx(
                 'rounded-full px-2.5 py-1 text-xs font-semibold transition-opacity',
                 STANCE_COLOR[s],

web/pages/vote/[id].tsx

@@ -42,7 +42,7 @@ export default function VoteDetailPage() {
     validId ? {voteId: voteId!} : undefined,
     getVote,
   )
-  const {data: choicesByUserId} = useGetter(
+  const {data: choicesByUserId, refresh: refreshChoices} = useGetter(
     'vote-results',
     validId ? {voteId: voteId!} : undefined,
     getVoteResultsByUser,
@@ -150,7 +150,12 @@ export default function VoteDetailPage() {
                 abstain: typedVote.votes_abstain,
                 against: typedVote.votes_against,
               }}
-              onVoted={refreshVote}
+              onVoted={() => {
+                refreshVote()
+                // The ballots feed the "voted For" badges and the composer's default stance, so a
+                // vote cast on this page has to invalidate them too — not just the tallies.
+                refreshChoices()
+              }}
               disabled={typedVote.status !== 'voting_open'}
             />
             {user && <MuteToggle voteId={typedVote.id} />}