refactor(router): replace string literals with RouterName constants for improved maintainability

Author: antonreshetov

src/renderer/components/editor/header/Header.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { useApp, useSnippets, useSnippetUpdate } from '@/composables'
 import { i18n } from '@/electron'
+import { router, RouterName } from '@/router'
+
 import {
   Code,
   Eye,
@@ -10,7 +12,6 @@ import {
   Presentation,
   Type,
 } from 'lucide-vue-next'
-import { useRouter } from 'vue-router'
 
 const {
   selectedSnippet,
@@ -29,8 +30,6 @@ const {
 } = useApp()
 const { addToUpdateQueue } = useSnippetUpdate()
 
-const router = useRouter()
-
 const isShowDescription = ref(false)
 
 const name = computed({
@@ -77,7 +76,7 @@ function onMarkdownPresentationToggle() {
   isShowCodePreview.value = false
   isShowCodeImage.value = false
 
-  router.push({ name: 'markdown-presentation' })
+  router.push({ name: RouterName.markdownPresentation })
 }
 
 function onMindmapToggle() {

src/renderer/components/editor/markdown/Presentation.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { useApp, useSnippets } from '@/composables'
+import { router, RouterName } from '@/router'
 import { useFullscreen, useMagicKeys } from '@vueuse/core'
 import {
   ArrowLeft,
@@ -10,7 +11,6 @@ import {
   Plus,
   X,
 } from 'lucide-vue-next'
-import { useRouter } from 'vue-router'
 import { useMarkdown } from './composables'
 
 const { isShowMarkdownPresentation } = useApp()
@@ -20,8 +20,6 @@ const { scaleToShow, onZoom } = useMarkdown()
 const { isFullscreen, toggle } = useFullscreen()
 const { left, right, escape } = useMagicKeys()
 
-const router = useRouter()
-
 const mdSnippetIds = computed(() => {
   return displayedSnippets.value
     ?.filter(s => s.contents[0].language === 'markdown')
@@ -35,7 +33,7 @@ const currentIndex = computed(
 
 function onClose() {
   isShowMarkdownPresentation.value = false
-  router.push({ name: 'main' })
+  router.push({ name: RouterName.main })
 }
 
 function onPrevNext(direction: 'prev' | 'next') {

src/renderer/ipc/listeners/main-menu.ts

@@ -1,14 +1,14 @@
 import { useApp, useFolders, useSnippets } from '@/composables'
 import { ipc } from '@/electron'
-import { router } from '@/router'
+import { router, RouterName } from '@/router'
 
 const { createSnippetAndSelect, addFragment } = useSnippets()
 const { createFolderAndSelect } = useFolders()
 const { isShowMarkdown, isShowMindmap, isShowCodePreview } = useApp()
 
 export function registerMainMenuListeners() {
   ipc.on('main-menu:goto-preferences', () => {
-    router.push({ name: 'preferences/storage' })
+    router.push({ name: RouterName.preferences })
   })
 
   ipc.on('main-menu:new-snippet', () => {

src/renderer/router/index.ts

@@ -1,41 +1,51 @@
 import { createRouter, createWebHashHistory } from 'vue-router'
 
+export const RouterName = {
+  main: 'main',
+  preferences: 'preferences',
+  preferencesStorage: 'preferences/storage',
+  preferencesLanguage: 'preferences/language',
+  preferencesAppearance: 'preferences/appearance',
+  preferencesEditor: 'preferences/editor',
+  markdownPresentation: 'markdown-presentation',
+}
+
 const routes = [
   {
     path: '/',
-    name: 'main',
+    name: RouterName.main,
     component: () => import('@/views/Main.vue'),
   },
   {
     path: '/preferences',
-    name: 'preferences',
+    name: RouterName.preferences,
     component: () => import('@/views/Preferences.vue'),
     children: [
       {
         path: 'storage',
-        name: 'preferences/storage',
+        name: RouterName.preferencesStorage,
         component: () => import('@/components/preferences/Storage.vue'),
       },
       {
         path: 'language',
-        name: 'preferences/language',
+        name: RouterName.preferencesLanguage,
         component: () => import('@/components/preferences/Language.vue'),
       },
       {
         path: 'appearance',
-        name: 'preferences/appearance',
+        name: RouterName.preferencesAppearance,
         component: () => import('@/components/preferences/Appearance.vue'),
       },
       {
         path: 'editor',
-        name: 'preferences/editor',
+        name: RouterName.preferencesEditor,
         component: () => import('@/components/preferences/Editor.vue'),
       },
     ],
   },
   {
     path: '/markdown-presentation',
-    name: 'markdown-presentation',
+    name: RouterName.markdownPresentation,
     component: () => import('@/views/MarkdownPresentation.vue'),
   },
 ]

src/renderer/views/Preferences.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { i18n } from '@/electron'
-import { RouterLink, useRoute, useRouter } from 'vue-router'
+import { router, RouterName } from '@/router'
+import { RouterLink, useRoute } from 'vue-router'
 
-const router = useRouter()
 const route = useRoute()
 
 const isActiveRoute = computed(() => {
@@ -12,27 +12,27 @@ const isActiveRoute = computed(() => {
 const nav = [
   {
     label: i18n.t('preferences:storage.label'),
-    name: 'preferences/storage',
+    name: RouterName.preferencesStorage,
   },
   {
     label: i18n.t('preferences:editor.label'),
-    name: 'preferences/editor',
+    name: RouterName.preferencesEditor,
   },
   {
     label: i18n.t('preferences:language.label'),
-    name: 'preferences/language',
+    name: RouterName.preferencesLanguage,
   },
   {
     label: i18n.t('preferences:appearance.label'),
-    name: 'preferences/appearance',
+    name: RouterName.preferencesAppearance,
   },
 ]
 </script>
 
 <template>
   <LayoutTwoColumn
     :title="i18n.t('preferences:label')"
-    @back="() => router.push({ name: 'main' })"
+    @back="() => router.push({ name: RouterName.main })"
   >
     <template #left>
       <PerfectScrollbar class="h-full px-2">