nodebb-theme-harmony 1.0.0-beta.61 → 1.0.0-beta.63

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nodebb-theme-harmony",
-  "version": "1.0.0-beta.61",
+  "version": "1.0.0-beta.63",
   "nbbpm": {
     "compatibility": "^3.0.0"
   },

package/scss/chats.scss

@@ -3,6 +3,7 @@
 .page-user-chats #content {
 	max-width: 100%;
 }
+
 body.page-user-chats {
 	overflow: hidden;
 	[data-widget-area="footer"] {
@@ -19,9 +20,17 @@ body.page-user-chats {
 		}
 	}
 }
+
+[component="chat/recent"] {
+	.active {
+		background-color: $btn-ghost-hover-color;
+	}
+}
+
 [component="chat/nav-wrapper"] {
 	width: 300px;
 }
+
 .expanded-chat {
 	// no taskbar so hide minimize button
 	[data-action="minimize"] {

package/scss/common.scss

@@ -61,7 +61,8 @@ body:not(.page-user) {
 .sticky-tools {
 	position: sticky;
 	z-index: 3;
-	top: calc($spacer * 0.5);
+	top: 0;
+	padding: 0.25rem 0;
 	background-color: $body-bg;
 }
 // quartz doesn't need body-bg for tool background
@@ -95,7 +96,7 @@ body:not(.page-user) {
 	text-align: left;
 	--bs-text-opacity: 1;
 	color: inherit !important;
-
+	font-family: $font-family-secondary;
 	cursor: pointer;
 	&:hover, &.active {
 		background-color: $btn-ghost-hover-color;

package/scss/harmony.scss

@@ -9,7 +9,6 @@
 @import "status";
 @import "account";
 @import "groups";
-@import "search";
 @import "modals";
 
 @import "modules/breadcrumbs";
@@ -22,5 +21,6 @@
 @import "modules/cover";
 @import "modules/nprogress";
 @import "modules/paginator";
+@import "modules/filters";
 
 @import "skins";

package/scss/modules/filters.scss

@@ -0,0 +1,8 @@
+[component="search/filters"], [component="flags/filters"] {
+	.filter-btn {
+		border-color: $gray-300!important;
+		&.active-filter {
+			border-color: $primary!important;
+		}
+	}
+}

package/scss/overrides.scss

@@ -57,6 +57,7 @@ $link-hover-decoration: underline;
 $font-family-sans-serif: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 $font-family-secondary: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
 $font-weight-semibold: 500 !default;
+$small-font-size: 0.875rem !default;
 
 $breadcrumb-divider: quote("→");
 $breadcrumb-divider-color: $gray-500 !default;

package/scss/search.scss

@@ -1,8 +0,0 @@
-[component="search/filters"] {
-	.filter-btn {
-		border-color: $gray-300!important;
-		&.active-filter {
-			border-color: $primary!important;
-		}
-	}
-}

package/scss/sidebar.scss

@@ -87,7 +87,8 @@
 		line-height: 12px;
 		&.visible-open {
 			font-size:12px;
-			line-height: 16px;
+			line-height: 12px;
+			font-weight: normal;
 		}
 	}
 

package/templates/chats.tpl

@@ -14,7 +14,7 @@
 			</div>
 		</div>
 		<hr class="text-muted opacity-25 my-1">
-		<ul component="chat/recent" class="chats-list list-unstyled overflow-auto mb-0 pe-2" data-nextstart="{nextStart}">
+		<ul component="chat/recent" class="chats-list list-unstyled overflow-auto mb-0" data-nextstart="{nextStart}">
 			{{{each rooms}}}
 			<!-- IMPORT partials/chats/recent_room.tpl -->
 			{{{end}}}

package/templates/flags/list.tpl

@@ -2,72 +2,8 @@
 
 <!-- IMPORT partials/breadcrumbs.tpl -->
 
-<div class="row">
-	<div class="col-sm-4 col-md-3">
-		<!-- IMPORT partials/flags/filters.tpl -->
-	</div>
-	<div class="col-sm-8 col-md-9">
-		{{{ if hasFilter }}}
-		<div class="alert alert-warning">
-			<p class="float-end">
-				<a href="{config.relative_path}/flags">[[flags:filter-reset]]</a>
-			</p>
-			[[flags:filter-active]]
-		</div>
-		{{{ end }}}
-
-		<div class="btn-group float-end" component="flags/bulk-actions">
-			<button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" autocomplete="off" aria-haspopup="true" aria-expanded="false" disabled="disabled">
-				<i class="fa fa-clone"></i> <span class="fw-semibold">[[flags:bulk-actions]]</span>
-			</button>
-			<ul class="dropdown-menu">
-				<li><a href="#" class="dropdown-item" data-action="bulk-assign">[[flags:assign-to-me]]</a></li>
-				<li><a href="#" class="dropdown-item" data-action="bulk-mark-resolved">[[flags:bulk-resolve]]</a></li>
-			</ul>
-		</div>
-
-		<table class="table table-striped table-hover" component="flags/list">
-			<thead>
-				<tr>
-					<th>
-						<input type="checkbox" data-action="toggle-all" autocomplete="off" />
-					</th>
-					<th></th>
-					<th><span class="hidden-xs">[[flags:reports]] </span><i class="fa fa-user-plus"></i></th>
-					<th><span class="hidden-xs">[[flags:first-reported]] </span><i class="fa fa-clock-o"></i></th>
-					<th>[[flags:state]]</th>
-				</tr>
-			</thead>
-			<tbody>
-				{{{ if !flags.length }}}
-				<tr>
-					<td colspan="5">
-						<div class="alert alert-success text-center">
-							[[flags:no-flags]]
-						</div>
-					</td>
-				</tr>
-				{{{ end }}}
-				{{{ each flags }}}
-				<tr data-flag-id="{./flagId}">
-					<td>
-						<input type="checkbox" autocomplete="off" />
-					</td>
-					<td>
-						<a href="{config.relative_path}/flags/{./flagId}">
-							<strong>{./target_readable}</strong>
-						</a>
-					</td>
-					<td>
-						{./heat}
-					</td>
-					<td><span class="timeago" title="{./datetimeISO}"></span></td>
-					<td><span class="badge bg-{./labelClass}">[[flags:state-{./state}]]</span></td>
-				</tr>
-				{{{end}}}
-			</tbody>
-		</table>
-
-		<!-- IMPORT partials/paginator.tpl -->
-	</div>
+<div class="d-flex flex-column gap-3">
+	<!-- IMPORT partials/flags/filters.tpl -->
+	<!-- IMPORT partials/flags/results.tpl -->
+	<!-- IMPORT partials/flags/bulk-actions.tpl -->
 </div>

package/templates/groups/details.tpl

@@ -16,7 +16,7 @@
 	<div class="d-flex flex-column flex-md-row justify-content-md-between pb-4 mb-4 mt-2 border-bottom">
 		<div class="d-flex flex-column mt-1">
 			<div class="d-flex align-items-center gap-2">
-				<h2 class="mb-0">{group.displayName}</h2>
+				<h3 class="mb-0">{group.displayName}</h3>
 			</div>
 			<div class="d-flex gap-2">
 				{group.descriptionParsed}

package/templates/groups/list.tpl

@@ -4,7 +4,7 @@
 	{{{end}}}
 </div>
 <div class="groups list">
-	<h2 class="fw-semibold">[[pages:groups]]</h2>
+	<h3 class="fw-semibold">[[pages:groups]]</h3>
 	<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">

package/templates/partials/chats/recent_room.tpl

@@ -1,37 +1,45 @@
-<a class="text-decoration-none text-reset" href="{config.relative_path}/me/chats/{./roomId}">
-	<li component="chat/recent/room" data-roomid="{./roomId}" data-full="1" class="{{{ if ./unread }}}unread{{{ end }}} btn-ghost-sm gap-2 justify-content-start align-items-start">
-		<div class="main-avatar">
-		{{{ if ./users.length }}}
-			{{{ if ./groupChat}}}
-			<div class="position-relative" style="width:32px; height:32px;">
-				<span class="text-decoration-none position-absolute top-0" style="left: 8px;" href="{config.relative_path}/user/{./users.1.userslug}">{buildAvatar(./users.1, "24px", true)}</span>
-				<span class="text-decoration-none position-absolute start-0" style="top: 8px;" href="{config.relative_path}/user/{./users.0.userslug}" >{buildAvatar(./users.0, "24px", true)}</span>
-			</div>
-			{{{ else }}}
-			<span href="{config.relative_path}/user/{./users.0.userslug}" class="text-decoration-none">{buildAvatar(./users.0, "32px", true)}</span>
-			{{{ end }}}
-		{{{ else }}}
-		<span class="avatar avatar-rounded text-bg-warning" component="avatar/icon" style="--avatar-size: 32px;">?</span>
-		{{{ end }}}
-		</div>
-
-		<div class="d-flex flex-grow-1 flex-column w-100">
-			<div class="room-name fw-semibold text-xs">
-				{{{ if !./lastUser.uid }}}
-				<span>[[modules:chat.no-users-in-room]]</span>
+<li component="chat/recent/room" data-roomid="{./roomId}" data-full="1" class="{{{ if !@last }}}border-bottom mb-1{{{ end }}} rounded-1 {{{ if ./unread }}}unread{{{ end }}}">
+	<div class="d-flex gap-1 justify-content-between p-1">
+		<div class="position-relative d-flex flex-grow-1 gap-2 justify-content-start align-items-start">
+			<div class="main-avatar">
+				<a class="stretched-link" href="{config.relative_path}/me/chats/{./roomId}"></a>
+				{{{ if ./users.length }}}
+				{{{ if ./groupChat}}}
+				<div class="position-relative" style="width:32px; height:32px;">
+					<span class="text-decoration-none position-absolute top-0" style="left: 8px;" href="{config.relative_path}/user/{./users.1.userslug}">{buildAvatar(./users.1, "24px", true)}</span>
+					<span class="text-decoration-none position-absolute start-0" style="top: 8px;" href="{config.relative_path}/user/{./users.0.userslug}" >{buildAvatar(./users.0, "24px", true)}</span>
+				</div>
+				{{{ else }}}
+				<span href="{config.relative_path}/user/{./users.0.userslug}" class="text-decoration-none">{buildAvatar(./users.0, "32px", true)}</span>
+				{{{ end }}}
 				{{{ else }}}
-				{{{ if ./roomName }}}{./roomName}{{{ else }}}{./usernames}{{{ end }}}
+				<span class="avatar avatar-rounded text-bg-warning" component="avatar/icon" style="--avatar-size: 32px;">?</span>
 				{{{ end }}}
 			</div>
-			{{{ if ./teaser }}}
-			<div class="teaser-content text-sm line-clamp-3 text-break">
-				<span href="#" class="text-decoration-none">{buildAvatar(./teaser.user, "14px", true)}</span>
-				<strong class="text-xs fw-semibold teaser-username">{./teaser.user.username}:</strong>
-				{./teaser.content}
+
+			<div class="d-flex flex-grow-1 flex-column w-100">
+				<div class="room-name fw-semibold text-xs">
+					{{{ if !./lastUser.uid }}}
+					<span>[[modules:chat.no-users-in-room]]</span>
+					{{{ else }}}
+					{{{ if ./roomName }}}{./roomName}{{{ else }}}{./usernames}{{{ end }}}
+					{{{ end }}}
+				</div>
+				{{{ if ./teaser }}}
+				<div class="teaser-content text-sm line-clamp-3 text-break">
+					<span href="#" class="text-decoration-none">{buildAvatar(./teaser.user, "14px", true)}</span>
+					<strong class="text-xs fw-semibold teaser-username">{./teaser.user.username}:</strong>
+					{./teaser.content}
+				</div>
+				<div class="teaser-timestamp text-muted text-xs">{./teaser.timeagoLong}</div>
+				{{{ end }}}
 			</div>
-			<div class="teaser-timestamp text-muted text-xs">{./teaser.timeagoLong}</div>
-			{{{ end }}}
 		</div>
-	</li>
-</a>
-<hr class="text-muted opacity-25 my-1"/>
+		<div>
+			<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 !./unread }}}hidden{{{ end }}}"></i>
+				<i class="read fa fa-2xs fa-circle-o text-secondary {{{ if ./unread }}}hidden{{{ end }}}"></i>
+			</button>
+		</div>
+	</div>
+</li>

package/templates/partials/flags/filters.tpl

@@ -1,99 +1,156 @@
 <!-- THIS FILE IS STILL PERSONA -->
 
-<div class="text-center">
-	<div class="card mb-3">
-		<div class="card-body collapse" id="flags-daily-wrapper" aria-expanded="false">
-			<div><canvas id="flags:daily" height="150"></canvas></div>
-		</div>
-		<div class="card-footer" data-bs-toggle="collapse" data-bs-target="#flags-daily-wrapper" aria-controls="#flags-daily-wrapper"><small>[[flags:graph-label]]</small>&nbsp;<i class="fa fa-sort"></i></div>
-	</div>
-</div>
+<div class="d-flex align-items-start gap-2 pb-3 border-bottom">
+	<a class="filter-btn btn btn-light btn-sm border {{{ if filters.quick }}}active-filter{{{ end }}} dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
+		<span class="filter-label">{{{ if filters.quick }}}[[flags:filter-quick-{./filters.quick}]]{{{ else }}}[[flags:quick-filters]]{{{ end }}}</span>
+		<span class="caret"></span>
+	</a>
+	<ul class="dropdown-menu">
+		<li>
+			<a class="dropdown-item" href="{config.relative_path}/flags?quick=mine">[[flags:filter-quick-mine]]</a>
+		</li>
+	</ul>
 
-<div class="card mb-3">
-	<div class="card-header">
-		[[flags:quick-filters]]
-	</div>
-	<div class="card-body">
-		<ul>
-			<li><a href="{config.relative_path}/flags?quick=mine">[[flags:filter-quick-mine]]</a></li>
+	<div component="flags/filters" class="ps-2 ms-2 border-start d-flex gap-2 me-auto">
+		<!-- IMPORT partials/category/filter-dropdown-left.tpl -->
+
+		<a class="filter-btn btn btn-light btn-sm border {{{ if (sort != "newest") }}}active-filter{{{ end }}} dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
+			<span class="filter-label">{{{ if (sort != "newest") }}}[[flags:sort-{./sort}]]{{{ else }}}[[flags:sort]]{{{ end }}}</span>
+			<span class="caret"></span>
+		</a>
+		<ul class="dropdown-menu">
+			<li><h6 class="dropdown-header">[[flags:sort-all]]</h6></li>
+			<li class="dropdown-item" data-name="sort" data-value="newest">[[flags:sort-newest]]</li>
+			<li class="dropdown-item" data-name="sort" data-value="oldest">[[flags:sort-oldest]]</li>
+			<li class="dropdown-item" data-name="sort" data-value="reports">[[flags:sort-reports]]</li>
+			<li><h6 class="dropdown-header">[[flags:sort-posts-only]]</h6></li>
+			<li class="dropdown-item" data-name="sort" data-value="downvotes">[[flags:sort-downvotes]]</li>
+			<li class="dropdown-item" data-name="sort" data-value="upvotes">[[flags:sort-upvotes]]</li>
+			<li class="dropdown-item" data-name="sort" data-value="replies">[[flags:sort-replies]]</li>
 		</ul>
-	</div>
-</div>
 
-<div class="card mb-3">
-	<div class="card-header">
-		[[flags:filters]]
-	</div>
-	<div class="card-body">
-		<form role="form" component="flags/filters">
-			<fieldset>
-				<div class="mb-3">
-					<label class="form-label" for="filter-cid">[[flags:filter-cid]]</label>
-					<div class="input-group">
-					<!-- IMPORT partials/category/filter-dropdown-left.tpl -->
+		<a class="filter-btn btn btn-light btn-sm border {{{ if filters.state }}}active-filter{{{ end }}} dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
+			<span class="filter-label">{{{ if filters.state }}}[[flags:state-{./filters.state}]]{{{ else }}}[[flags:filter-state]]{{{ end }}}</span>
+			<span class="caret"></span>
+		</a>
+		<ul class="dropdown-menu">
+			<li class="dropdown-item" data-name="state" data-value="open">[[flags:state-open]]</li>
+			<li class="dropdown-item" data-name="state" data-value="wip">[[flags:state-wip]]</li>
+			<li class="dropdown-item" data-name="state" data-value="resolved">[[flags:state-resolved]]</li>
+			<li class="dropdown-item" data-name="state" data-value="rejected">[[flags:state-rejected]]</li>
+		</ul>
+
+		<a class="filter-btn btn btn-light btn-sm border {{{ if filters.type }}}active-filter{{{ end }}} dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
+			<span class="filter-label">{{{ if filters.type }}}[[flags:filter-type-{./filters.type}]]{{{ else }}}[[flags:filter-type]]{{{ end }}}</span>
+			<span class="caret"></span>
+		</a>
+		<ul class="dropdown-menu">
+			<li class="dropdown-item" data-name="type" data-value="all">[[flags:filter-type-all]]</li>
+			<li class="dropdown-item" data-name="type" data-value="post">[[flags:filter-type-post]]</li>
+			<li class="dropdown-item" data-name="type" data-value="user">[[flags:filter-type-user]]</li>
+		</ul>
+
+		<div component="flags/filter/assignee" class="dropdown" data-filter-name="assignee">
+			<a component="user/filter/button" class="filter-btn btn btn-light btn-sm border {{{ if filters.assignee }}}active-filter{{{ end }}} dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
+				<span class="filter-label">[[flags:filter-assignee]]</span>
+				<span class="caret"></span>
+			</a>
+
+			<ul class="dropdown-menu" style="width: 350px;">
+				<li class="px-3 py-1 d-flex flex-column gap-2">
+					<input type="text" class="form-control" component="user/filter/search" placeholder="[[search:type-a-username]]">
+					<div component="user/filter/selected" class="d-flex flex-wrap gap-2">
+						{{{ each selected.assignee }}}
+						<div class="d-flex px-2 py-1 rounded-1 text-bg-primary gap-2 align-items-center text-sm">
+							{buildAvatar(@value, "16px", true)} {./username}
+							<button component="user/filter/delete" data-uid="{./uid}" class="btn btn-primary btn-sm py-0"><i class="fa fa-times fa-xs"></i></button>
+						</div>
+						{{{ end }}}
+					</div>
+					<hr/>
+					<div component="user/filter/results" class="d-flex flex-wrap gap-2">
+						{{{ each userFilterResults }}}
+						<button class="btn btn-light btn-sm border" data-uid="{./uid}" data-username="{./username}">{buildAvatar(@value, "16px", true)} {./username}</button>
+						{{{ end }}}
 					</div>
-				</div>
-				<div class="mb-3">
-					<label class="form-label" for="sort">[[flags:sort]]</label>
-					<select class="form-control" id="sort" name="sort">
-						<optgroup label="[[flags:sort-all]]">
-							<option value="newest">[[flags:sort-newest]]</option>
-							<option value="oldest">[[flags:sort-oldest]]</option>
-							<option value="reports">[[flags:sort-reports]]</option>
-						</optgroup>
-						<optgroup label="[[flags:sort-posts-only]]">
-							<option value="downvotes">[[flags:sort-downvotes]]</option>
-							<option value="upvotes">[[flags:sort-upvotes]]</option>
-							<option value="replies">[[flags:sort-replies]]</option>
-						</optgroup>
-					</select>
-				</div>
-				<div class="mb-3">
-					<label class="form-label" for="filter-state">[[flags:filter-state]]</label>
-					<select class="form-control" id="filter-state" name="state">
-						<option value="">[[flags:state-all]]</option>
-						<option value="open">[[flags:state-open]]</option>
-						<option value="wip">[[flags:state-wip]]</option>
-						<option value="resolved">[[flags:state-resolved]]</option>
-						<option value="rejected">[[flags:state-rejected]]</option>
-					</select>
-				</div>
+				</li>
+			</ul>
+		</div>
 
-				<div class="mb-3">
-					<label class="form-label" for="filter-type">[[flags:filter-type]]</label>
-					<select class="form-control" id="filter-type" name="type">
-						<option value="">[[flags:filter-type-all]]</option>
-						<option value="post">[[flags:filter-type-post]]</option>
-						<option value="user">[[flags:filter-type-user]]</option>
-					</select>
-				</div>
-			</fieldset>
+		<div component="flags/filter/reporterId" class="dropdown" data-filter-name="reporterId">
+			<a component="user/filter/button" class="filter-btn btn btn-light btn-sm border {{{ if filters.reporterId }}}active-filter{{{ end }}} dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
+				<span class="filter-label">[[flags:filter-reporterId]]</span>
+				<span class="caret"></span>
+			</a>
 
-			<fieldset class="collapse{{{ if expanded }}} show{{{ end }}}" id="more-filters" aria-expanded="{expanded}">
-				<div class="mb-3">
-					<label class="form-label" for="filter-assignee">[[flags:filter-assignee]]</label>
-					<input type="text" class="form-control" id="filter-assignee" name="assignee" />
-				</div>
+			<ul class="dropdown-menu" style="width: 350px;">
+				<li class="px-3 py-1 d-flex flex-column gap-2">
+					<input type="text" class="form-control" component="user/filter/search" placeholder="[[search:type-a-username]]">
+					<div component="user/filter/selected" class="d-flex flex-wrap gap-2">
+						{{{ each selected.reporterId }}}
+						<div class="d-flex px-2 py-1 rounded-1 text-bg-primary gap-2 align-items-center text-sm">
+							{buildAvatar(@value, "16px", true)} {./username}
+							<button component="user/filter/delete" data-uid="{./uid}" class="btn btn-primary btn-sm py-0"><i class="fa fa-times fa-xs"></i></button>
+						</div>
+						{{{ end }}}
+					</div>
+					<hr/>
+					<div component="user/filter/results" class="d-flex flex-wrap gap-2">
+						{{{ each userFilterResults }}}
+						<button class="btn btn-light btn-sm border" data-uid="{./uid}" data-username="{./username}">{buildAvatar(@value, "16px", true)} {./username}</button>
+						{{{ end }}}
+					</div>
+				</li>
+			</ul>
+		</div>
 
-				<div class="mb-3">
-					<label class="form-label" for="filter-targetUid">[[flags:filter-targetUid]]</label>
-					<input type="text" class="form-control" id="filter-targetUid" name="targetUid" />
-				</div>
+		<div component="flags/filter/targetUid" class="dropdown" data-filter-name="targetUid">
+			<a component="user/filter/button" class="filter-btn btn btn-light btn-sm border {{{ if filters.targetUid }}}active-filter{{{ end }}} dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
+				<span class="filter-label">[[flags:filter-targetUid]]</span>
+				<span class="caret"></span>
+			</a>
 
-				<div class="mb-3">
-					<label class="form-label" for="filter-reporterId">[[flags:filter-reporterId]]</label>
-					<input type="text" class="form-control" id="filter-reporterId" name="reporterId" />
-				</div>
-			</fieldset>
+			<ul class="dropdown-menu" style="width: 350px;">
+				<li class="px-3 py-1 d-flex flex-column gap-2">
+					<input type="text" class="form-control" component="user/filter/search" placeholder="[[search:type-a-username]]">
+					<div component="user/filter/selected" class="d-flex flex-wrap gap-2">
+						{{{ each selected.targetUid }}}
+						<div class="d-flex px-2 py-1 rounded-1 text-bg-primary gap-2 align-items-center text-sm">
+							{buildAvatar(@value, "16px", true)} {./username}
+							<button component="user/filter/delete" data-uid="{./uid}" class="btn btn-primary btn-sm py-0"><i class="fa fa-times fa-xs"></i></button>
+						</div>
+						{{{ end }}}
+					</div>
+					<hr/>
+					<div component="user/filter/results" class="d-flex flex-wrap gap-2">
+						{{{ each userFilterResults }}}
+						<button class="btn btn-light btn-sm border" data-uid="{./uid}" data-username="{./username}">{buildAvatar(@value, "16px", true)} {./username}</button>
+						{{{ end }}}
+					</div>
+				</li>
+			</ul>
+		</div>
 
-			<div class="d-grid gap-2">
-				{{{ if expanded }}}
-				<button type="button" class="btn btn-link" data-bs-toggle="collapse" data-bs-target="#more-filters" aria-controls="#more-filters" data-text-variant="[[flags:more-filters]] ">[[flags:fewer-filters]]&nbsp;<i class="fa fa-sort"></i></button>
-				{{{ else }}}
-				<button type="button" class="btn btn-link" data-bs-toggle="collapse" data-bs-target="#more-filters" aria-controls="#more-filters" data-text-variant="[[flags:fewer-filters]] ">[[flags:more-filters]]&nbsp;<i class="fa fa-sort"></i></button>
-				{{{ end }}}
-				<button type="button" id="apply-filters" class="btn btn-primary">[[flags:apply-filters]]</button>
-			  </div>
+		<form role="form">
+			<input type="hidden" name="sort" value="{./sort}" />
+			<input type="hidden" name="state" value="{./filters.state}" />
+			<input type="hidden" name="type" value="{./filters.type}" />
 		</form>
 	</div>
+
+	<div component="flags/filters/reset">
+		<a class="filter-btn btn btn-warning btn-sm border {{{ if !hasFilter }}}btn-light disabled{{{ end }}}" href="{config.relative_path}/flags" role="button">
+			<span class="filter-label">[[flags:filter-reset]]</span>
+		</a>
+	</div>
+
+	<div class="btn-group float-end" component="flags/bulk-actions">
+		<button class="filter-btn btn btn-light btn-sm border" data-bs-toggle="dropdown" autocomplete="off" aria-haspopup="true" aria-expanded="false" disabled="disabled">
+			<span class="filter-label">[[flags:bulk-actions]]</span>
+		</button>
+		<ul class="dropdown-menu">
+			<li><a href="#" class="dropdown-item" data-action="bulk-assign">[[flags:assign-to-me]]</a></li>
+			<li><a href="#" class="dropdown-item" data-action="bulk-mark-resolved">[[flags:bulk-resolve]]</a></li>
+		</ul>
+	</div>
 </div>

package/templates/partials/flags/results.tpl

@@ -0,0 +1,38 @@
+<div class="card card-header text-xs px-2 py-1 fw-semibold border-0 align-self-start">
+	[[flags:x-flags-found, {count}]]
+</div>
+
+<table class="table table-striped table-hover" component="flags/list">
+	<thead>
+		<tr>
+			<th></th>
+			<th class="text-xs text-muted">[[flags:reports]]</th>
+			<th class="text-xs text-muted">[[flags:first-reported]]</th>
+			<th class="text-xs text-muted">[[flags:state]]</th>
+			<th>
+				<input type="checkbox" data-action="toggle-all" autocomplete="off" />
+			</th>
+		</tr>
+	</thead>
+	<tbody>
+		{{{ each flags }}}
+		<tr data-flag-id="{./flagId}">
+			<td>
+				<a class="text-reset text-decoration-underline" href="{config.relative_path}/flags/{./flagId}">
+					{./target_readable}
+				</a>
+			</td>
+			<td>
+				{./heat}
+			</td>
+			<td><span class="timeago" title="{./datetimeISO}"></span></td>
+			<td><span class="badge bg-{./labelClass}">[[flags:state-{./state}]]</span></td>
+			<td>
+				<input type="checkbox" autocomplete="off" />
+			</td>
+		</tr>
+		{{{end}}}
+	</tbody>
+</table>
+
+<!-- IMPORT partials/paginator.tpl -->

package/templates/partials/notifications_list.tpl

@@ -20,7 +20,7 @@
 				<div class="text-xs text-muted">{{{ if ./timeagoLong }}}{./timeagoLong}{{{ else }}}<span class="timeago" title="{./datetimeISO}"></span>{{{ end }}}</div>
 			</div>
 		</div>
-		<div class="">
+		<div>
 			{{{ if ./nid }}}
 			<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>

package/templates/partials/post_bar.tpl

@@ -1,28 +1,29 @@
-<nav class="{{{ if config.theme.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-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 }}}
+<div class="{{{ if config.theme.stickyToolbar }}}sticky-tools{{{ end }}}">
+	<nav class="navbar navbar-expand my-2 p-0 border-0 rounded topic-main-buttons">
+		<div class="card card-header flex-row p-2 border rounded w-100">
+			<ul class="navbar-nav me-auto gap-2 align-items-center">
+				{{{ if loggedIn }}}
+				<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 }}}
 
