Cleanup free answer comment stuff (#897)

* Remove unused most-recent-bet-time stuff

* Remove strange reply box hiding behavior

* Tidying markup

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

@@ -11,7 +11,6 @@ import clsx from 'clsx'
 import {
   ContractCommentInput,
   FeedComment,
-  getMostRecentCommentableBet,
 } from 'web/components/feed/feed-comments'
 import { CopyLinkDateTimeComponent } from 'web/components/feed/copy-link-date-time'
 import { useRouter } from 'next/router'
@@ -50,27 +49,6 @@ export function FeedAnswerCommentGroup(props: {
   const answerElementId = `answer-${answer.id}`
   const commentsByCurrentUser = (user && commentsByUserId[user.id]) ?? []
   const isFreeResponseContractPage = !!commentsByCurrentUser
-  const mostRecentCommentableBet = getMostRecentCommentableBet(
-    betsByCurrentUser,
-    commentsByCurrentUser,
-    user,
-    answer.number.toString()
-  )
-  const [usersMostRecentBetTimeAtLoad, setUsersMostRecentBetTimeAtLoad] =
-    useState<number | undefined>(
-      !user ? undefined : mostRecentCommentableBet?.createdTime ?? 0
-    )
-
-  useEffect(() => {
-    if (user && usersMostRecentBetTimeAtLoad === undefined)
-      setUsersMostRecentBetTimeAtLoad(
-        mostRecentCommentableBet?.createdTime ?? 0
-      )
-  }, [
-    mostRecentCommentableBet?.createdTime,
-    user,
-    usersMostRecentBetTimeAtLoad,
-  ])
 
   const scrollAndOpenReplyInput = useEvent(
     (comment?: ContractComment, answer?: Answer) => {
@@ -85,19 +63,6 @@ export function FeedAnswerCommentGroup(props: {
     }
   )
 
-  useEffect(() => {
-    // Only show one comment input for a bet at a time
-    if (
-      betsByCurrentUser.length > 1 &&
-      // inputRef?.textContent?.length === 0 && //TODO: editor.isEmpty
-      betsByCurrentUser.sort((a, b) => b.createdTime - a.createdTime)[0]
-        ?.outcome !== answer.number.toString()
-    )
-      setShowReply(false)
-    // Even if we pass memoized bets this still runs on every render, which we don't want
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [betsByCurrentUser.length, user, answer.number])
-
   useEffect(() => {
     if (router.asPath.endsWith(`#${answerElementId}`)) {
       setHighlighted(true)
@@ -105,10 +70,7 @@ export function FeedAnswerCommentGroup(props: {
   }, [answerElementId, router.asPath])
 
   return (
-    <Col
+    <Col className="relative flex-1 items-stretch gap-3">
-      className={'relative flex-1 items-stretch gap-3'}
-      key={answer.id + 'comment'}
-    >
       <Row
         className={clsx(
           'gap-3 space-x-3 pt-4 transition-all duration-1000',
@@ -135,9 +97,9 @@ export function FeedAnswerCommentGroup(props: {
             </span>
 
             {isFreeResponseContractPage && (
-              <div className={'sm:hidden'}>
+              <div className="sm:hidden">
                 <button
-                  className={'text-xs font-bold text-gray-500 hover:underline'}
+                  className="text-xs font-bold text-gray-500 hover:underline"
                   onClick={() => scrollAndOpenReplyInput(undefined, answer)}
                 >
                   Reply
@@ -146,9 +108,9 @@ export function FeedAnswerCommentGroup(props: {
             )}
           </Col>
           {isFreeResponseContractPage && (
-            <div className={'justify-initial hidden sm:block'}>
+            <div className="justify-initial hidden sm:block">
               <button
-                className={'text-xs font-bold text-gray-500 hover:underline'}
+                className="text-xs font-bold text-gray-500 hover:underline"
                 onClick={() => scrollAndOpenReplyInput(undefined, answer)}
               >
                 Reply
@@ -170,7 +132,7 @@ export function FeedAnswerCommentGroup(props: {
         ))}
       </Col>
       {showReply && (
-        <div className={'relative ml-7'}>
+        <div className="relative ml-7">
           <span
             className="absolute -left-1 -ml-[1px] mt-[1.25rem] h-2 w-0.5 rotate-90 bg-gray-200"
             aria-hidden="true"