update note display

src/App.vue

@@ -3,14 +3,14 @@ import { ref } from 'vue'
 import TopBar from '@/components/TopBar.vue'
 import SideBar from '@/components/SideBar.vue'
 import Note from '@/components/Note.vue'
-import { activeNote } from '@/composables/useNotes'
+import { activeNote, updateNote } from '@/composables/useNotes'
 
 const sideBarCollapsed = ref(false)
 
 const viewModes: ViewMode[] = [
-  { name: 'Note', icon: 'card-text' },
-  { name: 'List', icon: 'list-task' },
-  { name: 'Mindmap', icon: 'diagram-3' },
+  { name: 'Note', icon: 'fas fa-sticky-note fa-fw' },
+  { name: 'List', icon: 'fas fa-list fa-fw' },
+  { name: 'Mindmap', icon: 'fas fa-project-diagram fa-fw' },
 ]
 const activeViewMode = ref(viewModes[0])
 </script>
@@ -31,7 +31,13 @@ const activeViewMode = ref(viewModes[0])
       class="transition[margin-left] absolute bottom-0 left-0 right-0 top-[50px] flex overflow-auto border-x-[1px] bg-white px-10 py-6 duration-200 ease-out"
       :class="sideBarCollapsed ? 'ml-0' : 'ml-sidebar'"
     >
-      <Note v-if="activeNote" :note="activeNote" class="w-full" />
+      <Note
+        v-if="activeNote"
+        :key="activeNote.id"
+        :note="activeNote"
+        class="w-full"
+        @update="(note) => updateNote(note.id, note)"
+      />
     </main>
   </div>
 </template>