feat(post): persist new posts and wire like interactions

components/post-comments.tsx

@@ -83,6 +83,23 @@ export function PostComments({ initialComments, postId }: PostCommentsProps) {
                 <button
                   type="button"
                   className="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground mt-1 transition-colors"
+                  onClick={() =>
+                    requireAuth(() => {
+                      setComments((prev) =>
+                        prev.map((item) => {
+                          if (item.id !== comment.id) return item
+                          const nextLiked = !item.liked
+                          return {
+                            ...item,
+                            liked: nextLiked,
+                            likeCount: nextLiked
+                              ? item.likeCount + 1
+                              : Math.max(0, item.likeCount - 1),
+                          }
+                        }),
+                      )
+                    })
+                  }
                 >
                   <Heart
                     className={`h-3 w-3 ${comment.liked ? "fill-red-500 text-red-500" : ""}`}

components/post-like-button.tsx

@@ -0,0 +1,35 @@
+"use client"
+
+import { Heart } from "lucide-react"
+import { useState } from "react"
+import { useRequireAuth } from "@/lib/use-require-auth"
+
+interface PostLikeButtonProps {
+  initialLiked: boolean
+  initialCount: number
+}
+
+export function PostLikeButton({ initialLiked, initialCount }: PostLikeButtonProps) {
+  const { requireAuth } = useRequireAuth()
+  const [liked, setLiked] = useState(initialLiked)
+  const [count, setCount] = useState(initialCount)
+
+  return (
+    <button
+      type="button"
+      className="flex items-center gap-1 hover:text-foreground transition-colors"
+      onClick={() =>
+        requireAuth(() => {
+          setLiked((prevLiked) => {
+            const nextLiked = !prevLiked
+            setCount((prevCount) => (nextLiked ? prevCount + 1 : Math.max(0, prevCount - 1)))
+            return nextLiked
+          })
+        })
+      }
+    >
+      <Heart className={`h-4 w-4 ${liked ? "fill-red-500 text-red-500" : ""}`} />
+      {count}
+    </button>
+  )
+}