Barazo default frontend barazo.forum
2
fork

Configure Feed

Select the types of activity you want to include in your feed.

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
··· 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 )