nodebb-theme-harmony 2.0.0-pre.3 → 2.0.0-pre.30

package/templates/partials/sidebar/user-menu.tpl

@@ -15,44 +15,44 @@
 		<a href="#" class="dropdown-item rounded-1 user-status d-flex align-items-center gap-2 {{{ if user.online }}}selected{{{ end }}}" data-status="online" role="menuitem">
 			<span component="user/status" class="flex-shrink-0 border border-white border-2 rounded-circle status online"></span>
 			<span class="flex-grow-1">[[global:online]]</span>
-			<i class="fa-solid fa-check text-muted flex-shrink-0" aria-label="[[global:selected]]"></i>
+			<i class="fa-solid fa-check text-secondary flex-shrink-0" aria-label="[[global:selected]]"></i>
 		</a>
 	</li>
 	<li>
 		<a href="#" class="dropdown-item rounded-1 user-status d-flex align-items-center gap-2 {{{ if user.away }}}selected{{{ end }}}" data-status="away" role="menuitem">
 			<span component="user/status" class="flex-shrink-0 border border-white border-2 rounded-circle status away"></span>
 			<span class="flex-grow-1">[[global:away]]</span>
-			<i class="fa-solid fa-check text-muted flex-shrink-0"><span class="visually-hidden"></span>[[global:selected]]</span></i>
+			<i class="fa-solid fa-check text-secondary flex-shrink-0"><span class="visually-hidden"></span>[[global:selected]]</span></i>
 		</a>
 	</li>
 	<li>
 		<a href="#" class="dropdown-item rounded-1 user-status d-flex align-items-center gap-2 {{{ if user.dnd }}}selected{{{ end }}}" data-status="dnd" role="menuitem">
 			<span component="user/status" class="flex-shrink-0 border border-white border-2 rounded-circle status dnd"></span>
 			<span class="flex-grow-1">[[global:dnd]]</span>
-			<i class="fa-solid fa-check text-muted flex-shrink-0"></i>
+			<i class="fa-solid fa-check text-secondary flex-shrink-0"></i>
 		</a>
 	</li>
 	<li>
 		<a href="#" class="dropdown-item rounded-1 user-status d-flex align-items-center gap-2 {{{ if user.offline }}}selected{{{ end }}}" data-status="offline" role="menuitem">
 			<span component="user/status" class="flex-shrink-0 border border-white border-2 rounded-circle status offline"></span>
 			<span class="flex-grow-1">[[global:invisible]]</span>
-			<i class="fa-solid fa-check text-muted flex-shrink-0"></i>
+			<i class="fa-solid fa-check text-secondary flex-shrink-0"></i>
 		</a>
 	</li>
 	<li role="presentation" class="dropdown-divider"></li>
 	<li>
 		<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="{relative_path}/user/{user.userslug}/bookmarks" role="menuitem">
-			<i class="fa fa-fw fa-bookmark text-muted"></i> <span>[[user:bookmarks]]</span>
+			<i class="fa fa-fw fa-bookmark text-secondary"></i> <span>[[user:bookmarks]]</span>
 		</a>
 	</li>
 	<li>
 		<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" component="header/profilelink/edit" href="{relative_path}/user/{user.userslug}/edit" role="menuitem">
-			<i class="fa fa-fw fa-edit text-muted"></i> <span>[[user:edit-profile]]</span>
+			<i class="fa fa-fw fa-edit text-secondary"></i> <span>[[user:edit-profile]]</span>
 		</a>
 	</li>
 	<li>
 		<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" component="header/profilelink/settings" href="{relative_path}/user/{user.userslug}/settings" role="menuitem">
-			<i class="fa fa-fw fa-gear text-muted"></i> <span>[[user:settings]]</span>
+			<i class="fa fa-fw fa-gear text-secondary"></i> <span>[[user:settings]]</span>
 		</a>
 	</li>
 	{{{ if showModMenu }}}
@@ -60,31 +60,31 @@
 	<li><h6 class="dropdown-header text-xs">[[pages:moderator-tools]]</h6></li>
 	<li>
 		<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="{relative_path}/flags" role="menuitem">
