nodebb-theme-harmony 0.0.9 → 0.0.11

package/templates/groups/list.tpl

@@ -1,4 +1,3 @@
-<!-- IMPORT partials/breadcrumbs.tpl -->
 <div data-widget-area="header">
 	{{{each widgets.header}}}
 	{{widgets.header.html}}
@@ -6,20 +5,22 @@
 </div>
 <div class="groups list">
 	<h2 class="fw-semibold">[[pages:groups]]</h2>
-	<div class="row justify-content-between">
-		<div class="col-lg-6">
-			<div class="text-sm d-flex align-items-center gap-2">
+	<div class="d-flex flex-wrap justify-content-between">
+		<div class="mb-2 mb-md-0">
+			<div class="text-sm d-flex flex-wrap align-items-center gap-2">
 				[[topic:sort_by]]
-				<a href="?sort=alpha" class="btn-ghost fw-semibold {{{ if (sort == "alpha") }}}active{{{ end }}}">[[groups:details.group_name]]</a>
-				<a href="?sort=count" class="btn-ghost fw-semibold {{{ if (sort == "count") }}}active{{{ end }}}">[[groups:details.member_count]]</a>
-				<a href="?sort=date" class="btn-ghost fw-semibold {{{ if (sort == "date") }}}active{{{ end }}}">[[groups:details.creation_date]]</a>
+				<div class="d-flex gap-2">
+					<a href="?sort=alpha" class="btn-ghost fw-semibold {{{ if (sort == "alpha") }}}active{{{ end }}}">[[groups:details.group_name]]</a>
+					<a href="?sort=count" class="btn-ghost fw-semibold {{{ if (sort == "count") }}}active{{{ end }}}">[[groups:details.member_count]]</a>
+					<a href="?sort=date" class="btn-ghost fw-semibold {{{ if (sort == "date") }}}active{{{ end }}}">[[groups:details.creation_date]]</a>
+				</div>
 			</div>
 		</div>
-		<div class="col-lg-6">
+		<div class="">
 			<div class="d-flex justify-content-end gap-2">
 				<div class="">
 					{{{ if allowGroupCreation }}}
-					<button class="btn btn-primary btn-sm" data-action="new"><i class="fa fa-plus"></i> [[groups:new_group]]</button>
+					<button class="btn btn-primary btn-sm text-nowrap" data-action="new"><i class="fa fa-users"></i> [[groups:new_group]]</button>
 					{{{ end }}}
 					<select class="form-select hidden" id="search-sort">
 						<option value="alpha">[[groups:details.group_name]]</option>

package/templates/header.tpl

@@ -27,26 +27,8 @@
 	<div class="d-flex justify-content-between pb-4 pb-md-0">
 		<!-- IMPORT partials/sidebar-left.tpl -->
 
-		<main id="panel" class="d-flex flex-column gap-3 flex-grow-1 mt-3">
-			{{{ if (brand:logo || config.showSiteTitle)}}}
-			<div class="container brand-container">
-				<div class="col-12 d-flex border-bottom pb-3 {{{ if config.centerHeaderElements }}}justify-content-center{{{ end }}}">
-					<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 }}}">
-							<img component="brand/logo" alt="{brand:logo:alt}" class="{brand:logo:display}" src="{brand:logo}?{config.cache-buster}" />
-						</a>
-						{{{ end }}}
-
-						{{{ if config.showSiteTitle }}}
-						<a component="siteTitle" class="text-truncate align-self-stretch align-items-center d-flex" href="{{{ if title:url }}}{title:url}{{{ else }}}{relative_path}/{{{ end }}}">
-							<h1 class="fs-6 fw-bold text-body mb-0">{config.siteTitle}</h1>
-						</a>
-						{{{ end }}}
-					</div>
-				</div>
-			</div>
-			{{{ end }}}
+		<main id="panel" class="d-flex flex-column gap-3 flex-grow-1 mt-3" style="min-width: 0;">
+			<!-- IMPORT partials/header/brand.tpl -->
 			<script>
 				const headerEl = document.getElementById('header-menu');
 				if (headerEl) {
@@ -57,6 +39,6 @@
 					document.documentElement.style.setProperty('--panel-offset', `0px`);
 				}
 			</script>
-			<div class="container d-flex flex-column gap-2" id="content">
+			<div class="container d-flex flex-column gap-3" id="content">
 			<!-- IMPORT partials/noscript/warning.tpl -->
 			<!-- IMPORT partials/noscript/message.tpl -->

package/templates/login.tpl

