nodebb-theme-harmony 1.0.0-beta.11 → 1.0.0-beta.110

package/templates/partials/topic/navigator.tpl

@@ -1,20 +1,26 @@
-<div class="d-sm-flex flex-column flex-grow-1 align-items-center mb-2 mx-2 mt-auto" component="topic/navigator">
-	<a href="#" class="nav-link border-0 p-2" data-action="toTop"><i class="fa fa-fw fa-angles-up"></i></a>
-	<a href="#" class="nav-link border-0 p-2" data-action="scrollUp"><i class="fa fa-fw fa-angle-up"></i></a>
-	<div class="track d-inline-block flex-grow-1 position-relative">
-		<div class="unread d-inline-block position-absolute">
-			<div class="visible-open meta small position-absolute top-50 translate-middle-y text-nowrap fw-semibold">
-				<a href="{url}"></a>
-			</div>
-		</div>
-		<div class="handle d-inline-block position-absolute">
-			<div class="knob d-inline-block rounded-circle translate-middle"></div>
-			<div class="visible-open meta small position-absolute text-nowrap fw-semibold">
-				<p class="index text-body mb-0"></p>
-				<p class="timestamp text-secondary timeago mb-0"></p>
+<div class="pagination-block d-none d-lg-block flex-grow-1 mb-2">
+	<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 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>
+				<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>
+						<div>
+							<p class="small thumb-text d-none d-md-inline-block ff-secondary fw-semibold user-select-none mb-0"></p>
+							<p class="meta thumb-timestamp timeago text-xs text-muted ff-secondary fw-semibold mb-0 user-select-none"></p>
+						</div>
+					</div>
+
+					<div class="unread d-inline-block position-absolute bottom-0">
+						<div class="meta small position-absolute top-50 translate-middle-y text-nowrap fw-semibold ms-2">
+							<a class="text-decoration-none" href="{url}"></a>
+						</div>
+					</div>
+				</div>
+				<div class="pointer pagebottom btn-ghost-sm 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>
 			</div>
 		</div>
 	</div>
-	<a href="#" class="nav-link border-0 p-2" data-action="scrollDown"><i class="fa fa-fw fa-angle-down"></i></a>
-	<a href="#" class="nav-link border-0 p-2" data-action="toBottom"><i class="fa fa-fw fa-angles-down"></i></a>
-</div>
+</div>
+

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

@@ -1,3 +1 @@
-<!-- THIS FILE IS STILL PERSONA -->
-
 <small data-editor="{editor.userslug}" component="post/editor" class="hidden">[[global:last_edited_by, {editor.username}]] <span class="timeago" title="{editedISO}"></span></small>

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

@@ -1,134 +1,132 @@
-<!-- THIS FILE IS STILL PERSONA -->
-
-<!-- IF posts.display_moderator_tools -->
+{{{ if posts.display_moderator_tools }}}
 <li>
-	<a class="dropdown-item" component="post/edit" role="menuitem" tabindex="-1" href="#">
-		<span class="menu-icon"><i class="fa fa-fw fa-pencil"></i></span> [[topic:edit]]
+	<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" component="post/edit" role="menuitem" tabindex="-1" href="#">
+		<span class="menu-icon"><i class="fa fa-fw text-muted fa-pencil"></i></span> [[topic:edit]]
 	</a>
 </li>
-<li <!-- IF posts.deleted -->hidden<!-- ENDIF posts.deleted -->>
-	<a class="dropdown-item" component="post/delete" role="menuitem" tabindex="-1" href="#" class="<!-- IF posts.deleted -->hidden<!-- ENDIF posts.deleted -->">
-		<span class="menu-icon"><i class="fa fa-fw fa-trash-o"></i><span> [[topic:delete]]
+<li {{{ if posts.deleted }}}hidden{{{ end }}}>
+	<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" component="post/delete" role="menuitem" tabindex="-1" 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]]
 	</a>
 </li>
-<li <!-- IF !posts.deleted -->hidden<!-- ENDIF !posts.deleted -->>
-	<a class="dropdown-item" component="post/restore" role="menuitem" tabindex="-1" href="#" class="<!-- IF !posts.deleted -->hidden<!-- ENDIF !posts.deleted -->">
-		<span class="menu-icon"><i class="fa fa-fw fa-history"></i><span> [[topic:restore]]
+<li {{{ if !posts.deleted }}}hidden{{{ end }}}>
+	<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" component="post/restore" role="menuitem" tabindex="-1" href="#" class="{{{ if !posts.deleted }}}hidden{{{ end }}}">
+		<span class="menu-icon"><i class="fa fa-fw text-muted fa-history"></i></span> [[topic:restore]]
 	</a>
 </li>
