From fc992b8bdcb9041fd9323299f53e851f89ab244e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Magnus=20=C3=85hall?= <magnus.ahall@gibon.se>
Date: Thu, 7 Aug 2025 20:59:59 +0200
Subject: [PATCH] UI changes

---
 static/css/main.css   | 22 ++++++++++++++++++++++
 static/js/app.mjs     | 20 ++++++++++++++++++--
 static/less/main.less | 26 ++++++++++++++++++++++++++
 3 files changed, 66 insertions(+), 2 deletions(-)

diff --git a/static/css/main.css b/static/css/main.css
index 191b218..19ace99 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -102,6 +102,17 @@ button {
 #types {
   grid-area: navigation;
 }
+#types .label {
+  display: grid;
+  grid-template-columns: 1fr min-content;
+  align-items: center;
+}
+#types .label div:first-child {
+  font-size: 1.5em;
+  font-weight: bold;
+  color: var(--section-color);
+  margin-right: 8px;
+}
 #types .group {
   font-weight: bold;
   white-space: nowrap;
@@ -411,6 +422,17 @@ dialog#connection-data div.button {
   color: #fff;
   z-index: 8192;
 }
+#scripts .label {
+  display: grid;
+  grid-template-columns: 1fr min-content;
+  align-items: center;
+}
+#scripts .label div:first-child {
+  font-size: 1.5em;
+  font-weight: bold;
+  color: var(--section-color);
+  margin-right: 8px;
+}
 #scripts .group {
   font-weight: bold;
   margin-top: 32px;
diff --git a/static/js/app.mjs b/static/js/app.mjs
index 219e4ed..b1cde57 100644
--- a/static/js/app.mjs
+++ b/static/js/app.mjs
@@ -808,12 +808,20 @@ class TypesList extends Component {
 	renderComponent() {// {{{
 		const div = document.createElement('div')
 
+		const label = document.createElement('div')
+		const inner = document.createElement('div')
+		label.classList.add('label')
+		inner.innerText = 'Types'
+		label.appendChild(inner)
+
 		const create = document.createElement('img')
 		create.setAttribute('src', `/images/${_VERSION}/node_modules/@mdi/svg/svg/plus-box.svg`)
 		create.style.height = '32px'
 		create.style.cursor = 'pointer';
 		create.addEventListener('click', () => this.createType())
-		div.appendChild(create)
+
+		label.append(create)
+		div.appendChild(label)
 
 		this.types.sort(_app.typeSort)
 
@@ -1155,6 +1163,12 @@ class ScriptsList extends Component {
 		})
 	}// }}}
 	renderComponent() {// {{{
+		const label = document.createElement('div')
+		const inner = document.createElement('div')
+		label.classList.add('label')
+		inner.innerText = 'Scripts'
+		label.appendChild(inner)
+
 		let prevGroup = null
 		const elements = []
 		const imgAdd = document.createElement('img')
@@ -1162,7 +1176,9 @@ class ScriptsList extends Component {
 		imgAdd.style.height = '32px'
 		imgAdd.style.cursor = 'pointer'
 		imgAdd.addEventListener('click', () => this.createScript())
-		elements.push(imgAdd)
+
+		label.append(imgAdd)
+		elements.push(label)
 
 		for (const s of this.scripts) {
 			if (prevGroup != s.Group) {
diff --git a/static/less/main.less b/static/less/main.less
index 709684c..eebfc4c 100644
--- a/static/less/main.less
+++ b/static/less/main.less
@@ -137,6 +137,19 @@ button {
 #types {
 	grid-area: navigation;
 
+	.label {
+		div:first-child {
+			font-size: 1.5em;
+			font-weight: bold;
+			color: var(--section-color);
+			margin-right: 8px;
+		}
+
+		display: grid;
+		grid-template-columns: 1fr min-content;
+		align-items: center;
+	}
+
 	.group {
 		font-weight: bold;
 		white-space: nowrap;
@@ -534,6 +547,19 @@ dialog#connection-data {
 }
 
 #scripts {
+	.label {
+		div:first-child {
+			font-size: 1.5em;
+			font-weight: bold;
+			color: var(--section-color);
+			margin-right: 8px;
+		}
+
+		display: grid;
+		grid-template-columns: 1fr min-content;
+		align-items: center;
+	}
+
 	.group {
 		font-weight: bold;
 		margin-top: 32px;