From 920bf92fc24efa48df6671b52ca726eb7d16217d Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Mon, 22 Apr 2024 00:06:23 -0500
Subject: [PATCH 01/23] Implement page bookmarking modal & call, icon, &
 handling/calls

---
 src/constants.js                              |  5 ++
 src/datastores/handlers/base.js               | 28 ++++++
 src/datastores/handlers/electron.js           | 40 ++++++++-
 src/datastores/handlers/index.js              |  3 +-
 src/datastores/handlers/web.js                | 25 +++++-
 src/datastores/index.js                       |  1 +
 src/main/index.js                             | 49 +++++++++++
 src/renderer/App.js                           |  5 ++
 src/renderer/App.vue                          |  3 +
 .../page-bookmark-prompt.css                  |  9 ++
 .../page-bookmark-prompt.js                   | 87 +++++++++++++++++++
 .../page-bookmark-prompt.vue                  | 40 +++++++++
 src/renderer/components/top-nav/top-nav.js    | 39 +++++++++
 src/renderer/components/top-nav/top-nav.scss  |  6 +-
 src/renderer/components/top-nav/top-nav.vue   | 10 +++
 src/renderer/main.js                          |  2 +
 src/renderer/store/modules/index.js           |  2 +
 src/renderer/store/modules/search-history.js  | 82 +++++++++++++++++
 src/renderer/store/modules/utils.js           | 17 ++++
 static/locales/en-US.yaml                     | 13 +++
 20 files changed, 462 insertions(+), 4 deletions(-)
 create mode 100644 src/renderer/components/page-bookmark-prompt/page-bookmark-prompt.css
 create mode 100644 src/renderer/components/page-bookmark-prompt/page-bookmark-prompt.js
 create mode 100644 src/renderer/components/page-bookmark-prompt/page-bookmark-prompt.vue
 create mode 100644 src/renderer/store/modules/search-history.js

diff --git a/src/constants.js b/src/constants.js
index 3224725035b5..282443998201 100644
--- a/src/constants.js
+++ b/src/constants.js
@@ -17,11 +17,13 @@ const IpcChannels = {
 
   DB_SETTINGS: 'db-settings',
   DB_HISTORY: 'db-history',
+  DB_SEARCH_HISTORY: 'db-search-history',
   DB_PROFILES: 'db-profiles',
   DB_PLAYLISTS: 'db-playlists',
 
   SYNC_SETTINGS: 'sync-settings',
   SYNC_HISTORY: 'sync-history',
+  SYNC_SEARCH_HISTORY: 'sync-search-history',
   SYNC_PROFILES: 'sync-profiles',
   SYNC_PLAYLISTS: 'sync-playlists',
 
@@ -45,6 +47,9 @@ const DBActions = {
     UPDATE_PLAYLIST: 'db-action-history-update-playlist',
   },
 
+  // SEARCH_HISTORY: {
+  // },
+
   PLAYLISTS: {
     UPSERT_VIDEO: 'db-action-playlists-upsert-video-by-playlist-name',
     UPSERT_VIDEOS: 'db-action-playlists-upsert-videos-by-playlist-name',
diff --git a/src/datastores/handlers/base.js b/src/datastores/handlers/base.js
index 7c2eb4ec0539..302a567f65fe 100644
--- a/src/datastores/handlers/base.js
+++ b/src/datastores/handlers/base.js
@@ -183,12 +183,39 @@ class Playlists {
   }
 }
 
+class SearchHistory {
+  static create(pageBookmark) {
+    return db.searchHistory.insertAsync(pageBookmark)
+  }
+
+  static find() {
+    return db.searchHistory.findAsync({})
+  }
+
+  static upsert(pageBookmark) {
+    return db.searchHistory.updateAsync({ _id: pageBookmark.route }, pageBookmark, { upsert: true })
+  }
+
+  static delete(route) {
+    return db.searchHistory.removeAsync({ _id: route })
+  }
+
+  static deleteAll() {
+    return db.searchHistory.removeAsync({}, { multi: true })
+  }
+
+  static persist() {
+    return db.searchHistory.compactDatafileAsync()
+  }
+}
+
 function compactAllDatastores() {
   return Promise.allSettled([
     Settings.persist(),
     History.persist(),
     Profiles.persist(),
     Playlists.persist(),
+    SearchHistory.persist()
   ])
 }
 
@@ -197,6 +224,7 @@ export {
   History as history,
   Profiles as profiles,
   Playlists as playlists,
+  SearchHistory as searchHistory,
 
   compactAllDatastores,
 }
diff --git a/src/datastores/handlers/electron.js b/src/datastores/handlers/electron.js
index 31e8c96305ec..f4a4536580c1 100644
--- a/src/datastores/handlers/electron.js
+++ b/src/datastores/handlers/electron.js
@@ -205,9 +205,47 @@ class Playlists {
   }
 }
 
+class SearchHistory {
+  static create(pageBookmark) {
+    return ipcRenderer.invoke(
+      IpcChannels.DB_SEARCH_HISTORY,
+      { action: DBActions.GENERAL.CREATE, data: pageBookmark }
+    )
+  }
+
+  static find() {
+    return ipcRenderer.invoke(
+      IpcChannels.DB_SEARCH_HISTORY,
+      { action: DBActions.GENERAL.FIND }
+    )
+  }
+
+  static upsert(pageBookmark) {
+    return ipcRenderer.invoke(
+      IpcChannels.DB_SEARCH_HISTORY,
+      { action: DBActions.GENERAL.UPSERT, data: pageBookmark }
+    )
+  }
+
+  static delete(route) {
+    return ipcRenderer.invoke(
+      IpcChannels.DB_SEARCH_HISTORY,
+      { action: DBActions.GENERAL.DELETE, data: route }
+    )
+  }
+
+  static deleteAll() {
+    return ipcRenderer.invoke(
+      IpcChannels.DB_SEARCH_HISTORY,
+      { action: DBActions.GENERAL.DELETE_ALL }
+    )
+  }
+}
+
 export {
   Settings as settings,
   History as history,
   Profiles as profiles,
-  Playlists as playlists
+  Playlists as playlists,
+  SearchHistory as searchHistory
 }
diff --git a/src/datastores/handlers/index.js b/src/datastores/handlers/index.js
index df6ebffd9d80..80a954f3841e 100644
--- a/src/datastores/handlers/index.js
+++ b/src/datastores/handlers/index.js
@@ -2,5 +2,6 @@ export {
   settings as DBSettingHandlers,
   history as DBHistoryHandlers,
   profiles as DBProfileHandlers,
-  playlists as DBPlaylistHandlers
+  playlists as DBPlaylistHandlers,
+  searchHistory as DBSearchHistoryHandlers
 } from 'DB_HANDLERS_ELECTRON_RENDERER_OR_WEB'
diff --git a/src/datastores/handlers/web.js b/src/datastores/handlers/web.js
index d5feccc998d0..8685220cf290 100644
--- a/src/datastores/handlers/web.js
+++ b/src/datastores/handlers/web.js
@@ -118,9 +118,32 @@ class Playlists {
   }
 }
 
+class SearchHistory {
+  static create(pageBookmark) {
+    return baseHandlers.searchHistory.create(pageBookmark)
+  }
+
+  static find() {
+    return baseHandlers.searchHistory.find()
+  }
+
+  static upsert(pageBookmark) {
+    return baseHandlers.searchHistory.upsert(pageBookmark)
+  }
+
+  static delete(route) {
+    return baseHandlers.searchHistory.delete(route)
+  }
+
+  static deleteAll() {
+    return baseHandlers.searchHistory.deleteAll()
+  }
+}
+
 export {
   Settings as settings,
   History as history,
   Profiles as profiles,
-  Playlists as playlists
+  Playlists as playlists,
+  SearchHistory as searchHistory
 }
diff --git a/src/datastores/index.js b/src/datastores/index.js
index 442fed6497bf..20b1331ab6b3 100644
--- a/src/datastores/index.js
+++ b/src/datastores/index.js
@@ -26,3 +26,4 @@ export const settings = new Datastore({ filename: dbPath('settings'), autoload:
 export const profiles = new Datastore({ filename: dbPath('profiles'), autoload: true })
 export const playlists = new Datastore({ filename: dbPath('playlists'), autoload: true })
 export const history = new Datastore({ filename: dbPath('history'), autoload: true })
+export const searchHistory = new Datastore({ filename: dbPath('search-history'), autoload: true })
diff --git a/src/main/index.js b/src/main/index.js
index 928dfd7b6597..d364a5454db8 100644
--- a/src/main/index.js
+++ b/src/main/index.js
@@ -1066,6 +1066,55 @@ function runApp() {
     }
   })
 