-<!-- IF posts.display_purge_tools -->
-<li <!-- IF !posts.deleted -->hidden<!-- ENDIF !posts.deleted -->>
-	<a class="dropdown-item" component="post/purge" role="menuitem" tabindex="-1" href="#" class="<!-- IF !posts.deleted -->hidden<!-- ENDIF !posts.deleted -->">
-		<span class="menu-icon"><i class="fa fa-fw fa-eraser"></i></span> [[topic:purge]]
+{{{ 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" tabindex="-1" href="#" class="{{{ if !posts.deleted }}}hidden{{{ end }}}">
+		<span class="menu-icon"><i class="fa fa-fw text-muted fa-eraser"></i></span> [[topic:purge]]
 	</a>
 </li>
-<!-- END -->
+{{{ end }}}
 
-<!-- IF posts.display_move_tools -->
+{{{ if posts.display_move_tools }}}
 <li>
-	<a class="dropdown-item" component="post/move" role="menuitem" tabindex="-1" href="#">
-		<span class="menu-icon"><i class="fa fa-fw fa-arrows"></i></span> [[topic:move]]
+	<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" component="post/move" role="menuitem" tabindex="-1" href="#">
+		<span class="menu-icon"><i class="fa fa-fw text-muted fa-arrows"></i></span> [[topic:move]]
 	</a>
 </li>
-<!-- ENDIF posts.display_move_tools -->
+{{{ end }}}
 
-<!-- IF posts.display_change_owner_tools -->
+{{{ if posts.display_change_owner_tools }}}
 <li>
-	<a class="dropdown-item" component="post/change-owner" role="menuitem" tabindex="-1" href="#">
-		<span class="menu-icon"><i class="fa fa-fw fa-user"></i></span> [[topic:change-owner]]
+	<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" component="post/change-owner" role="menuitem" tabindex="-1" href="#">
+		<span class="menu-icon"><i class="fa fa-fw text-muted fa-user"></i></span> [[topic:change-owner]]
 	</a>
 </li>
-<!-- ENDIF posts.display_change_owner_tools -->
+{{{ end }}}
 
-<!-- IF posts.ip -->
+{{{ if posts.ip }}}
 <li>
-	<a class="dropdown-item" component="post/copy-ip" role="menuitem" tabindex="-1" href="#" data-clipboard-text="{posts.ip}">
-		<span class="menu-icon" ><i class="fa fa-fw fa-copy"></i></span> [[topic:copy-ip]] {posts.ip}
+	<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" component="post/copy-ip" role="menuitem" tabindex="-1" 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}
 	</a>
 </li>
-<!-- IF posts.display_ip_ban -->
+{{{ if posts.display_ip_ban }}}
 <li>
-	<a class="dropdown-item" component="post/ban-ip" role="menuitem" tabindex="-1" href="#" data-ip="{posts.ip}">
-		<span class="menu-icon"><i class="fa fa-fw fa-ban"></i></span> [[topic:ban-ip]] {posts.ip}
+	<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" component="post/ban-ip" role="menuitem" tabindex="-1" 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}
 	</a>
 </li>
-<!-- ENDIF posts.display_ip_ban -->
-<!-- ENDIF posts.ip -->
-<!-- ENDIF posts.display_moderator_tools -->
+{{{ end }}}
+{{{ end }}}
+{{{ end }}}
 
-{{{each posts.tools}}}
+{{{ each posts.tools }}}
 <li {{{ if ./disabled }}}class="disabled" {{{ end }}}>
-	<a class="dropdown-item" {{{ if ./action}}}component="{./action}"{{{ end }}} role="menuitem" tabindex="-1" href="{{{ if ./href }}}{./href}{{{ else }}}#{{{ end }}}">
-		<span class="menu-icon"><i class="fa fa-fw {posts.tools.icon}"></i></span> {{posts.tools.html}}
+	<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" {{{ if ./action}}}component="{./action}"{{{ end }}} role="menuitem" tabindex="-1" href="{{{ if ./href }}}{./href}{{{ else }}}#{{{ end }}}">
+		<span class="menu-icon"><i class="fa fa-fw text-muted {./icon}"></i></span> {{./html}}
 	</a>
 </li>
-{{{end}}}
+{{{ end }}}
 
-<!-- IF !posts.deleted -->
-	<!-- IF posts.display_history -->
+{{{ if !posts.deleted }}}
+	{{{ if (posts.display_history && privileges.posts:history)}}}
 	<li>
-		<a class="dropdown-item" component="post/view-history" role="menuitem" tabindex="-1" href="#">
-			<span class="menu-icon"><i class="fa fa-fw fa-history"></i></span> [[topic:view-history]]
+		<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" component="post/view-history" role="menuitem" tabindex="-1" href="#">
+			<span class="menu-icon"><i class="fa fa-fw text-muted fa-history"></i></span> [[topic:view-history]]
 		</a>
 	</li>
-	<!-- END -->
+	{{{ end }}}
 
 	{{{ if config.loggedIn }}}
 	<li>
-		<a class="dropdown-item" component="post/bookmark" role="menuitem" tabindex="-1" href="#" data-bookmarked="{posts.bookmarked}">
+		<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" component="post/bookmark" role="menuitem" tabindex="-1" href="#" data-bookmarked="{posts.bookmarked}">
 			<span class="menu-icon">
-				<i component="post/bookmark/on" class="fa fa-fw fa-heart <!-- IF !posts.bookmarked -->hidden<!-- ENDIF !posts.bookmarked -->"></i>
-				<i component="post/bookmark/off" class="fa fa-fw fa-heart-o <!-- IF posts.bookmarked -->hidden<!-- ENDIF posts.bookmarked -->"></i>
+				<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>
 			</span>
 			<span class="bookmark-text">[[topic:bookmark]]</span>
-			<span component="post/bookmark-count" class="bookmarkCount badge" data-bookmarks="{posts.bookmarks}">{posts.bookmarks}</span>&nbsp;
+			<span component="post/bookmark-count" class="bookmarkCount badge bg-secondary" data-bookmarks="{posts.bookmarks}">{posts.bookmarks}</span>&nbsp;
 		</a>
 	</li>
 	{{{ end }}}
 
 	<li>
-		<a class="dropdown-item" role="menuitem" tabindex="-1" href="#" data-clipboard-text="{posts.absolute_url}">
-			<i class="fa fa-fw fa-link"></i> [[topic:copy-permalink]]
+		<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" role="menuitem" tabindex="-1" href="#" data-clipboard-text="{posts.absolute_url}">
+			<i class="fa fa-fw text-muted fa-link"></i> [[topic:copy-permalink]]
 		</a>
 	</li>
 
-	<!-- IF postSharing.length -->
-	<!-- IF config.loggedIn --><li class="dropdown-divider"></li><!-- ENDIF config.loggedIn -->
+	{{{ if postSharing.length }}}
+	{{{ if config.loggedIn }}}<li class="dropdown-divider"></li>{{{ end }}}
 	<li class="dropdown-header">[[topic:share_this_post]]</li>
-	<!-- ENDIF postSharing.length -->
-	{{{each postSharing}}}
+	{{{ end }}}
+	{{{ each postSharing }}}
 		<li>
-			<a class="dropdown-item" role="menuitem" component="share/{postSharing.id}" tabindex="-1" href="#"><span class="menu-icon"><i class="fa fa-fw {postSharing.class}"></i></span> {postSharing.name}</a>
+			<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" role="menuitem" component="share/{./id}" tabindex="-1" href="#"><span class="menu-icon"><i class="fa fa-fw text-muted {./class}"></i></span> {./name}</a>
 		</li>
-	{{{end}}}
-<!-- ENDIF !posts.deleted -->
+	{{{ end }}}
+{{{ end }}}
 
 {{{ if posts.display_flag_tools }}}
 <li class="dropdown-divider"></li>
 
 <li {{{ if posts.flags.flagged }}}hidden{{{ end }}}>
-	<a class="dropdown-item" component="post/flag" role="menuitem" tabindex="-1" href="#"><i class="fa fa-fw 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" tabindex="-1" href="#"><i class="fa fa-fw text-muted fa-flag"></i> [[topic:flag-post]]</a>
 </li>
 <li {{{ if !posts.flags.flagged }}}hidden{{{ end }}} class="disabled text-muted">
-	<a class="dropdown-item" component="post/already-flagged" role="menuitem" tabindex="-1" href="#"><i class="fa fa-fw 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" tabindex="-1" href="#"><i class="fa fa-fw text-muted fa-flag"></i> [[topic:already-flagged]]</a>
 </li>
 
 {{{ if (!posts.selfPost && posts.uid) }}}
 <li>
-	<a class="dropdown-item" component="post/flagUser" role="menuitem" tabindex="-1" href="#"><i class="fa fa-fw 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" tabindex="-1" href="#"><i class="fa fa-fw text-muted fa-flag"></i> [[topic:flag-user]]</a>
 </li>
 {{{ end }}}
 {{{ end }}}
 
-<!-- IF posts.display_moderator_tools -->
+{{{ if posts.display_moderator_tools }}}
 {{{ if posts.flags.exists }}}
 <li>
-	<a class="dropdown-item" role="menuitem" tabindex="-1" href="{config.relative_path}/flags/{posts.flags.flagId}"><i class="fa fa-fw fa-exclamation-circle"></i> [[topic:view-flag-report]]</a>
+	<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" role="menuitem" tabindex="-1" href="{config.relative_path}/flags/{posts.flags.flagId}"><i class="fa fa-fw text-muted fa-exclamation-circle"></i> [[topic:view-flag-report]]</a>
 </li>
 {{{ if (posts.flags.state == "open") }}}
 <li>
-	<a class="dropdown-item" component="post/flagResolve" data-flagId="{posts.flags.flagId}" role="menuitem" tabindex="-1" href="#"><i class="fa fa-fw 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" tabindex="-1" href="#"><i class="fa fa-fw text-muted fa-check"></i> [[topic:resolve-flag]]</a>
 </li>
 {{{ end }}}
 {{{ end }}}
-<!-- ENDIF posts.display_moderator_tools -->
+{{{ end }}}

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

@@ -1,25 +1,30 @@
 <span component="post/tools" class="dropdown moderator-tools bottom-sheet d-inline-block {{{ if !./display_post_menu }}}hidden{{{ end }}}">
 	<a class="btn-ghost-sm dropdown-toggle d-block" href="#" data-bs-toggle="dropdown"><i class="fa fa-fw fa-ellipsis-v text-primary"></i></a>
-	<ul class="dropdown-menu dropdown-menu-end" role="menu">
+	<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;">&nbsp;</div>
-			<div class="placeholder col-3">&nbsp;</div>
+			<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;">&nbsp;</div>
-			<div class="placeholder col-5">&nbsp;</div>
+			<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;">&nbsp;</div>
-			<div class="placeholder col-11">&nbsp;</div>
+			<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;">&nbsp;</div>
-			<div class="placeholder col-7">&nbsp;</div>
+			<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;">&nbsp;</div>
-			<div class="placeholder col-12">&nbsp;</div>
+			<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>

package/templates/partials/topic/post.tpl

@@ -1,22 +1,30 @@
+{{{ if (!./index && widgets.mainpost-header.length) }}}
+<div data-widget-area="mainpost-header">
+	{{{ each widgets.mainpost-header }}}
+	{widgets.mainpost-header.html}
+	{{{ end }}}
+</div>
+{{{ end }}}
+
 <div class="d-flex align-items-start gap-3">
 	<div class="icon py-1 bg-body d-none d-sm-block">
 		<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, "48px", true, "", "user/picture")}
-			<span component="user/status" class="position-absolute translate-middle-y badge border border-white border-2 rounded-circle status {posts.user.status}"><span class="visually-hidden">[[global:{posts.user.status}]]</span></span>
+			<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="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">
+	<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">
 			<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 badge border border-white border-2 rounded-circle status {posts.user.status}"><span class="visually-hidden">[[global:{posts.user.status}]]</span></span>
+					<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 }}}" itemprop="author" data-username="{posts.user.username}" data-uid="{posts.user.uid}">{posts.user.displayname}</a>
+				<a class="fw-bold" href="{{{ if ./user.userslug }}}{config.relative_path}/user/{./user.userslug}{{{ else }}}#{{{ end }}}" itemprop="name" data-username="{posts.user.username}" data-uid="{posts.user.uid}">{posts.user.displayname}</a>
 			</span>
 
 			{{{ each posts.user.selectedGroups }}}
