Barazo default frontend
barazo.forum
fix(topics): standardize OP footer action layout to match comments (#165)
Move Reply button from left group to right group and add permalink
icon to OP footer, matching the comment footer's split layout pattern:
read signals (reactions, likes, timestamps) left, forward actions
(link, edit, reply, report) right. Fixes WCAG 3.2.4 consistent
identification violation where Reply jumped positions between OP
and comments.
authored by
Guido X Jansen
and committed by
GitHub
b6838a75
44f1123a
+35
-24
+35
-24
src/components/topic-view.tsx
+35
-24
src/components/topic-view.tsx
···
6
6
*/
7
7
8
8
import Link from 'next/link'
9
-
import { ChatCircle, Clock, Tag, PencilSimple } from '@phosphor-icons/react/dist/ssr'
9
+
import {
10
+
ChatCircle,
11
+
Clock,
12
+
Tag,
13
+
PencilSimple,
14
+
Link as LinkIcon,
15
+
} from '@phosphor-icons/react/dist/ssr'
10
16
import type { Topic } from '@/lib/api/types'
11
17
import { cn } from '@/lib/utils'
12
18
import { formatRelativeTime, formatCompactNumber, isEdited } from '@/lib/format'
···
158
164
)}
159
165
</div>
160
166
161
-
{/* Footer: reactions + stats + report */}
167
+
{/* Footer: read signals left, actions right */}
162
168
<div className="flex items-center gap-4 border-t border-border px-4 py-3 text-sm text-muted-foreground sm:px-6">
163
169
{reactions && onReactionToggle && (
164
170
<ReactionBar reactions={reactions} onToggle={onReactionToggle} />
165
171
)}
166
-
{onReply ? (
167
-
<button
168
-
type="button"
169
-
className="flex items-center gap-1.5 text-muted-foreground transition-colors hover:text-foreground"
170
-
aria-label={`Reply to this topic (${formatCompactNumber(topic.replyCount)} replies)`}
171
-
onClick={onReply}
172
-
>
173
-
<ChatCircle className="h-4 w-4" weight="regular" aria-hidden="true" />
174
-
{formatCompactNumber(topic.replyCount)}
175
-
</button>
176
-
) : (
177
-
<span
178
-
className="flex items-center gap-1.5"
179
-
aria-label={`${formatCompactNumber(topic.replyCount)} replies`}
180
-
>
181
-
<ChatCircle className="h-4 w-4" weight="regular" aria-hidden="true" />
182
-
{formatCompactNumber(topic.replyCount)}
183
-
</span>
184
-
)}
185
172
<LikeButton
186
173
subjectUri={topic.uri}
187
174
subjectCid={topic.cid}
···
192
179
Last activity {formatRelativeTime(topic.lastActivityAt)}
193
180
</span>
194
181
182
+
<a
183
+
href="#post-1"
184
+
className="ml-auto flex items-center gap-1.5 hover:text-foreground"
185
+
aria-label="Permalink to original post"
186
+
>
187
+
<LinkIcon className="h-4 w-4" weight="regular" aria-hidden="true" />
188
+
</a>
189
+
195
190
{canEdit && onEdit && (
196
191
<button
197
192
type="button"
···
203
198
</button>
204
199
)}
205
200
206
-
{canReport && onReport && (
207
-
<span className="ml-auto">
208
-
<ReportDialog subjectUri={topic.uri} onSubmit={onReport} />
201
+
{onReply ? (
202
+
<button
203
+
type="button"
204
+
className="flex items-center gap-1.5 text-muted-foreground transition-colors hover:text-foreground"
205
+
aria-label={`Reply to this topic (${formatCompactNumber(topic.replyCount)} replies)`}
206
+
onClick={onReply}
207
+
>
208
+
<ChatCircle className="h-4 w-4" weight="regular" aria-hidden="true" />
209
+
{formatCompactNumber(topic.replyCount)}
210
+
</button>
211
+
) : (
212
+
<span
213
+
className="flex items-center gap-1.5"
214
+
aria-label={`${formatCompactNumber(topic.replyCount)} replies`}
215
+
>
216
+
<ChatCircle className="h-4 w-4" weight="regular" aria-hidden="true" />
217
+
{formatCompactNumber(topic.replyCount)}
209
218
</span>
210
219
)}
220
+
221
+
{canReport && onReport && <ReportDialog subjectUri={topic.uri} onSubmit={onReport} />}
211
222
</div>
212
223
</article>
213
224
)