more fixes

resources/js/components/forum/PostCard.jsx

@@ -1,9 +1,17 @@
 import React, { useState } from 'react'
 import AuthorBadge from './AuthorBadge'
 
+const REACTIONS = [
+  { key: 'like', label: 'Like', emoji: '👍' },
+  { key: 'love', label: 'Love', emoji: '❤️' },
+  { key: 'fire', label: 'Amazing', emoji: '🔥' },
+  { key: 'laugh', label: 'Funny', emoji: '😂' },
+  { key: 'disagree', label: 'Disagree', emoji: '👎' },
+]
+
 export default function PostCard({ post, thread, isOp = false, isAuthenticated = false, canModerate = false }) {
-  const [reported, setReported] = useState(false)
-  const [reporting, setReporting] = useState(false)
+  const [reactionState, setReactionState] = useState(post?.reactions ?? { summary: {}, active: null })
+  const [reacting, setReacting] = useState(false)
 
   const author    = post?.user
   const content   = post?.rendered_content ?? post?.content ?? ''
@@ -11,14 +19,13 @@ export default function PostCard({ post, thread, isOp = false, isAuthenticated =
   const editedAt  = post?.edited_at
   const isEdited  = post?.is_edited
   const postId    = post?.id
-  const threadId  = thread?.id
   const threadSlug = thread?.slug
 
-  const handleReport = async () => {
-    if (reporting || reported) return
-    setReporting(true)
+  const handleReaction = async (reaction) => {
+    if (reacting || !isAuthenticated) return
+    setReacting(true)
     try {
-      const res = await fetch(`/forum/post/${postId}/report`, {
+      const res = await fetch(`/forum/post/${postId}/react`, {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',
@@ -26,10 +33,14 @@ export default function PostCard({ post, thread, isOp = false, isAuthenticated =
           'Accept': 'application/json',
         },
         credentials: 'same-origin',
+        body: JSON.stringify({ reaction }),
       })
-      if (res.ok) setReported(true)
+      if (res.ok) {
+        const json = await res.json()
+        setReactionState(json)
+      }
     } catch { /* silent */ }
-    setReporting(false)
+    setReacting(false)
   }
 
   return (
@@ -82,32 +93,31 @@ export default function PostCard({ post, thread, isOp = false, isAuthenticated =
 
       {/* Footer */}
       <footer className="flex flex-wrap items-center gap-3 border-t border-white/[0.06] px-5 py-3 text-xs">
-        {/* Quote */}
-        {threadId && (
-          <a
-            href={`/forum/thread/${threadId}-${threadSlug ?? ''}?quote=${postId}#reply-content`}
-            className="rounded-lg border border-white/10 px-2.5 py-1 text-zinc-400 transition-colors hover:border-white/20 hover:text-zinc-200"
-          >
-            Quote
-          </a>
-        )}
+        <div className="flex flex-wrap items-center gap-2">
+          {REACTIONS.map((reaction) => {
+            const count = reactionState?.summary?.[reaction.key] ?? 0
+            const isActive = reactionState?.active === reaction.key
 
-        {/* Report */}
-        {isAuthenticated && (post?.user_id !== post?.current_user_id) && (
-          <button
-            type="button"
-            onClick={handleReport}
-            disabled={reported || reporting}
-            className={[
-              'rounded-lg border border-white/10 px-2.5 py-1 transition-colors',
-              reported
-                ? 'text-emerald-400 border-emerald-500/20 cursor-default'
-                : 'text-zinc-400 hover:border-white/20 hover:text-zinc-200',
-            ].join(' ')}
-          >
-            {reported ? 'Reported ✓' : reporting ? 'Reporting…' : 'Report'}
-          </button>
-        )}
+            return (
+              <button
+                key={reaction.key}
+                type="button"
+                disabled={!isAuthenticated || reacting}
+                onClick={() => handleReaction(reaction.key)}
+                className={[
+                  'inline-flex items-center gap-1.5 rounded-lg border px-2.5 py-1 transition-colors',
+                  isActive
+                    ? 'border-cyan-400/30 bg-cyan-400/10 text-cyan-200'
+                    : 'border-white/10 text-zinc-400 hover:border-white/20 hover:text-zinc-200',
+                ].join(' ')}
+                title={reaction.label}
+              >
+                <span>{reaction.emoji}</span>
+                <span>{count}</span>
+              </button>
+            )
+          })}
+        </div>
 
         {/* Edit */}
         {(post?.can_edit) && (