nodebb-theme-harmony 1.0.0-beta.4 → 1.0.0-beta.40

package/templates/partials/sidebar/logged-in-menu.tpl

@@ -1,23 +1,23 @@
-<li id="user_label" class="nav-item mx-2 dropstart usermenu" title="[[global:header.profile]]">
+<li id="user_label" class="nav-item mx-2 dropstart usermenu" title="{user.username}">
 	<!-- IMPORT partials/sidebar/user-menu.tpl -->
 </li>
 
 {{{ if config.searchEnabled }}}
-<li component="sidebar/search" class="nav-item mx-2 search dropstart position-relative">
+<li component="sidebar/search" class="nav-item mx-2 search dropstart position-relative" title="[[global:header.search]]">
 <!-- IMPORT partials/sidebar/search.tpl -->
 </li>
 {{{ end }}}
 
-<li component="notifications" class="nav-item mx-2 notifications dropstart">
+<li component="notifications" class="nav-item mx-2 notifications dropstart" title="[[global:header.notifications]]">
 <!-- IMPORT partials/sidebar/notifications.tpl -->
 </li>
 
 {{{ if canChat }}}
-<li class="nav-item mx-2 chats dropstart">
+<li class="nav-item mx-2 chats dropstart" title="[[global:header.chats]]">
 <!-- IMPORT partials/sidebar/chats.tpl -->
 </li>
 {{{ end }}}
 
-<li component="sidebar/drafts" class="nav-item mx-2 drafts dropstart">
+<li component="sidebar/drafts" class="nav-item mx-2 drafts dropstart" title="[[global:header.drafts]]">
 <!-- IMPORT partials/sidebar/drafts.tpl -->
 </li>

package/templates/partials/sidebar/notifications.tpl

@@ -1,16 +1,16 @@
-<a data-bs-toggle="dropdown" href="#" role="button" class="nav-link nav-btn d-flex gap-2 justify-content-between align-items-center position-relative" title="[[global:header.notifications]]">
+<a data-bs-toggle="dropdown" href="#" role="button" class="nav-link nav-btn d-flex gap-2 justify-content-between align-items-center position-relative">
 	<span class="d-flex gap-2 align-items-center text-nowrap truncate-open">
 		<span class="position-relative">
 			<i component="notifications/icon" class="fa fa-fw {{{ if unreadCount.notification}}}fa-bell{{{ else }}}fa-bell-o{{{ end }}} unread-count" data-content="{unreadCount.notification}"></i>
 			<span component="notifications/count" class="visible-closed position-absolute top-0 start-100 translate-middle badge rounded-1 bg-primary {{{ if !unreadCount.notification }}}hidden{{{ end }}}">{unreadCount.notification}</span>
 		</span>
-		<span class="nav-text small visible-open fw-semibold">[[global:header.notifications]]</span>
+		<span class="nav-text small visible-open fw-semibold truncate-text">[[global:header.notifications]]</span>
 	</span>
 	<span component="notifications/count" class="visible-open badge rounded-1 bg-primary {{{ if !unreadCount.notification }}}hidden{{{ end }}}">{unreadCount.notification}</span>
 </a>
 <ul class="notifications-dropdown dropdown-menu p-1 shadow">
 	<li>
-		<ul component="notifications/list" class="notification-list list-unstyled">
+		<ul component="notifications/list" class="notification-list list-unstyled overscroll-behavior-contain">
 			<li class="mb-2 placeholder-wave">
 				<div class="text-sm placeholder col-11">&nbsp;</div>
 				<div class="text-sm placeholder col-5">&nbsp;</div><br />

package/templates/partials/sidebar/search.tpl

@@ -1,4 +1,4 @@
-<a component="search/button" id="search-button" href="#" role="button" class="nav-link nav-btn d-flex gap-2 align-items-center text-truncate" data-bs-toggle="dropdown" title="[[global:header.search]]">
+<a component="search/button" id="search-button" href="#" role="button" class="nav-link nav-btn d-flex gap-2 align-items-center text-truncate" data-bs-toggle="dropdown">
 	<span>
 		<i class="fa fa-search fa-fw"></i>
 	</span>

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

@@ -2,7 +2,7 @@
 	{buildAvatar(user, "20px", true)}
 	<span id="user-header-name" class="nav-text small visible-open fw-semibold">{user.username}</span>
 </label>
