fix(topics): make OP reply icon clickable to open reply composer (#164)

The ChatCircle icon on the original post looked like a reply button but
was a static display. Now it opens the reply composer targeting the OP,
matching the behavior of reply buttons on comment cards.

src/components/topic-detail-client.test.tsx

···
 
     it('shows reply buttons on reply cards when authenticated', () => {
       render(<TopicDetailClient topic={topic} replies={replies} />)
-      const replyButtons = screen.getAllByRole('button', { name: /reply to/i })
-      expect(replyButtons.length).toBeGreaterThan(0)
+      // Reply buttons on comment cards (excludes the OP reply button)
+      const replyCardButtons = screen.getAllByRole('button', { name: /^Reply to (?!this topic)/i })
+      expect(replyCardButtons.length).toBeGreaterThan(0)
+    })
+
+    it('shows reply button on the original post when authenticated', () => {
+      render(<TopicDetailClient topic={topic} replies={replies} />)
+      expect(screen.getByRole('button', { name: /reply to this topic/i })).toBeInTheDocument()
     })
   })
 
···
       const user = userEvent.setup()
       render(<TopicDetailClient topic={topic} replies={replies} />)
 
-      const replyButtons = screen.getAllByRole('button', { name: /reply to/i })
-      await user.click(replyButtons[0]!)
+      // Click a reply card button (not the OP reply button)
+      const replyCardButtons = screen.getAllByRole('button', { name: /^Reply to (?!this topic)/i })
+      await user.click(replyCardButtons[0]!)
 
       // The composer should expand and show the reply target banner
       const firstReply = replies[0]!
···
       expect(screen.getByText(`Replying to @${expectedHandle}`)).toBeInTheDocument()
     })
 
+    it('sets reply target when reply button is clicked on the original post', async () => {
+      const user = userEvent.setup()
+      render(<TopicDetailClient topic={topic} replies={replies} />)
+
+      await user.click(screen.getByRole('button', { name: /reply to this topic/i }))
+
+      // The composer should expand and show the reply target banner with the topic author
+      expect(screen.getByText(`Replying to @${topic.authorDid}`)).toBeInTheDocument()
+    })
+
     it('clears reply target when dismiss button is clicked', async () => {
       const user = userEvent.setup()
       render(<TopicDetailClient topic={topic} replies={replies} />)
 
-      // Click reply to set a target
-      const replyButtons = screen.getAllByRole('button', { name: /reply to/i })
-      await user.click(replyButtons[0]!)
+      // Click reply on a reply card to set a target
+      const replyCardButtons = screen.getAllByRole('button', { name: /^Reply to (?!this topic)/i })
+      await user.click(replyCardButtons[0]!)
 
       const firstReply = replies[0]!
       const expectedHandle = firstReply.author?.handle ?? firstReply.authorDid
···
   describe('locked topic', () => {
     it('hides reply buttons when topic is locked', () => {
       render(<TopicDetailClient topic={topic} replies={replies} isLocked />)
-      expect(screen.queryByRole('button', { name: /reply to/i })).not.toBeInTheDocument()
+      // Neither OP reply button nor reply card buttons should be present
+      expect(screen.queryByRole('button', { name: /reply to this topic/i })).not.toBeInTheDocument()
+      expect(
+        screen.queryByRole('button', { name: /^Reply to (?!this topic)/i })
+      ).not.toBeInTheDocument()
     })
 
     it('shows locked notice in composer when topic is locked', () => {

src/components/topic-detail-client.tsx

···
     <>
       {/* Topic with edit button for author */}
       <div className="mt-4">
-        <TopicView topic={topic} canEdit={canEdit} onEdit={handleEdit} />
+        <TopicView
+          topic={topic}
+          canEdit={canEdit}
+          onEdit={handleEdit}
+          onReply={
+            isAuthenticated && !isLocked
+              ? () =>
+                  handleReply({
+                    uri: topic.uri,
+                    cid: topic.cid,
+                    authorHandle: topic.authorDid,
+                    snippet: topic.content.slice(0, 100),
+                  })
+              : undefined
+          }
+        />
       </div>
 
       {/* Reply thread with reply buttons */}

src/components/topic-view.test.tsx

···
     }
   })
 
-  it('renders reply count', () => {
+  it('renders reply count as static text when onReply is not provided', () => {
     render(<TopicView topic={topic} />)
     expect(screen.getByLabelText(`${topic.replyCount} replies`)).toBeInTheDocument()
+    expect(screen.getByLabelText(`${topic.replyCount} replies`).tagName).toBe('SPAN')
+  })
+
+  it('renders reply count as clickable button when onReply is provided', () => {
+    render(<TopicView topic={topic} onReply={vi.fn()} />)
+    const replyButton = screen.getByRole('button', { name: /reply to this topic/i })
+    expect(replyButton).toBeInTheDocument()
+  })
+
+  it('calls onReply when reply button is clicked', async () => {
+    const user = userEvent.setup()
+    const onReply = vi.fn()
+    render(<TopicView topic={topic} onReply={onReply} />)
+    await user.click(screen.getByRole('button', { name: /reply to this topic/i }))
+    expect(onReply).toHaveBeenCalledTimes(1)
   })
 
   it('renders reaction count', () => {

src/components/topic-view.tsx

···
   onModerationAction?: (action: ModerationAction) => void
   canEdit?: boolean
   onEdit?: () => void
+  onReply?: () => void
   canReport?: boolean
   onReport?: (report: ReportSubmission) => void
   selfLabels?: string[]
···
   onModerationAction,
   canEdit,
   onEdit,
+  onReply,
   canReport,
   onReport,
   selfLabels,
···
         {reactions && onReactionToggle && (
           <ReactionBar reactions={reactions} onToggle={onReactionToggle} />
         )}
-        <span
-          className="flex items-center gap-1.5"
-          aria-label={`${formatCompactNumber(topic.replyCount)} replies`}
-        >
-          <ChatCircle className="h-4 w-4" weight="regular" aria-hidden="true" />
-          {formatCompactNumber(topic.replyCount)}
-        </span>
+        {onReply ? (
+          <button
+            type="button"
+            className="flex items-center gap-1.5 text-muted-foreground transition-colors hover:text-foreground"
+            aria-label={`Reply to this topic (${formatCompactNumber(topic.replyCount)} replies)`}
+            onClick={onReply}
+          >
+            <ChatCircle className="h-4 w-4" weight="regular" aria-hidden="true" />
+            {formatCompactNumber(topic.replyCount)}
+          </button>
+        ) : (
+          <span
+            className="flex items-center gap-1.5"
+            aria-label={`${formatCompactNumber(topic.replyCount)} replies`}
+          >
+            <ChatCircle className="h-4 w-4" weight="regular" aria-hidden="true" />
+            {formatCompactNumber(topic.replyCount)}
+          </span>
+        )}
         <LikeButton
           subjectUri={topic.uri}
           subjectCid={topic.cid}