nodebb-theme-harmony 2.0.0-pre.9 → 2.0.0

package/templates/partials/topic/navigator.tpl

@@ -2,7 +2,7 @@
 	<div class="d-flex justify-content-end sticky-top mt-4" style="top:6rem;z-index:1;">
 		<div class="ps-1 ps-md-0 d-inline-block">
 			<div class="scroller-content d-flex gap-2 flex-column align-items-start">
-				<div class="pointer pagetop btn-ghost-sm ff-secondary d-inline-flex" style="padding: 4px;"><i class="fa fa-chevron-up"></i> <span class="timeago text-xs text-muted text-nowrap" title="{./timestampISO}"></span></div>
+				<button class="pagetop btn btn-ghost btn-sm ff-secondary d-inline-flex border-0 align-items-center gap-2" style="padding: 4px;"><i class="fa fa-chevron-up"></i> <span class="timeago text-xs text-muted text-nowrap" title="{./timestampISO}"></span></button>
 				<div class="scroller-container position-relative">
 					<div class="scroller-thumb d-flex gap-2 text-nowrap position-relative" style="height: 40px;">
 						<div class="scroller-thumb-icon bg-primary rounded d-inline-block" style="width:9px; height: 40px;"></div>
@@ -18,7 +18,7 @@
 						</div>
 					</div>
 				</div>
-				<div class="pointer pagebottom btn-ghost-sm ff-secondary d-inline-flex" style="padding: 4px;"><i class="fa fa-chevron-down"></i> <span class="timeago text-xs text-muted text-nowrap" title="{./lastposttimeISO}"></span></div>
+				<button class="pagebottom btn btn-ghost btn-sm ff-secondary d-inline-flex border-0 align-items-center gap-2" style="padding: 4px;"><i class="fa fa-chevron-down"></i> <span class="timeago text-xs text-muted text-nowrap" title="{./lastposttimeISO}"></span></button>
 			</div>
 		</div>
 	</div>

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}">
@@ -84,15 +94,21 @@
 	</li>
 	{{{ end }}}
 
+
+	{{{ if !posts.display_original_url }}}
 	<li>
 		<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" role="menuitem" href="#" data-clipboard-text="{posts.absolute_url}">
 			<i class="fa fa-fw text-secondary fa-link"></i> [[topic:copy-permalink]]
 		</a>
 	</li>
-
-	{{{ if posts.display_original_url }}}
+	{{{ else }}}
+	<li>
+		<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" role="menuitem" href="#" data-clipboard-text="{{{ if posts.url }}}{posts.url}{{{ else }}}{posts.pid}{{{ end }}}">
+			<i class="fa fa-fw text-secondary fa-link"></i> [[topic:copy-permalink]]
+		</a>
+	</li>
 	<li>
-		<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" role="menuitem" href="{posts.pid}">
+		<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" role="menuitem" target="_self" href="{{{ if posts.url }}}{posts.url}{{{ else }}}{posts.pid}{{{ end }}}">
 			<i class="fa fa-fw text-secondary fa-external-link"></i> [[topic:go-to-original]]
 		</a>
 	</li>
@@ -116,7 +132,7 @@
 	<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" component="post/flag" role="menuitem" href="#"><i class="fa fa-fw text-secondary fa-flag"></i> [[topic:flag-post]]</a>
 </li>
 <li {{{ if !posts.flags.flagged }}}hidden{{{ end }}} class="disabled text-secondary">
-	<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" component="post/already-flagged" role="menuitem" href="#"><i class="fa fa-fw text-secondary fa-flag"></i> [[topic:already-flagged]]</a>
+	<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" component="post/already-flagged" role="menuitem" href="#" data-flag-id="{posts.flagId}"><i class="fa fa-fw text-secondary fa-flag"></i> [[topic:already-flagged]]</a>
 </li>
 
 {{{ if (!posts.selfPost && posts.uid) }}}

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

