Page bookmarks

src/constants.js

@@ -25,10 +25,12 @@ const IpcChannels = {
   DB_HISTORY: 'db-history',
   DB_PROFILES: 'db-profiles',
   DB_PLAYLISTS: 'db-playlists',
+  DB_SEARCH_HISTORY: 'db-search-history',
   DB_SUBSCRIPTION_CACHE: 'db-subscription-cache',
 
   SYNC_SETTINGS: 'sync-settings',
   SYNC_HISTORY: 'sync-history',
+  SYNC_SEARCH_HISTORY: 'sync-search-history',
   SYNC_PROFILES: 'sync-profiles',
   SYNC_PLAYLISTS: 'sync-playlists',
   SYNC_SUBSCRIPTION_CACHE: 'sync-subscription-cache',

src/datastores/handlers/base.js

@@ -211,6 +211,32 @@ 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._id }, pageBookmark, { upsert: true })
+  }
+
+  static delete(_id) {
+    return db.searchHistory.removeAsync({ _id: _id })
+  }
+
+  static deleteMultiple(ids) {
+    return db.searchHistory.removeAsync({ _id: { $in: ids } })
+  }
+
+  static deleteAll() {
+    return db.searchHistory.removeAsync({}, { multi: true })
+  }
+}
+
 class SubscriptionCache {
   static find() {
     return db.subscriptionCache.findAsync({})
@@ -296,6 +322,7 @@ function compactAllDatastores() {
     db.history.compactDatafileAsync(),
     db.profiles.compactDatafileAsync(),
     db.playlists.compactDatafileAsync(),
+    db.searchHistory.compactDatafileAsync(),
     db.subscriptionCache.compactDatafileAsync(),
   ])
 }
@@ -305,6 +332,7 @@ export {
   History as history,
   Profiles as profiles,
   Playlists as playlists,
+  SearchHistory as searchHistory,
   SubscriptionCache as subscriptionCache,
 
   compactAllDatastores,

src/datastores/handlers/electron.js

@@ -218,6 +218,50 @@ 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(_id) {
+    return ipcRenderer.invoke(
+      IpcChannels.DB_SEARCH_HISTORY,
+      { action: DBActions.GENERAL.DELETE, data: _id }
+    )
+  }
+
+  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,
+      { action: DBActions.GENERAL.DELETE_ALL }
+    )
+  }
+}
+
 class SubscriptionCache {
   static find() {
     return ipcRenderer.invoke(
@@ -296,5 +340,6 @@ export {
   History as history,
   Profiles as profiles,
   Playlists as playlists,
+  SearchHistory as searchHistory,
   SubscriptionCache as subscriptionCache,
 }

src/datastores/handlers/index.js

@@ -3,5 +3,6 @@ export {
   history as DBHistoryHandlers,
   profiles as DBProfileHandlers,
   playlists as DBPlaylistHandlers,
+  searchHistory as DBSearchHistoryHandlers,
   subscriptionCache as DBSubscriptionCacheHandlers,
 } from 'DB_HANDLERS_ELECTRON_RENDERER_OR_WEB'

src/datastores/handlers/web.js

@@ -122,6 +122,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(_id) {
+    return baseHandlers.searchHistory.delete(_id)
+  }
+
+  static deleteMultiple(ids) {
+    return baseHandlers.searchHistory.deleteMultiple(ids)
+  }
+
+  static deleteAll() {
+    return baseHandlers.searchHistory.deleteAll()
+  }
+}
+
 class SubscriptionCache {
   static find() {
     return baseHandlers.subscriptionCache.find()
@@ -180,5 +206,6 @@ export {
   History as history,
   Profiles as profiles,
   Playlists as playlists,
+  SearchHistory as searchHistory,
   SubscriptionCache as subscriptionCache,
 }

src/datastores/index.js

@@ -26,4 +26,5 @@ 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 })
 export const subscriptionCache = new Datastore({ filename: dbPath('subscription-cache'), autoload: true })

src/main/index.js

@@ -1316,6 +1316,64 @@ function runApp() {
     }
   })
 
