fix: add rounded-16 to CollapsedRepliesPreview and prevent rendering with no replies

- Add rounded-16 class to button with proper class order
- Add guard clause to return null when no replies exist
- Fix React hooks rules violation by moving useMemo before early return
- Update test to use proper testing library methods

Co-authored-by: Chris Bongers <rebelchris@users.noreply.github.com>

Author: github-actions[bot]

packages/shared/src/components/comments/CollapsedRepliesPreview.spec.tsx

@@ -53,6 +53,11 @@ describe('CollapsedRepliesPreview', () => {
     jest.clearAllMocks();
   });
 
+  it('should not render when there are no replies', () => {
+    renderComponent([], onExpand);
+    expect(screen.queryByRole('button')).not.toBeInTheDocument();
+  });
+
   it('should render single reply text correctly', () => {
     const replies = [createReply('r1', 'u1', 'user1')];
     renderComponent(replies, onExpand);

packages/shared/src/components/comments/CollapsedRepliesPreview.tsx

@@ -17,8 +17,12 @@ export default function CollapsedRepliesPreview({
   replies,
   onExpand,
   className,
-}: CollapsedRepliesPreviewProps): ReactElement {
+}: CollapsedRepliesPreviewProps): ReactElement | null {
   const uniqueAuthors = useMemo(() => {
+    if (!replies.length) {
+      return [];
+    }
+
     const seen = new Set<string>();
 
     return replies.reduce<Comment['author'][]>((authors, { node }) => {
@@ -37,11 +41,15 @@ export default function CollapsedRepliesPreview({
   const replyCount = replies.length;
   const replyText = replyCount === 1 ? 'reply' : 'replies';
 
+  if (!replies.length) {
+    return null;
+  }
+
   return (
     <button
       type="button"
       className={classNames(
-        'flex w-full cursor-pointer items-center gap-2 px-4 py-3 hover:bg-surface-hover',
+        'flex w-full cursor-pointer items-center gap-2 rounded-16 px-4 py-3 hover:bg-surface-hover',
         className,
       )}
       onClick={onExpand}