nodebb-theme-persona 14.2.42 → 15.0.0-beta.2

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "nodebb-theme-persona",
-  "version": "14.2.42",
+  "version": "15.0.0-beta.2",
   "nbbpm": {
-    "compatibility": "^4.13.0"
+    "compatibility": "^4.14.0"
   },
   "description": "Persona theme for NodeBB",
   "main": "library.js",

package/scss/account.scss

@@ -15,136 +15,6 @@
 		margin-right: auto;
 	}
 
-	.cover {
-		background-size: cover;
-		background-repeat: no-repeat;
-		height: 200px;
-		position: relative;
-		margin-bottom: 1em;
-		background-origin: content-box;
-		width: 100%;
-		top: var(--panel-offset);
-		position: absolute;
-		left: auto;
-		right: 0px;
-
-		.avatar-wrapper {
-			position: absolute;
-			left: 50%;
-			margin-left: -64px;
-			top: 128px;
-			border: 4px solid var(--bs-body-bg);
-			background-color: var(--bs-body-bg);
-			border-radius: 50%;
-
-			.persona-fab.btn-morph {
-				top: 93px;
-				right: 4px;
-				position: absolute;
-			}
-
-			.status {
-				position: absolute;
-				font-size: 23px;
-				top: 17px;
-				right: -3px;
-				padding: 10px;
-			}
-
-			.chat, .follow {
-				position: absolute;
-				width: 30px;
-				height: 30px;
-			}
-
-			.chat {
-				left: -1px;
-				bottom: 1px;
-			}
-
-			.follow {
-				right: 1px;
-				bottom: 1px;
-			}
-		}
-
-		&:hover .controls, .controls:focus-within {
-			opacity: 0.8;
-		}
-
-		.controls {
-			text-align: center;
-			height: 200px;
-			line-height: 200px;
-			opacity: 0;
-			@include transition(opacity .15s linear);
-			cursor: pointer;
-			pointer-events: none;
-
-			> * {
-				pointer-events: all;
-			}
-
-			.fa {
-				color: white;
-				background-color: #333;
-				opacity: 1;
-				margin: 15px;
-				padding: 5px;
-			}
-		}
-
-		&.active {
-			&:hover {
-				cursor: move;
-			}
-
-			.controls {
-				> * {
-					display: none;
-				}
-			}
-
-			.save {
-				display: inline-block;
-			}
-		}
-
-		&.saving {
-			.save {
-				display: none;
-			}
-
-			.indicator {
-				display: inline-block;
-			}
-		}
-
-		.save, .indicator {
-			display: inline-block;
-			position: absolute;
-			top: 1em;
-			right: 2em;
-			opacity: 1;
-			background-color: $primary;
-			color: $gray-200;
-			padding: 0.5em;
-			font-weight: bold;
-
-			&:hover {
-				cursor: pointer;
-			}
-		}
-
-		.save {
-			display: none;
-		}
-
-		.indicator {
-			display: none;
-		}
-	}
-
 	margin-top: 200px;
 
 	.container {
@@ -272,12 +142,3 @@
 	}
 }
 
-.user-picture-label {
-	font-size:20px;
-}
-
-
-.account-username{
-  font-size:20px;
-  font-weight:bold;
-}

package/scss/persona.scss

@@ -9,7 +9,6 @@
 @import "header";
 @import "status";
 @import "account";
-@import "groups";
 @import "chats";
 @import "search";
 @import "topics_list";

package/templates/account/blocks.tpl

@@ -16,7 +16,7 @@
 				<li component="blocks/search/match">
 					<div class="dropdown-item rounded-1 d-flex flex-nowrap gap-2 justify-content-between align-items-center" role="menuitem">
 						<div class="text-truncate">
-							<a href="{config.relative_path}/uid/{../uid}">{buildAvatar(edit, "24px", true)} {../username}</a>
+							<a href="{config.relative_path}/uid/{../uid}">{{buildAvatar(edit, "24px", true)}} {../username}</a>
 						</div>
 
 						<button class="btn btn-sm btn-outline-danger text-nowrap {{{ if ./isBlocked }}}hidden{{{ end }}}" data-uid="{./uid}" data-action="block">[[user:block-user]]</button>

package/templates/account/categories.tpl

