Merge pull request #597 from ResearchHub/reply_button_fixes

Bug Fix: Reply/Comment buttons not showing on feed items/comments/peer reviews

Author: michaelcanova

components/Feed/BaseFeedItem.tsx

@@ -7,6 +7,7 @@ import {
   FeedPostContent,
   mapFeedContentTypeToContentType,
 } from '@/types/feed';
+import { shouldShowCommentButton } from '@/components/Feed/lib/feedUtils';
 import { FeedItemHeader } from '@/components/Feed/FeedItemHeader';
 import { FeedItemActions } from '@/components/Feed/FeedItemActions';
 import { CardWrapper } from './CardWrapper';
@@ -417,7 +418,7 @@ export const BaseFeedItem: FC<BaseFeedItemProps> = ({
               onFeedItemClick={onFeedItemClick}
               bounties={showBountyInfo ? undefined : content.bounties}
               hideReportButton={hideReportButton}
-              hideCommentButton={(entry.metrics?.comments ?? 0) === 0}
+              hideCommentButton={!shouldShowCommentButton(entry.metrics, Boolean(href))}
             />
           </div>
         )}

components/Feed/FeedItemActions.tsx

@@ -422,7 +422,7 @@ export const FeedItemActions: FC<FeedItemActionsProps> = ({
   return (
     <>
       <div className="flex items-center justify-between w-full">
-        <div className="flex items-center space-x-3 md:space-x-4 flex-nowrap overflow-x-auto">
+        <div className="flex items-center space-x-3 md:space-x-4 flex-nowrap overflow-visible">
           <div
             className={cn(
               'flex items-center h-8 border rounded-full bg-white transition-all',

components/Feed/items/FeedItemBountyComment.tsx

@@ -2,6 +2,7 @@
 
 import { FC, useState } from 'react';
 import { FeedEntry, FeedBountyContent } from '@/types/feed';
+import { shouldShowCommentButton } from '@/components/Feed/lib/feedUtils';
 import { Topic } from '@/types/topic';
 import { FeedItemHeader } from '@/components/Feed/FeedItemHeader';
 import { FeedItemActions } from '@/components/Feed/FeedItemActions';
@@ -424,7 +425,7 @@ export const FeedItemBountyComment: FC<FeedItemBountyCommentProps> = ({
                 entry.relatedWork?.unifiedDocumentId?.toString() || undefined
               }
               onFeedItemClick={onFeedItemClick}
-              hideCommentButton={(entry.metrics?.comments ?? 0) === 0}
+              hideCommentButton={!shouldShowCommentButton(entry.metrics, Boolean(onReply))}
             />
           </div>
         )}

components/Feed/items/FeedItemComment.tsx

@@ -3,6 +3,7 @@
 import { FC, useState } from 'react';
 import React from 'react';
 import { FeedEntry, FeedCommentContent, ParentCommentPreview } from '@/types/feed';
+import { shouldShowCommentButton } from '@/components/Feed/lib/feedUtils';
 import { FeedItemHeader } from '@/components/Feed/FeedItemHeader';
 import { FeedItemActions } from '@/components/Feed/FeedItemActions';
 import { CommentReadOnly } from '@/components/Comment/CommentReadOnly';
@@ -255,7 +256,7 @@ export const FeedItemComment: FC<FeedItemCommentProps> = ({
                 tips={entry.tips}
                 relatedDocumentTopics={entry.relatedWork?.topics}
                 onFeedItemClick={onFeedItemClick}
-                hideCommentButton={(entry.metrics?.comments ?? 0) === 0}
+                hideCommentButton={!shouldShowCommentButton(entry.metrics, Boolean(onReply))}
               />
             </div>
           </div>

components/Feed/lib/feedUtils.ts

@@ -0,0 +1,16 @@
+import { ContentMetrics } from '@/types/metrics';
+
+/**
+ * Determines if the comment/reply button should be shown.
+ * Show the button if there are comments to view OR the user can add one.
+ *
+ * @param metrics - The content metrics containing comment count
+ * @param hasCommentAction - Whether the user has a way to comment (via callback or navigation)
+ */
+export function shouldShowCommentButton(
+  metrics: ContentMetrics | undefined,
+  hasCommentAction: boolean
+): boolean {
+  const hasComments = (metrics?.comments ?? 0) > 0;
+  return hasComments || hasCommentAction;
+}