-			<!-- IMPORT partials/topic/watch.tpl -->
-			<!-- IMPORT partials/topic/sort.tpl -->
-			<!-- IMPORT partials/topic/tools.tpl -->
+				<!-- IMPORT partials/topic/watch.tpl -->
+				<!-- IMPORT partials/topic/sort.tpl -->
+				<!-- 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}" itemprop="item"><i class="fa fa-rss text-primary"></i></a>
-			{{{ end }}}
+				{{{ if (!feeds:disableRSS && rssFeedUrl) }}}
+				<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 }}}
 
-			{{{ if browsingUsers }}}
-			<div class="hidden-xs">
-			<!-- IMPORT partials/topic/browsing-users.tpl -->
-			</div>
-			{{{ end }}}
-		</ul>
-		<!-- IMPORT partials/topic/reply-button.tpl -->
-	</div>
-
-</nav>
+				{{{ if browsingUsers }}}
+				<div class="hidden-xs">
+				<!-- IMPORT partials/topic/browsing-users.tpl -->
+				</div>
+				{{{ end }}}
+			</ul>
+			<!-- IMPORT partials/topic/reply-button.tpl -->
+		</div>
+	</nav>
+</div>

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

@@ -9,7 +9,7 @@
 </div>
 {{{ end }}}
 
