Added search button to search filters

src/renderer/App.js

@@ -51,7 +51,8 @@ export default defineComponent({
       externalLinkOpeningPromptValues: [
         'yes',
         'no'
-      ]
+      ],
+      searchQueryText: ''
     }
   },
   computed: {
@@ -564,6 +565,10 @@ export default defineComponent({
       }
     },
 
+    updateSearchQueryText: function(queryText) {
+      this.searchQueryText = queryText
+    },
+
     ...mapActions([
       'grabUserSettings',
       'grabAllProfiles',

src/renderer/App.vue

@@ -49,6 +49,7 @@
     />
     <ft-search-filters
       v-if="showSearchFilters"
+      :search-query-text="searchQueryText"
     />
     <ft-playlist-add-video-prompt
       v-if="showAddToPlaylistPrompt"
@@ -63,6 +64,7 @@
     <top-nav
       ref="topNav"
       :inert="isPromptOpen"
+      @search-query-text="updateSearchQueryText"
     />
     <side-nav
       ref="sideNav"

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)"
@@ -81,6 +88,14 @@ import FtButton from '../ft-button/ft-button.vue'
 import FtCheckboxList from '../ft-checkbox-list/ft-checkbox-list.vue'
 
 import store from '../../store/index'
+import { clearLocalSearchSuggestionsSession } from '../../helpers/api/local'
+
+const props = defineProps({
+  searchQueryText: {
+    type: String,
+    required: true
+  }
+})
 
 const { t } = useI18n()
 
@@ -201,12 +216,24 @@ const searchFilterValueChanged = computed(() => {
 
 const searchSettings = computed(() => store.getters.getSearchSettings)
 
+const showSearchButton = computed(() => props.searchQueryText !== '')
+
 const searchSortByStartIndex = SORT_BY_VALUES.indexOf(searchSettings.value.sortBy)
 const searchTimeStartIndex = TIME_VALUES.indexOf(searchSettings.value.time)
 const searchTypeStartIndex = TYPE_VALUES.indexOf(searchSettings.value.type)
 const searchDurationStartIndex = DURATION_VALUES.indexOf(searchSettings.value.duration)
 const searchDefaultFeatures = [...searchSettings.value.features]
 
+async function searchFromFilters() {
+  hideSearchFilters()
+  clearLocalSearchSuggestionsSession()
+
+  const queryText = props.searchQueryText
+  const doCreateNewWindow = false
+
+  await store.dispatch('search', { queryText, doCreateNewWindow })
+}
+
 function hideSearchFilters() {
   store.dispatch('hideSearchFilters')
 }

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

@@ -6,7 +6,7 @@ import FtIconButton from '../ft-icon-button/ft-icon-button.vue'
 import debounce from 'lodash.debounce'
 
 import { IpcChannels, KeyboardShortcuts, MOBILE_WIDTH_THRESHOLD } from '../../../constants'
-import { localizeAndAddKeyboardShortcutToActionTitle, openInternalPath } from '../../helpers/utils'
+import { localizeAndAddKeyboardShortcutToActionTitle } from '../../helpers/utils'
 import { translateWindowTitle } from '../../helpers/strings'
 import { clearLocalSearchSuggestionsSession, getLocalSearchSuggestions } from '../../helpers/api/local'
 import { invidiousAPICall } from '../../helpers/api/invidious'
@@ -21,6 +21,7 @@ export default defineComponent({
     FtInput,
     FtProfileSelector
   },
+  emits: ['search-query-text'],
   data: () => {
     let isArrowBackwardDisabled = true
     let isArrowForwardDisabled = true
@@ -168,111 +169,12 @@ export default defineComponent({
 
       clearLocalSearchSuggestionsSession()
 
-      this.getYoutubeUrlInfo(queryText).then((result) => {
-        switch (result.urlType) {
-          case 'video': {
-            const { videoId, timestamp, playlistId } = result
-
-            const query = {}
-            if (timestamp) {
-              query.timestamp = timestamp
-            }
-            if (playlistId && playlistId.length > 0) {
-              query.playlistId = playlistId
-            }
-
-            openInternalPath({
-              path: `/watch/${videoId}`,
-              query,
-              doCreateNewWindow,
-              searchQueryText: queryText,
-            })
-            break
-          }
-
-          case 'playlist': {
-            const { playlistId, query } = result
-
-            openInternalPath({
-              path: `/playlist/${playlistId}`,
-              query,
-              doCreateNewWindow,
-              searchQueryText: queryText,
-            })
-            break
-          }
-
-          case 'search': {
-            const { searchQuery, query } = result
-
-            openInternalPath({
-              path: `/search/${encodeURIComponent(searchQuery)}`,
-              query,
-              doCreateNewWindow,
-              searchQueryText: searchQuery,
-            })
-            break
-          }
-
-          case 'hashtag': {
-            const { hashtag } = result
-            openInternalPath({
-              path: `/hashtag/${encodeURIComponent(hashtag)}`,
-              doCreateNewWindow,
-              searchQueryText: `#${hashtag}`,
-            })
-
-            break
-          }
-
-          case 'post': {
-            const { postId, query } = result
-
-            openInternalPath({
-              path: `/post/${postId}`,
-              query,
-              doCreateNewWindow,
-              searchQueryText: queryText,
-            })
-            break
-          }
-
-          case 'channel': {
-            const { channelId, subPath, url } = result
-
-            openInternalPath({
-              path: `/channel/${channelId}/${subPath}`,
-              doCreateNewWindow,
-              query: {
-                url,
-              },
-              searchQueryText: queryText,
-            })
-            break
-          }
-
-          case 'invalid_url':
-          default: {
-            openInternalPath({
-              path: `/search/${encodeURIComponent(queryText)}`,
-              query: {
-                sortBy: this.searchSettings.sortBy,
-                time: this.searchSettings.time,
-                type: this.searchSettings.type,
-                duration: this.searchSettings.duration,
-                features: this.searchSettings.features,
-              },
-              doCreateNewWindow,
-              searchQueryText: queryText,
-            })
-          }
-        }
+      await this.search({ queryText, doCreateNewWindow })
 
-        if (doCreateNewWindow) {
-          // Query text copied to new window = can be removed from current window
-          this.updateSearchInputText('')
-        }
-      })
+      if (doCreateNewWindow) {
+        // Query text copied to new window = can be removed from current window
+        this.updateSearchInputText('')
+      }
     },
 
     focusSearch: function () {
@@ -289,6 +191,8 @@ export default defineComponent({
     },
 
     getSearchSuggestionsDebounce: function (query) {
+      this.emitSearchInputText(query)
+
       if (this.enableSearchSuggestions) {
         const trimmedQuery = query.trim()
         if (trimmedQuery !== this.lastSuggestionQuery) {
@@ -432,6 +336,7 @@ export default defineComponent({
       this.$router.push('/' + route)
     },
     updateSearchInputText: function (text) {
+      this.emitSearchInputText(text)
       this.$refs.searchInput.updateInputData(text)
     },
     setActiveNavigationHistoryEntryTitle(value) {
@@ -442,8 +347,12 @@ export default defineComponent({
       })
     },
 
+    emitSearchInputText: function (text) {
+      this.$emit('search-query-text', text)
+    },
+
     ...mapActions([
-      'getYoutubeUrlInfo',
+      'search',
       'showSearchFilters'
     ])
   }

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

@@ -97,6 +97,7 @@
           :show-clear-text-button="true"
           @input="getSearchSuggestionsDebounce"
           @click="goToSearch"
+          @clear="emitSearchInputText('')"
         />
         <font-awesome-icon
           class="navFilterIcon navIcon"