Connected nodes

static/less/main.less

@@ -38,6 +38,10 @@ body {
 	cursor: pointer;
 }
 
+button {
+	padding: 4px 8px;
+}
+
 .page {
 	display: none;
 
@@ -270,10 +274,18 @@ select:focus {
 
 #connected-nodes {
 	& > .label {
-		margin-bottom: 16px;
 		color: var(--section-color);
 		font-weight: bold;
 		font-size: 1.25em;
+		margin-bottom: 8px;
+	}
+
+	& > .add {
+		margin-bottom: 8px;
+
+		img {
+			height: 24px;
+		}
 	}
 
 	.connected-nodes {
@@ -302,3 +314,57 @@ select:focus {
 		}
 	}
 }
+
+#select-node {
+	padding: 32px;
+	display: grid;
+	grid-template-columns: min-content;
+	grid-gap: 8px;
+	justify-items: start;
+
+	& > * {
+		min-width: 300px;
+		width: 100%;
+	}
+
+	button {
+		width: 100px !important;
+	}
+
+	.more-exist {
+		color: #a44;
+	}
+
+	.search-results {
+		.node-table {
+			display: flex;
+			align-items: start;
+			gap: 32px;
+
+			.group {
+				margin-top: 16px;
+				.label {
+					font-weight: bold;
+					color: var(--section-color);
+					margin-bottom: 8px;
+					white-space: nowrap;
+				}
+
+				.children {
+					display: grid;
+					grid-template-columns: min-content 1fr;
+					grid-gap: 8px;
+
+					.node {
+						cursor: pointer;
+					}
+
+					img {
+						cursor: pointer;
+						height: 24px;
+					}
+				}
+			}
+		}
+	}
+}