nodebb-theme-harmony 2.0.0-pre.40 → 2.0.0-pre.41

package/README.md

@@ -10,6 +10,9 @@ Issues are tracked in [the main project issue tracker](https://github.com/NodeBB
 ## Screenshots
 
 ### Categories
+
+_The cards in the header are added by the recent cards plugin. https://github.com/NodeBB-Community/nodebb-plugin-recent-cards_
+
 <img height="450" src="screenshots/categories.png">
 
 ### Recent

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nodebb-theme-harmony",
-  "version": "2.0.0-pre.40",
+  "version": "2.0.0-pre.41",
   "nbbpm": {
     "compatibility": "^3.7.0"
   },

package/public/harmony.js

@@ -254,20 +254,18 @@ $(document).ready(function () {
 			return;
 		}
 		['notifications', 'chat'].forEach((type) => {
-			const countEl = document.querySelector(`[component="${type}/count"]`);
-			if (!countEl) {
+			const countEl = $(`nav.sidebar [component="${type}/count"]`).first();
+			if (!countEl.length) {
 				return;
 			}
-			const count = parseInt(countEl.innerText, 10);
+			const count = parseInt(countEl.text(), 10);
 			if (count > 1) {
-				const listEls = document.querySelectorAll(`[component="${type}/list"]`);
-				listEls.forEach((listEl) => {
-					const placeholder = listEl.querySelector('*');
-					if (placeholder) {
-						for (let x = 0; x < count - 1; x++) {
-							const cloneEl = placeholder.cloneNode(true);
-							listEl.insertBefore(cloneEl, placeholder);
-						}
+				const listEls = $(`.dropdown-menu [component="${type}/list"]`);
+				listEls.each((index, el) => {
+					const placeholder = $(el).children().first();
+					for (let x = 0; x < count - 1; x++) {
+						const cloneEl = placeholder.clone(true);
+						cloneEl.insertAfter(placeholder);
 					}
 				});
 			}

package/scss/harmony.scss

@@ -15,7 +15,6 @@
 @import "modules/breadcrumbs";
 @import "modules/tags";
 @import "modules/user-menu";
-@import "modules/bottom-sheet";
 @import "modules/topic-navigator";
 @import "modules/topics-list";
 @import "modules/cover";

package/scss/modules/topics-list.scss

@@ -1,7 +1,7 @@
 ul.topics-list, ul.categories-list {
 	li {
 		&.deleted {
-			.meta, .topic-thumbs { display: none!important; }
+			.meta, .topic-thumbs { visibility: hidden!important; }
 			opacity: 0.65;
 		}
 

package/scss/topic.scss

@@ -9,11 +9,6 @@ body.template-topic {
 		}
 
 		.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;
 			}
@@ -27,10 +22,6 @@ body.template-topic {
 				}
 			}
 
-			> [component="post"] > [component="post/footer"] {
-				margin-left: calc($spacer * 2.5);
-			}
-
 			[component="post"] {
 				&.selected .post-container {
 					background-color: mix($body-bg, $body-color, 90%);
@@ -101,6 +92,7 @@ body.template-topic {
 			&:last-of-type {
 				padding-bottom: 0;
 				.post-footer {
+					padding-bottom: 0!important;
 					border-bottom: none !important;
 				}
 			}
@@ -113,7 +105,7 @@ body.template-topic {
 	}
 }
 
-@include media-breakpoint-up(sm) {
+@include media-breakpoint-up(lg) {
 	body.template-topic {
 		.topic .posts {
 			[component="post"] {
@@ -129,7 +121,7 @@ body.template-topic {
 					opacity: 1;
 				}
 				&:hover {
-					> .post-footer > [component="post/actions"] {
+					> div > .post-container > [component="post/footer"] > div > [component="post/actions"] {
 						opacity: 1;
 					}
 				}

package/templates/account/edit.tpl

@@ -29,6 +29,26 @@
 				<input class="form-control" type="date" id="birthday" name="birthday" value="{birthday}" placeholder="mm/dd/yyyy">
 			</div>
 
+			{{{ each customUserFields }}}
+			<div class="mb-3">
+				<label class="form-label fw-bold" for="{./key}">{./name}</label>
+				{{{ if ((./type == "input-text") || (./type == "input-link")) }}}
+				<input class="form-control" type="text" id="{./key}" name="{./key}" value="{./value}">
+				{{{ end }}}
+
+				{{{ if (./type == "input-number") }}}
+				<input class="form-control" type="number" id="{./key}" name="{./key}" value="{./value}">
+				{{{ end }}}
+				{{{ if (./type == "select") }}}
+				<select class="form-select" id="{./key}" name="{./key}">
+					{{{ each ./select-options}}}
+					<option value="{./value}" {{{ if ./selected }}}selected{{{ end }}}>{./value}</option>
+					{{{ end }}}
+				</select>
+				{{{ end }}}
+			</div>
+			{{{ end }}}
+
 			<div class="mb-3">
 				<label class="form-label fw-bold" for="groupTitle">[[user:grouptitle]]</label>
 

package/templates/account/profile.tpl

@@ -23,7 +23,7 @@
 {{{ end }}}
 
 <div class="account-stats container">
-	<div class="row row-cols-2 row-cols-xl-3 row-cols-xxl-4 g-2">
+	<div class="row row-cols-2 row-cols-xl-3 row-cols-xxl-4 g-2 mb-5">
 		{{{ if !reputation:disabled }}}
 		<div class="stat">
 			<div class="align-items-center justify-content-center card card-header px-0 py-3 border-0 rounded-1 h-100">
@@ -89,6 +89,21 @@
 			</div>
 		</div>
 		{{{ end }}}
+
+		{{{ each customUserFields }}}
+		{{{ if ./value }}}
+		<div class="stat">
+			<div class="align-items-center justify-content-center card card-header px-0 py-3 border-0 rounded-1 h-100 gap-2">
+				<span class="stat-label text-xs fw-semibold"><span><i class="text-muted {./icon}"></i> {./name}</span></span>
+				{{{ if (./type == "input-link") }}}
+				<a class="text-sm text-center text-break w-100 px-2 ff-secondary text-underline text-reset" href="{./value}" rel="nofollow noreferrer me">{./value}</a>
+				{{{ else }}}
+				<span class="text-center fs-6 ff-secondary">{./value}</span>
+				{{{ end }}}
+			</div>
+		</div>
+		{{{ end }}}
+		{{{ end }}}
 	</div>
 </div>
 

package/templates/partials/account/sidebar-left.tpl

@@ -68,11 +68,11 @@
 		{{{ if (loggedIn && (!isSelf && !banned)) }}}
 		<hr class="w-100 my-2"/>
 
-		<a {{{if flagId }}}hidden{{{end}}} href="#" component="account/flag" class="btn btn-ghost btn-sm ff-secondary d-flex align-items-center gap-2 text-start">
+		<a href="#" component="account/flag" class="btn btn-ghost btn-sm ff-secondary d-flex align-items-center gap-2 text-start {{{if flagId }}}hidden{{{end}}}">
 			<i class="flex-shrink-0 fa-solid fa-flag text-danger"></i>
 			<div class="flex-grow-1 text-nowrap">[[user:flag-profile]]</div>
 		</a>
-		<a {{{if !flagId }}}hidden{{{end}}} href="#" component="account/already-flagged" class="btn btn-ghost btn-sm ff-secondary d-flex align-items-center gap-2 text-start" data-flag-id="{flagId}">
+		<a href="#" component="account/already-flagged" class="btn btn-ghost btn-sm ff-secondary d-flex align-items-center gap-2 text-start {{{if !flagId }}}hidden{{{end}}}" data-flag-id="{flagId}">
 			<i class="flex-shrink-0 fa-solid fa-flag text-danger"></i>
 			<div class="flex-grow-1 text-nowrap">[[user:profile-flagged]]</div>
 		</a>

package/templates/partials/categories/item.tpl

@@ -20,8 +20,8 @@
 				{{{ each ./children }}}
 				{{{ if !./isSection }}}
 				<span class="category-children-item small">
-					<div class="d-flex align-items-center gap-1">
-						<i class="fa fa-fw fa-caret-right text-primary align-self-start" style="line-height: var(--bs-body-line-height);"></i>
+					<div class="d-flex gap-1">
+						<i class="fa fa-fw fa-caret-right text-primary" style="line-height: var(--bs-body-line-height);"></i>
 						<a href="{{{ if ./link }}}{./link}{{{ else }}}{config.relative_path}/category/{./slug}{{{ end }}}" class="text-reset fw-semibold">{./name}</a>
 					</div>
 				</span>

package/templates/partials/header/brand.tpl

@@ -1,6 +1,7 @@
-{{{ if (brand:logo || config.showSiteTitle)}}}
+{{{ if (brand:logo || (config.showSiteTitle || widgets.brand-header.length)) }}}
 <div class="container-lg px-md-4 brand-container">
 	<div class="col-12 d-flex border-bottom pb-3 {{{ if config.theme.centerHeaderElements }}}justify-content-center{{{ end }}}">
+		{{{ if (brand:logo || config.showSiteTitle) }}}
 		<div component="brand/wrapper" class="d-flex align-items-center gap-3 p-2 rounded-1 align-content-stretch ">
 			{{{ if brand:logo }}}
 			<a component="brand/anchor" href="{{{ if brand:logo:url }}}{brand:logo:url}{{{ else }}}{relative_path}/{{{ end }}}" title="[[global:header.brand-logo]]">
@@ -14,6 +15,7 @@
 			</a>
 			{{{ end }}}
 		</div>
+		{{{ end }}}
 		{{{ if widgets.brand-header.length }}}
 		<div data-widget-area="brand-header" class="flex-fill gap-3 p-2 align-self-center">
 			{{{each widgets.brand-header}}}

package/templates/partials/topic/post-menu-list.tpl

@@ -4,6 +4,7 @@
 		<span class="menu-icon"><i class="fa fa-fw text-secondary fa-pencil"></i></span> [[topic:edit]]
 	</a>
 </li>
+{{{ if posts.display_delete_tools }}}
 <li {{{ if posts.deleted }}}hidden{{{ end }}}>
 	<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" component="post/delete" role="menuitem" href="#" class="{{{ if posts.deleted }}}hidden{{{ end }}}">
 		<span class="menu-icon"><i class="fa fa-fw text-secondary fa-trash-o"></i></span> [[topic:delete]]
@@ -14,6 +15,7 @@
 		<span class="menu-icon"><i class="fa fa-fw text-secondary fa-history"></i></span> [[topic:restore]]
 	</a>
 </li>
+{{{ end }}}
 {{{ if posts.display_purge_tools }}}
 <li {{{ if !posts.deleted }}}hidden{{{ end }}}>
 	<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" component="post/purge" role="menuitem" href="#" class="{{{ if !posts.deleted }}}hidden{{{ end }}}">
@@ -38,6 +40,14 @@
 </li>
 {{{ end }}}
 
+{{{ if posts.display_manage_editors_tools }}}
+<li>
+	<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" component="post/manage-editors" role="menuitem" href="#">
+		<span class="menu-icon"><i class="fa fa-fw text-secondary fa-user-pen"></i></span> [[topic:manage-editors]]
+	</a>
+</li>
+{{{ end }}}
+
 {{{ if posts.ip }}}
 <li>
 	<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" component="post/copy-ip" role="menuitem" href="#" data-clipboard-text="{posts.ip}">

package/templates/partials/topic/post.tpl

@@ -19,123 +19,125 @@
 			{{{ end }}}
 		</a>
 	</div>
-	<div class="post-container d-flex flex-grow-1 flex-column w-100" style="min-width:0;">
-		<div class="d-flex align-items-center gap-1 flex-wrap w-100 post-header mt-1" itemprop="author" itemscope itemtype="https://schema.org/Person">
-			<meta itemprop="name" content="{./user.username}">
-			{{{ if ./user.userslug }}}<meta itemprop="url" content="{config.relative_path}/user/{./user.userslug}">{{{ end }}}
-
-			<div class="bg-body d-sm-none">
-				<a class="d-inline-block position-relative text-decoration-none" href="{{{ if ./user.userslug }}}{config.relative_path}/user/{./user.userslug}{{{ else }}}#{{{ end }}}">
-					{buildAvatar(posts.user, "20px", true, "", "user/picture")}
-					{{{ if ./user.isLocal }}}
-					<span component="user/status" class="position-absolute top-100 start-100 border border-white border-2 rounded-circle status {posts.user.status}"><span class="visually-hidden">[[global:{posts.user.status}]]</span></span>
-					{{{ else }}}
-					<span component="user/locality" class="position-absolute top-100 start-100 lh-1 border border-white border-2 rounded-circle small" title="[[global:remote-user]]">
-						<span class="visually-hidden">[[global:remote-user]]</span>
-						<i class="fa fa-globe"></i>
-					</span>
-					{{{ end }}}
-				</a>
-			</div>
-
-			<a class="fw-bold text-nowrap" href="{{{ if ./user.userslug }}}{config.relative_path}/user/{./user.userslug}{{{ else }}}#{{{ end }}}" data-username="{posts.user.username}" data-uid="{posts.user.uid}">{posts.user.displayname}</a>
-
-			{{{ each posts.user.selectedGroups }}}
-			{{{ if posts.user.selectedGroups.slug }}}
-			<!-- IMPORT partials/groups/badge.tpl -->
-			{{{ end }}}
-			{{{ end }}}
+	<div class="post-container d-flex gap-2 flex-grow-1 flex-column w-100" style="min-width:0;">
+		<div class="d-flex align-items-start justify-content-between gap-1 flex-nowrap w-100 post-header" itemprop="author" itemscope itemtype="https://schema.org/Person">
+			<div class="d-flex gap-1 flex-wrap align-items-center">
+				<meta itemprop="name" content="{./user.username}">
+				{{{ if ./user.userslug }}}<meta itemprop="url" content="{config.relative_path}/user/{./user.userslug}">{{{ end }}}
+
+				<div class="bg-body d-sm-none">
+					<a class="d-inline-block position-relative text-decoration-none" href="{{{ if ./user.userslug }}}{config.relative_path}/user/{./user.userslug}{{{ else }}}#{{{ end }}}">
+						{buildAvatar(posts.user, "20px", true, "", "user/picture")}
+						{{{ if ./user.isLocal }}}
+						<span component="user/status" class="position-absolute top-100 start-100 border border-white border-2 rounded-circle status {posts.user.status}"><span class="visually-hidden">[[global:{posts.user.status}]]</span></span>
+						{{{ else }}}
+						<span component="user/locality" class="position-absolute top-100 start-100 lh-1 border border-white border-2 rounded-circle small" title="[[global:remote-user]]">
+							<span class="visually-hidden">[[global:remote-user]]</span>
+							<i class="fa fa-globe"></i>
+						</span>
+						{{{ end }}}
+					</a>
+				</div>
+
+				<a class="fw-bold text-nowrap" href="{{{ if ./user.userslug }}}{config.relative_path}/user/{./user.userslug}{{{ else }}}#{{{ end }}}" data-username="{posts.user.username}" data-uid="{posts.user.uid}">{posts.user.displayname}</a>
+
+				{{{ each posts.user.selectedGroups }}}
+				{{{ if posts.user.selectedGroups.slug }}}
+				<!-- IMPORT partials/groups/badge.tpl -->
+				{{{ end }}}
+				{{{ end }}}
 
-			{{{ if posts.user.banned }}}
-			<span class="badge bg-danger rounded-1">[[user:banned]]</span>
-			{{{ end }}}
+				{{{ if posts.user.banned }}}
+				<span class="badge bg-danger rounded-1">[[user:banned]]</span>
+				{{{ end }}}
 
-			<div class="d-flex gap-1 align-items-center">
-				<span class="text-muted">{generateWroteReplied(@value, config.timeagoCutoff)}</span>
+				<div class="d-flex gap-1 align-items-center">
+					<span class="text-muted">{generateWroteReplied(@value, config.timeagoCutoff)}</span>
 
-				<i component="post/edit-indicator" class="fa fa-edit text-muted{{{ if privileges.posts:history }}} pointer{{{ end }}} edit-icon {{{ if !posts.editor.username }}}hidden{{{ end }}}" title="[[global:edited-timestamp, {isoTimeToLocaleString(./editedISO, config.userLang)}]]"></i>
-				<span data-editor="{posts.editor.userslug}" component="post/editor" class="visually-hidden">[[global:last-edited-by, {posts.editor.username}]] <span class="timeago" title="{isoTimeToLocaleString(posts.editedISO, config.userLang)}"></span></span>
-			</div>
+					<i component="post/edit-indicator" class="fa fa-edit text-muted{{{ if privileges.posts:history }}} pointer{{{ end }}} edit-icon {{{ if !posts.editor.username }}}hidden{{{ end }}}" title="[[global:edited-timestamp, {isoTimeToLocaleString(./editedISO, config.userLang)}]]"></i>
+					<span data-editor="{posts.editor.userslug}" component="post/editor" class="visually-hidden">[[global:last-edited-by, {posts.editor.username}]] <span class="timeago" title="{isoTimeToLocaleString(posts.editedISO, config.userLang)}"></span></span>
+				</div>
 
-			{{{ if posts.user.custom_profile_info.length }}}
-			<div>
-				<span>
-					&#124;
-					{{{ each posts.user.custom_profile_info }}}
-					{posts.user.custom_profile_info.content}
-					{{{ end }}}
-				</span>
+				{{{ if posts.user.custom_profile_info.length }}}
+				<div>
+					<span>
+						&#124;
+						{{{ each posts.user.custom_profile_info }}}
+						{posts.user.custom_profile_info.content}
+						{{{ end }}}
+					</span>
+				</div>
+				{{{ end }}}
 			</div>
-			{{{ end }}}
-			<div class="d-flex align-items-center gap-1 flex-grow-1 justify-content-end">
+			<div class="d-flex align-items-center gap-1 justify-content-end">
 				<span class="bookmarked opacity-0 text-primary"><i class="fa fa-bookmark-o"></i></span>
 				<a href="{config.relative_path}/post/{encodeURIComponent(./pid)}" class="post-index text-muted d-none d-md-inline">#{increment(./index, "1")}</a>
 			</div>
 		</div>
 
-		<div class="content mt-2 text-break" component="post/content" itemprop="text">
+		<div class="content text-break" component="post/content" itemprop="text">
 			{posts.content}
 		</div>
-	</div>
-</div>
-
-<div component="post/footer" class="post-footer border-bottom pb-2">
-	{{{ if posts.user.signature }}}
-	<div component="post/signature" data-uid="{posts.user.uid}" class="text-xs text-muted mt-2">{posts.user.signature}</div>
-	{{{ end }}}
 
-	<div class="d-flex">
-		{{{ if !hideReplies }}}
-		<a component="post/reply-count" data-target-component="post/replies/container" href="#" class="d-flex gap-2 align-items-center mt-2 btn btn-ghost ff-secondary border rounded-1 p-1 text-muted text-decoration-none text-xs {{{ if (!./replies || shouldHideReplyContainer(@value)) }}}hidden{{{ end }}}">
-			<span component="post/reply-count/avatars" class="d-flex gap-1 {{{ if posts.replies.hasMore }}}hasMore{{{ end }}}">
-				{{{each posts.replies.users}}}
-				<span>{buildAvatar(posts.replies.users, "20px", true, "avatar-tooltip")}</span>
-				{{{end}}}
-				{{{ if posts.replies.hasMore}}}
-				<span style="height: 20px; line-height: 20px;"><i class="fa fa-ellipsis"></i></span>
-				{{{ end }}}
-			</span>
-
-			<span class="ms-2 replies-count fw-semibold" component="post/reply-count/text" data-replies="{posts.replies.count}">{posts.replies.text}</span>
-			<span class="ms-2 replies-last hidden-xs fw-semibold">[[topic:last-reply-time]] <span class="timeago" title="{posts.replies.timestampISO}"></span></span>
+		<div component="post/footer" class="post-footer border-bottom pb-2">
+			{{{ if posts.user.signature }}}
+			<div component="post/signature" data-uid="{posts.user.uid}" class="text-xs text-muted mt-2">{posts.user.signature}</div>
+			{{{ end }}}
 
-			<i class="fa fa-fw fa-chevron-down" component="post/replies/open"></i>
-		</a>
-		{{{ end }}}
-	</div>
+			<div class="d-flex flex-wrap {{{ if (hideReplies || !posts.replies.count) }}}justify-content-end{{{ else }}}justify-content-between{{{ end }}}">
+				{{{ if !hideReplies }}}
+				<a component="post/reply-count" data-target-component="post/replies/container" href="#" class="d-flex gap-2 align-items-center btn btn-ghost ff-secondary border rounded-1 p-1 text-muted text-decoration-none text-xs {{{ if (!./replies || shouldHideReplyContainer(@value)) }}}hidden{{{ end }}}">
+					<span component="post/reply-count/avatars" class="d-flex gap-1 {{{ if posts.replies.hasMore }}}hasMore{{{ end }}}">
+						{{{each posts.replies.users}}}
+						<span>{buildAvatar(posts.replies.users, "20px", true, "avatar-tooltip")}</span>
+						{{{end}}}
+						{{{ if posts.replies.hasMore}}}
+						<span style="height: 20px; line-height: 20px;"><i class="fa fa-ellipsis"></i></span>
+						{{{ end }}}
+					</span>
 
-	<div component="post/replies/container" class="my-2 col-11 border rounded-1 p-3 hidden-empty"></div>
+					<span class="ms-2 replies-count fw-semibold text-nowrap" component="post/reply-count/text" data-replies="{posts.replies.count}">{posts.replies.text}</span>
+					<span class="ms-2 replies-last hidden-xs fw-semibold">[[topic:last-reply-time]] <span class="timeago" title="{posts.replies.timestampISO}"></span></span>
 
-	<div component="post/actions" class="d-flex justify-content-end gap-1 post-tools">
-		<!-- IMPORT partials/topic/reactions.tpl -->
-		<a component="post/reply" href="#" class="btn btn-ghost btn-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 btn-ghost btn-sm {{{ if !privileges.topics:reply }}}hidden{{{ end }}}" title="[[topic:quote]]"><i class="fa fa-fw fa-quote-right text-primary"></i></a>
+					<i class="fa fa-fw fa-chevron-down" component="post/replies/open"></i>
+				</a>
+				{{{ end }}}
+				<div component="post/actions" class="d-flex flex-grow-1 justify-content-end gap-1 post-tools">
+					<!-- IMPORT partials/topic/reactions.tpl -->
+					<a component="post/reply" href="#" class="btn btn-ghost btn-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 btn-ghost btn-sm {{{ if !privileges.topics:reply }}}hidden{{{ end }}}" title="[[topic:quote]]"><i class="fa fa-fw fa-quote-right text-primary"></i></a>
 
-		{{{ if ./announces }}}
-		<a component="post/announce-count" href="#" class="btn btn-ghost btn-sm d-flex gap-2 align-items-center" title="[[activitypub:announcers]]"><i class="fa fa-share-alt text-primary"></i> {./announces}</a>
-		{{{ end }}}
+					{{{ if ./announces }}}
+					<a component="post/announce-count" href="#" class="btn btn-ghost btn-sm d-flex gap-2 align-items-center" title="[[activitypub:announcers]]"><i class="fa fa-share-alt text-primary"></i> {./announces}</a>
+					{{{ end }}}
 
-		{{{ if !reputation:disabled }}}
-		<div class="d-flex votes align-items-center">
-			<a component="post/upvote" href="#" class="btn btn-ghost btn-sm{{{ if posts.upvoted }}} upvoted{{{ end }}}" title="[[topic:upvote-post]]">
-				<i class="fa fa-fw fa-chevron-up text-primary"></i>
-			</a>
+					{{{ if !reputation:disabled }}}
+					<div class="d-flex votes align-items-center">
+						<a component="post/upvote" href="#" class="btn btn-ghost btn-sm{{{ if posts.upvoted }}} upvoted{{{ end }}}" title="[[topic:upvote-post]]">
+							<i class="fa fa-fw fa-chevron-up text-primary"></i>
+						</a>
+
+						<meta itemprop="upvoteCount" content="{posts.upvotes}">
+						<meta itemprop="downvoteCount" content="{posts.downvotes}">
+						<a href="#" class="px-2 mx-1 btn btn-ghost btn-sm" component="post/vote-count" data-votes="{posts.votes}" title="[[global:voters]]">{posts.votes}</a>
+
+						{{{ if !downvote:disabled }}}
+						<a component="post/downvote" href="#" class="btn btn-ghost btn-sm{{{ if posts.downvoted }}} downvoted{{{ end }}}" title="[[topic:downvote-post]]">
+							<i class="fa fa-fw fa-chevron-down text-primary"></i>
+						</a>
+						{{{ end }}}
+					</div>
+					{{{ end }}}
 
-			<meta itemprop="upvoteCount" content="{posts.upvotes}">
-			<meta itemprop="downvoteCount" content="{posts.downvotes}">
-			<a href="#" class="px-2 mx-1 btn btn-ghost btn-sm" component="post/vote-count" data-votes="{posts.votes}" title="[[global:voters]]">{posts.votes}</a>
+					<!-- IMPORT partials/topic/post-menu.tpl -->
+				</div>
+			</div>
 
-			{{{ if !downvote:disabled }}}
-			<a component="post/downvote" href="#" class="btn btn-ghost btn-sm{{{ if posts.downvoted }}} downvoted{{{ end }}}" title="[[topic:downvote-post]]">
-				<i class="fa fa-fw fa-chevron-down text-primary"></i>
-			</a>
-			{{{ end }}}
+			<div component="post/replies/container" class="my-2 col-11 border rounded-1 p-3 hidden-empty"></div>
 		</div>
-		{{{ end }}}
-
-		<!-- IMPORT partials/topic/post-menu.tpl -->
 	</div>
 </div>
+
 {{{ if (!./index && widgets.mainpost-footer.length) }}}
 <div data-widget-area="mainpost-footer">
 	{{{ each widgets.mainpost-footer }}}

package/templates/partials/topic-list-bar.tpl

@@ -1,6 +1,6 @@
 <div class="{{{ if config.theme.stickyToolbar }}}sticky-tools{{{ end }}} mb-3">
 	<nav class="topic-list-header d-flex flex-nowrap my-2 p-0 border-0 rounded">
-		<div class="d-flex flex-row p-2 text-bg-light gap-1 border rounded w-100 align-items-center">
+		<div class="d-flex flex-row p-2 text-bg-light gap-1 border rounded w-100">
 			<div component="category/controls" class="d-flex me-auto mb-0 gap-2 flex-wrap">
 				{{{ if (template.category || template.world) }}}
 				<!-- IMPORT partials/category/watch.tpl -->