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

src/components/CommentThread.tsx

@@ -14,10 +14,12 @@ import { deserializeComment, parseAPIResponse } from "../model.ts";
 import { Avatar } from "./Avatar.tsx";
 import { Markdown } from "./Markdown.tsx";
 import { TextEditor, type TextEditorHandle } from "./TextEditor.tsx";
+import { LikeButton } from "./LikeButton.tsx";
 import { relativeTime } from "../utils/relativeTime.ts";
 import { ErrorCard } from "./ErrorCard.tsx";
 import { Tooltip } from "./Tooltip.tsx";
 import { ConfirmModal } from "./ConfirmModal.tsx";
+import { useWS } from "../hooks/useWS.ts";
 
 interface CommentThreadProps {
   dumpId: string;
@@ -75,6 +77,9 @@ function CommentNode({
   const replyEditorRef = useRef<TextEditorHandle>(null);
   const editEditorRef = useRef<TextEditorHandle>(null);
 
+  const { likeCounts, myLikes, castCommentLike, removeCommentLike } =
+    useWS();
+
   const children = tree.get(comment.id) ?? [];
 
   async function handleReply(e?: React.SubmitEvent) {
@@ -285,6 +290,14 @@ function CommentNode({
             )
             : <Markdown className="comment-body">{comment.body}</Markdown>}
           <div className="comment-actions">
+            <LikeButton
+              commentId={comment.id}
+              count={likeCounts[comment.id] ?? comment.likeCount}
+              liked={myLikes.has(comment.id)}
+              disabled={!currentUser}
+              onLike={castCommentLike}
+              onUnlike={removeCommentLike}
+            />
             {currentUser && !editOpen && (
               <button
                 type="button"