@@ -2,7 +2,7 @@
 
 <div>
 	<div class="d-flex justify-content-between align-items-center mb-3">
-		<h1 class="fs-4">{title}</h1>
+		<h1 class="fs-4">{tx(title)}</h1>
 		<div class="mb-2">
 			<div class="dropdown bottom-sheet" component="category/watch/all">
 				<button class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" type="button" aria-haspopup="true" aria-expanded="false">

package/templates/account/consent.tpl

@@ -51,6 +51,7 @@
 				<p><strong>[[user:consent.right-to-data-portability]]</strong></p>
 				<p>[[user:consent.right-to-data-portability-description]]</p>
 
+				{{{ if canExport }}}
 				<div class="btn-group-vertical d-grid">
 					<a data-action="export-profile" class="btn btn-outline-secondary">
 						<i class="fa fa-download"></i> [[user:consent.export-profile]]
@@ -62,6 +63,7 @@
 						<i class="fa fa-download"></i> [[user:consent.export-uploads]]
 					</a>
 				</div>
+				{{{ end }}}
 			</div>
 		</div>
 </div>

package/templates/account/info.tpl

@@ -15,7 +15,7 @@
 		<div class="mb-4 pb-3 border-bottom">
 			<h6>[[user:info.invited-by]]</h6>
 			<div class="d-flex align-items-center gap-2">
-				<a href="">{buildAvatar(invitedBy, "24px", true)}</a>
+				<a href="">{{buildAvatar(invitedBy, "24px", true)}}</a>
 				<a href="">{invitedBy.username}</a>
 			</div>
 		</div>
@@ -43,7 +43,7 @@
 						<div>
 							{{{ if ./byUid }}}
 							<a class="lh-1" href="{{{ if ./byUser.userslug }}}{config.relative_path}/user/{./byUser.userslug}{{{ else }}}#{{{ end }}}">
-							{buildAvatar(./byUser, "18px", true)}</a>
+							{{buildAvatar(./byUser, "18px", true)}}</a>
 							{{{ end }}}
 							<span class="timeago text-sm text-secondary lh-1 align-middle" title="{./timestampISO}"></span>
 						</div>
@@ -63,7 +63,7 @@
 						<div>
 							{{{ if ./byUid }}}
 							<a class="lh-1" href="{{{ if ./byUser.userslug }}}{config.relative_path}/user/{./byUser.userslug}{{{ else }}}#{{{ end }}}">
-							{buildAvatar(./byUser, "18px", true)}</a>
+							{{buildAvatar(./byUser, "18px", true)}}</a>
 							{{{ end }}}
 							<span class="timeago text-sm text-secondary lh-1 align-middle" title="{./timestampISO}"></span>
 						</div>
@@ -107,7 +107,7 @@
 							<span class="text-sm">[[user:info.reported-by]]</span>
 							<div class="d-flex text-nowrap">
 								{{{ each ./reports }}}
-								<a style="width: 18px; z-index: 3;" class="text-decoration-none" href="{config.relative_path}/user/{./reporter.userslug}">{buildAvatar(./reporter, "24px", true)}</a>
+								<a style="width: 18px; z-index: 3;" class="text-decoration-none" href="{config.relative_path}/user/{./reporter.userslug}">{{buildAvatar(./reporter, "24px", true)}}</a>
 								{{{ end }}}
 							</div>
 						</div>
@@ -138,7 +138,7 @@
 					<li class="mb-4 border-bottom">
 						<div class="mb-1 d-flex align-items-center justify-content-between">
 							<div>
