nodebb-theme-harmony 2.0.0-pre.9 → 2.0.0

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

@@ -3,19 +3,19 @@
 <div class="d-flex flex-wrap justify-content-between align-items-center gap-2 mb-3">
 	<h3 class="fw-semibold fs-5 mb-0">[[global:posts]]</h3>
 	<div class="d-flex flex-wrap gap-1">
-		<a href="{config.relative_path}/user/{userslug}/posts" class="btn-ghost-sm ff-secondary fw-semibold {{{ if template.account/posts }}}active{{{ end }}}">[[global:header.recent]]</a>
+		<a href="{config.relative_path}/user/{userslug}/posts" class="btn btn-ghost btn-sm ff-secondary fw-semibold {{{ if template.account/posts }}}active{{{ end }}}">[[global:header.recent]]</a>
 		{{{ if !reputation:disabled }}}
-		<a href="{config.relative_path}/user/{userslug}/best"class="btn-ghost-sm ff-secondary fw-semibold {{{ if template.account/best }}}active{{{ end }}}">[[global:best]]</a>
-		<a href="{config.relative_path}/user/{userslug}/controversial" class="btn-ghost-sm ff-secondary fw-semibold {{{ if template.account/controversial }}}active{{{ end }}}">[[global:controversial]]</a>
+		<a href="{config.relative_path}/user/{userslug}/best"class="btn btn-ghost btn-sm ff-secondary fw-semibold {{{ if template.account/best }}}active{{{ end }}}">[[global:best]]</a>
+		<a href="{config.relative_path}/user/{userslug}/controversial" class="btn btn-ghost btn-sm ff-secondary fw-semibold {{{ if template.account/controversial }}}active{{{ end }}}">[[global:controversial]]</a>
 		{{{ if canEdit }}}
-		<a href="{config.relative_path}/user/{userslug}/upvoted" class="btn-ghost-sm ff-secondary fw-semibold {{{ if template.account/upvoted }}}active{{{ end }}}">[[global:upvoted]]</a>
+		<a href="{config.relative_path}/user/{userslug}/upvoted" class="btn btn-ghost btn-sm ff-secondary fw-semibold {{{ if template.account/upvoted }}}active{{{ end }}}">[[global:upvoted]]</a>
 		{{{ if !downvote:disabled }}}
-		<a href="{config.relative_path}/user/{userslug}/downvoted" class="btn-ghost-sm ff-secondary fw-semibold {{{ if template.account/downvoted }}}active{{{ end }}}">[[global:downvoted]]</a>
+		<a href="{config.relative_path}/user/{userslug}/downvoted" class="btn btn-ghost btn-sm ff-secondary fw-semibold {{{ if template.account/downvoted }}}active{{{ end }}}">[[global:downvoted]]</a>
 		{{{ end }}}
 		{{{ end }}}
 		{{{ end }}}
 		{{{ if canEdit }}}
-		<a href="{config.relative_path}/user/{userslug}/bookmarks" class="btn-ghost-sm ff-secondary fw-semibold {{{ if template.account/bookmarks }}}active{{{ end }}}">[[user:bookmarks]]</a>
+		<a href="{config.relative_path}/user/{userslug}/bookmarks" class="btn btn-ghost btn-sm ff-secondary fw-semibold {{{ if template.account/bookmarks }}}active{{{ end }}}">[[user:bookmarks]]</a>
 		{{{ end }}}
 	</div>
 </div>
@@ -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/profile.tpl

@@ -23,17 +23,17 @@
 {{{ end }}}
 
 <div class="account-stats container">
-	<div class="row row-cols-2 row-cols-xl-3 row-cols-xxl-4 g-2">
+	<div class="row row-cols-2 row-cols-xl-3 row-cols-xxl-4 g-2 mb-5">
 		{{{ if !reputation:disabled }}}
 		<div class="stat">
-			<div class="align-items-center justify-content-center card card-header px-0 py-3 border-0 rounded-1 h-100">
+			<div class="align-items-center justify-content-center card card-header p-3 border-0 rounded-1 h-100">
 				<span class="stat-label text-xs fw-semibold">[[global:reputation]]</span>
 				<span class="fs-2 ff-secondary" title="{reputation}">{humanReadableNumber(reputation)}</span>
 			</div>
 		</div>
 		{{{ end }}}
 		<div class="stat">
-			<div class="align-items-center justify-content-center card card-header px-0 py-3 border-0 rounded-1 h-100">
+			<div class="align-items-center justify-content-center card card-header p-3 border-0 rounded-1 h-100">
 				<span class="stat-label text-xs fw-semibold">[[user:profile-views]]</span>
 				<span class="fs-2 ff-secondary" title="
 				{profileviews}">{humanReadableNumber(profileviews)}</span>
@@ -41,14 +41,14 @@
 		</div>
 
 		<div class="stat">
