Update search results with matching bookmarks

src/constants.js

@@ -17,9 +17,9 @@ const IpcChannels = {
 
   DB_SETTINGS: 'db-settings',
   DB_HISTORY: 'db-history',
-  DB_SEARCH_HISTORY: 'db-search-history',
   DB_PROFILES: 'db-profiles',
   DB_PLAYLISTS: 'db-playlists',
+  DB_SEARCH_HISTORY: 'db-search-history',
 
   SYNC_SETTINGS: 'sync-settings',
   SYNC_HISTORY: 'sync-history',

src/datastores/handlers/base.js

@@ -193,11 +193,11 @@ class SearchHistory {
   }
 
   static upsert(pageBookmark) {
-    return db.searchHistory.updateAsync({ _id: pageBookmark.route }, pageBookmark, { upsert: true })
+    return db.searchHistory.updateAsync({ _id: pageBookmark._id }, pageBookmark, { upsert: true })
   }
 
   static delete(route) {
-    return db.searchHistory.removeAsync({ _id: route })
+    return db.searchHistory.removeAsync({ route: route })
   }
 
   static deleteAll() {

src/main/index.js

@@ -1071,15 +1071,15 @@ function runApp() {
   ipcMain.handle(IpcChannels.DB_SEARCH_HISTORY, async (event, { action, data }) => {
     try {
       switch (action) {
-        case DBActions.GENERAL.CREATE:
-          await baseHandlers.searchHistory.create(data)
+        case DBActions.GENERAL.CREATE: {
+          const pageBookmark = await baseHandlers.searchHistory.create(data)
           syncOtherWindows(
             IpcChannels.SYNC_SEARCH_HISTORY,
             event,
             { event: SyncEvents.GENERAL.CREATE, data }
           )
-          return null
-
+          return pageBookmark
+        }
         case DBActions.GENERAL.FIND:
           return await baseHandlers.searchHistory.find()
 

src/renderer/App.js

@@ -171,6 +171,7 @@ export default defineComponent({
 
       this.grabAllProfiles(this.$t('Profile.All Channels')).then(async () => {
         this.grabHistory()
+        this.grabPageBookmarks()
         this.grabAllPlaylists()
 
         if (process.env.IS_ELECTRON) {
@@ -539,6 +540,7 @@ export default defineComponent({
       'grabUserSettings',
       'grabAllProfiles',
       'grabHistory',
+      'grabPageBookmarks',
       'grabAllPlaylists',
       'getYoutubeUrlInfo',
       'getExternalPlayerCmdArgumentsData',

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

@@ -205,6 +205,10 @@
   line-height: 2rem;
 }
 
+/* .list .li.bookmarked {
+  color: green;
+} */
+
 .hover {
   background-color: var(--scrollbar-color-hover);
   color: var(--scrollbar-text-color-hover);

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

@@ -231,9 +231,13 @@ export default defineComponent({
       }
     },
 
-    handleOptionClick: function (index) {
+    handleOptionClick: function (index, isBookmark) {
       this.searchState.showOptions = false
-      this.inputData = this.visibleDataList[index]
+      if (isBookmark) {
+        this.inputData = `ft:${this.visibleDataList[index].route}`
+      } else {
+        this.inputData = this.visibleDataList[index]
+      }
       this.$emit('input', this.inputData)
       this.handleClick()
     },
@@ -307,6 +311,10 @@ export default defineComponent({
       const lowerCaseInputData = this.inputData.toLowerCase()
 
       this.visibleDataList = this.dataList.filter(x => {
+        if (x.bookmarkName) {
+          return x.bookmarkName.toLowerCase().indexOf(lowerCaseInputData) !== -1
+        }
+
         return x.toLowerCase().indexOf(lowerCaseInputData) !== -1
       })
     },

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

@@ -76,14 +76,18 @@
       >
         <!-- eslint-disable vuejs-accessibility/click-events-have-key-events -->
         <li
-          v-for="(list, index) in visibleDataList"
+          v-for="(entry, index) in visibleDataList"
           :key="index"
-          :class="searchState.selectedOption === index ? 'hover': ''"
-          @click="handleOptionClick(index)"
+          :class="{ hover: searchState.selectedOption === index , bookmarked: entry.bookmarkName }"
+          @click="handleOptionClick(index, entry.bookmarkName)"
           @mouseenter="searchState.selectedOption = index"
           @mouseleave="searchState.selectedOption = -1"
         >
-          {{ list }}
+          <!-- <font-awesome-icon
+            v-if="!!entry.bookmarkName"
+            :icon="['fas', 'star']"
+          /> -->
+          {{ entry.bookmarkName ?? entry }}
         </li>
         <!-- skipped -->
       </ul>

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

@@ -97,14 +97,14 @@ export default defineComponent({
       return this.$t('Open New Window')
     },
 
-    // currentRouteFullPath: function () {
-    //   return this.$router.currentRoute.fullPath
-    // },
-
     isPageBookmarked: function () {
       return this.$store.getters.getPageBookmarkWithRoute(this.currentRouteFullPath) != null
     },
 
+    matchingBookmarksDataList: function () {
+      return this.$store.getters.getPageBookmarksWithRouteSubstring(this.lastSuggestionQuery, this.currentRouteFullPath)
+    },
+
     pageBookmarkIconTitle: function () {
       return this.isPageBookmarked ? this.$t('Edit bookmark for this page') : this.$t('Bookmark this page')
     },
@@ -124,6 +124,7 @@ export default defineComponent({
       this.showSearchContainer = false
     }
 
+    this.currentRouteFullPath = this.$router.currentRoute.fullPath
     // Store is not up-to-date when the component mounts, so we use timeout.
     setTimeout(() => {
       if (this.expandSideBar) {

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

@@ -84,7 +84,7 @@
           :placeholder="$t('Search / Go to URL')"
           class="searchInput"
           :is-search="true"
-          :data-list="searchSuggestionsDataList"
+          :data-list="[...matchingBookmarksDataList, ...searchSuggestionsDataList]"
           :spellcheck="false"
           :show-clear-text-button="true"
           @input="getSearchSuggestionsDebounce"

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

@@ -12,12 +12,36 @@ const getters = {
   getPageBookmarkWithRoute: (state) => (route) => {
     const pageBookmark = state.pageBookmarks.find(p => p.route === route)
     return pageBookmark
+  },
+
+  getPageBookmarksWithRouteSubstring: (state) => (routeSubstring, routeToExclude) => {
+    if (routeSubstring === '') {
+      return []
+    }
+    const routeSubstringToLower = routeSubstring.toLowerCase()
+    const pageBookmarks = state.pageBookmarks.filter((pageBookmark) =>
+      pageBookmark && pageBookmark.route.toLowerCase().includes(routeSubstringToLower) && pageBookmark.route !== routeToExclude
+    )
+    return pageBookmarks
   }
 }
-
 const actions = {
+  async grabPageBookmarks({ commit }) {
+    try {
+      const results = await DBSearchHistoryHandlers.find()
+      commit('setPageBookmarks', results)
+    } catch (errMessage) {
+      console.error(errMessage)
+    }
+  },
+
   async createPageBookmark({ commit }, pageBookmark) {
-    state.pageBookmarks.push(pageBookmark)
+    try {
+      const newPageBookmark = await DBSearchHistoryHandlers.create(pageBookmark)
+      commit('addPageBookmarkToList', newPageBookmark)
+    } catch (errMessage) {
+      console.error(errMessage)
+    }
   },
 
   async updatePageBookmark({ commit }, pageBookmark) {
@@ -49,6 +73,10 @@ const actions = {
 }
 
 const mutations = {
+  addPageBookmarkToList(state, pageBookmark) {
+    state.pageBookmarks.push(pageBookmark)
+  },
+
   setPageBookmarks(state, pageBookmarks) {
     state.pageBookmarks = pageBookmarks
   },
@@ -65,9 +93,9 @@ const mutations = {
     }
   },
 
-  removePageBookmarkFromList(state, pageBookmarkId) {
+  removePageBookmarkFromList(state, route) {
     const i = state.pageBookmarks.findIndex((pageBookmark) => {
-      return pageBookmark.route === pageBookmarkId
+      return pageBookmark.route === route
     })
 
     state.pageBookmarks.splice(i, 1)