From 9035c395d0a38f479bfbff1f13fc6772acb65643 Mon Sep 17 00:00:00 2001
From: Raphael Forment <raphael.forment@gmail.com>
Date: Fri, 6 Oct 2023 01:33:44 +0200
Subject: [PATCH] begin settings menu rework

---
 index.html  | 136 +++++++++++++++++-------------
 src/API.ts  |  21 ++++-
 src/main.ts | 236 ++++++++++++++++++++++++++++++++++++----------------
 3 files changed, 259 insertions(+), 134 deletions(-)

diff --git a/index.html b/index.html
index 2035ac9..293d5ea 100644
--- a/index.html
+++ b/index.html
@@ -195,68 +195,81 @@
       </div>
 
       <!-- This modal is used for settings -->
-        <div id="modal-settings" class="invisible bg-neutral-900 bg-opacity-50 flex justify-center items-center absolute top-0 right-0 bottom-0 left-0">
-          <div class="flex flex flex-col w-full">
-            <div class="bg-white rounded-lg mx-48 my-48 space-y-8 px-8">
-            <h1 class="mt-12 font-semibold rounded bg-gray-800 justify-center text-center text-white mx-4 text-xl border-b border-gray-300 py-4">Topos Application Settings</h1>
-              <!-- Font Size Selection -->
-              <div class="space-y-6 w-auto min-w-screen px-4">
-                <div id="font-size-selector" class="flex flex-row space-x-4 rounded-lg">
-                  <label id="font-size-witness" for="default-range" class="text-xs lg:text-sm font-medium text-black w-2/5 lg:w-1/5">Font Size: 22px</label>
-                  <input id="font-size-slider" type="range" step=1 value="22" class="align-middle w-3/5 lg:w-4/5 h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer bg-gray-700">
+      <div id="modal-settings" class="invisible bg-neutral-900 bg-opacity-50 flex justify-center items-center absolute top-0 right-0 bottom-0 left-0">
+        <div class="grid grid-col-3 w-full">
+          <div class="bg-white rounded-lg mx-48 my-48 space-y-8 px-8">
+          <h1 class="mt-12 font-semibold rounded bg-gray-800 justify-center text-center text-white mx-4 text-xl border-b border-gray-300 py-4">Topos Application Settings</h1>
+
+            <div class="flex flex-row mr-4 ml-4">
+            <!-- Font Size Selection -->
+              <div class="bg-gray-200 rounded-lg w-full pt-2">
+                <p class="font-bold text-xl ml-4 pb-4 underline underline-offset-4">Font Settings</p>
+                <div class="mb-6 mx-4 font-semibold">
+                  <label for="default-input" class="block mb-2 ml-1 font-normal">Size:</label>
+                  <input type="text" id="font-size-input" type="number" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
                 </div>
-              </div>
-              <!-- Font Family Selection -->
-              <div class="space-y-6 w-auto min-w-screen px-4">
+                <label for="font" class="block ml-5 mb-2 font-medium">Font (<b>TODO</b>):</label>
+                  <select id="font-family" class="bg-gray-50 w-48 ml-4 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white">
+                    <option selected>Choose a font</option>
+                    <option value="US">IBM Plex Mono</option>
+                    <option value="CA">Victor Mono</option>
+                    <option value="FR">Courier</option>
+                  </select>
               </div>
               <!-- Editor mode selection -->
-              <div class="flex flex-row space-x-4 justify-center px-2 mx-2">
-                <div class="flex items-center pl-4 border border-gray-200 rounded border-gray-700 w-full">
-                  <input id="normal-mode-radio" type="radio" value="" name="bordered-radio" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 focus:ring-blue-600 ring-offset-gray-800 focus:ring-2 bg-gray-700 border-gray-600">
-                  <label id="normal-mode" for="bordered-radio-1" class="w-full py-4 ml-2 text-sm font-medium text-black">Normal Mode</label>
-                </div>
-                <div class="flex items-center pl-4 border rounded border-gray-700 w-full">
-                  <input checked id="vim-mode-radio" type="radio" value="" name="bordered-radio" class="w-4 h-4 text-blue-600 bg-gray-100 focus:ring-blue-600 ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
-                  <label id="vim-mode" for="bordered-radio-2" class="w-full py-4 ml-2 text-sm font-medium text-black">Vim Mode</label>
-                </div>
-              </div>
+            <div class="bg-gray-200 rounded-lg ml-4 w-full pt-2">
+              <p class="font-bold text-xl ml-4 pb-4 underline underline-offset-4">Editor options</p>
               <!-- Checkboxes  -->
