Show feed item for FR answer submission

web/components/answers/answer-item.tsx

@@ -8,7 +8,6 @@ import { Col } from '../layout/col'
 import { Row } from '../layout/row'
 import { Avatar } from '../avatar'
 import { SiteLink } from '../site-link'
-import dayjs from 'dayjs'
 import { BuyButton } from '../yes-no-selector'
 import { formatPercent } from '../../../common/util/format'
 import { getOutcomeProbability } from '../../../common/calculate'
@@ -35,7 +34,7 @@ export function AnswerItem(props: {
     onDeselect,
   } = props
   const { resolution, resolutions, totalShares } = contract
-  const { username, avatarUrl, name, createdTime, number, text } = answer
+  const { username, avatarUrl, name, number, text } = answer
   const isChosen = chosenProb !== undefined
 
   const prob = getOutcomeProbability(totalShares, answer.id)
@@ -73,7 +72,7 @@ export function AnswerItem(props: {
               <div className="truncate">{name}</div>
             </Row>
           </SiteLink>
-          {/* TODO: Show total pool */}
+          {/* TODO: Show total pool? */}
         </Row>
 
         {isBetting && (

web/components/contract-feed.tsx

@@ -382,6 +382,29 @@ function FeedDescription(props: { contract: Contract }) {
   )
 }
 
+function FeedAnswer(props: { contract: Contract; outcome: string }) {
+  const { contract, outcome } = props
+  const answer = contract?.answers?.[Number(outcome) - 1]
+  if (!answer) return null
+
+  return (
+    <>
+      <Avatar username={answer.username} avatarUrl={answer.avatarUrl} />
+      <div className="min-w-0 flex-1 py-1.5">
+        <div className="text-sm text-gray-500">
+          <UserLink
+            className="text-gray-900"
+            name={answer.name}
+            username={answer.username}
+          />{' '}
+          submitted answer <OutcomeLabel outcome={outcome} />{' '}
+          <Timestamp time={contract.createdTime} />
+        </div>
+      </div>
+    </>
+  )
+}
+
 function OutcomeIcon(props: { outcome?: string }) {
   const { outcome } = props
   switch (outcome) {
@@ -638,6 +661,7 @@ function MaybeOutcomeLabel(props: { outcome: string; feedType: FeedType }) {
     <span>
       {' '}
       of <OutcomeLabel outcome={outcome} />
+      {/* TODO: Link to the correct e.g. #23 */}
     </span>
   )
 }
@@ -684,7 +708,7 @@ export function ContractFeed(props: {
     ? bets.filter((bet) => !bet.isAnte)
     : bets.filter((bet) => !(bet.isAnte && (bet.outcome as string) === '0'))
 
-  if (feedType == 'multi') {
+  if (feedType === 'multi') {
     bets = bets.filter((bet) => bet.outcome === outcome)
   }
 
@@ -702,6 +726,10 @@ export function ContractFeed(props: {
   if (contract.resolution) {
     allItems.push({ type: 'resolve', id: `${contract.resolutionTime}` })
   }
+  if (feedType === 'multi') {
+    // Hack to add some more padding above the 'multi' feedType, by adding a null item
+    allItems.unshift({ type: '', id: -1 })
+  }
 
   // If there are more than 5 items, only show the first, an expand item, and last 3
   let items = allItems
@@ -730,6 +758,8 @@ export function ContractFeed(props: {
                   <FeedQuestion contract={contract} />
                 ) : feedType === 'market' ? (
                   <FeedDescription contract={contract} />
+                ) : feedType === 'multi' ? (
+                  <FeedAnswer contract={contract} outcome={outcome} />
                 ) : null
               ) : activityItem.type === 'comment' ? (
                 <FeedComment