@@ -25,19 +33,18 @@
 			{{{ end }}}
 			{{{ end }}}
 
-			<!-- IF posts.user.banned -->
+			{{{ if posts.user.banned }}}
 			<span class="badge bg-danger rounded-1">[[user:banned]]</span>
-			<!-- ENDIF posts.user.banned -->
-
-			<div class="d-flex gap-1 hidden-xs align-items-center">
-				{{{ if posts.toPid }}}
-				<span class="text-muted">replied to</span><!-- FIX THIS, DOES NOT l10n PROPERLY -->
-				<a component="post/parent" data-topid="{posts.toPid}" href="{config.relative_path}/post/{posts.toPid}"><!-- IF posts.parent.username -->{posts.parent.username}<!-- ELSE -->[[global:guest]]<!-- ENDIF posts.parent.username --></a>
-				{{{ else }}}
-				<span class="text-muted">wrote</span><!-- FIX THIS, DOES NOT l10n PROPERLY -->
-				{{{ end }}}
+			{{{ end }}}
 
-				<a class="permalink text-muted" href="{config.relative_path}/post/{posts.pid}"><span class="timeago" title="{posts.timestampISO}"></span></a>
+			<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, {./editedISO}]]"></i>
 				<span data-editor="{posts.editor.userslug}" component="post/editor" class="visually-hidden">[[global:last_edited_by, {posts.editor.username}]] <span class="timeago" title="{posts.editedISO}"></span></span>
