Update logic to allowing storing and searching by name rather than by route

This is much more efficient for search history particularly. No need for app-specific routes and easier operations & logic due to name being the primary key for search history entries. This still allows for the route to be used as the _id for different kinds of search history (i.e., bookmarks) that could be added in the future.

Author: kommunarr

src/renderer/components/ft-input/ft-input.js

@@ -63,6 +63,10 @@ export default defineComponent({
       type: Array,
       default: () => { return [] }
     },
+    searchResultIcon: {
+      type: Array,
+      default: null
+    },
     showDataWhenEmpty: {
       type: Boolean,
       default: false
@@ -151,7 +155,7 @@ export default defineComponent({
   },
   methods: {
     getTextForArrayAtIndex: function (array, index) {
-      return array[index].name ?? array[index]
+      return array[index]
     },
     handleClick: function (e) {
       // No action if no input text
@@ -244,15 +248,9 @@ export default defineComponent({
 
     handleOptionClick: function (index) {
       this.searchState.showOptions = false
-      const isSearchHistoryClick = this.visibleDataList[index].route
-      this.inputData = isSearchHistoryClick ? `ft:${this.visibleDataList[index].route}` : this.visibleDataList[index]
+      this.inputData = this.visibleDataList[index]
       this.$emit('input', this.inputData)
       this.handleClick()
-
-      // update displayed label to match name of the search history entry
-      if (isSearchHistoryClick) {
-        this.inputData = this.$refs.input.value = this.visibleDataList[index].name
-      }
     },
 
     /**
@@ -325,10 +323,6 @@ export default defineComponent({
       const lowerCaseInputData = this.inputData.toLowerCase()
 
       this.visibleDataList = this.dataList.filter(x => {
-        if (x.name) {
-          return x.name.toLowerCase().indexOf(lowerCaseInputData) !== -1
-        }
-
         return x.toLowerCase().indexOf(lowerCaseInputData) !== -1
       })
     },

src/renderer/components/ft-input/ft-input.vue

@@ -8,6 +8,7 @@
       showActionButton: showActionButton,
       showClearTextButton: showClearTextButton,
       clearTextButtonVisible: inputDataPresent || showOptions,
+      inputDataPresent: inputDataPresent,
       showOptions: showOptions,
       disabled: disabled
     }"
@@ -84,16 +85,11 @@
           @mouseleave="searchState.selectedOption = -1"
         >
           <font-awesome-icon
-            v-if="entry.name"
-            :icon="['fas', 'clock-rotate-left']"
-            class="searchResultIcon bookmarkStarIcon"
-          />
-          <font-awesome-icon
-            v-else-if="isSearch"
-            :icon="['fas', 'magnifying-glass']"
+            v-if="searchResultIcon"
+            :icon="searchResultIcon"
             class="searchResultIcon"
           />
-          {{ entry.name ?? entry }}
+          {{ entry }}
         </li>
         <!-- skipped -->
       </ul>

src/renderer/components/top-nav/top-nav.js

@@ -127,8 +127,12 @@ export default defineComponent({
       if (!this.enableSearchSuggestions) {
         return
       }
-      return this.lastSuggestionQuery === '' ? this.$store.getters.getLatestUniqueSearchHistoryEntries : this.searchSuggestionsDataList
+      return this.lastSuggestionQuery === '' ? this.$store.getters.getLatestUniqueSearchHistoryNames : this.searchSuggestionsDataList
     },
+
+    searchResultIcon: function () {
+      return this.lastSuggestionQuery === '' ? ['fas', 'clock-rotate-left'] : ['fas', 'magnifying-glass']
+    }
   },
   watch: {
     $route: function () {
@@ -167,32 +171,15 @@ export default defineComponent({
     goToSearch: async function (queryText, { event }) {
       const doCreateNewWindow = event && event.shiftKey
 
-      const isFreeTubeInternalQuery = queryText.startsWith('ft:')
-
       if (window.innerWidth <= MOBILE_WIDTH_THRESHOLD) {
         this.$refs.searchContainer.blur()
         this.showSearchContainer = false
-      } else if (!isFreeTubeInternalQuery) {
+      } else {
         this.$refs.searchInput.blur()
       }
 
       clearLocalSearchSuggestionsSession()
 
-      if (isFreeTubeInternalQuery) {
-        const adjustedQuery = queryText.substring(3)
-        if (this.$router.currentRoute.fullPath !== adjustedQuery) {
-          openInternalPath({
-            path: adjustedQuery,
-            adjustedQuery,
-            doCreateNewWindow
-          })
-        }
-
-        // update in-use search query to the selected search history entry name
-        this.lastSuggestionQuery = this.$store.getters.getSearchHistoryEntryWithRoute(adjustedQuery)?.name ?? ''
-        return
-      }
-
       this.getYoutubeUrlInfo(queryText).then((result) => {
         switch (result.urlType) {
           case 'video': {
@@ -315,7 +302,7 @@ export default defineComponent({
 
     getSearchSuggestionsDebounce: function (query) {
       const trimmedQuery = query.trim()
-      if (trimmedQuery === this.lastSuggestionQuery || trimmedQuery.startsWith('ft:')) {
+      if (trimmedQuery === this.lastSuggestionQuery) {
         return
       }
 

src/renderer/components/top-nav/top-nav.vue

@@ -93,12 +93,12 @@
           class="searchInput"
           :is-search="true"
           :data-list="activeDataList"
+          :search-result-icon="searchResultIcon"
           :spellcheck="false"
           :show-clear-text-button="true"
           :show-data-when-empty="true"
           @input="getSearchSuggestionsDebounce"
           @click="goToSearch"
-          @clear="lastSuggestionQuery = ''"
         />
         <font-awesome-icon
           class="navFilterIcon navIcon"

src/renderer/store/modules/search-history.js

@@ -12,38 +12,30 @@ const getters = {
     return state.searchHistoryEntries
   },
 
-  getLatestUniqueSearchHistoryEntries: (state) => {
-    const nameSet = new Set()
-    return state.searchHistoryEntries.filter((entry) => {
-      if (nameSet.has(entry.name)) {
-        return false
-      }
-
-      nameSet.add(entry.name)
-      return true
-    }).slice(0, SEARCH_HISTORY_ENTRIES_DISPLAY_LIMIT)
+  getLatestUniqueSearchHistoryNames: (state) => {
+    return state.searchHistoryEntries.slice(0, SEARCH_HISTORY_ENTRIES_DISPLAY_LIMIT).map((entry) => entry.name)
   },
 
-  getSearchHistoryEntryWithRoute: (state) => (route) => {
-    const searchHistoryEntry = state.searchHistoryEntries.find(p => p.route === route)
+  getSearchHistoryEntryWithId: (state) => (id) => {
+    const searchHistoryEntry = state.searchHistoryEntries.find(p => p._id === id)
     return searchHistoryEntry
   },
 
   getSearchHistoryIdsForMatchingUserPlaylistIds: (state) => (playlistIds) => {
     const searchHistoryIds = []
     const allSearchHistoryEntries = state.searchHistoryEntries
-    const searchHistoryEntryLimitedRoutesMap = new Map()
+    const searchHistoryEntryLimitedIdsMap = new Map()
     allSearchHistoryEntries.forEach((searchHistoryEntry) => {
-      searchHistoryEntryLimitedRoutesMap.set(searchHistoryEntry.route, searchHistoryEntry._id)
+      searchHistoryEntryLimitedIdsMap.set(searchHistoryEntry._id, searchHistoryEntry._id)
     })
 
     playlistIds.forEach((playlistId) => {
-      const route = `/playlist/${playlistId}?playlistType=user&searchQueryText=`
-      if (!searchHistoryEntryLimitedRoutesMap.has(route)) {
+      const id = `/playlist/${playlistId}?playlistType=user&searchQueryText=`
+      if (!searchHistoryEntryLimitedIdsMap.has(id)) {
         return
       }
 
-      searchHistoryIds.push(searchHistoryEntryLimitedRoutesMap.get(route))
+      searchHistoryIds.push(searchHistoryEntryLimitedIdsMap.get(id))
     })
 
     return searchHistoryIds
@@ -125,7 +117,7 @@ const mutations = {
 
   upsertSearchHistoryEntryToList(state, updatedSearchHistoryEntry) {
     state.searchHistoryEntries = state.searchHistoryEntries.filter((p) => {
-      return p.route !== updatedSearchHistoryEntry.route
+      return p.name !== updatedSearchHistoryEntry._id
     })
 
     state.searchHistoryEntries.unshift(updatedSearchHistoryEntry)

src/renderer/views/Search/Search.js

@@ -107,11 +107,9 @@ export default defineComponent({
   },
   methods: {
     updateSearchHistoryEntry: function () {
-      const currentRoute = this.$router.currentRoute.fullPath
       const persistentSearchHistoryPayload = {
+        _id: this.query,
         name: this.query,
-        route: currentRoute,
-        _id: currentRoute,
         lastUpdatedAt: new Date()
       }