-<ul id="quick-search-results" class="quick-search-results list-unstyled mb-0 p-0 pe-1 overflow-auto overscroll-behavior-contain" 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" style="max-width:  400px; max-height: 500px;">
 	<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">
@@ -22,7 +22,7 @@
 			</p>
 		</a>
 		<div class="d-flex gap-1 post-info px-2 text-xs">
-			<div class="category-item d-inline-block">
+			<div class="category-item d-inline-block ff-secondary">
 				<span>{function.buildCategoryLabel, posts.category}</span>
 			</div>
 			<span class="timeago text-muted" title="{posts.timestampISO}"></span>

package/templates/partials/sidebar/chats.tpl

@@ -10,15 +10,24 @@
 </a>
 <ul class="chats-dropdown dropdown-menu p-1 shadow">
 	<li>
-		<ul component="chat/list" class="chat-list chats-list list-unstyled overscroll-behavior-contain p-0 pe-1">
-			<li class="dropdown-item rounded-1 p-2 d-flex gap-2 placeholder-wave">
-				<div class="main-avatar">
-					<div class="placeholder" style="width: 32px; height: 32px;"></div>
-				</div>
-				<div class="d-flex flex-grow-1 flex-column w-100">
-					<div class="text-xs"><div class="placeholder col-3"></div></div>
-					<div class="text-sm"><div class="placeholder col-11"></div></div>
-					<div class="text-xs"><div class="placeholder col-4"></div></div>
+		<ul component="chat/list" class="chat-list chats-list list-unstyled overscroll-behavior-contain p-0 ff-base">
+			<li class="rounded-1">
+				<div class="d-flex gap-1 justify-content-between">
+					<div class="dropdown-item p-2 d-flex gap-2 placeholder-wave">
+						<div class="main-avatar">
+							<div class="placeholder" style="width: 32px; height: 32px;"></div>
+						</div>
+						<div class="d-flex flex-grow-1 flex-column w-100">
+							<div class="text-xs"><div class="placeholder col-3"></div></div>
+							<div class="text-sm"><div class="placeholder col-11"></div></div>
+							<div class="text-xs"><div class="placeholder col-4"></div></div>
+						</div>
+					</div>
+					<div>
+						<button class="mark-read btn-ghost-sm" style="width: 1.5rem; height: 1.5rem;">
+							<i class="unread fa fa-2xs fa-circle text-primary"></i>
+						</button>
+					</div>
 				</div>
 			</li>
 		</ul>