-<ul id="user-control-list" component="header/usercontrol" class="user-dropdown dropdown-menu shadow p-1 text-sm" aria-labelledby="user_dropdown">
+<ul id="user-control-list" component="header/usercontrol" class="overscroll-behavior-contain user-dropdown dropdown-menu shadow p-1 text-sm" aria-labelledby="user_dropdown">
 	<li>
 		<a class="dropdown-item rounded-1 d-flex align-items-center gap-1" component="header/profilelink" href="{relative_path}/user/{user.userslug}">
 			<div class="text-center"><span component="user/status" class="badge border border-white border-2 rounded-circle status {user.status}"><span class="visually-hidden">[[global:{user.status}]]</span></span></div>

package/templates/partials/sidebar-left.tpl

@@ -1,9 +1,9 @@
-<nav class="{{{ if config.openSidebars}}}open{{{ end }}} text-dark bg-light sidebar sidebar-left start-0 border-end vh-100 d-none d-md-flex flex-column justify-content-between sticky-top ff-secondary">
+<nav class="{{{ if config.theme.openSidebars}}}open{{{ end }}} text-dark bg-light sidebar sidebar-left start-0 border-end vh-100 d-none d-md-flex flex-column justify-content-between sticky-top ff-secondary">
 	<ul id="main-nav" class="list-unstyled d-flex flex-column w-100 gap-2 mt-2">
 		{{{ each navigation }}}
-		<!-- IF function.displayMenuItem, @index -->
+		{{{ if displayMenuItem(@root, @index) }}}
 		<li class="nav-item mx-2 {./class}{{{ if ./dropdown }}} dropend{{{ end }}}" title="{./title}">
-			<a class="nav-link nav-btn navigation-link d-flex gap-2 justify-content-between align-items-center {{{ if navigation.dropdown }}}dropdown-toggle{{{ end }}}"
+			<a class="nav-link nav-btn 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 }}}>
 				<span class="d-flex gap-2 align-items-center text-nowrap truncate-open">
 					<span class="position-relative">
@@ -12,25 +12,28 @@
 						<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 navigation.text }}}
