Simplify general comments logic, toggle comment boxes

web/components/contract/contract-tabs.tsx

@@ -7,6 +7,7 @@ import { ContractActivity } from '../feed/contract-activity'
 import { ContractBetsTable, MyBetsSummary } from '../bets-list'
 import { Spacer } from '../layout/spacer'
 import { Tabs } from '../layout/tabs'
+import { Col } from '../layout/col'
 
 export function ContractTabs(props: {
   contract: Contract
@@ -33,6 +34,7 @@ export function ContractTabs(props: {
   )
 
   const commentActivity = (
+    <>
       <ContractActivity
         contract={contract}
         bets={bets}
@@ -40,11 +42,26 @@ export function ContractTabs(props: {
         user={user}
         mode={
           contract.outcomeType === 'FREE_RESPONSE'
-          ? 'free-response-comments'
+            ? 'free-response-comment-answer-groups'
             : 'comments'
         }
         betRowClassName="!mt-0 xl:hidden"
       />
+      {contract.outcomeType === 'FREE_RESPONSE' && (
+        <Col className={'mt-8 flex w-full '}>
+          <div className={'text-md mt-8 mb-2 text-left'}>General Comments</div>
+          <div className={'mb-4 w-full border-b border-gray-200'} />
+          <ContractActivity
+            contract={contract}
+            bets={bets}
+            comments={comments}
+            user={user}
+            mode={'comments'}
+            betRowClassName="!mt-0 xl:hidden"
+          />
+        </Col>
+      )}
+    </>
   )
 
   const yourTrades = (

web/components/feed/activity-items.ts

@@ -23,7 +23,6 @@ export type ActivityItem =
   | CloseItem
   | ResolveItem
   | CommentInputItem
-  | GeneralCommentsItem
 
 type BaseActivityItem = {
   id: string
@@ -76,11 +75,6 @@ export type AnswerGroupItem = BaseActivityItem & {
   items: ActivityItem[]
 }
 
-export type GeneralCommentsItem = BaseActivityItem & {
-  type: 'generalcomments'
-  items: ActivityItem[]
-}
-
 export type CloseItem = BaseActivityItem & {
   type: 'close'
 }
@@ -330,16 +324,6 @@ function getAnswerAndCommentInputGroups(
       }
     })
     .filter((group) => group.answer) as ActivityItem[]
-
-  const outcome = GENERAL_COMMENTS_OUTCOME_ID
-  const items = collateCommentsSectionForOutcome(outcome)
-  answerGroups.unshift({
-    id: outcome,
-    type: 'generalcomments' as const,
-    contract,
-    items,
-  })
-
   return answerGroups
 }
 
@@ -559,7 +543,7 @@ export function getSpecificContractActivityItems(
   comments: Comment[],
   user: User | null | undefined,
   options: {
-    mode: 'comments' | 'bets' | 'free-response-comments'
+    mode: 'comments' | 'bets' | 'free-response-comment-answer-groups'
   }
 ) {
   const { mode } = options
@@ -581,19 +565,30 @@ export function getSpecificContractActivityItems(
       break
 
     case 'comments':
-      items.push(...getCommentsWithPositions(bets, comments, contract))
+      const nonFreeResponseComments = comments.filter(
+        (comment) => comment.answerOutcome === undefined
+      )
+      const nonFreeResponseBets =
+        contract.outcomeType === 'FREE_RESPONSE' ? [] : bets
+      items.push(
+        ...getCommentsWithPositions(
+          nonFreeResponseBets,
+          nonFreeResponseComments,
+          contract
+        )
+      )
 
       items.push({
         type: 'commentInput',
         id: 'commentInput',
         contract,
         betsByCurrentUser: user
-          ? bets.filter((bet) => bet.userId === user.id)
+          ? nonFreeResponseBets.filter((bet) => bet.userId === user.id)
           : [],
-        comments: comments,
+        comments: nonFreeResponseComments,
       })
       break
-    case 'free-response-comments':
+    case 'free-response-comment-answer-groups':
       items.push(
         ...getAnswerAndCommentInputGroups(
           contract as FullContract<DPM, FreeResponse>,

web/components/feed/contract-activity.tsx

@@ -22,7 +22,7 @@ export function ContractActivity(props: {
     | 'all'
     | 'comments'
     | 'bets'
-    | 'free-response-comments'
+    | 'free-response-comment-answer-groups'
   contractPath?: string
   className?: string
   betRowClassName?: string
@@ -46,7 +46,7 @@ export function ContractActivity(props: {
         })
       : mode === 'comments' ||
         mode === 'bets' ||
-        mode === 'free-response-comments'
+        mode === 'free-response-comment-answer-groups'
       ? getSpecificContractActivityItems(contract, bets, comments, user, {
           mode,
         })

web/components/feed/feed-items.tsx

@@ -123,8 +123,6 @@ function FeedItem(props: { item: ActivityItem }) {
       return <FeedResolve {...item} />
     case 'commentInput':
       return <CommentInput {...item} />
-    case 'generalcomments':
-      return <FeedGeneralComments {...item} />
   }
 }
 
@@ -268,11 +266,11 @@ export function CommentInput(props: {
 
   return (
     <>
-      <Row className={'flex w-full gap-2 pt-3'}>
+      <Row className={'flex w-full gap-2'}>
         <div>
           <Avatar avatarUrl={user?.avatarUrl} username={user?.username} />
         </div>
-        <div className={'min-w-0 flex-1 py-1.5'}>
+        <div className={'min-w-0 flex-1'}>
           <div className="text-sm text-gray-500">
             {mostRecentCommentableBet && (
               <BetStatusText
@@ -294,12 +292,14 @@ export function CommentInput(props: {
                 </>
               </>
             )}
+            {(answerOutcome === undefined || focused) && (
               <div className="mt-2">
                 <Textarea
                   value={comment}
                   onChange={(e) => setComment(e.target.value)}
                   className="textarea textarea-bordered w-full resize-none"
                   placeholder="Add a comment..."
+                  autoFocus={true}
                   rows={answerOutcome == undefined || focused ? 3 : 1}
                   onFocus={() => setFocused(true)}
                   onBlur={() => !comment && setFocused(false)}
@@ -310,20 +310,29 @@ export function CommentInput(props: {
                     }
                   }}
                 />
+              </div>
+            )}
+          </div>
           <button
-                className={
-                  'btn btn-outline btn-sm text-transform: mt-1 capitalize'
-                }
+            className={'btn btn-outline btn-sm text-transform: mt-1 capitalize'}
             onClick={() => {
+              if (answerOutcome === undefined) {
+                submitComment(id)
+              } else if (!focused) {
+                setFocused(true)
+              } else {
                 submitComment(id)
                 setFocused(false)
+              }
             }}
           >
-                {user ? 'Comment' : 'Sign in to comment'}
+            {user
+              ? !focused && answerOutcome !== undefined
+                ? 'Add Comment'
+                : 'Comment'
+              : 'Sign in to comment'}
           </button>
         </div>
-          </div>
-        </div>
       </Row>
     </>
   )
@@ -853,37 +862,6 @@ function FeedAnswerGroup(props: {
   )
 }
 
-function FeedGeneralComments(props: {
-  contract: FullContract<any, FreeResponse>
-  items: ActivityItem[]
-  type: string
-}) {
-  const { items } = props
-
-  return (
-    <Col className={'mt-8 flex w-full '}>
-      <div className={'text-md mt-8 mb-2 text-left'}>General Comments</div>
-      <div className={'w-full border-b border-gray-200'} />
-      {items.map((item, index) => (
-        <div
-          key={item.id}
-          className={clsx('relative', index !== items.length - 1 && 'pb-4')}
-        >
-          {index !== items.length - 1 ? (
-            <span
-              className="absolute top-5 left-5 -ml-px h-[calc(100%-1rem)] w-0.5 bg-gray-200"
-              aria-hidden="true"
-            />
-          ) : null}
-          <div className="relative flex items-start space-x-3">
-            <FeedItem item={item} />
-          </div>
-        </div>
-      ))}
-    </Col>
-  )
-}
-
 // TODO: Should highlight the entire Feed segment
 function FeedExpand(props: { setExpanded: (expanded: boolean) => void }) {
   const { setExpanded } = props