[web] Use named route for search pages

Switching to named routes in order to reduce future maintenance.

web-src/src/components/NavbarTop.vue

@@ -27,7 +27,7 @@
       <navbar-item-link v-if="is_visible_files" :to="{ name: 'files' }">
         <mdicon class="icon" name="folder-open" size="16" />
       </navbar-item-link>
-      <navbar-item-link v-if="is_visible_search" :to="{ name: 'search' }">
+      <navbar-item-link v-if="is_visible_search" :to="{ name: search_name }">
         <mdicon class="icon" name="magnify" size="16" />
       </navbar-item-link>
       <div
@@ -96,7 +96,7 @@
               <mdicon class="icon" name="folder-open" size="16" />
               <b v-text="$t('navigation.files')" />
             </navbar-item-link>
-            <navbar-item-link :to="{ name: 'search' }">
+            <navbar-item-link :to="{ name: search_name }">
               <mdicon class="icon" name="magnify" size="16" />
               <b v-text="$t('navigation.search')" />
             </navbar-item-link>
@@ -229,6 +229,12 @@ export default {
       }
     },
 
+    search_name: {
+      get() {
+        return 'search-' + this.$store.state.search_source
+      }
+    },
+
     zindex() {
       if (this.show_player_menu) {
         return 'z-index: 20'

web-src/src/components/TabsSearch.vue

@@ -7,7 +7,7 @@
             <ul>
               <li
                 :class="{
-                  'is-active': $store.state.search_path === '/search/library'
+                  'is-active': $store.state.search_source === 'library'
                 }"
               >
                 <a @click="search_library">
@@ -17,7 +17,7 @@
               </li>
               <li
                 :class="{
-                  'is-active': $store.state.search_path === '/search/spotify'
+                  'is-active': $store.state.search_source === 'spotify'
                 }"
               >
                 <a @click="search_spotify">
@@ -62,17 +62,17 @@ export default {
 
   methods: {
     search_library() {
-      this.$store.commit(types.SEARCH_PATH, '/search/library')
+      this.$store.commit(types.SEARCH_SOURCE, 'library')
       this.$router.push({
-        path: this.$store.state.search_path,
+        name: 'search-library',
         query: this.route_query
       })
     },
 
     search_spotify() {
-      this.$store.commit(types.SEARCH_PATH, '/search/spotify')
+      this.$store.commit(types.SEARCH_SOURCE, 'spotify')
       this.$router.push({
-        path: this.$store.state.search_path,
+        name: 'search-spotify',
         query: this.route_query
       })
     }

web-src/src/pages/PageSearchLibrary.vue

@@ -485,7 +485,7 @@ export default {
       }
 
       this.$router.push({
-        path: this.$store.state.search_path,
+        name: 'search-library',
         query: {
           type: 'track,artist,album,playlist,audiobook,podcast,composer',
           query: this.search_query,

web-src/src/router/index.js

@@ -253,11 +253,6 @@ export const router = createRouter({
       name: 'queue',
       path: '/'
     },
-    {
-      name: 'search',
-      path: '/search',
-      redirect: '/search/library'
-    },
     {
       component: PageSearchLibrary,
       name: 'search-library',

web-src/src/store/index.js

@@ -50,7 +50,7 @@ export default createStore({
         list: []
       },
 
-      search_path: '/search/library',
+      search_source: 'library',
       recent_searches: [],
 
       composer_tracks_sort: 1,
@@ -222,8 +222,8 @@ export default createStore({
         state.notifications.list.splice(index, 1)
       }
     },
-    [types.SEARCH_PATH](state, searchPath) {
-      state.search_path = searchPath
+    [types.SEARCH_SOURCE](state, searchSource) {
+      state.search_source = searchSource
     },
     [types.ADD_RECENT_SEARCH](state, query) {
       const index = state.recent_searches.findIndex((elem) => elem === query)

web-src/src/store/mutation_types.js

@@ -18,7 +18,7 @@ export const SPOTIFY_FEATURED_PLAYLISTS = 'SPOTIFY_FEATURED_PLAYLISTS'
 export const ADD_NOTIFICATION = 'ADD_NOTIFICATION'
 export const DELETE_NOTIFICATION = 'DELETE_NOTIFICATION'
 
-export const SEARCH_PATH = 'SEARCH_PATH'
+export const SEARCH_SOURCE = 'SEARCH_SOURCE'
 export const ADD_RECENT_SEARCH = 'ADD_RECENT_SEARCH'
 
 export const COMPOSER_TRACKS_SORT = 'COMPOSER_TRACKS_SORT'