@@ -45,16 +52,17 @@
 
 			<div>
 				<span>
-					<!-- IF posts.user.custom_profile_info.length -->
+					{{{ if posts.user.custom_profile_info.length }}}
 					&#124;
-					{{{each posts.user.custom_profile_info}}}
+					{{{ each posts.user.custom_profile_info }}}
 					{posts.user.custom_profile_info.content}
-					{{{end}}}
-					<!-- ENDIF posts.user.custom_profile_info.length -->
+					{{{ end }}}
+					{{{ end }}}
 				</span>
 			</div>
 			<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="{config.relative_path}/post/{./pid}" class="post-index text-muted d-none d-md-inline">#{increment(./index, "1")}</a>
 			</div>
 		</div>
 
@@ -74,7 +82,7 @@
 		<a component="post/reply-count" data-target-component="post/replies/container" href="#" class="d-flex gap-2 align-items-center mt-2 btn-outline border rounded-1 p-1 threaded-replies user-select-none float-start text-muted text-decoration-none {{{ if !posts.replies.count }}}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, "")}</span>
+				<span>{buildAvatar(posts.replies.users, "20px", true, "avatar-tooltip")}</span>
 				{{{end}}}
 				{{{ if posts.replies.hasMore}}}
 				<span><i class="fa fa-ellipsis"></i></span>
