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

package/templates/partials/account/header.tpl

@@ -1,20 +1,14 @@
 <div class="account w-100 mx-auto">
-	<div data-widget-area="header">
-		{{{each widgets.header}}}
-		{{widgets.header.html}}
-		{{{end}}}
-	</div>
-
 	<div class="cover position-absolute start-0 top-0 w-100" component="account/cover" style="background-image: url({cover:url}); background-position: {cover:position};">
 		<div class="container">
 			{{{ if allowCoverPicture }}}
 			{{{ if canEdit }}}
 			<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>
+				<a href="#" class="upload p-2 m-2 rounded-1 text-bg-light opacity-75"><i class="fa fa-fw fa-upload"></i></a>
+				<a href="#" class="resize p-2 m-2 rounded-1 text-bg-light opacity-75"><i class="fa fa-fw fa-arrows"></i></a>
+				<a href="#" class="remove p-2 m-2 rounded-1 text-bg-light opacity-75"><i class="fa fa-fw fa-times"></i></a>
 			</div>
-			<div class="save text-bg-primary">[[groups:cover-save]] <i class="fa fa-fw fa-floppy-o"></i></div>
+			<a href="#" class="save text-bg-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 }}}
 			{{{ end }}}
@@ -25,9 +19,9 @@
 		<div {{{ if (allowProfilePicture && isSelfOrAdminOrGlobalModerator)}}}component="profile/change/picture"{{{ end }}} class="avatar-wrapper border border-white border-4 rounded-circle position-relative align-self-center align-self-md-start hover-parent" style="margin-top: -75px;">
 			{buildAvatar(@value, "142px", true)}
 			{{{ if (allowProfilePicture && isSelfOrAdminOrGlobalModerator)}}}
-			<div component="profile/change/picture" class="d-none d-md-block pointer p-2 rounded-1 opacity-75 text-bg-light position-absolute top-50 start-50 translate-middle hover-visible">
+			<a href="#" component="profile/change/picture" class="d-none d-md-block pointer p-2 rounded-1 text-bg-light position-absolute top-50 start-50 translate-middle hover-opacity-75">
 				<span class="upload"><i class="fa fa-fw fa-upload"></i></span>
-			</div>
+			</a>
 			{{{ end }}}
 		</div>
 
@@ -37,7 +31,7 @@
 					<h2 class="fullname fw-semibold fs-2 tracking-tight mb-0">{{{ if fullname }}}{fullname}{{{ else }}}{username}{{{ end }}}</h2>
 					<div class="d-flex flex-wrap gap-1 text-sm align-items-center">
 						<span class="username fw-bold">{{{ if !banned }}}@{username}{{{ else }}}[[user:banned]]{{{ end }}}</span>
-						<div class="d-flex align-items-center gap-1 p-1">
+						<div class="d-flex align-items-center gap-1 p-1 flex-wrap">
 							{{{ if selectedGroup.length }}}
 							{{{ each selectedGroup }}}
 							{{{ if ./slug }}}
@@ -65,8 +59,8 @@
 			<div class="flex-shrink-0 d-flex gap-1 align-self-stretch align-self-md-start justify-content-end">
 				{{{ if loggedIn }}}
 				{{{ if !isSelf }}}
-				<a component="account/unfollow" href="#" class="btn btn-info flex-fill{{{ if !isFollowing }}} hide{{{ end }}}">[[user:unfollow]]</a>
-				<a component="account/follow" href="#" class="btn btn-primary flex-fill{{{ if isFollowing }}} hide{{{ end }}}">[[user:follow]]</a>
+				<a component="account/unfollow" href="#" class="btn btn-outline-warning flex-fill{{{ if (!isFollowing && !isFollowPending) }}} hide{{{ end }}}">[[user:{{{ if isFollowPending }}}cancel-follow{{{ else }}}unfollow{{{ end }}}]]</a>
+				<a component="account/follow" href="#" class="btn btn-primary flex-fill{{{ if (isFollowing || isFollowPending) }}} hide{{{ end }}}">[[user:follow]]</a>
 				{{{ end }}}
 				{{{ end }}}
 
@@ -92,6 +86,12 @@
 		</div>
 	</div>
 
+	<div data-widget-area="header">
+		{{{each widgets.header}}}
+		{{widgets.header.html}}
+		{{{end}}}
+	</div>
+
 	<div class="d-flex flex-column flex-md-row">
 		<!-- IMPORT partials/account/sidebar-left.tpl -->
 		<div class="account-content flex-grow-1 ps-md-2 ps-lg-3 ps-xl-4" style="min-width: 0;">

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

@@ -1,9 +1,10 @@
 <div class="flex-shrink-0 pe-2 border-end-md text-sm mb-3 flex-basis-md-200">
 	<div class="sticky-md-top d-flex flex-row flex-md-column flex-wrap gap-1" style="top: 1rem;z-index: 1;">
