v3: allow users to edit dump thumbnail, fixed some linter errors in the frontend

api/services/follow-service.ts

@@ -24,7 +24,7 @@ import {
 // Mirrors dump-service SELECT_COLS_ALIASED — kept local to avoid circular imports
 const SELECT_COLS_ALIASED =
   "d.id, d.kind, d.title, d.slug, d.comment, d.user_id, d.created_at, d.updated_at, d.url, d.rich_content, " +
-  "d.file_name, d.file_mime, d.file_size, d.vote_count, d.is_private," +
+  "d.file_name, d.file_mime, d.file_size, d.vote_count, d.is_private, d.custom_thumbnail_mime," +
   " (SELECT COUNT(*) FROM comments WHERE dump_id = d.id AND deleted = 0) as comment_count";
 
 // ── Follow / unfollow a user ──────────────────────────────────────────────────

api/services/playlist-service.ts

@@ -29,7 +29,7 @@ import { makeSlug, UUID_RE } from "../lib/slugify.ts";
 import { linkAttachments } from "./attachment-service.ts";
 
 const DUMP_SELECT_COLS =
-  "id, kind, title, slug, comment, user_id, created_at, updated_at, url, rich_content, file_name, file_mime, file_size, vote_count, is_private";
+  "id, kind, title, slug, comment, user_id, created_at, updated_at, url, rich_content, file_name, file_mime, file_size, vote_count, is_private, custom_thumbnail_mime";
 
 const PLAYLIST_SELECT = `p.*, u.username as owner_username,
    (SELECT COUNT(*) FROM playlist_dumps pd WHERE pd.playlist_id = p.id) as dump_count

src/App.css

@@ -3753,6 +3753,23 @@ body.has-player .fab-new {
   cursor: default;
 }
 
+.comment-cancel-btn {
+  background: transparent;
+  border: 1.5px solid var(--color-border-subtle);
+  border-radius: 6px;
+  padding: 0.4rem 1rem;
+  font-family: inherit;
+  font-size: 0.82rem;
+  color: var(--color-text);
+  opacity: 0.6;
+  cursor: pointer;
+  transition: opacity 0.15s;
+}
+
+.comment-cancel-btn:hover {
+  opacity: 1;
+}
+
 .comment-node-inner--deleted {
   opacity: 0.35;
 }

src/components/CommentThread.tsx

@@ -276,7 +276,7 @@ function CommentNode({
                   </button>
                   <button
                     type="button"
-                    className="comment-action-btn"
+                    className="comment-cancel-btn"
                     onClick={() => {
                       setEditOpen(false);
                       setEditBody("");
@@ -290,6 +290,7 @@ function CommentNode({
             )
             : <Markdown className="comment-body">{comment.body}</Markdown>}
           <div className="comment-actions">
+            {!editOpen && (
               <LikeButton
                 commentId={comment.id}
                 count={likeCounts[comment.id] ?? comment.likeCount}
@@ -298,6 +299,7 @@ function CommentNode({
                 onLike={castCommentLike}
                 onUnlike={removeCommentLike}
               />
+            )}
             {currentUser && !editOpen && (
               <button
                 type="button"
@@ -376,7 +378,7 @@ function CommentNode({
                 </button>
                 <button
                   type="button"
-                  className="comment-action-btn"
+                  className="comment-cancel-btn"
                   onClick={() => {
                     setReplyOpen(false);
                     setReplyBody("");
@@ -514,7 +516,7 @@ export function CommentThread({
                 {topLevelBody.trim() && (
                   <button
                     type="button"
-                    className="comment-action-btn"
+                    className="comment-cancel-btn"
                     onClick={() => {
                       setTopLevelBody("");
                       setTopLevelError(null);