@@ -95,20 +103,22 @@
 
 	<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-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-quote-right text-primary"></i></a>
+		<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 !reputation:disabled }}}
 		<div class="d-flex votes align-items-stretch">
 			<a component="post/upvote" href="#" class="btn-ghost-sm {{{ if posts.upvoted }}}upvoted{{{ end }}}">
-				<i class="fa fa-chevron-up text-primary"></i>
+				<i class="fa fa-fw fa-chevron-up text-primary"></i>
 			</a>
 
-			<div class="d-inline-block px-3 btn-ghost-sm" component="post/vote-count" data-votes="{posts.votes}">{posts.votes}</div>
+			<meta itemprop="upvoteCount" content="{posts.upvotes}">
+			<meta itemprop="downvoteCount" content="{posts.downvotes}">
+			<div class="d-inline-block px-2 mx-1 btn-ghost-sm" component="post/vote-count" data-votes="{posts.votes}">{posts.votes}</div>
 
 			{{{ if !downvote:disabled }}}
 			<a component="post/downvote" href="#" class="btn-ghost-sm {{{ if posts.downvoted }}}downvoted{{{ end }}}">
-				<i class="fa fa-chevron-down text-primary"></i>
+				<i class="fa fa-fw fa-chevron-down text-primary"></i>
 			</a>
 			{{{ end }}}
 		</div>
@@ -116,4 +126,12 @@
 
 		<!-- IMPORT partials/topic/post-menu.tpl -->
 	</div>
