Work on scripting hooks

static/css/main.css

@@ -245,6 +245,12 @@ select:focus {
   display: block;
   height: 24px;
 }
+#script-hooks > .label {
+  color: var(--section-color);
+  font-weight: bold;
+  font-size: 1.25em;
+  margin-bottom: 8px;
+}
 #select-node {
   padding: 32px;
   display: grid;

static/js/app.mjs

@@ -121,7 +121,7 @@ export class App {
 
 			case 'SCRIPT_DELETED':
 				this.scriptsList.setSelected(null)
-				this.scriptsList.fetchScripts().catch(err=>showError(err))
+				this.scriptsList.fetchScripts().catch(err => showError(err))
 				break
 
 			case 'SCRIPT_EDIT':
@@ -292,6 +292,9 @@ export class App {
 
 				const connectedNodes = new ConnectedNodes(json.Node.ConnectedNodes)
 				document.getElementById('connected-nodes').replaceChildren(connectedNodes.render())
+
+				const scriptHooks = new ScriptHooks(json.Node.ScriptHooks)
+				document.getElementById('script-hooks').replaceChildren(scriptHooks.render())
 			})
 			.catch(err => showError(err))
 	}// }}}
@@ -969,6 +972,20 @@ class ConnectedNode {
 	}// }}}
 }
 
+class ScriptHooks extends Component {
+	constructor() {
+		super()
+	}
+	renderComponent() {
+		const div = document.createElement('div')
+		div.innerHTML = `
+			<div class="label">Script hooks</div>
+			<div>hum</div>
+		`
+		return div.children
+	}
+}
+
 class ScriptsList extends Component {
 	constructor() {// {{{
 		super()

static/less/main.less

@@ -329,6 +329,15 @@ select:focus {
 	}
 }
 
+#script-hooks {
+	& > .label {
+		color: var(--section-color);
+		font-weight: bold;
+		font-size: 1.25em;
+		margin-bottom: 8px;
+	}
+}
+
 #select-node {
 	padding: 32px;
 	display: grid;

views/pages/app.gotmpl

@@ -57,8 +57,9 @@
 			</div>
 		</div>
 
-		<div class="section" id="connected-nodes">
-		</div>
+		<div class="section" id="connected-nodes"></div>
+
+		<div class="section" id="script-hooks"></div>
 
 	</div>