nodebb-theme-harmony 1.0.0-beta.32 → 1.0.0-beta.34

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nodebb-theme-harmony",
-  "version": "1.0.0-beta.32",
+  "version": "1.0.0-beta.34",
   "nbbpm": {
     "compatibility": "^3.0.0"
   },

package/public/harmony.js

@@ -64,7 +64,7 @@ $(document).ready(function () {
 	}
 
 	function setupDrafts() {
-		require(['composer/drafts'], function (drafts) {
+		require(['composer/drafts', 'bootbox'], function (drafts, bootbox) {
 			const draftsEl = $('[component="sidebar/drafts"]');
 
 			function updateBadgeCount() {
@@ -105,8 +105,13 @@ $(document).ready(function () {
 			});
 
 			draftsEl.on('click', '[component="drafts/delete"]', function () {
-				drafts.removeDraft($(this).attr('data-save-id'));
-				renderDraftList();
+				const save_id = $(this).attr('data-save-id');
+				bootbox.confirm('[[modules:composer.discard-draft-confirm]]', function (ok) {
+					if (ok) {
+						drafts.removeDraft(save_id);
+						renderDraftList();
+					}
+				});
 				return false;
 			});
 

package/templates/account/consent.tpl

@@ -8,12 +8,12 @@
 
 <div class="row">
 	<div class="col-sm-6">
-		<!-- IF gdpr_consent -->
+		{{{ if gdpr_consent }}}
 		<div class="alert alert-success">
 			<i class="fa fa-check float-end fa-3x"></i>
 			[[user:consent.received]]
 		</div>
-		<!-- ELSE -->
+		{{{ else }}}
 		<div class="alert alert-warning">
 			[[user:consent.not_received]]
 			<br /><br />
@@ -21,7 +21,7 @@
 				<button class="btn btn-warning" data-action="consent">[[user:consent.give]]</button>
 			</div>
 		</div>
-		<!-- END -->
+		{{{ end }}}
 		<div class="card">
 			<div class="card-body">
 				<p>[[user:consent.email_intro]]</p>

package/templates/account/edit/password.tpl

@@ -8,7 +8,7 @@
 	{{{ if isSelf }}}
 	<div class="mb-2">
 		<label class="form-label fw-semibold text-xm" for="inputCurrentPassword">[[user:current_password]]</label>
-		<input autocomplete="off" class="form-control" type="password" id="inputCurrentPassword" placeholder="[[user:current_password]]" value=""<!-- IF !hasPassword --> disabled<!-- ENDIF !hasPassword -->>
+		<input autocomplete="off" class="form-control" type="password" id="inputCurrentPassword" placeholder="[[user:current_password]]" value="" {{{ if !hasPassword }}} disabled{{{ end }}}>
 	</div>
 	{{{ end }}}
 

package/templates/account/edit.tpl

@@ -11,12 +11,12 @@
 				<label class="form-label fw-bold" for="fullname">[[user:fullname]]</label>
 				<input class="form-control" type="text" id="fullname" name="fullname" placeholder="[[user:fullname]]" value="{fullname}">
 			</div>
-			<!-- IF allowWebsite -->
+			{{{ if allowWebsite }}}
 			<div class="mb-2">
 				<label class="form-label fw-bold" for="website">[[user:website]]</label>
 				<input class="form-control" type="text" id="website" name="website" placeholder="http://..." value="{website}">
 			</div>
-			<!-- ENDIF allowWebsite -->
+			{{{ end }}}
 
 			<div class="mb-2">
 				<label class="form-label fw-bold" for="location">[[user:location]]</label>
@@ -31,37 +31,35 @@
 			<div class="mb-2">
 				<label class="form-label fw-bold" for="groupTitle">[[user:grouptitle]]</label>
 
-				<select class="form-select mb-1" id="groupTitle" name="groupTitle" <!-- IF allowMultipleBadges --> size="{groupSelectSize}" multiple<!-- ENDIF allowMultipleBadges -->>
+				<select class="form-select mb-1" id="groupTitle" name="groupTitle" {{{ if allowMultipleBadges }}} size="{groupSelectSize}" multiple{{{ end }}}>
 					<option value="">[[user:no-group-title]]</option>
-					{{{each groups}}}
-					<!-- IF groups.userTitleEnabled -->
-					<option value="{groups.displayName}" <!-- IF groups.selected -->selected<!-- ENDIF groups.selected -->>{groups.userTitle}</option>
-					<!-- ENDIF groups.userTitleEnabled -->
-					{{{end}}}
+					{{{ each groups }}}
+					{{{ if ./userTitleEnabled }}}
+					<option value="{groups.displayName}" {{{ if ./selected }}}selected{{{ end }}}>{./userTitle}</option>
+					{{{ end }}}
+					{{{ end }}}
 				</select>
-				<!-- IF allowMultipleBadges -->
+				{{{ if allowMultipleBadges }}}
 				<div class="d-none d-md-block">
 					<span class="form-text">[[user:group-order-help]]</span>
 					<i role="button" component="group/order/up" class="fa fa-chevron-up"></i> <i role="button" component="group/order/down" class="fa fa-chevron-down"></i>
 				</div>
-				<!-- ENDIF -->
+				{{{ end }}}
 			</div>
 
-			<!-- IF allowAboutMe -->
+			{{{ if allowAboutMe }}}
 			<div class="mb-2">
 				<label class="form-label fw-bold" for="aboutme">[[user:aboutme]]</label> <small><label id="aboutMeCharCountLeft"></label></small>
 				<textarea class="form-control" id="aboutme" name="aboutme" rows="5">{aboutme}</textarea>
 			</div>
-			<!-- ENDIF allowAboutMe -->
+			{{{ end }}}
 
-			<!-- IF allowSignature -->
-			<!-- IF !disableSignatures -->
+			{{{ if (allowSignature && !disableSignatures) }}}
 			<div class="mb-2">
 				<label class="form-label fw-bold" for="signature">[[user:signature]]</label> <small><label id="signatureCharCountLeft"></label></small>
 				<textarea class="form-control" id="signature" name="signature" rows="5">{signature}</textarea>
 			</div>
-			<!-- ENDIF !disableSignatures -->
-			<!-- ENDIF allowSignature -->
+			{{{ end }}}
 		</form>
 		<hr class="visible-xs visible-sm"/>
 	</div>
@@ -69,47 +67,45 @@
 	<div class="col-xl-6 col-12">
 		<div class="text-center">
 			<ul class="list-group mb-3 text-sm text-nowrap">
-				<!-- IF allowProfilePicture -->
+				{{{ if allowProfilePicture }}}
 				<a component="profile/change/picture" href="#" class="list-group-item px-1 text-decoration-none">[[user:change_picture]]</a>
-				<!-- ENDIF allowProfilePicture -->
-				<!-- IF !username:disableEdit -->
+				{{{ end }}}
+				{{{ if !username:disableEdit }}}
 				<a href="{config.relative_path}/user/{userslug}/edit/username" class="list-group-item px-1 text-decoration-none">[[user:change_username]]</a>
-				<!-- ENDIF !username:disableEdit -->
-				<!-- IF !email:disableEdit -->
+				{{{ end }}}
+				{{{ if !email:disableEdit }}}
 				<a href="{config.relative_path}/user/{userslug}/edit/email" class="list-group-item px-1 text-decoration-none">[[user:change_email]]</a>
-				<!-- ENDIF !email:disableEdit -->
-				<!-- IF canChangePassword -->
+				{{{ end }}}
+				{{{ if canChangePassword }}}
 				<a href="{config.relative_path}/user/{userslug}/edit/password" class="list-group-item px-1 text-decoration-none">[[user:change_password]]</a>
-				<!-- ENDIF canChangePassword -->
-				{{{each editButtons}}}
-				<a href="{config.relative_path}{editButtons.link}" class="list-group-item px-1 text-decoration-none">{editButtons.text}</a>
-				{{{end}}}
+				{{{ end }}}
+				{{{ each editButtons }}}
+				<a href="{config.relative_path}{./link}" class="list-group-item px-1 text-decoration-none">{./text}</a>
+				{{{ end }}}
 			</ul>
 
-			<!-- IF config.requireEmailConfirmation -->
-			<!-- IF email -->
-			<!-- IF isSelf -->
-			<a id="confirm-email" href="#" class="btn btn-warning <!-- IF email:confirmed -->hide<!-- ENDIF email:confirmed -->">[[user:confirm_email]]</a><br/><br/>
-			<!-- ENDIF isSelf -->
-			<!-- ENDIF email -->
-			<!-- ENDIF config.requireEmailConfirmation -->
+			{{{ if config.requireEmailConfirmation }}}
+			{{{ if (email && isSelf) }}}
+			<a id="confirm-email" href="#" class="btn btn-warning {{{ if email:confirmed }}}hide{{{ end }}}">[[user:confirm_email]]</a><br/><br/>
+			{{{ end }}}
+			{{{ end }}}
 		</div>
 
 		{{{ if sso.length }}}
 		<label class="form-label text-sm fw-semibold">[[user:sso.title]]</label>
 		<div class="list-group">
-			{{{each sso}}}
+			{{{ each sso }}}
 			<div class="list-group-item d-flex justify-content-between">
-				<a class="text-sm text-reset text-decoration-none" data-component="{../component}" href="{../url}" target="<!-- IF ../associated -->_blank<!-- ELSE -->_top<!-- ENDIF ../associated -->">
-					<!-- IF ../icon --><i class="fa {../icon}"></i><!-- ENDIF ../icon -->
-					<!-- IF ../associated -->[[user:sso.associated]]<!-- ELSE -->[[user:sso.not-associated]]<!-- ENDIF ../associated -->
-					{../name}
+				<a class="text-sm text-reset text-decoration-none" data-component="{./component}" href="{./url}" target="{{{ if ./associated }}}_blank{{{ else }}}_top{{{ end }}}">
+					{{{ if ./icon }}}<i class="fa {./icon}"></i>{{{ end }}}
+					{{{ if ./associated }}}[[user:sso.associated]]{{{ else }}}[[user:sso.not-associated]]{{{ end }}}
+					{./name}
 				</a>
-				<!-- IF ../deauthUrl -->
-				<a data-component="{../component}" class="btn btn-outline-secondary btn-sm" href="{../deauthUrl}">[[user:sso.dissociate]]</a>
-				<!-- END -->
+				{{{ if ./deauthUrl }}}
+				<a data-component="{./component}" class="btn btn-outline-secondary btn-sm" href="{./deauthUrl}">[[user:sso.dissociate]]</a>
+				{{{ end }}}
 			</div>
-			{{{end}}}
+			{{{ end }}}
 		</div>
 		{{{ end }}}
 

package/templates/account/info.tpl

@@ -62,24 +62,24 @@
 				[[user:info.latest-flags]]
 			</h5>
 			<div class="card-body">
-				<!-- IF history.flags.length -->
+				{{{ if history.flags.length }}}
 				<ul class="recent-flags list-unstyled">
-					{{{each history.flags}}}
+					{{{ each history.flags }}}
 					<li>
 						<p>
 							{{{ if history.flags.targetPurged }}}
 							<div>[[flags:target-purged]]</div>
 							{{{ else }}}
-							<a class="title" href="{config.relative_path}/post/{../pid}">{../title}</a><br />
+							<a class="title" href="{config.relative_path}/post/{./pid}">{./title}</a><br />
 							{{{ end }}}
-							<span class="timestamp">[[flags:flagged-timeago-readable, {../timestampISO}, {../timestampReadable}]]</span>
+							<span class="timestamp">[[flags:flagged-timeago-readable, {./timestampISO}, {./timestampReadable}]]</span>
 						</p>
 					</li>
-					{{{end}}}
+					{{{ end }}}
 				</ul>
-				<!-- ELSE -->
+				{{{ else }}}
 				<div class="alert alert-success">[[user:info.no-flags]]</div>
-				<!-- ENDIF history.flags.length -->
+				{{{ end }}}
 			</div>
 		</div>
 
@@ -87,40 +87,37 @@
 			<h5 class="card-header">
 				[[user:info.ban-history]]
 
-				<!-- IF !banned -->
-				<!-- IF !isSelf -->
+				{{{ if (!banned && !isSelf) }}}
 				<button class="btn btn-sm float-end btn-danger" component="account/ban">[[user:ban_account]]</button>
-				<!-- ENDIF !isSelf -->
-				<!-- ELSE -->
-				<!-- IF !isSelf -->
+				{{{ end }}}
+				{{{ if (banned && !isSelf) }}}
 				<button class="btn btn-sm float-end btn-success" component="account/unban">[[user:unban_account]]</button>
-				<!-- ENDIF !isSelf -->
-				<!-- ENDIF !banned -->
+				{{{ end }}}
 			</h5>
 			<div class="card-body">
-				<!-- IF history.bans.length -->
+				{{{ if history.bans.length }}}
 				<ul class="ban-history list-unstyled">
 					{{{each history.bans}}}
 					<li>
 						<p>
-							<a href="{config.relative_path}/user/{history.bans.user.userslug}">{buildAvatar(history.bans.user, "24px", true)}</a>
+							<a href="{config.relative_path}/user/{./user.userslug}">{buildAvatar(./user, "24px", true)}</a>
 							<strong>
-								<a href="<!-- IF history.bans.user.userslug -->{config.relative_path}/user/{history.bans.user.userslug}<!-- ELSE -->#<!-- ENDIF history.bans.user.userslug -->" itemprop="author" data-username="{history.bans.user.username}" data-uid="{history.bans.user.uid}">{history.bans.user.username}</a>
+								<a href="{{{ if ./user.userslug }}}{config.relative_path}/user/{./user.userslug}{{{ else }}}#{{{ end }}}" itemprop="author" data-username="{./user.username}" data-uid="{./user.uid}">{./user.username}</a>
 							</strong>
-							<span class="timestamp timeago" title="{../timestampISO}"></span> &mdash; {../timestampReadable}<br />
-							<!-- IF ../until -->
-							<span class="expiry">[[user:info.banned-until, {../untilReadable}]]</span><br />
-							<!-- ELSE -->
+							<span class="timestamp timeago" title="{./timestampISO}"></span> &mdash; {./timestampReadable}<br />
+							{{{ if ./until }}}
+							<span class="expiry">[[user:info.banned-until, {./untilReadable}]]</span><br />
+							{{{ else }}}
 							<span class="expiry">[[user:info.banned-permanently]]</span><br />
-							<!-- ENDIF ../until -->
-							<span class="reason"><strong>[[user:info.banned-reason-label]]</strong>: {../reason}</span>
+							{{{ end }}}
+							<span class="reason"><strong>[[user:info.banned-reason-label]]</strong>: {./reason}</span>
 						</p>
 					</li>
 					{{{end}}}
 				</ul>
-				<!-- ELSE -->
+				{{{ else }}}
 				<div class="alert alert-success">[[user:info.no-ban-history]]</div>
-				<!-- ENDIF history.bans.length -->
+				{{{ end }}}
 			</div>
 		</div>
 
@@ -144,19 +141,19 @@
 					{{{ each history.mutes }}}
 					<li>
 						<p>
-							<a href="{config.relative_path}/user/{history.mutes.user.userslug}">{buildAvatar(history.mutes.user, "24px", true)}</a>
+							<a href="{config.relative_path}/user/{./user.userslug}">{buildAvatar(./user, "24px", true)}</a>
 							<strong>
-								<a href="<!-- IF history.mutes.user.userslug -->{config.relative_path}/user/{history.mutes.user.userslug}<!-- ELSE -->#<!-- ENDIF history.mutes.user.userslug -->" itemprop="author" data-username="{history.mutes.user.username}" data-uid="{history.mutes.user.uid}">{history.mutes.user.username}</a>
+								<a href="{{{ if ./user.userslug }}}{config.relative_path}/user/{./user.userslug}{{{ else }}}#{{{ end }}}" itemprop="author" data-username="{./user.username}" data-uid="{./user.uid}">{./user.username}</a>
 							</strong>
-							<span class="timestamp timeago" title="{../timestampISO}"></span> &mdash; {../timestampReadable}<br />
-							{{{ if ../until }}}
-							<span class="expiry">[[user:info.muted-until, {../untilReadable}]]</span><br />
+							<span class="timestamp timeago" title="{./timestampISO}"></span> &mdash; {./timestampReadable}<br />
+							{{{ if ./until }}}
+							<span class="expiry">[[user:info.muted-until, {./untilReadable}]]</span><br />
 							{{{ end }}}
 
-							<span class="reason"><strong>[[user:info.banned-reason-label]]</strong>: {../reason}</span>
+							<span class="reason"><strong>[[user:info.banned-reason-label]]</strong>: {./reason}</span>
 						</p>
 					</li>
-					{{{end}}}
+					{{{ end }}}
 				</ul>
 				{{{ else }}}
 				<div class="alert alert-success">[[user:info.no-mute-history]]</div>
@@ -164,7 +161,7 @@
 			</div>
 		</div>
 
-		<!-- IF isAdminOrGlobalModerator -->
+		{{{ if isAdminOrGlobalModerator }}}
 		<div class="card">
 			<h5 class="card-header">
 				[[user:info.moderation-note]]
@@ -175,32 +172,30 @@
 				<button class="btn btn-sm float-end btn-success" component="account/save-moderation-note">[[user:info.moderation-note.add]]</button>
 				<br/>
 				<div component="account/moderation-note/list">
-					{{{each moderationNotes}}}
+					{{{ each moderationNotes }}}
 					<hr/>
 
-					<div class="clearfix">
-						<div class="float-start">
-							<a href="<!-- IF moderationNotes.user.userslug -->{config.relative_path}/user/{moderationNotes.user.userslug}<!-- ELSE -->#<!-- ENDIF moderationNotes.user.userslug -->">{buildAvatar(moderationNotes.user, "24px", true)}</a>
-							<strong>
-								<a href="<!-- IF moderationNotes.user.userslug -->{config.relative_path}/user/{moderationNotes.user.userslug}<!-- ELSE -->#<!-- ENDIF moderationNotes.user.userslug -->" itemprop="author" data-username="{moderationNotes.user.username}" data-uid="{moderationNotes.user.uid}">{moderationNotes.user.username}</a>
-							</strong>
+					<div>
+						<a href="{{{ if ./user.userslug }}}{config.relative_path}/user/{./user.userslug}{{{ else }}}#{{{ end }}}">{buildAvatar(./user, "24px", true)}</a>
+						<strong>
+							<a href="{{{ if ./user.userslug }}}{config.relative_path}/user/{./user.userslug}{{{ else }}}#{{{ end }}}" itemprop="author" data-username="{./user.username}" data-uid="{./user.uid}">{./user.username}</a>
+						</strong>
 
-							<div class="visible-xs-inline-block visible-sm-inline-block visible-md-inline-block visible-lg-inline-block">
-								<span class="timeago" title="{moderationNotes.timestampISO}"></span>
-							</div>
-							<br />
+						<div class="visible-xs-inline-block visible-sm-inline-block visible-md-inline-block visible-lg-inline-block">
+							<span class="timeago" title="{./timestampISO}"></span>
+						</div>
+						<br />
 
-							<div class="content">
-								{moderationNotes.note}
-							</div>
+						<div class="content">
+							{./note}
 						</div>
 					</div>
-					{{{end}}}
+					{{{ end }}}
 				</div>
 				<!-- IMPORT partials/paginator.tpl -->
 			</div>
 		</div>
-		<!-- ENDIF isAdminOrGlobalModerator -->
+		{{{ end }}}
 	</div>
 </div>
 

package/templates/account/settings.tpl

@@ -24,9 +24,9 @@
 			<div class="mb-2">
 				<select class="form-select form-select-sm" id="homePageRoute" data-property="homePageRoute">
 					<option value="none">None</option>
-					{{{each homePageRoutes}}}
-					<option value="{homePageRoutes.route}" <!-- IF homePageRoutes.selected -->selected="1"<!-- ENDIF homePageRoutes.selected -->>{homePageRoutes.name}</option>
-					{{{end}}}
+					{{{ each homePageRoutes }}}
+					<option value="{./route}" {{{ if ./selected }}}selected="1"{{{ end }}}>{./name}</option>
+					{{{ end }}}
 				</select>
 				<p class="form-text text-xs">[[user:homepage_description]]</p>
 			</div>

package/templates/account/uploads.tpl

@@ -2,15 +2,13 @@
 
 <h3 class="fw-semibold fs-5">{title}</h3>
 
-<!-- IF privateUploads -->
-<div class="alert alert-info text-center">[[uploads:private-uploads-info]]</div>
-<!-- ELSE -->
-<div class="alert alert-info text-center">[[uploads:public-uploads-info]]</div>
-<!-- ENDIF privateUploads -->
+<div class="alert alert-info text-center">
+	{{{ if privateUploads }}}[[uploads:private-uploads-info]]{{{ else }}}[[uploads:public-uploads-info]]{{{ end }}}
+</div>
 
-<!-- IF !uploads.length -->
+{{{ if !uploads.length }}}
 <div class="alert alert-warning text-center">[[uploads:no-uploads-found]]</div>
-<!-- ENDIF !uploads.length -->
+{{{ end }}}
 
 <table class="table table-striped table-responsive">
 	<thead>
@@ -20,10 +18,10 @@
 		</tr>
 	</thead>
 	<tbody>
-		{{{each uploads}}}
-		<tr data-name="{uploads.name}">
+		{{{ each uploads }}}
+		<tr data-name="{./name}">
 			<td>
-				<a class="text-break" href="{config.relative_path}{uploads.url}">{uploads.url}</a>
+				<a class="text-break" href="{config.relative_path}{./url}">{./url}</a>
 			</td>
 			<td>
 				<div class="btn-group ">
@@ -31,7 +29,7 @@
 				</div>
 			</td>
 		</tr>
-		{{{end}}}
+		{{{ end }}}
 	</tbody>
 </table>
 

package/templates/flags/detail.tpl

@@ -11,7 +11,7 @@
 
 		<hr />
 
-		<!-- IF type_bool.post -->
+		{{{ if type_bool.post }}}
 		<div class="d-flex">
 			<div class="flex-shrink-0">
 				<a href="{config.relative_path}/user/{target.user.userslug}">{buildAvatar(target.user, "64px", true, "media-object")}</a>
@@ -21,9 +21,9 @@
 				{target.content}
 			</div>
 		</div>
-		<!-- ENDIF type_bool.post -->
+		{{{ end }}}
 
-		<!-- IF type_bool.user -->
+		{{{ if type_bool.user }}}
 		<div class="d-flex">
 			<div class="flex-shrink-0">
 				<a href="{config.relative_path}/user/{target.userslug}">{buildAvatar(target, "64px", true, "media-object")}</a>
@@ -36,11 +36,11 @@
 				</p>
 			</div>
 		</div>
-		<!-- ENDIF type_bool.user -->
+		{{{ end }}}
 
-		<!-- IF type_bool.empty -->
+		{{{ if type_bool.empty }}}
 		<div class="alert alert-warning" role="alert">[[flags:target-purged]]</div>
-		<!-- ENDIF type_bool.empty -->
+		{{{ end }}}
 
 		<hr />
 
@@ -95,27 +95,27 @@
 				</form>
 
 				<div component="flag/notes">
-					<!-- IF !notes.length -->
+					{{{ if !notes.length }}}
 					<div class="alert alert-success text-center">[[flags:no-notes]]</div>
-					<!-- ENDIF !notes.length -->
-					{{{each notes}}}
+					{{{ end }}}
+					{{{ each notes }}}
 					<div class="d-flex mb-3">
 						<div class="flex-shrink-0">
-							<a href="{config.relative_path}/user/{../user.userslug}">{buildAvatar(notes.user, "32px", true, "media-object")}</a>
+							<a href="{config.relative_path}/user/{./user.userslug}">{buildAvatar(./user, "32px", true, "media-object")}</a>
 						</div>
 						<div class="flex-grow-1 mx-3">
 							<h2 class="h5">
-								<a href="{config.relative_path}/user/{../user.userslug}">{../user.username}</a>
-								<small><span class="timeago" title="{../datetimeISO}"></span></small>
+								<a href="{config.relative_path}/user/{./user.userslug}">{./user.username}</a>
+								<small><span class="timeago" title="{./datetimeISO}"></span></small>
 							</h4>
-							{../content}
+							{./content}
 						</div>
 						<div class="flex-shrink-0">
 							<a href="#" class="btn btn-sm btn-link" data-action="prepare-edit"><i class="fa fa-pencil"></i></a>
 							<a href="#" class="btn btn-sm btn-link" data-action="delete-note"><i class="fa fa-trash text-danger"></i></a>
 						</div>
 					</div>
-					{{{end}}}
+					{{{ end }}}
 				</div>
 			</div>
 			<div class="col-sm-6">
@@ -175,25 +175,25 @@
 
 				<h2 class="h4">[[flags:history]]</h2>
 				<div component="flag/history">
-					<!-- IF !history.length -->
+					{{{ if !history.length }}}
 					<div class="alert alert-success text-center">[[flags:no-history]]</div>
-					<!-- ENDIF !history.length -->
-					{{{each history}}}
+					{{{ end }}}
+					{{{ each history }}}
 					<div class="d-flex">
 						<div class="flex-shrink-0">
-							<a href="{config.relative_path}/user/{../user.userslug}">{buildAvatar(history.user, "32px", true, "media-object")}</a>
+							<a href="{config.relative_path}/user/{./user.userslug}">{buildAvatar(./user, "32px", true, "media-object")}</a>
 						</div>
 						<div class="flex-grow-1 ms-3">
 							<h4 class="media-heading">
-								<a href="{config.relative_path}/user/{../user.userslug}">{../user.username}</a>
-								<small><span class="timeago" title="{../datetimeISO}"></span></small>
+								<a href="{config.relative_path}/user/{./user.userslug}">{./user.username}</a>
+								<small><span class="timeago" title="{./datetimeISO}"></span></small>
 							</h4>
 							<ul>
-								{{{each ./fields}}}
+								{{{ each ./fields }}}
 								<li>
-									<span class="badge bg-primary">[[flags:{@key}]]</span><!-- IF @value --> &rarr; <span class="badge bg-light text-dark">{@value}</span><!-- ENDIF @value -->
+									<span class="badge bg-primary">[[flags:{@key}]]</span>{{{ if @value }}} &rarr; <span class="badge bg-light text-dark">{@value}</span>{{{ end }}}
 								</li>
-								{{{end}}}
+								{{{ end }}}
 								{{{ each ./meta }}}
 								<li>
 									<span class="badge bg-{{./labelClass}}">{{./key}}</span>{{{ if ./value }}} &rarr; <span class="badge bg-light text-dark">{{ ./value }}</span>{{{ end }}}
@@ -202,7 +202,7 @@
 							</ul>
 						</div>
 					</div>
-					{{{end}}}
+					{{{ end }}}
 				</div>
 			</div>
 		</div>

package/templates/flags/list.tpl

@@ -7,14 +7,14 @@
 		<!-- IMPORT partials/flags/filters.tpl -->
 	</div>
 	<div class="col-sm-8 col-md-9">
-		<!-- IF hasFilter -->
+		{{{ if hasFilter }}}
 		<div class="alert alert-warning">
 			<p class="float-end">
 				<a href="{config.relative_path}/flags">[[flags:filter-reset]]</a>
 			</p>
 			[[flags:filter-active]]
 		</div>
-		<!-- ENDIF hasFilter -->
+		{{{ end }}}
 
 		<div class="btn-group float-end" component="flags/bulk-actions">
 			<button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" autocomplete="off" aria-haspopup="true" aria-expanded="false" disabled="disabled">
@@ -39,7 +39,7 @@
 				</tr>
 			</thead>
 			<tbody>
-				<!-- IF !flags.length -->
+				{{{ if !flags.length }}}
 				<tr>
 					<td colspan="5">
 						<div class="alert alert-success text-center">
@@ -47,22 +47,22 @@
 						</div>
 					</td>
 				</tr>
-				<!-- ENDIF !flags.length -->
-				{{{each flags}}}
-				<tr data-flag-id="{../flagId}">
+				{{{ end }}}
+				{{{ each flags }}}
+				<tr data-flag-id="{./flagId}">
 					<td>
 						<input type="checkbox" autocomplete="off" />
 					</td>
 					<td>
-						<a href="{config.relative_path}/flags/{../flagId}">
-							<strong>{../target_readable}</strong>
+						<a href="{config.relative_path}/flags/{./flagId}">
+							<strong>{./target_readable}</strong>
 						</a>
 					</td>
 					<td>
 						{./heat}
 					</td>
-					<td><span class="timeago" title="{../datetimeISO}"></span></td>
-					<td><span class="badge bg-{../labelClass}">[[flags:state-{../state}]]</span></td>
+					<td><span class="timeago" title="{./datetimeISO}"></span></td>
+					<td><span class="badge bg-{./labelClass}">[[flags:state-{./state}]]</span></td>
 				</tr>
 				{{{end}}}
 			</tbody>

package/templates/partials/breadcrumbs.tpl

@@ -1,12 +1,12 @@
 {{{ if breadcrumbs.length }}}
 <ol class="breadcrumb mb-0 {{{ if config.centerHeaderElements }}}justify-content-center{{{ end }}}" itemscope="itemscope" itemprop="breadcrumb" itemtype="http://schema.org/BreadcrumbList">
-	{{{each breadcrumbs}}}
-	<li<!-- IF @last --> component="breadcrumb/current"<!-- ENDIF @last --> itemscope="itemscope" itemprop="itemListElement" itemtype="http://schema.org/ListItem" class="breadcrumb-item <!-- IF @last -->active<!-- ENDIF @last -->">
+	{{{ each breadcrumbs }}}
+	<li{{{ if @last }}} component="breadcrumb/current"{{{ end }}} itemscope="itemscope" itemprop="itemListElement" itemtype="http://schema.org/ListItem" class="breadcrumb-item {{{ if @last }}}active{{{ end }}}">
 		<meta itemprop="position" content="{@index}" />
-		{{{ if ./url }}}<a href="{breadcrumbs.url}" itemprop="item">{{{ end }}}
-			<span class="fw-semibold" itemprop="name">{breadcrumbs.text}</span>
+		{{{ if ./url }}}<a href="{./url}" itemprop="item">{{{ end }}}
+			<span class="fw-semibold" itemprop="name">{./text}</span>
 		{{{ if ./url }}}</a>{{{ end }}}
 	</li>
-	{{{end}}}
+	{{{ end }}}
 </ol>
 {{{ end }}}

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

@@ -1,6 +1,6 @@
 <button type="button" class="btn-ghost-sm d-flex gap-2 align-items-baseline dropdown-toggle" data-bs-toggle="dropdown">
     {{{ if selectedCategory }}}
-    <span class="category-item">
+    <span class="category-item d-inline-flex align-items-center gap-1">
         {buildCategoryIcon(selectedCategory, "18px", "rounded-circle")}
         <span class="visible-md-inline visible-lg-inline fw-semibold">{selectedCategory.name}</span>
     </span>
@@ -19,7 +19,7 @@
     <li role="presentation" class="category {{{ if ../disabledClass }}}disabled{{{ end }}}" data-cid="{../cid}" data-parent-cid="{../parentCid}" data-name="{../name}">
         <a class="dropdown-item" role="menu-item" href="#">{../level}<i component="category/select/icon" class="fa fa-fw fa-check {{{ if !../selected }}}invisible{{{ end }}}"></i>
             <span component="category-markup" style="{{{ if ../match }}}font-weight: bold;{{{end}}}">
-                <div class="category-item d-inline-block">
+                <div class="category-item d-inline-flex align-items-center gap-1">
                     {{{ if ./icon }}}
                     {buildCategoryIcon(@value, "24px", "rounded-circle")}
                     {{{ end }}}

package/templates/partials/category/selector-dropdown-content.tpl

@@ -1,7 +1,7 @@
 <button type="button" class="btn-ghost-sm d-flex gap-2 align-items-baseline dropdown-toggle" data-bs-toggle="dropdown">
     <span component="category-selector-selected">
         {{{ if (selectedCategory && !showCategorySelectLabel) }}}
-        <span class="category-item">
+        <span class="category-item d-inline-flex align-items-center gap-1">
             {buildCategoryIcon(selectedCategory, "24px", "rounded-circle")}
             <span class="fw-semibold">{selectedCategory.name}</span>
         </span>
@@ -22,7 +22,7 @@
     <li role="presentation" class="category {{{ if ./disabledClass }}}disabled {{{ end }}}" data-cid="{./cid}" data-name="{./name}" data-parent-cid="{./parentCid}">
         <a class="dropdown-item" role="menu-item">{./level}
             <span component="category-markup" style="{{{ if ./match }}}font-weight: bold;{{{end}}}">
-                <div class="category-item d-inline-block">
+                <div class="category-item d-inline-flex align-items-center gap-1">
                     {{{ if ./icon }}}
                     {buildCategoryIcon(@value, "24px", "rounded-circle")}
                     {{{ end }}}

package/templates/partials/chats/message-window.tpl

@@ -26,6 +26,7 @@
 			<textarea component="chat/input" placeholder="[[modules:chat.placeholder]]" class="form-control chat-input mousetrap" rows="2" style="resize:none;"></textarea>
 			<span component="chat/message/remaining" class="text-muted position-absolute me-1 mb-1" style="right: 0px; bottom:0px;">{maximumChatMessageLength}</span>
 		</div>
+		<button component="chat/upload/button" class="btn btn-light" type="button"><i class="fa fa-fw fa-2x fa-upload"></i></button>
 		<button class="btn btn-primary" type="button" data-action="send"><i class="fa fa-fw fa-2x fa-paper-plane"></i></button>
 		<form component="chat/upload" method="post" enctype="multipart/form-data">
 			<input type="file" name="files[]" multiple class="hidden"/>

package/templates/partials/chats/message.tpl

@@ -18,19 +18,17 @@
 			{messages.content}
 		</div>
 
-		<!-- IF !config.disableChatMessageEditing -->
-		<!-- IF messages.self -->
+		{{{ if (!config.disableChatMessageEditing && ./self ) }}}
 		<div class="position-relative">
 			<div class="btn-group border shadow-sm controls position-absolute small hover-d-block" style="bottom:5px; right:30px; display:none;">
 				<button class="btn btn-sm btn-link" data-action="edit"><i class="fa fa-pencil"></i></button>
 				<button class="btn btn-sm btn-link" data-action="delete"><i class="fa fa-trash"></i></button>
 				<button class="btn btn-sm btn-link" data-action="restore"><i class="fa fa-repeat"></i></button>
-				<!-- IF isAdminOrGlobalMod -->
+				{{{ if isAdminOrGlobalMod }}}
 				<button class="btn btn-sm btn-link chat-ip" title="[[modules:chat.show-ip]]"><i class="fa fa-info-circle chat-ip-button"></i></button>
-				<!-- ENDIF isAdminOrGlobalMod -->
+				{{{ end }}}
 			</div>
 		</div>
-		<!-- ENDIF messages.self -->
-		<!-- ENDIF !config.disableChatMessageEditing -->
+		{{{ end }}}
 	</div>
 </li>

package/templates/partials/groups/admin.tpl

@@ -4,7 +4,7 @@
 			<div class="col-12 col-lg-6">
 				<div class="mb-3">
 					<label class="form-label" for="name">[[groups:details.group_name]]</label>
-					<input <!-- IF group.system -->readonly<!-- ENDIF group.system --> class="form-control" name="name" id="name" type="text" value="{group.displayName}" />
+					<input {{{ if group.system }}}readonly{{{ end }}} class="form-control" name="name" id="name" type="text" value="{group.displayName}" />
 				</div>
 				<div class="mb-3">
 					<label class="form-label" for="name">[[groups:details.description]]</label>
@@ -13,7 +13,7 @@
 
 				<div class="form-check">
 					<label class="form-check-label">[[groups:details.private]]</label>
-					<input class="form-check-input" name="private" type="checkbox"<!-- IF group.private --> checked<!-- ENDIF group.private -->>
+					<input class="form-check-input" name="private" type="checkbox"{{{ if group.private }}} checked{{{ end }}}>
 					{{{ if !allowPrivateGroups }}}
 					<p class="form-text">
 						[[groups:details.private_system_help]]
@@ -25,7 +25,7 @@
 				</div>
 				<div class="form-check">
 					<label class="form-check-label">[[groups:details.hidden]]</label>
-					<input class="form-check-input" name="hidden" type="checkbox"<!-- IF group.hidden --> checked<!-- ENDIF group.hidden -->>
+					<input class="form-check-input" name="hidden" type="checkbox"{{{ if group.hidden }}} checked{{{ end }}}>
 					<p class="form-text text-xs m-0">
 						[[groups:details.hidden_help]]
 					</p>

package/templates/partials/groups/memberlist.tpl

@@ -25,7 +25,7 @@
 			<div class="d-flex align-items-center justify-content-between">
 				<div class="d-flex align-items-center gap-2">
 					<a class="align-text-top" href="{config.relative_path}/user/{group.members.userslug}">{group.members.username}</a>
-					<i component="groups/owner/icon" title="[[groups:owner]]" class="user-owner-icon fa fa-star align-text-top text-warning <!-- IF !group.members.isOwner -->invisible<!-- ENDIF !group.members.isOwner -->"></i>
+					<i component="groups/owner/icon" title="[[groups:owner]]" class="user-owner-icon fa fa-star align-text-top text-warning {{{ if !group.members.isOwner }}}invisible{{{ end }}}"></i>
 				</div>
 
 				{{{ if group.isOwner }}}

package/templates/partials/mobile-footer.tpl

@@ -1,4 +1,4 @@
-<div class="d-flex flex-column d-md-none fixed-bottom ff-secondary  gap-1 align-items-center">
+<div class="d-flex flex-column d-md-none fixed-bottom ff-secondary gap-1 align-items-center">
 
 	<!-- IMPORT partials/topic/navigator-mobile.tpl -->
 
@@ -12,32 +12,32 @@
 			</a>
 			<ul class="navigation-dropdown dropdown-menu">
 				{{{ each navigation }}}
-				<!-- IF function.displayMenuItem, @index -->
+				{{{ if displayMenuItem(@root, @index) }}}
 				<li class="nav-item {./class}{{{ if ./dropdown }}} dropend{{{ end }}}" title="{./title}">
-					<a class="nav-link nav-btn navigation-link px-3 py-2 {{{ if navigation.dropdown }}}dropdown-toggle{{{ end }}}"
+					<a class="nav-link nav-btn navigation-link px-3 py-2 {{{ if ./dropdown }}}dropdown-toggle{{{ end }}}"
 					{{{ if ./dropdown }}} href="#" role="button" data-bs-toggle="collapse" data-bs-target="#collapse-target-{@index}" onclick="event.stopPropagation();" {{{ else }}} href="{./route}"{{{ end }}} {{{ if ./id }}}id="{./id}"{{{ end }}}{{{ if ./targetBlank }}} target="_blank"{{{ end }}}>
 						<span class="d-inline-flex justify-content-between align-items-center w-100">
 							<span class="text-nowrap truncate-open">
 								{{{ if ./iconClass }}}
 								<i class="fa fa-fw {./iconClass}" data-content="{./content}"></i>
 								{{{ end }}}
-								{{{ if navigation.text }}}
-								<span class="nav-text visible-open px-2 fw-semibold">{navigation.text}</span>
+								{{{ if ./text }}}
+								<span class="nav-text visible-open px-2 fw-semibold">{./text}</span>
 								{{{ end }}}
 							</span>
 							<span component="navigation/count" class="visible-open badge rounded-1 bg-primary {{{ if !./content }}}hidden{{{ end }}}">{./content}</span>
 						</span>
 					</a>
-					{{{ if navigation.dropdown }}}
+					{{{ if ./dropdown }}}
 					<div class="ps-3">
 						<ul id="collapse-target-{@index}" class="collapse list-unstyled ps-3">
-							{navigation.dropdownContent}
+							{./dropdownContent}
 						</ul>
 					</div>
 					{{{ end }}}
 				</li>
-				<!-- ENDIF function.displayMenuItem -->
-				{{{end}}}
+				{{{ end }}}
+				{{{ end }}}
 			</ul>
 		</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">
 	<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,20 +12,20 @@
 						<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 }}}

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

@@ -1,82 +1,82 @@
-<!-- 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;
@@ -90,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>
@@ -118,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>
@@ -129,4 +129,4 @@
 </li>
 {{{ end }}}
 {{{ end }}}
-<!-- ENDIF posts.display_moderator_tools -->
+{{{ end }}}

package/templates/partials/topic/post.tpl

@@ -33,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 }}}
@@ -53,12 +53,12 @@
 
 			<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">

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>
@@ -25,4 +25,4 @@
 	</form>
 
 </div>
-<!-- ENDIF privileges.topics:reply -->
+{{{ end }}}

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

@@ -1,8 +1,8 @@
 {{{ 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>
@@ -14,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<!-- 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.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.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 }}}

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

@@ -1,4 +1,4 @@
-<nav class="topic-list-header {{{ if config.stickyToolbar }}} sticky-tools{{{ end }}} navbar navbar-expand p-0 border-0 rounded">
+<nav class="topic-list-header {{{ if config.stickyToolbar }}} sticky-tools{{{ end }}} navbar navbar-expand p-0 border-0 rounded mb-3">
 	<div class="card card-header flex-row p-2 gap-1 border rounded ff-secondary w-100">
 		<ul class="navbar-nav me-auto gap-2 align-items-center">
 			{{{ if template.category }}}

package/templates/partials/topics_list.tpl

@@ -1,4 +1,4 @@
-<ul component="category" class="list-unstyled topic-list pt-4 overflow-auto position-relative" itemscope itemtype="http://www.schema.org/ItemList" data-nextstart="{nextStart}" data-set="{set}">
+<ul component="category" class="list-unstyled topic-list overflow-auto position-relative" itemscope itemtype="http://www.schema.org/ItemList" data-nextstart="{nextStart}" data-set="{set}">
 
 	{{{ each topics }}}
 	<li component="category/topic" class="category-item position-relative {function.generateTopicClass}" <!-- IMPORT partials/data/category.tpl -->>

package/templates/tags.tpl

@@ -23,7 +23,7 @@
 	</div>
 	{{{ end }}}
 	{{{ end }}}
-
+	<hr/>
 	{{{ if !tags.length }}}
 	<div class="alert alert-warning">[[tags:no_tags]]</div>
 	{{{ end }}}