-</div>
+</div>
+
+{{{ if (!./index && widgets.mainpost-footer.length) }}}
+<div data-widget-area="mainpost-footer">
+	{{{ each widgets.mainpost-footer }}}
+	{widgets.mainpost-footer.html}
+	{{{ end }}}
+</div>
+{{{ end }}}

package/templates/partials/topic/quickreply.tpl

@@ -1,9 +1,9 @@
-<!-- IF privileges.topics:reply -->
-<div component="topic/quickreply/container" class="quick-reply d-flex gap-3">
+{{{ if privileges.topics:reply }}}
+<div component="topic/quickreply/container" class="quick-reply d-flex gap-3 mb-4">
 	<div class="icon hidden-xs">
-		<a class="d-inline-block position-relative" href="<!-- IF loggedInUser.userslug -->{config.relative_path}/user/{loggedInUser.userslug}<!-- ELSE -->#<!-- ENDIF loggedInUser.userslug -->">
+		<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 badge 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 translate-middle-y 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">
@@ -25,4 +25,4 @@
 	</form>
 
 </div>
-<!-- ENDIF privileges.topics:reply -->
+{{{ end }}}

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

@@ -1,10 +1,10 @@
-<div component="topic/reply/container" class="btn-group action-bar bottom-sheet {{{ if !privileges.topics:reply }}}hidden{{{ end }}}">
+<div component="topic/reply/container" class="btn-group action-bar {{{ if !privileges.topics:reply }}}hidden{{{ end }}}">
 	<a href="{config.relative_path}/compose?tid={tid}&title={title}" 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">
 		<span class="caret"></span>
 	</button>
-	<ul class="dropdown-menu dropdown-menu-end" role="menu">
-		<li><a class="dropdown-item" href="#" component="topic/reply-as-topic">[[topic:reply-as-topic]]</a></li>
+	<ul class="dropdown-menu dropdown-menu-end p-1 text-sm" role="menu">
+		<li><a class="dropdown-item rounded-1" href="#" component="topic/reply-as-topic">[[topic:reply-as-topic]]</a></li>
 	</ul>
 </div>
 

package/templates/partials/topic/sort.tpl

@@ -1,13 +1,25 @@
 <div class="btn-group bottom-sheet" component="thread/sort">
-	<button class="btn-ghost-sm d-flex gap-2 align-items-baseline dropdown-toggle" data-bs-toggle="dropdown" type="button">
+	<button class="btn-ghost-sm d-flex gap-2 dropdown-toggle" data-bs-toggle="dropdown" type="button">
 		<span class="d-flex gap-2 align-items-center">
 			<i class="fa fa-fw fa-arrow-down-wide-short text-primary"></i>
 			<span class="d-none d-md-inline fw-semibold">[[topic:sort_by]]</span>
 		</span>
 	</button>
-	<ul class="dropdown-menu">
-		<li><a class="dropdown-item" href="#" class="oldest_to_newest" data-sort="oldest_to_newest"><i class="fa fa-fw"></i> [[topic:oldest_to_newest]]</a></li>
-		<li><a class="dropdown-item" href="#" class="newest_to_oldest" data-sort="newest_to_oldest"><i class="fa fa-fw"></i> [[topic:newest_to_oldest]]</a></li>
-		<li><a class="dropdown-item" href="#" class="most_votes" data-sort="most_votes"><i class="fa fa-fw"></i> [[topic:most_votes]]</a></li>
+	<ul class="dropdown-menu p-1 text-sm">
+		<li><a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="#" class="oldest_to_newest" data-sort="oldest_to_newest">
+			<span class="flex-grow-1">[[topic:oldest_to_newest]]</span>
+			<i class="flex-shrink-0 fa fa-fw"></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">
+			<span class="flex-grow-1">[[topic:newest_to_oldest]]</span>
+			<i class="flex-shrink-0 fa fa-fw"></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">
+			<span class="flex-grow-1">[[topic:most_votes]]</span>
+			<i class="flex-shrink-0 fa fa-fw"></i> 
+		</a>
+		</li>
 	</ul>
 </div>

package/templates/partials/topic/tools.tpl

@@ -1,10 +1,10 @@
 {{{ if privileges.view_thread_tools }}}
 <div class="btn-group thread-tools bottom-sheet">