@@ -1,30 +1,4 @@
-<span component="post/tools" class="dropdown moderator-tools bottom-sheet d-inline-block {{{ if !./display_post_menu }}}hidden{{{ end }}}">
-	<a class="btn-ghost-sm ff-secondary dropdown-toggle d-block" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="[[topic:post-tools]]"><i class="fa fa-fw fa-ellipsis-v text-primary"></i></a>
-	<ul class="dropdown-menu dropdown-menu-end p-1 text-sm" role="menu">
-		<li class="dropdown-item placeholder-wave">
-			<div class="placeholder" style="width: 20px;"></div>
-			<div class="placeholder col-3"></div>
-		</li>
-		<li class="dropdown-item placeholder-wave">
-			<div class="placeholder" style="width: 20px;"></div>
-			<div class="placeholder col-5"></div>
-		</li>
-		<li class="dropdown-item placeholder-wave">
-			<div class="placeholder" style="width: 20px;"></div>
-			<div class="placeholder col-9"></div>
-		</li>
-		<li class="dropdown-item placeholder-wave">
-			<div class="placeholder" style="width: 20px;"></div>
-			<div class="placeholder col-7"></div>
-		</li>
-		<li class="dropdown-item placeholder-wave">
-			<div class="placeholder" style="width: 20px;"></div>
-			<div class="placeholder col-10"></div>
-		</li>
-		<li class="dropdown-divider"></li>
-		<li class="dropdown-item placeholder-wave">
-			<div class="placeholder" style="width: 20px;"></div>
-			<div class="placeholder col-10"></div>
-		</li>
-	</ul>
+<span component="post/tools" class="dropdown bottom-sheet {{{ if !./display_post_menu }}}hidden{{{ end }}}">
+	<a class="btn btn-ghost btn-sm ff-secondary dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="[[topic:post-tools]]"><i class="fa fa-fw fa-ellipsis-v text-primary"></i></a>
+	<ul class="dropdown-menu dropdown-menu-end p-1 text-sm" role="menu"></ul>
 </span>

package/templates/partials/topic/post.tpl

@@ -5,129 +5,136 @@
 	{{{ end }}}
 </div>
 {{{ end }}}
-
 <div class="d-flex align-items-start gap-3">
-	<div class="icon bg-body d-none d-sm-block rounded-circle" style="outline: 2px solid var(--bs-body-bg);">
-		<a class="d-inline-block position-relative text-decoration-none" href="{{{ if ./user.userslug }}}{config.relative_path}/user/{./user.userslug}{{{ else }}}#{{{ end }}}">
+	<div class="bg-body d-none d-sm-block rounded-circle" style="outline: 2px solid var(--bs-body-bg);">
+		<a class="d-inline-block position-relative text-decoration-none" href="{{{ if ./user.userslug }}}{config.relative_path}/user/{./user.userslug}{{{ else }}}#{{{ end }}}" aria-label="[[aria:profile-page-for, {./user.displayname}]]">
 			{buildAvatar(posts.user, "48px", true, "", "user/picture")}
