dealing with weirdness, making it look intentional lol

web/components/answers/answers-panel.tsx

@@ -30,7 +30,7 @@ import { ChatIcon } from '@heroicons/react/outline'
 export function getAnswerColor(answer: Answer, answersArray: Answer[]) {
   const colorIndex = answersArray.indexOf(answer)
   return colorIndex != undefined && colorIndex < CHOICE_ANSWER_COLORS.length
-    ? CHOICE_ANSWER_COLORS[colorIndex] + '90' // semi-transparent
+    ? CHOICE_ANSWER_COLORS[colorIndex] // semi-transparent
     : '#B1B1C755'
 }
 
@@ -116,7 +116,6 @@ export function AnswersPanel(props: {
 
   const answersArray = useChartAnswers(contract)
 
-  console.log(answersArray)
   return (
     <Col className="gap-3">
       {(resolveOption || resolution) &&
@@ -219,7 +218,7 @@ function OpenAnswer(props: {
           tradingAllowed(contract) ? 'text-greyscale-7' : 'text-greyscale-5'
         )}
         style={{
-          background: `linear-gradient(to right, ${color} ${colorWidth}%, #FBFBFF ${colorWidth}%)`,
+          background: `linear-gradient(to right, ${color}90 ${colorWidth}%, #FBFBFF ${colorWidth}%)`,
         }}
       >
         <Row className="z-20 -mb-1 justify-between gap-2 py-2 px-3">

web/components/comment-input.tsx

@@ -82,15 +82,25 @@ export function AnswerCommentInput(props: {
   contract: Contract<AnyContractType>
   answerResponse: Answer
   onCancelAnswerResponse?: () => void
+  answersArray: Answer[]
 }) {
-  const { contract, answerResponse, onCancelAnswerResponse } = props
+  const { contract, answerResponse, onCancelAnswerResponse, answersArray } =
+    props
   const replyTo = {
     id: answerResponse.id,
     username: answerResponse.username,
   }
+  const color = getAnswerColor(answerResponse, answersArray)
+  console.log('color:', color)
   return (
     <>
-      <CommentsAnswer answer={answerResponse} contract={contract} />
+      <div className="opacity-60">
+        <CommentsAnswer
+          answer={answerResponse}
+          contract={contract}
+          color={color}
+        />
+      </div>
       <Row>
         <div className="ml-1">
           <Curve size={28} strokeWidth={1} color="#D8D8EB" />

web/components/contract/contract-tabs.tsx

@@ -2,11 +2,11 @@ import { memo, useState } from 'react'
 import { Pagination } from 'web/components/pagination'
 import { FeedBet } from '../feed/feed-bets'
 import { FeedLiquidity } from '../feed/feed-liquidity'
-import { CommentsAnswer } from '../feed/feed-answer-comment-group'
+import { FreeResponseComments } from '../feed/feed-answer-comment-group'
 import { FeedCommentThread, ContractCommentInput } from '../feed/feed-comments'
 import { groupBy, sortBy, sum } from 'lodash'
 import { Bet } from 'common/bet'
-import { Contract } from 'common/contract'
+import { AnyContractType, Contract } from 'common/contract'
 import { PAST_BETS } from 'common/user'
 import { ContractBetsTable } from '../bets-list'
 import { Spacer } from '../layout/spacer'
@@ -35,11 +35,7 @@ import {
 } from 'web/hooks/use-persistent-state'
 import { safeLocalStorage } from 'web/lib/util/local'
 import TriangleDownFillIcon from 'web/lib/icons/triangle-down-fill-icon'
-import Curve from 'web/public/custom-components/curve'
 import { Answer } from 'common/answer'
-import { AnswerCommentInput } from '../comment-input'
-import { getAnswerColor } from '../answers/answers-panel'
-import { useChartAnswers } from '../charts/contract/choice'
 
 export function ContractTabs(props: {
   contract: Contract
@@ -141,102 +137,30 @@ const CommentsTabContent = memo(function CommentsTabContent(props: {
   )
   const topLevelComments = commentsByParent['_'] ?? []
 
-  const sortRow = comments.length > 0 && (
+  // if (contract.outcomeType === 'FREE_RESPONSE') {
-    <Row className="mb-4 items-center justify-end gap-4">
+  //   return <FreeResponseComments />
-      <BountiedContractSmallBadge contract={contract} showAmount />
+  // } else {
-      <Row className="items-center gap-1">
-        <div className="text-greyscale-4 text-sm">Sort by:</div>
-        <button
-          className="text-greyscale-6 w-20 text-sm"
-          onClick={() => setSort(sort === 'Newest' ? 'Best' : 'Newest')}
-        >
-          <Tooltip
-            text={sort === 'Best' ? 'Highest tips + bounties first.' : ''}
-          >
-            <Row className="items-center gap-1">
-              {sort}
-              <TriangleDownFillIcon className=" h-2 w-2" />
-            </Row>
-          </Tooltip>
-        </button>
-      </Row>
-    </Row>
-  )
-  if (contract.outcomeType === 'FREE_RESPONSE') {
-    const answersArray = useChartAnswers(contract)
-
   return (
     <>
       <ContractCommentInput className="mb-5" contract={contract} />
-        {sortRow}
+      <SortRow
-        {answerResponse && (
+        comments={comments}
-          <AnswerCommentInput
+        contract={contract}
+        sort={sort}
+        onSortClick={() => setSort(sort === 'Newest' ? 'Best' : 'Newest')}
+      />
+      {contract.outcomeType === 'FREE_RESPONSE' && (
+        <FreeResponseComments
           contract={contract}
           answerResponse={answerResponse}
           onCancelAnswerResponse={onCancelAnswerResponse}
-          />
+          topLevelComments={topLevelComments}
-        )}
+          commentsByParent={commentsByParent}
-        {topLevelComments.map((parent) => {
-          if (parent.answerOutcome === undefined) {
-            return (
-              <FeedCommentThread
-                key={parent.id}
-                contract={contract}
-                parentComment={parent}
-                threadComments={sortBy(
-                  commentsByParent[parent.id] ?? [],
-                  (c) => c.createdTime
-                )}
           tips={tips}
         />
-            )
-          }
-          const answer = contract.answers.find(
-            (answer) => answer.id === parent.answerOutcome
-          )
-          if (answer === undefined) {
-            console.error('Could not find answer that matches ID')
-            return <></>
-          }
-          const color = getAnswerColor(answer, answersArray)
-          return (
-            <>
-              <Row className="gap-2">
-                <CommentsAnswer
-                  answer={answer}
-                  contract={contract}
-                  color={color}
-                />
-              </Row>
-              <Row>
-                <div className="ml-1">
-                  <Curve size={28} strokeWidth={1} color="#D8D8EB" />
-                </div>
-                <div className="w-full pt-1">
-                  <FeedCommentThread
-                    key={parent.id}
-                    contract={contract}
-                    parentComment={parent}
-                    threadComments={sortBy(
-                      commentsByParent[parent.id] ?? [],
-                      (c) => c.createdTime
       )}
-                    tips={tips}
+      {contract.outcomeType != 'FREE_RESPONSE' &&
-                  />
+        topLevelComments.map((parent) => (
-                </div>
-              </Row>
-            </>
-          )
-        })}
-      </>
-    )
-  } else {
-    return (
-      <>
-        <ContractCommentInput className="mb-5" contract={contract} />
-        {sortRow}
-
-        {topLevelComments.map((parent) => (
           <FeedCommentThread
             key={parent.id}
             contract={contract}
@@ -250,7 +174,7 @@ const CommentsTabContent = memo(function CommentsTabContent(props: {
         ))}
     </>
   )
-  }
+  // }
 })
 
 const BetsTabContent = memo(function BetsTabContent(props: {
@@ -319,3 +243,33 @@ const BetsTabContent = memo(function BetsTabContent(props: {
     </>
   )
 })
+
+export function SortRow(props: {
+  comments: ContractComment[]
+  contract: Contract<AnyContractType>
+  sort: 'Best' | 'Newest'
+  onSortClick: () => void
+}) {
+  const { comments, contract, sort, onSortClick } = props
+  if (comments.length <= 0) {
+    return <></>
+  }
+  return (
+    <Row className="mb-4 items-center justify-end gap-4">
+      <BountiedContractSmallBadge contract={contract} showAmount />
+      <Row className="items-center gap-1">
+        <div className="text-greyscale-4 text-sm">Sort by:</div>
+        <button className="text-greyscale-6 w-20 text-sm" onClick={onSortClick}>
+          <Tooltip
+            text={sort === 'Best' ? 'Highest tips + bounties first.' : ''}
+          >
+            <Row className="items-center gap-1">
+              {sort}
+              <TriangleDownFillIcon className=" h-2 w-2" />
+            </Row>
+          </Tooltip>
+        </button>
+      </Row>
+    </Row>
+  )
+}

web/components/feed/feed-answer-comment-group.tsx

@@ -1,5 +1,9 @@
 import { Answer } from 'common/answer'
-import { Contract } from 'common/contract'
+import {
+  Contract,
+  FreeResponseContract,
+  MultipleChoiceContract,
+} from 'common/contract'
 import React, { useEffect, useRef, useState } from 'react'
 import { Col } from 'web/components/layout/col'
 import { Row } from 'web/components/layout/row'
@@ -7,6 +11,14 @@ import { Avatar } from 'web/components/avatar'
 import { CopyLinkDateTimeComponent } from 'web/components/feed/copy-link-date-time'
 import { useRouter } from 'next/router'
 import { UserLink } from 'web/components/user-link'
+import { FeedCommentThread } from './feed-comments'
+import { AnswerCommentInput } from '../comment-input'
+import { ContractComment } from 'common/comment'
+import { Dictionary, sortBy } from 'lodash'
+import { getAnswerColor } from '../answers/answers-panel'
+import Curve from 'web/public/custom-components/curve'
+import { CommentTipMap } from 'web/hooks/use-tip-txns'
+import { useChartAnswers } from '../charts/contract/choice'
 
 export function CommentsAnswer(props: {
   answer: Answer
@@ -60,3 +72,86 @@ export function CommentsAnswer(props: {
     </Row>
   )
 }
+
+export function FreeResponseComments(props: {
+  contract: FreeResponseContract | MultipleChoiceContract
+  answerResponse: Answer | undefined
+  onCancelAnswerResponse?: () => void
+  topLevelComments: ContractComment[]
+  commentsByParent: Dictionary<[ContractComment, ...ContractComment[]]>
+  tips: CommentTipMap
+}) {
+  const {
+    contract,
+    answerResponse,
+    onCancelAnswerResponse,
+    topLevelComments,
+    commentsByParent,
+    tips,
+  } = props
+  const answersArray = useChartAnswers(contract)
+  return (
+    <>
+      {answerResponse && (
+        <AnswerCommentInput
+          contract={contract}
+          answerResponse={answerResponse}
+          onCancelAnswerResponse={onCancelAnswerResponse}
+          answersArray={answersArray}
+        />
+      )}
+      {topLevelComments.map((parent) => {
+        if (parent.answerOutcome === undefined) {
+          return (
+            <FeedCommentThread
+              key={parent.id}
+              contract={contract}
+              parentComment={parent}
+              threadComments={sortBy(
+                commentsByParent[parent.id] ?? [],
+                (c) => c.createdTime
+              )}
+              tips={tips}
+            />
+          )
+        }
+        const answer = contract.answers.find(
+          (answer) => answer.id === parent.answerOutcome
+        )
+        if (answer === undefined) {
+          console.error('Could not find answer that matches ID')
+          return <></>
+        }
+        const color = getAnswerColor(answer, answersArray)
+        return (
+          <>
+            <Row className="gap-2">
+              <CommentsAnswer
+                answer={answer}
+                contract={contract}
+                color={color}
+              />
+            </Row>
+            <Row>
+              <div className="ml-1">
+                <Curve size={28} strokeWidth={1} color="#D8D8EB" />
+              </div>
+              <div className="w-full pt-1">
+                <FeedCommentThread
+                  key={parent.id}
+                  contract={contract}
+                  parentComment={parent}
+                  threadComments={sortBy(
+                    commentsByParent[parent.id] ?? [],
+                    (c) => c.createdTime
+                  )}
+                  tips={tips}
+                />
+              </div>
+            </Row>
+          </>
+        )
+      })}
+    </>
+  )
+}