-		<a href="{config.relative_path}/user/{userslug}" class="btn-ghost ff-secondary fw-semibold {{{ if template.account/profile }}}active{{{ end }}}">
+		<a href="{config.relative_path}/user/{userslug}" class="btn btn-ghost btn-sm text-start ff-secondary fw-semibold {{{ if template.account/profile }}}active{{{ end }}}">
 			<div class="flex-grow-1">[[global:about]]</div>
 		</a>
-		<a href="{config.relative_path}/user/{userslug}/posts"class="btn-ghost ff-secondary fw-semibold
+
+		<a href="{config.relative_path}/user/{userslug}/posts"class="btn btn-ghost btn-sm text-start ff-secondary fw-semibold d-flex gap-2 align-items-center
 			{{{ if template.account/posts }}}active{{{ end }}}
 			{{{ if template.account/best }}}active{{{ end }}}
 			{{{ if template.account/controversial }}}active{{{ end }}}
@@ -13,52 +14,60 @@
 			<div class="flex-grow-1">[[global:posts]]</div>
 			<span class="flex-shrink-0 text-xs" title="{counts.posts}">{humanReadableNumber(counts.posts)}</span>
 		</a>
-		<a href="{config.relative_path}/user/{userslug}/topics" class="btn-ghost ff-secondary fw-semibold
+
+		<a href="{config.relative_path}/user/{userslug}/topics" class="btn btn-ghost btn-sm text-start ff-secondary fw-semibold d-flex gap-2 align-items-center
 			{{{ if template.account/topics }}}active{{{ end }}}
 			{{{ if template.account/watched }}}active{{{ end }}}
 			{{{ if template.account/ignored }}}active{{{ end }}}">
 			<div class="flex-grow-1">[[global:topics]]</div>
 			<span class="flex-shrink-0 text-xs" title="{counts.topics}">{humanReadableNumber(counts.topics)}</span>
 		</a>
-		<a href="{config.relative_path}/user/{userslug}/groups" class="btn-ghost ff-secondary fw-semibold
+
+		<a href="{config.relative_path}/user/{userslug}/shares" class="btn btn-ghost btn-sm text-start ff-secondary fw-semibold d-flex gap-2 align-items-center
+			{{{ if template.account/shares }}}active{{{ end }}}">
+			<div class="flex-grow-1">[[user:shares]]</div>
+			<span class="flex-shrink-0 text-xs" title="{counts.shares}">{humanReadableNumber(counts.shares)}</span>
+		</a>
+
+		<a href="{config.relative_path}/user/{userslug}/groups" class="btn btn-ghost btn-sm text-start ff-secondary fw-semibold d-flex gap-2 align-items-center
 			{{{ if template.account/groups }}}active{{{ end }}}">
 			<div class="flex-grow-1">[[global:header.groups]]</div>
 			<span class="flex-shrink-0 text-xs" title="{counts.groups}">{humanReadableNumber(counts.groups)}</span>
 		</a>
 
-		<a href="{config.relative_path}/user/{userslug}/followers" class="btn-ghost ff-secondary fw-semibold
+		<a href="{config.relative_path}/user/{userslug}/followers" class="btn btn-ghost btn-sm text-start ff-secondary fw-semibold d-flex gap-2 align-items-center
 			{{{ if template.account/followers }}}active{{{ end }}}">
 			<div class="flex-grow-1">[[user:followers]]</div>
 			<span class="flex-shrink-0 text-xs" title="{counts.followers}">{humanReadableNumber(counts.followers)}</span>
 		</a>
 
-		<a href="{config.relative_path}/user/{userslug}/following" class="btn-ghost ff-secondary fw-semibold
+		<a href="{config.relative_path}/user/{userslug}/following" class="btn btn-ghost btn-sm text-start ff-secondary fw-semibold d-flex gap-2 align-items-center
 			{{{ if template.account/following }}}active{{{ end }}}">
 			<div class="flex-grow-1">[[user:following]]</div>
 			<span class="flex-shrink-0 text-xs" title="{counts.following}">{humanReadableNumber(counts.following)}</span>
 		</a>
 
 		{{{ if canEdit }}}
-		<a href="{config.relative_path}/user/{userslug}/categories" class="btn-ghost ff-secondary fw-semibold
+		<a href="{config.relative_path}/user/{userslug}/categories" class="btn btn-ghost btn-sm text-start ff-secondary fw-semibold d-flex gap-2 align-items-center
 			{{{ if template.account/categories }}}active{{{ end }}}">
 			<div class="flex-grow-1">[[user:watched-categories]]</div>
 			<span class="flex-shrink-0 text-xs" title="{counts.categoriesWatched}">{counts.categoriesWatched}</span>
 		</a>
 		{{{ if isSelf }}}
-		<a href="{config.relative_path}/user/{userslug}/tags" class="btn-ghost ff-secondary fw-semibold
+		<a href="{config.relative_path}/user/{userslug}/tags" class="btn btn-ghost btn-sm text-start ff-secondary fw-semibold d-flex gap-2 align-items-center
 			{{{ if template.account/tags }}}active{{{ end }}}">
 			<div class="flex-grow-1">[[user:watched-tags]]</div>
 			<span class="flex-shrink-0 text-xs" title="{counts.tagsWatched}">{counts.tagsWatched}</span>
 		</a>
 		{{{ end }}}
 