package/templates/partials/sidebar/notifications.tpl

@@ -10,7 +10,7 @@
 </a>
 <ul class="notifications-dropdown dropdown-menu p-1 shadow">
 	<li>
-		<ul component="notifications/list" class="notification-list list-unstyled overscroll-behavior-contain">
+		<ul component="notifications/list" class="notification-list list-unstyled overscroll-behavior-contain ff-base">
 			<li class="mb-2 p-1 placeholder-wave">
 				<div class="d-flex gap-1 justify-content-between">
 					<div class="d-flex gap-2 flex-grow-1">
@@ -30,7 +30,7 @@
 							</div>
 						</div>
 					</div>
-					<div class="">
+					<div>
 						<button class="mark-read btn-ghost-sm" style="width: 1.5rem; height: 1.5rem;">
 							<i class="unread fa fa-2xs fa-circle text-primary"></i>
 						</button>

package/templates/partials/sidebar/user-menu.tpl

@@ -2,10 +2,10 @@
 	{buildAvatar(user, "20px", true)}
 	<span id="user-header-name" class="nav-text small visible-open fw-semibold">{user.username}</span>
 </label>
-<ul id="user-control-list" component="header/usercontrol" class="overscroll-behavior-contain user-dropdown dropdown-menu shadow p-1 text-sm" aria-labelledby="user_dropdown">
+<ul id="user-control-list" component="header/usercontrol" class="overscroll-behavior-contain user-dropdown dropdown-menu shadow p-1 text-sm ff-base" aria-labelledby="user_dropdown">
 	<li>
 		<a class="dropdown-item rounded-1 d-flex align-items-center gap-1" component="header/profilelink" href="{relative_path}/user/{user.userslug}">
