settings modal for font size

src-tauri/src/main.rs

@@ -89,6 +89,17 @@ fn init_settings() {
     .unwrap();
 }
 
+#[tauri::command]
+fn save_settings(settings: String) {
+    fs::write(
+        home_dir()
+            .unwrap()
+            .join(".snotes-data/snotes-settings.json"),
+        settings,
+    )
+    .unwrap();
+}
+
 fn main() {
     tauri::Builder::default()
         .invoke_handler(tauri::generate_handler![
@@ -101,7 +112,8 @@ fn main() {
             delete_specific_note,
             update_specific_note,
             init_settings,
-            load_settings
+            load_settings,
+            save_settings
         ])
         .run(tauri::generate_context!())
         .expect("error while running tauri application");

src-tauri/tauri.conf.json

@@ -8,7 +8,7 @@
   },
   "package": {
     "productName": "snotes-deck",
-    "version": "0.0.9"
+    "version": "0.0.10"
   },
   "tauri": {
     "allowlist": {

src/main.ts

@@ -618,9 +618,42 @@ async function exportNote(contents: string | null) {
 function handleOpenSettingsModal() {
   const modalBg = document.getElementById("id-modal-bg");
   const setingsModalContainer = document.getElementById("settings-modal-container");
-  const settingsFontsizeInput = document.getElementById("fontsize-setting-input");
+  const settingsFontsizeInput = document.getElementById("fontsize-setting-input") as HTMLInputElement;
   if (modalBg && setingsModalContainer && settingsFontsizeInput) {
-    console.log("settings")
+    modalBg.style.display = "block";
+    setingsModalContainer.style.display = "block";
+    settingsFontsizeInput.focus();
+    settingsFontsizeInput.value = settings ? settings.fontSize : "16";
+
+    modalBg.addEventListener("click", () => {
+      setingsModalContainer.style.display = "none";
+      modalBg.style.display = "none";
+    });
+
+    settingsFontsizeInput.addEventListener("keydown", async (event: KeyboardEvent) => {
+      if (event.key === "Enter") {
+        console.log("saving settings..")
+        settings = {
+          fontSize: settingsFontsizeInput.value
+        }
+        await invoke("save_settings", {
+          settings: JSON.stringify(settings)
+        });
+        if (createNoteContentEl) {
+          createNoteContentEl.style.fontSize = settingsFontsizeInput.value + "px";
+        } else {
+          console.error("failed to get createNoteContentEl")
+        }
+        setingsModalContainer.style.display = "none";
+        modalBg.style.display = "none";
+      }
+      if (event.key === "Escape") {
+        setingsModalContainer.style.display = "none";
+        modalBg.style.display = "none";
+      }
+    });
+
+
   } else {
     console.error("Failed to get Settings Modal elements.");
   }