Proposal Tab Improvements

src/modules/opengov/ProposalDetailPage/DesktopProposalDetail.tsx

@@ -34,13 +34,12 @@ export default function DesktopProposalDetail({
   const { chatId } = useProposalDetailContext()
   const { allIds, isOpen, isLoading, selectedTab, setIsOpen, setSelectedTab } =
     useCommentDrawer(proposal)
-  const { data: postMetadata } = getPostMetadataQuery.useQuery(chatId ?? '')
+  const { data: postMetadata, isLoading: isLoadingMetadata } =
+    getPostMetadataQuery.useQuery(chatId ?? '')
   const lastThreeMessageIds = allIds.slice(0, 3)
   const lastThreeMessages = getPostQuery.useQueries(lastThreeMessageIds)
   const isLoadingMessages = useIsAnyQueriesLoading(lastThreeMessages)
 
-  const ref = useRef<HTMLDivElement | null>(null)
-
   const hasGrillComments = !isLoading && allIds.length > 0
 
   useEffect(() => {
@@ -55,6 +54,11 @@ export default function DesktopProposalDetail({
     }
   }, [isOpen])
 
+  const totalCommentsCount =
+    isLoadingMetadata && chatId
+      ? 0
+      : (postMetadata?.totalCommentsCount ?? 0) + proposal.comments.length
+
   return (
     <>
       <div
@@ -96,6 +100,7 @@ export default function DesktopProposalDetail({
                   <LatestCommentFromExternalSources
                     setIsOpenDrawer={setIsOpen}
                     proposal={proposal}
+                    totalCommentsCount={totalCommentsCount}
                   />
                 )
               }
@@ -105,7 +110,7 @@ export default function DesktopProposalDetail({
                     lastThreeMessages={lastThreeMessages}
                     chatId={chatId}
                     setIsOpenDrawer={setIsOpen}
-                    totalCommentsCount={postMetadata?.totalCommentsCount || 0}
+                    totalCommentsCount={totalCommentsCount}
                   />
                 )
               }
@@ -162,9 +167,11 @@ function StickyRightPanel({
 function LatestCommentFromExternalSources({
   proposal,
   setIsOpenDrawer,
+  totalCommentsCount,
 }: {
   proposal: Proposal
   setIsOpenDrawer: (isOpen: boolean) => void
+  totalCommentsCount: number
 }) {
   const lastThreeComments = proposal.comments.slice(0, 3).toReversed()
   const length = proposal.comments.length
@@ -188,8 +195,8 @@ function LatestCommentFromExternalSources({
         onClick={() => setIsOpenDrawer(true)}
         className='mt-auto w-full'
       >
-        Show {length > 1 && 'all '}
-        {length ? `${length} ` : ''} Comments
+        Show {totalCommentsCount > 1 && 'all '}
+        {totalCommentsCount ? `${totalCommentsCount} ` : ''} Comments
       </Button>
     </div>
   )

src/modules/opengov/ProposalDetailPage/MobileProposalDetail.tsx

@@ -30,11 +30,17 @@ export default function MobileProposalDetailPage({
 
   const [isOpenDetailModal, setIsOpenDetailModal] = useState(false)
 
-  const { data: postMetadata } = getPostMetadataQuery.useQuery(chatId ?? '')
+  const { data: postMetadata, isLoading: isLoadingMetadata } =
+    getPostMetadataQuery.useQuery(chatId ?? '')
 
   const { selectedTab, setSelectedTab, isOpen, setIsOpen } =
     useCommentDrawer(proposal)
 
+  const usedIsLoadingMetadata = isLoadingMetadata && chatId
+  const totalComment = usedIsLoadingMetadata
+    ? 0
+    : (postMetadata?.totalCommentsCount ?? 0) + proposal.comments.length
+
   return (
     <div
       className={cx('relative flex flex-1 flex-col overflow-hidden', className)}
@@ -72,10 +78,7 @@ export default function MobileProposalDetailPage({
         </div>
         <div className='container-page absolute bottom-0 h-20 w-full border-t border-border-gray bg-background-light py-4'>
           <Button size='lg' className='w-full' onClick={() => setIsOpen(true)}>
-            Comment{' '}
-            {postMetadata?.totalCommentsCount
-              ? `(${postMetadata.totalCommentsCount})`
-              : ''}
+            Comment {totalComment > 0 ? `(${totalComment})` : ''}
           </Button>
         </div>
       </div>
@@ -86,24 +89,31 @@ export default function MobileProposalDetailPage({
           variant='transparent'
           className={cx(
             'flex items-center justify-center gap-1 rounded-lg py-1 text-sm',
-            selectedTab === 'grill' && 'bg-background-primary text-white'
+            selectedTab === 'grill' &&
+              'bg-background-primary/10 text-background-primary'
           )}
           interactive='none'
           onClick={() => setSelectedTab('grill')}
         >
-          <span>Grill</span>
+          <span>
+            Grill
+            {usedIsLoadingMetadata
+              ? ''
+              : ` (${postMetadata?.totalCommentsCount ?? 0})`}
+          </span>
         </Button>
         <Button
           size='noPadding'
           variant='transparent'
           className={cx(
             'flex items-center justify-center gap-1 rounded-lg py-1 text-sm',
-            selectedTab === 'others' && 'bg-background-primary text-white'
+            selectedTab === 'others' &&
+              'bg-background-primary/10 text-background-primary'
           )}
           interactive='none'
           onClick={() => setSelectedTab('others')}
         >
-          <span>Other Sources</span>
+          <span>Other Sources ({proposal.comments.length ?? 0})</span>
         </Button>
       </div>
       <div className='relative z-10 w-full'>

src/modules/opengov/ProposalDetailPage/ProposalStatusCard.tsx

@@ -39,6 +39,10 @@ export default function ProposalStatusCard({
 
   const isLoadingMetadata = isLoading && !!chatId
 
+  const totalComment = isLoadingMetadata
+    ? 0
+    : (postMetadata?.totalCommentsCount ?? 0) + proposal.comments.length
+
   return (
     <Card className='flex flex-col gap-4 bg-background-light'>
       <div className='flex items-center justify-between gap-4'>
@@ -136,12 +140,7 @@ export default function ProposalStatusCard({
           onClick={() => onCommentButtonClick()}
           className='w-full'
         >
-          {isLoadingMetadata
-            ? ''
-            : postMetadata?.totalCommentsCount ||
-              proposal.comments.length ||
-              ''}{' '}
-          Comments
+          {!totalComment ? '' : totalComment} Comments
         </Button>
       )}
       <ProposalMetadataModal