Reactions Sprint 2b - Add Post Reactions System: Display, Count, API, and UI Enhancements

nodebb-theme-harmony/scss/topic.scss

@@ -136,4 +136,178 @@ body.template-topic {
 			}
 		}
 	}
+	body.template-topic {
+		.breadcrumb .breadcrumb-item:last-child {
+			display: none;
+		}
+		.topic {
+			.posts-container {
+				max-width: 960px;
+				width: 960px;
+			}
+
+			.posts {
+				// fixes code blocks pushing content out on mobile
+				@include media-breakpoint-down(md) {
+					max-width: calc(100vw - $grid-gutter-width);
+				}
+
+				&.timeline {
+					@include timeline-style;
+				}
+
+				.post-header {
+					font-size: 0.8125rem;
+					line-height: 1.25rem;
+
+					.bookmarked {
+						transition: $transition-fade;
+					}
+				}
+
+				> [component="post"] > [component="post/footer"] {
+					margin-left: calc($spacer * 2.5);
+				}
+
+				[component="post"] {
+					&.selected .post-container {
+						background-color: mix($body-bg, $body-color, 90%);
+					}
+					&.deleted .post-container .content { opacity: .65; }
+
+					[component="post/content"] {
+						@include fix-lists();
+
+						> blockquote {
+							> blockquote {
+								> *:not(.blockquote) {
+									display: none;
+								}
+							}
+
+							> blockquote.uncollapsed {
+								> *:not(.blockquote) {
+									display: block;
+								}
+							}
+						}
+
+						@include media-breakpoint-up(lg) {
+							table { // text-break breaks table formatting
+								 word-break: initial!important;
+							}
+						}
+					}
+				}
+
+				[component="post/upvote"], [component="post/downvote"] {
+					&.upvoted, &.downvoted {
+						background-color: var(--btn-ghost-active-color);
+
+						&:hover {
+							background-color: var(--btn-ghost-hover-color);
+						}
+					}
+				}
+
+				// -------------------
+				// Post Reactions Styling
+				// -------------------
+				[component="post/reactions"] {
+					display: flex;
+					align-items: center;
+					gap: 8px;
+					margin-top: 4px;
+					padding-left: calc($spacer * 2.5);
+
+					button {
+						background: none;
+						border: none;
+						cursor: pointer;
+						font-size: 1rem;
+						padding: 5px;
+						border-radius: 50%;
+						transition: background-color 0.2s ease-in-out;
+
+						&:hover {
+							background-color: rgba(0, 0, 0, 0.1);
+						}
+
+						&.reacted {
+							color: var(--primary-color);
+							font-weight: bold;
+						}
+					}
+
+					.reaction-count {
+						font-size: 0.85rem;
+						color: var(--text-muted);
+					}
+				}
+			}
+		}
+
+		.quick-reply {
+			@include topic-avatars();
+		}
+
+		[component="post/replies/container"] {
+			.icon {
+				display: none !important;
+			}
+
+			.post-header .icon {
+				display: initial !important;
+
+				.status {
+					display: none;
+				}
+			}
+
+			.timeline-event {
+				display: none !important;
+			}
+
+			[component="post"] {
+				padding-top: 0 !important;
+				padding-bottom: $spacer;
+				&:last-of-type {
+					padding-bottom: 0;
+					.post-footer {
+						border-bottom: none !important;
+					}
+				}
+			}
+		}
+
+		[component="topic/thumb/list"] {
+			height: calc($font-size-base * 4);
+		}
+	}
+
+	@include media-breakpoint-up(sm) {
+		body.template-topic {
+			.topic .posts {
+				[component="post"] {
+					[component="post/actions"] {
+						opacity: 0;
+						transition: $transition-fade;
+
+						&:has([aria-expanded="true"]) {
+							opacity: 1;
+						}
+					}
+					[component="post/actions"]:focus-within {
+						opacity: 1;
+					}
+					&:hover {
+						> .post-footer > [component="post/actions"] {
+							opacity: 1;
+						}
+					}
+				}
+			}
+		}
+	}
+
 }

nodebb-theme-harmony/templates/account/posts.tpl

@@ -32,4 +32,9 @@
 	{{{ end }}}
 </div>
 
+<a component="post/reactions" href="#" class="btn-ghost-sm" title="[[topic:reactions]]">
+    <i class="fa fa-fw fa-thumbs-up text-primary"></i> Reactions
+</a>
+
+
 <!-- IMPORT partials/account/footer.tpl -->

nodebb-theme-harmony/templates/partials/topic/post.tpl