-			<div class="text-center"><span component="user/status" class="badge border border-white border-2 rounded-circle status {user.status}"><span class="visually-hidden">[[global:{user.status}]]</span></span></div>
+			<span component="user/status" class="badge border border-white border-2 rounded-circle status {user.status}"><span class="visually-hidden">[[global:{user.status}]]</span></span>
 			<span class="fw-semibold" component="header/username">{user.username}</span>
 		</a>
 	</li>
@@ -13,25 +13,25 @@
 	<li><h6 class="dropdown-header text-xs">[[global:status]]</h6></li>
 	<li>
 		<a href="#" class="dropdown-item rounded-1 user-status d-flex align-items-center gap-1" data-status="online">
-			<div class="text-center"><span component="user/status" class="badge border border-white border-2 rounded-circle status online"><span class="visually-hidden">[[global:online]]</span></span></div>
+			<span component="user/status" class="badge border border-white border-2 rounded-circle status online"><span class="visually-hidden">[[global:online]]</span></span>
 			<span{{{ if user.online }}} class="fw-semibold"{{{ end }}}> [[global:online]]</span>
 		</a>
 	</li>
 	<li>
 		<a href="#" class="dropdown-item rounded-1 user-status d-flex align-items-center gap-1" data-status="away">
-			<div class="text-center"><span component="user/status" class="badge border border-white border-2 rounded-circle status away"><span class="visually-hidden">[[global:away]]</span></span></div>
+			<span component="user/status" class="badge border border-white border-2 rounded-circle status away"><span class="visually-hidden">[[global:away]]</span></span>
 			<span{{{ if user.away}}} class="fw-semibold"{{{ end }}}> [[global:away]]</span>
 		</a>
 	</li>
 	<li>
 		<a href="#" class="dropdown-item rounded-1 user-status d-flex align-items-center gap-1" data-status="dnd">
