Added search button to search filters

src/renderer/components/FtSearchFilters/FtSearchFilters.css

@@ -13,9 +13,10 @@
   margin-inline: auto;
 }
 
-.searchFilterCloseButtonContainer {
+.searchFilterButtonsContainer {
   display: flex;
   justify-content: center;
+  gap: 10px;
 }
 
 @media only screen and (width <= 680px) {

src/renderer/components/FtSearchFilters/FtSearchFilters.vue

@@ -58,7 +58,14 @@
           @change="updateFeatures"
         />
       </FtFlexBox>
-      <div class="searchFilterCloseButtonContainer">
+      <div class="searchFilterButtonsContainer">
+        <FtButton
+          v-if="showSearchButton"
+          :label="$t('Search Filters.Search')"
+          background-color="var(--primary-color)"
+          text-color="var(--text-with-main-color)"
+          @click="searchFromFilters"
+        />
         <FtButton
           :label="$t('Close')"
           background-color="var(--primary-color)"
@@ -207,6 +214,13 @@ const searchTypeStartIndex = TYPE_VALUES.indexOf(searchSettings.value.type)
 const searchDurationStartIndex = DURATION_VALUES.indexOf(searchSettings.value.duration)
 const searchDefaultFeatures = [...searchSettings.value.features]
 
+const showSearchButton = computed(() => store.getters.getShowSearchButton)
+
+function searchFromFilters() {
+  hideSearchFilters()
+  store.dispatch('triggerSearchFromFilters')
+}
+
 function hideSearchFilters() {
   store.dispatch('hideSearchFilters')
 }

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

@@ -39,7 +39,8 @@ export default defineComponent({
       navigationHistoryDropdownActiveEntry: null,
       navigationHistoryDropdownOptions: [],
       searchSuggestionsDataList: [],
-      lastSuggestionQuery: ''
+      lastSuggestionQuery: '',
+      query: ''
     }
   },
   computed: {
@@ -69,6 +70,10 @@ export default defineComponent({
       return this.$store.getters.getEnableSearchSuggestions
     },
 
+    searchFromFilters: function() {
+      return this.$store.getters.getSearchFromFilters
+    },
+
     searchSettings: function () {
       return this.$store.getters.getSearchSettings
     },
@@ -130,6 +135,13 @@ export default defineComponent({
         this.isArrowBackwardDisabled = !window.navigation.canGoBack
       }
     },
+
+    searchFromFilters: function(val) {
+      if (val) {
+        this.goToSearch(this.query, {})
+        this.$store.dispatch('resetSearchFromFilters')
+      }
+    }
   },
   mounted: function () {
     let previousWidth = window.innerWidth
@@ -288,13 +300,18 @@ export default defineComponent({
       }
     },
 
+    processInput: function (query) {
+      const trimmedQuery = query.trim()
+      this.query = trimmedQuery
+
+      this.updateShowSearchButton(trimmedQuery !== '')
+      this.getSearchSuggestionsDebounce(trimmedQuery)
+    },
+
     getSearchSuggestionsDebounce: function (query) {
-      if (this.enableSearchSuggestions) {
-        const trimmedQuery = query.trim()
-        if (trimmedQuery !== this.lastSuggestionQuery) {
-          this.lastSuggestionQuery = trimmedQuery
-          this.debounceSearchResults(trimmedQuery)
-        }
+      if (this.enableSearchSuggestions && query !== this.lastSuggestionQuery) {
+        this.lastSuggestionQuery = query
+        this.debounceSearchResults(query)
       }
     },
 
@@ -444,7 +461,8 @@ export default defineComponent({
 
     ...mapActions([
       'getYoutubeUrlInfo',
-      'showSearchFilters'
+      'showSearchFilters',
+      'updateShowSearchButton'
     ])
   }
 })

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

@@ -95,7 +95,7 @@
           :data-list="searchSuggestionsDataList"
           :spellcheck="false"
           :show-clear-text-button="true"
-          @input="getSearchSuggestionsDebounce"
+          @input="processInput"
           @click="goToSearch"
         />
         <font-awesome-icon

src/renderer/store/modules/utils.js

@@ -42,6 +42,8 @@ const state = {
   regionNames: [],
   regionValues: [],
   recentBlogPosts: [],
+  searchFromFilters: false,
+  showSearchButton: false,
   searchSettings: {
     sortBy: 'relevance',
     time: '',
@@ -92,6 +94,14 @@ const getters = {
     return state.cachedPlaylist
   },
 
+  getSearchFromFilters(state) {
+    return state.searchFromFilters
+  },
+
+  getShowSearchButton(state) {
+    return state.showSearchButton
+  },
+
   getSearchSettings(state) {
     return state.searchSettings
   },
@@ -396,6 +406,18 @@ const actions = {
     commit('setShowSearchFilters', false)
   },
 
+  triggerSearchFromFilters ({ commit }) {
+    commit('setSearchFromFilters', true)
+  },
+
+  resetSearchFromFilters ({ commit }) {
+    commit('setSearchFromFilters', false)
+  },
+
+  updateShowSearchButton ({ commit }, value) {
+    commit('setShowSearchButton', value)
+  },
+
   updateShowProgressBar ({ commit }, value) {
     commit('setShowProgressBar', value)
   },
@@ -876,6 +898,14 @@ const mutations = {
     state.showSearchFilters = payload
   },
 
+  setSearchFromFilters (state, value) {
+    state.searchFromFilters = value
+  },
+
+  setShowSearchButton (state, value) {
+    state.showSearchButton = value
+  },
+
   setToBeAddedToPlaylistVideoList (state, payload) {
     state.toBeAddedToPlaylistVideoList = payload
   },

static/locales/en-US.yaml

@@ -122,6 +122,7 @@ Search Filters:
   Fetching results. Please wait: Fetching results. Please wait
   Fetch more results: Fetch more results
   There are no more results for this search: There are no more results for this search
+  Search: Search
 # Sidebar
 Subscriptions:
     # On Subscriptions Page