feat: Implement pinned comments, locked comment threads, and a two-level reply structure with @mentions.
This commit is contained in:
x
@@ -55,6 +55,7 @@ class CommentSystem {
|
||||
|
||||
if (data.success) {
|
||||
this.isAdmin = data.is_admin || false;
|
||||
this.isLocked = data.is_locked || false;
|
||||
this.render(data.comments, data.user_id, data.is_subscribed);
|
||||
|
||||
// Priority: Explicit ID > Hash
|
||||
@@ -91,29 +92,75 @@ class CommentSystem {
|
||||
}
|
||||
|
||||
render(comments, currentUserId, isSubscribed) {
|
||||
// Build tree
|
||||
// Build two-level tree: top-level comments + all replies at one level
|
||||
const map = new Map();
|
||||
const roots = [];
|
||||
|
||||
comments.forEach(c => {
|
||||
c.children = [];
|
||||
c.replies = [];
|
||||
c.replyTo = null; // Username being replied to (for @mentions)
|
||||
map.set(c.id, c);
|
||||
});
|
||||
|
||||
// Find root parent for any comment
|
||||
const findRoot = (comment) => {
|
||||
if (!comment.parent_id) return null;
|
||||
let current = comment;
|
||||
while (current.parent_id && map.has(current.parent_id)) {
|
||||
current = map.get(current.parent_id);
|
||||
}
|
||||
return current;
|
||||
};
|
||||
|
||||
comments.forEach(c => {
|
||||
if (c.parent_id && map.has(c.parent_id)) {
|
||||
map.get(c.parent_id).children.push(c);
|
||||
} else {
|
||||
if (!c.parent_id) {
|
||||
// Top-level comment
|
||||
roots.push(c);
|
||||
} else {
|
||||
// It's a reply - find root and attach there
|
||||
const root = findRoot(c);
|
||||
if (root) {
|
||||
// If replying to a non-root, capture the username for @mention
|
||||
const directParent = map.get(c.parent_id);
|
||||
if (directParent && directParent.id !== root.id) {
|
||||
c.replyTo = directParent.username;
|
||||
}
|
||||
root.replies.push(c);
|
||||
} else {
|
||||
// Orphaned reply (parent deleted?) - show as root
|
||||
roots.push(c);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Sort replies by date (oldest first)
|
||||
roots.forEach(r => {
|
||||
if (r.replies && r.replies.length > 0) {
|
||||
r.replies.sort((a, b) => new Date(a.created_at) - new Date(b.created_at));
|
||||
}
|
||||
});
|
||||
|
||||
const subText = isSubscribed ? 'Subscribed' : 'Subscribe';
|
||||
const subClass = isSubscribed ? 'active' : '';
|
||||
|
||||
const lockIcon = this.isLocked ? '🔒' : '🔓';
|
||||
const lockTitle = this.isLocked ? 'Unlock Thread' : 'Lock Thread';
|
||||
const lockBtn = this.isAdmin ? `<button id="lock-thread-btn" title="${lockTitle}">${lockIcon}</button>` : '';
|
||||
const lockNotice = this.isLocked ? '<div class="lock-notice">🔒 This thread is locked. New comments are disabled.</div>' : '';
|
||||
|
||||
// Determine what to show for input
|
||||
let inputSection = '';
|
||||
if (this.isLocked && !this.isAdmin) {
|
||||
inputSection = '<div class="lock-notice">🔒 Comments are disabled on this thread.</div>';
|
||||
} else if (currentUserId) {
|
||||
inputSection = this.renderInput();
|
||||
} else {
|
||||
inputSection = '<div class="login-placeholder"><a href="/login">Login</a> to comment</div>';
|
||||
}
|
||||
|
||||
let html = `
|
||||
<div class="comments-header">
|
||||
<h3>Comments (${comments.length})</h3>
|
||||
<h3>Comments (${comments.length}) ${this.isLocked ? '🔒' : ''}</h3>
|
||||
<div class="comments-controls">
|
||||
<select id="comment-sort">
|
||||
<option value="old" ${this.sort === 'old' ? 'selected' : ''}>Oldest</option>
|
||||
@@ -121,9 +168,10 @@ class CommentSystem {
|
||||
</select>
|
||||
${currentUserId ? `<button id="subscribe-btn" class="${subClass}">${subText}</button>` : ''}
|
||||
<button id="refresh-comments">Refresh</button>
|
||||
${lockBtn}
|
||||
</div>
|
||||
</div>
|
||||
${currentUserId ? this.renderInput() : '<div class="login-placeholder"><a href="/login">Login</a> to comment</div>'}
|
||||
${inputSection}
|
||||
<div class="comments-list">
|
||||
${roots.map(c => this.renderComment(c, currentUserId)).join('')}
|
||||
</div>
|
||||
@@ -167,37 +215,58 @@ class CommentSystem {
|
||||
}
|
||||
}
|
||||
|
||||
renderComment(comment, currentUserId) {
|
||||
renderComment(comment, currentUserId, isReply = false) {
|
||||
const isDeleted = comment.is_deleted;
|
||||
const content = isDeleted ? '<span class="deleted-msg">[deleted]</span>' : this.renderCommentContent(comment.content);
|
||||
const isPinned = comment.is_pinned;
|
||||
|
||||
// Add @mention prefix if this is a reply to a reply
|
||||
let contentPrefix = '';
|
||||
if (comment.replyTo) {
|
||||
contentPrefix = `<span class="reply-mention">@${comment.replyTo}</span> `;
|
||||
}
|
||||
|
||||
const content = isDeleted ? '<span class="deleted-msg">[deleted]</span>' : contentPrefix + this.renderCommentContent(comment.content);
|
||||
const date = new Date(comment.created_at).toLocaleString();
|
||||
|
||||
// Admin buttons
|
||||
let adminButtons = '';
|
||||
if (this.isAdmin && !isDeleted) {
|
||||
const pinIcon = isPinned ? '📌' : '📍';
|
||||
const pinTitle = isPinned ? 'Unpin' : 'Pin';
|
||||
adminButtons = `
|
||||
<button class="admin-pin-btn" data-id="${comment.id}" title="${pinTitle}">${pinIcon}</button>
|
||||
<button class="admin-edit-btn" data-id="${comment.id}" data-content="${this.escapeHtml(comment.content)}">✏️</button>
|
||||
<button class="admin-delete-btn" data-id="${comment.id}">🗑️</button>
|
||||
`;
|
||||
}
|
||||
|
||||
const pinnedBadge = isPinned ? '<span class="pinned-badge">📌 Pinned</span>' : '';
|
||||
const commentClass = isReply ? 'comment reply' : 'comment';
|
||||
|
||||
// Build replies HTML (only for root comments, max 1 level deep)
|
||||
let repliesHtml = '';
|
||||
if (!isReply && comment.replies && comment.replies.length > 0) {
|
||||
repliesHtml = `<div class="comment-replies">${comment.replies.map(r => this.renderComment(r, currentUserId, true)).join('')}</div>`;
|
||||
}
|
||||
|
||||
return `
|
||||
<div class="comment ${isDeleted ? 'deleted' : ''}" id="c${comment.id}">
|
||||
<div class="${commentClass} ${isDeleted ? 'deleted' : ''} ${isPinned ? 'pinned' : ''}" id="c${comment.id}">
|
||||
<div class="comment-avatar">
|
||||
<img src="${comment.avatar ? `/t/${comment.avatar}.webp` : '/s/img/default.png'}" alt="av">
|
||||
</div>
|
||||
<div class="comment-body">
|
||||
<div class="comment-meta">
|
||||
${pinnedBadge}
|
||||
<span class="comment-author">${comment.username || 'System'}</span>
|
||||
<span class="comment-time">${date}</span>
|
||||
<a href="#c${comment.id}" class="comment-permalink">#${comment.id}</a>
|
||||
${!isDeleted && currentUserId ? `<button class="reply-btn" data-id="${comment.id}">Reply</button>` : ''}
|
||||
${!isDeleted && currentUserId ? `<button class="reply-btn" data-id="${comment.id}" data-username="${comment.username}">Reply</button>` : ''}
|
||||
${adminButtons}
|
||||
</div>
|
||||
<div class="comment-content">${content}</div>
|
||||
${comment.children.length > 0 ? `<div class="comment-children">${comment.children.map(c => this.renderComment(c, currentUserId)).join('')}</div>` : ''}
|
||||
</div>
|
||||
</div>
|
||||
${repliesHtml}
|
||||
`;
|
||||
}
|
||||
|
||||
@@ -261,6 +330,17 @@ class CommentSystem {
|
||||
});
|
||||
});
|
||||
|
||||
// Admin Pin
|
||||
this.container.querySelectorAll('.admin-pin-btn').forEach(btn => {
|
||||
btn.addEventListener('click', async (e) => {
|
||||
const id = e.target.dataset.id;
|
||||
const res = await fetch(`/api/comments/${id}/pin`, { method: 'POST' });
|
||||
const json = await res.json();
|
||||
if (json.success) this.loadComments(id);
|
||||
else alert('Failed to pin: ' + (json.message || 'Error'));
|
||||
});
|
||||
});
|
||||
|
||||
// Admin Edit
|
||||
this.container.querySelectorAll('.admin-edit-btn').forEach(btn => {
|
||||
btn.addEventListener('click', (e) => {
|
||||
@@ -309,6 +389,10 @@ class CommentSystem {
|
||||
this.container.querySelectorAll('.reply-btn').forEach(btn => {
|
||||
btn.addEventListener('click', (e) => {
|
||||
const id = e.target.dataset.id;
|
||||
const username = e.target.dataset.username;
|
||||
const commentEl = e.target.closest('.comment');
|
||||
const isReplyingToReply = commentEl.classList.contains('reply');
|
||||
|
||||
const body = e.target.closest('.comment-body');
|
||||
// Check if input already exists
|
||||
if (body.querySelector('.reply-input')) return;
|
||||
|
||||
Reference in New Issue
Block a user