-			<div class="align-items-center justify-content-center card card-header px-0 py-3 border-0 rounded-1 h-100 gap-2">
+			<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"><i class="text-muted fa-solid fa-user-plus"></i> <span>[[user:joined]]</span></span>
 				<span class="timeago fs-6 ff-secondary" title="{joindateISO}"></span>
 			</div>
 		</div>
 
 		<div class="stat">
-			<div class="align-items-center justify-content-center card card-header px-0 py-3 border-0 rounded-1 h-100 gap-2">
+			<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"><i class="text-muted fa-solid fa-clock"></i> <span>[[user:lastonline]]</span></span>
 				<span class="timeago text-center text-break w-100 px-2 fs-6 ff-secondary" title="{lastonlineISO}"></span>
 			</div>
@@ -56,38 +56,35 @@
 
 		{{{ if email }}}
 		<div class="stat">
-			<div class="align-items-center justify-content-center card card-header px-0 py-3 border-0 rounded-1 h-100 gap-2">
+			<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"><i class="text-muted fa-solid fa-envelope"></i> <span>[[user:email]]</span> {{{ if emailHidden}}}<span class="text-lowercase">([[global:hidden]])</span>{{{ end }}}</span>
 				<span class="text-sm text-center text-break w-100 px-2 ff-secondary">{email}</span>
 			</div>
 		</div>
 		{{{ end }}}
 
-		{{{ if websiteName }}}
+		{{{ if age }}}
 		<div class="stat">
-			<div class="align-items-center justify-content-center card card-header px-0 py-3 border-0 rounded-1 h-100 gap-2">
-				<span class="stat-label text-xs fw-semibold"><i class="text-muted fa-solid fa-globe"></i> <span>[[user:website]]</span></span>
-				<a class="text-sm text-center text-break w-100 px-2 ff-secondary text-underline text-reset" href="{websiteLink}" rel="nofollow noreferrer me">{websiteName}</a>
+			<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 fa-solid fa-cake-candles"></i> [[user:age]]</span></span>
+				<span class="fs-6 ff-secondary">{age}</span>
 			</div>
 		</div>
 		{{{ end }}}
 
-		{{{ if location }}}
+		{{{ each customUserFields }}}
+		{{{ if ./value }}}
 		<div class="stat">
-			<div class="align-items-center justify-content-center card card-header px-0 py-3 border-0 rounded-1 h-100 gap-2">
-				<span class="stat-label text-xs fw-semibold"><i class="text-muted fa-solid fa-map-pin"></i> <span>[[user:location]]</span></span>
-				<span class="text-center text-break w-100 px-2 fs-6 ff-secondary">{location}</span>
+			<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>
+				{{{ if (./type == "input-link") }}}
+				<a class="text-sm text-center text-break w-100 px-2 ff-secondary text-underline text-reset" href="{./value}" rel="nofollow noreferrer">{./linkValue}</a>
+				{{{ else }}}
+				<span class="text-center {{{ if (./type == "input-number") }}}fs-2{{{else }}}fs-6{{{ end }}} ff-secondary">{./value}</span>
+				{{{ end }}}
 			</div>
 		</div>
 		{{{ end }}}
-
-		{{{ if age }}}
-		<div class="stat">
-			<div class="align-items-center justify-content-center card card-header px-0 py-3 border-0 rounded-1 h-100 gap-2">
-				<span class="stat-label text-xs fw-semibold"><span><i class="text-muted fa-solid fa-cake-candles"></i> [[user:age]]</span></span>
-				<span class="fs-6 ff-secondary">{age}</span>
-			</div>
-		</div>
 		{{{ end }}}
 	</div>
 </div>

package/templates/account/read.tpl

@@ -0,0 +1 @@
+<!-- IMPORT account/topics.tpl -->

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>
@@ -119,7 +119,7 @@
 				<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/account/shares.tpl

@@ -0,0 +1,20 @@
+<!-- IMPORT partials/account/header.tpl -->
+
+<div class="d-flex justify-content-between align-items-center mb-3">
+	<div class="d-flex gap-1">
+		<h3 class="fw-semibold fs-5">[[pages:account/shares, {username}]]</h3>
+	</div>
+</div>
+
+{{{ if !topics.length }}}
+<div class="alert alert-warning text-center">{noItemsFoundKey}</div>
+{{{ end }}}
+
+<div class="category">
+	<!-- IMPORT partials/topics_list.tpl -->
+	{{{ if config.usePagination }}}
+	<!-- IMPORT partials/paginator.tpl -->
+	{{{ end }}}
+</div>
+
+<!-- IMPORT partials/account/footer.tpl -->

package/templates/account/topics.tpl

@@ -2,10 +2,10 @@
 
 <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">[[global:topics]]</h3>
+		<h3 class="fw-semibold fs-5 mb-0 align-self-center">[[global:topics]]</h3>
 		{{{ if showSort }}}
 		<div class="btn-group bottom-sheet" component="thread/sort">
-			<button title="[[global:sort]]" class="btn-ghost-sm dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" type="button"><i class="fa-solid fa-arrow-up-wide-short"></i></button>
+			<button title="[[global:sort]]" class="btn btn-ghost btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" type="button"><i class="fa-solid fa-arrow-up-wide-short"></i></button>
 			<ul class="dropdown-menu p-1 text-sm" role="menu">
 				{{{each sortOptions }}}
 				<li>