-							<div class="flex flex-row">
-								<div class="flex items-center mb-4 ml-8">
-              	    <input id="show-line-numbers" type="checkbox" value="" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
-              	    <label for="default-checkbox" class="ml-2 text-sm font-medium text-dark">Show Line Numbers</label>
-              	</div>
-              	<div class="flex items-center mb-4 ml-8">
-              	    <input id="show-time-position" type="checkbox" value="" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
-              	    <label for="default-checkbox" class="ml-2 text-sm font-medium text-dark">Show Time Position</label>
-              	</div>
-              	<div class="flex items-center mb-4 ml-8">
-              	    <input id="show-tips" type="checkbox" value="" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
-              	    <label for="default-checkbox" class="ml-2 text-sm font-medium text-dark">Show Hovering Tips</label>
-              	</div>
-              	<div class="flex items-center mb-4 ml-8">
-              	    <input id="load-demo-songs" type="checkbox" value="" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
-              	    <label for="default-checkbox" class="ml-2 text-sm font-medium text-dark">Load Demo Song</label>
-              	</div>
+  					  <div class="pr-4">
+							  <div  class="flex items-center mb-4 ml-5">
+            	    <input id="vim-mode" type="checkbox" value="" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
+             	    <label for="default-checkbox" class="ml-2 text-sm font-medium text-dark">Vim Mode</label>
+             	  </div>
+							  <div class="flex items-center mb-4 ml-5">
+             	    <input id="show-line-numbers" type="checkbox" value="" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
+             	    <label for="default-checkbox" class="ml-2 text-sm font-medium text-dark">Show Line Numbers</label>
+             	  </div>
+             	  <div class="flex items-center mb-4 ml-5">
+             	    <input id="show-time-position" type="checkbox" value="" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
+             	    <label for="default-checkbox" class="ml-2 text-sm font-medium text-dark">Show Time Position</label>
+             	  </div>
+             	  <div class="flex items-center mb-4 ml-5">
+             	    <input id="show-tips" type="checkbox" value="" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
+             	    <label for="default-checkbox" class="ml-2 text-sm font-medium text-dark">Show Hovering Tips</label>
+             	  </div>
+             	  <div class="flex items-center mb-4 ml-5">
+             	    <input id="load-demo-songs" type="checkbox" value="" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
+             	    <label for="default-checkbox" class="ml-2 text-sm font-medium text-dark">Load Demo Song</label>
+             	  </div>
+						  </div>
+            </div>
 
