From f2f907452bd9c5089a58902a6d221261ac225908 Mon Sep 17 00:00:00 2001
From: Steve White <stwhite@mac.com>
Date: Fri, 6 Jun 2025 00:02:00 -0500
Subject: [PATCH] Miscellaneous visual changes

---
 frontend/css/style.css | 61 ++++++++++++++++++++++++++++++++++++++++--
 frontend/js/app.js     | 29 ++++++++------------
 2 files changed, 70 insertions(+), 20 deletions(-)

diff --git a/frontend/css/style.css b/frontend/css/style.css
index aa364a7..30f0f35 100644
--- a/frontend/css/style.css
+++ b/frontend/css/style.css
@@ -65,12 +65,69 @@ main {
     overflow: hidden;
     font-size: 1rem;
     margin-bottom: 0;
+    table-layout: fixed;
 }
+
 #dialog-items-table th, #dialog-items-table td {
-    padding: 10px 12px;
-    border-bottom: 1px solid #e3e3e3;
+    padding: 7px 10px;
+    border: 1px solid #ddd;
     text-align: left;
+    vertical-align: middle;
+    font-weight: 400;
+    font-size: 0.97rem;
+    color: #2b2b2b;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
+
+
+/* Widen the Text/Duration column */
+#dialog-items-table th:nth-child(3), #dialog-items-table td:nth-child(3) {
+    min-width: 240px;
+    width: 40%;
+    font-weight: 400;
+    font-size: 1rem;
+}
+
+/* Make the Speaker (2nd) column narrower */
+#dialog-items-table th:nth-child(2), #dialog-items-table td:nth-child(2) {
+    width: 60px;
+    min-width: 60px;
+    max-width: 60px;
+    text-align: center;
+}
+
+/* Make the Actions (4th) column narrower */
+#dialog-items-table th:nth-child(4), #dialog-items-table td:nth-child(4) {
+    width: 60px;
+    min-width: 44px;
+    max-width: 60px;
+    text-align: center;
+}
+
+
+#dialog-items-table th:first-child, #dialog-items-table td.type-icon-cell {
+    width: 44px;
+    min-width: 36px;
+    max-width: 48px;
+    text-align: center;
+    padding-left: 0;
+    padding-right: 0;
+}
+
+.type-icon-cell {
+    text-align: center;
+    vertical-align: middle;
+}
+
+.dialog-type-icon {
+    font-size: 1.4em;
+    display: inline-block;
+    line-height: 1;
+    vertical-align: middle;
+}
+
 #dialog-items-table th {
     background: #f3f7fa;
     color: #4a90e2;
diff --git a/frontend/js/app.js b/frontend/js/app.js
index afe1bda..7a5b856 100644
--- a/frontend/js/app.js
+++ b/frontend/js/app.js
@@ -136,7 +136,12 @@ function initializeDialogEditor() {
 
             // Type column
             const typeTd = document.createElement('td');
-            typeTd.textContent = item.type === 'speech' ? 'Speech' : 'Silence';
+            typeTd.classList.add('type-icon-cell');
+            if (item.type === 'speech') {
+                typeTd.innerHTML = '<span class="dialog-type-icon" title="Speech" aria-label="Speech">🗣️</span>';
+            } else {
+                typeTd.innerHTML = '<span class="dialog-type-icon" title="Silence" aria-label="Silence">🤫</span>';
+            }
             tr.appendChild(typeTd);
 
             // Speaker column
@@ -301,23 +306,8 @@ function initializeDialogEditor() {
             }
             if (dialogItems.length === 0) {
                 alert('Please add at least one speech or silence line to the dialog.');
-                return;
+                return; // Prevent further execution if no dialog items
             }
-
-            // Clear previous results and show loading/status
-            if (generationLogPre) generationLogPre.textContent = 'Generating dialog...';
-            if (audioPlayer) {
-                audioPlayer.style.display = 'none';
-                audioPlayer.src = ''; // Clear previous audio source
-            }
-            if (downloadZipLink) {
-                downloadZipLink.style.display = 'none';
-                downloadZipLink.href = '#';
-                downloadZipLink.textContent = '';
-            }
-            if (zipArchivePlaceholder) zipArchivePlaceholder.style.display = 'block'; // Show placeholder
-            if (resultsDisplaySection) resultsDisplaySection.style.display = 'block'; // Make sure it's visible
-
             const payload = {
                 output_base_name: outputBaseName,
                 dialog_items: dialogItems.map(item => {
@@ -345,7 +335,10 @@ function initializeDialogEditor() {
                 if (generationLogPre) generationLogPre.textContent = result.log || 'No log output.';
                 
                 if (result.concatenated_audio_url && audioPlayer) { // Check audioPlayer, not audioSource
-                    audioPlayer.src = result.concatenated_audio_url.startsWith('http') ? result.concatenated_audio_url : `${API_BASE_URL_FOR_FILES}${result.concatenated_audio_url}`;
+                    // Cache-busting: append timestamp to force reload
+                    let audioUrl = result.concatenated_audio_url.startsWith('http') ? result.concatenated_audio_url : `${API_BASE_URL_FOR_FILES}${result.concatenated_audio_url}`;
+                    audioUrl += (audioUrl.includes('?') ? '&' : '?') + 't=' + Date.now();
+                    audioPlayer.src = audioUrl;
                     audioPlayer.load(); // Call load() after setting new source
                     audioPlayer.style.display = 'block';
                 } else {