update active note

src/components/Note.vue

@@ -7,6 +7,7 @@ import {
   deleteNote,
   rootNote,
   setRootNote,
+  setActiveNote,
 } from '@/composables/useNotes'
 
 const props = defineProps<{
@@ -39,7 +40,7 @@ const references = computed<Note[]>(() => {
 
 const del = async (closeModal: () => Promise<Boolean>) => {
   await closeModal()
-  activeNote.value = rootNote.value
+  setActiveNote(rootNote.value?.id)
   deleteNote(props.note.id)
 }
 

src/components/Note/NoteEditor.vue

@@ -13,7 +13,7 @@ import ListPlugin from '@ckeditor/ckeditor5-list/src/list'
 import AutoformatPlugin from '@ckeditor/ckeditor5-autoformat/src/autoformat'
 import ContextedPlugin from '@/ckeditor/ContextedPlugin'
 import { mdToHtml } from '@/utils/markdown'
-import { activeNote, getNoteByTitle } from '@/composables/useNotes'
+import { getNoteByTitle, setActiveNote } from '@/composables/useNotes'
 import Autocomplete from '@/components/Autocomplete.vue'
 
 const props = defineProps<{ note: Note }>()
@@ -58,7 +58,7 @@ const editorElement = ref<HTMLInputElement | null>(null)
 const handleClick = ({ data }: { data: any }) => {
   const noteTitle = data.domTarget.textContent as string
   const note = getNoteByTitle(noteTitle)
-  if (note) activeNote.value = note
+  if (note) setActiveNote(note.id)
 }
 
 const autocompleteRef = ref<InstanceType<typeof Autocomplete> | null>(null)

src/components/Note/NoteReferences.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { activeNote } from '@/composables/useNotes'
+import { setActiveNote } from '@/composables/useNotes'
 const props = defineProps<{
   references: Note[]
 }>()
@@ -15,7 +15,7 @@ const props = defineProps<{
           </span>
         </li>
         <li v-for="reference in props.references">
-          <a class="rounded-md" @click="activeNote = reference">
+          <a class="rounded-md" @click="setActiveNote(reference.id)">
             <i class="far fa-file-alt fa-fw" />
             {{ reference.title }}
           </a>

src/components/Search/SearchBar.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { notes, findNotes, activeNote } from '@/composables/useNotes'
+import { notes, findNotes, setActiveNote } from '@/composables/useNotes'
 
 const active = ref(false)
 watch(active, () => {
@@ -15,7 +15,7 @@ const results = computed<Note[]>(() => {
 })
 
 const goToNote = (note: Note) => {
-  activeNote.value = note
+  setActiveNote(note.id)
   active.value = false
   if (queryElem.value) queryElem.value.blur()
 }

src/components/SideBar.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { rootNote, notes, activeNote } from '@/composables/useNotes'
+import { rootNote, notes, setActiveNote } from '@/composables/useNotes'
 
 const props = defineProps<{
   viewModes: ViewMode[]
@@ -20,7 +20,7 @@ const emit = defineEmits<{
       <template #items>
         <SideBarMenuItem
           icon="fas fa-fw fa-home"
-          @click="activeNote = rootNote"
+          @click="setActiveNote(rootNote?.id)"
           :title="rootNote?.title"
         >
           {{ rootNote?.title }}
@@ -49,7 +49,7 @@ const emit = defineEmits<{
         <SideBarMenuItem
           v-for="note in notes"
           icon="far fa-file-alt fa-fw"
-          @click="activeNote = note"
+          @click="setActiveNote(note.id)"
           :title="rootNote?.title"
         >
           {{ note.title }}

src/composables/useNotes.ts

@@ -14,17 +14,20 @@ export const notes = computed<Note[]>(() => {
     .sort((a, b) => b.modified - a.modified) as Note[]
 })
 watch(notes, () => {
-  if (notes.value.length > 0 && !activeNote.value) activeNote.value = rootNote.value
+  if (notes.value.length > 0 && !activeNote.value) setActiveNote(rootNote.value?.id)
 })
 
-export const activeNote = ref<Note>()
+const activeNoteId = ref<string>()
+export const activeNote = computed(() =>
+  notes.value.find((note) => note.id === activeNoteId.value)
+)
 watch(activeNote, () => {
   if (activeNote.value) {
     useTitle(`${activeNote.value.title} | Contexted`)
   }
 })
-export const setActiveNote = (noteId: string) => {
+export const setActiveNote = (noteId: string | undefined) => {
-  activeNote.value = notes.value.find((note) => note.id === noteId)
+  if (noteId) activeNoteId.value = noteId
 }
 
 export const rootNote = computed<Note | undefined>(() => {
@@ -95,7 +98,7 @@ export const addNote = (title: string, content: string, goToNote: boolean = fals
     modified: new Date().getTime(),
   }
   baseNotes[id] = newNote
-  if (goToNote) activeNote.value = notes.value.find((note) => note.id === newNote.id)
+  if (goToNote) setActiveNote(id)
 }
 
 export const deleteNote = (noteId: string) => {