-							</div>
-              <!-- Information card -->
-              <div class="flex lg:flex-row space-y-2 lg:space-y-0 flex-col w-auto min-w-screen px-4 lg:space-x-8 space-x-0">
-                <a href="https://github.com/Bubobubobubobubo/Topos" class="block max-w-sm p-6 border border-gray-200 rounded-lg shadow bg-gray-800 border-gray-700 hover:bg-gray-700">
-                  <h5 class="mb-2 lg:text-2xl text-xl font-bold tracking-tight text-white">GitHub</h5>
-                  <p class="font-normal text-white">Get involved in the dev process and or file an issue for a broken feature</p>
-                </a>
-                <a href="https://discord.gg/aPgV7mSFZh" class="block max-w-sm p-6  border border-gray-200 rounded-lg shadow bg-gray-800 border-gray-700 hover:bg-gray-700">
-                  <h5 class="mb-2 lg:text-2xl text-xl font-bold tracking-tight text-white">Discord</h5>
-                  <p class="font-normal text-white">Join the community on the official Topos/Sardine Discord Server.</p>
-                </a>
-             </div>
-              <div class="flex space-x-6 border-t border-gray-200 rounded-b dark:border-gray-600 mx-4 border-spacing-y-4">
-                <button id="close-settings-button" data-modal-hide="defaultModal" type="button" class="hover:bg-gray-700 bg-gray-800 mt-4 mb-4 text-white focus:ring-4  font-medium rounded-lg text-sm px-5 py-2.5 text-center">OK</button>
+            <div class="bg-gray-200 rounded-lg ml-4 w-full pt-2">
+              <p class="font-bold text-xl ml-4 pb-4 underline underline-offset-4">File Management</p>
+              <div class="flex flex-col space-y-2">
+                <button id="download-universes" class="bg-gray-800 hover:bg-gray-900 text-white font-bold py-4 px-2 rounded-lg inline-flex items-center mx-4">
+                  <svg class="fill-current w-4 h-6 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg>
+                  <span>Download universes</span>
+                </button>
+                <button id="upload-universes" class="bg-gray-800 hover:bg-gray-900 text-white font-bold py-4 px-2 rounded-lg inline-flex items-center mx-4">
+                  <svg class="rotate-180 fill-current w-4 h-6 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg>
+                  <span>Upload universes</span>
+                </button>
+                <button id="upload-universes" class="bg-red-800 hover:bg-red-900 text-white font-bold py-2 px-2 rounded-lg inline-flex items-center mx-4">
+                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-6 mr-2">
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
+                  </svg>
+                  <span>Destroy universes</span>
+                </button>
               </div>
             </div>
           </div>
+          <div class="flex space-x-6 border-t border-gray-200 rounded-b dark:border-gray-600 mx-4 border-spacing-y-4">
+            <button id="close-settings-button" data-modal-hide="defaultModal" type="button" class="hover:bg-gray-700 bg-gray-800 mt-4 mb-4 text-white focus:ring-4  font-medium rounded-lg text-sm px-5 py-2.5 text-center">OK</button>
+          </div>
         </div>
+      </div>
+    </div>
 
       <div class="flex flex-row max-h-fit">
 
@@ -295,12 +308,17 @@
   </svg>
 			      </a>
 