@@ -27,7 +27,7 @@
 							<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>
+								<a id="reset-link" tabindex="-1" class="text-sm text-reset text-decoration-underline" href="{config.relative_path}/reset">[[login:forgot_password]]</a>
 								{{{ end }}}
 							</div>
 							<div>

package/templates/notifications.tpl

@@ -5,8 +5,8 @@
 
 	<hr class="text-muted opacity-25"/>
 
-	<div class="row">
-		<div class="col-12 col-md-3 col-lg-2 border-end-md text-sm mb-3">
+	<div class="d-flex flex-column flex-md-row">
+		<div class="flex-0 pe-2 border-end-md text-sm mb-3 flex-basis-md-200">
 			<div class="nav sticky-top d-flex flex-row flex-md-column flex-wrap gap-1" style="z-index: 1;">
 				{{{ each filters }}}
 				{{{ if ./separator }}}
@@ -20,8 +20,8 @@
 				{{{ end }}}
 			</div>
 		</div>
-		<div class="col-12 col-md-9 col-lg-10">
-			<ul class="notifications-list list-unstyled" data-nextstart="{nextStart}">
+		<div class="flex-1 ps-md-2 ps-lg-5">
+			<ul component="notifications/list" class="notifications-list list-unstyled" data-nextstart="{nextStart}">
 				<!-- IMPORT partials/notifications_list.tpl -->
 			</ul>
 			<!-- IMPORT partials/paginator.tpl -->

package/templates/partials/account/header.tpl

@@ -20,7 +20,7 @@
 	</div>
 </div>
 
-<div class="d-flex gap-2 w-100 pb-4 mb-4 mt-2 border-bottom">
+<div class="d-flex flex-column flex-md-row gap-2 w-100 pb-4 mb-4 mt-2 border-bottom">
 	<div class="avatar-wrapper border-4 position-relative align-self-start d-none d-md-block" style="margin-top: -75px;">
 		{{{ if picture }}}
 		<img src="{picture}" class="avatar avatar-rounded" style="--avatar-size: 142px;" />
@@ -28,62 +28,73 @@
 		<div class="avatar avatar-rounded" style="background-color: {icon:bgColor}; --avatar-size: 142px;" title="{username}">{icon:text}</div>
 		{{{ end }}}
 	</div>
-	<div class="d-flex flex-1 flex-column gap-2">
-		<div class="d-grid gap-1">
-			<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">
-					{{{ if selectedGroup.length }}}
-					{{{ each selectedGroup }}}
-					{{{ if ./slug }}}
-					<!-- IMPORT partials/groups/badge.tpl -->
-					{{{ end }}}
-					{{{ end }}}
+
+	<div class="avatar-wrapper border-4 position-relative align-self-center d-block d-md-none" style="margin-top: -75px;">
+		{{{ if picture }}}
+		<img src="{picture}" class="avatar avatar-rounded" style="--avatar-size: 142px;" />
+		{{{ else }}}
+		<div class="avatar avatar-rounded" style="background-color: {icon:bgColor}; --avatar-size: 142px;" title="{username}">{icon:text}</div>
+		{{{ end }}}
+	</div>
+
+	<div class="d-flex flex-column flex-md-row mt-1 justify-content-between w-100 gap-2">
+		<div class="d-flex flex-1 flex-row gap-2">
+			<div class="d-flex flex-column">
+				<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">
+						{{{ if selectedGroup.length }}}
+						{{{ each selectedGroup }}}
+						{{{ if ./slug }}}
+						<!-- IMPORT partials/groups/badge.tpl -->
+						{{{ end }}}
+						{{{ end }}}
+						{{{ end }}}
+					</div>
+				</div>
+
+				{{{ if isAdminOrGlobalModeratorOrModerator }}}
+				{{{ if banned }}}
+				<div class="text-xm text-muted">
+					{{{ if banned_until }}}
+					[[user:info.banned-until, {banned_until_readable}]]
+					{{{ else }}}
+					[[user:info.banned-permanently]]
 					{{{ end }}}
 				</div>
+				{{{ end }}}
+				{{{ end }}}
 			</div>
+		</div>
+
+		<div class="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>
+			{{{ end }}}
+			{{{ end }}}
 
