nodebb-theme-harmony 2.0.0-pre.3 → 2.0.0-pre.30

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "nodebb-theme-harmony",
-  "version": "2.0.0-pre.3",
+  "version": "2.0.0-pre.30",
   "nbbpm": {
-    "compatibility": "^3.5.0"
+    "compatibility": "^3.7.0"
   },
   "description": "Harmony theme for NodeBB",
   "main": "library.js",
@@ -41,7 +41,7 @@
     "@fontsource/poppins": "5.0.8"
   },
   "devDependencies": {
-    "eslint": "^8.0.0",
+    "eslint": "^9.0.0",
     "eslint-config-nodebb": "^0.2.0",
     "eslint-plugin-import": "^2.24.2"
   }

package/public/harmony.js

@@ -65,11 +65,8 @@ $(document).ready(function () {
 			const bottomBar = $('[component="bottombar"]');
 			const $body = $('body');
 			const $window = $(window);
-			$body.on('shown.bs.dropdown', '.sticky-tools', function () {
-				bottomBar.addClass('hidden');
-			});
-			$body.on('hidden.bs.dropdown', '.sticky-tools', function () {
-				bottomBar.removeClass('hidden');
+			$body.on('shown.bs.dropdown hidden.bs.dropdown', '.sticky-tools', function () {
+				bottomBar.toggleClass('hidden', $(this).find('.dropdown-menu.show').length);
 			});
 			function isSearchVisible() {
 				return !!$('[component="bottombar"] [component="sidebar/search"] .search-dropdown.show').length;

package/scss/common.scss

@@ -124,6 +124,7 @@ body:not(.page-user) {
 [component="chat/message/body"],
 [component="post/content"],
 [component="topic/teaser"] .post-content,
-[component="category/posts"] .post-content {
+[component="category/posts"] .post-content,
+.post-queue.posts-list .post-content {
 	a { text-decoration: underline;}
 }

package/scss/header.scss

@@ -1,5 +1,5 @@
 // hide brand/title on user and group details pages so it doesnt break covers
-.page-user, .template-groups-details {
+body[class*="template-account-"], .template-chats, .template-groups-details {
 	.brand-container {
 		display: none;
 	}

package/scss/modules/topics-list.scss

@@ -1,8 +1,8 @@
 ul.topics-list, ul.categories-list {
 	li {
 		&.deleted {
-			.meta { display: none!important; }
-			.title a { text-decoration: line-through;}
+			.meta, .topic-thumbs { display: none!important; }
+			opacity: 0.65;
 		}
 
 		&.selected {

package/scss/overrides.scss

@@ -35,6 +35,8 @@ $text-muted: 		$gray-600 !default;
 $border-color: 		$gray-200 !default;
 $link-color: 		#0951be !default;
 
+$form-check-input-border: var(--bs-border-width) solid $gray-500 !default;
+
 // no caret on dropdown-toggle
 $enable-caret: false;
 

package/scss/topic.scss

@@ -35,10 +35,7 @@ body.template-topic {
 				&.selected .post-container {
 					background-color: mix($body-bg, $body-color, 90%);
 				}
-				&.deleted .post-container .content {
-					opacity: .75;
-					text-decoration: line-through;
-				}
+				&.deleted .post-container .content { opacity: .65; }
 
 				[component="post/content"] {
 					@include fix-lists();

package/templates/account/blocks.tpl

@@ -7,14 +7,21 @@
 				<input class="form-control form-control-sm" type="text" id="user-search" placeholder="[[users:enter-username]]" data-bs-toggle="dropdown" autocomplete="off" aria-haspopup="true" aria-expanded="false"/>
 
 				<ul component="blocks/search/list" class="dropdown-menu dropdown-menu-end p-1 text-sm block-edit overflow-auto" style="max-height:300px;" role="menu">
-					<li><a href="#" class="dropdown-item" role="menuitem">[[admin/menu:search.start-typing]]</a></li>
+					<li component="blocks/start-typing">
+						<a href="#" class="dropdown-item rounded-1" role="menuitem">[[admin/menu:search.start-typing]]</a>
+					</li>
+					<li component="blocks/no-users" class="hidden">
+						<a href="#" class="dropdown-item rounded-1" role="menuitem">[[users:no-users-found]]</a>
+					</li>
 					{{{ each edit }}}
-					<li>
-						<div class="dropdown-item d-flex flex-nowrap gap-2 justify-content-between" role="menuitem">
+					<li component="blocks/search/match">
+						<div class="dropdown-item rounded-1 d-flex flex-nowrap gap-4 justify-content-between align-items-center" role="menuitem">
 							<div class="text-truncate">
 								<a href="{config.relative_path}/uid/{./uid}" class="text-decoration-none">{buildAvatar(edit, "24px", true)} {./username}</a>
 							</div>
-							<button class="btn btn-sm btn-primary text-nowrap" data-uid="{./uid}" data-action="toggle">[[user:block-toggle]]</button>
+
+							<button class="btn btn-sm btn-outline-danger text-nowrap {{{ if ./isBlocked }}}hidden{{{ end }}}" data-uid="{./uid}" data-action="block">[[user:block-user]]</button>
+							<button class="btn btn-sm btn-outline-primary text-nowrap {{{ if !./isBlocked }}}hidden{{{ end }}}" data-uid="{./uid}" data-action="unblock">[[user:unblock-user]]</button>
 						</div>
 					</li>
 					{{{ end }}}
@@ -28,12 +35,16 @@
 	</div>
 </div>
 <div class="users">
-	<div id="users-container" class="row row-cols-2 row-cols-lg-3 row-cols-xl-4 g-2">
+	<div class="alert alert-warning text-center m-0"{{{ if users.length }}} style="display: none;"{{{ end }}}>[[user:has-no-blocks]]</div>
+
+	<div id="users-container" class="row row-cols-2 row-cols-lg-3 row-cols-xl-4 g-3">
 		{{{ each users }}}
-		<!-- IMPORT partials/users/item.tpl -->
+		<div class="d-flex flex-column gap-1">
+			<!-- IMPORT partials/users/item.tpl -->
+			<button class="btn btn-sm btn-outline-primary text-nowrap mx-auto" data-uid="{./uid}" data-action="unblock">[[user:unblock-user]]</button>
+		</div>
 		{{{ end }}}
 	</div>
-	<div class="alert alert-warning text-center"{{{ if users.length }}} style="display: none;"{{{ end }}}>[[user:has-no-blocks]]</div>
 	<!-- IMPORT partials/paginator.tpl -->
 </div>
 

package/templates/account/consent.tpl

@@ -9,9 +9,9 @@
 <div class="row">
 	<div class="col-sm-6">
 		{{{ if gdpr_consent }}}
-		<div class="alert alert-success">
-			<i class="fa fa-check float-end fa-3x"></i>
+		<div class="alert alert-success d-flex gap-3">
 			[[user:consent.received]]
+			<i class="fa fa-check fa-3x"></i>
 		</div>
 		{{{ else }}}
 		<div class="alert alert-warning">

package/templates/account/info.tpl

@@ -29,32 +29,91 @@
 				[[user:info.username-history]]
 			</h5>
 			<div class="card-body">
-				<ul class="list-group">
-					{{{each usernames}}}
-					<li class="list-group-item">
-						{../value}
-						<small class="float-end"><span class="timeago" title="{../timestampISO}"></span></small>
+				<ul class="list-unstyled mb-0">
+					{{{ each usernames }}}
+					<li class="d-flex justify-content-between mb-1">
+						<span class="text-sm">{./value}</span>
+
+						<div>
+							{{{ if ./byUid }}}
+							<a class="lh-1" href="{{{ if ./byUser.userslug }}}{config.relative_path}/user/{./byUser.userslug}{{{ else }}}#{{{ end }}}">
+							{buildAvatar(./byUser, "18px", true)}</a>
+							{{{ end }}}
+							<span class="timeago text-sm lh-1 align-middle" title="{./timestampISO}"></span>
+						</div>
 					</li>
-					{{{end}}}
+					{{{ end }}}
 				</ul>
 			</div>
 		</div>
 
-		<div class="card">
+		<div class="card mb-3">
 			<h5 class="card-header">
 				[[user:info.email-history]]
 			</h5>
 			<div class="card-body">
-				<ul class="list-group">
-					{{{each emails}}}
-					<li class="list-group-item">
-						{../value}
-						<small class="float-end"><span class="timeago" title="{../timestampISO}"></span></small>
+				<ul class="list-unstyled mb-0">
+					{{{ each emails }}}
+					<li class="d-flex justify-content-between mb-1">
+						<span class="text-sm">{./value}</span>
+						<div>
+							{{{ if ./byUid }}}
+							<a class="lh-1" href="{{{ if ./byUser.userslug }}}{config.relative_path}/user/{./byUser.userslug}{{{ else }}}#{{{ end }}}">
+							{buildAvatar(./byUser, "18px", true)}</a>
+							{{{ end }}}
+							<span class="timeago text-sm lh-1 align-middle" title="{./timestampISO}"></span>
+						</div>
 					</li>
-					{{{end}}}
+					{{{ end }}}
 				</ul>
 			</div>
 		</div>
+
+		{{{ if isAdminOrGlobalModerator }}}
+		<div class="card">
+			<h5 class="card-header">
+				[[user:info.moderation-note]]
+			</h5>
+			<div class="card-body">
+				<textarea component="account/moderation-note" class="form-control mb-3" aria-label="[[user:info.moderation-note]]"></textarea>
+
+				<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 }}}
+					<hr/>
+
+					<div data-id="{./id}">
+						<div class="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 }}}" class="fw-bold" itemprop="author" data-username="{./user.username}" data-uid="{./user.uid}">{./user.username}</a>
+
+							<span class="timeago" title="{./timestampISO}"></span>
+						</div>
+
+
+						<div component="account/moderation-note/content-area" class="d-flex flex-column">
+							<div class="content">
+								{./note}
+							</div>
+							<button component="account/moderation-note/edit" class="btn btn-sm btn-link align-self-end">[[topic:edit]]</button>
+						</div>
+
+						<div component="account/moderation-note/edit-area" class="d-flex flex-column gap-2">
+							<textarea class="form-control w-100 overflow-hidden">{./rawNote}</textarea>
+							<div class="align-self-end">
+								<button component="account/moderation-note/cancel-edit" class="btn btn-sm btn-link text-danger align-self-end">[[global:cancel]]</button>
+								<button component="account/moderation-note/save-edit" class="btn btn-sm btn-primary align-self-end">[[global:save]]</button>
+							</div>
+						</div>
+					</div>
+					{{{ end }}}
+				</div>
+				<!-- IMPORT partials/paginator.tpl -->
+			</div>
+		</div>
+		{{{ end }}}
 	</div>
 	<div class="col-sm-6 mb-3">
 		<div class="card mb-3">
@@ -65,15 +124,38 @@
 				{{{ if history.flags.length }}}
 				<ul class="recent-flags list-unstyled">
 					{{{ each history.flags }}}
-					<li>
-						<p>
+					<li class="mb-4 border-bottom">
+						<div class="mb-1 d-flex align-items-center justify-content-between">
+							<div>
+								{{{ if (./type == "user")}}}
+								<span class="badge text-bg-info">[[user:info.profile]]</span>
+								{{{ else }}}
+								<span class="badge text-bg-info">[[user:info.post]]</span>
+								{{{ end }}}
+								<span class="timestamp timeago" title="{./timestampISO}"></span>
+							</div>
+
+							<a href="{config.relative_path}/flags/{./flagId}" class="badge badge border border-gray-300 text-body">[[user:info.view-flag]]</a>
+						</div>
+
+						{{{ if (./type == "post") }}}
+						<p class="mb-1">
 							{{{ 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>
 							{{{ end }}}
-							<span class="timestamp">[[flags:flagged-timeago-readable, {./timestampISO}, {./timestampReadable}]]</span>
 						</p>
+						{{{ end }}}
+
+						<div class="d-flex gap-2 align-items-center mb-3">
+							<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>
+								{{{ end }}}
+							</div>
+						</div>
 					</li>
 					{{{ end }}}
 				</ul>
@@ -97,23 +179,36 @@
 			<div class="card-body">
 				{{{ if history.bans.length }}}
 				<ul class="ban-history list-unstyled">
-					{{{each history.bans}}}
-					<li>
+					{{{ each history.bans }}}
+					<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>
+								<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>
+								<span class="timestamp timeago" title="{./timestampISO}"></span>
+							</div>
+							{{{ if (./type != "unban") }}}
+							<span class="badge text-bg-danger">[[user:banned]]</span>
+							{{{ else }}}
+							<span class="badge text-bg-success">[[user:unbanned]]</span>
+							{{{ end }}}
+						</div>
+						<p class="mb-1">
+							<span class="reason">[[user:info.banned-reason-label]]: <strong>{./reason}</strong></span>
+						</p>
 						<p>
-							<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>
-							<span class="timestamp timeago" title="{./timestampISO}"></span> &mdash; {./timestampReadable}<br />
 							{{{ if ./until }}}
-							<span class="expiry">[[user:info.banned-until, {./untilReadable}]]</span><br />
+							<span class="expiry">[[user:info.banned-until, {isoTimeToLocaleString(./untilISO, config.userLang)}]]</span>
 							{{{ else }}}
-							<span class="expiry">[[user:info.banned-permanently]]</span><br />
+							{{{ if (./type != "unban") }}}
+							<span class="expiry">[[user:info.banned-permanently]]</span>
+							{{{ end }}}
 							{{{ end }}}
-							<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-ban-history]]</div>
@@ -139,18 +234,28 @@
 				{{{ if history.mutes.length }}}
 				<ul class="ban-history list-unstyled">
 					{{{ each history.mutes }}}
-					<li>
+					<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>
+								<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>
+								<span class="timestamp timeago" title="{./timestampISO}"></span>
+							</div>
+							{{{ if (./type != "unmute") }}}
+							<span class="badge text-bg-danger">[[user:muted]]</span>
+							{{{ else }}}
+							<span class="badge text-bg-success">[[user:unmuted]]</span>
+							{{{ end }}}
+						</div>
+						<p class="mb-1">
+							<span class="reason">[[user:info.banned-reason-label]]: <strong>{./reason}</strong></span>
+						</p>
 						<p>
-							<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>
-							<span class="timestamp timeago" title="{./timestampISO}"></span> &mdash; {./timestampReadable}<br />
 							{{{ if ./until }}}
-							<span class="expiry">[[user:info.muted-until, {./untilReadable}]]</span><br />
+							<span class="expiry">[[user:info.muted-until, {isoTimeToLocaleString(./untilISO, config.userLang)}]]</span>
 							{{{ end }}}
-
-							<span class="reason"><strong>[[user:info.banned-reason-label]]</strong>: {./reason}</span>
 						</p>
 					</li>
 					{{{ end }}}
@@ -160,42 +265,6 @@
 				{{{ end }}}
 			</div>
 		</div>
-
-		{{{ if isAdminOrGlobalModerator }}}
-		<div class="card">
-			<h5 class="card-header">
-				[[user:info.moderation-note]]
-			</h5>
-			<div class="card-body">
-				<textarea component="account/moderation-note" class="form-control mb-3" aria-label="[[user:info.moderation-note]]"></textarea>
-
-				<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 }}}
-					<hr/>
-
-					<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="{./timestampISO}"></span>
-						</div>
-						<br />
-
-						<div class="content">
-							{./note}
-						</div>
-					</div>
-					{{{ end }}}
-				</div>
-				<!-- IMPORT partials/paginator.tpl -->
-			</div>
-		</div>
-		{{{ end }}}
 	</div>
 </div>
 

package/templates/account/posts.tpl

@@ -24,7 +24,7 @@
 <div class="alert alert-warning text-center">{noItemsFoundKey}</div>
 {{{ end }}}
 
-<div class="">
+<div>
 	<!-- IMPORT partials/posts_list.tpl -->
 
 	{{{ if config.usePagination }}}

package/templates/account/settings.tpl

@@ -100,7 +100,7 @@
 			<label class="form-label text-sm" for="topicsPerPage">[[user:topics-per-page]] ([[user:max-items-per-page, {maxTopicsPerPage}]])</label>
 			<input type="text" class="form-control form-control-sm" id="topicsPerPage" data-property="topicsPerPage" value="{settings.topicsPerPage}">
 		</div>
-		<div class="">
+		<div>
 			<label class="form-label text-sm" for="postsPerPage">[[user:posts-per-page]] ([[user:max-items-per-page, {maxPostsPerPage}]])</label>
 			<input type="text" class="form-control form-control-sm" id="postsPerPage" data-property="postsPerPage" value="{settings.postsPerPage}">
 		</div>
@@ -112,14 +112,14 @@
 		<div class="mb-2">
 			<label class="form-label text-sm" for="categoryTopicSort">[[user:category-topic-sort]]</label>
 			<select class="form-select form-select-sm" id="categoryTopicSort" data-property="categoryTopicSort">
-				<option value="newest_to_oldest" {{{ if (settings.categoryTopicSort == "newest_to_oldest") }}}selected{{{ end }}}>[[topic:newest-to-oldest]]</option>
-				<option value="oldest_to_newest" {{{ if (settings.categoryTopicSort == "oldest_to_newest") }}}selected{{{ end }}}>[[topic:oldest-to-newest]]</option>
+				<option value="recently_replied" {{{ if (settings.categoryTopicSort == "recently_replied") }}}selected{{{ end }}}>[[topic:recently-replied]]</option>
+				<option value="recently_created" {{{ if (settings.categoryTopicSort == "recently_created") }}}selected{{{ end }}}>[[topic:recently-created]]</option>
 				<option value="most_posts" {{{ if (settings.categoryTopicSort == "most_posts") }}}selected{{{ end }}}>[[topic:most-posts]]</option>
 				<option value="most_votes" {{{ if (settings.categoryTopicSort == "most_votes") }}}selected{{{ end }}}>[[topic:most-votes]]</option>
 				<option value="most_views" {{{ if (settings.categoryTopicSort == "most_views") }}}selected{{{ end }}}>[[topic:most-views]]</option>
 			</select>
 		</div>
-		<div class="">
+		<div>
 			<label class="form-label text-sm" for="topicPostSort">[[user:topic-post-sort]]</label>
 			<select class="form-select form-select-sm" id="topicPostSort" data-property="topicPostSort">
 				<option value="oldest_to_newest" {{{ if (settings.topicPostSort == "oldest_to_newest") }}}selected{{{ end }}}>[[topic:oldest-to-newest]]</option>
@@ -132,7 +132,7 @@
 		{{{ if !disableEmailSubscriptions }}}
 		<hr/>
 		<h6 class="fw-bold">[[global:email]]</h6>
-		<div class="">
+		<div>
 			<div class="mb-2">
 				<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">
@@ -148,7 +148,7 @@
 		{{{ each customSettings}}}
 		<hr/>
 		<h6 class="fw-bold">{./title}</h6>
-		<div class="">
+		<div>
 			{./content}
 		</div>
 		{{{end}}}
@@ -177,7 +177,7 @@
 		{{{ end }}}
 
 		<h6 class="fw-bold">[[topic:watch]]</h6>
-		<div class="">
+		<div>
 			<div class="form-check form-switch">
 				<input class="form-check-input" type="checkbox" role="switch" id="followTopicsOnCreate" data-property="followTopicsOnCreate" {{{ if settings.followTopicsOnCreate }}}checked{{{ end }}}/>
 				<label class="form-check-label text-sm" for="followTopicsOnCreate">[[user:follow-topics-you-create]]</label>

package/templates/category.tpl

@@ -9,7 +9,7 @@
 		<h1 class="tracking-tight fs-2 fw-semibold mb-0 text-center">{./name}</h1>
 	</div>
 	{{{ if ./descriptionParsed }}}
-	<div class="description text-muted text-sm w-100 {{{ if config.theme.centerHeaderElements }}}text-center{{{ end }}}">
+	<div class="description text-secondary text-sm w-100 {{{ if config.theme.centerHeaderElements }}}text-center{{{ end }}}">
 		{./descriptionParsed}
 	</div>
 	{{{ end }}}

package/templates/flags/detail.tpl

@@ -3,7 +3,7 @@
 <div class="d-flex flex-column flex-md-row">
 	<div class="flex-shrink-0 d-flex flex-column gap-3 border-end-md text-sm mb-3 pe-4" style="flex-basis: 240px !important;">
 		<div class="d-grid gap-1">
-			<a class="btn btn-ghost ff-secondary border btn-sm justify-content-start" href="{config.relative_path}/{type_path}/{targetId}">
+			<a class="btn btn-ghost ff-secondary border btn-sm justify-content-start" href="{config.relative_path}/{type_path}/{encodeURIComponent(targetId)}">
 				<i class="fa fa-fw fa-external-link text-primary"></i>
 				[[flags:go-to-target]]
 			</a>
@@ -87,7 +87,7 @@
 				<div class="d-flex gap-2 align-items-center">
 					<a class="d-flex text-decoration-none" href="{config.relative_path}/user/{./user.userslug}">{buildAvatar(./user, "16px", true)}</a>
 					<a href="{config.relative_path}/user/{./user.userslug}">{./user.username}</a>
-					<span class="timeago text-muted" title="{./datetimeISO}"></span>
+					<span class="timeago text-muted text-nowrap" title="{./datetimeISO}"></span>
 				</div>
 				<div>
 					<ul class="list-unstyled">

package/templates/footer.tpl

@@ -5,7 +5,7 @@
 	</div>
 	<!-- IMPORT partials/mobile-footer.tpl -->
 	{{{ if !isSpider }}}
-	<div class="">
+	<div>
 		<div component="toaster/tray" class="alert-window fixed-bottom mb-5 mb-md-2 me-2 me-md-5 ms-auto" style="width:300px; z-index: 1090;">
 			<!-- IMPORT partials/reconnect-alert.tpl -->
 		</div>

package/templates/groups/list.tpl

@@ -16,9 +16,9 @@
 				</div>
 			</div>
 		</div>
-		<div class="">
+		<div>
 			<div class="d-flex justify-content-end gap-2">
-				<div class="">
+				<div>
 					{{{ if allowGroupCreation }}}
 					<button class="btn btn-primary btn-sm text-nowrap" data-action="new"><i class="fa fa-users"></i> [[groups:new-group]]</button>
 					{{{ end }}}
@@ -28,7 +28,7 @@
 						<option value="date">[[groups:details.creation-date]]</option>
 					</select>
 				</div>
-				<div class="">
+				<div>
 					<div class="input-group">
 						<input type="text" class="form-control form-control-sm" placeholder="[[global:search]]" name="query" id="search-text">
 						<button id="search-button" class="btn btn-primary btn-sm" aria-label="[[global:search]]">

package/templates/login.tpl

@@ -15,26 +15,20 @@
 							<label for="username">{allowLoginWith}</label>
 							<input class="form-control" type="text" placeholder="{allowLoginWith}" name="username" id="username" autocorrect="off" autocapitalize="off" autocomplete="nickname" value="{username}" aria-required="true"/>
 						</div>
+
 						<div class="mb-2 d-flex flex-column gap-2">
-							<div class="d-flex justify-content-between align-items-center">
-								<label for="password">[[user:password]]</label>
-								{{{ if allowPasswordReset }}}
-								<a id="reset-link" class="text-sm text-reset text-decoration-underline" href="{config.relative_path}/reset">[[login:forgot-password]]</a>
-								{{{ end }}}
-							</div>
+							<label for="password">[[user:password]]</label>
 							<div>
 								<input class="form-control" type="password" placeholder="[[user:password]]" name="password" id="password" autocomplete="current-password" autocapitalize="off" aria-required="true"/>
 								<p id="caps-lock-warning" class="text-danger hidden text-sm mb-0 form-text" aria-live="polite" role="alert" aria-atomic="true">
 									<i class="fa fa-exclamation-triangle"></i> [[login:caps-lock-enabled]]
 								</p>
 							</div>
-						</div>
-						<div class="mb-2">
-							<div class="checkbox">
-								<label>
-									<input type="checkbox" name="remember" id="remember" checked /> [[login:remember-me]]
-								</label>
+							{{{ if allowPasswordReset }}}
+							<div>
+								<a id="reset-link" class="text-sm text-reset text-decoration-underline" href="{config.relative_path}/reset">[[login:forgot-password]]</a>
 							</div>
+							{{{ end }}}
 						</div>
 
 						{{{ each loginFormEntry }}}
@@ -49,6 +43,11 @@
 
 						<button class="btn btn-primary" id="login" type="submit">[[global:login]]</button>
 
+						<div class="form-check mb-2">
+							<input class="form-check-input" type="checkbox" name="remember" id="remember" checked />
+							<label class="form-check-label" for="remember">[[login:remember-me]]</label>
+						</div>
+
 						<div class="alert alert-danger {{{ if !error }}} hidden{{{ end }}}" id="login-error-notify" role="alert" aria-atomic="true">
 							<strong>[[login:failed-login-attempt]]</strong>
 							<p class="mb-0">{error}</p>

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

@@ -67,10 +67,14 @@
 
 		{{{ if (loggedIn && (!isSelf && !banned)) }}}
 		<hr class="w-100 my-2"/>
-		<a href="#" component="account/flag" class="btn-ghost-sm ff-secondary">
+		<a {{{if flagId }}}hidden{{{end}}} href="#" component="account/flag" class="btn-ghost-sm ff-secondary">
 			<i class="flex-shrink-0 fa-solid fa-flag text-danger"></i>
 			<div class="flex-grow-1 text-nowrap">[[user:flag-profile]]</div>
 		</a>
+		<a {{{if !flagId }}}hidden{{{end}}} href="#" component="account/already-flagged" class="btn-ghost-sm ff-secondary" data-flag-id="{flagId}">
+			<i class="flex-shrink-0 fa-solid fa-flag text-danger"></i>
+			<div class="flex-grow-1 text-nowrap">[[user:profile-flagged]]</div>
+		</a>
 		<a href="#" component="account/block" class="btn-ghost-sm ff-secondary {{{ if isBlocked }}}hidden{{{ end }}}">
 			<i class="flex-shrink-0 fa-solid fa-ban text-danger"></i>
 			<div class="flex-grow-1 text-nowrap">[[user:block-user]]</div>