-            <a title="Open settings" id="settings-button" class="lg:block sm:hidden p-2 text-gray-200 ml-1 absolute bottom-2 focus:outline-nones transition-colors duration-200 rounded-lg text-gray-200 bg-gray-800">
-              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
-              <path stroke-linecap="round" stroke-linejoin="round" d="M10.343 3.94c.09-.542.56-.94 1.11-.94h1.093c.55 0 1.02.398 1.11.94l.149.894c.07.424.384.764.78.93.398.164.855.142 1.205-.108l.737-.527a1.125 1.125 0 011.45.12l.773.774c.39.389.44 1.002.12 1.45l-.527.737c-.25.35-.272.806-.107 1.204.165.397.505.71.93.78l.893.15c.543.09.94.56.94 1.109v1.094c0 .55-.397 1.02-.94 1.11l-.893.149c-.425.07-.765.383-.93.78-.165.398-.143.854.107 1.204l.527.738c.32.447.269 1.06-.12 1.45l-.774.773a1.125 1.125 0 01-1.449.12l-.738-.527c-.35-.25-.806-.272-1.203-.107-.397.165-.71.505-.781.929l-.149.894c-.09.542-.56.94-1.11.94h-1.094c-.55 0-1.019-.398-1.11-.94l-.148-.894c-.071-.424-.384-.764-.781-.93-.398-.164-.854-.142-1.204.108l-.738.527c-.447.32-1.06.269-1.45-.12l-.773-.774a1.125 1.125 0 01-.12-1.45l.527-.737c.25-.35.273-.806.108-1.204-.165-.397-.505-.71-.93-.78l-.894-.15c-.542-.09-.94-.56-.94-1.109v-1.094c0-.55.398-1.02.94-1.11l.894-.149c.424-.07.765-.383.93-.78.165-.398.143-.854-.107-1.204l-.527-.738a1.125 1.125 0 01.12-1.45l.773-.773a1.125 1.125 0 011.45-.12l.737.527c.35.25.807.272 1.204.107.397-.165.71-.505.78-.929l.15-.894z" />
-              <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
-              </svg>
-            </a>
+            <a title="Application Settings" id="settings-button" class="pl-2 p-1.5 text-white focus:outline-nones transition-colors duration-200 rounded-lg text-white hover:bg-gray-800">
+							<svg class="w-8 h-8 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M10.343 3.94c.09-.542.56-.94 1.11-.94h1.093c.55 0 1.02.398 1.11.94l.149.894c.07.424.384.764.78.93.398.164.855.142 1.205-.108l.737-.527a1.125 1.125 0 011.45.12l.773.774c.39.389.44 1.002.12 1.45l-.527.737c-.25.35-.272.806-.107 1.204.165.397.505.71.93.78l.893.15c.543.09.94.56.94 1.109v1.094c0 .55-.397 1.02-.94 1.11l-.893.149c-.425.07-.765.383-.93.78-.165.398-.143.854.107 1.204l.527.738c.32.447.269 1.06-.12 1.45l-.774.773a1.125 1.125 0 01-1.449.12l-.738-.527c-.35-.25-.806-.272-1.203-.107-.397.165-.71.505-.781.929l-.149.894c-.09.542-.56.94-1.11.94h-1.094c-.55 0-1.019-.398-1.11-.94l-.148-.894c-.071-.424-.384-.764-.781-.93-.398-.164-.854-.142-1.204.108l-.738.527c-.447.32-1.06.269-1.45-.12l-.773-.774a1.125 1.125 0 01-.12-1.45l.527-.737c.25-.35.273-.806.108-1.204-.165-.397-.505-.71-.93-.78l-.894-.15c-.542-.09-.94-.56-.94-1.109v-1.094c0-.55.398-1.02.94-1.11l.894-.149c.424-.07.765-.383.93-.78.165-.398.143-.854-.107-1.204l-.527-.738a1.125 1.125 0 01.12-1.45l.773-.773a1.125 1.125 0 011.45-.12l.737.527c.35.25.807.272 1.204.107.397-.165.71-.505.78-.929l.15-.894z" />
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+                </svg>
+
+  </svg>
+			      </a>
+
+
         </aside>
 
         <!-- Tabs for local files -->
diff --git a/src/API.ts b/src/API.ts
index 87da292..0b4e679 100644
--- a/src/API.ts
+++ b/src/API.ts
@@ -7,6 +7,7 @@ import { SoundEvent } from "./classes/SoundEvent";
 import { MidiEvent } from "./classes/MidiEvent";
 import { LRUCache } from "lru-cache";
 import { InputOptions, Player } from "./classes/ZPlayer";
+import { template_universes } from "./AppSettings";
 import {
   samples,
   initAudioOnFirstClick,
@@ -277,7 +278,7 @@ export class UserAPI {
       evaluations: 0,
     };
   };
-  cs = this.clear_script;
+  cs = this.delete_script;
 
   copy_script = (from: number, to: number): void => {
     /**
@@ -310,6 +311,24 @@ export class UserAPI {
     this.app.updateKnownUniversesView();
   };
 
+  big_bang = (): void => {
+    /**
+     * Clears all universes
+     * TODO: add documentation. This doesn't work super well.
+     */
+    if (confirm("Are you sure you want to delete all universes?")) {
+      this.app.universes = {
+        ...template_universes,
+      };
+      this.app.settings.saveApplicationToLocalStorage(
+        this.app.universes,
+        this.app.settings
+      );
+    }
+    this.app.selected_universe = "Default";
+    this.app.updateKnownUniversesView();
+  };
+
   // =============================================================
   // MIDI related functions
   // =============================================================