@@ -93,6 +93,28 @@
 	<div component="post/replies/container" class="my-2 col-11 border rounded-1 p-3 hidden-empty"></div>
 
 	<div component="post/actions" class="d-flex justify-content-end gap-1 post-tools">
+
+	    <!-- Post Reactions -->
+<div component="post/reactions" class="d-flex align-items-center gap-2">
+    <!-- Display Existing Reactions -->
+    {{{ if posts.reactions.length }}}
+        <div class="d-flex gap-1">
+            {{{ each posts.reactions }}}
+            <button class="reaction-bubble btn btn-light btn-sm px-2"
+                data-reaction="{posts.reactions.reaction}"
+                component="post/reaction">
+                {posts.reactions.emoji} {posts.reactions.count}
+            </button>
+            {{{ end }}}
+        </div>
+    {{{ end }}}
+
+    <!-- Add Reaction Button -->
+    <button class="btn btn-sm btn-outline-primary px-2" component="post/add-reaction">
+        <i class="fa fa-smile-o"></i> Add Reaction
+    </button>
+</div>
+
 		<!-- IMPORT partials/topic/reactions.tpl -->
 		<a component="post/reply" href="#" class="btn-ghost-sm {{{ if !privileges.topics:reply }}}hidden{{{ end }}}" title="[[topic:reply]]"><i class="fa fa-fw fa-reply text-primary"></i></a>
 		<a component="post/quote" href="#" class="btn-ghost-sm {{{ if !privileges.topics:reply }}}hidden{{{ end }}}" title="[[topic:quote]]"><i class="fa fa-fw fa-quote-right text-primary"></i></a>

nodebb-theme-harmony/templates/partials/topic/reactions.tpl

@@ -1 +1,10 @@
-<!-- This partial intentionally left blank; overwritten by nodebb-plugin-reactions -->
+<!-- This partial intentionally left blank; overwritten by nodebb-plugin-reactions -->
+<div class="post-reactions d-flex gap-1 mt-2" component="post/reactions/container">
+    {{#if posts.reactions.length}}
+        {{#each posts.reactions}}
+            <span class="reaction-bubble" data-reaction="{{this.reaction}}">
+                {{this.emoji}} {{this.count}}
+            </span>
+        {{/each}}
+    {{/if}}
+</div>

public/src/client/topic/posts.js

@@ -36,6 +36,11 @@ define('forum/topic/posts', [
 
 		Posts.modifyPostsByPrivileges(data.posts);
 
+		// Ensure reactions data is processed when a new post appears
+		data.posts.forEach((post) => {
+			post.reactions = post.reactions || [];
+		});
+
 		updatePostCounts(data.posts);
 		updateNavigatorLastPostTimestamp(data.posts[0]);
 		updatePostIndices(data.posts);
@@ -293,6 +298,11 @@ define('forum/topic/posts', [
 		Posts.addBlockquoteEllipses(posts);
 		hidePostToolsForDeletedPosts(posts);
 		await addNecroPostMessage();
+
+		// Attach reaction event listeners
+		posts.find('[component="post/reactions"]').each(function () {
+			attachReactionEvents($(this));
+		});
 	};
 
 	Posts.addTopicEvents = async function (events) {
@@ -448,3 +458,32 @@ define('forum/topic/posts', [
 
 	return Posts;
 });
+function attachReactionEvents($reactionContainer) {
+	$reactionContainer.find('[component="post/reaction"]').off('click').on('click', async function () {
+		const $this = $(this);
+		const reaction = $this.attr('data-reaction');
+		const pid = $this.closest('[component="post"]').attr('data-pid');
+
+		try {
+			const response = await fetch(`${config.relative_path}/api/post/${pid}/reaction`, {
+				method: 'POST',
+				headers: {
+					'Content-Type': 'application/json',
+					'x-csrf-token': config.csrf_token,
+				},
+				body: JSON.stringify({ reaction }),
+			});
+
+			if (!response.ok) throw new Error('Failed to react');
+
+			const result = await response.json();
+			if (result.success) {
+				// Update UI with new reaction count
+				const countElement = $this.find('.reaction-count');
+				countElement.text(parseInt(countElement.text(), 10) + 1);
+			}
+		} catch (error) {
+			console.error('Reaction failed:', error);
+		}
+	});
+}

public/src/modules/api.js

@@ -142,3 +142,14 @@ export function del(route, data, onSuccess) {
 		},
 	}, onSuccess);
 }
+
+export function postReaction(postId, reaction, onSuccess) {
+	return call({
+		url: `/reactions`,
+		method: 'POST',
+		data: { postId, reaction },
+		headers: {
+			'x-csrf-token': config.csrf_token,
+		},
+	}, onSuccess);
+}