-					<span class="nav-text small visible-open fw-semibold text-truncate">{navigation.text}</span>
+					{{{ 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>
-			{{{ if navigation.dropdown }}}
+			{{{ if ./dropdown }}}
 			<ul class="dropdown-menu shadow">
-				{navigation.dropdownContent}
+				{./dropdownContent}
 			</ul>
 			{{{ end }}}
 		</li>
-		<!-- ENDIF function.displayMenuItem -->
-		{{{end}}}
+		{{{ end }}}
+		{{{ end }}}
 	</ul>
 	<div class="w-100">
+		{{{ if !config.disableCustomUserSkins }}}
 		<!-- IMPORT partials/skin-switcher.tpl -->
+		{{{ end }}}
+
 		<div class="sidebar-toggle m-2 d-none d-lg-block">
-			<a href="#" role="button" component="sidebar/toggle" class="nav-btn d-flex gap-2 align-items-center p-2 pointer nav-link w-100 text-nowrap">
+			<a href="#" role="button" component="sidebar/toggle" class="nav-btn d-flex gap-2 align-items-center p-2 pointer nav-link w-100 text-nowrap" title="[[harmony:toggle-sidebars]]">
 				<i class="fa fa-fw fa-angles-right"></i>
 				<i class="fa fa-fw fa-angles-left"></i>
 				<span class="nav-text visible-open fw-semibold small lh-1">[[harmony:collapse]]</span>

package/templates/partials/sidebar-right.tpl

@@ -1,4 +1,4 @@
-<nav class="{{{ if config.openSidebars}}}open{{{ end }}} text-dark bg-light sidebar sidebar-right end-0 border-start vh-100 d-none d-md-flex flex-column sticky-top ff-secondary">
+<nav class="{{{ if config.theme.openSidebars}}}open{{{ end }}} text-dark bg-light sidebar sidebar-right end-0 border-start vh-100 d-none d-md-flex flex-column sticky-top ff-secondary">
 	{{{ if config.loggedIn }}}
 	<ul id="logged-in-menu" class="list-unstyled d-flex flex-column w-100 gap-2 mt-2">
 	<!-- IMPORT partials/sidebar/logged-in-menu.tpl -->

package/templates/partials/skin-switcher.tpl

@@ -1,5 +1,5 @@
-<div class="dropend m-2" component="skinSwitcher">
-	<a data-bs-toggle="dropdown" href="#" role="button" class="nav-link nav-btn position-relative" title="[[harmony:skins]]">
+<div class="dropend m-2" component="skinSwitcher" title="[[harmony:skins]]">
+	<a data-bs-toggle="dropdown" href="#" role="button" class="nav-link nav-btn position-relative">
 		<span class="justify-content-between w-100">
 			<span class="d-flex gap-2 align-items-center text-nowrap truncate-open">
 				<span>

package/templates/partials/tags_list.tpl

@@ -1,6 +1,8 @@
 {{{each tags}}}
-<h5 class="tag-container fw-bold d-flex">
-	<a class="text-truncate" href="{config.relative_path}/tags/{tags.valueEncoded}" data-tag="{tags.valueEscaped}"><span class="tag-item text-muted text-uppercase text-nowrap tag-class-{tags.class} me-2" data-tag="{tags.valueEscaped}">{tags.valueEscaped}</span></a>
-	<span class="tag-topic-count text-primary text-nowrap human-readable-number" title="{tags.score}">{tags.score}</span>
-</h5>
+<div class="tag-container d-flex">
+	<div class="d-flex gap-2 align-items-center text-truncate">
+	<a class="fs-5 badge border text-bg-light text-truncate text-decoration-none" href="{config.relative_path}/tags/{tags.valueEncoded}" data-tag="{tags.valueEscaped}"><span class="tag-item text-muted text-uppercase text-nowrap tag-class-{tags.class}" data-tag="{tags.valueEscaped}">{tags.valueEscaped}</span></a>
+	<span class="tag-topic-count text-secondary fw-semibold text-nowrap human-readable-number" title="{tags.score}">{tags.score}</span>
+</div>
+</div>
 {{{end}}}

package/templates/partials/topic/browsing-users.tpl

@@ -1,3 +1 @@
-<!-- THIS FILE IS STILL PERSONA -->
-
 <!-- This partial intentionally left blank; overwritten by nodebb-plugin-browsing-users -->

package/templates/partials/topic/event.tpl

@@ -2,7 +2,7 @@
 	<div class="timeline-badge">
 		<i class="fa {{{ if ./icon }}}{./icon}{{{ else }}}fa-circle{{{ end }}} small"></i>
 	</div>
-	<span class="timeline-text small">
+	<span class="timeline-text small d-flex align-items-center gap-1 flex-wrap">
 		{./text}
 	</span>
 	{{{ if privileges.isAdminOrMod }}}

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

@@ -1,14 +1,10 @@
-<!-- THIS FILE IS STILL PERSONA -->
-
-<div class="clearfix">
-	<div class="icon float-start">
-		<a href="<!-- IF post.user.userslug -->{config.relative_path}/user/{post.user.userslug}<!-- ELSE -->#<!-- ENDIF post.user.userslug -->">
-			{buildAvatar(post.user, "24px", true, "", "user/picture")} {post.user.username}
+<div class="d-flex gap-2 mb-2 justify-content-between align-items-center flex-nowrap">
+	<div class="icon text-truncate">
+		<a href="{{{ if post.user.userslug }}}{config.relative_path}/user/{post.user.userslug}{{{else }}}#{{{ end }}}">
+			{buildAvatar(post.user, "24px", true)} {post.user.username}
 		</a>
 	</div>
-	<small class="float-end">
-		<span class="timeago" title="{post.timestampISO}"></span>
-	</small>
+	<span class="timeago text-nowrap text-sm" title="{post.timestampISO}"></span>
 </div>
 
 <div>{post.content}</div>

package/templates/partials/topic/navigator-mobile.tpl

@@ -0,0 +1,48 @@
+<div class="d-flex w-100">
+	<div class="pagination-block text-bg-light m-2 rounded-1 border border-gray-300 w-100" style="height:30px;">
+		<div class="position-relative">
+			<div class="progress-bar rounded-1 bg-info d-block position-absolute" style="height:28px;"></div>
+		</div>
+		<div class="wrapper dropup-center d-flex align-items-center justify-content-between w-100 h-100" style="padding: 5px 0px;">
+			<div class="lh-1 px-2">
+				<i class="fa fa-angle-double-up pointer fa-fw pagetop fs-5" style="z-index: 1;"></i>
+			</div>
+
+			<a href="#" class="text-reset dropdown-toggle d-inline-block px-3 text-decoration-none" data-bs-toggle="dropdown">
+				<span class="pagination-text position-relative fw-bold"></span>
+			</a>
+
+			<div class="lh-1 px-2">
+				<i class="fa fa-angle-double-down pointer fa-fw pagebottom fs-5" style="z-index: 1;"></i>
+			</div>
+
+			<ul class="dropdown-menu p-0" role="menu" style="width: 100%;">
+				<li class="p-3">
+					<div class="row">
+						<div class="col-8 post-content overflow-hidden mb-3" style="height: 350px;"></div>
+						<div class="col-4 ps-0 text-end">
+							<div class="scroller-content">
+								<span class="pointer pagetop">[[topic:first-post]] <i class="fa fa-angle-double-up"></i></span>
+								<div class="scroller-container border-gray-200" style="height: 300px; border-right: 3px solid; margin-right: 5.5px;">
+									<div class="scroller-thumb position-relative text-nowrap" style="height: 40px;right: -6px; padding-right: 15px; margin-right: -15px;">
+										<span class="thumb-text text-sm fw-bold user-select-none position-relative pe-2" style="top: -15px;"></span>
+										<div class="rounded-2 scroller-thumb-icon bg-primary d-inline-block position-relative" style="width: 9px; height:40px;"></div>
+									</div>
+								</div>
+								<span class="pointer pagebottom">[[topic:last-post]] <i class="fa fa-angle-double-down"></i></span>
+							</div>
+						</div>
+					</div>
+					<div class="row">
+						<div class="col-6">
+							<button id="myNextPostBtn" class="btn btn-outline-secondary form-control text-truncate" disabled>[[topic:go-to-my-next-post]]</button>
+						</div>
+						<div class="col-6">
+							<input type="number" class="form-control" id="indexInput" placeholder="[[global:pagination.enter_index]]">
+						</div>
+					</div>
+				</li>
+			</ul>
+		</div>
+	</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,84 +1,82 @@
-<!-- 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>
 </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 -->">
+<li {{{ if posts.deleted }}}hidden{{{ end }}}>
+	<a class="dropdown-item" component="post/delete" role="menuitem" tabindex="-1" href="#" class="{{{ if posts.deleted }}}hidden{{{ end }}}">
 		<span class="menu-icon"><i class="fa fa-fw 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 -->">
+<li {{{ if !posts.deleted }}}hidden{{{ end }}}>
+	<a class="dropdown-item" component="post/restore" role="menuitem" tabindex="-1" href="#" class="{{{ if !posts.deleted }}}hidden{{{ end }}}">
 		<span class="menu-icon"><i class="fa fa-fw 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 -->">
+{{{ if posts.display_purge_tools }}}
+<li {{{ if !posts.deleted }}}hidden{{{ end }}}>
+	<a class="dropdown-item" component="post/purge" role="menuitem" tabindex="-1" href="#" class="{{{ if !posts.deleted }}}hidden{{{ end }}}">
 		<span class="menu-icon"><i class="fa fa-fw 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>
 </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>
 </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>
 </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>
 </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}}
+		<span class="menu-icon"><i class="fa fa-fw {./icon}"></i></span> {{./html}}
 	</a>
 </li>
-{{{end}}}
+{{{ end }}}
 
-<!-- IF !posts.deleted -->
-	<!-- IF posts.display_history -->
+{{{ if !posts.deleted }}}
+	{{{ if posts.display_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>
 	</li>
-	<!-- END -->
+	{{{ end }}}
 
 	{{{ if config.loggedIn }}}
 	<li>
 		<a class="dropdown-item" 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 fa-heart {{{ if !posts.bookmarked }}}hidden{{{ end }}}"></i>
+				<i component="post/bookmark/off" class="fa fa-fw fa-heart-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;
@@ -92,16 +90,16 @@
 		</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" role="menuitem" component="share/{./id}" tabindex="-1" href="#"><span class="menu-icon"><i class="fa fa-fw {./class}"></i></span> {./name}</a>
 		</li>
-	{{{end}}}
-<!-- ENDIF !posts.deleted -->
+	{{{ end }}}
+{{{ end }}}
 
 {{{ if posts.display_flag_tools }}}
 <li class="dropdown-divider"></li>
@@ -120,7 +118,7 @@
 {{{ 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>
@@ -131,4 +129,4 @@
 </li>
 {{{ end }}}
 {{{ end }}}
-<!-- ENDIF posts.display_moderator_tools -->
+{{{ end }}}

package/templates/partials/topic/post.tpl

@@ -1,3 +1,11 @@
+{{{ 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 }}}">
@@ -25,14 +33,14 @@
 			{{{ end }}}
 			{{{ end }}}
 
-			<!-- IF posts.user.banned -->
+			{{{ if posts.user.banned }}}
 			<span class="badge bg-danger rounded-1">[[user:banned]]</span>
-			<!-- ENDIF posts.user.banned -->
+			{{{ end }}}
 
 			<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>
+				<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]]{{{ end }}}</a>
 				{{{ else }}}
 				<span class="text-muted">wrote</span><!-- FIX THIS, DOES NOT l10n PROPERLY -->
 				{{{ end }}}
@@ -45,16 +53,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 +83,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>
@@ -104,7 +113,7 @@
 				<i class="fa 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>
+			<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 }}}">
@@ -116,4 +125,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,7 +1,7 @@
-<!-- IF privileges.topics:reply -->
+{{{ if privileges.topics:reply }}}
 <div component="topic/quickreply/container" class="quick-reply d-flex gap-3">
 	<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 }}}
 		</a>
