nodebb-theme-persona 15.0.0-beta.1 → 15.0.0

package/lib/controllers.js

@@ -1,7 +1,7 @@
 'use strict';
 
-const accountHelpers = require.main.require('./src/controllers/accounts/helpers');
-const helpers = require.main.require('./src/controllers/helpers');
+const accountHelpers = nodebb.require('./src/controllers/accounts/helpers');
+const helpers = nodebb.require('./src/controllers/helpers');
 
 const Controllers = module.exports;
 

package/library.js

@@ -1,6 +1,6 @@
 'use strict';
 
-const meta = require.main.require('./src/meta');
+const meta = nodebb.require('./src/meta');
 
 const controllers = require('./lib/controllers');
 
@@ -8,7 +8,7 @@ const library = module.exports;
 
 library.init = async function (params) {
 	const { router, middleware } = params;
-	const routeHelpers = require.main.require('./src/routes/helpers');
+	const routeHelpers = nodebb.require('./src/routes/helpers');
 	routeHelpers.setupAdminPageRoute(router, '/admin/plugins/persona', [], controllers.renderAdminPage);
 
 	routeHelpers.setupPageRoute(router, '/user/:userslug/theme', [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nodebb-theme-persona",
-  "version": "15.0.0-beta.1",
+  "version": "15.0.0",
   "nbbpm": {
     "compatibility": "^4.14.0"
   },
@@ -45,8 +45,7 @@
     "pulling": "^2.0.0"
   },
   "devDependencies": {
-    "eslint": "9.25.1",
-    "eslint-config-nodebb": "^1.1.4",
-    "eslint-plugin-import": "^2.31.0"
+    "eslint": "10.5.0",
+    "eslint-config-nodebb": "^2.0.3"
   }
 }

package/public/admin.js

@@ -1,7 +1,7 @@
 'use strict';
 
 define('admin/plugins/persona', ['settings'], function (Settings) {
-	var ACP = {};
+	const ACP = {};
 
 	ACP.init = function () {
 		Settings.load('persona', $('.persona-settings'));

package/public/persona.js

@@ -23,7 +23,7 @@ $(document).ready(function () {
 		document.documentElement.style.setProperty('--panel-offset', `${offset}px`);
 	}
 
-	var lastBSEnv = '';
+	let lastBSEnv = '';
 	function configureNavbarHiding() {
 		if (!$.fn.autoHidingNavbar) {
 			return;
@@ -37,13 +37,13 @@ $(document).ready(function () {
 			} catch (e) {
 				console.warn('[persona/settings] Unable to parse value for navbar autohiding');
 			}
-			var env = utils.findBootstrapEnvironment();
+			const env = utils.findBootstrapEnvironment();
 			// if env didn't change don't destroy and recreate
 			if (env === lastBSEnv) {
 				return;
 			}
 			lastBSEnv = env;
-			var navbarEl = $('[component="navbar"]');
+			const navbarEl = $('[component="navbar"]');
 			navbarEl.autoHidingNavbar('destroy').removeData('plugin_autoHidingNavbar');
 			navbarEl.css('top', '');
 
@@ -69,7 +69,7 @@ $(document).ready(function () {
 					if (ajaxify.data.template.topic) {
 						$('.topic .topic-header').css({ top: topValue });
 					} else {
-						var topicListHeader = $('.topic-list-header');
+						const topicListHeader = $('.topic-list-header');
 						if (topicListHeader.length) {
 							topicListHeader.css({ top: topValue });
 						}
@@ -119,24 +119,22 @@ $(document).ready(function () {
 	function setupEditedByIcon() {
 		function activateEditedTooltips() {
 			$('[data-pid] [component="post/editor"]').each(function () {
-				var el = $(this);
-				var icon;
-
+				const el = $(this);
 				if (!el.attr('data-editor')) {
 					return;
 				}
 
-				icon = el.closest('[data-pid]').find('.edit-icon').first();
+				const icon = el.closest('[data-pid]').find('.edit-icon').first();
 				icon.prop('title', el.text()).tooltip().removeClass('hidden');
 			});
 		}
 
 		$(window).on('action:posts.edited', function (ev, data) {
-			var parent = $('[data-pid="' + data.post.pid + '"]');
-			var icon = parent.find('.edit-icon').filter(function (index, el) {
+			const parent = $('[data-pid="' + data.post.pid + '"]');
+			const icon = parent.find('.edit-icon').filter(function (index, el) {
 				return parseInt($(el).closest('[data-pid]').attr('data-pid'), 10) === parseInt(data.post.pid, 10);
 			});
-			var el = parent.find('[component="post/editor"]').first();
+			const el = parent.find('[component="post/editor"]').first();
 			icon.prop('title', el.text()).tooltip().removeClass('hidden');
 		});
 
@@ -157,15 +155,15 @@ $(document).ready(function () {
 		});
 
 		$(window).on('action:posts.loading', function (ev, data) {
-			for (var i = 0, ii = data.posts.length; i < ii; i++) {
+			for (let i = 0, ii = data.posts.length; i < ii; i++) {
 				(ajaxify.data.topics || ajaxify.data.posts)[data.posts[i].index] = data.posts[i];
 			}
 		});
 	}
 
 	function generateUserCard(ev) {
-		var avatar = $(this);
-		var uid = avatar.parents('[data-uid]').attr('data-uid');
+		const avatar = $(this);
+		const uid = avatar.parents('[data-uid]').attr('data-uid');
 		const topicOrPost = (ajaxify.data.topics || ajaxify.data.posts || []).find(d => String(d.uid) === String(uid));
 		if (!topicOrPost) return;
 		const user = topicOrPost.user;
@@ -182,7 +180,7 @@ $(document).ready(function () {
 			}
 
 			app.parseAndTranslate('modules/usercard', user, function (html) {
-				var card = $(html);
+				const card = $(html);
 				avatar.parents('a').after(card.hide());
 
 				if (String(app.user.uid) === String(user.uid) || !app.user.uid) {
@@ -229,8 +227,8 @@ $(document).ready(function () {
 	function setupFavouriteMorph(parent, uid, username) {
 		require(['api', 'alerts'], function (api, alerts) {
 			parent.find('.btn-morph').click(function (ev) {
-				var type = $(this).hasClass('plus') ? 'follow' : 'unfollow';
-				var method = $(this).hasClass('plus') ? 'put' : 'del';
+				const type = $(this).hasClass('plus') ? 'follow' : 'unfollow';
+				const method = $(this).hasClass('plus') ? 'put' : 'del';
 
 				api[method]('/users/' + uid + '/follow').then(() => {
 					alerts.success('[[global:alert.' + type + ', ' + username + ']]');
@@ -243,9 +241,9 @@ $(document).ready(function () {
 					$(this).prepend('<b class="drop"></b>');
 				}
 
-				var drop = $(this).find('b.drop').removeClass('animate');
-				var x = ev.pageX - (drop.width() / 2) - $(this).offset().left;
-				var y = ev.pageY - (drop.height() / 2) - $(this).offset().top;
+				const drop = $(this).find('b.drop').removeClass('animate');
+				const x = ev.pageX - (drop.width() / 2) - $(this).offset().left;
+				const y = ev.pageY - (drop.height() / 2) - $(this).offset().top;
 
 				drop.css({ top: y + 'px', left: x + 'px' }).addClass('animate');
 			});

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/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

@@ -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>
 <!-- ENDIF !posts.length -->
 
 <div class="col-12">

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>
@@ -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>
@@ -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/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,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/partials/account/header.tpl

@@ -7,13 +7,13 @@
 		{{{end}}}
 	</div>
 
-	<div class="cover" component="account/cover" style="background-image: url({cover:url}); background-position: {cover:position};">
-		<div class="avatar-wrapper" data-uid="{uid}">
+	<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="position-absolute border border-white border-2 rounded-circle status {status}"><span class="visually-hidden">[[global:{status}]]</span></span>
+			<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/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/categories/link.tpl

@@ -1,5 +1,5 @@
-{{{ if ./isSection }}}
-{./name}
-{{{ else }}}
-<a class="text-reset" href="{{{ if ./link }}}{./link}{{{ else }}}{config.relative_path}/category/{./slug}{{{ end }}}" itemprop="url">{./name}</a>
-{{{ end }}}
+{{{ if ./isSection }}}
+{tx(./name)}
+{{{ else }}}
+<a class="text-reset" href="{{{ if ./link }}}{./link}{{{ else }}}{config.relative_path}/category/{./slug}{{{ end }}}" itemprop="url">{tx(./name)}</a>
+{{{ end }}}

package/templates/partials/category/tags.tpl

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

package/templates/partials/cookie-consent.tpl

@@ -1,4 +1,4 @@
 <div class="cookie-consent">
-    <button class="float-end btn btn-primary">{dismiss}</button>
-    {message} <a target="_blank" rel="noopener" href="{link_url}">{link}</a>
+    <button class="float-end btn btn-primary">{tx(dismiss)}</button>
+    {tx(message)} <a target="_blank" rel="noopener" href="{link_url}">{tx(link)}</a>
 </div>

package/templates/partials/menu.tpl

@@ -47,14 +47,14 @@
 				<ul id="main-nav" class="navbar-nav me-auto mb-2 mb-lg-0">
 					{{{each navigation}}}
 					{{{ if displayMenuItem(@root, @index) }}}
-					<li class="nav-item {navigation.class}{{{ if navigation.dropdown }}} dropdown{{{ end }}}" title="{navigation.title}">
+					<li class="nav-item {navigation.class}{{{ if navigation.dropdown }}} dropdown{{{ end }}}" title="{tx(./title)}">
 						<a class="nav-link navigation-link {{{ if navigation.dropdown }}}dropdown-toggle{{{ end }}}"
 						{{{ if navigation.dropdown }}} href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" {{{ else }}} href="{navigation.route}"{{{ end }}} {{{ if navigation.id }}}id="{navigation.id}"{{{ end }}}{{{ if navigation.targetBlank }}} target="_blank"{{{ end }}}>
 							{{{ if navigation.iconClass }}}
-							<i class="fa fa-fw {navigation.iconClass}" data-content="{navigation.content}"></i>
+							<i class="fa fa-fw {navigation.iconClass}" data-content="{./content}"></i>
 							{{{ end }}}
-							{{{ if navigation.text }}}
-							<span class="{navigation.textClass}">{navigation.text}</span>
+							{{{ if ./text }}}
+							<span class="{./textClass}">{tx(./text)}</span>
 							{{{ end }}}
 							{{{ if navigation.dropdown}}}
 							<i class="fa fa-caret-down"></i>

package/templates/partials/notifications_list.tpl

@@ -25,7 +25,7 @@
 
 			<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">