hide node action buttons until title clicked

public/css/app.css

@@ -476,6 +476,22 @@ form {
 .node-tree li > span {
     flex-shrink: 0;
     font-weight: 500;
+    cursor: pointer;
+}
+
+.node-tree li > span:hover,
+.node-tree li.is-active > span {
+    color: var(--color-primary);
+}
+
+.node-tree li > button.add-child,
+.node-tree li > button.bulk-add-children {
+    display: none;
+}
+
+.node-tree li.is-active > button.add-child,
+.node-tree li.is-active > button.bulk-add-children {
+    display: inline-block;
 }
 
 .node-tree li > button {

public/js/text.js

@@ -1,4 +1,5 @@
 const expandedNodeIds = new Set();
+let activeNodeId = null;
 
 document.addEventListener('DOMContentLoaded', () => {
     const textId = window.location.pathname.split('/').pop();
@@ -75,8 +76,29 @@ function renderTree(nodes, textId, depth = 0) {
 
         const titleSpan = document.createElement('span');
         titleSpan.textContent = node.title;
+        titleSpan.addEventListener('click', () => {
+            if (activeNodeId === node.id) {
+                activeNodeId = null;
+                li.classList.remove('is-active');
+                closeAllAddForms();
+                return;
+            }
+            const previousActive = document.querySelector(
+                '#text-detail li.is-active'
+            );
+            if (previousActive) {
+                previousActive.classList.remove('is-active');
+            }
+            closeAllAddForms();
+            li.classList.add('is-active');
+            activeNodeId = node.id;
+        });
         li.appendChild(titleSpan);
 
+        if (node.id === activeNodeId) {
+            li.classList.add('is-active');
+        }
+
         const addBtn = document.createElement('button');
         addBtn.textContent = 'Add child';
         addBtn.className = 'add-child';