-			<i class="fa fa-fw fa-flag text-muted"></i> <span>[[pages:flagged-content]]</span>
+			<i class="fa fa-fw fa-flag text-secondary"></i> <span>[[pages:flagged-content]]</span>
 		</a>
 	</li>
 	<li>
 		<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="{relative_path}/post-queue" role="menuitem">
-			<i class="fa fa-fw fa-list-alt text-muted"></i> <span>[[pages:post-queue]]</span>
+			<i class="fa fa-fw fa-list-alt text-secondary"></i> <span>[[pages:post-queue]]</span>
 		</a>
 	</li>
 	{{{ if registrationQueueEnabled }}}
 	<li>
 		<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="{relative_path}/registration-queue" role="menuitem">
-			<i class="fa fa-fw fa-list-alt text-muted"></i> <span>[[pages:registration-queue]]</span>
+			<i class="fa fa-fw fa-list-alt text-secondary"></i> <span>[[pages:registration-queue]]</span>
 		</a>
 	</li>
 	{{{ end }}}
 	<li>
 		<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="{relative_path}/ip-blacklist" role="menuitem">
-			<i class="fa fa-fw fa-ban text-muted"></i> <span>[[pages:ip-blacklist]]</span>
+			<i class="fa fa-fw fa-ban text-secondary"></i> <span>[[pages:ip-blacklist]]</span>
 		</a>
 	</li>
 	{{{ else }}}
 	{{{ if postQueueEnabled }}}
 	<li>
 		<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="{relative_path}/post-queue" role="menuitem">
-			<i class="fa fa-fw fa-list-alt text-muted"></i> <span>[[pages:post-queue]]</span>
+			<i class="fa fa-fw fa-list-alt text-secondary"></i> <span>[[pages:post-queue]]</span>
 		</a>
 	</li>
 	{{{ end }}}
@@ -96,7 +96,7 @@
 			<input type="hidden" name="_csrf" value="{config.csrf_token}">
 			<input type="hidden" name="noscript" value="true">
 			<button type="submit" class="dropdown-item rounded-1 d-flex align-items-center gap-2">
-				<i class="fa fa-fw fa-sign-out text-muted"></i><span>[[global:logout]]</span>
+				<i class="fa fa-fw fa-sign-out text-secondary"></i><span>[[global:logout]]</span>
 			</button>
 		</form>
 	</li>

package/templates/partials/sidebar-left.tpl

@@ -3,8 +3,7 @@
 		{{{ each navigation }}}
 		{{{ if displayMenuItem(@root, @index) }}}
 		<li class="nav-item mx-2 {./class}{{{ if ./dropdown }}} dropend{{{ end }}}" title="{./title}">
-			<a class="nav-link navigation-link d-flex gap-2 justify-content-between align-items-center {{{ if ./dropdown }}}dropdown-toggle{{{ end }}}"
-			{{{ if ./dropdown }}} href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" {{{ else }}} href="{./route}"{{{ end }}} {{{ if ./id }}}id="{./id}"{{{ end }}}{{{ if ./targetBlank }}} target="_blank"{{{ end }}} {{{ if ./text }}}aria-label="{./text}"{{{ end }}}>
+			<a class="nav-link navigation-link d-flex gap-2 justify-content-between align-items-center {{{ if ./dropdown }}}dropdown-toggle{{{ end }}}" {{{ if ./dropdown }}} href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" {{{ else }}} href="{./route}"{{{ end }}} {{{ if ./id }}}id="{./id}"{{{ end }}}{{{ if ./targetBlank }}} target="_blank"{{{ end }}} {{{ if ./text }}}aria-label="{./text}"{{{ end }}}>
 				<span class="d-flex gap-2 align-items-center text-nowrap truncate-open">
 					<span class="position-relative">
 						{{{ if ./iconClass }}}
@@ -12,9 +11,7 @@
 						<span component="navigation/count" class="visible-closed position-absolute top-0 start-100 translate-middle badge rounded-1 bg-primary {{{ if !./content }}}hidden{{{ end }}}">{./content}</span>
 						{{{ end }}}
 					</span>