diff --git a/src/main.ts b/src/main.ts
index 1f3f7e8..3db261d 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -33,19 +33,24 @@ showdown.setFlavor("github");
 import showdownHighlight from "showdown-highlight";
 import { makeStringExtensions } from "./StringExtensions";
 
-
 // Broadcast that you're opening a page.
 localStorage.openpages = Date.now();
-window.addEventListener('storage', function(e) {
-  if (e.key == "openpages") {
-    // Listen if anybody else is opening the same page!
-    localStorage.page_available = Date.now();
-  }
-  if (e.key == "page_available") {
-    document.getElementById("all")!.classList.add("invisible")
-    alert("Topos is already opened in another tab. Close this tab now to prevent data loss.");
-  }
-}, false);
+window.addEventListener(
+  "storage",
+  function (e) {
+    if (e.key == "openpages") {
+      // Listen if anybody else is opening the same page!
+      localStorage.page_available = Date.now();
+    }
+    if (e.key == "page_available") {
+      document.getElementById("all")!.classList.add("invisible");
+      alert(
+        "Topos is already opened in another tab. Close this tab now to prevent data loss."
+      );
+    }
+  },
+  false
+);
 
 const classMap = {
   h1: "text-white lg:text-4xl text-xl lg:ml-4 lg:mx-4 mx-2 lg:my-4 my-2 lg:mb-4 mb-4 bg-neutral-900 rounded-lg py-2 px-2",
@@ -135,6 +140,14 @@ export class Editor {
     "load-universe-button"
   ) as HTMLButtonElement;
 
+  download_universe_button: HTMLButtonElement = document.getElementById(
+    "download-universes"
+  ) as HTMLButtonElement;
+
+  upload_universe_button: HTMLButtonElement = document.getElementById(
+    "upload-universes"
+  ) as HTMLButtonElement;
+
   documentation_button: HTMLButtonElement = document.getElementById(
     "doc-button-1"
   ) as HTMLButtonElement;
@@ -186,12 +199,19 @@ export class Editor {
   ) as HTMLDivElement;
 
   // Font Size Slider
-  font_size_slider: HTMLInputElement = document.getElementById(
-    "font-size-slider"
+  font_size_input: HTMLInputElement = document.getElementById(
+    "font-size-input"
+  ) as HTMLInputElement;
+
+  // Font Family Selector
+  font_family_selector: HTMLSelectElement = document.getElementById(
+    "font-family"
+  ) as HTMLSelectElement;
+
+  // Vim mode checkbox
+  vim_mode_checkbox: HTMLInputElement = document.getElementById(
+    "vim-mode"
   ) as HTMLInputElement;
-  font_size_witness: HTMLSpanElement = document.getElementById(
-    "font-size-witness"
-  ) as HTMLSpanElement;
 
   // Line Numbers checkbox
   line_numbers_checkbox: HTMLInputElement = document.getElementById(
@@ -245,7 +265,6 @@ export class Editor {
   public hydra: any = this.hydra_backend.synth;
 
   constructor() {
-
     // ================================================================================
     // Loading the settings
     // ================================================================================
@@ -264,22 +283,23 @@ export class Editor {
 
     this.universes = {
       ...this.settings.universes,
-      ...template_universes
+      ...template_universes,
     };
 
     if (this.settings.load_demo_songs) {
-      let random_example = examples[Math.floor(Math.random() * examples.length)];
-      this.selected_universe = "Welcome"
+      let random_example =
+        examples[Math.floor(Math.random() * examples.length)];
+      this.selected_universe = "Welcome";
       this.universes[this.selected_universe].global.committed = random_example;
       this.universes[this.selected_universe].global.candidate = random_example;
     } else {
       this.selected_universe = this.settings.selected_universe;
       if (this.universes[this.selected_universe] === undefined)
-        this.universes[this.selected_universe] = structuredClone(template_universe)
+        this.universes[this.selected_universe] =
+          structuredClone(template_universe);
     }
     this.universe_viewer.innerHTML = `Topos: ${this.selected_universe}`;
 
-
     // ================================================================================
     // Audio context and clock
     // ================================================================================
@@ -534,7 +554,8 @@ export class Editor {
       button.addEventListener("click", () => {
         this.setButtonHighlighting("clear", true);
         if (confirm("Do you want to reset the current universe?")) {
-          this.universes[this.selected_universe] = structuredClone(template_universe);
+          this.universes[this.selected_universe] =
+            structuredClone(template_universe);
           this.updateEditorView();
         }
       });
@@ -544,6 +565,63 @@ export class Editor {
       this.showDocumentation();
     });
 
+    this.upload_universe_button.addEventListener("click", () => {
+      const fileInput = document.createElement("input");
+      fileInput.type = "file";
+      fileInput.accept = ".json";
+
+      fileInput.addEventListener("change", (event) => {
+        const input = event.target as HTMLInputElement;
+        const file = input.files?.[0];
+        if (file) {
+          const reader = new FileReader();
+          reader.readAsText(file, "UTF-8");
+
+          reader.onload = (evt) => {
+            const data = JSON.parse(evt.target!.result as string);
+            for (const [key, value] of Object.entries(data)) {
+              this.universes[key] = value as Universe;
+            }
+          };
+          reader.onerror = (evt) => {
+            console.error("An error occurred reading the file:", evt);
+          };
+        }
+      });
+
+      document.body.appendChild(fileInput);
+      fileInput.click();
+      document.body.removeChild(fileInput);
+    });
+
+    this.download_universe_button.addEventListener("click", () => {
+      // Trigger save of the universe before downloading
+      this.settings.saveApplicationToLocalStorage(
+        this.universes,
+        this.settings
+      );
+
+      // Generate a file name based on timestamp
+      let fileName = `topos-universes-${Date.now()}.json`;
+
+      // Create Blob and Object URL
+      const blob = new Blob([JSON.stringify(this.settings.universes)], {
+        type: "application/json",
+      });
+      const url = URL.createObjectURL(blob);
+
+      // Create a temporary anchor and trigger download
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = fileName;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+
+      // Revoke the Object URL to free resources
+      URL.revokeObjectURL(url);
+    });
+
     this.load_universe_button.addEventListener("click", () => {
       let query = this.buffer_search.value;
       if (query.length > 2 && query.length < 20 && !query.includes(" ")) {
@@ -582,35 +660,55 @@ export class Editor {
       this.changeModeFromInterface("notes")
     );
 
+    this.font_family_selector.addEventListener("change", () => {
+      let new_font = this.font_family_selector.value;
+      this.settings.font = new_font;
+      let new_font_size = EditorView.theme({
+        "&": { fontSize: this.settings.font_size + "px" },
+        "&content": {
+          fontFamily: new_font,
+          fontSize: this.settings.font_size + "px",
+        },
+        ".cm-gutters": { fontSize: this.settings.font_size + "px" },
+      });
+      this.view.dispatch({
+        effects: this.fontSize.reconfigure(new_font_size),
+      });
+    });
+
+    this.font_size_input.addEventListener("input", () => {
+      let new_value: string | number = this.font_size_input.value;
+      this.settings.font_size = Math.max(8, Math.min(48, parseInt(new_value)));
+
+      let new_font_size = EditorView.theme({
+        "&": { fontSize: new_value + "px" },
+        "&content": {
+          fontFamily: this.settings.font,
+          fontSize: new_value + "px",
+        },
+        ".cm-gutters": { fontSize: new_value + "px" },
+      });
+      this.view.dispatch({
+        effects: this.fontSize.reconfigure(new_font_size),
+      });
+      this.settings.font_size = parseInt(new_value);
+    });
+
     this.settings_button.addEventListener("click", () => {
-      this.font_size_slider.value = this.settings.font_size.toString();
-      this.font_size_witness.innerHTML = `Font Size: ${this.settings.font_size}px`;
-      this.font_size_witness?.setAttribute(
-        "style",
-        `font-size: ${this.settings.font_size}px;`
-      );
+      // Populate the font family selector
+      this.font_family_selector.value = this.settings.font;
+
+      if (this.settings.font_size === null) {
+        this.settings.font_size = 12;
+      }
+      this.font_size_input.value = this.settings.font_size.toString();
 
       // Get the right value to update graphical widgets
       this.line_numbers_checkbox.checked = this.settings.line_numbers;
       this.time_position_checkbox.checked = this.settings.time_position;
       this.tips_checkbox.checked = this.settings.tips;
       this.load_demo_songs.checked = this.settings.load_demo_songs;
-
-      if (this.settings.vimMode) {
-        let vim = document.getElementById("vim-mode-radio") as HTMLInputElement;
-        let normal = document.getElementById(
-          "normal-mode-radio"
-        ) as HTMLInputElement;
-        vim.checked = true;
-        normal.checked = false;
-      } else {
-        let vim = document.getElementById("vim-mode-radio") as HTMLInputElement;
-        let normal = document.getElementById(
-          "normal-mode-radio"
-        ) as HTMLInputElement;
-        normal.checked = true;
-        vim.checked = false;
-      }
+      this.vim_mode_checkbox.checked = this.settings.vimMode;
 
       let modal_settings = document.getElementById("modal-settings");
       let editor = document.getElementById("editor");
@@ -624,29 +722,25 @@ export class Editor {
       let editor = document.getElementById("editor");
       modal_settings?.classList.add("invisible");
       editor?.classList.remove("invisible");
+      // Update the font size once again
+      this.view.dispatch({
+        effects: this.fontSize.reconfigure(
+          EditorView.theme({
+            "&": { fontSize: this.settings.font_size + "px" },
+            "&content": {
+              fontFamily: this.settings.font,
+              fontSize: this.settings.font_size + "px",
+            },
+            ".cm-gutters": { fontSize: this.settings.font_size + "px" },
+          })
+        ),
+      });
     });
 
     this.close_universes_button.addEventListener("click", () => {
       this.openBuffersModal();
     });
 
-    this.font_size_slider.addEventListener("input", () => {
-      const new_value = this.font_size_slider.value;
-      this.settings.font_size = parseInt(new_value);
-      this.font_size_witness.style.fontSize = `${new_value}px`;
-      this.font_size_witness.innerHTML = `Font Size: ${new_value}px`;
-
-      let new_font_size = EditorView.theme({
-        "&": { fontSize: new_value + "px" },
-        "&content": { fontFamily: this.settings.font },
-        ".cm-gutters": { fontSize: new_value + "px" },
-      });
-      this.view.dispatch({
-        effects: this.fontSize.reconfigure(new_font_size),
-      });
-      this.settings.font_size = parseInt(new_value);
-    });
-
     this.share_button.addEventListener("click", async () => {
       // trigger a manual save
       this.currentFile().candidate = app.view.state.doc.toString();
@@ -656,9 +750,12 @@ export class Editor {
       await this.share();
     });
 
-    this.normal_mode_button.addEventListener("click", () => {
-      this.settings.vimMode = false;
-      this.view.dispatch({ effects: this.vimModeCompartment.reconfigure([]) });
+    this.vim_mode_checkbox.addEventListener("change", () => {
+      let checked = this.vim_mode_checkbox.checked ? true : false;
+      this.settings.vimMode = checked;
+      this.view.dispatch({
+        effects: this.vimModeCompartment.reconfigure(checked ? vim() : []),
+      });
     });
 
     this.line_numbers_checkbox.addEventListener("change", () => {
@@ -695,14 +792,6 @@ export class Editor {
       this.settings.load_demo_songs = checked;
     });
 
-
-    this.vim_mode_button.addEventListener("click", () => {
-      this.settings.vimMode = true;
-      this.view.dispatch({
-        effects: this.vimModeCompartment.reconfigure(vim()),
-      });
-    });
-
     this.universe_creator.addEventListener("submit", (event) => {
       event.preventDefault();
 
@@ -1187,4 +1276,3 @@ window.addEventListener("beforeunload", () => {
   app.clock.stop();
   return null;
 });
-