aview mode

src/App.vue

@@ -1,14 +1,7 @@
 <script setup lang="ts">
 import { activeNote, updateNote } from '@/composables/useNotes'
-
+import { viewModes, activeViewMode } from '@/composables/useViewMode'
 const sideBarCollapsed = ref(false)
-
-const viewModes: ViewMode[] = [
-  { 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>
 
 <template>

src/composables/useNotes.ts

@@ -1,3 +1,4 @@
+import { viewModes, activeViewMode } from '@/composables/useViewMode'
 import { useTitle } from '@vueuse/core'
 import { mdToHtml } from '@/utils/markdown'
 import { getAllMatches } from '@/utils/helpers'
@@ -27,7 +28,11 @@ watch(activeNote, () => {
   }
 })
 export const setActiveNote = (noteId: string | undefined) => {
-  if (noteId) activeNoteId.value = noteId
+  if (noteId) {
+    activeNoteId.value = noteId
+    activeViewMode.value =
+      viewModes.find((mode) => mode.name === 'Note') || viewModes[0]
+  }
 }
 
 export const rootNote = computed<Note | undefined>(() => {

src/composables/useViewMode.ts

@@ -0,0 +1,6 @@
+export const viewModes: ViewMode[] = [
+  { 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' },
+]
+export const activeViewMode = ref(viewModes[0])