-					{{{ if ./text }}}
-					<span class="nav-text small visible-open fw-semibold text-truncate">{./text}</span>
-					{{{ end }}}
+					{{{ if ./text }}}<span class="nav-text small visible-open fw-semibold text-truncate">{./text}</span>{{{ end }}}
 				</span>
 				<span component="navigation/count" class="visible-open badge rounded-1 bg-primary {{{ if !./content }}}hidden{{{ end }}}">{./content}</span>
 			</a>

package/templates/partials/tags/filter-dropdown-content.tpl

@@ -9,26 +9,30 @@
     <span class="visible-md-inline visible-lg-inline fw-semibold">[[tags:all-tags]]</span>
     {{{ end }}}
 </button>
+
 <div component="tag/filter/search" class="hidden position-absolute top-0">
     <input type="text" class="form-control form-control-sm" placeholder="[[search:type-to-search]]" autocomplete="off">
 </div>
-<ul component="tag/filter/list" class="dropdown-menu p-1 text-sm overflow-auto" role="menu" style="max-height: 500px;" role="menu">
-    <li role="presentation" data-tag="">
-        <a class="dropdown-item rounded-1 d-flex align-items-center gap-2" role="menuitem" href="#">
-            <span class="flex-grow-1">[[tags:all-tags]]</span>
-            <i component="tag/select/icon" class="flex-shrink-0 fa fa-fw fa-check {{{if selectedTag }}}invisible{{{ end }}}"></i>
-        </a>
-    </li>
-    {{{ each tagItems }}}
-    <li role="presentation" data-tag="{./valueEscaped}">
-        <a class="dropdown-item rounded-1 d-flex align-items-center gap-2" role="menuitem" href="#">
-            <span component="tag-markup" class="flex-grow-1">
-                <div class="d-inline-flex align-items-center gap-1">
-                    {./valueEscaped}
-                </div>
-            </span>
-            <i component="tag/select/icon" class="flex-shrink-0 fa fa-fw fa-check {{{ if !./selected }}}invisible{{{ end }}}"></i>
-        </a>
-    </li>
-    {{{ end }}}
-</ul>
+
+<div class="dropdown-menu p-1">
+    <ul component="tag/filter/list" class="list-unstyled mb-0 text-sm overflow-auto ghost-scrollbar" role="menu" style="max-height: 500px;" role="menu">
+        <li role="presentation" data-tag="">
+            <a class="dropdown-item rounded-1 d-flex align-items-center gap-2" role="menuitem" href="#">
+                <span class="flex-grow-1">[[tags:all-tags]]</span>
+                <i component="tag/select/icon" class="flex-shrink-0 fa fa-fw fa-check {{{if selectedTag }}}invisible{{{ end }}}"></i>
+            </a>
+        </li>
+        {{{ each tagItems }}}
+        <li role="presentation" data-tag="{./valueEscaped}">
+            <a class="dropdown-item rounded-1 d-flex align-items-center gap-2" role="menuitem" href="#">
+                <span component="tag-markup" class="flex-grow-1">
+                    <div class="d-inline-flex align-items-center gap-1">
+                        {./valueEscaped}
+                    </div>
+                </span>
+                <i component="tag/select/icon" class="flex-shrink-0 fa fa-fw fa-check {{{ if !./selected }}}invisible{{{ end }}}"></i>
+            </a>
+        </li>
+        {{{ end }}}
+    </ul>
+</div>

package/templates/partials/topic/event.tpl

@@ -5,7 +5,7 @@
 	<span class="timeline-text small d-flex align-items-center gap-1 flex-wrap">
 		{./text}
 	</span>
-	{{{ if privileges.isAdminOrMod }}}
+	{{{ if (privileges.isAdminOrMod && ./id) }}}
 	<span component="topic/event/delete" data-topic-event-id="{./id}" data-topic-event-type="{./type}" class="timeline-text pointer" title="[[topic:delete-event]]"><i class="fa fa-trash"></i></span>
 	{{{ end }}}
 </li>

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-ghost-sm ff-secondary d-inline-flex border-0" 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-ghost-sm ff-secondary d-inline-flex border-0" 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

