Add multiple editor tabs

Author: makermelissa

index.html

@@ -70,7 +70,6 @@
                     <button class="purple-button btn-format">Format<i class="fa-solid fa-wand-magic-sparkles"></i></button>
                     <button class="purple-button btn-save">Save<i class="fa-solid fa-floppy-disk"></i></button>
                     <button class="purple-button btn-save-as">Save As<i class="fa-solid fa-download"></i></button>
-                    <div class="file-path"></div>
                     <button class="purple-button btn-save-run">Save + Run<i class="fa-solid fa-play"></i></button>
                 </div>
                 <div id="mobile-editor-bar">
@@ -82,7 +81,6 @@
                             </button>
                         </div>
                     </div>
-                    <div class="file-path"></div>
                     <a class="purple-button btn-save-run">Save + Run<i class="fa-solid fa-play"></i></a>
                     <div class="clear"></div>
                     <nav id="mobile-menu-contents" role="navigation" class="hidden" aria-expanded="false" aria-label="Mobile Menu">
@@ -95,6 +93,10 @@
                         </ul>
                     </nav>
                 </div>
+                <div id="editor-tabs-wrapper">
+                    <div id="editor-tabs" role="tablist" aria-label="Open files"></div>
+                    <select id="editor-tab-select" aria-label="Switch open file" hidden></select>
+                </div>
                 <div id="editor" tabindex="0"></div>
             </div>
             <div id="page-separator" class=""></div>

js/layout.js

@@ -99,6 +99,21 @@ export function showSerial() {
     updatePageLayout(UPDATE_TYPE_SERIAL);
 }
 
+function updateModeButtons() {
+    // Match the button state to the panel state to avoid getting out of sync
+    if (isEditorVisible()) {
+        btnModeEditor.classList.add('active');
+    } else {
+        btnModeEditor.classList.remove('active');
+    }
+
+    if (isSerialVisible()) {
+        btnModeSerial.classList.add('active');
+    } else {
+        btnModeSerial.classList.remove('active');
+    }
+}
+
 // update type is used to indicate which button was clicked
 function updatePageLayout(updateType) {
     // If both are visible, show the separator
@@ -110,6 +125,7 @@ function updatePageLayout(updateType) {
         editorPage.style.flex = null;
         serialPage.style.width = null;
         serialPage.style.flex = null;
+        updateModeButtons();
         return;
     }
 
@@ -133,18 +149,7 @@ function updatePageLayout(updateType) {
         serialPage.style.flex = 'none';
     }
 
-    // Match the button state to the panel state to avoid getting out of sync
-    if (isEditorVisible()) {
-        btnModeEditor.classList.add('active');
-    } else {
-        btnModeEditor.classList.remove('active');
-    }
-
-    if (isSerialVisible()) {
-        btnModeSerial.classList.add('active');
-    } else {
-        btnModeSerial.classList.remove('active');
-    }
+    updateModeButtons();
 
     if (isSerialVisible()) {
         refitTerminal();