Barazo default frontend
barazo.forum
fix(topics): display author profile instead of raw DID in topic view (#171)
TopicView rendered topic.authorDid as plain text while TopicCard and
ReplyCard already used the enriched author profile. Now shows avatar,
display name, and a clickable link to the user profile, with graceful
fallback to DID when the author profile is unavailable.
authored by
Guido X Jansen
and committed by
GitHub
1bd3a659
aa34e5ae
+35
-4
+2
-1
src/components/topic-detail-client.test.tsx
+2
-1
src/components/topic-detail-client.test.tsx
···
234
234
await user.click(screen.getByRole('button', { name: /reply to this topic/i }))
235
235
236
236
// The composer should expand and show the reply target banner with the topic author
237
-
expect(screen.getByText(`Replying to @${topic.authorDid}`)).toBeInTheDocument()
237
+
const expectedHandle = topic.author?.handle ?? topic.authorDid
238
+
expect(screen.getByText(`Replying to @${expectedHandle}`)).toBeInTheDocument()
238
239
})
239
240
240
241
it('clears reply target when dismiss button is clicked', async () => {
+1
-1
src/components/topic-detail-client.tsx
+1
-1
src/components/topic-detail-client.tsx
+9
-1
src/components/topic-view.test.tsx
+9
-1
src/components/topic-view.test.tsx
···
63
63
expect(screen.getByText(topic.content)).toBeInTheDocument()
64
64
})
65
65
66
-
it('renders author handle', () => {
66
+
it('renders author display name with link', () => {
67
67
render(<TopicView topic={topic} />)
68
+
expect(screen.getByText('Jay')).toBeInTheDocument()
69
+
const authorLink = screen.getByRole('link', { name: /Jay/ })
70
+
expect(authorLink).toHaveAttribute('href', `/u/${mockUsers[0]!.handle}`)
71
+
})
72
+
73
+
it('falls back to DID when author profile is missing', () => {
74
+
const topicWithoutAuthor = { ...topic, author: undefined }
75
+
render(<TopicView topic={topicWithoutAuthor} />)
68
76
expect(screen.getByText(mockUsers[0]!.did)).toBeInTheDocument()
69
77
})
70
78
+23
-1
src/components/topic-view.tsx
+23
-1
src/components/topic-view.tsx
···
6
6
*/
7
7
8
8
import Link from 'next/link'
9
+
import Image from 'next/image'
9
10
import {
10
11
ChatCircle,
11
12
Clock,
···
108
109
109
110
{/* Author + timestamp */}
110
111
<div className="mt-2 flex flex-wrap items-center gap-x-3 gap-y-1 text-sm text-muted-foreground">
111
-
<span>{topic.authorDid}</span>
112
+
<Link
113
+
href={`/u/${topic.author?.handle ?? topic.authorDid}`}
114
+
className="flex items-center gap-1.5 hover:text-foreground"
115
+
>
116
+
{topic.author?.avatarUrl ? (
117
+
<Image
118
+
src={topic.author.avatarUrl}
119
+
alt=""
120
+
width={24}
121
+
height={24}
122
+
className="rounded-full object-cover"
123
+
/>
124
+
) : (
125
+
<span
126
+
className="flex h-6 w-6 items-center justify-center rounded-full bg-muted text-xs font-medium"
127
+
aria-hidden="true"
128
+
>
129
+
{(topic.author?.displayName ?? topic.author?.handle ?? '?')[0]?.toUpperCase()}
130
+
</span>
131
+
)}
132
+
<span>{topic.author?.displayName ?? topic.author?.handle ?? topic.authorDid}</span>
133
+
</Link>
112
134
<span aria-hidden="true">·</span>
113
135
<time dateTime={topic.createdAt}>{formatRelativeTime(topic.createdAt)}</time>
114
136
{isEdited(topic.createdAt, topic.indexedAt) && (