Show the number of comments and bets

web/components/contract/contract-tabs.tsx

@@ -9,6 +9,7 @@ import { Tabs } from '../layout/tabs'
 import { Col } from '../layout/col'
 import { CommentTipMap } from 'web/hooks/use-tip-txns'
 import { LiquidityProvision } from 'common/liquidity-provision'
+import { useComments } from 'web/hooks/use-comments'
 
 export function ContractTabs(props: {
   contract: Contract
@@ -18,11 +19,15 @@ export function ContractTabs(props: {
   comments: Comment[]
   tips: CommentTipMap
 }) {
-  const { contract, user, bets, comments, tips, liquidityProvisions } = props
+  const { contract, user, bets, tips, liquidityProvisions } = props
   const { outcomeType } = contract
 
   const userBets = user && bets.filter((bet) => bet.userId === user.id)
 
+  // Load comments here, so the badge count will be correct
+  const updatedComments = useComments(contract.id)
+  const comments = updatedComments ?? props.comments
+
   const betActivity = (
     <ContractActivity
       contract={contract}
@@ -89,8 +94,12 @@ export function ContractTabs(props: {
     <Tabs
       currentPageForAnalytics={'contract'}
       tabs={[
-        { title: 'Comments', content: commentActivity },
-        { title: 'Bets', content: betActivity },
+        {
+          title: 'Comments',
+          content: commentActivity,
+          badge: `${comments.length}`,
+        },
+        { title: 'Bets', content: betActivity, badge: `${bets.length}` },
         ...(!user || !userBets?.length
           ? []
           : [{ title: 'Your bets', content: yourTrades }]),

web/components/feed/contract-activity.tsx

@@ -2,7 +2,6 @@ import { Contract } from 'web/lib/firebase/contracts'
 import { Comment } from 'web/lib/firebase/comments'
 import { Bet } from 'common/bet'
 import { useBets } from 'web/hooks/use-bets'
-import { useComments } from 'web/hooks/use-comments'
 import { getSpecificContractActivityItems } from './activity-items'
 import { FeedItems } from './feed-items'
 import { User } from 'common/user'
@@ -26,10 +25,7 @@ export function ContractActivity(props: {
     props
 
   const contract = useContractWithPreload(props.contract) ?? props.contract
-
-  const updatedComments = useComments(contract.id)
-  const comments = updatedComments ?? props.comments
-
+  const comments = props.comments
   const updatedBets = useBets(contract.id)
   const bets = (updatedBets ?? props.bets).filter(
     (bet) => !bet.isRedemption && bet.amount !== 0

web/components/layout/tabs.tsx

@@ -10,6 +10,8 @@ type Tab = {
   content: ReactNode
   // If set, change the url to this href when the tab is selected
   href?: string
+  // If set, show a badge with this content
+  badge?: string
 }
 
 export function Tabs(props: {
@@ -63,6 +65,9 @@ export function Tabs(props: {
               >
                 <Row className={'items-center justify-center gap-1'}>
                   {tab.tabIcon && <span> {tab.tabIcon}</span>}
+                  {tab.badge ? (
+                    <div className="px-0.5 font-bold">{tab.badge}</div>
+                  ) : null}
                   {tab.title}
                 </Row>
               </a>