feat: add localstorage for persistancy and minor refacotring

src/App.vue

@@ -1,13 +1,22 @@
 <script setup lang="ts">
-import {ref} from 'vue'
+import {ref, watchEffect} from 'vue'
 import Sidebar from './components/Sidebar.vue'
 
-const notes = ref([])
+const STORAGE_KEY_CONFIG = 'jane-config'
+const STORAGE_KEY_NOTES = 'jane-notes'
+
+const configs = ref(JSON.parse(localStorage.getItem(STORAGE_KEY_CONFIG) || '[]'))
+const notes = ref(JSON.parse(localStorage.getItem(STORAGE_KEY_NOTES) || '[]'))
 const active_note = ref(null)
 
 const input_title = ref('')
 const input_content = ref('')
 
+// find note Index by Id
+function findNoteIndexById(id:any):any {
+	return notes.value.findIndex((note:any) => note.id === id)
+}
+
 // create note
 function create_note() {
 	// generate random id
@@ -23,11 +32,11 @@ function create_note() {
 }
 
 // delete note
-function delete_note({id, evt}) {
+function delete_note({id, evt}:any) {
 	// stop the propagation of the event
 	evt.stopPropagation()
 	// find the current note id in the notes array
-	let noteId = notes.value.findIndex(note => note.id === id)
+	let noteId = findNoteIndexById(id)
 	// delete the note out of the array
 	notes.value.splice(noteId, 1)
 	// unset the active note and the inputs
@@ -39,30 +48,32 @@ function delete_note({id, evt}) {
 // update note
 function update_note() {
 	// find the current note id in the notes array
-	let noteId = notes.value.findIndex(note => note.id === active_note.value)
+	let noteId = findNoteIndexById(active_note.value)
 	// set the note properties to the current input values
 	notes.value[noteId].title = input_title.value
 	notes.value[noteId].content = input_content.value
 }
 
 // set active note
-function set_active_note(id) {
+function set_active_note(id:any) {
 	// set the active note property
 	active_note.value = id
 	// find the current note in the notes array
-	let note = notes.value.find(note => note.id === id)
+	let noteId = findNoteIndexById(id)
 	// set the input properties to the current note
-	input_title.value = note.title
-	input_content.value = note.content
+	input_title.value = notes.value[noteId].title
+	input_content.value = notes.value[noteId].content
 	// set timeout to wait a tick to get it ready
-	setTimeout(() => {
-		document.querySelector('input#note-title').focus()
-	}, 0);
+	setTimeout(() => { (document.querySelector('input#note-title') as HTMLInputElement)?.focus() }, 0)
 }
 
-// save notes
-
-// load notes
+// persist state
+watchEffect(() => {
+	// save the current array of notes
+	localStorage.setItem(STORAGE_KEY_NOTES, JSON.stringify(notes.value))
+	// save the current array of configurations
+	localStorage.setItem(STORAGE_KEY_CONFIG, JSON.stringify(configs.value))
+})
 
 </script>