-	<button class="btn-ghost-sm d-flex gap-2 align-items-baseline dropdown-toggle" data-bs-toggle="dropdown" type="button">
+	<button class="btn-ghost-sm d-flex gap-2 dropdown-toggle" data-bs-toggle="dropdown" type="button">
 		<i class="fa fa-fw fa-gear link-primary"></i>
 		<span class="d-none d-md-inline fw-semibold">[[topic:thread_tools.title]]</span>
 	</button>
-	<ul class="dropdown-menu">
+	<ul class="dropdown-menu p-1 text-sm">
 		<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>

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

@@ -1,34 +1,32 @@
-<!-- THIS FILE IS STILL PERSONA -->
-
 {{{ if privileges.editable }}}
-<li <!-- IF locked -->hidden<!-- ENDIF locked -->><a component="topic/lock" href="#" class="dropdown-item <!-- IF locked -->hidden<!-- ENDIF locked -->"><i class="fa fa-fw fa-lock"></i> [[topic:thread_tools.lock]]</a></li>
-<li <!-- IF !locked -->hidden<!-- ENDIF !locked -->><a component="topic/unlock" href="#" class="dropdown-item <!-- IF !locked -->hidden<!-- ENDIF !locked -->"><i class="fa fa-fw fa-unlock"></i> [[topic:thread_tools.unlock]]</a></li>
-<li <!-- IF pinned -->hidden<!-- ENDIF pinned -->><a component="topic/pin" href="#" class="dropdown-item <!-- IF pinned -->hidden<!-- ENDIF pinned -->"><i class="fa fa-fw fa-thumb-tack"></i> [[topic:thread_tools.pin]]</a></li>
-<li <!-- IF !pinned -->hidden<!-- ENDIF !pinned -->><a component="topic/unpin" href="#" class="dropdown-item <!-- IF !pinned -->hidden<!-- ENDIF !pinned -->"><i class="fa fa-fw fa-thumb-tack fa-rotate-90"></i> [[topic:thread_tools.unpin]]</a></li>
+<li {{{ if locked }}}hidden{{{ end }}}><a component="topic/lock" href="#" class="dropdown-item rounded-1 d-flex align-items-center gap-2 {{{ if locked }}}hidden{{{ end }}}"><i class="fa fa-fw text-muted fa-lock"></i> [[topic:thread_tools.lock]]</a></li>
+<li {{{ if !locked }}}hidden{{{ end }}}><a component="topic/unlock" href="#" class="dropdown-item rounded-1 d-flex align-items-center gap-2 {{{ if !locked }}}hidden{{{ end }}}"><i class="fa fa-fw text-muted fa-unlock"></i> [[topic:thread_tools.unlock]]</a></li>
+<li {{{ if pinned }}}hidden{{{ end }}}><a component="topic/pin" href="#" class="dropdown-item rounded-1 d-flex align-items-center gap-2 {{{ if pinned }}}hidden{{{ end }}}"><i class="fa fa-fw text-muted fa-thumb-tack"></i> [[topic:thread_tools.pin]]</a></li>
+<li {{{ if !pinned }}}hidden{{{ end }}}><a component="topic/unpin" href="#" class="dropdown-item rounded-1 d-flex align-items-center gap-2 {{{ if !pinned }}}hidden{{{ end }}}"><i class="fa fa-fw text-muted fa-thumb-tack fa-rotate-90"></i> [[topic:thread_tools.unpin]]</a></li>
 
-<li><a component="topic/move" class="dropdown-item" href="#"><i class="fa fa-fw fa-arrows"></i> [[topic:thread_tools.move]]</a></li>
-<li><a component="topic/merge" class="dropdown-item" href="#"><i class="fa fa-fw fa-code-fork"></i> [[topic:thread_tools.merge]]</a></li>
-<li><a component="topic/fork" class="dropdown-item" href="#"><i class="fa fa-fw fa-code-fork"></i> [[topic:thread_tools.fork]]</a></li>
+<li><a component="topic/move" class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="#"><i class="fa fa-fw text-muted fa-arrows"></i> [[topic:thread_tools.move]]</a></li>
+<li><a component="topic/merge" class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="#"><i class="fa fa-fw text-muted fa-code-fork"></i> [[topic:thread_tools.merge]]</a></li>
+<li><a component="topic/fork" class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="#"><i class="fa fa-fw text-muted fa-code-fork"></i> [[topic:thread_tools.fork]]</a></li>
 {{{ if !scheduled }}}