-			{{{ if isAdminOrGlobalModeratorOrModerator }}}
-			{{{ if banned }}}
-			<div class="text-xm text-muted">
-				{{{ if banned_until }}}
-				[[user:info.banned-until, {banned_until_readable}]]
-				{{{ else }}}
-				[[user:info.banned-permanently]]
+			{{{ if (loggedIn && (!isSelf && (!banned && !config.disableChat))) }}}
+			<div class="btn-group flex-fill">
+				<a {{{ if hasPrivateChat }}}component="account/chat"{{{ else }}}component="account/new-chat"{{{ end }}} href="#" class="btn btn-light" role="button">[[user:chat]]</a>
+				{{{ if hasPrivateChat}}}
+				<button type="button" class="btn btn-light dropdown-toggle flex-0" data-bs-toggle="dropdown">
+					<i class="fa fa-caret-down"></i>
+				</button>
+				<ul class="dropdown-menu dropdown-menu-end" role="menu">
+					<li><a class="dropdown-item" href="#" component="account/new-chat">[[user:new_chat_with, {username}]]</a></li>
+				</ul>
 				{{{ end }}}
 			</div>
 			{{{ end }}}
+			{{{ if !isSelf }}}
+			{{{ if (isAdmin || (canBan || canMute ))}}}
+			<!-- IMPORT partials/account/admin-menu.tpl -->
 			{{{ end }}}
-		</div>
-	</div>
-
-	<div class="d-flex gap-1 align-self-start">
-		{{{ if loggedIn }}}
-		{{{ if !isSelf }}}
-		<a component="account/unfollow" href="#" class="btn btn-info{{{ if !isFollowing }}} hide{{{ end }}}">[[user:unfollow]]</a>
-		<a component="account/follow" href="#" class="btn btn-primary{{{ if isFollowing }}} hide{{{ end }}}">[[user:follow]]</a>
-		{{{ end }}}
-		{{{ end }}}
-
-		{{{ if (loggedIn && (!isSelf && (!banned && !config.disableChat))) }}}
-		<div class="btn-group">
-			<a {{{ if hasPrivateChat }}}component="account/chat"{{{ else }}}component="account/new-chat"{{{ end }}} href="#" class="btn btn-light" role="button">[[user:chat]]</a>
-			{{{ if hasPrivateChat}}}
-			<button type="button" class="btn btn-light dropdown-toggle" data-bs-toggle="dropdown">
-				<i class="fa fa-caret-down"></i>
-			</button>
-			<ul class="dropdown-menu dropdown-menu-end" role="menu">
-				<li><a class="dropdown-item" href="#" component="account/new-chat">[[user:new_chat_with, {username}]]</a></li>
-			</ul>
 			{{{ end }}}
 		</div>
-		{{{ end }}}
-		{{{ if !isSelf }}}
-		{{{ if (isAdmin || (canBan || canMute ))}}}
-		<!-- IMPORT partials/account/admin-menu.tpl -->
-		{{{ end }}}
-		{{{ end }}}
 	</div>
 </div>
 

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

@@ -1,5 +1,5 @@
-<div class="col-12 col-md-3 col-lg-2 border-end-md text-sm mb-3">
-	<div class="sticky-top d-flex flex-row flex-md-column flex-wrap gap-1" style="z-index: 1;">
+<div class="flex-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 fw-semibold {{{ if template.account/profile }}}active{{{ end }}}">
 			<div class="flex-1">[[global:about]]</div>
 		</a>
@@ -20,34 +20,39 @@
 			<div class="flex-1">[[global:topics]]</div>
 			<span class="text-xs human-readable-number" title="{counts.topics}">{counts.topics}</span>
 		</a>
-		<a href="{config.relative_path}/user/{userslug}/groups" class="btn-ghost fw-semibold">
+		<a href="{config.relative_path}/user/{userslug}/groups" class="btn-ghost fw-semibold
+			{{{ if template.account/groups }}}active{{{ end }}}">
 			<div class="flex-1">[[global:header.groups]]</div>
 			<span class="text-xs human-readable-number" title="{counts.groups}">{counts.groups}</span>
 		</a>
 
-		<a href="{config.relative_path}/user/{userslug}/followers" class="btn-ghost fw-semibold">
+		<a href="{config.relative_path}/user/{userslug}/followers" class="btn-ghost fw-semibold
+			{{{ if template.account/followers }}}active{{{ end }}}">
 			<div class="flex-1">[[user:followers]]</div>
 			<span class="text-xs human-readable-number" title="{counts.followers}">{counts.followers}</span>
 		</a>
 
-		<a href="{config.relative_path}/user/{userslug}/following" class="btn-ghost fw-semibold">
+		<a href="{config.relative_path}/user/{userslug}/following" class="btn-ghost fw-semibold
+			{{{ if template.account/following }}}active{{{ end }}}">
 			<div class="flex-1">[[user:following]]</div>
 			<span class="text-xs human-readable-number" title="{counts.following}">{counts.following}</span>
 		</a>
 
 		{{{ if canEdit }}}