@@ -1,23 +1,23 @@
 {{{ if posts.display_moderator_tools }}}
 <li>
 	<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" component="post/edit" role="menuitem" href="#">
-		<span class="menu-icon"><i class="fa fa-fw text-muted fa-pencil"></i></span> [[topic:edit]]
+		<span class="menu-icon"><i class="fa fa-fw text-secondary fa-pencil"></i></span> [[topic:edit]]
 	</a>
 </li>
 <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-muted fa-trash-o"></i></span> [[topic:delete]]
+		<span class="menu-icon"><i class="fa fa-fw text-secondary fa-trash-o"></i></span> [[topic:delete]]
 	</a>
 </li>
 <li {{{ if !posts.deleted }}}hidden{{{ end }}}>
 	<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" component="post/restore" role="menuitem" href="#" class="{{{ if !posts.deleted }}}hidden{{{ end }}}">
-		<span class="menu-icon"><i class="fa fa-fw text-muted fa-history"></i></span> [[topic:restore]]
+		<span class="menu-icon"><i class="fa fa-fw text-secondary fa-history"></i></span> [[topic:restore]]
 	</a>
 </li>
 {{{ 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 }}}">
-		<span class="menu-icon"><i class="fa fa-fw text-muted fa-eraser"></i></span> [[topic:purge]]
+		<span class="menu-icon"><i class="fa fa-fw text-secondary fa-eraser"></i></span> [[topic:purge]]
 	</a>
 </li>
 {{{ end }}}
@@ -25,7 +25,7 @@
 {{{ if posts.display_move_tools }}}
 <li>
 	<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" component="post/move" role="menuitem" href="#">
-		<span class="menu-icon"><i class="fa fa-fw text-muted fa-arrows"></i></span> [[topic:move]]
+		<span class="menu-icon"><i class="fa fa-fw text-secondary fa-arrows"></i></span> [[topic:move]]
 	</a>
 </li>
 {{{ end }}}
@@ -33,7 +33,7 @@
 {{{ if posts.display_change_owner_tools }}}
 <li>
 	<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" component="post/change-owner" role="menuitem" href="#">
-		<span class="menu-icon"><i class="fa fa-fw text-muted fa-user"></i></span> [[topic:change-owner]]
+		<span class="menu-icon"><i class="fa fa-fw text-secondary fa-user"></i></span> [[topic:change-owner]]
 	</a>
 </li>
 {{{ end }}}
