From 3200e3cf79ed60cb6c52f4c538627b04039adf23 Mon Sep 17 00:00:00 2001
From: MartinBraquet <martin.braquet@gmail.com>
Date: Mon, 9 Mar 2026 12:12:40 +0100
Subject: [PATCH] Fix index and total not refreshing

---
 .../answer-compatibility-question-button.tsx  |  7 ++++++-
 .../answer-compatibility-question-content.tsx | 21 +++++--------------
 2 files changed, 11 insertions(+), 17 deletions(-)

diff --git a/web/components/answers/answer-compatibility-question-button.tsx b/web/components/answers/answer-compatibility-question-button.tsx
index a48854bc..fd2b0fc2 100644
--- a/web/components/answers/answer-compatibility-question-button.tsx
+++ b/web/components/answers/answer-compatibility-question-button.tsx
@@ -2,7 +2,7 @@ import clsx from 'clsx'
 import {User} from 'common/user'
 import Link from 'next/link'
 import router from 'next/router'
-import {useMemo, useState} from 'react'
+import {useEffect, useMemo, useState} from 'react'
 import toast from 'react-hot-toast'
 import {Button} from 'web/components/buttons/button'
 import {compareBySort, CompatibilitySort} from 'web/components/compatibility/sort-widget'
@@ -167,6 +167,11 @@ function AnswerCompatibilityQuestionModal(props: {
   const [showOnboarding, setShowOnboarding] = useState(fromSignup ?? false)
   const [sort, setSort] = useState<CompatibilitySort>('random')
 
+  useEffect(() => {
+    refreshCompatibilityAll()
+    setQuestionIndex(0)
+  }, [sort])
+
   const sortedQuestions = useMemo(() => {
     return [...otherQuestions].sort((a, b) => {
       return compareBySort(a, b, sort)
diff --git a/web/components/answers/answer-compatibility-question-content.tsx b/web/components/answers/answer-compatibility-question-content.tsx
index 448d52dc..d3a150fe 100644
--- a/web/components/answers/answer-compatibility-question-content.tsx
+++ b/web/components/answers/answer-compatibility-question-content.tsx
@@ -157,22 +157,6 @@ export function AnswerCompatibilityQuestionContent(props: {
   return (
     <Col className="min-h-0 w-full gap-4">
       <Col className="gap-1 shrink-0">
-        {/*{compatibilityQuestion.importance_score > 0 && <Row className="text-blue-400 -mt-4 w-full justify-start text-sm">*/}
-        {/*  <span>*/}
-        {/*    Massive upgrade coming soon! More prompts, better predictive power, filtered by category, etc.*/}
-        {/*  </span>*/}
-        {/*</Row>}*/}
-        {index !== null &&
-          index !== undefined &&
-          total !== null &&
-          total !== undefined &&
-          total > 1 && (
-            <Row className="text-ink-500 -mt-4 w-full justify-end text-sm">
-              <span>
-                <span className="text-ink-600 font-semibold">{index + 1}</span> / {total}
-              </span>
-            </Row>
-          )}
         <Row>
           {shortenedPopularity && (
             <Tooltip
@@ -188,6 +172,11 @@ export function AnswerCompatibilityQuestionContent(props: {
               </Row>
             </Tooltip>
           )}
+          {isFinite(index!) && isFinite(total!) && (
+            <span className={'ml-16 text-sm'}>
+              <span className="text-ink-600 font-semibold">{index! + 1}</span> / {total}
+            </span>
+          )}
           {sort && setSort && (
             <CompatibilitySortWidget
               className="text-sm sm:flex ml-auto"