-								<a href="{config.relative_path}/user/{./user.userslug}">{buildAvatar(./user, "24px", true)}</a>
+								<a href="{config.relative_path}/user/{./user.userslug}">{{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>
@@ -192,7 +192,7 @@
 					<li class="mb-4 border-bottom">
 						<div class="mb-1 d-flex align-items-center justify-content-between">
 							<div>
-								<a href="{config.relative_path}/user/{./user.userslug}">{buildAvatar(./user, "24px", true)}</a>
+								<a href="{config.relative_path}/user/{./user.userslug}">{{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>
@@ -240,7 +240,7 @@
 
 					<div data-id="{./id}">
 						<div class="d-flex align-items-baseline gap-1 mb-1">
-							<a href="{{{ if ./user.userslug }}}{config.relative_path}/user/{./user.userslug}{{{ else }}}#{{{ end }}}">{buildAvatar(./user, "24px", true)}</a>
+							<a href="{{{ if ./user.userslug }}}{config.relative_path}/user/{./user.userslug}{{{ else }}}#{{{ end }}}">{{buildAvatar(./user, "24px", true)}}</a>
 
 							<a href="{{{ if ./user.userslug }}}{config.relative_path}/user/{./user.userslug}{{{ else }}}#{{{ end }}}" class="fw-bold" itemprop="author" data-username="{./user.username}" data-uid="{./user.uid}">{./user.username}</a>
 

package/templates/account/profile.tpl

@@ -36,7 +36,7 @@
 	{{{ end }}}
 
 	<!-- IF aboutme -->
-	<div component="aboutme" class="text-center aboutme text-secondary w-75 mx-auto text-center">{aboutmeParsed}</div>
+	<div component="aboutme" class="text-center aboutme text-secondary w-75 mx-auto text-center">{{txEscape(aboutmeParsed)}}</div>
 	<!-- ENDIF aboutme -->
 
 	<div class="account-stats fs-1 text-center mb-3">
@@ -156,28 +156,74 @@
 <!-- ENDIF ips.length -->
 
 <div class="row">
-	{{{ if bestPosts.length }}}
-	<div class="col-lg-12 col-12">
-		<h1 class="fs-3">[[pages:account/best, {username}]]</h1>
-
-		<div class="col-12">
-			<ul component="posts" class="posts-list list-unstyled">
-			{{{each bestPosts}}}
-			<!-- IMPORT partials/posts_list_item.tpl -->
-			{{{end}}}
-			</ul>
-		</div>
-	</div>
-	{{{ end }}}
-	{{{ if latestPosts.length}}}
-	<div class="col-lg-12 col-12">
-		<h1 class="fs-3">[[pages:account/latest-posts, {username}]]</h1>
-		<div class="col-12">
-			<ul component="posts" class="posts-list list-unstyled">
-			{{{each latestPosts}}}
-			<!-- IMPORT partials/posts_list_item.tpl -->
-			{{{end}}}
-			</ul>
+	{{{ if (bestPosts.length || latestPosts.length) }}}
+	<div class="col-12">
+		<ul class="nav nav-tabs mb-3" role="tablist">
+			{{{ if bestPosts.length }}}
+			<li class="nav-item" role="presentation">
+				<button
+					class="nav-link active"
+					id="best-posts-tab"
+					data-bs-toggle="tab"
+					data-bs-target="#best-posts-pane"
+					type="button"
+					role="tab"
+					aria-controls="best-posts-pane"
+					aria-selected="true"
+				>
+					[[pages:account/best, {username}]]
+				</button>
+			</li>
+			{{{ end }}}
+			{{{ if latestPosts.length }}}
+			<li class="nav-item" role="presentation">
+				<button
+					class="nav-link {{{ if !bestPosts.length }}}active{{{ end }}}"
+					id="latest-posts-tab"
+					data-bs-toggle="tab"
+					data-bs-target="#latest-posts-pane"
+					type="button"
+					role="tab"
+					aria-controls="latest-posts-pane"
+					aria-selected="{{{ if !bestPosts.length }}}true{{{ else }}}false{{{ end }}}"
+				>
+					[[pages:account/latest-posts, {username}]]
+				</button>
+			</li>
+			{{{ end }}}
+		</ul>
+
+		<div class="tab-content">
+			{{{ if bestPosts.length }}}
+			<div
+				class="tab-pane fade show active"
+				id="best-posts-pane"
+				role="tabpanel"
+				aria-labelledby="best-posts-tab"
+				tabindex="0"
+			>
+				<ul component="posts" class="posts-list list-unstyled">
+				{{{each bestPosts}}}
+				<!-- IMPORT partials/posts_list_item.tpl -->
+				{{{end}}}
+				</ul>
+			</div>
+			{{{ end }}}
+			{{{ if latestPosts.length }}}
+			<div
+				class="tab-pane fade {{{ if !bestPosts.length }}}show active{{{ end }}}"
+				id="latest-posts-pane"
+				role="tabpanel"
+				aria-labelledby="latest-posts-tab"
+				tabindex="0"
+			>
+				<ul component="posts" class="posts-list list-unstyled">
+				{{{each latestPosts}}}
+				<!-- IMPORT partials/posts_list_item.tpl -->
+				{{{end}}}
+				</ul>
+			</div>
+			{{{ end }}}
 		</div>
 	</div>
 	{{{ end }}}

package/templates/account/settings.tpl

@@ -8,7 +8,7 @@
 			<div class="card card-body mb-3">
 				<select class="form-select" id="bootswatchSkin" data-property="bootswatchSkin">
 					{{{each bootswatchSkinOptions}}}
-					<option value="{bootswatchSkinOptions.value}" <!-- IF bootswatchSkinOptions.selected -->selected<!-- ENDIF bootswatchSkinOptions.selected -->>{bootswatchSkinOptions.name}</option>
+					<option value="{bootswatchSkinOptions.value}" {{{ if bootswatchSkinOptions.selected }}}selected{{{ end }}}>{tx(bootswatchSkinOptions.name)}</option>
 					{{{end}}}
 				</select>
 			</div>
@@ -61,7 +61,7 @@
 					<div component="chat/allow/list" class="d-flex flex-wrap gap-2 mb-2">
 						{{{ each settings.chatAllowListUsers }}}
 						<div component="chat/allow/list/user" data-uid="{./uid}" class="d-flex px-2 py-1 rounded-1 text-bg-light gap-2 align-items-center text-sm">
-							{buildAvatar(@value, "16px", true)} {./username}
+							{{buildAvatar(@value, "16px", true)}} {./username}
 							<button component="chat/allow/delete" data-uid="{./uid}" class="btn btn-light btn-sm py-0"><i class="fa fa-times fa-xs text-danger"></i></button>
 						</div>
 						{{{ end }}}
@@ -76,7 +76,7 @@
 					<div component="chat/deny/list" class="d-flex flex-wrap gap-2 mb-2">
 						{{{ each settings.chatDenyListUsers }}}
 						<div component="chat/deny/list/user" data-uid="{./uid}" class="d-flex px-2 py-1 rounded-1 text-bg-light gap-2 align-items-center text-sm">
-							{buildAvatar(@value, "16px", true)} {./username}
+							{{buildAvatar(@value, "16px", true)}} {./username}
 							<button component="chat/deny/delete" data-uid="{./uid}" class="btn btn-light btn-sm py-0"><i class="fa fa-times fa-xs text-danger"></i></button>
 						</div>
 						{{{ end }}}
@@ -165,7 +165,7 @@
 					<label class="form-label" for="dailyDigestFreq">[[user:digest-label]]</label>
 					<select class="form-select" id="dailyDigestFreq" data-property="dailyDigestFreq" autocomplete="off">
 						{{{each dailyDigestFreqOptions}}}
-						<option value="{dailyDigestFreqOptions.value}" <!-- IF dailyDigestFreqOptions.selected -->selected="1"<!-- ENDIF dailyDigestFreqOptions.selected -->>{dailyDigestFreqOptions.name}</option>
+						<option value="{./value}" {{{ if ./selected }}}selected="1"{{{ end }}}>{tx(./name)}</option>
 						{{{end}}}
 					</select>
 					<p class="form-text">[[user:digest-description]]</p>
@@ -176,7 +176,7 @@
 			{{{each customSettings}}}
 			<h4>{customSettings.title}</h4>
 			<div class="card card-body mb-3">
-				{customSettings.content}
+				{{customSettings.content}}
 			</div>
 			{{{end}}}
 
@@ -255,7 +255,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/tags.tpl

@@ -1,6 +1,6 @@
 <!-- IMPORT partials/account/header.tpl -->
 
-<h1 class="fs-4">{title}</h1>
+<h1 class="fs-4">{tx(title)}</h1>
 <input component="tags/watch" type="text" class="form-control">
 
 <!-- IMPORT partials/account/footer.tpl -->

package/templates/account/uploads.tpl

@@ -1,5 +1,5 @@
 <!-- IMPORT partials/account/header.tpl -->
-<h1 class="fs-4">{title}</h1>
+<h1 class="fs-4">{tx(title)}</h1>
 <!-- IF privateUploads -->
 <div class="alert alert-info text-center">[[uploads:private-uploads-info]]</div>
 <!-- ELSE -->

package/templates/category.tpl

@@ -19,13 +19,13 @@
 					{{{ end }}}
 				{{{ end }}}
 
-				<a href="{escape(url)}" class="d-inline-block">
+				<a href="{url}" class="d-inline-block">
 					<div class="alert alert-warning h-100 m-0 px-2 py-1 d-flex gap-1 align-items-center hide" id="new-topics-alert"><i class="fa fa-fw fa-rotate-right"></i>[[recent:load-new-posts]]</div>
 				</a>
 			</div>
 			<div component="category/controls" class="d-flex gap-1">
 				{{{ if !isNumber(cid) }}}
-				<a href="{escape(./url)}" class="btn btn-sm d-flex gap-2 align-items-center" data-ajaxify="false">
+				<a href="{./url}" class="btn btn-sm d-flex gap-2 align-items-center" data-ajaxify="false">
 					<i class="fa fa-external-link text-primary"></i>
 					<span class="fw-semibold">View Original</span>
 				</a>

package/templates/header.tpl

@@ -2,9 +2,9 @@
 <html lang="{localeToHTML(userLang, defaultLang)}" {{{if languageDirection}}}data-dir="{languageDirection}" style="direction: {languageDirection};"{{{end}}}>
 <head>
 	<title>{browserTitle}</title>
-	{{{each metaTags}}}{buildMetaTag(@value)}{{{end}}}
+	{{{each metaTags}}}{{buildMetaTag(@value)}}{{{end}}}
 	<link rel="stylesheet" type="text/css" href="{relative_path}/assets/client{{{if bootswatchSkin}}}-{bootswatchSkin}{{{end}}}{{{ if (languageDirection=="rtl") }}}-rtl{{{ end }}}.css?{config.cache-buster}" />
-	{{{each linkTags}}}{buildLinkTag(@value)}{{{end}}}
+	{{{each linkTags}}}{{buildLinkTag(@value)}}{{{end}}}
 
 	<script>
 		var config = JSON.parse('{{configJSON}}');

package/templates/modules/usercard.tpl

@@ -1,6 +1,6 @@
 <div class="persona-usercard d-flex text-bg-dark">
 	<a href="{config.relative_path}/user/{userslug}">
-		{buildAvatar(@value, "150px", false, "shadow-none")}
+		{{buildAvatar(@value, "150px", false, "shadow-none")}}
 	</a>
 	<div class="usercard-body w-100 d-flex flex-column justify-content-between gap-2 py-2 px-3 overflow-hidden position-relative">
 

package/templates/notifications.tpl

@@ -14,7 +14,7 @@
 				{{{ else }}}
 				<li role="presentation" class="category">
 					<a class="dropdown-item rounded-1 d-flex gap-3 align-items-center justify-content-between" role="menuitem" href="{config.relative_path}/notifications?filter={filters.filter}">
-						<span><i class="fa fa-fw {{{ if filters.selected }}}fa-check{{{ end }}}"></i> {filters.name}</span>
+						<span><i class="fa fa-fw {{{ if filters.selected }}}fa-check{{{ end }}}"></i> {tx(filters.name)}</span>
 						<span class="">{./count}</span>
 					</a>
 				</li>
@@ -40,7 +40,7 @@
 		<li data-nid="{notifications.nid}" class="{notifications.readClass} {{{ if !./read}}}unread{{{ end }}} d-flex pointer border p-3 mb-2 d-flex gap-2" component="notifications/item">
 			<div>
 				{{{ if notifications.from }}}
-				{buildAvatar(notifications.user, "24px", true)}
+				{{buildAvatar(notifications.user, "24px", true)}}
 				{{{ else }}}
 				{{{ if notifications.image }}}
 				<img width="24" height="24" src="{notifications.image}" />

package/templates/partials/account/category-item.tpl

@@ -3,14 +3,14 @@
 	<div class="content depth-{./depth} d-flex gap-2">
 		<div class="flex-grow-1 align-items-start d-flex gap-2">
 			<div>
-				{buildCategoryIcon(@value, "24px", "rounded-circle")}
+				{{buildCategoryIcon(@value, "24px", "rounded-circle")}}
 			</div>
 			<div class="d-grid gap-0">
 				<div class="title fw-semibold">
 					<!-- IMPORT partials/categories/link.tpl -->
 				</div>
 				{{{ if ./descriptionParsed }}}
-				<div class="description text-muted text-xs w-100 line-clamp-5">{./descriptionParsed}</div>
+				<div class="description text-muted text-xs w-100 line-clamp-5">{{./descriptionParsed}}</div>
 				{{{ end }}}
 			</div>
 		</div>

package/templates/partials/account/header.tpl

@@ -7,13 +7,13 @@
 		{{{end}}}
 	</div>
 
-	<div class="cover" component="account/cover" style="background-image: url({escape(cover:url)}); background-position: {cover:position};">
-		<div class="avatar-wrapper" data-uid="{uid}">
-			{buildAvatar(@value, "128px", true)}
-			<span component="user/status" class="position-absolute border border-white border-2 rounded-circle status {status}"><span class="visually-hidden">[[global:{status}]]</span></span>
+	<div class="cover position-absolute start-0 top-0" component="account/cover" style="background-image: url({cover:url}); background-position: {cover:position};">
+		<div class="avatar-wrapper bg-body rounded-circle  position-absolute start-50 top-100 translate-middle" data-uid="{uid}" style="padding: 4px;">
+			{{buildAvatar(@value, "128px", true)}}
+			<span component="user/status" class="fs-3 position-absolute border border-white border-2 rounded-circle status {status}" style="top: 17px; right: 3px; padding: 10px;"><span class="visually-hidden">[[global:{status}]]</span></span>
 
 			{{{ if !isSelf }}}
-			<button class="btn-morph persona-fab {{{ if isFollowing }}}heart{{{ else }}}plus{{{ end }}}" title="{{{ if isFollowing }}}[[global:unfollow]]{{{ else }}}[[global:follow]]{{{ end }}}">
+			<button style="top: 93px; right:4px;" class="btn-morph persona-fab position-absolute {{{ if isFollowing }}}heart{{{ else }}}plus{{{ end }}}" title="{{{ if isFollowing }}}[[global:unfollow]]{{{ else }}}[[global:follow]]{{{ end }}}">
 				<span>
 					<span class="s1"></span>
 					<span class="s2"></span>
@@ -25,13 +25,13 @@
 
 		<div class="container">
 			{{{ if (allowCoverPicture && canEdit) }}}
-			<div class="controls">
-				<a href="#" class="upload"><i class="fa fa-fw fa-4x fa-upload"></i></a>
-				<a href="#" class="resize"><i class="fa fa-fw fa-4x fa-arrows"></i></a>
-				<a href="#" class="remove"><i class="fa fa-fw fa-4x fa-times"></i></a>
+			<div class="controls text-center">
+				<span class="upload p-2 m-2 rounded-1 text-bg-light opacity-75"><i class="fa fa-fw fa-upload"></i></span>
+				<span class="resize p-2 m-2 rounded-1 text-bg-light opacity-75"><i class="fa fa-fw fa-arrows"></i></span>
+				<span class="remove p-2 m-2 rounded-1 text-bg-light opacity-75"><i class="fa fa-fw fa-times"></i></span>
 			</div>
-			<a href="#" class="save">[[groups:cover-save]] <i class="fa fa-fw fa-floppy-o"></i></a>
-			<div class="indicator">[[groups:cover-saving]] <i class="fa fa-fw fa-refresh fa-spin"></i></div>
+			<a href="#" class="save btn btn-primary">[[groups:cover-save]] <i class="fa fa-fw fa-floppy-o"></i></a>
+			<div class="indicator text-bg-primary">[[groups:cover-saving]] <i class="fa fa-fw fa-refresh fa-spin"></i></div>
 			{{{ end }}}
 
 			<!-- IMPORT partials/account/menu.tpl -->

package/templates/partials/account/menu.tpl

@@ -90,11 +90,11 @@
 		<li><a class="dropdown-item d-flex justify-content-between align-items-center" href="{config.relative_path}/user/{userslug}/uploads" role="menuitem">[[global:uploads]] <span class="badge bg-secondary rounded-pill ms-2" title="{counts.uploaded}">{formattedNumber(counts.uploaded)}</span></a></li>
 		<!-- ENDIF canEdit -->
 
-		{{{each profile_links}}}
+		{{{ each profile_links }}}
 		<!-- IF @first -->
 		<li role="separator" class="dropdown-divider"></li>
 		<!-- ENDIF @first -->
-		<li id="{profile_links.id}" class="plugin-link <!-- IF profile_links.public -->public<!-- ELSE -->private<!-- ENDIF profile_links.public -->"><a class="dropdown-item" href="{config.relative_path}/user/{userslug}/{profile_links.route}"><!-- IF ../icon --><i class="fa fa-fw {profile_links.icon}"></i> <!-- END -->{profile_links.name}</a></li>
-		{{{end}}}
+		<li id="{./id}" class="plugin-link {{{ if ./public }}}public{{{ else }}}private{{{ end }}}"><a class="dropdown-item" href="{config.relative_path}/user/{userslug}/{profile_links.route}">{{{ if icon }}}<i class="fa fa-fw {./icon}"></i> {{{ end }}}{tx(./name)}</a></li>
+		{{{ end }}}
 	</ul>
 </div>

package/templates/partials/account/session-list.tpl

@@ -6,7 +6,7 @@
 		<button class="btn btn-sm btn-outline-secondary" type="button" data-action="revokeSession">[[user:revoke-session]]</button>
 		{{{ end }}}
 		{{{ end }}}
-		{userAgentIcons(@value)}
+		{{userAgentIcons(@value)}}
 		<i class="fa fa-circle text-{{{ if ./current }}}success{{{ else }}}muted{{{ end }}}"></i>
 	</div>
 	[[user:browser-version-on-platform, {./browser}, {./version}, {./platform}]]<br />

package/templates/partials/breadcrumbs.tpl

@@ -5,7 +5,7 @@
 		<meta itemprop="position" content="{@index}" />
 		{{{ if ./url }}}<a href="{breadcrumbs.url}" itemprop="item">{{{ end }}}
 			<span itemprop="name">
-				{breadcrumbs.text}
+				{tx(./text)}
 				<!-- IF @last -->
 				<!-- IF !feeds:disableRSS -->
 				<!-- IF rssFeedUrl --><a class="ms-2 link-secondary" target="_blank" href="{rssFeedUrl}" itemprop="item"><i class="fa fa-rss-square"></i></a><!-- ENDIF rssFeedUrl --><!-- ENDIF !feeds:disableRSS -->

package/templates/partials/buttons/newTopic.tpl

@@ -10,7 +10,7 @@
 			<a role="menu-item" href="{config.relative_path}/compose?cid={categories.cid}">{categories.level}
 				<span component="category-markup">
 					<div class="category-item d-inline-block">
-						{buildCategoryIcon(@value, "24px", "rounded-circle")}
+						{{buildCategoryIcon(@value, "24px", "rounded-circle")}}
 						{categories.name}
 					</div>
 				</span>

package/templates/partials/categories/item.tpl

@@ -3,7 +3,7 @@
 
 	<div class="d-flex col-md-7 gap-2 gap-lg-3">
 		<div class="flex-shrink-0">
-		{buildCategoryIcon(@value, "48px", "rounded-circle")}
+		{{buildCategoryIcon(@value, "48px", "rounded-circle")}}
 		</div>
 		<div class="flex-grow-1 d-flex flex-wrap gap-1">
 			<h2 class="title text-break fs-4 fw-semibold m-0 tracking-tight w-100">
@@ -11,7 +11,7 @@
 			</h2>
 			{{{ if ./descriptionParsed }}}
 			<div class="description text-muted text-sm w-100 line-clamp-sm-5">
-				{./descriptionParsed}
+				{{./descriptionParsed}}
 			</div>
 			{{{ end }}}
 			{{{ if ./teaser.timestampISO }}}
@@ -26,7 +26,7 @@
 				{{{ each ./children }}}
 				{{{ if !./isSection }}}
 				<li class="category-children-item small d-flex gap-1 align-items-center">
-					{buildCategoryIcon(@value, "24px", "rounded-circle")}
+					{{buildCategoryIcon(@value, "24px", "rounded-circle")}}
 					<a href="{{{ if ./link }}}{./link}{{{ else }}}{config.relative_path}/category/{./slug}{{{ end }}}" class="text-reset">{./name}</a>
 				</li>
 				{{{ end }}}