@@ -41,13 +41,13 @@
 {{{ 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}">
-		<span class="menu-icon" ><i class="fa fa-fw text-muted fa-copy"></i></span> [[topic:copy-ip]] {posts.ip}
+		<span class="menu-icon" ><i class="fa fa-fw text-secondary fa-copy"></i></span> [[topic:copy-ip]] {posts.ip}
 	</a>
 </li>
 {{{ if posts.display_ip_ban }}}
 <li>
 	<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" component="post/ban-ip" role="menuitem" href="#" data-ip="{posts.ip}">
-		<span class="menu-icon"><i class="fa fa-fw text-muted fa-ban"></i></span> [[topic:ban-ip]] {posts.ip}
+		<span class="menu-icon"><i class="fa fa-fw text-secondary fa-ban"></i></span> [[topic:ban-ip]] {posts.ip}
 	</a>
 </li>
 {{{ end }}}
@@ -57,7 +57,7 @@
 {{{ each posts.tools }}}
 <li {{{ if ./disabled }}}class="disabled" {{{ end }}}>
 	<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" {{{ if ./action}}}component="{./action}"{{{ end }}} role="menuitem" href="{{{ if ./href }}}{./href}{{{ else }}}#{{{ end }}}">
-		<span class="menu-icon"><i class="fa fa-fw text-muted {./icon}"></i></span> {{./html}}
+		<span class="menu-icon"><i class="fa fa-fw text-secondary {./icon}"></i></span> {{./html}}
 	</a>
 </li>
 {{{ end }}}
@@ -66,7 +66,7 @@
 	{{{ if posts.display_history}}}
 	<li>
 		<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" component="post/view-history" role="menuitem" href="#">
-			<span class="menu-icon"><i class="fa fa-fw text-muted fa-history"></i></span> [[topic:view-history]]
+			<span class="menu-icon"><i class="fa fa-fw text-secondary fa-history"></i></span> [[topic:view-history]]
 		</a>
 	</li>
 	{{{ end }}}
@@ -75,8 +75,8 @@
 	<li>
 		<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" component="post/bookmark" role="menuitem" href="#" data-bookmarked="{posts.bookmarked}">
 			<span class="menu-icon">
-				<i component="post/bookmark/on" class="fa fa-fw text-muted fa-bookmark {{{ if !posts.bookmarked }}}hidden{{{ end }}}"></i>
-				<i component="post/bookmark/off" class="fa fa-fw text-muted fa-bookmark-o {{{ if posts.bookmarked }}}hidden{{{ end }}}"></i>
+				<i component="post/bookmark/on" class="fa fa-fw text-secondary fa-bookmark {{{ if !posts.bookmarked }}}hidden{{{ end }}}"></i>
+				<i component="post/bookmark/off" class="fa fa-fw text-secondary fa-bookmark-o {{{ if posts.bookmarked }}}hidden{{{ end }}}"></i>
 			</span>
 			<span class="bookmark-text">[[topic:bookmark]]</span>
 			<span component="post/bookmark-count" class="bookmarkCount badge bg-secondary" data-bookmarks="{posts.bookmarks}">{posts.bookmarks}</span>&nbsp;
@@ -86,17 +86,25 @@
 
 	<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-muted fa-link"></i> [[topic:copy-permalink]]
+			<i class="fa fa-fw text-secondary fa-link"></i> [[topic:copy-permalink]]
 		</a>
 	</li>
 
+	{{{ if posts.display_original_url }}}
+	<li>
+		<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" role="menuitem" 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>
+	{{{ end }}}
+
 	{{{ if postSharing.length }}}
 	{{{ if config.loggedIn }}}<li class="dropdown-divider"></li>{{{ end }}}
 	<li class="dropdown-header">[[topic:share-this-post]]</li>
 	{{{ end }}}
 	<li class="d-flex gap-2 px-3">
 		{{{ each postSharing }}}
-		<a class="dropdown-item rounded-1 d-flex align-items-center px-1 py-2 w-auto" role="menuitem" component="share/{./id}" href="#" title="{./name}"><i class="fa-fw text-muted {./class}"></i></a>
+		<a class="dropdown-item rounded-1 d-flex align-items-center px-1 py-2 w-auto" role="menuitem" component="share/{./id}" href="#" title="{./name}"><i class="fa-fw text-secondary {./class}"></i></a>
 		{{{ end }}}
 	</li>
 {{{ end }}}
@@ -105,15 +113,15 @@
 <li class="dropdown-divider"></li>
 
 <li {{{ if posts.flags.flagged }}}hidden{{{ end }}}>
-	<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-muted fa-flag"></i> [[topic:flag-post]]</a>
+	<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-muted">
-	<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-muted fa-flag"></i> [[topic:already-flagged]]</a>
+<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="#" 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) }}}
 <li>
-	<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" component="post/flagUser" role="menuitem" href="#"><i class="fa fa-fw text-muted fa-flag"></i> [[topic:flag-user]]</a>
+	<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" component="post/flagUser" role="menuitem" href="#"><i class="fa fa-fw text-secondary fa-flag"></i> [[topic:flag-user]]</a>
 </li>
 {{{ end }}}
 {{{ end }}}
@@ -121,11 +129,11 @@
 {{{ if posts.display_moderator_tools }}}
 {{{ if posts.flags.exists }}}
 <li>
