optimizations

resources/js/components/social/CommentList.jsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react'
 import LevelBadge from '../xp/LevelBadge'
 import CommentForm from './CommentForm'
 
-function CommentItem({ comment, canReply, onReply, onDelete }) {
+function CommentItem({ comment, canReply, onReply, onDelete, onReport }) {
   const [replying, setReplying] = useState(false)
 
   return (
@@ -42,6 +42,11 @@ function CommentItem({ comment, canReply, onReply, onDelete }) {
                 Delete
               </button>
             ) : null}
+            {comment.can_report ? (
+              <button type="button" onClick={() => onReport?.(comment)} className="transition hover:text-amber-300">
+                Report
+              </button>
+            ) : null}
           </div>
 
           {replying ? (
@@ -62,7 +67,7 @@ function CommentItem({ comment, canReply, onReply, onDelete }) {
           {Array.isArray(comment.replies) && comment.replies.length > 0 ? (
             <div className="mt-4 space-y-3 border-l border-white/[0.08] pl-4">
               {comment.replies.map((reply) => (
-                <CommentItem key={reply.id} comment={reply} canReply={canReply} onReply={onReply} onDelete={onDelete} />
+                <CommentItem key={reply.id} comment={reply} canReply={canReply} onReply={onReply} onDelete={onDelete} onReport={onReport} />
               ))}
             </div>
           ) : null}
@@ -72,7 +77,7 @@ function CommentItem({ comment, canReply, onReply, onDelete }) {
   )
 }
 
-export default function CommentList({ comments = [], canReply = false, onReply, onDelete, emptyMessage = 'No comments yet.' }) {
+export default function CommentList({ comments = [], canReply = false, onReply, onDelete, onReport, emptyMessage = 'No comments yet.' }) {
   if (!comments.length) {
     return <p className="text-sm text-white/45">{emptyMessage}</p>
   }
@@ -80,8 +85,8 @@ export default function CommentList({ comments = [], canReply = false, onReply,
   return (
     <div className="space-y-4">
       {comments.map((comment) => (
-        <CommentItem key={comment.id} comment={comment} canReply={canReply} onReply={onReply} onDelete={onDelete} />
+        <CommentItem key={comment.id} comment={comment} canReply={canReply} onReply={onReply} onDelete={onDelete} onReport={onReport} />
       ))}
     </div>
   )
-}
+}