@@ -9,14 +9,14 @@
 	<form class="flex-grow-1 d-flex flex-column gap-2" method="post" action="{config.relative_path}/compose">
 		<input type="hidden" name="tid" value="{tid}" />
 		<input type="hidden" name="_csrf" value="{config.csrf_token}" />
-		<div class="quickreply-message">
+		<div class="quickreply-message position-relative">
 			<textarea rows="4" name="content" component="topic/quickreply/text" class="form-control mousetrap" placeholder="[[modules:composer.textarea.placeholder]]"></textarea>
 			<div class="imagedrop"><div>[[topic:composer.drag_and_drop_images]]</div></div>
 		</div>
 		<div>
-			<div class="btn-group">
+			<div class="d-flex justify-content-end gap-2">
+				<button type="submit" component="topic/quickreply/expand" class="btn btn-sm btn-outline" formmethod="get"><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>
-				<button type="submit" component="topic/quickreply/expand" class="btn btn-sm btn-primary" formmethod="get"><i class="fa fa-expand"></i></button>
 			</div>
 		</div>
 	</form>
@@ -25,4 +25,4 @@
 	</form>
 
 </div>
-<!-- ENDIF privileges.topics:reply -->
+{{{ end }}}

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

@@ -1,4 +1,4 @@
-<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>

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

