Fix free response comment threading

web/components/contract/contract-tabs.tsx

@@ -77,13 +77,34 @@ const CommentsTabContent = memo(function CommentsTabContent(props: {
   const comments = useComments(contract.id) ?? props.comments
   const [sort, setSort] = useState<'Newest' | 'Best'>('Newest')
   const me = useUser()
+
   if (comments == null) {
     return <LoadingIndicator />
   }
-  if (contract.outcomeType === 'FREE_RESPONSE') {
-    const generalComments = comments.filter(
-      (c) => c.answerOutcome === undefined && c.betId === undefined
+
+  const tipsOrBountiesAwarded =
+    Object.keys(tips).length > 0 || comments.some((c) => c.bountiesAwarded)
+
+  const sortedComments = sortBy(comments, (c) =>
+    sort === 'Newest'
+      ? c.createdTime
+      : // Is this too magic? If there are tips/bounties, 'Best' shows your own comments made within the last 10 minutes first, then sorts by score
+      tipsOrBountiesAwarded &&
+        c.createdTime > Date.now() - 10 * MINUTE_MS &&
+        c.userId === me?.id
+      ? -Infinity
+      : -((c.bountiesAwarded ?? 0) + sum(Object.values(tips[c.id] ?? [])))
   )
+
+  const commentsByParent = groupBy(
+    sortedComments,
+    (c) => c.replyToCommentId ?? '_'
+  )
+  const topLevelComments = commentsByParent['_'] ?? []
+  // Top level comments are reverse-chronological, while replies are chronological
+  if (sort === 'Newest') topLevelComments.reverse()
+
+  if (contract.outcomeType === 'FREE_RESPONSE') {
     const sortedAnswers = sortBy(
       contract.answers,
       (a) => -getOutcomeProbability(contract, a.id)
@@ -92,6 +113,9 @@ const CommentsTabContent = memo(function CommentsTabContent(props: {
       comments,
       (c) => c.answerOutcome ?? c.betOutcome ?? '_'
     )
+    const generalTopLevelComments = topLevelComments.filter(
+      (c) => c.answerOutcome === undefined && c.betId === undefined
+    )
     return (
       <>
         {sortedAnswers.map((answer) => (
@@ -115,12 +139,12 @@ const CommentsTabContent = memo(function CommentsTabContent(props: {
           <div className="text-md mt-8 mb-2 text-left">General Comments</div>
           <div className="mb-4 w-full border-b border-gray-200" />
           <ContractCommentInput className="mb-5" contract={contract} />
-          {generalComments.map((comment) => (
+          {generalTopLevelComments.map((comment) => (
             <FeedCommentThread
               key={comment.id}
               contract={contract}
               parentComment={comment}
-              threadComments={[]}
+              threadComments={commentsByParent[comment.id] ?? []}
               tips={tips}
             />
           ))}
@@ -128,24 +152,6 @@ const CommentsTabContent = memo(function CommentsTabContent(props: {
       </>
     )
   } else {
-    const tipsOrBountiesAwarded =
-      Object.keys(tips).length > 0 || comments.some((c) => c.bountiesAwarded)
-
-    const commentsByParent = groupBy(
-      sortBy(comments, (c) =>
-        sort === 'Newest'
-          ? -c.createdTime
-          : // Is this too magic? If there are tips/bounties, 'Best' shows your own comments made within the last 10 minutes first, then sorts by score
-          tipsOrBountiesAwarded &&
-            c.createdTime > Date.now() - 10 * MINUTE_MS &&
-            c.userId === me?.id
-          ? -Infinity
-          : -((c.bountiesAwarded ?? 0) + sum(Object.values(tips[c.id] ?? [])))
-      ),
-      (c) => c.replyToCommentId ?? '_'
-    )
-
-    const topLevelComments = commentsByParent['_'] ?? []
     return (
       <>
         <ContractCommentInput className="mb-5" contract={contract} />

web/pages/labs/index.tsx

@@ -16,7 +16,7 @@ export default function LabsPage() {
         url="/labs"
       />
       <Col className="px-4">
-        <Title className="sm:!mt-0" text="Manifold Labs" />
+        <Title className="sm:!mt-0" text="🧪 Manifold Labs" />
 
         <Masonry
           breakpointCols={{ default: 2, 768: 1 }}