feat(reactions): disable reaction buttons on own content (#192)

Barazo default frontend barazo.forum

* feat(reactions): disable reaction buttons on own content

Add isOwnContent prop to TopicView and ReplyCard, passed through to
ReactionBar (disabled) and LikeButton (new disabled prop). Prevents
clicking before the API 403 would reject it.

* style(reactions): fix Prettier formatting in reply-card

authored by

Guido X Jansen and committed by

GitHub 1 week ago 9bfa4827 0d53a92b

+17 -3

5 changed files

expand all

src

components

like-button.tsx

reply-branch.tsx

reply-card.tsx

topic-detail-client.tsx

topic-view.tsx

+3 -1

src/components/like-button.tsx

··· 20 20 subjectCid: string 21 21 initialCount: number 22 22 size?: 'sm' | 'md' 23 + disabled?: boolean 23 24 className?: string 24 25 } 25 26 ··· 28 29 subjectCid, 29 30 initialCount, 30 31 size = 'md', 32 + disabled = false, 31 33 className, 32 34 }: LikeButtonProps) { 33 35 const { user, isAuthenticated, getAccessToken } = useAuth() ··· 121 123 type="button" 122 124 aria-pressed={liked} 123 125 aria-label={`${formatCompactNumber(count)} reactions`} 124 - disabled={!isAuthenticated} 126 + disabled={disabled || !isAuthenticated} 125 127 onClick={handleToggle} 126 128 className={cn( 127 129 'inline-flex items-center gap-1.5 transition-colors',

src/components/reply-branch.tsx

··· 160 160 onReply={onReply} 161 161 canEdit={currentUserDid ? node.reply.authorDid === currentUserDid : false} 162 162 canDelete={currentUserDid ? node.reply.authorDid === currentUserDid : false} 163 + isOwnContent={currentUserDid ? node.reply.authorDid === currentUserDid : false} 163 164 onDelete={onDeleteReply} 164 165 /> 165 166 </div>

+8 -1

src/components/reply-card.tsx

··· 43 43 onDelete?: () => void 44 44 canReport?: boolean 45 45 onReport?: (report: ReportSubmission) => void 46 + isOwnContent?: boolean 46 47 selfLabels?: string[] 47 48 className?: string 48 49 } ··· 58 59 onDelete, 59 60 canReport, 60 61 onReport, 62 + isOwnContent, 61 63 selfLabels, 62 64 className, 63 65 }: ReplyCardProps) { ··· 256 258 {/* Footer */} 257 259 <div className="flex items-center gap-3 border-t border-border px-4 py-2 text-xs text-muted-foreground"> 258 260 {reactions && onReactionToggle && ( 259 - <ReactionBar reactions={reactions} onToggle={onReactionToggle} /> 261 + <ReactionBar 262 + reactions={reactions} 263 + onToggle={onReactionToggle} 264 + disabled={isOwnContent} 265 + /> 260 266 )} 261 267 <LikeButton 262 268 subjectUri={reply.uri} 263 269 subjectCid={reply.cid} 264 270 initialCount={reply.reactionCount} 265 271 size="sm" 272 + disabled={isOwnContent} 266 273 /> 267 274 <span className="flex items-center gap-1"> 268 275 <Clock className="h-3.5 w-3.5" weight="regular" aria-hidden="true" />

src/components/topic-detail-client.tsx

··· 146 146 topic={topic} 147 147 canEdit={canEdit} 148 148 onEdit={handleEdit} 149 + isOwnContent={canEdit} 149 150 isModerator={isModerator} 150 151 isAdmin={isAdmin} 151 152 isPinned={topic.isPinned}

+4 -1

src/components/topic-view.tsx

··· 48 48 onReply?: () => void 49 49 canReport?: boolean 50 50 onReport?: (report: ReportSubmission) => void 51 + isOwnContent?: boolean 51 52 selfLabels?: string[] 52 53 className?: string 53 54 } ··· 66 67 onReply, 67 68 canReport, 68 69 onReport, 70 + isOwnContent, 69 71 selfLabels, 70 72 className, 71 73 }: TopicViewProps) { ··· 196 198 {/* Footer: read signals left, actions right */} 197 199 <div className="flex items-center gap-4 border-t border-border px-4 py-3 text-sm text-muted-foreground sm:px-6"> 198 200 {reactions && onReactionToggle && ( 199 - <ReactionBar reactions={reactions} onToggle={onReactionToggle} /> 201 + <ReactionBar reactions={reactions} onToggle={onReactionToggle} disabled={isOwnContent} /> 200 202 )} 201 203 <LikeButton 202 204 subjectUri={topic.uri} 203 205 subjectCid={topic.cid} 204 206 initialCount={topic.reactionCount} 207 + disabled={isOwnContent} 205 208 /> 206 209 <span className="flex items-center gap-1.5"> 207 210 <Clock className="h-4 w-4" weight="regular" aria-hidden="true" />