sync with local storage

src/components/Note/NoteEditor.vue

@@ -38,7 +38,7 @@ const editorConfig = {
     ParagraphPlugin,
     ListPlugin,
     AutoformatPlugin,
-    ContextedPlugin,
+    ContextedPlugin
   ],
   toolbar: {
     items: [
@@ -51,10 +51,10 @@ const editorConfig = {
       'redo',
       'heading',
       'bulletedList',
-      'numberedList',
-    ],
+      'numberedList'
+    ]
   },
-  placeholder: 'Click here to start typing...',
+  placeholder: 'Click here to start typing...'
 }
 
 const editorElement = ref<HTMLInputElement | null>(null)
@@ -70,10 +70,10 @@ const handleClick = ({ data }: { data: any }) => {
 }
 
 const autocompleteRef = ref<InstanceType<typeof Autocomplete> | null>(null)
-const showAutocomplete = ref(false)
-const autocompleteStyle = ref({})
-const autocompleteText = ref('')
-const autocompleteReverse = ref(false)
+const showAutocomplete = ref<boolean>(false)
+const autocompleteStyle = ref<{ [key: string]: any }>({})
+const autocompleteText = ref<string>('')
+const autocompleteReverse = ref<boolean>(false)
 
 const handleAutocomplete = async (event: AutocompleteEvent) => {
   const position = event.position
@@ -84,7 +84,7 @@ const handleAutocomplete = async (event: AutocompleteEvent) => {
     )
     autocompleteStyle.value = {
       top: `${position.top - rect.top + lineHeight}px`,
-      left: `${position.left - rect.left}px`,
+      left: `${position.left - rect.left}px`
     }
   }
   autocompleteText.value = event.autocompleteText || ''
@@ -99,12 +99,10 @@ const handleAutocomplete = async (event: AutocompleteEvent) => {
     editorRect &&
     autocompleteRect.bottom > editorRect.bottom
   ) {
-    const autocompleteHeight = parseFloat(
-      window.getComputedStyle(autocompleteElem).height
-    )
+    const autocompleteHeight = parseFloat(window.getComputedStyle(autocompleteElem).height)
     autocompleteStyle.value = {
       ...autocompleteStyle.value,
-      top: `${position.top - editorRect.top - autocompleteHeight}px`,
+      top: `${position.top - editorRect.top - autocompleteHeight}px`
     }
     autocompleteReverse.value = true
   } else {

src/components/Search/SearchBar.vue

@@ -5,7 +5,7 @@ const emit = defineEmits<{
   active: [active: boolean]
 }>()
 
-const active = ref(false)
+const active = ref<boolean>(false)
 watch(active, () => {
   if (!active.value) {
     query.value = ''
@@ -14,7 +14,7 @@ watch(active, () => {
   emit('active', active.value)
 })
 
-const query = ref('')
+const query = ref<string>('')
 const results = computed<Note[]>(() => {
   return query.value ? findNotes(query.value) : notes.value
 })

src/components/Spinner.vue

@@ -0,0 +1 @@
+<template>loading...</template>

src/components/TopBar.vue

@@ -11,7 +11,7 @@ const emit = defineEmits<{
   toggleSideBar: []
 }>()
 
-const searchActive = ref(false)
+const searchActive = ref<boolean>(false)
 
 const signOut = async (close: () => Promise<boolean>) => {
   await firebaseSignOut()
@@ -19,7 +19,7 @@ const signOut = async (close: () => Promise<boolean>) => {
 }
 
 const authUI: any = inject('firebaseAuthUI')
-const authModalInitialStateOpen = ref(authUI.isPendingRedirect())
+const authModalInitialStateOpen = ref<boolean>(authUI.isPendingRedirect())
 </script>
 <template>
   <div

src/components/ViewModes/ListView.vue

@@ -10,7 +10,7 @@ const notesWithReferences = computed(() => {
 })
 
 const selectedNotes = ref<{ [key: string]: Boolean }>({})
-const countSelectedNotes = computed(
+const countSelectedNotes = computed<number>(
   () => Object.entries(selectedNotes.value).filter(([, selected]) => Boolean(selected)).length
 )
 
@@ -18,7 +18,7 @@ const toggleRow = (note: Note) => {
   if (!note.isRoot) selectedNotes.value[note.id] = !selectedNotes.value[note.id]
 }
 
-const filter = ref('')
+const filter = ref<string>('')
 
 const deleteSelectedNotes = (closeModal: () => void) => {
   closeModal()

src/components/ViewModes/Note.vue

@@ -17,7 +17,7 @@ const emit = defineEmits<{
   update: [note: Note]
 }>()
 
-const noteTitle = ref(props.note.title)
+const noteTitle = ref<string>(props.note.title)
 watch(noteTitle, () => {
   const updatedNote: Note = { ...props.note, title: noteTitle.value }
   emit('update', updatedNote)