re-arrange load, save and export buttons

index.html

@@ -17,8 +17,6 @@
         <main>
             <div class="column" style="flex: 1">
                 <div id="buttons">
-                    <button id="import-button">🙏 Import</button>
-
                     <a
                         href="docs/index.html"
                         target="_blank"
@@ -33,36 +31,6 @@
                         </button>
                     </a>
 
-                    <div class="dropdown-wrapper">
-                        <button id="save-button">
-                            💾 Save/Export
-                        </button>
-
-                        <div
-                            id="save-dropdown"
-                            class="dropdown-content"
-                        >
-                            <div
-                                id="save-js"
-                                class="dropdown-option"
-                            >
-                                Save JavaScript
-                            </div>
-                            <div
-                                id="save-html"
-                                class="dropdown-option"
-                            >
-                                Export as HTML
-                            </div>
-                            <div
-                                id="save-karlkoder"
-                                class="dropdown-option"
-                            >
-                                Export as Karlkoder File
-                            </div>
-                        </div>
-                    </div>
-
                     <div>
                         <button id="run-button">🏃 Run</button>
                     </div>
@@ -91,7 +59,24 @@
             </div>
 
             <div class="column" style="flex: 3">
-                <input id="project-name" type="text" placeholder="Project name">
+                <div id="project-header">
+                    <div id="project-header-left">
+                        <input id="project-name" type="text" placeholder="Project name" aria-label="Project name">
+
+                        <button id="save-button">
+                            💾 Save
+                        </button>
+
+                        <button id="load-button">
+                            📄 Load
+                        </button>
+                    </div>
+
+                    <button id="export-button">
+                        ↗️ Export
+                    </button>
+                </div>
+
                 <section>
                     <div class="section-header">
                         Code editor

src/index.js

@@ -70,15 +70,12 @@ langTools.setCompleters([new GamelibCompleter(), new TextCompleter()]);
 
 editor.setValue(sessionStorage.getItem("code") ?? editor.getValue(), -1);
 
-const importButton = document.querySelector("#import-button");
 const runButton = document.querySelector("#run-button");
-const saveButton = document.querySelector("#save-button");
-const saveDropdown = document.querySelector("#save-dropdown");
-const saveJsButton = document.querySelector("#save-js");
-const saveHtmlButton = document.querySelector("#save-html");
-const saveKarlkoderButton = document.querySelector("#save-karlkoder");
 const toggleSpriteEditorButton = document.querySelector("#toggle-sprite-editor-button");
 const projectName = document.querySelector("#project-name");
+const saveButton = document.querySelector("#save-button");
+const loadButton = document.querySelector("#load-button");
+const exportButton = document.querySelector("#export-button");
 
 const sessionSaveDebounce = new Debounce(1000);
 editor.addEventListener("change", () => {
@@ -87,7 +84,7 @@ editor.addEventListener("change", () => {
     });
 });
 
-importButton.onclick = async () => {
+loadButton.onclick = async () => {
     const files = await promptUpload(".karlkode", false);
     if (files.length === 0) {
         return;
@@ -130,28 +127,13 @@ runButton.onclick = () => {
     }
 };
 
-saveButton.onclick = () => {
-    if (saveButton.classList.contains("active")) {
-        saveButton.classList.remove("active");
-        saveDropdown.style.display = "none";
-    } else {
-        saveButton.classList.add("active");
-
-        saveDropdown.style.display = "block";
-    }
-};
-
-saveJsButton.onclick = () => {
-    downloadFile(editor.getValue(), ".js", "text/javascript");
-};
-
-saveHtmlButton.onclick = async () => {
+exportButton.onclick = async () => {
     const html = await htmlExporter.export(projectName.value, editor.getValue());
 
     downloadFile(html, ".html", "text/html");
 };
 
-function saveKarlKoder() {
+saveButton.onclick = () => {
     downloadFile(
         Vermiparous.en(
             editor.getValue(),
@@ -159,10 +141,6 @@ function saveKarlKoder() {
         ),
         ".karlkode",
     );
-}
-
-saveKarlkoderButton.onclick = () => {
-    saveKarlKoder();
 };
 
 toggleSpriteEditorButton.addEventListener("click", () => spriteEditor.toggleEditor());

style.css

@@ -205,6 +205,7 @@ button {
     border-radius: 0.5rem;
     cursor: pointer;
     transition-duration: 200ms;
+    white-space: nowrap;
 }
 
 .dropdown-wrapper:has(.active) button,
@@ -342,6 +343,19 @@ footer {
     display: none;
 }
 
+#project-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    align-self: stretch;
+    gap: 0.5rem;
+}
+
+#project-header-left {
+    display: flex;
+    gap: 0.5rem;
+}
+
 #project-name {
     background-color: inherit;
     border: none;
@@ -349,6 +363,9 @@ footer {
     font-weight: bold;
     border-bottom: 1px solid #bdbdbd;
     transition: border-color 200ms ease-in-out;
+    margin-right: 1rem;
+    width: 100%;
+    max-width: 400px;
 }
 
 #project-name:hover, #project-name:focus {
@@ -356,6 +373,10 @@ footer {
     outline: none;
 }
 
+#export-button {
+    justify-self: flex-end;
+}
+
 #buttons > a:has(button) {
     text-decoration: none;
 }