Allow users to see 0% FR answers via show more button

web/components/answers/answers-panel.tsx

@@ -23,6 +23,7 @@ import { Avatar } from 'web/components/avatar'
 import { Linkify } from 'web/components/linkify'
 import { BuyButton } from 'web/components/yes-no-selector'
 import { UserLink } from 'web/components/user-link'
+import { Button } from 'web/components/button'
 
 export function AnswersPanel(props: {
   contract: FreeResponseContract | MultipleChoiceContract
@@ -30,13 +31,14 @@ export function AnswersPanel(props: {
   const { contract } = props
   const { creatorId, resolution, resolutions, totalBets, outcomeType } =
     contract
+  const [showAllAnswers, setShowAllAnswers] = useState(false)
 
   const answers = useAnswers(contract.id) ?? contract.answers
   const [winningAnswers, losingAnswers] = partition(
-    answers.filter(
-      (answer) =>
-        (answer.id !== '0' || outcomeType === 'MULTIPLE_CHOICE') &&
-        totalBets[answer.id] > 0.000000001
+    answers.filter((answer) =>
+      (answer.id !== '0' || outcomeType === 'MULTIPLE_CHOICE') && showAllAnswers
+        ? true
+        : totalBets[answer.id] > 0
     ),
     (answer) =>
       answer.id === resolution || (resolutions && resolutions[answer.id])
@@ -127,6 +129,17 @@ export function AnswersPanel(props: {
                 </div>
               </div>
             ))}
+            <Row className={'justify-end'}>
+              {!showAllAnswers && (
+                <Button
+                  color={'gray-white'}
+                  onClick={() => setShowAllAnswers(true)}
+                  size={'md'}
+                >
+                  Show More
+                </Button>
+              )}
+            </Row>
           </div>
         </div>
       )}

web/components/answers/create-answer-panel.tsx

@@ -76,7 +76,7 @@ export function CreateAnswerPanel(props: { contract: FreeResponseContract }) {
     if (existingAnswer) {
       setAnswerError(
         existingAnswer
-          ? `"${existingAnswer.text}" already exists as an answer`
+          ? `"${existingAnswer.text}" already exists as an answer. Can't see it? Hit the 'Show More' button right above this box.`
           : ''
       )
       return
@@ -237,7 +237,7 @@ const AnswerError = (props: { text: string; level: answerErrorLevel }) => {
     }[level] ?? ''
   return (
     <div
-      className={`${colorClass} mb-2 mr-auto self-center whitespace-nowrap text-xs font-medium tracking-wide`}
+      className={`${colorClass} mb-2 mr-auto self-center text-xs font-medium tracking-wide`}
     >
       {text}
     </div>