-	<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" role="menuitem" href="{config.relative_path}/flags/{posts.flags.flagId}"><i class="fa fa-fw text-muted fa-exclamation-circle"></i> [[topic:view-flag-report]]</a>
+	<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" role="menuitem" href="{config.relative_path}/flags/{posts.flags.flagId}"><i class="fa fa-fw text-secondary fa-exclamation-circle"></i> [[topic:view-flag-report]]</a>
 </li>
 {{{ if (posts.flags.state == "open") }}}
 <li>
-	<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" component="post/flagResolve" data-flagId="{posts.flags.flagId}" role="menuitem" href="#"><i class="fa fa-fw text-muted fa-check"></i> [[topic:resolve-flag]]</a>
+	<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" component="post/flagResolve" data-flagId="{posts.flags.flagId}" role="menuitem" href="#"><i class="fa fa-fw text-secondary fa-check"></i> [[topic:resolve-flag]]</a>
 </li>
 {{{ end }}}
 {{{ end }}}

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-ghost-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,30 +5,26 @@
 	{{{ 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:user-avatar-for, {./user.username}]]">
 			{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="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">
+			<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")}
 					<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>
-			</span>
+			<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 }}}
@@ -41,31 +37,25 @@
 			{{{ 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>
+				<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>
-					{{{ if posts.user.custom_profile_info.length }}}
 					&#124;
 					{{{ each posts.user.custom_profile_info }}}
 					{posts.user.custom_profile_info.content}
 					{{{ end }}}
-					{{{ end }}}
 				</span>
 			</div>
+			{{{ end }}}
 			<div class="d-flex align-items-center gap-1 flex-grow-1 justify-content-end">
 				<span class="bookmarked opacity-0 text-primary"><i class="fa fa-bookmark-o"></i></span>
-				<a href="{generatePostUrl(@value)}" class="post-index text-muted d-none d-md-inline">#{increment(./index, "1")}</a>
+				<a href="{config.relative_path}/post/{encodeURIComponent(./pid)}" class="post-index text-muted d-none d-md-inline">#{increment(./index, "1")}</a>
 			</div>
 		</div>
 
@@ -82,8 +72,8 @@
 
 	<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 }}}">
+		<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 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}}}
@@ -96,8 +86,6 @@
 			<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>
-			<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>
@@ -106,21 +94,25 @@
 
 	<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>
+		<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>
+
+		{{{ if ./announces }}}
+		<a component="post/announce-count" href="#" class="btn-ghost-sm" 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-ghost-sm {{{ if posts.upvoted }}}upvoted{{{ end }}}" title="[[topic:upvote-post]]">
+			<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>
 
 			<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>
+			<a href="#" class="px-2 mx-1 btn-ghost-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-ghost-sm {{{ if posts.downvoted }}}downvoted{{{ end }}}" title="[[topic:downvote-post]]">
+			<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 }}}
@@ -130,7 +122,6 @@
 		<!-- 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/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

@@ -8,19 +8,19 @@
 		<li>
 			<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="#" class="oldest_to_newest" data-sort="oldest_to_newest" role="menuitem">
 				<span class="flex-grow-1">[[topic:oldest-to-newest]]</span>
-				<i class="flex-shrink-0 fa fa-fw"></i>
+				<i class="flex-shrink-0 fa fa-fw text-secondary"></i>
 			</a>
 		</li>
 		<li>
 			<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="#" class="newest_to_oldest" data-sort="newest_to_oldest" role="menuitem">
 				<span class="flex-grow-1">[[topic:newest-to-oldest]]</span>
-				<i class="flex-shrink-0 fa fa-fw"></i>
+				<i class="flex-shrink-0 fa fa-fw text-secondary"></i>
 			</a>
 		</li>
 		<li>
 			<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="#" class="most_votes" data-sort="most_votes" role="menuitem">
 				<span class="flex-grow-1">[[topic:most-votes]]</span>
-				<i class="flex-shrink-0 fa fa-fw"></i>
+				<i class="flex-shrink-0 fa fa-fw text-secondary"></i>
 			</a>
 		</li>
 	</ul>

package/templates/partials/topic/tools.tpl

@@ -4,10 +4,6 @@
 		<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 }}}