local storage for form; some fixes

frontend/wizard-vue/package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "@kalimahapps/vue-icons": "^1.7.1",
+        "es-toolkit": "^1.32.0",
         "pinia": "^2.3.1",
         "vue": "^3.5.13",
         "vue-router": "^4.5.0"
@@ -2648,6 +2649,16 @@
         "url": "https://github.com/sponsors/antfu"
       }
     },
+    "node_modules/es-toolkit": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/es-toolkit/-/es-toolkit-1.32.0.tgz",
+      "integrity": "sha512-ZfSfHP1l6ubgW/B/FRtqb9bYdMvI6jizbOSfbwwJNcOQ1QE6TFsC3jpQkZ900uUPSR3t3SU5Ds7UWKnYz+uP8Q==",
+      "license": "MIT",
+      "workspaces": [
+        "docs",
+        "benchmarks"
+      ]
+    },
     "node_modules/esbuild": {
       "version": "0.24.2",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.24.2.tgz",

frontend/wizard-vue/package.json

@@ -14,6 +14,7 @@
   },
   "dependencies": {
     "@kalimahapps/vue-icons": "^1.7.1",
+    "es-toolkit": "^1.32.0",
     "pinia": "^2.3.1",
     "vue": "^3.5.13",
     "vue-router": "^4.5.0"

frontend/wizard-vue/src/components/SpecsForm.vue

@@ -1,14 +1,19 @@
 <script setup lang="ts">
 import {fields, type Specs} from '@/urlmaker/specs.ts';
 import Field from "@/components/Field.vue";
+import {useWizardStore} from "@/stores/wizard.ts";
 
-const model = defineModel<Specs>({required: true});
+const store = useWizardStore();
 
 </script>
 
 <template>
   <div>
-    <Field v-for="field in fields" :field="field" v-model="model[field.name]"></Field>
+    <Field v-for="field in fields"
+           :field="field"
+           :model-value="store.specs[field.name]"
+           @update:model-value="event => store.updateSpec(field.name, event)"
+    ></Field>
   </div>
 </template>
 

frontend/wizard-vue/src/pages/WizardPage.vue

@@ -42,7 +42,7 @@ function screenshot() {
 
 <template>
   <div class="wrapper">
-    <SpecsForm :model-value="store.specs" @update:model-value="store.updateSpecs" class="specs-form"></SpecsForm>
+    <SpecsForm class="specs-form"></SpecsForm>
     <Btn :active="store.formValid" @click="generateLink">Generate link</Btn>
     <Btn :active="store.formValid" @click="screenshot">Screenshot</Btn>
     <Btn @click="editModalVisible = true">Edit existing task</Btn>

frontend/wizard-vue/src/stores/wizard.ts

@@ -1,16 +1,35 @@
 import {defineStore} from "pinia";
-import {emptySpecs, type Field, fields, type Specs} from "@/urlmaker/specs.ts";
+import {emptySpecs, type Field, type FieldNames, fields, type Specs} from "@/urlmaker/specs.ts";
-import {computed, reactive, ref} from "vue";
+import {computed, reactive} from "vue";
+import {debounce} from "es-toolkit";
+
+const LOCAL_STORAGE_KEY = 'rssalchemy_store_wizard';
 
 export const useWizardStore = defineStore('wizard', () => {
-  const specs = reactive(emptySpecs);
+
+  const locStorageContent = localStorage.getItem(LOCAL_STORAGE_KEY);
+  const defaultSpecs = locStorageContent ? JSON.parse(locStorageContent) as Specs : emptySpecs;
+
+  const specs = reactive(defaultSpecs);
+
   const formValid = computed(() => {
     return fields.every(field => (
       specs[field.name].length === 0 && !(field as Field).required || field.validate(specs[field.name]).ok
     ));
   });
-  function updateSpecs(newSpecs: Specs) {
+
-    Object.assign(specs, newSpecs);
+  const updateLocalStorage = debounce(() => {
+    localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(specs));
+  }, 500);
+
+  function updateSpec(fieldName: FieldNames, newValue: string) {
+    specs[fieldName] = newValue;
+    updateLocalStorage();
   }
-  return {specs, formValid, updateSpecs};
+  function updateSpecs(newValue: Specs) {
+    Object.assign(specs, newValue);
+    updateLocalStorage();
+  }
+
+  return {specs, formValid, updateSpec, updateSpecs};
 });