-		<a href="{config.relative_path}/user/{userslug}/blocks" class="btn-ghost fw-semibold">
+		<a href="{config.relative_path}/user/{userslug}/blocks" class="btn-ghost fw-semibold
+			{{{ if template.account/blocks }}}active{{{ end }}}">
 			<div class="flex-1">[[user:blocked-users]]</div>
 			<span class="text-xs human-readable-number" title="{counts.blocks}">{counts.blocks}</span>
 		</a>
 
-		<a href="{config.relative_path}/user/{userslug}/uploads" class="btn-ghost fw-semibold">
+		<a href="{config.relative_path}/user/{userslug}/uploads" class="btn-ghost fw-semibold
+			{{{ if template.account/uploads }}}active{{{ end }}}">
 			<div class="flex-1">[[global:uploads]]</div>
 			<span class="text-xs human-readable-number" title="{counts.uploaded}">{counts.uploaded}</span>
 		</a>
 		{{{ end }}}
 
-		<hr/>
+		<hr class="w-100 my-2"/>
 		{{{ if (loggedIn && (!isSelf && !banned)) }}}
 		<a href="#" component="account/flag" class="btn-ghost-sm">
 			<i class="fa-solid fa-flag text-danger"></i>
@@ -61,20 +66,22 @@
 			<i class="fa-solid fa-ban text-danger"></i>
 			<div class="flex-1 text-nowrap">[[user:unblock_user]]</div>
 		</a>
-		<hr/>
+		<hr class="w-100 my-2"/>
 		{{{ end }}}
 
 		{{{ if canEdit }}}
-		<a href="{config.relative_path}/user/{userslug}/edit" class="btn-ghost-sm text-xs">
+		<a href="{config.relative_path}/user/{userslug}/edit" class="btn-ghost-sm text-xs
+		{{{ if template.account/edit }}}active{{{ end }}}">
 			<div class="flex-1">[[user:edit-profile]]</div>
 		</a>
-		<a href="{config.relative_path}/user/{userslug}/settings" class="btn-ghost-sm text-xs">
+		<a href="{config.relative_path}/user/{userslug}/settings" class="btn-ghost-sm text-xs
+			{{{ if template.account/settings }}}active{{{ end }}}">
 			<div class="flex-1">[[user:settings]]</div>
 		</a>
 		{{{ end }}}
 
 		{{{ each profile_links }}}
-		<a href="{config.relative_path}/user/{userslug}/{./route}" class="btn-ghost-sm text-xs plugin-link {{{ if ./public }}}public{{{ else }}}private{{{ end }}}" id="{./id}">
+		<a href="{config.relative_path}/user/{userslug}/{./route}" class="btn-ghost-sm text-xs plugin-link {{{ if ./public }}}public{{{ else }}}private{{{ end }}} {{{ if (url == ./url) }}}active{{{ end }}}" id="{./id}">
 			<div class="flex-1">{./name}</div>
 		</a>
 		{{{end}}}

package/templates/partials/buttons/newTopic.tpl

@@ -1,7 +1,5 @@
-<!-- THIS FILE IS STILL PERSONA -->
-
 <noscript><div class="dropdown" component="category-selector"></noscript>
-<button component="category/post" for="category-dropdown-check" class="btn btn-primary text-nowrap" id="new_topic" role="button">
+<button component="category/post" for="category-dropdown-check" class="btn btn-primary btn-sm text-nowrap" id="new_topic" role="button">
 	[[category:new_topic_button]]
 </button>
 <noscript>

package/templates/partials/categories/item.tpl

@@ -16,7 +16,7 @@
 			{{{ end }}}
 			{{{ if !config.hideSubCategories }}}
 			{{{ if ./children.length }}}
-			<div class="category-children d-flex gap-3">
+			<div class="category-children row row-cols-2 g-2">
 				{{{ each ./children }}}
 				{{{ if !./isSection }}}
 				<span class="category-children-item small">
@@ -31,13 +31,6 @@
 			</div>
 			{{{ end }}}
 			{{{ end }}}
-			<span class="d-block d-sm-none">
-				{{{ if ./teaser.timestampISO }}}
-				<a class="permalink" href="{./teaser.url}">
-					<small class="timeago" title="{./teaser.timestampISO}"></small>
-				</a>
-				{{{ end }}}
-			</span>
 		</div>
 	</div>
 

