More work on hooks

static/css/main.css

@@ -220,6 +220,7 @@ select:focus {
 }
 #connected-nodes > .add img {
   height: 24px;
+  cursor: pointer;
 }
 #connected-nodes .connected-nodes {
   display: flex;
@@ -245,6 +246,41 @@ select:focus {
   display: block;
   height: 24px;
 }
+#script-hooks .scripts-grid {
+  display: grid;
+  grid-template-columns: repeat(4, min-content);
+  align-items: center;
+  grid-gap: 4px 0px;
+}
+#script-hooks .scripts-grid .header {
+  font-weight: bold;
+  margin-right: 8px;
+}
+#script-hooks .scripts-grid div {
+  white-space: nowrap;
+}
+#script-hooks .scripts-grid .script-icon {
+  margin-right: 4px;
+}
+#script-hooks .scripts-grid .script-icon img,
+#script-hooks .scripts-grid .script-unhook img {
+  display: block;
+  height: 24px;
+}
+#script-hooks .scripts-grid .script-name,
+#script-hooks .scripts-grid .script-ssh {
+  margin-right: 16px;
+}
+#script-hooks .scripts-grid .script-ssh {
+  cursor: pointer;
+}
+#script-hooks > .add {
+  margin-bottom: 8px;
+}
+#script-hooks > .add img {
+  height: 24px;
+  cursor: pointer;
+}
 #script-hooks > .label {
   color: var(--section-color);
   font-weight: bold;

static/js/app.mjs

@@ -973,19 +973,58 @@ class ConnectedNode {
 }
 
 class ScriptHooks extends Component {
-	constructor() {
+	constructor(hooks) {
 		super()
+		this.hooks = hooks
 	}
 	renderComponent() {
 		const div = document.createElement('div')
 		div.innerHTML = `
 			<div class="label">Script hooks</div>
-			<div>hum</div>
+			<div class="add"><img src="/images/${_VERSION}/node_modules/@mdi/svg/svg/plus-box.svg" /></div>
+			<div class="scripts-grid">
+				<div class="header" style="grid-column: 1 / 3;">Script</div>
+				<div class="header" style="grid-column: 3 / 5;">SSH</div>
+			</div>
 		`
+
+		div.querySelector('.add').addEventListener('click', ()=>{
+			alert('FIXME')
+		})
+
+		const scriptsGrid = div.querySelector('.scripts-grid')
+		for(const hook of this.hooks) {
+			const h = new ScriptHook(hook)
+			scriptsGrid.append(h.render())
+		}
+
 		return div.children
 	}
 }
 
+class ScriptHook extends Component {
+	constructor(hook) {// {{{
+		super()
+		this.hook = hook
+	}// }}}
+	renderComponent() {// {{{
+		const tmpl = document.createElement('template')
+		tmpl.innerHTML = `
+			<div class="script-icon"><img src="/images/${_VERSION}/node_modules/@mdi/svg/svg/bash.svg" /></div>
+			<div class="script-name">${this.hook.Script.Name}</div>
+			<div class="script-ssh">${this.hook.SSH}</div>
+			<div class="script-unhook"><img src="/images/${_VERSION}/node_modules/@mdi/svg/svg/trash-can.svg" /></div>
+		`
+
+		tmpl.content.querySelector('.script-ssh').addEventListener('click', () => {
+			prompt('SSH', this.hook.SSH)
+				//new ConnectionDataDialog(this.hook, () => _app.edit(_app.currentNode.ID)).render()
+		})
+
+		return tmpl.content
+	}// }}}
+}
+
 class ScriptsList extends Component {
 	constructor() {// {{{
 		super()

static/less/main.less

@@ -292,9 +292,9 @@ select:focus {
 
 	& > .add {
 		margin-bottom: 8px;
-
 		img {
 			height: 24px;
+			cursor: pointer;
 		}
 	}
 
@@ -330,12 +330,56 @@ select:focus {
 }
 
 #script-hooks {
+	.scripts-grid {
+		.header {
+			font-weight: bold;
+			margin-right: 8px;
+		}
+
+		display: grid;
+		grid-template-columns: repeat(4, min-content);
+		align-items: center;
+		grid-gap: 4px 0px;
+
+		div {
+			white-space: nowrap;
+		}
+
+		.script-icon {
+			margin-right: 4px;
+		}
+
+		.script-icon, .script-unhook {
+			img {
+				display: block;
+				height: 24px;
+			}
+		}
+
+		.script-name, .script-ssh {
+			margin-right: 16px;
+		}
+
+		.script-ssh {
+			cursor: pointer;
+		}
+	}
+
+	& > .add {
+		margin-bottom: 8px;
+		img {
+			height: 24px;
+			cursor: pointer;
+		}
+	}
+
 	& > .label {
 		color: var(--section-color);
 		font-weight: bold;
 		font-size: 1.25em;
 		margin-bottom: 8px;
 	}
+
 }
 
 #select-node {