+  // ************** //
+  // Search History
+  ipcMain.handle(IpcChannels.DB_SEARCH_HISTORY, async (event, { action, data }) => {
+    try {
+      switch (action) {
+        case DBActions.GENERAL.CREATE: {
+          const pageBookmark = await baseHandlers.searchHistory.create(data)
+          syncOtherWindows(
+            IpcChannels.SYNC_SEARCH_HISTORY,
+            event,
+            { event: SyncEvents.GENERAL.CREATE, data }
+          )
+          return pageBookmark
+        }
+        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_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
+
+        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()
+    }
+  })
+
   // *********** //
 
   // *********** //

src/renderer/App.js

@@ -10,6 +10,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 FtSearchFilters from './components/ft-search-filters/ft-search-filters.vue'
 import { marked } from 'marked'
 import { IpcChannels } from '../constants'
@@ -32,6 +33,7 @@ export default defineComponent({
     FtProgressBar,
     FtPlaylistAddVideoPrompt,
     FtCreatePlaylistPrompt,
+    PageBookmarkPrompt,
     FtSearchFilters
   },
   data: function () {
@@ -40,6 +42,7 @@ export default defineComponent({
       showUpdatesBanner: false,
       showBlogBanner: false,
       showReleaseNotes: false,
+      pageBookmarksAvailable: false,
       updateBannerMessage: '',
       blogBannerMessage: '',
       latestBlogUrl: '',
@@ -77,6 +80,9 @@ export default defineComponent({
     showCreatePlaylistPrompt: function () {
       return this.$store.getters.getShowCreatePlaylistPrompt
     },
+    showPageBookmarkPrompt: function () {
+      return this.$store.getters.getShowPageBookmarkPrompt
+    },
     showSearchFilters: function () {
       return this.$store.getters.getShowSearchFilters
     },
@@ -142,7 +148,7 @@ export default defineComponent({
 
     externalLinkHandling: function () {
       return this.$store.getters.getExternalLinkHandling
-    }
+    },
   },
   watch: {
     windowTitle: 'setWindowTitle',
@@ -178,6 +184,9 @@ export default defineComponent({
       this.grabAllProfiles(this.$t('Profile.All Channels')).then(async () => {
         this.grabHistory()
         this.grabAllPlaylists()
+        this.grabPageBookmarks().then(async () => {
+          this.pageBookmarksAvailable = true
+        })
         this.grabAllSubscriptions()
 
         if (process.env.IS_ELECTRON) {
@@ -552,6 +561,7 @@ export default defineComponent({
       'grabUserSettings',
       'grabAllProfiles',
       'grabHistory',
+      'grabPageBookmarks',
       'grabAllPlaylists',
       'grabAllSubscriptions',
       'getYoutubeUrlInfo',

src/renderer/App.vue

@@ -56,13 +56,17 @@
     <ft-create-playlist-prompt
       v-if="showCreatePlaylistPrompt"
     />
+    <page-bookmark-prompt
+      v-if="showPageBookmarkPrompt"
+    />
     <ft-toast />
     <ft-progress-bar
       v-if="showProgressBar"
     />
     <top-nav
       ref="topNav"
       :inert="isPromptOpen"
+      :page-bookmarks-available="pageBookmarksAvailable"
     />
     <side-nav
       ref="sideNav"

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

@@ -202,8 +202,22 @@ body[dir='rtl'] .ft-input-component.search.showClearTextButton:focus-within .inp
 .list li {
   display: block;
   padding-block: 0;
-  padding-inline: 15px;
   line-height: 2rem;
+  padding-inline: 15px;
+  text-overflow: ellipsis;
+  overflow-x: hidden;
+  white-space: nowrap;
+}
+
+.bookmarkStarIcon {
+  color: var(--favorite-icon-color);
+}
+
+.searchResultIcon {
+  opacity: 0.6;
+  padding-inline-end: 10px;
+  inline-size: 16px;
+  block-size: 16px;
 }
 
 .hover {