Merge pull request #138 from ThisIs-Developer/perf-layout-reflow-optimizations

fix: resolve welcome template first-run missing and new tab button duplication

Author: ThisIs-Developer

desktop-app/resources/index.html

@@ -854,7 +854,7 @@ <h3 class="modal-section-title">Open-source credits</h3>
         </div>
     </div>
 
-    <template id="default-markdown">---
+    <script type="text/markdown" id="default-markdown">---
 title: Welcome to Markdown Viewer
 description: A GitHub-style Markdown renderer with live preview, math, diagrams, and export support.
 author: ThisIs-Developer
@@ -1021,7 +1021,7 @@ <h3 class="modal-section-title">Open-source credits</h3>
 ## 🛡️ Security Note
 
 This is a fully client-side application. Your content never leaves your browser and stays secure on your device.
-</template>
+</script>
 
     <script src="/libs/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
     <script src="/js/neutralino.js"></script>

desktop-app/resources/js/script.js

@@ -1139,18 +1139,21 @@ document.addEventListener("DOMContentLoaded", function () {
     };
 
     // "+ Create" button at end of tab list (placed outside tabList to prevent ARIA child violation)
-    const newBtn = document.createElement('button');
-    newBtn.className = 'tab-new-btn';
-    newBtn.title = 'New Tab (Ctrl+T)';
-    newBtn.setAttribute('aria-label', 'Open new tab');
-    newBtn.innerHTML = '<i class="bi bi-plus-lg"></i>';
-    newBtn.addEventListener('click', function() { newTab(); });
-    
-    const resetBtn = document.getElementById('tab-reset-btn');
-    if (resetBtn) {
-      tabList.parentElement.insertBefore(newBtn, resetBtn);
-    } else {
-      tabList.parentElement.appendChild(newBtn);
+    let newBtn = tabList.parentElement.querySelector('.tab-new-btn');
+    if (!newBtn) {
+      newBtn = document.createElement('button');
+      newBtn.className = 'tab-new-btn';
+      newBtn.title = 'New Tab (Ctrl+T)';
+      newBtn.setAttribute('aria-label', 'Open new tab');
+      newBtn.innerHTML = '<i class="bi bi-plus-lg"></i>';
+      newBtn.addEventListener('click', function() { newTab(); });
+      
+      const resetBtn = document.getElementById('tab-reset-btn');
+      if (resetBtn) {
+        tabList.parentElement.insertBefore(newBtn, resetBtn);
+      } else {
+        tabList.parentElement.appendChild(newBtn);
+      }
     }
 
     // Auto-scroll active tab into view (paint-aligned to prevent forced reflows)

index.html

@@ -913,7 +913,7 @@ <h3 class="modal-section-title">Open-source credits</h3>
         </div>
     </div>
 
-    <template id="default-markdown">---
+    <script type="text/markdown" id="default-markdown">---
 title: Welcome to Markdown Viewer
 description: A GitHub-style Markdown renderer with live preview, math, diagrams, and export support.
 author: ThisIs-Developer
@@ -1080,7 +1080,7 @@ <h3 class="modal-section-title">Open-source credits</h3>
 ## 🛡️ Security Note
 
 This is a fully client-side application. Your content never leaves your browser and stays secure on your device.
-</template>
+</script>
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
     <script src="script.js"></script>

script.js

@@ -1139,18 +1139,21 @@ document.addEventListener("DOMContentLoaded", function () {
     };
 
     // "+ Create" button at end of tab list (placed outside tabList to prevent ARIA child violation)
-    const newBtn = document.createElement('button');
-    newBtn.className = 'tab-new-btn';
-    newBtn.title = 'New Tab (Ctrl+T)';
-    newBtn.setAttribute('aria-label', 'Open new tab');
-    newBtn.innerHTML = '<i class="bi bi-plus-lg"></i>';
-    newBtn.addEventListener('click', function() { newTab(); });
-    
-    const resetBtn = document.getElementById('tab-reset-btn');
-    if (resetBtn) {
-      tabList.parentElement.insertBefore(newBtn, resetBtn);
-    } else {
-      tabList.parentElement.appendChild(newBtn);
+    let newBtn = tabList.parentElement.querySelector('.tab-new-btn');
+    if (!newBtn) {
+      newBtn = document.createElement('button');
+      newBtn.className = 'tab-new-btn';
+      newBtn.title = 'New Tab (Ctrl+T)';
+      newBtn.setAttribute('aria-label', 'Open new tab');
+      newBtn.innerHTML = '<i class="bi bi-plus-lg"></i>';
+      newBtn.addEventListener('click', function() { newTab(); });
+      
+      const resetBtn = document.getElementById('tab-reset-btn');
+      if (resetBtn) {
+        tabList.parentElement.insertBefore(newBtn, resetBtn);
+      } else {
+        tabList.parentElement.appendChild(newBtn);
+      }
     }
 
     // Auto-scroll active tab into view (paint-aligned to prevent forced reflows)