@@ -22,9 +22,10 @@
 
 	<div class="d-flex gap-1">
 		{{{ if canEdit }}}
-		<a href="{config.relative_path}/user/{userslug}/topics" class="btn-ghost-sm ff-secondary fw-semibold {{{ if template.account/topics }}}active{{{ end }}}">[[global:header.recent]]</a>
-		<a href="{config.relative_path}/user/{userslug}/watched"class="btn-ghost-sm ff-secondary fw-semibold {{{ if template.account/watched }}}active{{{ end }}}">[[user:watched]]</a>
-		<a href="{config.relative_path}/user/{userslug}/ignored" class="btn-ghost-sm ff-secondary fw-semibold {{{ if template.account/ignored }}}active{{{ end }}}">[[user:ignored]]</a>
+		<a href="{config.relative_path}/user/{userslug}/topics" class="btn btn-ghost btn-sm ff-secondary fw-semibold {{{ if template.account/topics }}}active{{{ end }}}">[[global:header.recent]]</a>
+		<a href="{config.relative_path}/user/{userslug}/watched"class="btn btn-ghost btn-sm ff-secondary fw-semibold {{{ if template.account/watched }}}active{{{ end }}}">[[user:watched]]</a>
+		<a href="{config.relative_path}/user/{userslug}/ignored" class="btn btn-ghost btn-sm ff-secondary fw-semibold {{{ if template.account/ignored }}}active{{{ end }}}">[[user:ignored]]</a>
+		<a href="{config.relative_path}/user/{userslug}/read" class="btn btn-ghost btn-sm ff-secondary fw-semibold {{{ if template.account/read }}}active{{{ end }}}">[[user:read]]</a>
 		{{{ end }}}
 	</div>
 </div>

package/templates/admin/plugins/harmony.tpl

@@ -11,6 +11,7 @@
 				<div class="form-check form-switch">
 					<input type="checkbox" class="form-check-input" id="enableBreadcrumbs" name="enableBreadcrumbs" />
 					<label for="enableBreadcrumbs" class="form-check-label">[[themes/harmony:settings.enableBreadcrumbs]]</label>
+					<p class="form-text">[[themes/harmony:settings.enableBreadcrumbs.why]]</p>
 				</div>
 				<div class="form-check form-switch">
 					<input type="checkbox" class="form-check-input" id="centerHeaderElements" name="centerHeaderElements" />

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

@@ -10,15 +10,15 @@
 			<div class="text-sm d-flex flex-wrap align-items-center gap-2">
 				[[topic:sort-by]]
 				<div class="d-flex gap-2">
-					<a href="?sort=alpha" class="btn-ghost ff-secondary fw-semibold {{{ if (sort == "alpha") }}}active{{{ end }}}">[[groups:details.group-name]]</a>
-					<a href="?sort=count" class="btn-ghost ff-secondary fw-semibold {{{ if (sort == "count") }}}active{{{ end }}}">[[groups:details.member-count]]</a>
-					<a href="?sort=date" class="btn-ghost ff-secondary fw-semibold {{{ if (sort == "date") }}}active{{{ end }}}">[[groups:details.creation-date]]</a>
+					<a href="?sort=alpha" class="btn btn-ghost btn-sm ff-secondary fw-semibold {{{ if (sort == "alpha") }}}active{{{ end }}}">[[groups:details.group-name]]</a>
+					<a href="?sort=count" class="btn btn-ghost btn-sm ff-secondary fw-semibold {{{ if (sort == "count") }}}active{{{ end }}}">[[groups:details.member-count]]</a>
+					<a href="?sort=date" class="btn btn-ghost btn-sm ff-secondary fw-semibold {{{ if (sort == "date") }}}active{{{ end }}}">[[groups:details.creation-date]]</a>
 				</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]]">
@@ -42,7 +42,7 @@
 
 	<hr />
 
-	<div component="groups/container" class="row" id="groups-list" data-nextstart={nextStart}>
+	<div component="groups/container" class="row" id="groups-list">
 		{{{ if groups.length }}}
 		<!-- IMPORT partials/groups/list.tpl -->
 		{{{ else }}}
@@ -53,4 +53,6 @@
 		</div>
 		{{{ end }}}
 	</div>
+
+	<!-- IMPORT partials/paginator.tpl -->
 </div>

package/templates/notifications.tpl

@@ -12,7 +12,7 @@
 				{{{ if ./separator }}}
 				<hr/>
 				{{{ else }}}
-				<a class="btn-ghost ff-secondary fw-semibold {{{ if ./selected }}}active{{{ end }}}" href="{config.relative_path}/notifications?filter={./filter}">
+				<a class="btn btn-ghost d-flex gap-2 text-start 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>
 					<span class="flex-shrink-0 text-xs" title="{./count}">{humanReadableNumber(./count)}</span>
 				</a>