package/templates/partials/category/sort.tpl

@@ -1,7 +1,7 @@
 <div class="btn-group bottom-sheet" component="thread/sort">
-	<button class="btn btn-link d-flex gap-2 align-items-baseline dropdown-toggle" data-bs-toggle="dropdown" type="button">
-		<i class="fa fa-fw fa-arrow-down-wide-short small link-primary"></i>
-		<span class="visible-md-inline visible-lg-inline small">[[topic:sort_by]]</span>
+	<button class="btn-ghost-sm d-flex gap-2 align-items-baseline dropdown-toggle" data-bs-toggle="dropdown" type="button">
+		<i class="fa fa-fw fa-arrow-down-wide-short text-primary"></i>
+		<span class="visible-md-inline visible-lg-inline fw-semibold">[[topic:sort_by]]</span>
 	</button>
 
 	<ul class="dropdown-menu">

package/templates/partials/category/subcategory.tpl

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

package/templates/partials/category/tools.tpl

@@ -1,8 +1,8 @@
 {{{ if showTopicTools }}}
 <div class="btn-group thread-tools bottom-sheet">
-	<button class="btn btn-link d-flex gap-2 align-items-baseline dropdown-toggle" data-bs-toggle="dropdown" type="button">
-		<i class="fa fa-fw fa-gear small link-primary"></i>
-		<span class="visible-md-inline visible-lg-inline small">[[topic:thread_tools.title]]</span>
+	<button class="btn-ghost-sm d-flex gap-2 align-items-baseline dropdown-toggle" data-bs-toggle="dropdown" type="button">
+		<i class="fa fa-fw fa-gear text-primary"></i>
+		<span class="visible-md-inline visible-lg-inline fw-semibold">[[topic:thread_tools.title]]</span>
 	</button>
 	<ul class="dropdown-menu">
 		<li>

package/templates/partials/category/watch.tpl

@@ -1,19 +1,19 @@
 {{{ if config.loggedIn }}}
 <div class="btn-group topic-watch-dropdown bottom-sheet" component="topic/watch">
-	<button class="btn btn-link d-flex gap-2 align-items-baseline dropdown-toggle" data-bs-toggle="dropdown" type="button">
-		<span component="category/watching/menu" <!-- IF !../isWatched -->class="hidden"<!-- ENDIF !../isWatched -->><i class="fa fa-fw fa-inbox small link-primary"></i><span class="visible-md-inline visible-lg-inline small"> [[category:watching]]</span></span>
+	<button class="btn-ghost-sm d-flex gap-2 align-items-baseline dropdown-toggle" data-bs-toggle="dropdown" type="button">
+		<span component="category/watching/menu" {{{ if !./isWatched }}}class="hidden"{{{ end }}}><i class="fa fa-fw fa-inbox text-primary"></i><span class="visible-md-inline visible-lg-inline fw-semibold"> [[category:watching]]</span></span>
 
-		<span component="category/notwatching/menu" <!-- IF !../isNotWatched -->class="hidden"<!-- ENDIF !../isNotWatched -->><i class="fa fa-fw fa-clock-o small link-primary"></i><span class="visible-md-inline visible-lg-inline small"> [[category:not-watching]]</span></span>
+		<span component="category/notwatching/menu" {{{ if !./isNotWatched }}}class="hidden"{{{ end }}}><i class="fa fa-fw fa-clock-o text-primary"></i><span class="visible-md-inline visible-lg-inline fw-semibold"> [[category:not-watching]]</span></span>
 
-		<span component="category/ignoring/menu" <!-- IF !../isIgnored -->class="hidden"<!-- ENDIF !../isIgnored -->><i class="fa fa-fw fa-eye-slash small link-primary"></i><span class="visible-md-inline visible-lg-inline small"> [[category:ignoring]]</span></span>
+		<span component="category/ignoring/menu" {{{ if !./isIgnored }}}class="hidden"{{{ end }}}><i class="fa fa-fw fa-eye-slash text-primary"></i><span class="visible-md-inline visible-lg-inline fw-semibold"> [[category:ignoring]]</span></span>
 	</button>
 
 	<ul class="dropdown-menu">