@@ -1,10 +1,8 @@
-<!-- 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 {{{ if locked }}}hidden{{{ end }}}"><i class="fa fa-fw fa-lock"></i> [[topic:thread_tools.lock]]</a></li>
+<li {{{ if !locked }}}hidden{{{ end }}}><a component="topic/unlock" href="#" class="dropdown-item {{{ if !locked }}}hidden{{{ end }}}"><i class="fa fa-fw fa-unlock"></i> [[topic:thread_tools.unlock]]</a></li>
+<li {{{ if pinned }}}hidden{{{ end }}}><a component="topic/pin" href="#" class="dropdown-item {{{ if pinned }}}hidden{{{ end }}}"><i class="fa fa-fw fa-thumb-tack"></i> [[topic:thread_tools.pin]]</a></li>
+<li {{{ if !pinned }}}hidden{{{ end }}}><a component="topic/unpin" href="#" class="dropdown-item {{{ if !pinned }}}hidden{{{ end }}}"><i class="fa fa-fw 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>
@@ -16,19 +14,19 @@
 <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 {{{ if deleted }}}hidden{{{ end }}}"><i class="fa fa-fw 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 {{{ if !deleted }}}hidden{{{ end }}}"><i class="fa fa-fw 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 {{{ if !deleted }}}hidden{{{ end }}}"><i class="fa fa-fw fa-eraser"></i> [[topic:thread_tools.purge]]</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 -->
+{{{ 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 -->
+{{{ end }}}
 
-{{{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 {./class}"><i class="fa fa-fw {./icon}"></i> {./title}</a></li>
+{{{ end }}}
+{{{ end }}}