-			<div class="text-center"><span component="user/status" class="badge border border-white border-2 rounded-circle status dnd"><span class="visually-hidden">[[global:dnd]]</span></span></div>
+			<span component="user/status" class="badge border border-white border-2 rounded-circle status dnd"><span class="visually-hidden">[[global:dnd]]</span></span>
 			<span{{{ if user.dnd}}} class="fw-semibold"{{{ end }}}> [[global:dnd]]</span>
 		</a>
 	</li>
 	<li>
 		<a href="#" class="dropdown-item rounded-1 user-status d-flex align-items-center gap-1" data-status="offline">
-			<div class="text-center"><span component="user/status" class="badge border border-white border-2 rounded-circle status offline"><span class="visually-hidden">[[global:invisible]]</span></span></div>
+			<span component="user/status" class="badge border border-white border-2 rounded-circle status offline"><span class="visually-hidden">[[global:invisible]]</span></span>
 			<span{{{ if user.offline}}} class="fw-semibold"{{{ end }}}> [[global:invisible]]</span>
 		</a>
 	</li>

package/templates/partials/tags_list.tpl

@@ -1,8 +1,6 @@
 {{{each tags}}}
-<div class="tag-container d-flex">
-	<div class="d-flex gap-2 align-items-center text-truncate">
-	<a class="fs-5 badge border text-bg-light text-truncate text-decoration-none" href="{config.relative_path}/tags/{tags.valueEncoded}" data-tag="{tags.valueEscaped}"><span class="tag-item text-muted text-uppercase text-nowrap tag-class-{tags.class}" data-tag="{tags.valueEscaped}">{tags.valueEscaped}</span></a>
-	<span class="tag-topic-count text-secondary fw-semibold text-nowrap human-readable-number" title="{tags.score}">{tags.score}</span>
-</div>
-</div>
+<a href="{config.relative_path}/tags/{./valueEncoded}" data-tag="{./valueEscaped}" class="btn-ghost flex-column gap-1 align-items-start justify-content-start text-truncate">
+	<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, {./score}]]</div>
+</a>
 {{{end}}}