-		<li><a class="dropdown-item" href="#" component="category/watching" data-state="watching"><i component="category/watching/check" class="fa fa-fw <!-- IF ../isWatched -->fa-check<!-- ENDIF ../isWatched -->"></i><i class="fa fa-fw fa-inbox"></i> [[category:watching]]<p class="help-text"><small>[[category:watching.description]]</small></p></a></li>
+		<li><a class="dropdown-item" href="#" component="category/watching" data-state="watching"><i component="category/watching/check" class="fa fa-fw {{{ if ./isWatched }}}fa-check{{{ end }}}"></i><i class="fa fa-fw fa-inbox"></i> [[category:watching]]<p class="help-text text-muted"><small>[[category:watching.description]]</small></p></a></li>
 
-		<li><a class="dropdown-item" href="#" component="category/notwatching" data-state="notwatching"><i component="category/notwatching/check" class="fa fa-fw <!-- IF ../isNotWatched -->fa-check<!-- ENDIF ../isNotWatched -->"></i><i class="fa fa-fw fa-clock-o"></i> [[category:not-watching]]<p class="help-text"><small>[[category:not-watching.description]]</small></p></a></li>
+		<li><a class="dropdown-item" href="#" component="category/notwatching" data-state="notwatching"><i component="category/notwatching/check" class="fa fa-fw {{{ if ./isNotWatched }}}fa-check{{{ end }}}"></i><i class="fa fa-fw fa-clock-o"></i> [[category:not-watching]]<p class="help-text text-muted"><small>[[category:not-watching.description]]</small></p></a></li>
 
-		<li><a class="dropdown-item" href="#" component="category/ignoring" data-state="ignoring"><i component="category/ignoring/check" class="fa fa-fw <!-- IF ../isIgnored -->fa-check<!-- ENDIF ../isIgnored -->"></i><i class="fa fa-fw fa-eye-slash"></i> [[category:ignoring]]<p class="help-text"><small>[[category:ignoring.description]]</small></p></a></li>
+		<li><a class="dropdown-item" href="#" component="category/ignoring" data-state="ignoring"><i component="category/ignoring/check" class="fa fa-fw {{{ if ./isIgnored }}}fa-check{{{ end }}}"></i><i class="fa fa-fw fa-eye-slash"></i> [[category:ignoring]]<p class="help-text text-muted"><small>[[category:ignoring.description]]</small></p></a></li>
 	</ul>
 </div>
 {{{ end }}}

package/templates/partials/category-filter-content.tpl

@@ -1,12 +1,12 @@
-<button type="button" class="btn btn-link d-flex gap-2 align-items-baseline dropdown-toggle" data-bs-toggle="dropdown">
+<button type="button" class="btn-ghost-sm d-flex gap-2 align-items-baseline dropdown-toggle" data-bs-toggle="dropdown">
     {{{ if selectedCategory }}}
     <span class="category-item">
         {buildCategoryIcon(selectedCategory, "20px", "rounded-circle")}
-        <span class="visible-md-inline visible-lg-inline small">{selectedCategory.name}</span>
+        <span class="visible-md-inline visible-lg-inline fw-semibold">{selectedCategory.name}</span>
     </span>
     {{{ else }}}
-    <i class="fa fa-fw fa-list small link-primary"></i>
-    <span class="visible-md-inline visible-lg-inline small">[[unread:all_categories]]</span>{{{ end }}}
+    <i class="fa fa-fw fa-list link-primary"></i>
+    <span class="visible-md-inline visible-lg-inline fw-semibold">[[unread:all_categories]]</span>{{{ end }}}
 </button>
 <div component="category-selector-search" class="hidden position-absolute">
     <input type="text" class="form-control" autocomplete="off">

package/templates/partials/category-selector-content.tpl

@@ -1,14 +1,15 @@
-<button type="button" class="btn btn-link d-flex gap-2 align-items-baseline dropdown-toggle" data-bs-toggle="dropdown">
+<button type="button" class="btn-ghost-sm d-flex gap-2 align-items-baseline dropdown-toggle" data-bs-toggle="dropdown">
     <span component="category-selector-selected">
         {{{ if (selectedCategory && !showCategorySelectLabel) }}}
         <span class="category-item">
             {buildCategoryIcon(selectedCategory, "24px", "rounded-circle")}
-            {selectedCategory.name}
+            <span class="fw-semibold">{selectedCategory.name}</span>
         </span>
         {{{ else }}}
