[ai] fixed web server issues, still some quirky behaviour. More robust.

web/index.html

@@ -75,9 +75,7 @@
           <h2>Playlist</h2>
           <button class="action-btn small" onclick="location.reload()">Refresh</button>
         </div>
-        <div class="playlist-container">
-          %DIRECTORY%
-        </div>
+        <div class="playlist-container" id="playlistContainer"></div>
 
         <div class="manager-toggle">
           <button id="toggleFileManagerButton" class="action-btn" onclick="toggleFileManager()">Toggle Manager</button>
@@ -106,7 +104,7 @@
 
           <h4>Edit RFID Mapping</h4>
           <p class="hint">Hint: Use a folder or filename, not the absolute file path!</p>
-          <div class="mapping-list">%MAPPING%</div>
+          <div class="mapping-list" id="mappingList"></div>
 
           <form id="editMappingForm" class="form form-grid">
             <div>

web/script.js

@@ -1,8 +1,59 @@
 setInterval(getState, 4000);
 setInterval(updateProgress, 500); // Update progress every second
 
-// Get the <li> elements
-var liElements = document.querySelectorAll('ul li');
+/* Dynamic content loaders for playlist and mapping (avoid heavy template processing on server) */
+function bindPlaylistClicks() {
+  var container = document.getElementById('playlistContainer');
+  if (!container) return;
+  container.onclick = function(e) {
+    var li = e.target.closest('li');
+    if (!li || !container.contains(li)) return;
+    var id = li.dataset && li.dataset.id;
+    if (id) playSongById(id);
+  };
+}
+
+function loadDirectory() {
+  var container = document.getElementById('playlistContainer');
+  if (!container) return;
+  var xhr = new XMLHttpRequest();
+  xhr.open('GET', '/directory', true);
+  xhr.onreadystatechange = function() {
+    if (xhr.readyState === 4) {
+      if (xhr.status >= 200 && xhr.status < 300) {
+        container.innerHTML = xhr.responseText || '';
+        bindPlaylistClicks();
+      } else {
+        container.innerHTML = '<div class="hint">Failed to load playlist.</div>';
+      }
+    }
+  };
+  xhr.send();
+}
+
+function loadMapping() {
+  var el = document.getElementById('mappingList');
+  if (!el) return;
+  var xhr = new XMLHttpRequest();
+  xhr.open('GET', '/mapping', true);
+  xhr.onreadystatechange = function() {
+    if (xhr.readyState === 4) {
+      if (xhr.status >= 200 && xhr.status < 300) {
+        el.innerHTML = xhr.responseText || '';
+      } else {
+        el.innerHTML = '<div class="hint">Failed to load mapping.</div>';
+      }
+    }
+  };
+  xhr.send();
+}
+
+/* Kick off dynamic loads on DOM ready */
+document.addEventListener('DOMContentLoaded', function() {
+  loadDirectory();
+  loadMapping();
+  getState();
+});
 
 var lastChange = 0;
 
@@ -24,13 +75,7 @@ function formatTime(totalSec) {
 }
 
 // Add click event listener to each <li> element
-liElements.forEach(function(li) {
-  li.addEventListener('click', function() {
-    //var liText = this.innerText;
-    var id = this.dataset.id;
-    playSongById(id);
-  });
-});
+/* Clicks are handled via event delegation in bindPlaylistClicks() */
 
 function simpleGetCall(endpoint) {
   var xhr = new XMLHttpRequest();