-		<a href="{config.relative_path}/user/{userslug}/blocks" class="btn-ghost ff-secondary fw-semibold
+		<a href="{config.relative_path}/user/{userslug}/blocks" class="btn btn-ghost btn-sm text-start ff-secondary fw-semibold d-flex gap-2 align-items-center
 			{{{ if template.account/blocks }}}active{{{ end }}}">
 			<div class="flex-grow-1">[[user:blocked-users]]</div>
 			<span class="flex-shrink-0 text-xs" title="{counts.blocks}">{humanReadableNumber(counts.blocks)}</span>
 		</a>
 
-		<a href="{config.relative_path}/user/{userslug}/uploads" class="btn-ghost ff-secondary fw-semibold
+		<a href="{config.relative_path}/user/{userslug}/uploads" class="btn btn-ghost btn-sm text-start ff-secondary fw-semibold d-flex gap-2 align-items-center
 			{{{ if template.account/uploads }}}active{{{ end }}}">
 			<div class="flex-grow-1">[[global:uploads]]</div>
 			<span class="flex-shrink-0 text-xs" title="{counts.uploaded}">{humanReadableNumber(counts.uploaded)}</span>
@@ -67,15 +76,20 @@
 
 		{{{ if (loggedIn && (!isSelf && !banned)) }}}
 		<hr class="w-100 my-2"/>
-		<a href="#" component="account/flag" class="btn-ghost-sm ff-secondary">
+
+		<a href="#" component="account/flag" class="btn btn-ghost btn-sm ff-secondary d-flex align-items-center gap-2 text-start {{{if flagId }}}hidden{{{end}}}">
 			<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 href="#" component="account/block" class="btn-ghost-sm ff-secondary {{{ if isBlocked }}}hidden{{{ end }}}">
