refactor: search stats

public/language/en-GB/admin/dashboard.json

@@ -94,5 +94,8 @@
 	"view-as-json": "View as JSON",
 	"expand-analytics": "Expand analytics",
 	"clear-search-history": "Clear Search History",
-	"clear-search-history-confirm": "Are you sure you want to clear entire search history?"
+	"clear-search-history-confirm": "Are you sure you want to clear entire search history?",
+	"search-term": "Term",
+	"search-count": "Count",
+	"view-all": "View all"
 }

public/src/admin/dashboard.js

@@ -90,28 +90,14 @@ function updateRoomUsage(err, data) {
 
 	graphData.rooms = data;
 
-	const html = '<div class="text-center">' +
-					'<span class="fs-5">' + formattedNumber(data.onlineRegisteredCount) + '</span>' +
-					'<div class="stat text-nowrap text-uppercase fw-semibold text-xs text-muted">[[admin/dashboard:active-users.users]]</div>' +
-				'</div>' +
-				'<div class="text-center">' +
-					'<span class="fs-5">' + formattedNumber(data.onlineGuestCount) + '</span>' +
-					'<div class="stat text-nowrap text-uppercase fw-semibold text-xs text-muted">[[admin/dashboard:active-users.guests]]</div>' +
-				'</div>' +
-				'<div class="text-center">' +
-					'<span class="fs-5">' + formattedNumber(data.onlineRegisteredCount + data.onlineGuestCount) + '</span>' +
-					'<div class="stat text-nowrap text-uppercase fw-semibold text-xs text-muted">[[admin/dashboard:active-users.total]]</div>' +
-				'</div>' +
-				'<div class="text-center">' +
-					'<span class="fs-5">' + formattedNumber(data.socketCount) + '</span>' +
-					'<div class="stat text-nowrap text-uppercase fw-semibold text-xs text-muted">[[admin/dashboard:active-users.connections]]</div>' +
-				'</div>';
-
 	updateRegisteredGraph(data.onlineRegisteredCount, data.onlineGuestCount);
 	updatePresenceGraph(data.users);
 	updateTopicsGraph(data.topTenTopics);
 
-	$('#active-users').translateHtml(html);
+	$('#active-users-loggedin').text(formattedNumber(data.onlineRegisteredCount));
+	$('#active-users-guests').text(formattedNumber(data.onlineGuestCount));
+	$('#active-users-total').text(formattedNumber(data.onlineRegisteredCount + data.onlineGuestCount));
+	$('#active-users-connections').text(formattedNumber(data.socketCount));
 }
 
 const graphs = {

src/views/admin/dashboard.tpl

@@ -112,18 +112,44 @@
 		<div class="card mb-3">
 			<div class="card-header">[[admin/dashboard:active-users]]</div>
 			<div class="card-body">
-				<div id="active-users" class="stats row row-cols-2 row-cols-md-1 row-cols-lg-2"></div>
+				<div id="active-users" class="stats">
+					<table class="table table-sm text-sm">
+						<tbody>
+							<tr>
+								<td>[[admin/dashboard:active-users.users]]</td>
+								<td id="active-users-loggedin" class="text-end" style="width: 1px;"></td>
+							</tr>
+							<tr>
+								<td>[[admin/dashboard:active-users.guests]]</td>
+								<td id="active-users-guests" class="text-end" style="width: 1px;"></td>
+							</tr>
+							<tr>
+								<td>[[admin/dashboard:active-users.total]]</td>
+								<td id="active-users-total" class="text-end" style="width: 1px;"></td>
+							</tr>
+							<tr>
+								<td>[[admin/dashboard:active-users.connections]]</td>
+								<td id="active-users-connections" class="text-end" style="width: 1px;"></td>
+							</tr>
+						</tbody>
+					</table>
+				</div>
 			</div>
 		</div>
 
 		<div class="card">
-			<div class="card-header">[[admin/dashboard:popular-searches]]</div>
+			<div class="card-header d-flex justify-content-between">[[admin/dashboard:popular-searches]] <a href="{config.relative_path}/admin/dashboard/searches" class="text-xs">[[admin/dashboard:view-all]]</a></div>
 			<div class="card-body">
-				<ul class="list-unstyled text-sm">
+				<table class="table table-sm text-sm search-list">
-					{{{ each popularSearches}}}
+					<tbody>
-					<li>({popularSearches.score}) {popularSearches.value}</li>
+						{{{ each popularSearches }}}
-					{{{ end }}}
+						<tr>
-				</ul>
+							<td>{popularSearches.value}</td>
+							<td class="text-end" style="width: 1px;">{formattedNumber(popularSearches.score)}</td>
+						</tr>
+						{{{ end }}}
+					</tbody>
+				</table>
 			</div>
 		</div>
 	</div>

src/views/admin/dashboard/searches.tpl

@@ -1,5 +1,5 @@
 <div class="row dashboard px-lg-4">
-	<div class="col-12">
+	<div class="col-8 mx-auto">
 		<div class="d-flex justify-content-between align-items-center mb-3">
 			<form class="d-flex flex-wrap gap-3 align-sm-items-center" method="GET">
 				<div class="d-flex align-items-center gap-2">
@@ -19,8 +19,8 @@
 
 		<table class="table table-sm text-sm search-list">
 			<thead>
-				<th class="text-end">Count</th>
+				<th>[[admin/dashboard:search-term]]</th>
-				<th>Term</th>
+				<th class="text-end">[[admin/dashboard:search-count]]</th>
 			</thead>
 			<tbody>
 				{{{ if !searches.length}}}
@@ -30,8 +30,8 @@
 				{{{ end }}}
 				{{{ each searches }}}
 				<tr>
+					<td>{searches.value}</td>
 					<td class="text-end" style="width: 1px;">{searches.score}</td>
-					<td>{searches.value}</a></td>
 				</tr>
 				{{{ end }}}
 			</tbody>