Keyword search history (FreeTubeApp#6414)

* Add search history DB integration

* Implement search history display logic and UI

* Modify search cache removal setting to remove search history as well

* Exclude current search route from history suggestions and populate input with matching query

* Modify new labels for clarity

* Fix issues detected during review

Fix focus being lost for a second during searching of search history entry causing clear text button to phase away for a moment. Fix clear text button event not being noticed by the logic in top-nav. Fix spacebar error issue by adding check in updateVisibleDataList function.

* Implement fixes from code review

Fixes clear text button to appear and stay visible when the dropdown options are visible in an ft-input. Fixes updateVisibleDataList not using trim(), thus incorrectly causing filtering of search history when space bar was used.

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

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

* Add back clear statement

* Fix clear text button not working or appearing as active when arrowing through search history results

* Add 'Remove' option

* Implement search history entries showing up alongside YT search suggestions as queries are being typed

* Improve code commenting

* Implement code review changes

Fix preventDefault being called for arrow left/right in search input. Revert ellipsis changes for overly long search results. Adjust matching search history logic to be non-heuristic.

* Fix text overflow issue with long search history entries

* Remove 'name' field and unused DB methods

* Implement 'Remember Search History' setting and rename 'Remember History' to 'Remember Watch History'

* Apply suggestions from code review

Co-authored-by: absidue <48293849+absidue@users.noreply.github.com>

* Update to not show search history suggestions if 'Remember Search History' is disabled

* Update logic to make 'Enable Search Suggestions' being false still allow showing search history results

* Revert hiding old search history entries if rememberSearchHistory is disabled

* Fix searchOptions not closing in edge case

Bug scenario: 1. click search history entry, 2. click clear text button, 3. see state of searchOptions not being closeable until re-interacting with the input

* Update src/renderer/views/Search/Search.js

Co-authored-by: absidue <48293849+absidue@users.noreply.github.com>

* Add bolding to selected/focused 'Remove' button

---------

Co-authored-by: absidue <48293849+absidue@users.noreply.github.com>

Author: 2 people

src/constants.js

@@ -26,10 +26,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',
@@ -193,6 +195,12 @@ const PLAYLIST_HEIGHT_FORCE_LIST_THRESHOLD = 500
 // YouTube search character limit is 100 characters
 const SEARCH_CHAR_LIMIT = 100
 
+// max # of results we show for search suggestions
+const SEARCH_RESULTS_DISPLAY_LIMIT = 14
+
+// max # of search history results we show when mixed with YT search suggestions
+const MIXED_SEARCH_HISTORY_ENTRIES_DISPLAY_LIMIT = 4
+
 // Displayed on the about page and used in the main.js file to only allow bitcoin URLs with this wallet address to be opened
 const ABOUT_BITCOIN_ADDRESS = '1Lih7Ho5gnxb1CwPD4o59ss78pwo2T91eS'
 
@@ -205,5 +213,7 @@ export {
   MOBILE_WIDTH_THRESHOLD,
   PLAYLIST_HEIGHT_FORCE_LIST_THRESHOLD,
   SEARCH_CHAR_LIMIT,
+  SEARCH_RESULTS_DISPLAY_LIMIT,
+  MIXED_SEARCH_HISTORY_ENTRIES_DISPLAY_LIMIT,
   ABOUT_BITCOIN_ADDRESS,
 }

src/datastores/handlers/base.js

@@ -226,6 +226,24 @@ class Playlists {
   }
 }
 
+class SearchHistory {
+  static find() {
+    return db.searchHistory.findAsync({}).sort({ lastUpdatedAt: -1 })
+  }
+
+  static upsert(searchHistoryEntry) {
+    return db.searchHistory.updateAsync({ _id: searchHistoryEntry._id }, searchHistoryEntry, { upsert: true })
+  }
+
+  static delete(_id) {
+    return db.searchHistory.removeAsync({ _id: _id })
+  }
+
+  static deleteAll() {
+    return db.searchHistory.removeAsync({}, { multi: true })
+  }
+}
+
 class SubscriptionCache {
   static find() {
     return db.subscriptionCache.findAsync({})
@@ -311,6 +329,7 @@ function compactAllDatastores() {
     db.history.compactDatafileAsync(),
     db.profiles.compactDatafileAsync(),
     db.playlists.compactDatafileAsync(),
+    db.searchHistory.compactDatafileAsync(),
     db.subscriptionCache.compactDatafileAsync(),
   ])
 }
