Updated buttons, save/load

frontend/css/style.css

@@ -229,19 +229,20 @@ h3 {
     color: #fff;
     border: none;
     border-radius: 50%;
-    width: 28px;
+    width: 32px;
-    height: 28px;
+    height: 32px;
-    font-size: 1.2rem;
+    font-size: 1.25rem;
     line-height: 1;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     transition: background 0.15s;
-    margin: 0 2px;
+    margin: 0 3px;
     box-shadow: 0 1px 2px rgba(44,62,80,0.06);
     outline: none;
     padding: 0;
+    vertical-align: middle;
 }
 .x-remove-btn:hover, .x-remove-btn:focus {
     background: #c0392b;
@@ -419,3 +420,38 @@ footer {
         width: 100%;
     }
 }
+
+.move-up-btn, .move-down-btn {
+    background: #f3f7fa;
+    color: #357ab8;
+    border: 1.5px solid #b5c6df;
+    border-radius: 50%;
+    width: 32px;
+    height: 32px;
+    font-size: 1.25rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0 3px;
+    padding: 0;
+    box-shadow: 0 1px 2px rgba(44,62,80,0.06);
+    vertical-align: middle;
+    cursor: pointer;
+    transition: background 0.15s, color 0.15s, border-color 0.15s;
+}
+
+.move-up-btn:disabled, .move-down-btn:disabled {
+    opacity: 0.45;
+    cursor: not-allowed;
+}
+
+.move-up-btn:hover:not(:disabled), .move-down-btn:hover:not(:disabled) {
+    background: #eaf1fa;
+    color: #205081;
+    border-color: #357ab8;
+}
+
+.move-up-btn:focus, .move-down-btn:focus {
+    outline: 2px solid #4a90e2;
+    outline-offset: 2px;
+}

frontend/js/app.js

@@ -7,10 +7,10 @@ const API_BASE_URL = 'http://localhost:8000'; // Assuming backend runs here
 // then this should be http://localhost:8000. The backend will return paths like /generated_audio/...
 const API_BASE_URL_FOR_FILES = 'http://localhost:8000'; 
 
-document.addEventListener('DOMContentLoaded', () => {
+document.addEventListener('DOMContentLoaded', async () => {
     console.log('DOM fully loaded and parsed');
     initializeSpeakerManagement();
-    initializeDialogEditor(); // Placeholder for now
+    await initializeDialogEditor(); // Now properly awaiting the async function
     initializeResultsDisplay(); // Placeholder for now
 });
 
@@ -119,7 +119,7 @@ function normalizeDialogItem(item) {
     };
 }
 
-function initializeDialogEditor() {
+async function initializeDialogEditor() {
     const dialogItemsContainer = document.getElementById('dialog-items-container');
     const addSpeechLineBtn = document.getElementById('add-speech-line-btn');
     const addSilenceLineBtn = document.getElementById('add-silence-line-btn');
@@ -140,6 +140,15 @@ function initializeDialogEditor() {
     let dialogItems = [];
     let availableSpeakersCache = []; // Cache for speaker names and IDs
 
+    // Load speakers at startup
+    try {
+        availableSpeakersCache = await getSpeakers();
+        console.log(`Loaded ${availableSpeakersCache.length} speakers for dialog editor`);
+    } catch (error) {
+        console.error('Error loading speakers at startup:', error);
+        // Continue without speakers - they'll be loaded when needed
+    }
+
     // Function to render the current dialogItems array to the DOM as table rows
     function renderDialogItems() {
         if (!dialogItemsContainer) return;
@@ -563,7 +572,7 @@ function initializeDialogEditor() {
         }
 
         const reader = new FileReader();
-        reader.onload = function(e) {
+        reader.onload = async function(e) {
             try {
                 const content = e.target.result;
                 const lines = content.trim().split('\n');
@@ -599,6 +608,16 @@ function initializeDialogEditor() {
                     if (!confirmed) return;
                 }
 
+                // Ensure speakers are loaded before rendering
+                if (availableSpeakersCache.length === 0) {
+                    try {
+                        availableSpeakersCache = await getSpeakers();
+                    } catch (error) {
+                        console.error('Error fetching speakers:', error);
+                        alert('Could not load speakers. Dialog loaded but speaker names may not display correctly.');
+                    }
+                }
+
                 // Replace current dialog
                 dialogItems.splice(0, dialogItems.length, ...loadedItems);
                 renderDialogItems();