UX iprovements on server audit dialog

browser/css/jsdialogs.css

@@ -2250,6 +2250,42 @@ kbd,
 	height: 16px;
 }
 
+#ServerAuditDialog #ServerAuditDialog-mainbox label {
+	display: flex;
+	align-items: center;
+	gap: 4px;
+	color: #000;
+	border-radius: 30px;
+	width: fit-content;
+	height: 16px;
+	margin-top: 8px;
+	padding-right: 10px;
+}
+
+#ServerAuditDialog #ServerAuditDialog-mainbox label#auditsuccess {
+	background-color: #c4f7cc;
+	color: #1c4f26;
+}
+
+#ServerAuditDialog #ServerAuditDialog-mainbox label#auditerror {
+	background-color: #ffd6d9;
+	color: #d42314;
+}
+
+#ServerAuditDialog #ServerAuditDialog-mainbox label#auditsuccess::before {
+	background: url('images/circle-check.svg') no-repeat center/18px;
+	content: '';
+	width: 16px;
+	height: 16px;
+}
+
+#ServerAuditDialog #ServerAuditDialog-mainbox label#auditerror::before {
+	background: url('images/monochrome-x-cross.svg') no-repeat center;
+	content: '';
+	width: 16px;
+	height: 16px;
+}
+
 /* text-area overflow on function wizard window */
 
 #FormulaDialog #ed_formula.ui-textarea {

browser/src/control/Control.ServerAuditDialog.ts

@@ -176,8 +176,18 @@ class ServerAuditDialog {
 		return hasErrors;
 	}
 
+	private countErrors(): number {
+		return (
+			(app.serverAudit?.filter((entry: AuditEntry) => entry.status !== 'ok')
+				.length ?? 0) +
+			(app.clientAudit?.filter((entry: AuditEntry) => entry.status !== 'ok')
+				.length ?? 0)
+		);
+	}
+
 	private getJSON(entries: Array<any>): JSDialogJSON {
 		const hasErrors = this.hasErrors();
+		const countErrors = this.countErrors();
 
 		return {
 			id: this.id,
@@ -198,13 +208,6 @@ class ServerAuditDialog {
 					type: 'container',
 					vertical: true,
 					children: [
-						!hasErrors
-							? {
-									id: 'auditsuccess',
-									type: 'fixedtext',
-									text: _('No issues found'),
-								}
-							: {},
 						{
 							id: 'auditlist',
 							type: 'treelistbox',
@@ -215,6 +218,23 @@ class ServerAuditDialog {
 							entries: entries,
 							enabled: entries.length > 0,
 						},
+						!hasErrors
+							? {
+									id: 'auditsuccess',
+									type: 'fixedtext',
+									text: _('No issues found'),
+								}
+							: {
+									id: 'auditerror',
+									type: 'fixedtext',
+									text:
+										countErrors === 1
+											? _('1 issue found')
+											: _('%COUNT% issues found').replaceAll(
+													'%COUNT%',
+													countErrors,
+												),
+								},
 						{
 							id: this.id + '-buttonbox',
 							type: 'buttonbox',