-    <i class="fa fa-fw {{{ if selectCategoryIcon }}}{selectCategoryIcon}{{{ else }}}fa-list{{{ end }}} link-primary small"></i>
-    <span class="visible-md-inline visible-lg-inline small">{{{ if selectCategoryLabel }}}{selectCategoryLabel}{{{ else }}}[[topic:thread_tools.select_category]]{{{ end }}}</span>
-    {{{ end }}}</span>
+        <i class="fa fa-fw {{{ if selectCategoryIcon }}}{selectCategoryIcon}{{{ else }}}fa-list{{{ end }}} text-primary"></i>
+        <span class="visible-md-inline visible-lg-inline fw-semibold">{{{ if selectCategoryLabel }}}{selectCategoryLabel}{{{ else }}}[[topic:thread_tools.select_category]]{{{ end }}}</span>
+        {{{ end }}}
+    </span>
 </button>
 <div component="category-selector-search" class="hidden position-absolute">
     <input type="text" class="form-control" autocomplete="off">
@@ -17,10 +18,10 @@
     <li component="category/no-matches" role="presentation" class="category hidden">
         <a class="dropdown-item" role="menu-item">[[search:no-matches]]</a>
     </li>
-    {{{each categoryItems}}}
-    <li role="presentation" class="category {{{ if ../disabledClass }}}disabled {{{ end }}}" data-cid="{../cid}" data-name="{../name}" data-parent-cid="{../parentCid}">
-        <a class="dropdown-item" role="menu-item">{../level}
-            <span component="category-markup" style="{{{ if ../match }}}font-weight: bold;{{{end}}}">
+    {{{ each categoryItems }}}
+    <li role="presentation" class="category {{{ if ./disabledClass }}}disabled {{{ end }}}" data-cid="{./cid}" data-name="{./name}" data-parent-cid="{./parentCid}">
+        <a class="dropdown-item" role="menu-item">{./level}
+            <span component="category-markup" style="{{{ if ./match }}}font-weight: bold;{{{end}}}">
                 <div class="category-item d-inline-block">
                     {{{ if ./icon }}}
                     {buildCategoryIcon(@value, "24px", "rounded-circle")}

package/templates/partials/chats/message-window.tpl

@@ -1,4 +1,10 @@
-<!-- IF roomId -->
+{{{ if !roomId }}}
+<div class="text-center p-2">
+	[[modules:chat.no_active]]
+</div>
+{{{ end }}}
+
+{{{ if roomId }}}
 <div component="chat/messages" class="expanded-chat d-flex flex-column h-100" data-roomid="{roomId}">
 	<div component="chat/header" class="d-flex align-items-center px-3 gap-1">
 		<h5 class="members flex-1 fw-semibold tracking-tight">
@@ -9,7 +15,7 @@
 	</div>
 	<hr class="text-muted opacity-25"/>
 	<div class="position-relative">
-		<div component="chat/messages/scroll-up-alert" class="position-absolute me-4 end-0 text-sm scroll-up-alert alert alert-info hidden w-25" role="button" style="z-index: 1;">[[modules:chat.scroll-up-alert]]</div>
+		<div component="chat/messages/scroll-up-alert" class="position-absolute me-md-4 end-0 text-sm scroll-up-alert alert alert-info hidden w-25 d-none d-md-block" role="button" style="z-index: 1;">[[modules:chat.scroll-up-alert]]</div>
 	</div>
 	<ul class="chat-content p-0 m-0 list-unstyled overflow-auto flex-grow-1">
 		<!-- IMPORT partials/chats/messages.tpl -->
@@ -25,8 +31,4 @@
 		</form>
 	</div>
 </div>
-<!-- ELSE -->
-<div class="alert alert-info me-3">
-	[[modules:chat.no-messages]]
-</div>
-<!-- ENDIF roomId -->
+{{{ end }}}

package/templates/partials/groups/admin.tpl

@@ -80,13 +80,11 @@
 
 		<div class="mb-3">
 			<label class="form-label" for="memberPostCids">[[groups:details.member-post-cids]]</label>
-			<div class="row">
-				<div class="col-md-6">
-					<input id="memberPostCids" type="text" class="form-control" value="{group.memberPostCids}">
-				</div>
-				<div class="col-md-6 member-post-cids-selector">
+			<div class="d-flex gap-1">
+				<div class="member-post-cids-selector">
 					<!-- IMPORT partials/category-selector.tpl -->
 				</div>
+				<input id="memberPostCids" type="text" class="form-control" value="{group.memberPostCids}">
 			</div>
 		</div>
 

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

@@ -1,4 +1,4 @@
-<div class="col-12 col-md-3 col-lg-2 border-end-md text-sm mb-3">
+<div class="flex-0 pe-2 border-end-md text-sm mb-3 flex-basis-md-200">
 	<div class="nav sticky-top d-flex flex-row flex-md-column flex-wrap gap-1" style="z-index: 1;">
 		<button data-bs-toggle="tab" data-bs-target="#groups-posts" class="btn-ghost fw-semibold {{{ if template.groups/details }}}active{{{ end }}}">
 			<div class="flex-1">[[global:posts]]</div>