-<li><a component="topic/move-posts" class="dropdown-item" href="#"><i class="fa fa-fw fa-arrows"></i> [[topic:thread_tools.move-posts]]</a></li>
+<li><a component="topic/move-posts" class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="#"><i class="fa fa-fw text-muted fa-arrows"></i> [[topic:thread_tools.move-posts]]</a></li>
 {{{ end }}}
-<li><a component="topic/mark-unread-for-all" class="dropdown-item" href="#"><i class="fa fa-fw fa-inbox"></i> [[topic:thread_tools.markAsUnreadForAll]]</a></li>
+<li><a component="topic/mark-unread-for-all" class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="#"><i class="fa fa-fw text-muted fa-inbox"></i> [[topic:thread_tools.markAsUnreadForAll]]</a></li>
 <li class="dropdown-divider"></li>
 {{{ end }}}
 
-<!-- IF privileges.deletable -->
-<li <!-- IF deleted -->hidden<!-- ENDIF deleted -->><a component="topic/delete" href="#" class="dropdown-item <!-- IF deleted -->hidden<!-- ENDIF deleted -->"><i class="fa fa-fw fa-trash-o"></i> [[topic:thread_tools.delete]]</a></li>
+{{{ if privileges.deletable }}}
+<li {{{ if deleted }}}hidden{{{ end }}}><a component="topic/delete" href="#" class="dropdown-item rounded-1 d-flex align-items-center gap-2 {{{ if deleted }}}hidden{{{ end }}}"><i class="fa fa-fw text-muted fa-trash-o"></i> [[topic:thread_tools.delete]]</a></li>
 {{{ if !scheduled }}}
-<li <!-- IF !deleted -->hidden<!-- ENDIF !deleted -->><a component="topic/restore" href="#" class="dropdown-item <!-- IF !deleted -->hidden<!-- ENDIF !deleted -->"><i class="fa fa-fw fa-history"></i> [[topic:thread_tools.restore]]</a></li>
+<li {{{ if !deleted }}}hidden{{{ end }}}><a component="topic/restore" href="#" class="dropdown-item rounded-1 d-flex align-items-center gap-2 {{{ if !deleted }}}hidden{{{ end }}}"><i class="fa fa-fw text-muted fa-history"></i> [[topic:thread_tools.restore]]</a></li>
+{{{ end }}}
+{{{ if privileges.purge }}}
+<li {{{ if !deleted }}}hidden{{{ end }}}><a component="topic/purge" href="#" class="dropdown-item rounded-1 d-flex align-items-center gap-2 {{{ if !deleted }}}hidden{{{ end }}}"><i class="fa fa-fw text-muted fa-eraser"></i> [[topic:thread_tools.purge]]</a></li>
+{{{ end }}}
+{{{ if privileges.isAdminOrMod }}}
+<li><a component="topic/delete/posts" class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="#"><i class="fa fa-fw text-muted fa-trash-o"></i> [[topic:thread_tools.delete-posts]]</a></li>
 {{{ end }}}
-<!-- IF privileges.purge -->
-<li <!-- IF !deleted -->hidden<!-- ENDIF !deleted -->><a component="topic/purge" href="#" class="dropdown-item <!-- IF !deleted -->hidden<!-- ENDIF !deleted -->"><i class="fa fa-fw fa-eraser"></i> [[topic:thread_tools.purge]]</a></li>
-<!-- END -->
-<!-- IF privileges.isAdminOrMod -->
-<li><a component="topic/delete/posts" class="dropdown-item" href="#"><i class="fa fa-fw fa-trash-o"></i> [[topic:thread_tools.delete-posts]]</a></li>
-<!-- ENDIF privileges.isAdminOrMod -->
 
-{{{each thread_tools}}}
-<li><a href="#" class="dropdown-item {thread_tools.class}"><i class="fa fa-fw {thread_tools.icon}"></i> {thread_tools.title}</a></li>
-{{{end}}}
-<!-- ENDIF privileges.deletable -->
+{{{ each thread_tools }}}
+<li><a href="#" class="dropdown-item rounded-1 d-flex align-items-center gap-2 {./class}"><i class="fa fa-fw text-muted {./icon}"></i> {./title}</a></li>
+{{{ end }}}
+{{{ end }}}