update style

src/App.css

@@ -1,18 +1,33 @@
-  @import "tailwindcss";
+@import "tailwindcss";
+@import url('https://fonts.cdnfonts.com/css/sora-3');
 
-  html{
+html {
+  font-family: 'Sora', sans-serif;
+}
 
-  }
-  main{
-    @apply w-full min-h-screen;
-  }
-   section {
-      @apply flex flex-col items-center justify-center gap-4 p-4;
-      @apply bg-gray-100 rounded-xl;
-   }
-   button{
-      @apply px-4 py-2 bg-fuchsia-400 text-black font-bold rounded-full hover:bg-fuchsia-500;
-   }
-   select, input[type="file"] {
-      @apply px-4 py-2 border border-gray-300 rounded;
-   }
+main {
+  @apply w-full min-h-screen font-light text-gray-800 tracking-wider;
+}
+
+section {
+  @apply flex flex-col items-center justify-start gap-4 px-4;
+  @apply bg-slate-100 border-green-400 border-4;
+}
+
+section>* {
+  @apply w-full;
+}
+
+button {
+  @apply px-2 py-1 bg-fuchsia-400 text-black font-bold rounded-full hover:bg-fuchsia-500 tracking-wider;
+  /* @apply uppercase; */
+}
+
+select,
+input[type="file"] {
+  @apply px-4 py-2 border border-gray-300 rounded font-light text-gray-800;
+}
+
+h1 {
+  @apply text-2xl font-bold text-center uppercase text-gray-800 tracking-widest bg-green-400 mb-4;
+}

src/App.jsx

@@ -4,7 +4,7 @@ import "./App.css";
 import { useEffect, useState } from "react";
 import { AvailableQualities } from "./params";
 import { listenToPrints, clearPrints, deletePrint, createTestFile } from "./utils/backend";
-import { saveToDisk } from "./utils/fs";
+import { saveToDisk, loadSettings, saveSettings } from "./utils/fs";
 
 const OptionTypes=[
   'dpi_options',
@@ -159,6 +159,25 @@ function App() {
     });
   }
 
+  function onSave() {
+    const settings = {
+      printer: printer,
+      play_on_start: document.getElementById("play_on_start").checked,
+      options: {}
+    };
+    if(ENABLE_OPTIONS) {
+      for(const optionType of OptionTypes) {  
+        const selectElement = document.getElementById(optionType);
+        if(selectElement) {
+          settings.options[optionType] = selectElement.value;
+        }
+      }
+    }
+    console.log("Saving settings:", settings);
+    saveSettings(settings);
+
+  }
+
   useEffect(()=>{
 
     if(!printer) return;
@@ -203,6 +222,25 @@ function App() {
   useEffect(() => {
     
     getPrinters();
+    loadSettings().then((settings) => {
+      console.log("Loaded settings:", settings);    
+      document.getElementById("play_on_start").checked = settings.play_on_start || false;
+      if(settings.play_on_start){
+        setPlaying(true);
+      }
+
+      if(settings.printer && settings.printer !== "" ) {
+        setPrinter(settings.printer);
+        if (settings.options) {
+          for (const optionType of OptionTypes) {
+            const selectElement = document.getElementById(optionType);
+            if (selectElement && settings.options[optionType]) {
+              selectElement.value = settings.options[optionType];
+            }
+          }
+        }        
+      }
+    });
 
     listenToPrints((newPrints) => {
       console.log("Received prints:", newPrints);
@@ -214,7 +252,8 @@ function App() {
   return (
     <main className="grid grid-cols-2 gap-2 p-2">
       <div className="grid grid-rows-2 gap-2">
-          <section className="*:w-full">
+          <section>
+            <h1>config</h1>
             <button className="!w-auto self-start !bg-amber-200" onClick={getPrinters}>refresh printers</button>
             <select id="printer-select" value={printer} onChange={(e) => setPrinter(e.target.value)}></select>
             {ENABLE_OPTIONS && <>
@@ -223,8 +262,17 @@ function App() {
               <select id="color_options"></select>    
               <select id="quality_options"></select>
             </>}
+            <div className="grid grid-cols-2 gap-2">
+              <span className="flex items-center gap-1">
+                <input type="checkbox" id="play_on_start"/>
+                <label htmlFor="play_on_start">play on start</label>
+              </span>
+              <button onClick={onSave} className="!bg-amber-200">save</button>
+              {/* <button onClick={loadSettings} className="!bg-amber-200">load</button> */}
+            </div>
           </section>
-          <section className="*:w-full">
+          <section>
+            <h1>test print</h1>
           <div className="flex flex-row gap-2 items-center">
             <label id="document_path_label" className="flex-1 break-all">{selectedFile ? `${selectedFile}` : "Select a document to print:"}</label>
             <button onClick={openFile}>open</button>
@@ -237,7 +285,8 @@ function App() {
           </div>
         </section>
       </div>
-      <section className="*:w-full">
+      <section>
+          <h1>status</h1>
           <div className="border flex-1 p-2 overflow-y-auto overflow-x-hidden text-sm break-all flex flex-col gap-1">
             {prints.length > 0 ? (
               prints.map((print) => (

src/utils/fs.js

@@ -1,7 +1,8 @@
-import { writeFile, BaseDirectory, exists, mkdir } from '@tauri-apps/plugin-fs';
+import { writeFile, BaseDirectory, exists, mkdir, writeTextFile, readTextFile } from '@tauri-apps/plugin-fs';
 import { path } from '@tauri-apps/api';
 
 const OutputDir = 'prints';
+const settingsFile = 'settings.json';
 
 export async function saveToDisk(id, url){
 
@@ -27,3 +28,40 @@ export async function saveToDisk(id, url){
 
     return `${await path.documentDir()}\\${filePath}`;
 }
+
+
+export async function loadSettings(){
+
+    const settingsPath = `${settingsFile}`;
+    
+    // Check if the settings file exists
+    const fileExists = await exists(settingsPath, { baseDir: BaseDirectory.AppData });
+    if (!fileExists) {
+        console.log("Settings file does not exist, returning default settings.");
+        return {
+            printer: "",
+            play_on_start: false,
+        }; // Return an empty object or default settings
+    }
+
+    // Read the settings from the disk
+    const settingsData = await readTextFile(settingsPath, { baseDir: BaseDirectory.AppData });
+    return JSON.parse(settingsData);
+    
+}
+
+export async function saveSettings(settings){
+    const settingsPath = `${settingsFile}`;
+
+    // Check if the directory exists, if not create it
+    const dirExists = await exists("", { baseDir: BaseDirectory.AppData });
+    if (!dirExists) {
+        console.log("Directory does not exist, creating:", OutputDir);
+        await mkdir("", { baseDir: BaseDirectory.AppData });
+    }
+
+    // Write the settings to the disk
+    await writeTextFile(settingsPath, JSON.stringify(settings), { baseDir: BaseDirectory.AppData });
+
+    console.log("Settings saved to:", `${await path.appDataDir()}\\${settingsPath}`);
+}