package/templates/partials/topic-list-bar.tpl

@@ -1,50 +1,52 @@
-<nav class="topic-list-header {{{ if config.theme.stickyToolbar }}} sticky-tools{{{ end }}} navbar navbar-expand p-0 border-0 rounded mb-3">
-	<div class="card card-header flex-row p-2 gap-1 border rounded ff-secondary w-100">
-		<ul component="category/controls" class="navbar-nav me-auto gap-2 align-items-center">
-			{{{ if template.category }}}
-			<!-- IMPORT partials/category/watch.tpl -->
-			<!-- IMPORT partials/category/sort.tpl -->
-			{{{ end }}}
-			{{{ if (template.popular || template.top)}}}
-			<!-- IMPORT partials/topic-terms.tpl -->
-			{{{ end }}}
-			{{{ if (template.unread || (template.recent || (template.popular || template.top))) }}}
-			<!-- IMPORT partials/topic-filters.tpl -->
-			<!-- IMPORT partials/category/filter-dropdown-left.tpl -->
-			{{{ end }}}
-			{{{ if template.unread }}}
-			<div class="markread btn-group {{{ if !topics.length }}}hidden{{{ end }}}">
-				<!-- IMPORT partials/category/selector-dropdown-left.tpl -->
-			</div>
-			{{{ end }}}
-			{{{ if template.tag }}}
-			<!-- IMPORT partials/category/filter-dropdown-left.tpl -->
-			{{{ end }}}
-			<!-- IMPORT partials/category/tools.tpl -->
+<div class="{{{ if config.theme.stickyToolbar }}}sticky-tools{{{ end }}}">
+	<nav class="topic-list-header navbar navbar-expand p-0 border-0 rounded my-2">
+		<div class="card card-header flex-row p-2 gap-1 border rounded w-100">
+			<ul component="category/controls" class="navbar-nav me-auto gap-2 align-items-center">
+				{{{ if template.category }}}
+				<!-- IMPORT partials/category/watch.tpl -->
+				<!-- IMPORT partials/category/sort.tpl -->
+				{{{ end }}}
+				{{{ if (template.popular || template.top)}}}
+				<!-- IMPORT partials/topic-terms.tpl -->
+				{{{ end }}}
+				{{{ if (template.unread || (template.recent || (template.popular || template.top))) }}}
+				<!-- IMPORT partials/topic-filters.tpl -->
+				<!-- IMPORT partials/category/filter-dropdown-left.tpl -->
+				{{{ end }}}
+				{{{ if template.unread }}}
+				<div class="markread btn-group {{{ if !topics.length }}}hidden{{{ end }}}">
+					<!-- IMPORT partials/category/selector-dropdown-left.tpl -->
+				</div>
+				{{{ end }}}
+				{{{ if template.tag }}}
+				<!-- IMPORT partials/category/filter-dropdown-left.tpl -->
+				{{{ end }}}
+				<!-- IMPORT partials/category/tools.tpl -->
 
-			{{{ if (!feeds:disableRSS && rssFeedUrl) }}}
-			<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 }}}
+				{{{ if (!feeds:disableRSS && rssFeedUrl) }}}
+				<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 }}}
 
-			<a href="{config.relative_path}{{{ if template.category }}}{url}{{{ else }}}/{selectedFilter.url}{querystring}{{{ end }}}" class="d-inline-block text-decoration-none">
-				<div class="d-md-block alert alert-warning h-100 m-0 px-2 py-1 line-clamp-2 text-sm text-break hide" id="new-topics-alert">There is a new post. Click here to reload.</div>
-			</a>
-		</ul>
+				<a href="{config.relative_path}{{{ if template.category }}}{url}{{{ else }}}/{selectedFilter.url}{querystring}{{{ end }}}" class="d-inline-block text-decoration-none">
+					<div class="d-md-block alert alert-warning h-100 m-0 px-2 py-1 line-clamp-2 text-sm text-break hide" id="new-topics-alert">There is a new post. Click here to reload.</div>
+				</a>
+			</ul>
 
-		<div class="d-flex gap-1 align-items-center">
-			{{{ if template.category }}}
-				{{{ if privileges.topics:create }}}
-				<a href="{config.relative_path}/compose?cid={cid}" component="category/post" id="new_topic" class="btn btn-primary btn-sm text-nowrap" data-ajaxify="false" role="button">[[category:new_topic_button]]</a>
-				{{{ end }}}
-			{{{ else }}}
-				{{{ if canPost }}}
-				<!-- IMPORT partials/buttons/newTopic.tpl -->
-				{{{ end }}}
-			{{{ end }}}
-			<!-- only show login button if not logged in and doesn't have any posting privilege -->
-			{{{ if (!loggedIn && (!privileges.topics:create && !canPost))}}}
-			<a component="category/post/guest" href="{config.relative_path}/login" class="btn btn-primary">[[category:guest-login-post]]</a>
-			{{{ end }}}
+			<div class="d-flex gap-1 align-items-center">
+				{{{ if template.category }}}
+					{{{ if privileges.topics:create }}}
+					<a href="{config.relative_path}/compose?cid={cid}" component="category/post" id="new_topic" class="btn btn-primary btn-sm text-nowrap" data-ajaxify="false" role="button">[[category:new_topic_button]]</a>
+					{{{ end }}}
+				{{{ else }}}
+					{{{ if canPost }}}
+					<!-- IMPORT partials/buttons/newTopic.tpl -->
+					{{{ end }}}
+				{{{ end }}}
+				<!-- only show login button if not logged in and doesn't have any posting privilege -->
+				{{{ if (!loggedIn && (!privileges.topics:create && !canPost))}}}
+				<a component="category/post/guest" href="{config.relative_path}/login" class="btn btn-primary">[[category:guest-login-post]]</a>
+				{{{ end }}}
+			</div>
 		</div>