@@ -320,6 +339,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,36 @@ class Playlists {
   }
 }
 
+class SearchHistory {
+  static find() {
+    return ipcRenderer.invoke(
+      IpcChannels.DB_SEARCH_HISTORY,
+      { action: DBActions.GENERAL.FIND }
+    )
+  }
+
+  static upsert(searchHistoryEntry) {
+    return ipcRenderer.invoke(
+      IpcChannels.DB_SEARCH_HISTORY,
+      { action: DBActions.GENERAL.UPSERT, data: searchHistoryEntry }
+    )
+  }
+
+  static delete(_id) {
+    return ipcRenderer.invoke(
+      IpcChannels.DB_SEARCH_HISTORY,
+      { action: DBActions.GENERAL.DELETE, data: _id }
+    )
+  }
+
+  static deleteAll() {
+    return ipcRenderer.invoke(
+      IpcChannels.DB_SEARCH_HISTORY,
+      { action: DBActions.GENERAL.DELETE_ALL }
+    )
+  }
+}
+
 class SubscriptionCache {
   static find() {
     return ipcRenderer.invoke(
@@ -296,5 +326,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

@@ -24,4 +24,4 @@ class Settings {
 export { Settings as settings }
 
 // These classes don't require any changes from the base classes, so can be exported as-is.
-export { history, profiles, playlists, subscriptionCache } from './base'
+export { history, profiles, playlists, searchHistory, subscriptionCache } from './base'

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

@@ -1343,6 +1343,51 @@ function runApp() {
 
   // *********** //
 
+  // ************** //
+  // Search History
+  ipcMain.handle(IpcChannels.DB_SEARCH_HISTORY, async (event, { action, data }) => {
+    try {
+      switch (action) {
+        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()
+          syncOtherWindows(
+            IpcChannels.SYNC_SEARCH_HISTORY,
+            event,
+            { event: SyncEvents.GENERAL.DELETE_ALL }
+          )
+          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()
+    }
+  })
+
   // *********** //
   // Profiles
   ipcMain.handle(IpcChannels.DB_SUBSCRIPTION_CACHE, async (event, { action, data }) => {

src/renderer/App.js

@@ -194,6 +194,7 @@ export default defineComponent({
         this.grabHistory()
         this.grabAllPlaylists()
         this.grabAllSubscriptions()
+        this.grabSearchHistoryEntries()
 
         if (process.env.IS_ELECTRON) {
           ipcRenderer = require('electron').ipcRenderer
@@ -580,6 +581,7 @@ export default defineComponent({
       'grabHistory',
       'grabAllPlaylists',
       'grabAllSubscriptions',
+      'grabSearchHistoryEntries',
       'getYoutubeUrlInfo',
       'getExternalPlayerCmdArgumentsData',
       'fetchInvidiousInstances',

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

@@ -31,12 +31,15 @@ body[dir='rtl'] .ft-input-component.search.showClearTextButton:focus-within .inp
   padding-inline-start: 46px;
 }
 
-.ft-input-component:focus-within .clearInputTextButton {
+.ft-input-component:focus-within .clearInputTextButton,
+.ft-input-component.showOptions .clearInputTextButton {
   opacity: 0.5;
 }
 
-.clearTextButtonVisible .clearInputTextButton.visible,
-.ft-input-component:focus-within .clearInputTextButton.visible {
+
+.ft-input-component.inputDataPresent .clearInputTextButton.visible,
+.clearTextButtonVisible:not(.showOptions) .clearInputTextButton.visible,
+.ft-input-component:focus-within:not(.showOptions) .clearInputTextButton.visible {
   cursor: pointer;
   opacity: 1;
 }
@@ -200,10 +203,30 @@ body[dir='rtl'] .ft-input-component.search.showClearTextButton:focus-within .inp
 }
 
 .list li {
-  display: block;
+  display: flex;
+  justify-content: space-between;
   padding-block: 0;
-  padding-inline: 15px;
   line-height: 2rem;
+  padding-inline: 15px;
+}
+
+.searchResultIcon {
+  opacity: 0.6;
+  padding-inline-end: 10px;
+  inline-size: 16px;
+  block-size: 16px;
+}
+
+.removeButton {
+  text-decoration: none;
+  float: var(--float-right-ltr-rtl-value);
+  font-size: 13px;
+}
+
+.removeButton:hover,
+.removeButtonSelected {
+  text-decoration: underline;
+  font-weight: bold;
 }
 
 .hover {