Made rows re-orderable

frontend/js/app.js

@@ -167,17 +167,84 @@ function initializeDialogEditor() {
 
             // Text/Duration column
             const textTd = document.createElement('td');
+            textTd.className = 'dialog-editable-cell';
             if (item.type === 'speech') {
                 let txt = item.text.length > 60 ? item.text.substring(0, 57) + '…' : item.text;
                 textTd.textContent = `"${txt}"`;
+                textTd.title = item.text;
             } else {
                 textTd.textContent = `${item.duration}s`;
             }
+            // Double-click to edit
+            textTd.ondblclick = () => {
+                textTd.innerHTML = '';
+                const input = document.createElement('input');
+                input.className = 'dialog-edit-input';
+                if (item.type === 'speech') {
+                    input.type = 'text';
+                    input.value = item.text;
+                    input.size = Math.max(16, item.text.length);
+                } else {
+                    input.type = 'number';
+                    input.value = item.duration;
+                    input.min = 0.1;
+                    input.step = 0.1;
+                }
+                input.onblur = saveEdit;
+                input.onkeydown = (e) => {
+                    if (e.key === 'Enter') {
+                        input.blur();
+                    } else if (e.key === 'Escape') {
+                        renderDialogItems();
+                    }
+                };
+                textTd.appendChild(input);
+                input.focus();
+                function saveEdit() {
+                    if (item.type === 'speech') {
+                        dialogItems[index].text = input.value;
+                    } else {
+                        let val = parseFloat(input.value);
+                        if (!isNaN(val) && val > 0) dialogItems[index].duration = val;
+                    }
+                    renderDialogItems();
+                }
+            };
             tr.appendChild(textTd);
 
             // Actions column
             const actionsTd = document.createElement('td');
             actionsTd.classList.add('actions');
+
+            // Up button
+            const upBtn = document.createElement('button');
+            upBtn.innerHTML = '↑';
+            upBtn.title = 'Move up';
+            upBtn.className = 'move-up-btn';
+            upBtn.disabled = index === 0;
+            upBtn.onclick = () => {
+                if (index > 0) {
+                    [dialogItems[index - 1], dialogItems[index]] = [dialogItems[index], dialogItems[index - 1]];
+                    renderDialogItems();
+                }
+            };
+            actionsTd.appendChild(upBtn);
+
+            // Down button
+            const downBtn = document.createElement('button');
+            downBtn.innerHTML = '↓';
+            downBtn.title = 'Move down';
+            downBtn.className = 'move-down-btn';
+            downBtn.disabled = index === dialogItems.length - 1;
+            downBtn.onclick = () => {
+                if (index < dialogItems.length - 1) {
+                    [dialogItems[index], dialogItems[index + 1]] = [dialogItems[index + 1], dialogItems[index]];
+                    renderDialogItems();
+                }
+            };
+            actionsTd.appendChild(downBtn);
+
+            // Remove button
             const removeBtn = document.createElement('button');
             removeBtn.innerHTML = '&times;'; // Unicode multiplication sign (X)
             removeBtn.classList.add('remove-dialog-item-btn', 'x-remove-btn');