+  // ************** //
+  // Search History
+  ipcMain.handle(IpcChannels.DB_SEARCH_HISTORY, async (event, { action, data }) => {
+    try {
+      switch (action) {
+        case DBActions.GENERAL.CREATE:
+          await baseHandlers.searchHistory.create(data)
+          syncOtherWindows(
+            IpcChannels.SYNC_SEARCH_HISTORY,
+            event,
+            { event: SyncEvents.GENERAL.CREATE, data }
+          )
+          return null
+
+        case DBActions.GENERAL.FIND:
+          return await baseHandlers.searchHistory.find()
+
+        case DBActions.GENERAL.UPSERT:
+          await baseHandlers.searchHistory.upsert(data)
+          syncOtherWindows(
+            IpcChannels.SYNC_SEARCH_HISTORY,
+            event,
+            { event: SyncEvents.GENERAL.UPSERT, data }
+          )
+          return null
+
+        case DBActions.GENERAL.DELETE:
+          await baseHandlers.searchHistory.delete(data)
+          syncOtherWindows(
+            IpcChannels.SYNC_SEARCH_HISTORY,
+            event,
+            { event: SyncEvents.GENERAL.DELETE, data }
+          )
+          return null
+
+        case DBActions.GENERAL.DELETE_ALL:
+          await baseHandlers.searchHistory.deleteAll()
+          return null
+
+        default:
+          // eslint-disable-next-line no-throw-literal
+          throw 'invalid search history db action'
+      }
+    } catch (err) {
+      if (typeof err === 'string') throw err
+      else throw err.toString()
+    }
+  })
+
   // *********** //
 
   function syncOtherWindows(channel, event, payload) {
diff --git a/src/renderer/App.js b/src/renderer/App.js
index eade3f2166a9..ffef75879d29 100644
--- a/src/renderer/App.js
+++ b/src/renderer/App.js
@@ -11,6 +11,7 @@ import FtToast from './components/ft-toast/ft-toast.vue'
 import FtProgressBar from './components/ft-progress-bar/ft-progress-bar.vue'
 import FtPlaylistAddVideoPrompt from './components/ft-playlist-add-video-prompt/ft-playlist-add-video-prompt.vue'
 import FtCreatePlaylistPrompt from './components/ft-create-playlist-prompt/ft-create-playlist-prompt.vue'
+import PageBookmarkPrompt from './components/page-bookmark-prompt/page-bookmark-prompt.vue'
 import { marked } from 'marked'
 import { IpcChannels } from '../constants'
 import packageDetails from '../../package.json'
@@ -34,6 +35,7 @@ export default defineComponent({
     FtProgressBar,
     FtPlaylistAddVideoPrompt,
     FtCreatePlaylistPrompt,
+    PageBookmarkPrompt
   },
   data: function () {
     return {
@@ -77,6 +79,9 @@ export default defineComponent({
     showCreatePlaylistPrompt: function () {
       return this.$store.getters.getShowCreatePlaylistPrompt
     },
+    showPageBookmarkPrompt: function () {
+      return this.$store.getters.getShowPageBookmarkPrompt
+    },
     windowTitle: function () {
       const routePath = this.$route.path
       if (!routePath.startsWith('/channel/') && !routePath.startsWith('/watch/') && !routePath.startsWith('/hashtag/')) {
diff --git a/src/renderer/App.vue b/src/renderer/App.vue
index fb49f342eec8..54326b8b4e8c 100644
--- a/src/renderer/App.vue
+++ b/src/renderer/App.vue
@@ -81,6 +81,9 @@
     <ft-create-playlist-prompt
       v-if="showCreatePlaylistPrompt"
     />
+    <page-bookmark-prompt
+      v-if="showPageBookmarkPrompt"
+    />
     <ft-toast />
     <ft-progress-bar
       v-if="showProgressBar"
diff --git a/src/renderer/components/page-bookmark-prompt/page-bookmark-prompt.css b/src/renderer/components/page-bookmark-prompt/page-bookmark-prompt.css
new file mode 100644
index 000000000000..b7d0c96325da
--- /dev/null
+++ b/src/renderer/components/page-bookmark-prompt/page-bookmark-prompt.css
@@ -0,0 +1,9 @@
+.heading {
+  text-align: center;
+}
+
+.pageBookmarkNameInput {
+  inline-size: 80%;
+  max-inline-size: 600px;
+  margin-inline: auto;
+}
diff --git a/src/renderer/components/page-bookmark-prompt/page-bookmark-prompt.js b/src/renderer/components/page-bookmark-prompt/page-bookmark-prompt.js
new file mode 100644
index 000000000000..c0d2708a4c3b
--- /dev/null
+++ b/src/renderer/components/page-bookmark-prompt/page-bookmark-prompt.js
@@ -0,0 +1,87 @@
+import { defineComponent, nextTick } from 'vue'
+import { mapActions } from 'vuex'
+import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
+import FtPrompt from '../ft-prompt/ft-prompt.vue'
+import FtButton from '../ft-button/ft-button.vue'
+import FtInput from '../../components/ft-input/ft-input.vue'
+import { showToast } from '../../helpers/utils'
+
+export default defineComponent({
+  name: 'PageBookmarkPrompt',
+  components: {
+    'ft-flex-box': FtFlexBox,
+    'ft-prompt': FtPrompt,
+    'ft-button': FtButton,
+    'ft-input': FtInput,
+  },
+  data: function () {
+    return {
+      bookmarkName: ''
+    }
+  },
+  computed: {
+    isBookmarkBeingCreated: function () {
+      return this.pageBookmark == null
+    },
+    pageBookmark: function () {
+      return this.$store.getters.getPageBookmarkWithRoute(this.$router.currentRoute.fullPath)
+    },
+    title: function () {
+      return this.isBookmarkBeingCreated ? this.$t('Page Bookmark.Create Bookmark') : this.$t('Page Bookmark.Edit Bookmark')
+    },
+    cancelLabel: function () {
+      return this.isBookmarkBeingCreated ? this.$t('Cancel') : this.$t('Page Bookmark.Remove Bookmark')
+    }
+  },
+  mounted: function () {
+    nextTick(() => {
+      this.bookmarkName = this.pageBookmark?.bookmarkName ?? document.title
+      this.lastActiveElement = document.activeElement
+      this.$refs.pageBookmarkNameInput.focus()
+    })
+  },
+  beforeDestroy() {
+    nextTick(() => this.lastActiveElement?.focus())
+  },
+  methods: {
+    hide: function () {
+      this.hidePageBookmarkPrompt()
+    },
+
+    cancelAction: function () {
+      if (!this.isBookmarkBeingCreated) {
+        this.removeBookmark()
+      }
+      this.hide()
+    },
+
+    removeBookmark: function () {
+      this.removePageBookmark(this.page)
+      showToast(this.$t('Page Bookmark.Removed page bookmark', { bookmarkName: this.bookmarkName }))
+    },
+
+    save: function () {
+      const pageBookmark = {
+        route: this.$router.currentRoute.fullPath,
+        bookmarkName: this.bookmarkName
+      }
+
+      if (this.isBookmarkBeingCreated) {
+        this.createPageBookmark(pageBookmark)
+        showToast(this.$t('Page Bookmark.Created page bookmark', { bookmarkName: this.bookmarkName }))
+      } else if (this.pageBookmark.bookmarkName !== pageBookmark.bookmarkName) {
+        this.updatePageBookmark(pageBookmark)
+        showToast(this.$t('Page Bookmark.Updated page bookmark', { bookmarkName: this.bookmarkName }))
+      }
+
+      this.hide()
+    },
+
+    ...mapActions([
+      'hidePageBookmarkPrompt',
+      'createPageBookmark',
+      'removePageBookmark',
+      'updatePageBookmark'
+    ])
+  }
+})
diff --git a/src/renderer/components/page-bookmark-prompt/page-bookmark-prompt.vue b/src/renderer/components/page-bookmark-prompt/page-bookmark-prompt.vue
new file mode 100644
index 000000000000..d99e9238b38b
--- /dev/null
+++ b/src/renderer/components/page-bookmark-prompt/page-bookmark-prompt.vue
@@ -0,0 +1,40 @@
+<template>
+  <ft-prompt
+    :title="title"
+    @click="hide"
+  >
+    <h2 class="heading">
+      {{ title }}
+    </h2>
+    <div
+      class="pageBookmarkDetails"
+    >
+      <ft-input
+        ref="pageBookmarkNameInput"
+        class="pageBookmarkNameInput"
+        :placeholder="$t('Name')"
+        :value="bookmarkName"
+        :show-clear-text-button="true"
+        :show-action-button="false"
+        @input="e => bookmarkName = e"
+        @clear="e => bookmarkName = ''"
+      />
+    </div>
+    <div class="actions-container">
+      <ft-flex-box>
+        <ft-button
+          :label="cancelLabel"
+          @click="cancelAction"
+        />
+        <ft-button
+          :label="$t('Save')"
+          :disabled="bookmarkName === ''"
+          @click="save"
+        />
+      </ft-flex-box>
+    </div>
+  </ft-prompt>
+</template>
+
+<script src="./page-bookmark-prompt.js" />
+<style scoped src="./page-bookmark-prompt.css" />
diff --git a/src/renderer/components/top-nav/top-nav.js b/src/renderer/components/top-nav/top-nav.js
index f6b02d609ae2..2164401d0661 100644
--- a/src/renderer/components/top-nav/top-nav.js
+++ b/src/renderer/components/top-nav/top-nav.js
@@ -21,6 +21,7 @@ export default defineComponent({
   data: () => {
     return {
       component: this,
+      currentRouteFullPath: '',
       showSearchContainer: true,
       showFilters: false,
       searchFilterValueChanged: false,
@@ -94,6 +95,27 @@ export default defineComponent({
 
     newWindowText: function () {
       return this.$t('Open New Window')
+    },
+
+    // currentRouteFullPath: function () {
+    //   return this.$router.currentRoute.fullPath
+    // },
+
+    isPageBookmarked: function () {
+      return this.$store.getters.getPageBookmarkWithRoute(this.currentRouteFullPath) != null
+    },
+
+    pageBookmarkIconTitle: function () {
+      return this.isPageBookmarked ? this.$t('Edit bookmark for this page') : this.$t('Bookmark this page')
+    },
+
+    pageBookmarkIconTheme: function () {
+      return this.isPageBookmarked ? 'base favorite' : 'base'
+    }
+  },
+  watch: {
+    $route (to, from) {
+      this.currentRouteFullPath = to.fullPath
     }
   },
   mounted: function () {
@@ -133,6 +155,17 @@ export default defineComponent({
 
       clearLocalSearchSuggestionsSession()
 
+      if (query.startsWith('ft:')) {
+        this.$refs.searchInput.handleClearTextClick()
+        const adjustedQuery = query.substring(3)
+        openInternalPath({
+          path: adjustedQuery,
+          adjustedQuery,
+          doCreateNewWindow
+        })
+        return
+      }
+
       this.getYoutubeUrlInfo(query).then((result) => {
         switch (result.urlType) {
           case 'video': {
@@ -360,8 +393,14 @@ export default defineComponent({
     updateSearchInputText: function (text) {
       this.$refs.searchInput.updateInputData(text)
     },
+    openPageBookmarkPrompt: function () {
+      // if (!this.isPageBookmarked) {
+      // }
+      this.showPageBookmarkPrompt()
+    },
     ...mapActions([
       'getYoutubeUrlInfo',
+      'showPageBookmarkPrompt'
     ])
   }
 })
diff --git a/src/renderer/components/top-nav/top-nav.scss b/src/renderer/components/top-nav/top-nav.scss
index ef62946c1e52..2568e2842c2e 100644
--- a/src/renderer/components/top-nav/top-nav.scss
+++ b/src/renderer/components/top-nav/top-nav.scss
@@ -27,7 +27,7 @@
 
   @media only screen and (width >= 961px) {
     display: grid;
-    grid-template-columns: 1fr 440px 1fr;
+    grid-template-columns: 1fr 440px 0.5fr 0.5fr;
   }
 
   @include top-nav-is-colored {
@@ -102,6 +102,10 @@
   }
 }
 
+.bookmarkedPageIcon.favorite {
+  color: var(--favorite-icon-color);
+}
+
 .side {
   align-items: center;
   display: flex;
diff --git a/src/renderer/components/top-nav/top-nav.vue b/src/renderer/components/top-nav/top-nav.vue
index 69a54ab70355..ca18e97001f8 100644
--- a/src/renderer/components/top-nav/top-nav.vue
+++ b/src/renderer/components/top-nav/top-nav.vue
@@ -107,6 +107,16 @@
         @filterValueUpdated="handleSearchFilterValueChanged"
       />
     </div>
+    <font-awesome-icon
+      class="bookmarkedPageIcon navIcon"
+      :icon="['fas', 'star']"
+      :title="pageBookmarkIconTitle"
+      :class="{ [pageBookmarkIconTheme]: true }"
+      role="button"
+      tabindex="0"
+      @click="openPageBookmarkPrompt"
+      @keydown.enter.prevent="openPageBookmarkPrompt"
+    />
     <ft-profile-selector class="side profiles" />
   </div>
 </template>
diff --git a/src/renderer/main.js b/src/renderer/main.js
index 11d87890841d..6a5cd9136e98 100644
--- a/src/renderer/main.js
+++ b/src/renderer/main.js
@@ -63,6 +63,7 @@ import {
   faShareAlt,
   faSlidersH,
   faSortDown,
+  faStar,
   faStepBackward,
   faStepForward,
   faSync,
@@ -142,6 +143,7 @@ library.add(
   faShareAlt,
   faSlidersH,
   faSortDown,
+  faStar,
   faStepBackward,
   faStepForward,
   faSync,
diff --git a/src/renderer/store/modules/index.js b/src/renderer/store/modules/index.js
index d556d9571d6e..84cbe5b3cb79 100644
--- a/src/renderer/store/modules/index.js
+++ b/src/renderer/store/modules/index.js
@@ -8,6 +8,7 @@ import invidious from './invidious'
 import playlists from './playlists'
 import profiles from './profiles'
 import settings from './settings'
+import searchHistory from './search-history'
 import subscriptions from './subscriptions'
 import utils from './utils'
 
@@ -17,6 +18,7 @@ export default {
   playlists,
   profiles,
   settings,
+  searchHistory,
   subscriptions,
   utils
 }
diff --git a/src/renderer/store/modules/search-history.js b/src/renderer/store/modules/search-history.js
new file mode 100644
index 000000000000..9ecf15bd056b
--- /dev/null
+++ b/src/renderer/store/modules/search-history.js
@@ -0,0 +1,82 @@
+import { DBSearchHistoryHandlers } from '../../../datastores/handlers/index'
+
+const state = {
+  pageBookmarks: []
+}
+
+const getters = {
+  getPageBookmarks: () => {
+    return state.pageBookmarks
+  },
+
+  getPageBookmarkWithRoute: (state) => (route) => {
+    const pageBookmark = state.pageBookmarks.find(p => p.route === route)
+    return pageBookmark
+  }
+}
+
+const actions = {
+  async createPageBookmark({ commit }, pageBookmark) {
+    state.pageBookmarks.push(pageBookmark)
+  },
+
+  async updatePageBookmark({ commit }, pageBookmark) {
+    try {
+      await DBSearchHistoryHandlers.upsert(pageBookmark)
+      commit('upsertPageBookmarkToList', pageBookmark)
+    } catch (errMessage) {
+      console.error(errMessage)
+    }
+  },
+
+  async removePageBookmark({ commit }, route) {
+    try {
+      await DBSearchHistoryHandlers.delete(route)
+      commit('removePageBookmarkFromList', route)
+    } catch (errMessage) {
+      console.error(errMessage)
+    }
+  },
+
+  async removeAllPageBookmarks({ commit }) {
+    try {
+      await DBSearchHistoryHandlers.deleteAll()
+      commit('setPageBookmarks', [])
+    } catch (errMessage) {
+      console.error(errMessage)
+    }
+  },
+}
+
+const mutations = {
+  setPageBookmarks(state, pageBookmarks) {
+    state.pageBookmarks = pageBookmarks
+  },
+
+  upsertPageBookmarkToList(state, updatedPageBookmark) {
+    const i = state.pageBookmarks.findIndex((p) => {
+      return p.route === updatedPageBookmark.route
+    })
+
+    if (i === -1) {
+      state.pageBookmarks.push(updatedPageBookmark)
+    } else {
+      state.pageBookmarks.splice(i, 1, updatedPageBookmark)
+    }
+  },
+
+  removePageBookmarkFromList(state, pageBookmarkId) {
+    const i = state.pageBookmarks.findIndex((pageBookmark) => {
+      return pageBookmark.route === pageBookmarkId
+    })
+
+    state.pageBookmarks.splice(i, 1)
+  }
+}
+
+export default {
+  state,
+  getters,
+  actions,
+  mutations
+}
diff --git a/src/renderer/store/modules/utils.js b/src/renderer/store/modules/utils.js
index 8184395860a9..d9a1cee83c77 100644
--- a/src/renderer/store/modules/utils.js
+++ b/src/renderer/store/modules/utils.js
@@ -33,6 +33,7 @@ const state = {
   showProgressBar: false,
   showAddToPlaylistPrompt: false,
   showCreatePlaylistPrompt: false,
+  showPageBookmarkPrompt: false,
   progressBarPercentage: 0,
   toBeAddedToPlaylistVideoList: [],
   newPlaylistDefaultProperties: {},
@@ -102,6 +103,10 @@ const getters = {
     return state.showCreatePlaylistPrompt
   },
 
+  getShowPageBookmarkPrompt () {
+    return state.showPageBookmarkPrompt
+  },
+
   getToBeAddedToPlaylistVideoList () {
     return state.toBeAddedToPlaylistVideoList
   },
@@ -378,6 +383,14 @@ const actions = {
     commit('setShowCreatePlaylistPrompt', false)
   },
 
+  showPageBookmarkPrompt ({ commit }, data) {
+    commit('setShowPageBookmarkPrompt', true)
+  },
+
+  hidePageBookmarkPrompt ({ commit }) {
+    commit('setShowPageBookmarkPrompt', false)
+  },
+
   updateShowProgressBar ({ commit }, value) {
     commit('setShowProgressBar', value)
   },
@@ -839,6 +852,10 @@ const mutations = {
     state.showCreatePlaylistPrompt = payload
   },
 
+  setShowPageBookmarkPrompt (state, payload) {
+    state.showPageBookmarkPrompt = payload
+  },
+
   setToBeAddedToPlaylistVideoList (state, payload) {
     state.toBeAddedToPlaylistVideoList = payload
   },
diff --git a/static/locales/en-US.yaml b/static/locales/en-US.yaml
index 03eded27f8b2..6a8890a24c29 100644
--- a/static/locales/en-US.yaml
+++ b/static/locales/en-US.yaml
@@ -32,6 +32,11 @@ Forward: Forward
 Open New Window: Open New Window
 Go to page: Go to {page}
 Close Banner: Close Banner
+Bookmark this page: Bookmark this page
+Edit bookmark for this page: Edit bookmark for this page
+Save: Save
+Cancel: Cancel
+Name: Name
 
 Version {versionNumber} is now available!  Click for more details: Version {versionNumber} is now available!  Click
   for more details
@@ -1063,6 +1068,14 @@ Hashtag:
   Hashtag: Hashtag
   This hashtag does not currently have any videos: This hashtag does not currently
       have any videos
+Page Bookmark:
+  Bookmark this page: Bookmark this page
+  Create Bookmark: Create Bookmark
+  Edit Bookmark: Edit Bookmark
+  Remove Bookmark: Remove Bookmark
+  Created page bookmark: Created page bookmark "{bookmarkName}"
+  Updated page bookmark: Updated page bookmark "{bookmarkName}"
+  Removed page bookmark: Removed page bookmark "{bookmarkName}"
 Moments Ago: moments ago
 Yes: Yes
 No: No

From 808cadb0b94ccc1ff3fe3e93d603611a13acd8ef Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Mon, 22 Apr 2024 10:58:47 -0500
Subject: [PATCH 02/23] Update search results with matching bookmarks

---
 src/constants.js                              |  2 +-
 src/datastores/handlers/base.js               |  4 +--
 src/main/index.js                             |  8 ++---
 src/renderer/App.js                           |  2 ++
 src/renderer/components/ft-input/ft-input.css |  4 +++
 src/renderer/components/ft-input/ft-input.js  | 12 +++++--
 src/renderer/components/ft-input/ft-input.vue | 12 ++++---
 src/renderer/components/top-nav/top-nav.js    |  9 ++---
 src/renderer/components/top-nav/top-nav.vue   |  2 +-
 src/renderer/store/modules/search-history.js  | 36 ++++++++++++++++---
 10 files changed, 69 insertions(+), 22 deletions(-)

diff --git a/src/constants.js b/src/constants.js
index 282443998201..5c7f9ed469ee 100644
--- a/src/constants.js
+++ b/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',
diff --git a/src/datastores/handlers/base.js b/src/datastores/handlers/base.js
index 302a567f65fe..d715669cbe22 100644
--- a/src/datastores/handlers/base.js
+++ b/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() {
diff --git a/src/main/index.js b/src/main/index.js
index d364a5454db8..72ba556900df 100644
--- a/src/main/index.js
+++ b/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()
 
diff --git a/src/renderer/App.js b/src/renderer/App.js
index ffef75879d29..2abf4fd657a4 100644
--- a/src/renderer/App.js
+++ b/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',
diff --git a/src/renderer/components/ft-input/ft-input.css b/src/renderer/components/ft-input/ft-input.css
index e5f9a1704107..ba2d3dab50a4 100644
--- a/src/renderer/components/ft-input/ft-input.css
+++ b/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);
diff --git a/src/renderer/components/ft-input/ft-input.js b/src/renderer/components/ft-input/ft-input.js
index 9c3bfc1972e8..0e23e1809c71 100644
--- a/src/renderer/components/ft-input/ft-input.js
+++ b/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
       })
     },
diff --git a/src/renderer/components/ft-input/ft-input.vue b/src/renderer/components/ft-input/ft-input.vue
index c9a7c8523a14..a4e20f873aa4 100644
--- a/src/renderer/components/ft-input/ft-input.vue
+++ b/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>
diff --git a/src/renderer/components/top-nav/top-nav.js b/src/renderer/components/top-nav/top-nav.js
index 2164401d0661..998b93e20fee 100644
--- a/src/renderer/components/top-nav/top-nav.js
+++ b/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) {
diff --git a/src/renderer/components/top-nav/top-nav.vue b/src/renderer/components/top-nav/top-nav.vue
index ca18e97001f8..3f7f00af89da 100644
--- a/src/renderer/components/top-nav/top-nav.vue
+++ b/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"
diff --git a/src/renderer/store/modules/search-history.js b/src/renderer/store/modules/search-history.js
index 9ecf15bd056b..cb38fefceeb4 100644
--- a/src/renderer/store/modules/search-history.js
+++ b/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)

From a12c4ea894f7a499eaa6c0aa820baafee3e85308 Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Mon, 22 Apr 2024 19:00:23 -0500
Subject: [PATCH 03/23] Fix bookmark search result styling and keyboard
 interactions

---
 src/renderer/components/ft-input/ft-input.css | 12 +++++++++---
 src/renderer/components/ft-input/ft-input.js  | 16 ++++++++++------
 src/renderer/components/ft-input/ft-input.vue | 11 ++++++-----
 3 files changed, 25 insertions(+), 14 deletions(-)

diff --git a/src/renderer/components/ft-input/ft-input.css b/src/renderer/components/ft-input/ft-input.css
index ba2d3dab50a4..bda5b3dec4fd 100644
--- a/src/renderer/components/ft-input/ft-input.css
+++ b/src/renderer/components/ft-input/ft-input.css
@@ -205,9 +205,15 @@
   line-height: 2rem;
 }
 
-/* .list .li.bookmarked {
-  color: green;
-} */
+.list .bookmarked {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.bookmarkStarIcon {
+  color: var(--favorite-icon-color);
+}
 
 .hover {
   background-color: var(--scrollbar-color-hover);
diff --git a/src/renderer/components/ft-input/ft-input.js b/src/renderer/components/ft-input/ft-input.js
index 0e23e1809c71..dce55137c4e2 100644
--- a/src/renderer/components/ft-input/ft-input.js
+++ b/src/renderer/components/ft-input/ft-input.js
@@ -116,8 +116,7 @@ export default defineComponent({
 
     searchStateKeyboardSelectedOptionValue() {
       if (this.searchState.keyboardSelectedOptionIndex === -1) { return null }
-
-      return this.visibleDataList[this.searchState.keyboardSelectedOptionIndex]
+      return this.getTextForArrayAtIndex(this.visibleDataList, this.searchState.keyboardSelectedOptionIndex)
     },
   },
   watch: {
@@ -143,6 +142,9 @@ export default defineComponent({
     this.updateVisibleDataList()
   },
   methods: {
+    getTextForArrayAtIndex: function (array, index) {
+      return array[index].bookmarkName ?? array[index]
+    },
     handleClick: function (e) {
       // No action if no input text
       if (!this.inputDataPresent) {
@@ -231,9 +233,9 @@ export default defineComponent({
       }
     },
 
-    handleOptionClick: function (index, isBookmark) {
+    handleOptionClick: function (index) {
       this.searchState.showOptions = false
-      if (isBookmark) {
+      if (this.visibleDataList[index].route) {
         this.inputData = `ft:${this.visibleDataList[index].route}`
       } else {
         this.inputData = this.visibleDataList[index]
@@ -251,9 +253,11 @@ export default defineComponent({
         if (this.searchState.selectedOption !== -1) {
           this.searchState.showOptions = false
           event.preventDefault()
-          this.inputData = this.visibleDataList[this.searchState.selectedOption]
+          this.inputData = this.getTextForArrayAtIndex(this.visibleDataList, this.searchState.selectedOption)
+          this.handleOptionClick(this.searchState.selectedOption)
+        } else {
+          this.handleClick(event)
         }
-        this.handleClick(event)
         // Early return
         return
       }
diff --git a/src/renderer/components/ft-input/ft-input.vue b/src/renderer/components/ft-input/ft-input.vue
index a4e20f873aa4..6284e6909e5c 100644
--- a/src/renderer/components/ft-input/ft-input.vue
+++ b/src/renderer/components/ft-input/ft-input.vue
@@ -79,15 +79,16 @@
           v-for="(entry, index) in visibleDataList"
           :key="index"
           :class="{ hover: searchState.selectedOption === index , bookmarked: entry.bookmarkName }"
-          @click="handleOptionClick(index, entry.bookmarkName)"
+          @click="handleOptionClick(index)"
           @mouseenter="searchState.selectedOption = index"
           @mouseleave="searchState.selectedOption = -1"
         >
-          <!-- <font-awesome-icon
-            v-if="!!entry.bookmarkName"
-            :icon="['fas', 'star']"
-          /> -->
           {{ entry.bookmarkName ?? entry }}
+          <font-awesome-icon
+            v-if="entry.bookmarkName"
+            :icon="['fas', 'star']"
+            class="bookmarkStarIcon"
+          />
         </li>
         <!-- skipped -->
       </ul>

From a3057c606a8effa93017fae97f88a2463f0d39a9 Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Mon, 22 Apr 2024 19:14:18 -0500
Subject: [PATCH 04/23] Add 'Remove All Page Bookmarks' setting

---
 .../components/privacy-settings/privacy-settings.js | 13 +++++++++++++
 .../privacy-settings/privacy-settings.vue           | 13 +++++++++++++
 static/locales/en-US.yaml                           |  4 ++++
 3 files changed, 30 insertions(+)

diff --git a/src/renderer/components/privacy-settings/privacy-settings.js b/src/renderer/components/privacy-settings/privacy-settings.js
index 94ec93d8f8d1..d1b774e23ce9 100644
--- a/src/renderer/components/privacy-settings/privacy-settings.js
+++ b/src/renderer/components/privacy-settings/privacy-settings.js
@@ -23,6 +23,7 @@ export default defineComponent({
       showRemoveHistoryPrompt: false,
       showRemoveSubscriptionsPrompt: false,
       showRemovePlaylistsPrompt: false,
+      showRemovePageBookmarksPrompt: false,
       promptValues: [
         'yes',
         'no'
@@ -46,6 +47,9 @@ export default defineComponent({
     removeSubscriptionsPromptMessage: function () {
       return this.$t('Settings.Privacy Settings["Are you sure you want to remove all subscriptions and profiles?  This cannot be undone."]')
     },
+    removePageBookmarksPromptMessage: function () {
+      return this.$t('Settings.Privacy Settings["Are you sure you want to remove all page bookmarks?  This cannot be undone."]')
+    },
     promptNames: function () {
       return [
         this.$t('Yes'),
@@ -114,6 +118,14 @@ export default defineComponent({
       showToast(this.$t('Settings.Privacy Settings.All playlists have been removed'))
     },
 
+    handleRemovePageBookmarks: function (option) {
+      this.showRemovePageBookmarksPrompt = false
+      if (option !== 'yes') { return }
+
+      this.removeAllPageBookmarks()
+      showToast(this.$t('Settings.Privacy Settings.All page bookmarks have been removed'))
+    },
+
     ...mapActions([
       'updateRememberHistory',
       'removeAllHistory',
@@ -127,6 +139,7 @@ export default defineComponent({
       'updateAllSubscriptionsList',
       'updateProfileSubscriptions',
       'removeAllPlaylists',
+      'removeAllPageBookmarks',
       'updateQuickBookmarkTargetPlaylistId',
     ])
   }
diff --git a/src/renderer/components/privacy-settings/privacy-settings.vue b/src/renderer/components/privacy-settings/privacy-settings.vue
index 53f944777729..057dcbc4e172 100644
--- a/src/renderer/components/privacy-settings/privacy-settings.vue
+++ b/src/renderer/components/privacy-settings/privacy-settings.vue
@@ -56,6 +56,12 @@
         background-color="var(--primary-color)"
         @click="showRemovePlaylistsPrompt = true"
       />
+      <ft-button
+        :label="$t('Settings.Privacy Settings.Remove All Page Bookmarks')"
+        text-color="var(--text-with-main-color)"
+        background-color="var(--primary-color)"
+        @click="showRemovePageBookmarksPrompt = true"
+      />
     </ft-flex-box>
     <ft-prompt
       v-if="showSearchCachePrompt"
@@ -85,6 +91,13 @@
       :option-values="promptValues"
       @click="handleRemovePlaylists"
     />
+    <ft-prompt
+      v-if="showRemovePageBookmarksPrompt"
+      :label="removePageBookmarksPromptMessage"
+      :option-names="promptNames"
+      :option-values="promptValues"
+      @click="handleRemovePageBookmarks"
+    />
   </ft-settings-section>
 </template>
 
diff --git a/static/locales/en-US.yaml b/static/locales/en-US.yaml
index 6a8890a24c29..739f34034538 100644
--- a/static/locales/en-US.yaml
+++ b/static/locales/en-US.yaml
@@ -434,6 +434,10 @@ Settings:
     Remove All Playlists: Remove All Playlists
     All playlists have been removed: All playlists have been removed
     Are you sure you want to remove all your playlists?: Are you sure you want to remove all your playlists?
+    Remove All Page Bookmarks: Remove All Page Bookmarks
+    Are you sure you want to remove all page bookmarks?  This cannot be undone.: Are
+      you sure you want to remove all page bookmarks?  This cannot be undone.
+    All page bookmarks have been removed: All page bookmarks have been removed
   Subscription Settings:
     Subscription Settings: Subscription Settings
     Hide Videos on Watch: Hide Videos on Watch

From e60cd786e9741d10203088184fda0b460fb069eb Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Mon, 22 Apr 2024 19:55:41 -0500
Subject: [PATCH 05/23] Improve default bookmark names for Playlist and Search
 Results routes

---
 .../page-bookmark-prompt/page-bookmark-prompt.js    |  3 ++-
 .../page-bookmark-prompt/page-bookmark-prompt.vue   |  1 +
 .../components/playlist-info/playlist-info.vue      |  1 +
 src/renderer/helpers/strings.js                     | 13 +++++++++++++
 4 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/renderer/components/page-bookmark-prompt/page-bookmark-prompt.js b/src/renderer/components/page-bookmark-prompt/page-bookmark-prompt.js
index c0d2708a4c3b..0efa5997b823 100644
--- a/src/renderer/components/page-bookmark-prompt/page-bookmark-prompt.js
+++ b/src/renderer/components/page-bookmark-prompt/page-bookmark-prompt.js
@@ -5,6 +5,7 @@ import FtPrompt from '../ft-prompt/ft-prompt.vue'
 import FtButton from '../ft-button/ft-button.vue'
 import FtInput from '../../components/ft-input/ft-input.vue'
 import { showToast } from '../../helpers/utils'
+import { defaultBookmarkNameForRoute } from '../../helpers/strings'
 
 export default defineComponent({
   name: 'PageBookmarkPrompt',
@@ -35,7 +36,7 @@ export default defineComponent({
   },
   mounted: function () {
     nextTick(() => {
-      this.bookmarkName = this.pageBookmark?.bookmarkName ?? document.title
+      this.bookmarkName = this.pageBookmark?.bookmarkName ?? defaultBookmarkNameForRoute(this.$router.currentRoute)
       this.lastActiveElement = document.activeElement
       this.$refs.pageBookmarkNameInput.focus()
     })
diff --git a/src/renderer/components/page-bookmark-prompt/page-bookmark-prompt.vue b/src/renderer/components/page-bookmark-prompt/page-bookmark-prompt.vue
index d99e9238b38b..cf7e09073ef4 100644
--- a/src/renderer/components/page-bookmark-prompt/page-bookmark-prompt.vue
+++ b/src/renderer/components/page-bookmark-prompt/page-bookmark-prompt.vue
@@ -18,6 +18,7 @@
         :show-action-button="false"
         @input="e => bookmarkName = e"
         @clear="e => bookmarkName = ''"
+        @keydown.enter.native="save"
       />
     </div>
     <div class="actions-container">
diff --git a/src/renderer/components/playlist-info/playlist-info.vue b/src/renderer/components/playlist-info/playlist-info.vue
index f6f2683cd1a2..571c6acb269d 100644
--- a/src/renderer/components/playlist-info/playlist-info.vue
+++ b/src/renderer/components/playlist-info/playlist-info.vue
@@ -42,6 +42,7 @@
       />
       <h2
         v-else
+        id="playlistTitle"
         class="playlistTitle"
       >
         {{ title }}
diff --git a/src/renderer/helpers/strings.js b/src/renderer/helpers/strings.js
index 255630484253..382566547556 100644
--- a/src/renderer/helpers/strings.js
+++ b/src/renderer/helpers/strings.js
@@ -52,3 +52,16 @@ export function translateWindowTitle(title, i18n) {
       return null
   }
 }
+
+export function defaultBookmarkNameForRoute(route) {
+  switch (route.meta.title) {
+    case 'Playlist':
+      // Use the playlist name over 'Playlist - FreeTube'
+      return document.getElementById('playlistTitle')?.innerHTML.trim() ?? document.title
+    case 'Search Results':
+      // Use the inputted search query over 'Search Results - FreeTube'
+      return route.params.query
+    default:
+      return document.title
+  }
+}

From c254875e2e8e167a69c2cf51754d7c85836083f1 Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Mon, 22 Apr 2024 20:02:36 -0500
Subject: [PATCH 06/23] Fix bookmark searching logic

---
 src/renderer/components/top-nav/top-nav.js   | 2 +-
 src/renderer/store/modules/search-history.js | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/renderer/components/top-nav/top-nav.js b/src/renderer/components/top-nav/top-nav.js
index 998b93e20fee..9903f44265f1 100644
--- a/src/renderer/components/top-nav/top-nav.js
+++ b/src/renderer/components/top-nav/top-nav.js
@@ -102,7 +102,7 @@ export default defineComponent({
     },
 
     matchingBookmarksDataList: function () {
-      return this.$store.getters.getPageBookmarksWithRouteSubstring(this.lastSuggestionQuery, this.currentRouteFullPath)
+      return this.$store.getters.getPageBookmarksMatchingQuery(this.lastSuggestionQuery, this.currentRouteFullPath)
     },
 
     pageBookmarkIconTitle: function () {
diff --git a/src/renderer/store/modules/search-history.js b/src/renderer/store/modules/search-history.js
index cb38fefceeb4..2a5794ddf9b8 100644
--- a/src/renderer/store/modules/search-history.js
+++ b/src/renderer/store/modules/search-history.js
@@ -14,13 +14,13 @@ const getters = {
     return pageBookmark
   },
 
-  getPageBookmarksWithRouteSubstring: (state) => (routeSubstring, routeToExclude) => {
-    if (routeSubstring === '') {
+  getPageBookmarksMatchingQuery: (state) => (query, routeToExclude) => {
+    if (query === '') {
       return []
     }
-    const routeSubstringToLower = routeSubstring.toLowerCase()
+    const queryToLower = query.toLowerCase()
     const pageBookmarks = state.pageBookmarks.filter((pageBookmark) =>
-      pageBookmark && pageBookmark.route.toLowerCase().includes(routeSubstringToLower) && pageBookmark.route !== routeToExclude
+      pageBookmark && pageBookmark.bookmarkName.toLowerCase().includes(queryToLower) && pageBookmark.route !== routeToExclude
     )
     return pageBookmarks
   }

From 871e3307fc193472b27f6bb480bfdaa491d14169 Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Mon, 22 Apr 2024 20:45:55 -0500
Subject: [PATCH 07/23] Update bookmark icon color to use secondary colors when
 top nav is colored

---
 src/renderer/components/top-nav/top-nav.scss | 10 ++++++++--
 src/renderer/components/top-nav/top-nav.vue  |  3 ++-
 src/renderer/themes.css                      | 13 +------------
 3 files changed, 11 insertions(+), 15 deletions(-)

diff --git a/src/renderer/components/top-nav/top-nav.scss b/src/renderer/components/top-nav/top-nav.scss
index 2568e2842c2e..80b6e2fdc680 100644
--- a/src/renderer/components/top-nav/top-nav.scss
+++ b/src/renderer/components/top-nav/top-nav.scss
@@ -102,8 +102,14 @@
   }
 }
 
-.bookmarkedPageIcon.favorite {
-  color: var(--favorite-icon-color);
+.pageBookmarkIcon {
+  &.favorite {
+    color: var(--favorite-icon-color);
+
+    @include top-nav-is-colored {
+      color: var(--accent-color);
+    }
+  }
 }
 
 .side {
diff --git a/src/renderer/components/top-nav/top-nav.vue b/src/renderer/components/top-nav/top-nav.vue
index 3f7f00af89da..5ad3176c9284 100644
--- a/src/renderer/components/top-nav/top-nav.vue
+++ b/src/renderer/components/top-nav/top-nav.vue
@@ -108,9 +108,10 @@
       />
     </div>
     <font-awesome-icon
-      class="bookmarkedPageIcon navIcon"
+      class="pageBookmarkIcon navIcon"
       :icon="['fas', 'star']"
       :title="pageBookmarkIconTitle"
+      :active="isPageBookmarked"
       :class="{ [pageBookmarkIconTheme]: true }"
       role="button"
       tabindex="0"
diff --git a/src/renderer/themes.css b/src/renderer/themes.css
index 16f35ae590fa..418a279a214e 100644
--- a/src/renderer/themes.css
+++ b/src/renderer/themes.css
@@ -8,6 +8,7 @@
 .hotPink,
 .nordic {
   --primary-input-color: rgb(0 0 0 / 50%);
+  --side-nav-hover-text-color: var(--primary-text-color);
 }
 
 .system[data-system-theme*='light'], .light,
@@ -23,18 +24,6 @@
   --instance-menu-color: var(--search-bar-color);
 }
 
-.system[data-system-theme*='light'], .light,
-.system[data-system-theme*='dark'], .dark,
-.black,
-.gray,
-.dracula,
-.catppuccinMocha,
-.pastelPink,
-.nordic {
-  --primary-input-color: rgb(0 0 0 / 50%);
-  --side-nav-hover-text-color: var(--primary-text-color);
-}
-
 .system[data-system-theme*='light'], .light,
 .system[data-system-theme*='dark'], .dark,
 .black,

From f7b8f1ab5561a191b8791ea2d8b0a090718986f2 Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Mon, 22 Apr 2024 21:02:44 -0500
Subject: [PATCH 08/23] Add aria-roledescription for page bookmark search
 results

---
 src/renderer/components/ft-input/ft-input.vue | 1 +
 static/locales/en-US.yaml                     | 2 ++
 2 files changed, 3 insertions(+)

diff --git a/src/renderer/components/ft-input/ft-input.vue b/src/renderer/components/ft-input/ft-input.vue
index 6284e6909e5c..c7fbbe808c10 100644
--- a/src/renderer/components/ft-input/ft-input.vue
+++ b/src/renderer/components/ft-input/ft-input.vue
@@ -79,6 +79,7 @@
           v-for="(entry, index) in visibleDataList"
           :key="index"
           :class="{ hover: searchState.selectedOption === index , bookmarked: entry.bookmarkName }"
+          :aria-roledescription="entry.bookmarkName ? $t('Role Descriptions.bookmark') : null"
           @click="handleOptionClick(index)"
           @mouseenter="searchState.selectedOption = index"
           @mouseleave="searchState.selectedOption = -1"
diff --git a/static/locales/en-US.yaml b/static/locales/en-US.yaml
index 739f34034538..be803d0a3cfc 100644
--- a/static/locales/en-US.yaml
+++ b/static/locales/en-US.yaml
@@ -1080,6 +1080,8 @@ Page Bookmark:
   Created page bookmark: Created page bookmark "{bookmarkName}"
   Updated page bookmark: Updated page bookmark "{bookmarkName}"
   Removed page bookmark: Removed page bookmark "{bookmarkName}"
+Role Descriptions:
+  bookmark: bookmark
 Moments Ago: moments ago
 Yes: Yes
 No: No

From 0572d33cd29d92d3ef830768c86fbf54ecc7f0ef Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Mon, 22 Apr 2024 21:52:52 -0500
Subject: [PATCH 09/23] Fix deletion call and disable bookmark icon while data
 is being loaded in

---
 src/datastores/handlers/base.js               |  4 +--
 src/datastores/handlers/electron.js           |  4 +--
 src/datastores/handlers/web.js                |  4 +--
 src/renderer/App.js                           | 15 +++++++++--
 src/renderer/App.vue                          |  6 ++++-
 .../page-bookmark-prompt.js                   |  2 +-
 src/renderer/components/top-nav/top-nav.js    | 25 ++++++++-----------
 src/renderer/components/top-nav/top-nav.vue   |  5 ++--
 src/renderer/store/modules/search-history.js  |  2 +-
 9 files changed, 40 insertions(+), 27 deletions(-)

diff --git a/src/datastores/handlers/base.js b/src/datastores/handlers/base.js
index d715669cbe22..3e6d73cfa046 100644
--- a/src/datastores/handlers/base.js
+++ b/src/datastores/handlers/base.js
@@ -196,8 +196,8 @@ class SearchHistory {
     return db.searchHistory.updateAsync({ _id: pageBookmark._id }, pageBookmark, { upsert: true })
   }
 
-  static delete(route) {
-    return db.searchHistory.removeAsync({ route: route })
+  static delete(_id) {
+    return db.searchHistory.removeAsync({ _id: _id })
   }
 
   static deleteAll() {
diff --git a/src/datastores/handlers/electron.js b/src/datastores/handlers/electron.js
index f4a4536580c1..38e245ad4a48 100644
--- a/src/datastores/handlers/electron.js
+++ b/src/datastores/handlers/electron.js
@@ -227,10 +227,10 @@ class SearchHistory {
     )
   }
 
-  static delete(route) {
+  static delete(_id) {
     return ipcRenderer.invoke(
       IpcChannels.DB_SEARCH_HISTORY,
-      { action: DBActions.GENERAL.DELETE, data: route }
+      { action: DBActions.GENERAL.DELETE, data: _id }
     )
   }
 
diff --git a/src/datastores/handlers/web.js b/src/datastores/handlers/web.js
index 8685220cf290..122f9a67d288 100644
--- a/src/datastores/handlers/web.js
+++ b/src/datastores/handlers/web.js
@@ -131,8 +131,8 @@ class SearchHistory {
     return baseHandlers.searchHistory.upsert(pageBookmark)
   }
 
-  static delete(route) {
-    return baseHandlers.searchHistory.delete(route)
+  static delete(_id) {
+    return baseHandlers.searchHistory.delete(_id)
   }
 
   static deleteAll() {
diff --git a/src/renderer/App.js b/src/renderer/App.js
index 2abf4fd657a4..157eb9dbdd75 100644
--- a/src/renderer/App.js
+++ b/src/renderer/App.js
@@ -43,11 +43,13 @@ export default defineComponent({
       showUpdatesBanner: false,
       showBlogBanner: false,
       showReleaseNotes: false,
+      pageBookmarksAvailable: false,
       updateBannerMessage: '',
       blogBannerMessage: '',
       latestBlogUrl: '',
       updateChangelog: '',
       changeLogTitle: '',
+      currentRouteFullPath: '',
       lastExternalLinkToBeOpened: '',
       showExternalLinkOpeningPrompt: false,
       externalLinkOpeningPromptValues: [
@@ -136,7 +138,11 @@ export default defineComponent({
 
     externalLinkHandling: function () {
       return this.$store.getters.getExternalLinkHandling
-    }
+    },
+
+    // pageBookmark: function () {
+    //   return this.pageBookmarksAvailable ? $this.store.getters.get
+    // }
   },
   watch: {
     windowTitle: 'setWindowTitle',
@@ -171,8 +177,10 @@ export default defineComponent({
 
       this.grabAllProfiles(this.$t('Profile.All Channels')).then(async () => {
         this.grabHistory()
-        this.grabPageBookmarks()
         this.grabAllPlaylists()
+        this.grabPageBookmarks().then(async () => {
+          this.pageBookmarksAvailable = true
+        })
 
         if (process.env.IS_ELECTRON) {
           ipcRenderer = require('electron').ipcRenderer
@@ -196,12 +204,15 @@ export default defineComponent({
 
       this.$router.afterEach((to, from) => {
         this.$refs.topNav?.navigateHistory()
+        this.currentRouteFullPath = to.fullPath
       })
 
       this.$router.onReady(() => {
         if (this.$router.currentRoute.path === '/') {
           this.$router.replace({ path: this.landingPage })
         }
+
+        this.currentRouteFullPath = this.$router.currentRoute.fullPath
       })
     })
   },
diff --git a/src/renderer/App.vue b/src/renderer/App.vue
index 54326b8b4e8c..36a57818cc75 100644
--- a/src/renderer/App.vue
+++ b/src/renderer/App.vue
@@ -8,7 +8,11 @@
       isLocaleRightToLeft: isLocaleRightToLeft
     }"
   >
-    <top-nav ref="topNav" />
+    <top-nav
+      ref="topNav"
+      :current-route-full-path="currentRouteFullPath"
+      :page-bookmarks-available="pageBookmarksAvailable"
+    />
     <side-nav ref="sideNav" />
     <ft-flex-box
       class="flexBox routerView"
diff --git a/src/renderer/components/page-bookmark-prompt/page-bookmark-prompt.js b/src/renderer/components/page-bookmark-prompt/page-bookmark-prompt.js
index 0efa5997b823..72b922de11a9 100644
--- a/src/renderer/components/page-bookmark-prompt/page-bookmark-prompt.js
+++ b/src/renderer/components/page-bookmark-prompt/page-bookmark-prompt.js
@@ -57,7 +57,7 @@ export default defineComponent({
     },
 
     removeBookmark: function () {
-      this.removePageBookmark(this.page)
+      this.removePageBookmark(this.pageBookmark)
       showToast(this.$t('Page Bookmark.Removed page bookmark', { bookmarkName: this.bookmarkName }))
     },
 
diff --git a/src/renderer/components/top-nav/top-nav.js b/src/renderer/components/top-nav/top-nav.js
index 9903f44265f1..9dc4a820cee3 100644
--- a/src/renderer/components/top-nav/top-nav.js
+++ b/src/renderer/components/top-nav/top-nav.js
@@ -18,10 +18,19 @@ export default defineComponent({
     FtSearchFilters,
     FtProfileSelector
   },
+  props: {
+    currentRouteFullPath: {
+      type: String,
+      default: ''
+    },
+    pageBookmarksAvailable: {
+      type: Boolean,
+      default: false
+    }
+  },
   data: () => {
     return {
       component: this,
-      currentRouteFullPath: '',
       showSearchContainer: true,
       showFilters: false,
       searchFilterValueChanged: false,
@@ -98,7 +107,7 @@ export default defineComponent({
     },
 
     isPageBookmarked: function () {
-      return this.$store.getters.getPageBookmarkWithRoute(this.currentRouteFullPath) != null
+      return this.pageBookmarksAvailable && this.$store.getters.getPageBookmarkWithRoute(this.currentRouteFullPath) != null
     },
 
     matchingBookmarksDataList: function () {
@@ -113,18 +122,11 @@ export default defineComponent({
       return this.isPageBookmarked ? 'base favorite' : 'base'
     }
   },
-  watch: {
-    $route (to, from) {
-      this.currentRouteFullPath = to.fullPath
-    }
-  },
   mounted: function () {
     let previousWidth = window.innerWidth
     if (window.innerWidth <= 680) {
       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) {
@@ -394,11 +396,6 @@ export default defineComponent({
     updateSearchInputText: function (text) {
       this.$refs.searchInput.updateInputData(text)
     },
-    openPageBookmarkPrompt: function () {
-      // if (!this.isPageBookmarked) {
-      // }
-      this.showPageBookmarkPrompt()
-    },
     ...mapActions([
       'getYoutubeUrlInfo',
       'showPageBookmarkPrompt'
diff --git a/src/renderer/components/top-nav/top-nav.vue b/src/renderer/components/top-nav/top-nav.vue
index 5ad3176c9284..52b2a6ca37ab 100644
--- a/src/renderer/components/top-nav/top-nav.vue
+++ b/src/renderer/components/top-nav/top-nav.vue
@@ -113,10 +113,11 @@
       :title="pageBookmarkIconTitle"
       :active="isPageBookmarked"
       :class="{ [pageBookmarkIconTheme]: true }"
+      :disabled="!pageBookmarksAvailable"
       role="button"
       tabindex="0"
-      @click="openPageBookmarkPrompt"
-      @keydown.enter.prevent="openPageBookmarkPrompt"
+      @click="showPageBookmarkPrompt"
+      @keydown.enter.prevent="showPageBookmarkPrompt"
     />
     <ft-profile-selector class="side profiles" />
   </div>
diff --git a/src/renderer/store/modules/search-history.js b/src/renderer/store/modules/search-history.js
index 2a5794ddf9b8..2d1e35c660b8 100644
--- a/src/renderer/store/modules/search-history.js
+++ b/src/renderer/store/modules/search-history.js
@@ -55,7 +55,7 @@ const actions = {
 
   async removePageBookmark({ commit }, route) {
     try {
-      await DBSearchHistoryHandlers.delete(route)
+      await DBSearchHistoryHandlers.delete(route._id)
       commit('removePageBookmarkFromList', route)
     } catch (errMessage) {
       console.error(errMessage)

From 88ec2a82cb8a28269eb8513d5e4a21bb8e447b24 Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Mon, 22 Apr 2024 22:21:38 -0500
Subject: [PATCH 10/23] Fix bookmark search results when search suggestions are
 disabled

---
 src/renderer/components/ft-input/ft-input.js |  1 -
 src/renderer/components/top-nav/top-nav.js   | 13 ++++++++-----
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/renderer/components/ft-input/ft-input.js b/src/renderer/components/ft-input/ft-input.js
index dce55137c4e2..1e6c48698d46 100644
--- a/src/renderer/components/ft-input/ft-input.js
+++ b/src/renderer/components/ft-input/ft-input.js
@@ -303,7 +303,6 @@ export default defineComponent({
     },
 
     updateVisibleDataList: function () {
-      if (this.dataList.length === 0) { return }
       // Reset selected option before it's updated
       this.searchState.selectedOption = -1
       this.searchState.keyboardSelectedOptionIndex = -1
diff --git a/src/renderer/components/top-nav/top-nav.js b/src/renderer/components/top-nav/top-nav.js
index 9dc4a820cee3..b3b4833ecce0 100644
--- a/src/renderer/components/top-nav/top-nav.js
+++ b/src/renderer/components/top-nav/top-nav.js
@@ -271,12 +271,15 @@ export default defineComponent({
     },
 
     getSearchSuggestionsDebounce: function (query) {
+      const trimmedQuery = query.trim()
+      if (trimmedQuery === this.lastSuggestionQuery) {
+        return
+      }
+
+      this.lastSuggestionQuery = trimmedQuery
+
       if (this.enableSearchSuggestions) {
-        const trimmedQuery = query.trim()
-        if (trimmedQuery !== this.lastSuggestionQuery) {
-          this.lastSuggestionQuery = trimmedQuery
-          this.debounceSearchResults(trimmedQuery)
-        }
+        this.debounceSearchResults(trimmedQuery)
       }
     },
 

From 7896b7b79e9359b6364e032dd4a5fbc875908f3b Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Mon, 22 Apr 2024 22:42:08 -0500
Subject: [PATCH 11/23] Modify bookmark result star icon opacity

Reduces chance that the star is seen as a button or control.
---
 src/renderer/App.js                           | 4 ----
 src/renderer/components/ft-input/ft-input.css | 1 +
 2 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/renderer/App.js b/src/renderer/App.js
index 157eb9dbdd75..cc95d6612e57 100644
--- a/src/renderer/App.js
+++ b/src/renderer/App.js
@@ -139,10 +139,6 @@ export default defineComponent({
     externalLinkHandling: function () {
       return this.$store.getters.getExternalLinkHandling
     },
-
-    // pageBookmark: function () {
-    //   return this.pageBookmarksAvailable ? $this.store.getters.get
-    // }
   },
   watch: {
     windowTitle: 'setWindowTitle',
diff --git a/src/renderer/components/ft-input/ft-input.css b/src/renderer/components/ft-input/ft-input.css
index bda5b3dec4fd..9ad1b47ee927 100644
--- a/src/renderer/components/ft-input/ft-input.css
+++ b/src/renderer/components/ft-input/ft-input.css
@@ -213,6 +213,7 @@
 
 .bookmarkStarIcon {
   color: var(--favorite-icon-color);
+  opacity: 0.6;
 }
 
 .hover {

From 392fa75a871c949edbda42b57eab9e80fef191bb Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Tue, 23 Apr 2024 13:41:32 -0500
Subject: [PATCH 12/23] Implement changes to make work re-usable for saving
 generic search history

---
 src/renderer/components/ft-input/ft-input.js      |  6 +++---
 src/renderer/components/ft-input/ft-input.vue     |  8 ++++----
 .../page-bookmark-prompt/page-bookmark-prompt.js  | 15 ++++++++-------
 .../page-bookmark-prompt/page-bookmark-prompt.vue |  8 ++++----
 src/renderer/store/modules/search-history.js      |  2 +-
 static/locales/en-US.yaml                         |  6 +++---
 6 files changed, 23 insertions(+), 22 deletions(-)

diff --git a/src/renderer/components/ft-input/ft-input.js b/src/renderer/components/ft-input/ft-input.js
index 1e6c48698d46..f05e0fdbdd6f 100644
--- a/src/renderer/components/ft-input/ft-input.js
+++ b/src/renderer/components/ft-input/ft-input.js
@@ -143,7 +143,7 @@ export default defineComponent({
   },
   methods: {
     getTextForArrayAtIndex: function (array, index) {
-      return array[index].bookmarkName ?? array[index]
+      return array[index].name ?? array[index]
     },
     handleClick: function (e) {
       // No action if no input text
@@ -314,8 +314,8 @@ export default defineComponent({
       const lowerCaseInputData = this.inputData.toLowerCase()
 
       this.visibleDataList = this.dataList.filter(x => {
-        if (x.bookmarkName) {
-          return x.bookmarkName.toLowerCase().indexOf(lowerCaseInputData) !== -1
+        if (x.name) {
+          return x.name.toLowerCase().indexOf(lowerCaseInputData) !== -1
         }
 
         return x.toLowerCase().indexOf(lowerCaseInputData) !== -1
diff --git a/src/renderer/components/ft-input/ft-input.vue b/src/renderer/components/ft-input/ft-input.vue
index c7fbbe808c10..dd77ff59e65f 100644
--- a/src/renderer/components/ft-input/ft-input.vue
+++ b/src/renderer/components/ft-input/ft-input.vue
@@ -78,15 +78,15 @@
         <li
           v-for="(entry, index) in visibleDataList"
           :key="index"
-          :class="{ hover: searchState.selectedOption === index , bookmarked: entry.bookmarkName }"
-          :aria-roledescription="entry.bookmarkName ? $t('Role Descriptions.bookmark') : null"
+          :class="{ hover: searchState.selectedOption === index , bookmarked: entry.isBookmark }"
+          :aria-roledescription="entry.isBookmark ? $t('Role Descriptions.bookmark') : null"
           @click="handleOptionClick(index)"
           @mouseenter="searchState.selectedOption = index"
           @mouseleave="searchState.selectedOption = -1"
         >
-          {{ entry.bookmarkName ?? entry }}
+          {{ entry.name ?? entry }}
           <font-awesome-icon
-            v-if="entry.bookmarkName"
+            v-if="entry.isBookmark"
             :icon="['fas', 'star']"
             class="bookmarkStarIcon"
           />
diff --git a/src/renderer/components/page-bookmark-prompt/page-bookmark-prompt.js b/src/renderer/components/page-bookmark-prompt/page-bookmark-prompt.js
index 72b922de11a9..5eed27dc312c 100644
--- a/src/renderer/components/page-bookmark-prompt/page-bookmark-prompt.js
+++ b/src/renderer/components/page-bookmark-prompt/page-bookmark-prompt.js
@@ -17,7 +17,7 @@ export default defineComponent({
   },
   data: function () {
     return {
-      bookmarkName: ''
+      name: ''
     }
   },
   computed: {
@@ -36,7 +36,7 @@ export default defineComponent({
   },
   mounted: function () {
     nextTick(() => {
-      this.bookmarkName = this.pageBookmark?.bookmarkName ?? defaultBookmarkNameForRoute(this.$router.currentRoute)
+      this.name = this.pageBookmark?.name ?? defaultBookmarkNameForRoute(this.$router.currentRoute)
       this.lastActiveElement = document.activeElement
       this.$refs.pageBookmarkNameInput.focus()
     })
@@ -58,21 +58,22 @@ export default defineComponent({
 
     removeBookmark: function () {
       this.removePageBookmark(this.pageBookmark)
-      showToast(this.$t('Page Bookmark.Removed page bookmark', { bookmarkName: this.bookmarkName }))
+      showToast(this.$t('Page Bookmark.Removed page bookmark', { name: this.name }))
     },
 
     save: function () {
       const pageBookmark = {
         route: this.$router.currentRoute.fullPath,
-        bookmarkName: this.bookmarkName
+        name: this.name,
+        isBookmark: true
       }
 
       if (this.isBookmarkBeingCreated) {
         this.createPageBookmark(pageBookmark)
-        showToast(this.$t('Page Bookmark.Created page bookmark', { bookmarkName: this.bookmarkName }))
-      } else if (this.pageBookmark.bookmarkName !== pageBookmark.bookmarkName) {
+        showToast(this.$t('Page Bookmark.Created page bookmark', { name: this.name }))
+      } else if (this.pageBookmark.name !== pageBookmark.name) {
         this.updatePageBookmark(pageBookmark)
-        showToast(this.$t('Page Bookmark.Updated page bookmark', { bookmarkName: this.bookmarkName }))
+        showToast(this.$t('Page Bookmark.Updated page bookmark', { name: this.name }))
       }
 
       this.hide()
diff --git a/src/renderer/components/page-bookmark-prompt/page-bookmark-prompt.vue b/src/renderer/components/page-bookmark-prompt/page-bookmark-prompt.vue
index cf7e09073ef4..3f39e1a749bf 100644
--- a/src/renderer/components/page-bookmark-prompt/page-bookmark-prompt.vue
+++ b/src/renderer/components/page-bookmark-prompt/page-bookmark-prompt.vue
@@ -13,11 +13,11 @@
         ref="pageBookmarkNameInput"
         class="pageBookmarkNameInput"
         :placeholder="$t('Name')"
-        :value="bookmarkName"
+        :value="name"
         :show-clear-text-button="true"
         :show-action-button="false"
-        @input="e => bookmarkName = e"
-        @clear="e => bookmarkName = ''"
+        @input="e => name = e"
+        @clear="e => name = ''"
         @keydown.enter.native="save"
       />
     </div>
@@ -29,7 +29,7 @@
         />
         <ft-button
           :label="$t('Save')"
-          :disabled="bookmarkName === ''"
+          :disabled="name === ''"
           @click="save"
         />
       </ft-flex-box>
diff --git a/src/renderer/store/modules/search-history.js b/src/renderer/store/modules/search-history.js
index 2d1e35c660b8..fa05d5541cbb 100644
--- a/src/renderer/store/modules/search-history.js
+++ b/src/renderer/store/modules/search-history.js
@@ -20,7 +20,7 @@ const getters = {
     }
     const queryToLower = query.toLowerCase()
     const pageBookmarks = state.pageBookmarks.filter((pageBookmark) =>
-      pageBookmark && pageBookmark.bookmarkName.toLowerCase().includes(queryToLower) && pageBookmark.route !== routeToExclude
+      pageBookmark && pageBookmark.name.toLowerCase().includes(queryToLower) && pageBookmark.route !== routeToExclude
     )
     return pageBookmarks
   }
diff --git a/static/locales/en-US.yaml b/static/locales/en-US.yaml
index be803d0a3cfc..4aa43df188c1 100644
--- a/static/locales/en-US.yaml
+++ b/static/locales/en-US.yaml
@@ -1077,9 +1077,9 @@ Page Bookmark:
   Create Bookmark: Create Bookmark
   Edit Bookmark: Edit Bookmark
   Remove Bookmark: Remove Bookmark
-  Created page bookmark: Created page bookmark "{bookmarkName}"
-  Updated page bookmark: Updated page bookmark "{bookmarkName}"
-  Removed page bookmark: Removed page bookmark "{bookmarkName}"
+  Created page bookmark: Created page bookmark "{name}"
+  Updated page bookmark: Updated page bookmark "{name}"
+  Removed page bookmark: Removed page bookmark "{name}"
 Role Descriptions:
   bookmark: bookmark
 Moments Ago: moments ago

From 709caef69974c54f4261a4fe48d0c818db60c13a Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Thu, 2 May 2024 20:51:00 -0500
Subject: [PATCH 13/23] Update styling of search results

---
 src/renderer/components/ft-input/ft-input.css | 14 +++++++-------
 src/renderer/components/ft-input/ft-input.vue |  9 +++++++--
 2 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/src/renderer/components/ft-input/ft-input.css b/src/renderer/components/ft-input/ft-input.css
index 9ad1b47ee927..b97b6380e560 100644
--- a/src/renderer/components/ft-input/ft-input.css
+++ b/src/renderer/components/ft-input/ft-input.css
@@ -201,19 +201,19 @@
 .list li {
   display: block;
   padding-block: 0;
-  padding-inline: 15px;
   line-height: 2rem;
-}
-
-.list .bookmarked {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
+  padding-inline: 15px;
 }
 
 .bookmarkStarIcon {
   color: var(--favorite-icon-color);
+}
+
+.searchResultIcon {
   opacity: 0.6;
+  padding-inline-end: 10px;
+  inline-size: 16px;
+  block-size: 16px;
 }
 
 .hover {
diff --git a/src/renderer/components/ft-input/ft-input.vue b/src/renderer/components/ft-input/ft-input.vue
index dd77ff59e65f..0626950ea169 100644
--- a/src/renderer/components/ft-input/ft-input.vue
+++ b/src/renderer/components/ft-input/ft-input.vue
@@ -84,12 +84,17 @@
           @mouseenter="searchState.selectedOption = index"
           @mouseleave="searchState.selectedOption = -1"
         >
-          {{ entry.name ?? entry }}
           <font-awesome-icon
             v-if="entry.isBookmark"
             :icon="['fas', 'star']"
-            class="bookmarkStarIcon"
+            class="searchResultIcon bookmarkStarIcon"
+          />
+          <font-awesome-icon
+            v-else-if="isSearch"
+            :icon="['fas', 'magnifying-glass']"
+            class="searchResultIcon"
           />
+          {{ entry.name ?? entry }}
         </li>
         <!-- skipped -->
       </ul>

From ede347a2d8e91c06a412e43d1f9d5e5a175d0f48 Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Tue, 4 Jun 2024 00:32:23 -0500
Subject: [PATCH 14/23] Fix page bookmark removal function call to pass the
 route, not the full bookmark

---
 .../components/page-bookmark-prompt/page-bookmark-prompt.js     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/renderer/components/page-bookmark-prompt/page-bookmark-prompt.js b/src/renderer/components/page-bookmark-prompt/page-bookmark-prompt.js
index ebe07201beb8..d9e0f80c63d5 100644
--- a/src/renderer/components/page-bookmark-prompt/page-bookmark-prompt.js
+++ b/src/renderer/components/page-bookmark-prompt/page-bookmark-prompt.js
@@ -43,7 +43,7 @@ export default defineComponent({
     },
 
     removeBookmark: function () {
-      this.removePageBookmark(this.pageBookmark)
+      this.removePageBookmark(this.pageBookmark.route)
       showToast(this.$t('Page Bookmark.Removed page bookmark', { name: this.name }))
       this.hide()
     },

From 7f6a4ad340d76daaf11a387734db9adffd1f87b4 Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Tue, 11 Jun 2024 08:34:21 -0500
Subject: [PATCH 15/23] Add search history sync logic

---
 .../page-bookmark-prompt.js                   |  2 +-
 src/renderer/store/modules/search-history.js  | 10 +++++-----
 src/renderer/store/modules/settings.js        | 19 +++++++++++++++++++
 3 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/src/renderer/components/page-bookmark-prompt/page-bookmark-prompt.js b/src/renderer/components/page-bookmark-prompt/page-bookmark-prompt.js
index d9e0f80c63d5..164aebd991dd 100644
--- a/src/renderer/components/page-bookmark-prompt/page-bookmark-prompt.js
+++ b/src/renderer/components/page-bookmark-prompt/page-bookmark-prompt.js
@@ -43,7 +43,7 @@ export default defineComponent({
     },
 
     removeBookmark: function () {
-      this.removePageBookmark(this.pageBookmark.route)
+      this.removePageBookmark(this.pageBookmark._id)
       showToast(this.$t('Page Bookmark.Removed page bookmark', { name: this.name }))
       this.hide()
     },
diff --git a/src/renderer/store/modules/search-history.js b/src/renderer/store/modules/search-history.js
index 82bde119f340..872b2191a645 100644
--- a/src/renderer/store/modules/search-history.js
+++ b/src/renderer/store/modules/search-history.js
@@ -53,10 +53,10 @@ const actions = {
     }
   },
 
-  async removePageBookmark({ commit }, route) {
+  async removePageBookmark({ commit }, _id) {
     try {
-      await DBSearchHistoryHandlers.delete(route._id)
-      commit('removePageBookmarkFromList', route)
+      await DBSearchHistoryHandlers.delete(_id)
+      commit('removePageBookmarkFromList', _id)
     } catch (errMessage) {
       console.error(errMessage)
     }
@@ -93,9 +93,9 @@ const mutations = {
     }
   },
 
-  removePageBookmarkFromList(state, route) {
+  removePageBookmarkFromList(state, _id) {
     const i = state.pageBookmarks.findIndex((pageBookmark) => {
-      return pageBookmark.route === route
+      return pageBookmark._id === _id
     })
 
     state.pageBookmarks.splice(i, 1)
diff --git a/src/renderer/store/modules/settings.js b/src/renderer/store/modules/settings.js
index 0e81afa7d950..be738763b8fc 100644
--- a/src/renderer/store/modules/settings.js
+++ b/src/renderer/store/modules/settings.js
@@ -520,6 +520,25 @@ const customActions = {
         }
       })
 
+      ipcRenderer.on(IpcChannels.SYNC_SEARCH_HISTORY, (_, { event, data }) => {
+        switch (event) {
+          case SyncEvents.GENERAL.CREATE:
+            commit('addPageBookmarkToList', data)
+            break
+
+          case SyncEvents.GENERAL.UPSERT:
+            commit('upsertPageBookmarkToList', data)
+            break
+
+          case SyncEvents.GENERAL.DELETE:
+            commit('removePageBookmarkFromList', data)
+            break
+
+          default:
+            console.error('search history: invalid sync event received')
+        }
+      })
+
       ipcRenderer.on(IpcChannels.SYNC_PROFILES, (_, { event, data }) => {
         switch (event) {
           case SyncEvents.GENERAL.CREATE:

From 33d2d50017327de40dd709a67a691979a6012095 Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Tue, 11 Jun 2024 08:47:46 -0500
Subject: [PATCH 16/23] Have 'Cancel' button appear for already bookmarked page
 case

---
 .../page-bookmark-prompt.vue                    | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/src/renderer/components/page-bookmark-prompt/page-bookmark-prompt.vue b/src/renderer/components/page-bookmark-prompt/page-bookmark-prompt.vue
index f8edecb6b8b3..20ddbe199e82 100644
--- a/src/renderer/components/page-bookmark-prompt/page-bookmark-prompt.vue
+++ b/src/renderer/components/page-bookmark-prompt/page-bookmark-prompt.vue
@@ -23,6 +23,14 @@
     </div>
     <div class="actions-container">
       <ft-flex-box>
+        <ft-button
+          v-if="!isBookmarkBeingCreated"
+          :label="$t('Page Bookmark.Remove Bookmark')"
+          :icon="['fas', 'trash']"
+          text-color="var(--destructive-text-color)"
+          background-color="var(--destructive-color)"
+          @click="removeBookmark"
+        />
         <ft-button
           :label="$t('Save')"
           :disabled="name === ''"
@@ -31,20 +39,11 @@
           @click="save"
         />
         <ft-button
-          v-if="isBookmarkBeingCreated"
           :label="$t('Cancel')"
           :text-color="null"
           :background-color="null"
           @click="hide"
         />
-        <ft-button
-          v-else
-          :label="$t('Page Bookmark.Remove Bookmark')"
-          :icon="['fas', 'trash']"
-          text-color="var(--destructive-text-color)"
-          background-color="var(--destructive-color)"
-          @click="removeBookmark"
-        />
       </ft-flex-box>
     </div>
   </ft-prompt>

From 4736723e028910ad6a7b3b6448d7330967a71668 Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Tue, 11 Jun 2024 09:20:57 -0500
Subject: [PATCH 17/23] Update to show the proper page bookmark name upon
 deletion

---
 .../components/page-bookmark-prompt/page-bookmark-prompt.js  | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/renderer/components/page-bookmark-prompt/page-bookmark-prompt.js b/src/renderer/components/page-bookmark-prompt/page-bookmark-prompt.js
index 164aebd991dd..47fab2acb7bd 100644
--- a/src/renderer/components/page-bookmark-prompt/page-bookmark-prompt.js
+++ b/src/renderer/components/page-bookmark-prompt/page-bookmark-prompt.js
@@ -43,8 +43,9 @@ export default defineComponent({
     },
 
     removeBookmark: function () {
-      this.removePageBookmark(this.pageBookmark._id)
-      showToast(this.$t('Page Bookmark.Removed page bookmark', { name: this.name }))
+      const pageBookmark = this.pageBookmark
+      this.removePageBookmark(pageBookmark._id)
+      showToast(this.$t('Page Bookmark.Removed page bookmark', { name: pageBookmark.name }))
       this.hide()
     },
 

From 039fce110d754d89314049278eea58f5e4fc0b28 Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Tue, 11 Jun 2024 13:42:49 -0500
Subject: [PATCH 18/23] Delete page bookmarks to user playlists when those user
 playlists are deleted

---
 src/datastores/handlers/base.js              |  4 ++
 src/datastores/handlers/electron.js          |  7 +++
 src/datastores/handlers/web.js               |  4 ++
 src/main/index.js                            |  9 ++++
 src/renderer/store/modules/playlists.js      | 12 +++--
 src/renderer/store/modules/search-history.js | 47 ++++++++++++++++++--
 src/renderer/store/modules/settings.js       |  4 ++
 7 files changed, 80 insertions(+), 7 deletions(-)

diff --git a/src/datastores/handlers/base.js b/src/datastores/handlers/base.js
index 8397d11d6597..db66096ce539 100644
--- a/src/datastores/handlers/base.js
+++ b/src/datastores/handlers/base.js
@@ -184,6 +184,10 @@ class SearchHistory {
     return db.searchHistory.removeAsync({ _id: _id })
   }
 
+  static deleteMultiple(ids) {
+    return db.searchHistory.removeAsync({ _id: { $in: ids } })
+  }
+
   static deleteAll() {
     return db.searchHistory.removeAsync({}, { multi: true })
   }
diff --git a/src/datastores/handlers/electron.js b/src/datastores/handlers/electron.js
index fea5dec9d98e..870b7d93f78a 100644
--- a/src/datastores/handlers/electron.js
+++ b/src/datastores/handlers/electron.js
@@ -220,6 +220,13 @@ class SearchHistory {
     )
   }
 
+  static deleteMultiple(ids) {
+    return ipcRenderer.invoke(
+      IpcChannels.DB_SEARCH_HISTORY,
+      { action: DBActions.GENERAL.DELETE_MULTIPLE, data: ids }
+    )
+  }
+
   static deleteAll() {
     return ipcRenderer.invoke(
       IpcChannels.DB_SEARCH_HISTORY,
diff --git a/src/datastores/handlers/web.js b/src/datastores/handlers/web.js
index faaaad20eb9c..d0e25e3fa9bc 100644
--- a/src/datastores/handlers/web.js
+++ b/src/datastores/handlers/web.js
@@ -127,6 +127,10 @@ class SearchHistory {
     return baseHandlers.searchHistory.delete(_id)
   }
 
+  static deleteMultiple(ids) {
+    return baseHandlers.searchHistory.deleteMultiple(ids)
+  }
+
   static deleteAll() {
     return baseHandlers.searchHistory.deleteAll()
   }
diff --git a/src/main/index.js b/src/main/index.js
index c6166300a0ba..aa0fcaed6a5c 100644
--- a/src/main/index.js
+++ b/src/main/index.js
@@ -1282,6 +1282,15 @@ function runApp() {
           )
           return null
 
+        case DBActions.GENERAL.DELETE_MULTIPLE:
+          await baseHandlers.searchHistory.deleteMultiple(data)
+          syncOtherWindows(
+            IpcChannels.SYNC_SEARCH_HISTORY,
+            event,
+            { event: SyncEvents.GENERAL.DELETE_MULTIPLE, data }
+          )
+          return null
+
         case DBActions.GENERAL.DELETE_ALL:
           await baseHandlers.searchHistory.deleteAll()
           return null
diff --git a/src/renderer/store/modules/playlists.js b/src/renderer/store/modules/playlists.js
index 22df83be6365..163f9cc12337 100644
--- a/src/renderer/store/modules/playlists.js
+++ b/src/renderer/store/modules/playlists.js
@@ -1,4 +1,4 @@
-import { DBPlaylistHandlers } from '../../../datastores/handlers/index'
+import { DBPlaylistHandlers, DBSearchHistoryHandlers } from '../../../datastores/handlers/index'
 
 function generateRandomPlaylistId() {
   return `ft-playlist--${generateRandomUniqueId()}`
@@ -365,8 +365,10 @@ const actions = {
     }
   },
 
-  async removeAllPlaylists({ commit }) {
+  async removeAllPlaylists({ commit, dispatch, state }) {
     try {
+      const playlistIds = state.playlists.map((playlist) => playlist._id)
+      dispatch('removeUserPlaylistPageBookmarks', playlistIds, { root: true })
       await DBPlaylistHandlers.deleteAll()
       commit('removeAllPlaylists')
     } catch (errMessage) {
@@ -383,8 +385,9 @@ const actions = {
     }
   },
 
-  async removePlaylist({ commit }, playlistId) {
+  async removePlaylist({ commit, dispatch }, playlistId) {
     try {
+      dispatch('removeUserPlaylistPageBookmarks', [playlistId], { root: true })
       await DBPlaylistHandlers.delete(playlistId)
       commit('removePlaylist', playlistId)
     } catch (errMessage) {
@@ -392,8 +395,9 @@ const actions = {
     }
   },
 
-  async removePlaylists({ commit }, playlistIds) {
+  async removePlaylists({ commit, dispatch }, playlistIds) {
     try {
+      dispatch('removeUserPlaylistPageBookmarks', playlistIds, { root: true })
       await DBPlaylistHandlers.deleteMultiple(playlistIds)
       commit('removePlaylists', playlistIds)
     } catch (errMessage) {
diff --git a/src/renderer/store/modules/search-history.js b/src/renderer/store/modules/search-history.js
index 872b2191a645..3dffcd03847b 100644
--- a/src/renderer/store/modules/search-history.js
+++ b/src/renderer/store/modules/search-history.js
@@ -19,10 +19,29 @@ const getters = {
       return []
     }
     const queryToLower = query.toLowerCase()
-    const pageBookmarks = state.pageBookmarks.filter((pageBookmark) =>
-      pageBookmark && pageBookmark.name.toLowerCase().includes(queryToLower) && pageBookmark.route !== routeToExclude
+    return state.pageBookmarks.filter((pageBookmark) =>
+      pageBookmark.name.toLowerCase().includes(queryToLower) && pageBookmark.route !== routeToExclude
     )
-    return pageBookmarks
+  },
+
+  getPageBookmarkIdsForMatchingUserPlaylistIds: (state) => (playlistIds) => {
+    const pageBookmarkIds = []
+    const allPageBookmarks = state.pageBookmarks
+    const pageBookmarkLimitedRoutesMap = new Map()
+    allPageBookmarks.forEach((pageBookmark) => {
+      pageBookmarkLimitedRoutesMap.set(pageBookmark.route, pageBookmark._id)
+    })
+
+    playlistIds.forEach((playlistId) => {
+      const route = `/playlist/${playlistId}?playlistType=user&searchQueryText=`
+      if (!pageBookmarkLimitedRoutesMap.has(route)) {
+        return
+      }
+
+      pageBookmarkIds.push(pageBookmarkLimitedRoutesMap.get(route))
+    })
+
+    return pageBookmarkIds
   }
 }
 const actions = {
@@ -62,6 +81,24 @@ const actions = {
     }
   },
 
+  async removePageBookmarks({ commit }, ids) {
+    try {
+      await DBSearchHistoryHandlers.deleteMultiple(ids)
+      commit('removePageBookmarksFromList', ids)
+    } catch (errMessage) {
+      console.error(errMessage)
+    }
+  },
+
+  async removeUserPlaylistPageBookmarks({ dispatch, getters }, userPlaylistIds) {
+    const pageBookmarkIds = getters.getPageBookmarkIdsForMatchingUserPlaylistIds(userPlaylistIds)
+    if (pageBookmarkIds.length === 0) {
+      return
+    }
+
+    dispatch('removePageBookmarks', pageBookmarkIds)
+  },
+
   async removeAllPageBookmarks({ commit }) {
     try {
       await DBSearchHistoryHandlers.deleteAll()
@@ -99,6 +136,10 @@ const mutations = {
     })
 
     state.pageBookmarks.splice(i, 1)
+  },
+
+  removePageBookmarksFromList(state, ids) {
+    state.pageBookmarks = state.pageBookmarks.filter((pageBookmark) => !ids.includes(pageBookmark._id))
   }
 }
 
diff --git a/src/renderer/store/modules/settings.js b/src/renderer/store/modules/settings.js
index be738763b8fc..ae680dd707f0 100644
--- a/src/renderer/store/modules/settings.js
+++ b/src/renderer/store/modules/settings.js
@@ -534,6 +534,10 @@ const customActions = {
             commit('removePageBookmarkFromList', data)
             break
 
+          case SyncEvents.GENERAL.DELETE_MULTIPLE:
+            commit('removePageBookmarksFromList', data)
+            break
+
           default:
             console.error('search history: invalid sync event received')
         }

From 85e46b5bc5f1b1486f57d6c73fe4ff5d9b888d09 Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Tue, 11 Jun 2024 14:42:10 -0500
Subject: [PATCH 19/23] Add icons corresponding to bookmarked page route

---
 src/renderer/components/ft-input/ft-input.js  | 13 +++++++-
 src/renderer/components/ft-input/ft-input.vue |  2 +-
 src/renderer/helpers/strings.js               | 31 +++++++++++++++++++
 3 files changed, 44 insertions(+), 2 deletions(-)

diff --git a/src/renderer/components/ft-input/ft-input.js b/src/renderer/components/ft-input/ft-input.js
index 1cbf5c21ba95..de8a0691abd7 100644
--- a/src/renderer/components/ft-input/ft-input.js
+++ b/src/renderer/components/ft-input/ft-input.js
@@ -2,7 +2,7 @@ import { defineComponent } from 'vue'
 import { mapActions } from 'vuex'
 
 import FtTooltip from '../ft-tooltip/ft-tooltip.vue'
-import { isKeyboardEventKeyPrintableChar, isNullOrEmpty } from '../../helpers/strings'
+import { getIconForRoute, isKeyboardEventKeyPrintableChar, isNullOrEmpty } from '../../helpers/strings'
 
 export default defineComponent({
   name: 'FtInput',
@@ -330,6 +330,17 @@ export default defineComponent({
       this.inputData = text
     },
 
+    iconForBookmarkedPage: (pageBookmark) => {
+      const routeSlashIndex = pageBookmark.route.indexOf('/', 2)
+      let route
+      if (routeSlashIndex === -1) {
+        route = pageBookmark.route
+      } else {
+        route = pageBookmark.route.substring(0, routeSlashIndex)
+      }
+      return getIconForRoute(route) ?? ['fas', 'magnifying-glass']
+    },
+
     focus() {
       this.$refs.input.focus()
     },
diff --git a/src/renderer/components/ft-input/ft-input.vue b/src/renderer/components/ft-input/ft-input.vue
index f08f277b3e5a..703e12315625 100644
--- a/src/renderer/components/ft-input/ft-input.vue
+++ b/src/renderer/components/ft-input/ft-input.vue
@@ -87,7 +87,7 @@
         >
           <font-awesome-icon
             v-if="entry.isBookmark"
-            :icon="['fas', 'star']"
+            :icon="iconForBookmarkedPage(entry)"
             class="searchResultIcon bookmarkStarIcon"
           />
           <font-awesome-icon
diff --git a/src/renderer/helpers/strings.js b/src/renderer/helpers/strings.js
index 5edab30592e2..36a0b731a796 100644
--- a/src/renderer/helpers/strings.js
+++ b/src/renderer/helpers/strings.js
@@ -53,6 +53,37 @@ export function translateWindowTitle(title, i18n) {
   }
 }
 
+export function getIconForRoute(path) {
+  switch (path) {
+    case '/subscriptions':
+      return ['fas', 'rss']
+    case '/subscribedchannels':
+    case '/channel':
+      return ['fas', 'list']
+    case '/trending':
+      return ['fas', 'fire']
+    case '/popular':
+      return ['fas', 'users']
+    case '/userplaylists':
+      return ['fas', 'bookmark']
+    case '/history':
+      return ['fas', 'history']
+    case '/settings':
+      return ['fas', 'sliders-h']
+    case '/about':
+      return ['fas', 'info-circle']
+    case '/search':
+    case '/hashtag':
+      return ['fas', 'magnifying-glass']
+    case '/playlist':
+      return ['fas', 'bars']
+    case '/watch':
+      return ['fas', 'play']
+    default:
+      return null
+  }
+}
+
 /**
  * Returns an appropriate default bookmark name
  * for a given route.

From a81a8b58738f264e419d840698707604377f63a2 Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Tue, 11 Jun 2024 14:43:24 -0500
Subject: [PATCH 20/23] Prevent search results from wrapping across to multiple
 rows

---
 src/renderer/components/ft-input/ft-input.css | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/renderer/components/ft-input/ft-input.css b/src/renderer/components/ft-input/ft-input.css
index b97b6380e560..c5bf58c52cb7 100644
--- a/src/renderer/components/ft-input/ft-input.css
+++ b/src/renderer/components/ft-input/ft-input.css
@@ -203,6 +203,9 @@
   padding-block: 0;
   line-height: 2rem;
   padding-inline: 15px;
+  text-overflow: ellipsis;
+  overflow-x: hidden;
+  white-space: nowrap;
 }
 
 .bookmarkStarIcon {

From e5b5b43621cd371e60153e1d9bfba882ee441e52 Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Tue, 11 Jun 2024 16:16:49 -0500
Subject: [PATCH 21/23] Constrain visible ft-input results list length to 15

---
 src/renderer/components/ft-input/ft-input.js  | 8 +++++---
 src/renderer/components/ft-input/ft-input.vue | 2 +-
 src/renderer/store/modules/playlists.js       | 2 +-
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/renderer/components/ft-input/ft-input.js b/src/renderer/components/ft-input/ft-input.js
index de8a0691abd7..724f7b07b906 100644
--- a/src/renderer/components/ft-input/ft-input.js
+++ b/src/renderer/components/ft-input/ft-input.js
@@ -4,6 +4,8 @@ import { mapActions } from 'vuex'
 import FtTooltip from '../ft-tooltip/ft-tooltip.vue'
 import { getIconForRoute, isKeyboardEventKeyPrintableChar, isNullOrEmpty } from '../../helpers/strings'
 
+const MAX_VISIBLE_LIST_ITEMS = 15
+
 export default defineComponent({
   name: 'FtInput',
   components: {
@@ -83,7 +85,7 @@ export default defineComponent({
         isPointerInList: false,
         keyboardSelectedOptionIndex: -1,
       },
-      visibleDataList: this.dataList,
+      visibleDataList: this.dataList?.slice(0, MAX_VISIBLE_LIST_ITEMS),
       // This button should be invisible on app start
       // As the text input box should be empty
       clearTextButtonExisting: false,
@@ -311,13 +313,13 @@ export default defineComponent({
       this.searchState.selectedOption = -1
       this.searchState.keyboardSelectedOptionIndex = -1
       if (this.inputData === '') {
-        this.visibleDataList = this.dataList
+        this.visibleDataList = this.dataList?.slice(0, MAX_VISIBLE_LIST_ITEMS)
         return
       }
       // get list of items that match input
       const lowerCaseInputData = this.inputData.toLowerCase()
 
-      this.visibleDataList = this.dataList.filter(x => {
+      this.visibleDataList = this.dataList?.slice(0, MAX_VISIBLE_LIST_ITEMS).filter(x => {
         if (x.name) {
           return x.name.toLowerCase().indexOf(lowerCaseInputData) !== -1
         }
diff --git a/src/renderer/components/ft-input/ft-input.vue b/src/renderer/components/ft-input/ft-input.vue
index 703e12315625..e1ed1a277897 100644
--- a/src/renderer/components/ft-input/ft-input.vue
+++ b/src/renderer/components/ft-input/ft-input.vue
@@ -79,7 +79,7 @@
         <li
           v-for="(entry, index) in visibleDataList"
           :key="index"
-          :class="{ hover: searchState.selectedOption === index , bookmarked: entry.isBookmark }"
+          :class="{ hover: searchState.selectedOption === index }"
           :aria-roledescription="entry.isBookmark ? $t('Role Descriptions.bookmark') : null"
           @click="handleOptionClick(index)"
           @mouseenter="searchState.selectedOption = index"
diff --git a/src/renderer/store/modules/playlists.js b/src/renderer/store/modules/playlists.js
index 163f9cc12337..26ee5bb54d86 100644
--- a/src/renderer/store/modules/playlists.js
+++ b/src/renderer/store/modules/playlists.js
@@ -1,4 +1,4 @@
-import { DBPlaylistHandlers, DBSearchHistoryHandlers } from '../../../datastores/handlers/index'
+import { DBPlaylistHandlers } from '../../../datastores/handlers/index'
 
 function generateRandomPlaylistId() {
   return `ft-playlist--${generateRandomUniqueId()}`

From 094b2c293b1a5e4c8ed943546ca51034d589e388 Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Tue, 11 Jun 2024 18:03:39 -0500
Subject: [PATCH 22/23] Add message when there are other page bookmarks with
 the same name

---
 .../page-bookmark-prompt/page-bookmark-prompt.js       | 10 ++++++++++
 .../page-bookmark-prompt/page-bookmark-prompt.vue      |  3 +++
 src/renderer/store/modules/search-history.js           |  2 +-
 static/locales/en-US.yaml                              |  1 +
 4 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/renderer/components/page-bookmark-prompt/page-bookmark-prompt.js b/src/renderer/components/page-bookmark-prompt/page-bookmark-prompt.js
index 47fab2acb7bd..e4e5f626e1c0 100644
--- a/src/renderer/components/page-bookmark-prompt/page-bookmark-prompt.js
+++ b/src/renderer/components/page-bookmark-prompt/page-bookmark-prompt.js
@@ -24,6 +24,16 @@ export default defineComponent({
     isBookmarkBeingCreated: function () {
       return this.pageBookmark == null
     },
+    pageBookmarks: function () {
+      return this.$store.getters.getPageBookmarks
+    },
+    duplicateNameCount: function () {
+      const currentBookmarkAdjustment = this.name === this.pageBookmark?.name ? -1 : 0
+      return currentBookmarkAdjustment + this.pageBookmarks.filter((pageBookmark) => pageBookmark.name === this.name).length
+    },
+    duplicateNameMessage: function () {
+      return this.$tc('Page Bookmark["There is {count} other bookmark with the same name."]', this.duplicateNameCount, { count: this.duplicateNameCount })
+    },
     pageBookmark: function () {
       return this.$store.getters.getPageBookmarkWithRoute(this.$router.currentRoute.fullPath)
     },
diff --git a/src/renderer/components/page-bookmark-prompt/page-bookmark-prompt.vue b/src/renderer/components/page-bookmark-prompt/page-bookmark-prompt.vue
index 20ddbe199e82..8969da0a4d55 100644
--- a/src/renderer/components/page-bookmark-prompt/page-bookmark-prompt.vue
+++ b/src/renderer/components/page-bookmark-prompt/page-bookmark-prompt.vue
@@ -20,6 +20,9 @@
         @clear="e => name = ''"
         @keydown.enter.native="save"
       />
+      <ft-flex-box v-if="duplicateNameCount > 0">
+        <p>{{ duplicateNameMessage }}</p>
+      </ft-flex-box>
     </div>
     <div class="actions-container">
       <ft-flex-box>
diff --git a/src/renderer/store/modules/search-history.js b/src/renderer/store/modules/search-history.js
index 3dffcd03847b..bc9e20aee289 100644
--- a/src/renderer/store/modules/search-history.js
+++ b/src/renderer/store/modules/search-history.js
@@ -5,7 +5,7 @@ const state = {
 }
 
 const getters = {
-  getPageBookmarks: (state) => () => {
+  getPageBookmarks: (state) => {
     return state.pageBookmarks
   },
 
diff --git a/static/locales/en-US.yaml b/static/locales/en-US.yaml
index 69df81139cb6..b56e00438282 100644
--- a/static/locales/en-US.yaml
+++ b/static/locales/en-US.yaml
@@ -1116,6 +1116,7 @@ Page Bookmark:
   Created page bookmark: Created page bookmark "{name}"
   Updated page bookmark: Updated page bookmark "{name}"
   Removed page bookmark: Removed page bookmark "{name}"
+  There is {count} other bookmark with the same name.: There is {count} other page bookmark with the same name. | There are {count} other page bookmarks with the same name.
 Role Descriptions:
   bookmark: bookmark
 Moments Ago: moments ago

From b1625078110b07404fc06a4f0566a2515a5a3ab2 Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Tue, 11 Jun 2024 21:30:19 -0500
Subject: [PATCH 23/23] Update playlist route icons

---
 src/renderer/components/ft-input/ft-input.js |  9 +--------
 src/renderer/helpers/strings.js              | 13 ++++++++-----
 2 files changed, 9 insertions(+), 13 deletions(-)

diff --git a/src/renderer/components/ft-input/ft-input.js b/src/renderer/components/ft-input/ft-input.js
index 724f7b07b906..72e3fd093b9e 100644
--- a/src/renderer/components/ft-input/ft-input.js
+++ b/src/renderer/components/ft-input/ft-input.js
@@ -333,14 +333,7 @@ export default defineComponent({
     },
 
     iconForBookmarkedPage: (pageBookmark) => {
-      const routeSlashIndex = pageBookmark.route.indexOf('/', 2)
-      let route
-      if (routeSlashIndex === -1) {
-        route = pageBookmark.route
-      } else {
-        route = pageBookmark.route.substring(0, routeSlashIndex)
-      }
-      return getIconForRoute(route) ?? ['fas', 'magnifying-glass']
+      return getIconForRoute(pageBookmark.route) ?? ['fas', 'magnifying-glass']
     },
 
     focus() {
diff --git a/src/renderer/helpers/strings.js b/src/renderer/helpers/strings.js
index 36a0b731a796..96196fb83224 100644
--- a/src/renderer/helpers/strings.js
+++ b/src/renderer/helpers/strings.js
@@ -53,8 +53,10 @@ export function translateWindowTitle(title, i18n) {
   }
 }
 
-export function getIconForRoute(path) {
-  switch (path) {
+export function getIconForRoute(route) {
+  const routeSlashIndex = route.indexOf('/', 2)
+  const truncatedRoute = (routeSlashIndex === -1) ? route : route.substring(0, routeSlashIndex)
+  switch (truncatedRoute) {
     case '/subscriptions':
       return ['fas', 'rss']
     case '/subscribedchannels':
@@ -75,9 +77,10 @@ export function getIconForRoute(path) {
     case '/search':
     case '/hashtag':
       return ['fas', 'magnifying-glass']
-    case '/playlist':
-      return ['fas', 'bars']
-    case '/watch':
+    case '/playlist': {
+      const solidOrRegular = route.includes('?playlistType=user') ? 'fas' : 'far'
+      return [solidOrRegular, 'bookmark']
+    } case '/watch':
       return ['fas', 'play']
     default:
       return null