-			<span component="user/status" class="position-absolute translate-middle-y border border-white border-2 rounded-circle status {posts.user.status}"><span class="visually-hidden">[[global:{posts.user.status}]]</span></span>
-		</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="icon 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")}
-					<span component="user/status" class="position-absolute translate-middle-y border border-white border-2 rounded-circle status {posts.user.status}"><span class="visually-hidden">[[global:{posts.user.status}]]</span></span>
-				</a>
-			</div>
-
-			<span class="text-nowrap">
-				<a class="fw-bold" 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>
+			{{{ 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>
-
-			{{{ each posts.user.selectedGroups }}}
-			{{{ if posts.user.selectedGroups.slug }}}
-			<!-- IMPORT partials/groups/badge.tpl -->
-			{{{ end }}}
 			{{{ end }}}
+		</a>
+	</div>
+	<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.displayname}">
+				{{{ 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 }}}
-
-			<div class="d-flex gap-1 align-items-center">
-				<span class="text-muted">
-					{{{ if posts.toPid }}}
-					{generateRepliedTo(@value, config.timeagoCutoff)}
-					{{{ else }}}
-					{generateWrote(@value, config.timeagoCutoff)}
-					{{{ end }}}
-				</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>
+				{{{ if posts.user.banned }}}
+				<span class="badge bg-danger rounded-1">[[user:banned]]</span>
+				{{{ end }}}
 
-			<div>
-				<span>
-					{{{ if posts.user.custom_profile_info.length }}}
-					&#124;
-					{{{ each posts.user.custom_profile_info }}}
-					{posts.user.custom_profile_info.content}
-					{{{ end }}}
-					{{{ end }}}
-				</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>
+
+				{{{ 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>
-			<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 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-ghost ff-secondary border rounded-1 p-1 threaded-replies user-select-none text-muted text-decoration-none text-xs {{{ if (!./replies || shouldHideReplyContainer(@value)) }}}hidden{{{ end }}}">
-			<span component="post/reply-count/avatars" class="avatars d-inline-flex gap-1 align-items-top {{{ 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><i class="fa fa-ellipsis"></i></span>
+			<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>
+
+					<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>
+
+					<i class="fa fa-fw fa-chevron-down" component="post/replies/open"></i>
+				</a>
 				{{{ 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/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>
 
-			<i class="fa fa-fw fa-chevron-down" component="post/replies/open"></i>
-			<i class="fa fa-fw fa-chevron-up hidden" component="post/replies/close"></i>
-			<i class="fa fa-fw fa-spin fa-spinner hidden" component="post/replies/loading"></i>
-		</a>
-		{{{ end }}}
-	</div>
-
-	<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">
-		<!-- IMPORT partials/topic/reactions.tpl -->
-		<a component="post/reply" href="#" class="btn-ghost-sm user-select-none {{{ 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 user-select-none {{{ 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="[[topic: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-ghost-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="d-inline-block px-2 mx-1 btn-ghost-sm ff-secondary" 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-ghost-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>
 

package/templates/partials/topic/quickreply.tpl

@@ -3,7 +3,7 @@
 	<div class="icon hidden-xs">
 		<a class="d-inline-block position-relative" href="{{{ if loggedInUser.userslug }}}{config.relative_path}/user/{loggedInUser.userslug}{{{ else }}}#{{{ end }}}">
 			{buildAvatar(loggedInUser, "48px", true, "", "user/picture")}
-			{{{ if loggedInUser.status }}}<span component="user/status" class="position-absolute translate-middle-y border border-white border-2 rounded-circle status {loggedInUser.status}"><span class="visually-hidden">[[global:{loggedInUser.status}]]</span></span>{{{ end }}}
+			{{{ if loggedInUser.status }}}<span component="user/status" class="position-absolute top-100 start-100 border border-white border-2 rounded-circle status {loggedInUser.status}"><span class="visually-hidden">[[global:{loggedInUser.status}]]</span></span>{{{ end }}}
 		</a>
 	</div>
 	<form class="flex-grow-1 d-flex flex-column gap-2" method="post" action="{config.relative_path}/compose">
@@ -15,7 +15,7 @@
 		</div>
 		<div>
 			<div class="d-flex justify-content-end gap-2">
-				<button type="submit" component="topic/quickreply/expand" class="btn-ghost-sm border" title="[[topic:open-composer]]"><i class="fa fa-expand"></i></button>
+				<button type="submit" component="topic/quickreply/expand" class="btn btn-ghost btn-sm border" title="[[topic:open-composer]]"><i class="fa fa-expand"></i></button>
 				<button type="submit" component="topic/quickreply/button" class="btn btn-sm btn-primary">[[topic:post-quick-reply]]</button>
 			</div>
 		</div>

package/templates/partials/topic/reply-button.tpl

@@ -1,5 +1,6 @@
-<div component="topic/reply/container" class="btn-group action-bar {{{ if !privileges.topics:reply }}}hidden{{{ end }}}">
-	<a href="{config.relative_path}/compose?tid={tid}" class="d-flex align-items-center btn btn-sm btn-primary px-3 fw-semibold " component="topic/reply" data-ajaxify="false" role="button"><i class="fa fa-reply d-sm-block d-md-none"></i><span class="d-none d-md-block"> [[topic:reply]]</span></a>
+{{{ if privileges.topics:reply }}}
+<div component="topic/reply/container" class="btn-group">
+	<a href="{config.relative_path}/compose?tid={tid}" class="d-flex align-items-center btn btn-sm btn-primary px-3 fw-semibold" component="topic/reply" data-ajaxify="false" role="button"><i class="fa fa-reply d-sm-block d-md-none"></i><span class="d-none d-md-block"> [[topic:reply]]</span></a>
 	<button type="button" class="btn btn-sm btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="[[topic:reply-options]]">
 		<span class="caret"></span>
 	</button>
@@ -7,6 +8,7 @@
 		<li><a class="dropdown-item rounded-1" href="#" component="topic/reply-as-topic" role="menuitem">[[topic:reply-as-topic]]</a></li>
 	</ul>
 </div>
+{{{ end }}}
 
 {{{ if loggedIn }}}
 	{{{ if !privileges.topics:reply }}}

package/templates/partials/topic/sort.tpl

@@ -1,5 +1,5 @@
 <div class="btn-group bottom-sheet" component="thread/sort">
-	<button class="btn-ghost-sm ff-secondary d-flex gap-2 align-items-center dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="[[aria:post-sort-option, {sortOptionLabel}]]">
+	<button class="btn btn-ghost btn-sm ff-secondary d-flex gap-2 align-items-center dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="[[aria:post-sort-option, {sortOptionLabel}]]">
 		<i class="fa fa-fw fa-arrow-down-wide-short text-primary"></i>
 		<span class="d-none d-md-inline fw-semibold">{sortOptionLabel}</span>
 	</button>

package/templates/partials/topic/thumbs.tpl

@@ -1,5 +1,5 @@
 {{{ each thumbs }}}
-<a class="d-inline-block h-100" href="{./url}">
+<a class="d-inline-block" href="{./url}">
 	<img class="rounded-1 h-100 bg-light" style="max-width: 5.33rem; object-fit: contain;" src="{./url}" />
 </a>
 {{{ end }}}

package/templates/partials/topic/tools.tpl

@@ -1,13 +1,9 @@
 {{{ if privileges.view_thread_tools }}}
 <div class="btn-group thread-tools bottom-sheet">
-	<button class="btn-ghost-sm ff-secondary d-flex gap-2 dropdown-toggle" data-bs-toggle="dropdown" type="button" aria-haspopup="true" aria-expanded="false">
+	<button class="btn btn-ghost btn-sm ff-secondary d-flex align-items-center gap-2 dropdown-toggle" data-bs-toggle="dropdown" type="button" aria-haspopup="true" aria-expanded="false">
 		<i class="fa fa-fw fa-gear text-primary"></i>
 		<span class="d-none d-md-inline fw-semibold">[[topic:thread-tools.title]]</span>
 	</button>
-	<ul class="dropdown-menu p-1 text-sm" role="menu">
-		<li class="placeholder-wave"><a class="dropdown-item d-flex gap-2" href="#"><div class="placeholder bg-secondary rounded-1" style="width: 1em;"></div><div class="placeholder bg-secondary rounded-1 col-8"></div></a></li>
-		<li class="placeholder-wave"><a class="dropdown-item d-flex gap-2" href="#"><div class="placeholder bg-secondary rounded-1" style="width: 1em;"></div><div class="placeholder bg-secondary rounded-1 col-8"></div></a></li>
-		<li class="placeholder-wave"><a class="dropdown-item d-flex gap-2" href="#"><div class="placeholder bg-secondary rounded-1" style="width: 1em;"></div><div class="placeholder bg-secondary rounded-1 col-8"></div></a></li>
-	</ul>
+	<ul class="dropdown-menu p-1 text-sm" role="menu"></ul>
 </div>
 {{{ end }}}

package/templates/partials/topic/watch.tpl

@@ -1,6 +1,6 @@
 {{{ if config.loggedIn }}}
 <div class="btn-group bottom-sheet" component="topic/watch">
-	<button class="btn-ghost-sm ff-secondary d-flex gap-2 dropdown-toggle" data-bs-toggle="dropdown" type="button" aria-haspopup="true" aria-expanded="false">
+	<button class="btn btn-ghost btn-sm ff-secondary d-flex gap-2 dropdown-toggle" data-bs-toggle="dropdown" type="button" aria-haspopup="true" aria-expanded="false">
 		<span component="topic/following/menu" class="d-flex gap-2 align-items-center{{{ if !isFollowing }}} hidden{{{ end }}}">
 			<i class="flex-shrink-0 fa fa-fw fa-bell-o text-primary"></i>
 			<span class="d-none d-md-inline fw-semibold">[[topic:watching]]</span>

package/templates/partials/topic-filters.tpl

@@ -1,5 +1,5 @@
 <div class="btn-group bottom-sheet{{{ if !filters.length }}} hidden{{{ end }}}">
-	<button type="button" class="btn-ghost-sm ff-secondary d-flex gap-2 dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+	<button type="button" class="btn btn-ghost btn-sm ff-secondary d-flex gap-2 align-items-center dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 		<i class="fa fa-fw fa-filter text-primary"></i>
 		<span class="visible-md-inline visible-lg-inline fw-semibold">{selectedFilter.name}</span>
 	</button>

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

@@ -1,8 +1,8 @@
 <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 }}}
+				{{{ if (template.category || template.world) }}}
 				<!-- IMPORT partials/category/watch.tpl -->
 				<!-- IMPORT partials/tags/filter-dropdown-left.tpl -->
 				<!-- IMPORT partials/category/sort.tpl -->
@@ -24,19 +24,19 @@
 				<!-- IMPORT partials/category/filter-dropdown-left.tpl -->
 				<!-- IMPORT partials/tags/watch.tpl -->
 				{{{ end }}}
-				<!-- IMPORT partials/category/tools.tpl -->
+				<!-- IMPORT partials/category/tools-dropdown-left.tpl -->
 
 				{{{ if (!feeds:disableRSS && rssFeedUrl) }}}
-				<a class="btn-ghost-sm d-none d-lg-flex align-self-stretch" target="_blank" href="{rssFeedUrl}" itemprop="item" title="[[global:rss-feed]]"><i class="fa fa-rss text-primary"></i></a>
+				<a class="btn btn-ghost btn-sm d-none d-lg-flex align-items-center align-self-stretch" target="_blank" href="{rssFeedUrl}" itemprop="item" title="[[global:rss-feed]]"><i class="fa fa-rss text-primary"></i></a>
 				{{{ end }}}
 
-				<a href="{config.relative_path}{{{ if template.category }}}{url}{{{ else }}}/{selectedFilter.url}{querystring}{{{ end }}}" class="btn btn-secondary fw-semibold position-absolute top-100 translate-middle-x start-50 mt-1 hide" style="--bs-btn-padding-y: .25rem; --bs-btn-padding-x: .5rem; --bs-btn-font-size: .75rem;" id="new-topics-alert">
+				<a href="{{{ if (template.category || template.world) }}}{url}{{{ else }}}{config.relative_path}/{selectedFilter.url}{querystring}{{{ end }}}" class="btn btn-secondary fw-semibold position-absolute top-100 translate-middle-x start-50 mt-1 hide" style="--bs-btn-padding-y: .25rem; --bs-btn-padding-x: .5rem; --bs-btn-font-size: .75rem;" id="new-topics-alert">
 					<i class="fa fa-fw fa-arrow-up"></i> [[recent:load-new-posts]]
 				</a>
 			</div>
 
 			<div class="d-flex gap-1 align-items-center">
-				{{{ if template.category }}}
+				{{{ if (template.category || template.world) }}}
 					{{{ if privileges.topics:create }}}
 					<a href="{config.relative_path}/compose?cid={cid}" component="category/post" id="new_topic" class="btn btn-primary btn-sm text-nowrap" data-ajaxify="false" role="button">[[category:new-topic-button]]</a>
 					{{{ end }}}

package/templates/partials/topic-terms.tpl

@@ -1,5 +1,5 @@
 <div class="btn-group bottom-sheet {{{ if !terms.length }}}hidden{{{ end }}}">
-	<button type="button" class="btn-ghost-sm ff-secondary d-flex gap-2 dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+	<button type="button" class="btn btn-ghost btn-sm ff-secondary d-flex align-items-center gap-2 dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 		<i class="fa fa-fw fa-clock text-primary"></i>
 		<span class="visible-md-inline visible-lg-inline fw-semibold">{selectedTerm.name}</span>
 	</button>

package/templates/partials/topics_list.tpl

@@ -10,8 +10,8 @@
 
 		<div class="d-flex p-0 col-12 col-lg-7 gap-2 gap-lg-3 pe-1 align-items-start {{{ if config.theme.mobileTopicTeasers }}}mb-2 mb-lg-0{{{ end }}}">
 			<div class="flex-shrink-0 position-relative">
-				<a class="text-decoration-none" href="{{{ if ./user.userslug }}}{config.relative_path}/user/{./user.userslug}{{{ else }}}#{{{ end }}}">
-					{buildAvatar(./user, "40px", true, "avatar avatar-tooltip")}
+				<a class="d-inline-block text-decoration-none avatar-tooltip" title="{./user.displayname}" href="{{{ if ./user.userslug }}}{config.relative_path}/user/{./user.userslug}{{{ else }}}#{{{ end }}}">
+					{buildAvatar(./user, "40px", true)}
 				</a>
 				{{{ if showSelect }}}
 				<div class="checkbox position-absolute top-100 start-50 translate-middle-x pt-2 m-0 d-none d-lg-flex" style="max-width:max-content">
@@ -24,6 +24,14 @@
 					<a class="text-reset" href="{{{ if topics.noAnchor }}}#{{{ else }}}{config.relative_path}/topic/{./slug}{{{ if ./bookmark }}}/{./bookmark}{{{ end }}}{{{ end }}}">{./title}</a>
 				</h3>
 				<span component="topic/labels" class="d-flex flex-wrap gap-1 w-100">
+					<span component="topic/watched" class="badge border border-gray-300 text-body {{{ if !./followed }}}hidden{{{ end }}}">
+						<i class="fa fa-bell-o"></i>
+						<span>[[topic:watching]]</span>
+					</span>
+					<span component="topic/ignored" class="badge border border-gray-300 text-body {{{ if !./ignored }}}hidden{{{ end }}}">
+						<i class="fa fa-eye-slash"></i>
+						<span>[[topic:ignoring]]</span>
+					</span>
 					<span component="topic/scheduled" class="badge border border-gray-300 text-body {{{ if !./scheduled }}}hidden{{{ end }}}">
 						<i class="fa fa-clock-o"></i>
 						<span>[[topic:scheduled]]</span>
@@ -36,7 +44,7 @@
 						<i class="fa fa-lock"></i>
 						<span>[[topic:locked]]</span>
 					</span>
-					<span class="badge border border-gray-300 text-body {{{ if !./oldCid }}}hidden{{{ end }}}">
+					<span component="topic/moved" class="badge border border-gray-300 text-body {{{ if (!./oldCid || (./oldCid == "-1")) }}}hidden{{{ end }}}">
 						<i class="fa fa-arrow-circle-right"></i>
 						<span>[[topic:moved]]</span>
 					</span>
@@ -106,7 +114,7 @@
 					{{{ else }}}
 					{{{ if ./teaser.pid }}}
 					<div class="ps-2">
-						<a href="{config.relative_path}/user/{./teaser.user.userslug}" class="text-decoration-none">{buildAvatar(./teaser.user, "18px", true, "avatar-tooltip not-responsive")}</a>
+						<a href="{{{ if ./teaser.user.userslug }}}{config.relative_path}/user/{./teaser.user.userslug}{{{ else }}}#{{{ end }}}" class="text-decoration-none avatar-tooltip" title="{./teaser.user.displayname}">{buildAvatar(./teaser.user, "18px", true)}</a>
 						<a class="permalink text-muted timeago text-xs" href="{config.relative_path}/topic/{./slug}/{./teaser.index}" title="{./teaser.timestampISO}" aria-label="[[global:lastpost]]"></a>
 					</div>
 					<div class="post-content text-xs ps-2 line-clamp-sm-2 lh-sm text-break position-relative flex-fill">