v3: added comment likes, added votes/likes list view, added db migrations mechanism, updated project dependencies

src/components/LikeButton.tsx

@@ -0,0 +1,57 @@
+import { useRef, useState } from "react";
+import { API_URL } from "../config/api.ts";
+import { UserListPopover } from "./UserListPopover.tsx";
+
+interface LikeButtonProps {
+  commentId: string;
+  count: number;
+  liked: boolean;
+  disabled?: boolean;
+  onLike: (commentId: string) => void;
+  onUnlike: (commentId: string) => void;
+}
+
+export function LikeButton(
+  { commentId, count, liked, disabled, onLike, onUnlike }: LikeButtonProps,
+) {
+  const [popoverOpen, setPopoverOpen] = useState(false);
+  const countRef = useRef<HTMLSpanElement>(null);
+
+  return (
+    <>
+      <button
+        type="button"
+        className={`comment-action-btn${
+          liked ? " comment-action-btn--liked" : ""
+        }`}
+        onClick={() => liked ? onUnlike(commentId) : onLike(commentId)}
+        disabled={disabled}
+        aria-label={liked ? "Remove like" : "Like"}
+        title={disabled ? "Log in to like" : undefined}
+      >
+        ♥{" "}
+        {count > 0
+          ? (
+            <span
+              ref={countRef}
+              className="like-count-clickable"
+              onClick={(e) => {
+                e.stopPropagation();
+                setPopoverOpen((o) => !o);
+              }}
+            >
+              {count}
+            </span>
+          )
+          : count}
+      </button>
+      {popoverOpen && (
+        <UserListPopover
+          anchorRef={countRef}
+          onClose={() => setPopoverOpen(false)}
+          fetchUrl={`${API_URL}/api/comments/${commentId}/likers`}
+        />
+      )}
+    </>
+  );
+}