+		<a href="#" component="account/already-flagged" class="btn btn-ghost btn-sm ff-secondary d-flex align-items-center gap-2 text-start {{{if !flagId }}}hidden{{{end}}}" 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 btn-ghost btn-sm ff-secondary d-flex align-items-center gap-2 text-start {{{ 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>
 		</a>
-		<a href="#" component="account/unblock" class="btn-ghost-sm ff-secondary {{{ if !isBlocked }}}hidden{{{ end }}}">
+		<a href="#" component="account/unblock" class="btn btn-ghost btn-sm ff-secondary d-flex align-items-center gap-2 text-start {{{ if !isBlocked }}}hidden{{{ end }}}">
 			<i class="flex-shrink-0 fa-solid fa-ban text-danger"></i>
 			<div class="flex-grow-1 text-nowrap">[[user:unblock-user]]</div>
 		</a>
@@ -83,18 +97,18 @@
 
 		{{{ if canEdit }}}
 		<hr class="w-100 my-2"/>
-		<a href="{config.relative_path}/user/{userslug}/edit" class="btn-ghost-sm ff-secondary text-xs
+		<a href="{config.relative_path}/user/{userslug}/edit" class="btn btn-ghost btn-sm ff-secondary text-xs text-start
 		{{{ if template.account/edit }}}active{{{ end }}}">
 			<div class="flex-grow-1">[[user:edit-profile]]</div>
 		</a>
-		<a href="{config.relative_path}/user/{userslug}/settings" class="btn-ghost-sm ff-secondary text-xs
+		<a href="{config.relative_path}/user/{userslug}/settings" class="btn btn-ghost btn-sm ff-secondary text-xs text-start
 			{{{ if template.account/settings }}}active{{{ end }}}">
 			<div class="flex-grow-1">[[user:settings]]</div>
 		</a>
 		{{{ end }}}
 
 		{{{ each profile_links }}}
-		<a href="{config.relative_path}/user/{userslug}/{./route}" class="btn-ghost-sm ff-secondary text-xs plugin-link {{{ if ./public }}}public{{{ else }}}private{{{ end }}} {{{ if (url == ./url) }}}active{{{ end }}}" id="{./id}">
+		<a href="{config.relative_path}/user/{userslug}/{./route}" class="btn btn-ghost btn-sm ff-secondary text-xs text-start plugin-link {{{ if ./public }}}public{{{ else }}}private{{{ end }}} {{{ if (url == ./url) }}}active{{{ end }}}" id="{./id}">
 			<div class="flex-grow-1">{./name}</div>
 		</a>
 		{{{end}}}

package/templates/partials/breadcrumbs-json-ld.tpl

@@ -1,26 +1,16 @@
-<script type="application/ld+json">
-{
-	"@context": "https://schema.org",
-	"@type": "BreadcrumbList",
-	"itemListElement": [
-		{
-			"@type": "ListItem",
-			"position": 1,
-			"name": "{config.siteTitle}",
-			"item": "{breadcrumbs.0.url}"
-		}
-		{{{ each breadcrumbs }}}
-		{{{ if !@first}}}
-		,{
-			"@type": "ListItem",
-			"position": {increment(@index, "1")},
-			"name": "{stripTags(./text)}"
-			{{{ if !@last }}}
-			,"item": "{./url}"
-			{{{ end }}}
-		}
-		{{{ end }}}
-		{{{ end }}}
-	]
+<script type="application/ld+json">{
+"@context": "https://schema.org",
+"@type": "BreadcrumbList",
+"itemListElement": [{
+	"@type": "ListItem",
+	"position": 1,
+	"name": "{config.siteTitle}",
+	"item": "{breadcrumbs.0.url}"
 }
-</script>
+{{{ each breadcrumbs }}}{{{ if !@first}}},{
+	"@type": "ListItem",
+	"position": {increment(@index, "1")},
+	"name": "{stripTags(./text)}"
+	{{{ if !@last }}},"item": "{./url}"{{{ end }}}
+}{{{ end }}}{{{ end }}}
+]}</script>

package/templates/partials/categories/item.tpl

@@ -5,7 +5,7 @@
 		<div class="flex-shrink-0">
 		{buildCategoryIcon(@value, "40px", "rounded-1")}
 		</div>
-		<div class="flex-grow-1 d-flex flex-wrap gap-1">
+		<div class="flex-grow-1 d-flex flex-wrap gap-1 me-0 me-lg-2">
 			<h2 class="title text-break fs-4 fw-semibold m-0 tracking-tight w-100">
 				<!-- IMPORT partials/categories/link.tpl -->
 			</h2>
@@ -16,23 +16,23 @@
 			{{{ end }}}
 			{{{ if !config.hideSubCategories }}}
 			{{{ if ./children.length }}}
-			<div class="category-children row row-cols-2 g-2 my-1 w-100">
+			<ul class="list-unstyled category-children row row-cols-1 row-cols-md-2 g-2 my-1 w-100">
 				{{{ each ./children }}}
 				{{{ if !./isSection }}}
-				<span class="category-children-item small">
-					<div class="d-flex align-items-center gap-1">
-						<i class="fa fa-fw fa-caret-right text-primary"></i>
+				<li class="category-children-item small">
+					<div class="d-flex gap-1">
+						<i class="fa fa-fw fa-caret-right text-primary" style="line-height: var(--bs-body-line-height);"></i>
 						<a href="{{{ if ./link }}}{./link}{{{ else }}}{config.relative_path}/category/{./slug}{{{ end }}}" class="text-reset fw-semibold">{./name}</a>
 					</div>
-				</span>
+				</li>
 				{{{ end }}}
 				{{{ end }}}
-			</div>
+			</ul>
 			{{{ end }}}
 			{{{ end }}}
 		</div>
 	</div>
-	{{{ if (!./link && !./isSection) }}}
+	{{{ if !./link }}}
 	<div class="d-flex col-lg-5 col-12 align-content-stretch">
 		<div class="meta stats d-none d-lg-grid col-6 gap-1 pe-2 text-muted" style="grid-template-columns: 1fr 1fr;">
 			<div class="card card-header border-0 p-2 overflow-hidden rounded-1 d-flex flex-column align-items-center">

package/templates/partials/categories/lastpost.tpl

@@ -3,7 +3,7 @@
 	{{{ if @first }}}
 	<div component="category/posts" class="ps-2 text-xs d-flex flex-column h-100 gap-1">
 		<div class="text-nowrap text-truncate">
-			<a class="text-decoration-none" href="{config.relative_path}/user/{./user.userslug}">{buildAvatar(posts.user, "18px", true, "avatar-tooltip")}</a>
+			<a class="text-decoration-none avatar-tooltip" title="{./user.displayname}" href="{config.relative_path}/user/{./user.userslug}">{buildAvatar(posts.user, "18px", true)}</a>
 			<a class="permalink text-muted timeago text-xs" href="{config.relative_path}/topic/{./topic.slug}{{{ if ./index }}}/{./index}{{{ end }}}" title="{./timestampISO}" aria-label="[[global:lastpost]]"></a>
 		</div>
 		<div class="post-content text-xs text-break line-clamp-sm-2 lh-sm position-relative flex-fill">

package/templates/partials/category/subcategory.tpl

@@ -13,7 +13,7 @@
 		{{{end}}}
 	</ul>
 	{{{ if hasMoreSubCategories}}}
-	<button class="btn-ghost-sm ff-secondary mb-2" component="category/load-more-subcategories">[[category:x-more-categories, {subCategoriesLeft}]]</button>
+	<button class="btn btn-ghost btn-sm ff-secondary mb-2" component="category/load-more-subcategories">[[category:x-more-categories, {subCategoriesLeft}]]</button>
 	{{{ end }}}
 </div>
 {{{ end }}}

package/templates/partials/groups/list.tpl

@@ -6,7 +6,7 @@
 			<div class="card-body d-flex flex-column gap-1 border border-top-0 rounded-bottom h-100">
 				<div class="d-flex">
 					<div class="flex-grow-1 fs-6 fw-semibold">{./displayName}</div>
-					<div class="flex-shrink-0 text-sm"><i class="text-muted fa-solid fa-user"></i> {./memberCount}</div>
+					<div class="flex-shrink-0 text-sm"><i class="text-muted fa-solid fa-user"></i> {formattedNumber(./memberCount)}</div>
 				</div>
 				<div class="text-sm">{./description}</div>
 			</div>

package/templates/partials/groups/memberlist.tpl

@@ -4,7 +4,7 @@
 		<button component="groups/members/add" type="button" class="btn btn-primary btn-sm me-3" title="[[groups:details.add-member]]"><i class="fa fa-user-plus"></i> [[groups:details.add-member]]</button>
 	</div>
 	{{{ end }}}
-	<div class="">
+	<div>
 		<div class="input-group">
 			<input class="form-control form-control-sm" type="text" component="groups/members/search" placeholder="[[global:search]]"/>
 			<button class="btn btn-primary btn-sm search-button" type="button">

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

@@ -1,25 +1,25 @@
 <div class="flex-shrink-0 pe-2 border-end-md text-sm mb-3 flex-basis-md-200">
 	<div class="nav sticky-md-top d-flex flex-row flex-md-column flex-wrap gap-1" style="top: 1rem; z-index: 1;">
-		<button data-bs-toggle="tab" data-bs-target="#groups-posts" class="btn-ghost ff-secondary fw-semibold {{{ if template.groups/details }}}active{{{ end }}}">
+		<button data-bs-toggle="tab" data-bs-target="#groups-posts" class="btn btn-ghost btn-sm text-start d-flex align-items-center ff-secondary fw-semibold {{{ if template.groups/details }}}active{{{ end }}}">
 			<div class="flex-grow-1">[[global:posts]]</div>
 		</button>
-		<button data-bs-toggle="tab" data-bs-target="#groups-members" class="btn-ghost ff-secondary fw-semibold">
+		<button data-bs-toggle="tab" data-bs-target="#groups-members" class="btn btn-ghost btn-sm text-start d-flex align-items-center ff-secondary fw-semibold gap-2">
 			<div class="flex-grow-1">[[groups:members]]</div>
-			<span component="group/member/count" class="flex-shrink-0 text-xs" title="{group.memberCount}">{humanReadableNumber(group.memberCount)}</span>
+			<span component="group/member/count" class="flex-shrink-0 text-xs lh-1" title="{group.memberCount}">{humanReadableNumber(group.memberCount)}</span>
 		</button>
 
 		{{{ if group.isOwner }}}
-		<button data-bs-toggle="tab" data-bs-target="#groups-pending" class="btn-ghost ff-secondary fw-semibold">
+		<button data-bs-toggle="tab" data-bs-target="#groups-pending" class="btn btn-ghost btn-sm text-start d-flex align-items-center ff-secondary fw-semibold gap-2">
 			<div class="flex-grow-1">[[groups:details.pending]]</div>
-			<span component="group/pending/count" class="flex-shrink-0 text-xs" title="{group.pending.length}">{humanReadableNumber(group.pending.length)}</span>
+			<span component="group/pending/count" class="flex-shrink-0 text-xs lh-1" title="{group.pending.length}">{humanReadableNumber(group.pending.length)}</span>
 		</button>
 
-		<button data-bs-toggle="tab" data-bs-target="#groups-invited" class="btn-ghost ff-secondary fw-semibold">
+		<button data-bs-toggle="tab" data-bs-target="#groups-invited" class="btn btn-ghost btn-sm text-start d-flex align-items-center ff-secondary fw-semibold gap-2">
 			<div class="flex-grow-1">[[groups:details.invited]]</div>
-			<span component="group/invited/count" class="flex-shrink-0 text-xs" title="{group.invited.length}">{humanReadableNumber(group.invited.length)}</span>
+			<span component="group/invited/count" class="flex-shrink-0 text-xs lh-1" title="{group.invited.length}">{humanReadableNumber(group.invited.length)}</span>
 		</button>
 
-		<button data-bs-toggle="tab" data-bs-target="#groups-admin" class="btn-ghost ff-secondary fw-semibold">
+		<button data-bs-toggle="tab" data-bs-target="#groups-admin" class="btn btn-ghost btn-sm text-start d-flex align-items-center ff-secondary fw-semibold">
 			<div class="flex-grow-1">[[global:header.admin]]</div>
 		</button>
 		{{{ end }}}

package/templates/partials/header/brand.tpl

@@ -1,6 +1,7 @@
-{{{ if (brand:logo || config.showSiteTitle)}}}
+{{{ if (brand:logo || (config.showSiteTitle || widgets.brand-header.length)) }}}
 <div class="container-lg px-md-4 brand-container">
 	<div class="col-12 d-flex border-bottom pb-3 {{{ if config.theme.centerHeaderElements }}}justify-content-center{{{ end }}}">
+		{{{ if (brand:logo || config.showSiteTitle) }}}
 		<div component="brand/wrapper" class="d-flex align-items-center gap-3 p-2 rounded-1 align-content-stretch ">
 			{{{ if brand:logo }}}
 			<a component="brand/anchor" href="{{{ if brand:logo:url }}}{brand:logo:url}{{{ else }}}{relative_path}/{{{ end }}}" title="[[global:header.brand-logo]]">
@@ -14,6 +15,7 @@
 			</a>
 			{{{ end }}}
 		</div>
+		{{{ end }}}
 		{{{ if widgets.brand-header.length }}}
 		<div data-widget-area="brand-header" class="flex-fill gap-3 p-2 align-self-center">
 			{{{each widgets.brand-header}}}

package/templates/partials/mobile-footer.tpl

@@ -1,4 +1,4 @@
-<div component="bottombar" class="bottombar d-flex flex-column d-lg-none fixed-bottom ff-secondary gap-1 align-items-center">
+<div component="bottombar" class="bottombar d-flex flex-column d-lg-none fixed-bottom ff-secondary gap-1 align-items-center" style="bottom: 0px;">
 
 	<!-- IMPORT partials/topic/navigator-mobile.tpl -->
 
@@ -15,16 +15,13 @@
 					{{{ each navigation }}}
 					{{{ if displayMenuItem(@root, @index) }}}
 					<li class="nav-item {./class}{{{ if ./dropdown }}} dropend{{{ end }}}" title="{./title}">
-						<a class="nav-link navigation-link px-3 py-2 {{{ if ./dropdown }}}dropdown-toggle{{{ end }}}"
-						{{{ if ./dropdown }}} href="#" role="button" data-bs-toggle="collapse" data-bs-target="#collapse-target-{@index}" onclick="event.stopPropagation();" {{{ else }}} href="{./route}"{{{ end }}} {{{ if ./id }}}id="{./id}"{{{ end }}}{{{ if ./targetBlank }}} target="_blank"{{{ end }}}>
+						<a class="nav-link navigation-link px-3 py-2 {{{ if ./dropdown }}}dropdown-toggle{{{ end }}}" {{{ if ./dropdown }}} href="#" role="button" data-bs-toggle="collapse" data-bs-target="#collapse-target-{@index}" onclick="event.stopPropagation();" {{{ else }}} href="{./route}"{{{ end }}} {{{ if ./id }}}id="{./id}"{{{ end }}}{{{ if ./targetBlank }}} target="_blank"{{{ end }}}>
 							<span class="d-inline-flex justify-content-between align-items-center w-100">
 								<span class="text-nowrap">
 									{{{ if ./iconClass }}}
 									<i class="fa fa-fw {./iconClass}" data-content="{./content}"></i>
 									{{{ end }}}
-									{{{ if ./text }}}
-									<span class="nav-text px-2 fw-semibold">{./text}</span>
-									{{{ end }}}
+									{{{ if ./text }}}<span class="nav-text px-2 fw-semibold">{./text}</span>{{{ end }}}
 								</span>
 								<span component="navigation/count" class="badge rounded-1 bg-primary {{{ if !./content }}}hidden{{{ end }}}">{./content}</span>
 							</span>

package/templates/partials/notifications_list.tpl

@@ -8,7 +8,7 @@
 {{{ each notifications }}}
 <div class="{./readClass}" data-nid="{./nid}" data-path="{./path}" {{{ if ./pid }}}data-pid="{./pid}"{{{ end }}}{{{ if ./tid }}}data-tid="{./tid}"{{{ end }}}>
 	<div class="d-flex gap-1 justify-content-between">
-		<div class="btn-ghost-sm d-flex gap-2 flex-grow-1 align-items-start">
+		<div class="btn btn-ghost btn-sm d-flex gap-2 flex-grow-1 text-start align-items-start">
 			<a class="flex-grow-0 flex-shrink-0" href="{{{ if ./user.userslug}}}{config.relative_path}/user/{./user.userslug}{{{ else }}}#{{{ end }}}">
 				{{{ if (./image && ./from) }}}
 				<img class="avatar avatar-rounded" style="--avatar-size: 32px;" src="{./image}" />
@@ -30,7 +30,7 @@
 		</div>
 		<div>
 			{{{ if ./nid }}}
-			<button class="mark-read btn-ghost-sm flex-grow-0 flex-shrink-0 p-1" style="width: 1.5rem; height: 1.5rem;">
+			<button class="mark-read btn btn-ghost btn-sm d-flex align-items-center justify-content-center flex-grow-0 flex-shrink-0 p-1" style="width: 1.5rem; height: 1.5rem;">
 				<i class="unread fa fa-2xs fa-circle text-primary {{{ if ./read }}}hidden{{{ end }}}" aria-label="[[unread:mark-as-read]]"></i>
 				<i class="read fa fa-2xs fa-circle-o text-secondary {{{ if !./read }}}hidden{{{ end }}}" aria-label="[[unread:mark-as-unread]]"></i>
 			</button>

package/templates/partials/post_bar.tpl

@@ -3,7 +3,7 @@
 		<div class="d-flex flex-row p-2 text-bg-light border rounded w-100 align-items-center">
 			<div class="d-flex me-auto mb-0 gap-2 align-items-center flex-wrap">
 				{{{ if loggedIn }}}
-				<button component="topic/mark-unread" class="btn-ghost-sm ff-secondary d-flex gap-2 align-items-center">
+				<button component="topic/mark-unread" class="btn btn-ghost btn-sm ff-secondary d-flex gap-2 align-items-center">
 					<i class="fa fa-fw fa-inbox text-primary"></i>
 					<span class="d-none d-md-inline fw-semibold">[[topic:mark-unread]]</span>
 				</button>
@@ -14,13 +14,11 @@
 				<!-- IMPORT partials/topic/tools.tpl -->
 
 				{{{ if (!feeds:disableRSS && rssFeedUrl) }}}
-				<a class="btn-ghost-sm d-none d-lg-flex align-self-stretch" target="_blank" href="{rssFeedUrl}" title="[[global:rss-feed]]"><i class="fa fa-rss text-primary"></i></a>
+				<a class="btn btn-ghost btn-sm d-none d-lg-flex align-items-center align-self-stretch" target="_blank" href="{rssFeedUrl}" title="[[global:rss-feed]]"><i class="fa fa-rss text-primary"></i></a>
 				{{{ end }}}
 
 				{{{ if browsingUsers }}}
-				<div class="hidden-xs">
-				<!-- IMPORT partials/topic/browsing-users.tpl -->
-				</div>
+				<div class="hidden-xs"><!-- IMPORT partials/topic/browsing-users.tpl --></div>
 				{{{ end }}}
 			</div>
 			<!-- IMPORT partials/topic/reply-button.tpl -->

package/templates/partials/posts_list_item.tpl

@@ -1,6 +1,6 @@
 <li component="post" class="posts-list-item  {{{ if ./deleted }}} deleted{{{ else }}}{{{ if ./topic.deleted }}} deleted{{{ end }}}{{{ end }}}{{{ if ./topic.scheduled }}} scheduled{{{ end }}}" data-pid="{./pid}" data-uid="{./uid}">
     <hr/>
-    <a class="topic-title fw-semibold fs-5 mb-2 text-reset text-break d-block" href="{config.relative_path}/post/{./pid}">
+    <a class="topic-title fw-semibold fs-5 mb-2 text-reset text-break d-block" href="{config.relative_path}/post/{encodeURIComponent(./pid)}">
     {{{ if ./isMainPost }}}<i class="fa fa-book text-muted" title="[[topic:topic]]"></i> {{{ end }}}{./topic.title}
     </a>
 

package/templates/partials/quick-search-results.tpl

@@ -1,7 +1,7 @@
 {{{ if multiplePages }}}
 <div class="show-more-container">
 	<div class="text-center d-block d-md-none">
-		<a href="{url}" class="btn btn-primary">
+		<a href="{url}" class="btn btn-sm btn-primary">
 			[[search:see-more-results, {matchCount}]]
 		</a>
 	</div>
@@ -9,19 +9,19 @@
 </div>
 {{{ end }}}
 
-<ul id="quick-search-results" class="quick-search-results list-unstyled mb-0 p-0 pe-1 overflow-auto overscroll-behavior-contain ff-base ghost-scrollbar" style="max-width:  400px; max-height: 500px;">
+<ul id="quick-search-results" class="quick-search-results list-unstyled mb-0 p-0 pe-1 overflow-auto overscroll-behavior-contain ff-base ghost-scrollbar" style="max-width: {dropdown.maxWidth}; max-height: {dropdown.maxHeight};">
 	<li role="separator" class="dropdown-divider d-none d-md-block"></li>
 	{{{ each posts }}}
 	<li data-tid="{posts.topic.tid}" data-pid="{posts.pid}" class="d-flex flex-column gap-1">
-		<a href="{config.relative_path}/post/{posts.pid}"
-			class="btn-ghost-sm ff-secondary rounded-1 text-reset d-block text-truncate px-2 py-1">
+		<a href="{config.relative_path}/post/{encodeURIComponent(posts.pid)}"
+			class="btn btn-ghost btn-sm ff-secondary rounded-1 text-start text-reset d-block text-truncate px-2 py-1">
 			<span class="quick-search-title fw-semibold text-sm">{posts.topic.title}</span>
 			<br/>
 			<p class="snippet text-xs text-break text-wrap mb-0">
 			{posts.snippet}
 			</p>
 		</a>
-		<div class="d-flex gap-1 post-info px-2 text-xs">
+		<div class="d-flex gap-2 post-info px-2 text-xs">
 			<div class="category-item d-inline-block ff-secondary">
 				{function.buildCategoryLabel, posts.category, "span"}
 			</div>

package/templates/partials/search-filters.tpl

@@ -176,7 +176,7 @@
 			<ul class="dropdown-menu p-1 text-sm" style="width: 300px;" role="menu">
 				<li class="px-3 py-1 d-flex flex-column gap-2">
 					<button id="save-preferences" class="btn btn-primary">[[search:save-preferences]]</button>
-					<button id="clear-preferences" class="btn-ghost border">[[search:clear-preferences]]</button>
+					<button id="clear-preferences" class="btn btn-ghost border">[[search:clear-preferences]]</button>
 				</li>
 			</ul>
 		</div>

package/templates/partials/search-results.tpl

@@ -17,7 +17,7 @@
 	{{{ each posts }}}
 	<hr/>
 	<div class="topic-row  mb-3">
-		<a class="topic-title fw-semibold fs-5 text-reset text-break" href="{config.relative_path}/post/{./pid}">
+		<a class="topic-title fw-semibold fs-5 text-reset text-break" href="{config.relative_path}/post/{encodeURIComponent(./pid)}">
 			{{{ if !./isMainPost }}}RE: {{{ end }}}{./topic.title}
 		</a>
 		<div class="post-body d-flex flex-column gap-1">

package/templates/partials/sidebar/chats.tpl

@@ -24,7 +24,7 @@
 						</div>
 					</div>
 					<div>
-						<button class="mark-read btn-ghost-sm" style="width: 1.5rem; height: 1.5rem;">
+						<button class="mark-read btn btn-ghost btn-sm d-flex align-items-center justify-content-center flex-grow-0 flex-shrink-0 p-1" style="width: 1.5rem; height: 1.5rem;">
 							<i class="unread fa fa-2xs fa-circle text-primary"></i>
 						</button>
 					</div>

package/templates/partials/sidebar/notifications.tpl

@@ -31,7 +31,7 @@
 						</div>
 					</div>
 					<div>
-						<button class="mark-read btn-ghost-sm" style="width: 1.5rem; height: 1.5rem;">
+						<button class="mark-read btn btn-ghost btn-sm d-flex align-items-center justify-content-center flex-grow-0 flex-shrink-0 p-1" style="width: 1.5rem; height: 1.5rem;">
 							<i class="unread fa fa-2xs fa-circle text-primary"></i>
 						</button>
 					</div>

package/templates/partials/sidebar/search.tpl

@@ -10,8 +10,8 @@
 			<div class="d-flex gap-1">
 				<input autocomplete="off" type="text" class="form-control" placeholder="[[global:search]]" name="query" value="" aria-label="[[search:type-to-search]]">
 
-				<a class="btn-ghost advanced-search-link" href="{config.relative_path}/search" title="[[search:advanced-search]]">
-					<i class="fa fa-gears fa-fw text-muted"></i>
+				<a class="btn btn-ghost advanced-search-link p-2" href="{config.relative_path}/search" title="[[search:advanced-search]]">
+					<i class="fa fa-gears text-muted"></i>
 				</a>
 			</div>
 

package/templates/partials/sidebar-left.tpl

@@ -3,8 +3,7 @@
 		{{{ each navigation }}}
 		{{{ if displayMenuItem(@root, @index) }}}
 		<li class="nav-item mx-2 {./class}{{{ if ./dropdown }}} dropend{{{ end }}}" title="{./title}">
-			<a class="nav-link navigation-link d-flex gap-2 justify-content-between align-items-center {{{ if ./dropdown }}}dropdown-toggle{{{ end }}}"
-			{{{ if ./dropdown }}} href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" {{{ else }}} href="{./route}"{{{ end }}} {{{ if ./id }}}id="{./id}"{{{ end }}}{{{ if ./targetBlank }}} target="_blank"{{{ end }}} {{{ if ./text }}}aria-label="{./text}"{{{ end }}}>
+			<a class="nav-link navigation-link d-flex gap-2 justify-content-between align-items-center {{{ if ./dropdown }}}dropdown-toggle{{{ end }}}" {{{ if ./dropdown }}} href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" {{{ else }}} href="{./route}"{{{ end }}} {{{ if ./id }}}id="{./id}"{{{ end }}}{{{ if ./targetBlank }}} target="_blank"{{{ end }}} {{{ if ./text }}}aria-label="{./text}"{{{ end }}}>
 				<span class="d-flex gap-2 align-items-center text-nowrap truncate-open">
 					<span class="position-relative">
 						{{{ if ./iconClass }}}
@@ -12,9 +11,7 @@
 						<span component="navigation/count" class="visible-closed position-absolute top-0 start-100 translate-middle badge rounded-1 bg-primary {{{ if !./content }}}hidden{{{ end }}}">{./content}</span>
 						{{{ end }}}
 					</span>
-					{{{ if ./text }}}
-					<span class="nav-text small visible-open fw-semibold text-truncate">{./text}</span>
-					{{{ end }}}
+					{{{ if ./text }}}<span class="nav-text small visible-open fw-semibold text-truncate">{./text}</span>{{{ end }}}
 				</span>
 				<span component="navigation/count" class="visible-open badge rounded-1 bg-primary {{{ if !./content }}}hidden{{{ end }}}">{./content}</span>
 			</a>

package/templates/partials/tags_list.tpl

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

package/templates/partials/topic/event.tpl

@@ -5,7 +5,7 @@
 	<span class="timeline-text small d-flex align-items-center gap-1 flex-wrap">
 		{./text}
 	</span>
-	{{{ if privileges.isAdminOrMod }}}
+	{{{ if (privileges.isAdminOrMod && ./id) }}}
 	<span component="topic/event/delete" data-topic-event-id="{./id}" data-topic-event-type="{./type}" class="timeline-text pointer" title="[[topic:delete-event]]"><i class="fa fa-trash"></i></span>
 	{{{ end }}}
 </li>