Fixed universe loading and removing unsafe innerHTML usage

index.html

@@ -444,6 +444,14 @@
         </div>
       </div>
       <script type="module" src="/src/main.ts"></script>
+
+      <template id="ui-known-universe-item-template">
+        <!-- A known universe button in "opening" interface -->
+        <li class="hover:fill-black hover:bg-white py-2 hover:text-black flex justify-between px-4">
+          <button class="universe-name load-universe" title="Load this universe">Universe Name</button>
+          <button class="delete-universe" title="Delete this universe">🗑</button>
+        </li>
+      </template>
   </body>
 	<p id="timeviewer" class="rounded-lg px-2 py-2 font-bold bg-white cursor-textpointer-events-none select-none text-black text-sm absolute bottom-2 right-2"></p>
 </html>

src/main.ts

@@ -1007,19 +1007,33 @@ export class Editor {
   };
 
   updateKnownUniversesView = () => {
-    let existing_universes = document.getElementById("existing-universes");
+    let itemTemplate = document.getElementById("ui-known-universe-item-template") as HTMLTemplateElement;
-    let known_universes = Object.keys(this.universes);
+    if(!itemTemplate){
-    let final_html =
+      console.warn("Missing template #ui-known-universe-item-template")
-      "<ul class='lg:h-80 lg:w-80 lg:pb-2 lg:pt-2 overflow-y-scroll text-white lg:mb-4 border rounded-lg bg-neutral-800'>";
+      return
-    known_universes.forEach((name) => {
+    }
-      final_html += `
+
-<li onclick="_loadUniverseFromInterface('${name}')" class="hover:fill-black hover:bg-white py-2 hover:text-black flex justify-between px-4">
+    let existing_universes = document.getElementById("existing-universes")
-	<p >${name}</p>
+    if(!existing_universes){
-	<button onclick=_deleteUniverseFromInterface('${name}')>🗑</button>
+      console.warn("Missing element #existing-universes")
-</li>`;
+      return
-    });
+    }
-    final_html = final_html + "</ul>";
+
-    existing_universes!.innerHTML = final_html;
+    let list = document.createElement("ul")
+    list.className = "lg:h-80 lg:w-80 lg:pb-2 lg:pt-2 overflow-y-scroll text-white lg:mb-4 border rounded-lg bg-neutral-800"
+
+    list.append(...Object.keys(this.universes)
+      .map(it => {
+        let item = itemTemplate.content.cloneNode(true) as DocumentFragment
+        let api = (window as unknown as UserAPI) // It's dirty but okey
+        item.querySelector(".universe-name")!.textContent = it
+        item.querySelector(".load-universe")?.addEventListener("click", () => api._loadUniverseFromInterface(it))
+        item.querySelector(".delete-universe")?.addEventListener("click", () => api._deleteUniverseFromInterface(it))
+        return item
+      }))
+
+    existing_universes.innerHTML = ""
+    existing_universes.append(list)
   };
 
   async share() {