nodebb-theme-harmony 3.0.0-beta.1 → 3.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nodebb-theme-harmony",
-  "version": "3.0.0-beta.1",
+  "version": "3.0.0",
   "nbbpm": {
     "compatibility": "^4.14.0"
   },
@@ -45,7 +45,7 @@
     "@fontsource/poppins": "5.2.7"
   },
   "devDependencies": {
-    "eslint": "10.4.1",
+    "eslint": "10.5.0",
     "eslint-config-nodebb": "^2.0.2"
   }
 }

package/public/harmony.js

@@ -141,7 +141,7 @@ $(document).ready(function () {
 	}
 
 	function setupDrafts() {
-		require(['composer/drafts', 'bootbox'], function (drafts, bootbox) {
+		require(['composer/drafts', 'modals', 'api'], function (drafts, modals, api) {
 			const draftsEl = $('[component="sidebar/drafts"]');
 			const bottomBarDraftsEl = $('[component="bottombar"] [component="sidebar/drafts"]');
 			function updateBadgeCount() {
@@ -159,17 +159,15 @@ $(document).ready(function () {
 					draftListEl.find('.draft-item-container').html('');
 					return;
 				}
-				draftItems.reverse().forEach((draft) => {
-					if (draft) {
-						if (draft.title) {
-							draft.title = utils.escapeHTML(String(draft.title));
-						}
-						draft.text = utils.escapeHTML(
-							draft.text
-						).replace(/(?:\r\n|\r|\n)/g, '<br>');
+				draftItems.reverse();
+				await Promise.all(draftItems.map(async (item) => {
+					const cid = String(item.cid);
+					if (item && item.action === 'topics.post' && cid !== '0') {
+						const categoryUrl = cid !== '-1' ?
+							`/api/category/${encodeURIComponent(cid)}` : `/api/world`;
+						item.category = await api.get(categoryUrl, {});
 					}
-				});
-
+				}));
 				const html = await app.parseAndTranslate('partials/sidebar/drafts', 'drafts', { drafts: draftItems });
 				draftListEl.find('.no-drafts').addClass('hidden');
 				draftListEl.find('.placeholder-wave').addClass('hidden');
@@ -185,7 +183,7 @@ $(document).ready(function () {
 
 			draftsEl.on('click', '[component="drafts/delete"]', function () {
 				const save_id = $(this).attr('data-save-id');
-				bootbox.confirm({
+				modals.confirm({
 					title: '[[modules:bootbox.confirm]]',
 					message: '[[modules:composer.discard-draft-confirm]]',
 					callback: function (ok) {

package/scss/harmony.scss

@@ -10,7 +10,6 @@
 @import "mobilebar";
 @import "status";
 @import "account";
-@import "groups";
 @import "world";
 @import "modals";
 
@@ -19,7 +18,6 @@
 @import "modules/user-menu";
 @import "modules/topic-navigator";
 @import "modules/topics-list";
-@import "modules/cover";
 @import "modules/nprogress";
 @import "modules/paginator";
 @import "modules/filters";

package/templates/account/categories.tpl

@@ -2,7 +2,7 @@
 
 <div class="d-flex justify-content-between align-items-center mb-3">
 	<div class="d-flex gap-1">
-		<h3 class="fw-semibold fs-5 mb-0">{title}</h3>
+		<h3 class="fw-semibold fs-5 mb-0">{tx(title)}</h3>
 	</div>
 
 	<div class="d-flex gap-1">

package/templates/account/consent.tpl

@@ -54,7 +54,8 @@
 
 				<hr />
 
-				<div class="btn-group-vertical d-grid">
+				{{{ if canExport }}}
+				<div class="d-grid gap-2">
 					<a data-action="export-profile" class="btn btn-outline-secondary">
 						<i class="fa fa-download"></i> [[user:consent.export-profile]]
 					</a>
@@ -65,6 +66,7 @@
 						<i class="fa fa-download"></i> [[user:consent.export-uploads]]
 					</a>
 				</div>
+				{{{ end }}}
 			</div>
 		</div>
 	</div>

package/templates/account/info.tpl

@@ -151,7 +151,7 @@
 							{{{ end }}}
 						</div>
 						<p class="mb-1">
-							<span class="reason">[[user:info.banned-reason-label]]: <strong>{./reason}</strong></span>
+							<span class="reason">[[user:info.banned-reason-label]]: <strong>{tx(./reason)}</strong></span>
 						</p>
 						<p>
 							{{{ if ./until }}}
@@ -205,7 +205,7 @@
 							{{{ end }}}
 						</div>
 						<p class="mb-1">
-							<span class="reason">[[user:info.banned-reason-label]]: <strong>{./reason}</strong></span>
+							<span class="reason">[[user:info.banned-reason-label]]: <strong>{tx(./reason)}</strong></span>
 						</p>
 						<p>
 							{{{ if ./until }}}

package/templates/account/posts.tpl

@@ -21,7 +21,7 @@
 </div>
 
 {{{ if !posts.length }}}
-<div class="alert alert-warning text-center">{noItemsFoundKey}</div>
+<div class="alert alert-warning text-center">{tx(noItemsFoundKey)}</div>
 {{{ end }}}
 
 <div>

package/templates/account/profile.tpl

@@ -10,7 +10,7 @@
 
 {{{ if aboutme }}}
 <div component="aboutme" class="text-sm text-break">
-{{aboutmeParsed}}
+{{txEscape(aboutmeParsed)}}
 </div>
 {{{ end }}}
 
@@ -76,7 +76,7 @@
 		{{{ if ./value }}}
 		<div class="stat">
 			<div class="align-items-center justify-content-center card card-header p-3 border-0 rounded-1 h-100 gap-2">
-				<span class="stat-label text-xs fw-semibold"><span><i class="text-muted {./icon}"></i> {./name}</span></span>
+				<span class="stat-label text-xs fw-semibold"><span><i class="text-muted {./icon}"></i> {tx(./name)}</span></span>
 				{{{ if (./type == "input-link") }}}
 				<a class="text-center text-break w-100 px-2 ff-secondary text-underline text-reset" href="{./value}" rel="nofollow noreferrer">{./linkValue}</a>
 				{{{ else }}}

package/templates/account/settings.tpl

@@ -10,7 +10,7 @@
 		<label for="bootswatchSkin" class="form-label fw-bold">[[user:select-skin]]</label>
 		<select class="form-select form-select-sm" id="bootswatchSkin" data-property="bootswatchSkin">
 			{{{each bootswatchSkinOptions}}}
-			<option value="{bootswatchSkinOptions.value}" {{{ if bootswatchSkinOptions.selected }}}selected{{{ end }}}>{bootswatchSkinOptions.name}</option>
+			<option value="{bootswatchSkinOptions.value}" {{{ if bootswatchSkinOptions.selected }}}selected{{{ end }}}>{tx(bootswatchSkinOptions.name)}</option>
 			{{{end}}}
 		</select>
 
@@ -177,7 +177,7 @@
 				<label class="form-label text-sm" for="dailyDigestFreq">[[user:digest-label]]</label>
 				<select class="form-select form-select-sm" id="dailyDigestFreq" data-property="dailyDigestFreq" autocomplete="off">
 					{{{each dailyDigestFreqOptions}}}
-					<option value="{./value}" {{{ if ./selected }}}selected="1"{{{ end }}}>{./name}</option>
+					<option value="{./value}" {{{ if ./selected }}}selected="1"{{{ end }}}>{tx(./name)}</option>
 					{{{end}}}
 				</select>
 				<p class="form-text text-xs">[[user:digest-description]]</p>
@@ -271,7 +271,7 @@
 					<tr component="notification/setting" class="align-middle">
 						<td style="width:100%;">
 							<div class="align-items-center">
-								<label class="text-sm tracking-tight" for="{./name}">{./label}</label>
+								<label class="text-sm tracking-tight" for="{./name}">{tx(./label)}</label>
 								<input type="hidden" data-property="{./name}" value="{./value}">
 							</div>
 						</td>

package/templates/account/shares.tpl

@@ -7,7 +7,7 @@
 </div>
 
 {{{ if !topics.length }}}
-<div class="alert alert-warning text-center">{noItemsFoundKey}</div>
+<div class="alert alert-warning text-center">{tx(noItemsFoundKey)}</div>
 {{{ end }}}
 
 <div class="category">

package/templates/account/tags.tpl

@@ -2,7 +2,7 @@
 
 <div class="d-flex justify-content-between align-items-center mb-3">
 	<div class="d-flex gap-1">
-		<h3 class="fw-semibold fs-5 mb-0">{title}</h3>
+		<h3 class="fw-semibold fs-5 mb-0">{tx(title)}</h3>
 	</div>
 </div>
 

package/templates/account/topics.tpl

@@ -32,7 +32,7 @@
 
 
 {{{ if !topics.length }}}
-<div class="alert alert-warning text-center">{noItemsFoundKey}</div>
+<div class="alert alert-warning text-center">{tx(noItemsFoundKey)}</div>
 {{{ end }}}
 
 <div class="category">

package/templates/account/uploads.tpl

@@ -1,6 +1,6 @@
 <!-- IMPORT partials/account/header.tpl -->
 
-<h3 class="fw-semibold fs-5">{title}</h3>
+<h3 class="fw-semibold fs-5">{tx(title)}</h3>
 
 <div class="alert alert-info text-center">
 	{{{ if privateUploads }}}[[uploads:private-uploads-info]]{{{ else }}}[[uploads:public-uploads-info]]{{{ end }}}

package/templates/category.tpl

@@ -18,7 +18,7 @@
 					<span class="text-lowercase fw-normal">[[global:posts]]</span>
 				</span>
 				{{{ if !isNumber(cid) }}}
-				<a href="{escape(./url)}" class="badge text-body border border-gray-300 text-xs" data-ajaxify="false">
+				<a href="{./url}" class="badge text-body border border-gray-300 text-xs" data-ajaxify="false">
 					<span class="fw-normal">View Original</span>
 					<i class="fa fa-external-link"></i>
 				</a>

package/templates/notifications.tpl

@@ -10,7 +10,7 @@
 				<hr/>
 				{{{ else }}}
 				<a class="btn btn-ghost d-flex gap-2 text-start align-items-baseline text-sm ff-secondary fw-semibold {{{ if ./selected }}}active{{{ end }}}" href="{config.relative_path}/notifications?filter={./filter}">
-					<div class="flex-grow-1">{filters.name}</div>
+					<div class="flex-grow-1">{tx(filters.name)}</div>
 					{{{ if ./filter }}}
 					<span class="flex-shrink-0 text-xs" title="{./count}">{humanReadableNumber(./count)}</span>
 					{{{ end }}}

package/templates/partials/account/header.tpl

@@ -1,5 +1,5 @@
 <div class="account w-100 mx-auto">
-	<div class="cover position-absolute start-0 top-0 w-100" component="account/cover" style="background-image: url({escape(cover:url)}); background-position: {cover:position};">
+	<div class="cover position-absolute start-0 top-0 w-100" component="account/cover" style="background-image: url({cover:url}); background-position: {cover:position};">
 		<div class="container">
 			{{{ if (allowCoverPicture && canEdit) }}}
 			<div class="controls text-center">

package/templates/partials/account/sidebar-left.tpl

@@ -119,7 +119,7 @@
 
 		{{{ each profile_links }}}
 		<a href="{config.relative_path}/user/{userslug}/{./route}" class="btn btn-ghost btn-sm ff-secondary text-xs text-start plugin-link {{{ if ./public }}}public{{{ else }}}private{{{ end }}} {{{ if (url == ./url) }}}active{{{ end }}}" id="{./id}">
-			<div class="flex-grow-1">{./name}</div>
+			<div class="flex-grow-1">{tx(./name)}</div>
 		</a>
 		{{{end}}}
 	</div>

package/templates/partials/categories/lastpost.tpl

@@ -8,7 +8,7 @@
 		</div>
 		<div class="post-content text-xs text-break line-clamp-sm-2 lh-sm position-relative flex-fill">
 			<a class="stretched-link" tabindex="-1" href="{config.relative_path}/topic/{./topic.slug}{{{ if ./index }}}/{./index}{{{ end }}}" aria-label="[[global:lastpost]]"></a>
-			{{./content}}
+			{{txEscape(./content)}}
 		</div>
 	</div>
 	{{{ end }}}

package/templates/partials/category/tags.tpl

@@ -1,3 +1,3 @@
 {{{ each tags }}}
-<a href="{config.relative_path}/tags/{./valueEncoded}"><span class="badge border border-gray-300 fw-normal tag tag-class-{./class}" data-tag="{./value}">{./valueEscaped}</span></a>
+<a href="{config.relative_path}/tags/{./valueEncoded}"><span class="badge border border-gray-300 fw-normal tag tag-class-{./class}" data-tag="{./value}">{./value}</span></a>
 {{{ end }}}

package/templates/partials/cookie-consent.tpl

@@ -1,6 +1,6 @@
 <div class="position-fixed bottom-0 w-100 px-3 px-md-0 pb-5 mb-5 pb-lg-0 mb-lg-0" style="z-index: 2;">
     <div class="cookie-consent d-flex flex-column flex-lg-row gap-2 text-bg-info col-12 col-sm-8 col-lg-6 p-3 mx-auto rounded mb-5 mb-md-3 justify-content-between align-items-center">
-        <span>{message} <a class="fw-bold" target="_blank" rel="noopener" href="{link_url}">{link}</a></span>
-        <button class="btn btn-primary text-nowrap">{dismiss}</button>
+        <span>{tx(message)} <a class="fw-bold" target="_blank" rel="noopener" href="{link_url}">{tx(link)}</a></span>
+        <button class="btn btn-primary text-nowrap">{tx(dismiss)}</button>
     </div>
 </div>

package/templates/partials/mobile-nav.tpl

@@ -10,14 +10,14 @@
 			<ul class="navigation-dropdown dropdown-menu" role="menu">
 				{{{ each navigation }}}
 				{{{ if displayMenuItem(@root, @index) }}}
-				<li class="nav-item {./class}{{{ if ./dropdown }}} dropend{{{ end }}}" title="{./title}">
+				<li class="nav-item {./class}{{{ if ./dropdown }}} dropend{{{ end }}}" title="{tx(./title)}">
 					<a class="nav-link 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">
 								{{{ if ./iconClass }}}
 								<i class="fa fa-fw {./iconClass}" data-content="{./content}"></i>
 								{{{ end }}}
-								{{{ if ./text }}}<span class="nav-text px-2 fw-semibold">{./text}</span>{{{ end }}}
+								{{{ if ./text }}}<span class="nav-text px-2 fw-semibold">{tx(./text)}</span>{{{ end }}}
 							</span>
 							<span component="navigation/count" class="badge rounded-1 bg-primary {{{ if !./content }}}hidden{{{ end }}}">{./content}</span>
 						</span>

package/templates/partials/notifications_list.tpl

@@ -23,11 +23,11 @@
 
 			<div class="d-flex flex-grow-1 flex-column gap-1 align-items-start position-relative">
 				<a href="{./path}" class="text-decoration-none d-inline-block text-reset text-break text-sm ff-sans stretched-link" component="notifications/item/link">
-					{./bodyShort}
+					{{./bodyShort}}
 				</a>
 				{{{ if ./bodyLong}}}
 				<div class="text-secondary text-sm line-clamp-2 text-contain hidden-blockquote hidden-pre hidden-first-child-br">
-					{./bodyLong}
+					{{./bodyLong}}
 				</div>
 				{{{ end }}}
 				<div class="text-xs text-muted">{{{ if ./timeagoLong }}}{./timeagoLong}{{{ else }}}<span class="timeago" title="{./datetimeISO}"></span>{{{ end }}}</div>

package/templates/partials/posts_list_item.tpl

@@ -14,14 +14,14 @@
         </div>
 
         <div component="post/content" class="content text-sm text-break">
-            {{./content}}
+            {{txEscape(./content)}}
         </div>
     </div>
     <div class="mb-3 d-flex flex-wrap gap-1 w-100">
         {{buildCategoryLabel(./category, "a", "border")}}
         <span data-tid="{./topic.tid}" component="topic/tags" class="lh-1 tag-list d-flex flex-wrap gap-1 {{{ if !./topic.tags.length }}}hidden{{{ end }}}">
             {{{ each ./topic.tags }}}
-            <a href="{config.relative_path}/tags/{./valueEncoded}"><span class="badge border border-gray-300 fw-normal tag tag-class-{./class}" data-tag="{./value}">{./valueEscaped}</span></a>
+            <a href="{config.relative_path}/tags/{./valueEncoded}"><span class="badge border border-gray-300 fw-normal tag tag-class-{./class}" data-tag="{./value}">{./value}</span></a>
             {{{ end }}}
         </span>
     </div>

package/templates/partials/search-filters.tpl

@@ -3,7 +3,7 @@
 	<div class="post-search-item">
 		<div component="category/filter" class="dropdown" data-filter-name="category">
 			<a component="category/filter/button" class="filter-btn btn btn-light btn-sm border {{{ if filters.categories.active }}}active-filter{{{ end }}} dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-haspopup="true" aria-expanded="false">
-				<span class="filter-label">{{{ if filters.categories.active }}}{filters.categories.label}{{{ else }}}[[search:categories]]{{{ end }}}</span>
+				<span class="filter-label">{{{ if filters.categories.active }}}{tx(filters.categories.label)}{{{ else }}}[[search:categories]]{{{ end }}}</span>
 				<span class="caret text-primary opacity-75"></span>
 			</a>
 
@@ -29,7 +29,7 @@
 	<div class="post-search-item">
 		<div component="tag/filter" class="dropdown" data-filter-name="tag">
 			<a component="tag/filter/button" class="filter-btn btn btn-light btn-sm border {{{ if filters.tags.active }}}active-filter{{{ end }}} dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-haspopup="true" aria-expanded="false">
-				<span class="filter-label">{{{ if filters.tags.active }}}{filters.tags.label}{{{ else }}}[[search:tags]]{{{ end }}}</span>
+				<span class="filter-label">{{{ if filters.tags.active }}}{{tx(filters.tags.label)}}{{{ else }}}[[search:tags]]{{{ end }}}</span>
 				<span class="caret text-primary opacity-75"></span>
 			</a>
 
@@ -39,15 +39,15 @@
 					<div component="tag/filter/selected" class="d-flex flex-wrap gap-2">
 						{{{ each tagFilterSelected }}}
 						<div class="d-flex px-2 py-1 rounded-1 text-bg-primary gap-2 align-items-center text-sm">
-							<div>{./valueEscaped}</div>
-							<button component="tag/filter/delete" data-tag="{./valueEscaped}" class="btn btn-primary btn-sm py-0"><i class="fa fa-times fa-xs"></i></button>
+							<div>{./value}</div>
+							<button component="tag/filter/delete" data-tag="{./value}" class="btn btn-primary btn-sm py-0"><i class="fa fa-times fa-xs"></i></button>
 						</div>
 						{{{ end }}}
 					</div>
 					<hr class="my-2"/>
 					<div component="tag/filter/results" class="d-flex flex-wrap gap-2">
 						{{{ each tagFilterResults }}}
-						<button class="btn btn-light btn-sm border" data-tag="{./valueEscaped}">{./valueEscaped}</button>
+						<button class="btn btn-light btn-sm border" data-tag="{./value}">{./value}</button>
 						{{{ end }}}
 					</div>
 				</li>
@@ -59,7 +59,7 @@
 	<div class="post-search-item">
 		<div component="user/filter" class="dropdown" data-filter-name="user">
 			<a component="user/filter/button" class="filter-btn btn btn-light btn-sm border {{{ if filters.users.active }}}active-filter{{{ end }}} dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-haspopup="true" aria-expanded="false">
-				<span class="filter-label">{{{ if filters.users.active }}}{filters.users.label}{{{ else }}}[[search:posted-by]]{{{ end }}}</span>
+				<span class="filter-label">{{{ if filters.users.active }}}{{tx(filters.users.label)}}{{{ else }}}[[search:posted-by]]{{{ end }}}</span>
 				<span class="caret text-primary opacity-75"></span>
 			</a>
 
@@ -90,7 +90,7 @@
 	<div class="post-search-item">
 		<div class="dropdown" data-filter-name="replies">
 			<a id="reply-count-button" class="filter-btn btn btn-light btn-sm border {{{ if filters.replies.active }}}active-filter{{{ end }}} dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-				<span class="filter-label">{{{ if filters.replies.active }}}{filters.replies.label}{{{ else }}}[[search:replies]]{{{ end }}}</span>
+				<span class="filter-label">{{{ if filters.replies.active }}}{tx(filters.replies.label)}{{{ else }}}[[search:replies]]{{{ end }}}</span>
 				<span class="caret text-primary opacity-75"></span>
 			</a>
 
@@ -110,7 +110,7 @@
 	<div class="post-search-item">
 		<div class="dropdown" data-filter-name="time">
 			<a id="post-time-button" class="filter-btn btn btn-light btn-sm border {{{ if filters.time.active }}}active-filter{{{ end }}} dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-				<span class="filter-label">{{{ if filters.time.active }}}{filters.time.label}{{{ else }}}[[search:time]]{{{ end }}}</span>
+				<span class="filter-label">{{{ if filters.time.active }}}{tx(filters.time.label)}{{{ else }}}[[search:time]]{{{ end }}}</span>
 				<span class="caret text-primary opacity-75"></span>
 			</a>
 
@@ -139,7 +139,7 @@
 	<div class="post-search-item">
 		<div class="dropdown" data-filter-name="sort">
 			<a id="sort-by-button" class="filter-btn btn btn-light btn-sm border {{{ if filters.sort.active }}}active-filter{{{ end }}} dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-				<span class="filter-label">{{{ if filters.sort.active }}}{filters.sort.label}{{{ else }}}[[search:sort]]{{{ end }}}</span>
+				<span class="filter-label">{{{ if filters.sort.active }}}{tx(filters.sort.label)}{{{ else }}}[[search:sort]]{{{ end }}}</span>
 				<span class="caret text-primary opacity-75"></span>
 			</a>
 

package/templates/partials/search-results.tpl

@@ -1,6 +1,5 @@
 {{{ if matchCount }}}
-<div class="card card-header text-xs px-2 py-1 fw-semibold border-0 align-self-start">[[search:results-matching, {matchCount}, {txEscape(search_query)}, {time}]]
-</div>
+<div class="card card-header text-xs px-2 py-1 fw-semibold border-0 align-self-start">{{tx("search:results-matching", matchCount, txEscape(search_query), time)}}</div>
 {{{ else }}}
 {{{ if search_query }}}
 <div class="badge text-bg-warning align-self-start">[[search:no-matches]]</div>
@@ -25,7 +24,7 @@
 			<div class="d-flex gap-3 post-info">
 				<div class="post-author d-flex gap-1">
 					<a class="lh-1 text-decoration-none" href="{config.relative_path}/user/{./user.userslug}">{{buildAvatar(./user, "16px", true, "not-responsive")}}</a>
-					<a class="fw-semibold text-sm" href="{config.relative_path}/user/{./user.userslug}">{../user.displayname}</a>
+					<a class="fw-semibold text-sm" href="{config.relative_path}/user/{./user.userslug}">{./user.displayname}</a>
 				</div>
 				<span class="timeago text-sm text-muted" title="{./timestampISO}"></span>
 			</div>

package/templates/partials/sidebar/drafts.tpl

@@ -35,17 +35,22 @@
 							{{{ end }}}
 
 							{{{ if (./action == "posts.reply") }}}
-							<div class="text text-xs fw-semibold line-clamp-2 text-break">[[topic:composer.replying-to, "{txEscape(./title)}"]]</div>
+							<div class="text text-xs fw-semibold line-clamp-2 text-break">{{tx("topic:composer.replying-to", txEscape(quote(./title)))}}</div>
 							{{{ end }}}
 
 							{{{ if (./action == "posts.edit") }}}
-							<div class="text text-xs fw-semibold line-clamp-2">[[topic:composer.editing-in, "{txEscape(./title)}"]]</div>
+							<div class="text text-xs fw-semibold line-clamp-2">{{tx("topic:composer.editing-in", txEscape(quote(./title)))}}</div>
 							{{{ end }}}
 
 							{{{ if ./text }}}
 							<div class="text text-sm line-clamp-3 text-break">{./text}</div>
 							{{{ end }}}
-							<div class="timeago text-xs text-muted" title="{./timestampISO}"></div>
+							<div class="d-flex align-items-baseline gap-2">
+								{{{ if (./action == "topics.post") }}}
+								{{buildCategoryLabel(./category, "span", "border")}}
+								{{{ end }}}
+								<div class="timeago text-xs text-muted" title="{./timestampISO}"></div>
+							</div>
 						</a>
 						<div>
 							<button component="drafts/delete" data-save-id="{./save_id}" class="btn btn-light btn-sm">

package/templates/partials/skin-switcher.tpl

@@ -37,12 +37,12 @@
 		<div class="d-grid" style="grid-template-columns: 1fr 1fr;">
 			{{{ each bootswatchSkinOptions.default }}}
 			<li>
-				<a href="#" class="dropdown-item rounded-1" data-value="{./value}" role="menuitem">{./name} <i class="fa fa-fw fa-check {{{ if !./selected }}} invisible {{{ end }}}"></i></a>
+				<a href="#" class="dropdown-item rounded-1" data-value="{./value}" role="menuitem">{tx(./name)} <i class="fa fa-fw fa-check {{{ if !./selected }}} invisible {{{ end }}}"></i></a>
 			</li>
 			{{{ end }}}
 			{{{ each bootswatchSkinOptions.custom }}}
 			<li>
-				<a href="#" class="dropdown-item rounded-1" data-value="{./value}" role="menuitem">{./name} <i class="fa fa-fw fa-check {{{ if !./selected }}} invisible {{{ end }}}"></i></a>
+				<a href="#" class="dropdown-item rounded-1" data-value="{./value}" role="menuitem">{tx(./name)} <i class="fa fa-fw fa-check {{{ if !./selected }}} invisible {{{ end }}}"></i></a>
 			</li>
 			{{{ end }}}
 		</div>

package/templates/partials/tags_list.tpl

@@ -1,8 +1,8 @@
 {{{each tags}}}
 <div>
-	<a href="{config.relative_path}/tags/{./valueEncoded}" data-tag="{./valueEscaped}" class="btn btn-ghost ff-base d-flex flex-column gap-1 align-items-start justify-content-start text-truncate p-2">
-		<div class="fw-semibold text-nowrap tag-item w-100 text-start text-truncate">{./valueEscaped}</div>
-		<div class="text-xs text-muted text-nowrap tag-topic-count">[[global:x-topics, {txEscape(formattedNumber(./score))}]]</div>
+	<a href="{config.relative_path}/tags/{./valueEncoded}" data-tag="{./value}" class="btn btn-ghost ff-base d-flex flex-column gap-1 align-items-start justify-content-start text-truncate p-2">
+		<div class="fw-semibold text-nowrap tag-item w-100 text-start text-truncate">{./value}</div>
+		<div class="text-xs text-muted text-nowrap tag-topic-count">{tx("global:x-topics", formattedNumber(./score))}</div>
 	</a>
 </div>
 {{{end}}}

package/templates/partials/topic/icon.tpl

@@ -0,0 +1,4 @@
+<span class="badge border {./classes}">
+	{{{ if ./icon }}}<i class="fa {./icon}"></i>{{{ end }}}
+	{{{ if ./label }}}<span> {tx(./label)}</span>{{{ end }}}
+</span>

package/templates/partials/topic/post.tpl

@@ -17,7 +17,7 @@
 			{{{ else }}}
 			<span component="user/locality" class="position-absolute top-100 start-100 lh-1 border border-white border-2 rounded-circle small" title="[[global:remote-user]]">
 				<span class="visually-hidden">[[global:remote-user]]</span>
-				<i class="fa fa-globe"></i>
+				<i class="fa fa-globe fa-width-auto"></i>
 			</span>
 			{{{ end }}}
 		</a>
@@ -37,7 +37,7 @@
 							{{{ else }}}
 							<span component="user/locality" class="position-absolute top-100 start-100 lh-1 border border-white border-2 rounded-circle small" title="[[global:remote-user]]">
 								<span class="visually-hidden">[[global:remote-user]]</span>
-								<i class="fa fa-globe"></i>
+								<i class="fa fa-globe fa-width-auto"></i>
 							</span>
 							{{{ end }}}
 						</a>
@@ -64,13 +64,10 @@
 				</div>
 
 				{{{ if posts.user.custom_profile_info.length }}}
-				<div>
-					<span>
-
-						{{{ each posts.user.custom_profile_info }}}
-						{{posts.user.custom_profile_info.content}}
-						{{{ end }}}
-					</span>
+				<div class="d-flex gap-1 align-items-center">
+					{{{ each posts.user.custom_profile_info }}}
+					{{posts.user.custom_profile_info.content}}
+					{{{ end }}}
 				</div>
 				{{{ end }}}
 			</div>
@@ -81,12 +78,12 @@
 		</div>
 
 		<div class="content text-break" component="post/content" itemprop="text">
-			{{posts.content}}
+			{{txEscape(posts.content)}}
 		</div>
 
 		<div component="post/footer" class="post-footer border-bottom pb-2">
 			{{{ if posts.user.signature }}}
-			<div component="post/signature" data-uid="{posts.user.uid}" class="text-xs text-muted mt-2">{{posts.user.signature}}</div>
+			<div component="post/signature" data-uid="{posts.user.uid}" class="text-xs text-muted mt-2">{{txEscape(posts.user.signature)}}</div>
 			{{{ end }}}
 
 			<div class="d-flex flex-wrap-reverse gap-2 {{{ if (hideReplies || !posts.replies.count) }}}justify-content-end{{{ else }}}justify-content-between{{{ end }}}">
@@ -101,7 +98,7 @@
 						{{{ end }}}
 					</span>
 
-					<span class="ms-2 replies-count fw-semibold text-nowrap" component="post/reply-count/text" data-replies="{posts.replies.count}">{posts.replies.text}</span>
+					<span class="ms-2 replies-count fw-semibold text-nowrap" component="post/reply-count/text" data-replies="{posts.replies.count}">{tx(posts.replies.text)}</span>
 					<span class="ms-2 replies-last hidden-xs fw-semibold">[[topic:last-reply-time]] <span class="timeago" title="{posts.replies.timestampISO}"></span></span>
 
 					<i class="fa fa-fw fa-chevron-down" component="post/replies/open"></i>

package/templates/partials/topic/tag.tpl

@@ -1 +1 @@
-<a href="{config.relative_path}/tags/{./valueEncoded}"><span class="badge border border-gray-300 text-xs tag tag-class-{./class}" data-tag="{./value}">{./valueEscaped}</span></a>
+<a href="{config.relative_path}/tags/{./valueEncoded}"><span class="badge border border-gray-300 text-xs tag tag-class-{./class}" data-tag="{./value}">{./value}</span></a>

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

@@ -54,7 +54,7 @@
 
 				<!-- IMPORT partials/category/tools-dropdown-left.tpl -->
 
-				<a href="{{{ if (template.category || template.world) }}}{escape(url)}{{{ else }}}{config.relative_path}/{selectedFilter.url}{querystring}{{{ end }}}" class="btn btn-secondary fw-semibold position-absolute top-100 translate-middle-x start-50 mt-1 hide" style="--bs-btn-padding-y: .25rem; --bs-btn-padding-x: .5rem; --bs-btn-font-size: .75rem;" id="new-topics-alert">
+				<a href="{{{ if (template.category || template.world) }}}{url}{{{ else }}}{config.relative_path}/{selectedFilter.url}{querystring}{{{ end }}}" class="btn btn-secondary fw-semibold position-absolute top-100 translate-middle-x start-50 mt-1 hide" style="--bs-btn-padding-y: .25rem; --bs-btn-padding-x: .5rem; --bs-btn-font-size: .75rem;" id="new-topics-alert">
 					<i class="fa fa-fw fa-arrow-up"></i> [[recent:load-new-posts]]
 				</a>
 			</div>

package/templates/partials/topics_list.tpl

@@ -3,7 +3,7 @@
 	{{{ each topics }}}
 	<li component="category/topic" class="category-item hover-parent border-bottom py-3 py-lg-4 d-flex flex-column flex-lg-row align-items-start {generateTopicClass(@value)}" <!-- IMPORT partials/data/category.tpl -->>
 		<link itemprop="url" content="{config.relative_path}/topic/{./slug}" />
-		<meta itemprop="name" content="{{generateTopicTitle(@value)}}" />
+		<meta itemprop="name" content="{./title}" />
 		<meta itemprop="itemListOrder" content="descending" />
 		<meta itemprop="position" content="{increment(./index, "1")}" />
 		<a id="{./index}" data-index="{./index}" component="topic/anchor"></a>
@@ -21,7 +21,7 @@
 			</div>
 			<div class="flex-grow-1 d-flex flex-wrap gap-1 position-relative">
 				<h3 component="topic/header" class="title text-break text-wrap-pretty fs-5 fw-semibold m-0 tracking-tight w-100 {{{ if showSelect }}}me-4 me-lg-0{{{ end }}}">
-					<a class="text-reset" href="{{{ if topics.noAnchor }}}#{{{ else }}}{config.relative_path}/topic/{./slug}{{{ if ./bookmark }}}/{./bookmark}{{{ end }}}{{{ end }}}">{{generateTopicTitle(@value)}}</a>
+					<a class="text-reset" href="{{{ if topics.noAnchor }}}#{{{ else }}}{config.relative_path}/topic/{./slug}{{{ if ./bookmark }}}/{./bookmark}{{{ end }}}{{{ end }}}">{./title}</a>
 				</h3>
 				<span component="topic/labels" class="d-flex flex-wrap gap-1 w-100">
 					<span component="topic/watched" class="badge border border-gray-300 text-body {{{ if !./followed }}}hidden{{{ end }}}">
@@ -48,7 +48,7 @@
 						<i class="fa fa-arrow-circle-right"></i>
 						<span>[[topic:moved]]</span>
 					</span>
-					{{{each ./icons}}}<span class="lh-1">{@value}</span>{{{end}}}
+					{{{ each ./icons }}}<!-- IMPORT partials/topic/icon.tpl -->{{{ end }}}
 
 					{{{ if (!template.category || (cid != ./cid)) }}}
 					{{buildCategoryLabel(./category, "a", "border")}}
@@ -56,7 +56,7 @@
 
 					<span data-tid="{./tid}" component="topic/tags" class="lh-1 tag-list d-flex flex-wrap gap-1 {{{ if !./tags.length }}}hidden{{{ end }}}">
 						{{{ each ./tags }}}
-						<a href="{config.relative_path}/tags/{./valueEncoded}"><span class="badge border border-gray-300 fw-normal tag tag-class-{./class}" data-tag="{./value}">{./valueEscaped}</span></a>
+						<a href="{config.relative_path}/tags/{./valueEncoded}"><span class="badge border border-gray-300 fw-normal tag tag-class-{./class}" data-tag="{./value}">{./value}</span></a>
 						{{{ end }}}
 					</span>
 
@@ -119,7 +119,7 @@
 					</div>
 					<div class="post-content text-xs ps-2 line-clamp-sm-2 lh-sm text-break position-relative flex-fill">
 						<a class="stretched-link" tabindex="-1" href="{config.relative_path}/topic/{./slug}/{./teaser.index}" aria-label="[[global:lastpost]]"></a>
-						{{./teaser.content}}
+						{{txEscape(./teaser.content)}}
 					</div>
 					{{{ end }}}
 					{{{ end }}}