package/templates/partials/header/brand.tpl

@@ -0,0 +1,19 @@
+{{{ if (brand:logo || config.showSiteTitle)}}}
+<div class="container brand-container">
+	<div class="col-12 d-flex border-bottom pb-3 {{{ if config.centerHeaderElements }}}justify-content-center{{{ end }}}">
+		<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 }}}">
+				<img component="brand/logo" alt="{brand:logo:alt}" class="{brand:logo:display}" src="{brand:logo}?{config.cache-buster}" />
+			</a>
+			{{{ end }}}
+
+			{{{ if config.showSiteTitle }}}
+			<a component="siteTitle" class="text-truncate align-self-stretch align-items-center d-flex" href="{{{ if title:url }}}{title:url}{{{ else }}}{relative_path}/{{{ end }}}">
+				<h1 class="fs-6 fw-bold text-body mb-0">{config.siteTitle}</h1>
+			</a>
+			{{{ end }}}
+		</div>
+	</div>
+</div>
+{{{ end }}}

package/templates/partials/notifications_list.tpl

@@ -14,17 +14,17 @@
 			<a class="text-decoration-none"  href="{config.relative_path}/user/{./user.userslug}"><div class="avatar avatar-rounded" style="--avatar-size: 32px; background-color: {./user.icon:bgColor};">{./user.icon:text}</div></a>
 			{{{ end }}}
 			<div class=" d-flex flex-column">
-				<a href="{./path}" class="text-decoration-none notification-chat-content text-reset text text-sm">
+				<a href="{./path}" class="text-decoration-none text-reset text text-sm">
 					{./bodyShort}
 				</a>
 				<div class="text-xs text-muted">{{{ if ./timeagoLong }}}{./timeagoLong}{{{ else }}}<span class="timeago" title="{./datetimeISO}"></span>{{{ end }}}</div>
 			</div>
 		</div>
-		<div class="notification-chat-controls">
+		<div class="">
 			{{{ if ./nid }}}
-			<button class="mark-read btn btn-light btn-sm">
-				<i class="unread fa fa-xs fa-circle text-primary {{{ if ./read }}}hidden{{{ end }}}"></i>
-				<i class="read fa fa-xs fa-circle-o text-secondary {{{ if !./read }}}hidden{{{ end }}}"></i>
+			<button class="mark-read btn-ghost-sm" style="width: 1.5rem; height: 1.5rem;">
+				<i class="unread fa fa-2xs fa-circle text-primary {{{ if ./read }}}hidden{{{ end }}}"></i>
+				<i class="read fa fa-2xs fa-circle-o text-secondary {{{ if !./read }}}hidden{{{ end }}}"></i>
 			</button>
 			{{{ end }}}
 		</div>

package/templates/partials/post_bar.tpl

@@ -1,10 +1,10 @@
-<nav class="sticky-tools navbar navbar-expand mt-4 p-0 border-0 rounded topic-main-buttons">
+<nav class="{{{ if config.stickyToolbar }}}sticky-tools{{{ end }}} navbar navbar-expand mt-4 p-0 border-0 rounded topic-main-buttons">
 	<div class="card card-header flex-row p-2 border rounded ff-secondary w-100">
 		<ul class="navbar-nav me-auto gap-2 align-items-center">
 			{{{ if loggedIn }}}
-			<button component="topic/mark-unread" class="btn btn-link d-flex gap-2 align-items-center">
-				<i class="fa fa-fw fa-inbox small link-primary"></i>
-				<span class="d-none d-md-inline small">[[topic:mark_unread]]</span>
+			<button component="topic/mark-unread" class="btn-ghost-sm 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>
 			{{{ end }}}
 
@@ -13,7 +13,7 @@
 			<!-- IMPORT partials/topic/tools.tpl -->
 
 			{{{ if (!feeds:disableRSS && rssFeedUrl) }}}
-			<a class="btn btn-link link-primary hidden-xs" target="_blank" href="{rssFeedUrl}" itemprop="item"><i class="fa fa-rss"></i></a>
+			<a class="btn-ghost-sm d-none d-lg-flex align-self-stretch" target="_blank" href="{rssFeedUrl}" itemprop="item"><i class="fa fa-rss text-primary"></i></a>
 			{{{ end }}}
 
 			<span class="loading-indicator btn float-start text-muted navbar-text hidden" done="0">