-	</div>
-</nav>
+	</nav>
+</div>

package/templates/partials/users/item.tpl

@@ -4,36 +4,34 @@
 		<div class="fw-semibold text-truncate" title="{./displayname}">{./displayname}</div>
 		<div class="text-xs text-muted text-truncate">@{./username}</div>
 
-		<div class="align-self-start">
-			{{{ if section_online }}}
-			<div class="card card-header border rounded-1 py-0 px-1 text-xs">
-				<span class="timeago" title="{./lastonlineISO}"></span>
-			</div>
-			{{{ end }}}
+		{{{ if section_online }}}
+		<div class="text-xs text-muted text-truncate">
+			<span class="timeago" title="{./lastonlineISO}"></span>
+		</div>
+		{{{ end }}}
 
-			{{{ if section_joindate }}}
-			<div class="card card-header border rounded-1 py-0 px-1 text-xs">
-				<span class="timeago" title="{./joindateISO}"></span>
-			</div>
-			{{{ end }}}
+		{{{ if section_joindate }}}
+		<div class="text-xs text-muted text-truncate">
+			<span class="timeago" title="{./joindateISO}"></span>
+		</div>
+		{{{ end }}}
 
-			{{{ if section_sort-reputation }}}
-			<div class="card card-header border rounded-1 py-0 px-1 text-xs">
-				<span class="formatted-number">{./reputation}</span>
-			</div>
-			{{{ end }}}
+		{{{ if section_sort-reputation }}}
+		<div class="text-xs text-muted text-truncate">
+			<span class="formatted-number">{./reputation}</span>
+		</div>
+		{{{ end }}}
 
-			{{{ if section_sort-posts }}}
-			<div class="card card-header border rounded-1 py-0 px-1 text-xs">
-				<span class="formatted-number">{./postcount}</span>
-			</div>
-			{{{ end }}}
+		{{{ if section_sort-posts }}}
+		<div class="text-xs text-muted text-truncate">
+			<span class="formatted-number">{./postcount}</span>
+		</div>
+		{{{ end }}}
 
-			{{{ if section_flagged }}}
-			<div class="card card-header border rounded-1 py-0 px-1 text-xs">
-				<span class="formatted-number">{./flags}</span>
-			</div>
-			{{{ end }}}
+		{{{ if section_flagged }}}
+		<div class="text-xs text-muted text-truncate">
+			<span class="formatted-number">{./flags}</span>
 		</div>
+		{{{ end }}}
 	</div>
 </a>

package/templates/partials/users_list.tpl

@@ -1,4 +1,4 @@
-<div id="users-container" class="users-container row row-cols-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-5 g-2">
+<div id="users-container" class="users-container row row-cols-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-5 g-4">
 {{{ each users }}}
 	<!-- IMPORT partials/users/item.tpl -->
 {{{ end }}}

package/templates/post-queue.tpl

@@ -33,7 +33,7 @@
 			{{{ if (!posts.length && isAdmin) }}}
 			{{{ if !singlePost }}}
 			<div class="alert alert-info">
-				<p>[[post-queue:no-queued-posts]]</p>
+				[[post-queue:no-queued-posts]]
 				{{{ if !enabled }}}<p>[[post-queue:enabling-help, {config.relative_path}/admin/settings/post#post-queue]]</p>{{{ end }}}
 			</div>
 			{{{ else }}}

package/templates/tags.tpl

@@ -4,7 +4,7 @@
 	{{{end}}}
 </div>
 <div class="tags">
-	<h2 class="fw-semibold">[[pages:tags]]</h2>
+	<h3 class="fw-semibold">[[pages:tags]]</h3>
 	{{{ if displayTagSearch }}}
 	{{{ if tags.length }}}
 	<div class="row justify-content-end mb-3">
@@ -29,7 +29,7 @@
 	{{{ end }}}
 
 	<div class="category">
-		<div class="tag-list row row-cols-2 row-cols-lg-3 row-cols-xl-4  row-cols-xxl-5 gx-3 gy-2" data-nextstart="{nextStart}">
+		<div class="tag-list row row-cols-2 row-cols-lg-4 row-cols-xl-5 gx-3 gy-2" data-nextstart="{nextStart}">
 			<!-- IMPORT partials/tags_list.tpl -->
 		</div>
 	</div>

package/templates/topic.tpl

@@ -49,7 +49,7 @@
 		<!-- IMPORT partials/topic/deleted-message.tpl -->
 		{{{ end }}}
 
-		<ul component="topic" class="posts timeline mt-sm-4 p-0 py-3" data-tid="{tid}" data-cid="{cid}">
+		<ul component="topic" class="posts timeline mt-sm-2 p-0 py-3" data-tid="{tid}" data-cid="{cid}">
 			{{{each posts}}}
 				<li component="post" class="pt-4 {{{ if posts.deleted }}}deleted{{{ end }}} {{{ if posts.selfPost }}}self-post{{{ end }}} {{{ if posts.topicOwnerPost }}}topic-owner-post{{{ end }}}" <!-- IMPORT partials/data/topic.tpl -->>
 					<a component="post/anchor" data-index="{./index}" id="{increment(./index, "1")}"></a>

package/templates/users.tpl

@@ -4,7 +4,7 @@
 	{{{end}}}
 </div>
 <div class="users">
-	<h2 class="fw-semibold">[[global:users]]</h2>
+	<h3 class="fw-semibold">[[global:users]]</h3>
 	<div class="d-flex flex-wrap justify-content-between">
 		<div class="mb-2 mb-md-0">
 		<!-- IMPORT partials/users_list_menu.tpl -->