add search history

src/components/NavBar.vue

@@ -101,7 +101,7 @@
         />
     </div>
     <SearchSuggestions
-        v-show="searchText && suggestionsVisible"
+        v-show="(searchText || showSearchHistory) && suggestionsVisible"
         ref="searchSuggestions"
         :search-text="searchText"
         @searchchange="onSearchTextChange"
@@ -137,6 +137,9 @@ export default {
         shouldShowTrending(_this) {
             return _this.getPreferenceString("homepage", "trending") != "trending";
         },
+        showSearchHistory() {
+            return localStorage.getItem("searchHistory") && localStorage.getItem("search_history");
+        },
     },
     methods: {
         // focus on search bar when Ctrl+k is pressed
@@ -163,6 +166,7 @@ export default {
             }
         },
         onInputFocus() {
+            if (this.showSearchHistory) this.$refs.searchSuggestions.refreshSuggestions();
             this.suggestionsVisible = true;
         },
         onInputBlur() {

src/components/PreferencesPage.vue

@@ -96,6 +96,16 @@
             @change="onChange($event)"
         />
     </label>
+    <label class="pref" for="chkStoreSearchHistory">
+        <strong v-t="'actions.store_search_history'" />
+        <input
+            id="chkStoreSearchHistory"
+            v-model="searchHistory"
+            class="checkbox"
+            type="checkbox"
+            @change="onChange($event)"
+        />
+    </label>
     <label class="pref" for="chkStoreWatchHistory">
         <strong v-t="'actions.store_watch_history'" />
         <input
@@ -355,6 +365,7 @@ export default {
             minimizeDescription: false,
             minimizeRecommendations: false,
             watchHistory: false,
+            searchHistory: false,
             selectedLanguage: "en",
             languages: [
                 { code: "ar", name: "Arabic" },
@@ -489,6 +500,7 @@ export default {
             this.minimizeDescription = this.getPreferenceBoolean("minimizeDescription", false);
             this.minimizeRecommendations = this.getPreferenceBoolean("minimizeRecommendations", false);
             this.watchHistory = this.getPreferenceBoolean("watchHistory", false);
+            this.searchHistory = this.getPreferenceBoolean("searchHistory", false);
             this.selectedLanguage = this.getPreferenceString("hl", await this.defaultLangage);
             this.enabledCodecs = this.getPreferenceString("enabledCodecs", "vp9,avc").split(",");
             this.disableLBRY = this.getPreferenceBoolean("disableLBRY", false);
@@ -546,6 +558,7 @@ export default {
                 localStorage.setItem("minimizeDescription", this.minimizeDescription);
                 localStorage.setItem("minimizeRecommendations", this.minimizeRecommendations);
                 localStorage.setItem("watchHistory", this.watchHistory);
+                localStorage.setItem("searchHistory", this.searchHistory);
                 localStorage.setItem("hl", this.selectedLanguage);
                 localStorage.setItem("enabledCodecs", this.enabledCodecs.join(","));
                 localStorage.setItem("disableLBRY", this.disableLBRY);

src/components/SearchResults.vue

@@ -77,6 +77,7 @@ export default {
     mounted() {
         if (this.handleRedirect()) return;
         this.updateResults();
+        this.saveQueryToHistory();
     },
     activated() {
         this.handleRedirect();
@@ -138,6 +139,15 @@ export default {
                 return true;
             }
         },
+        saveQueryToHistory() {
+            if (!this.getPreferenceBoolean("searchHistory", false)) return;
+            const query = this.$route.query.search_query;
+            if (!query) return;
+            const searchHistory = JSON.parse(localStorage.getItem("search_history")) ?? [];
+            if (!searchHistory.includes(query)) searchHistory.push(query);
+            if (searchHistory.length > 3) searchHistory.shift();
+            localStorage.setItem("search_history", JSON.stringify(searchHistory));
+        },
     },
 };
 </script>

src/components/SearchSuggestions.vue

@@ -47,11 +47,15 @@ export default {
             }
         },
         async refreshSuggestions() {
-            this.searchSuggestions = (
+            if (!this.searchText) {
-                await this.fetchJson(this.apiUrl() + "/opensearch/suggestions", {
+                this.searchSuggestions = JSON.parse(localStorage.getItem("search_history")) ?? [];
-                    query: this.searchText,
+            } else {
-                })
+                this.searchSuggestions = (
-            )?.[1];
+                    await this.fetchJson(this.apiUrl() + "/opensearch/suggestions", {
+                        query: this.searchText,
+                    })
+                )?.[1];
+            }
             this.searchSuggestions.unshift(this.searchText);
             this.setSelected(0);
         },

src/locales/en.json

@@ -106,7 +106,8 @@
         "follow_link": "Follow link",
         "copy_link": "Copy link",
         "time_code": "Time code (in seconds)",
-        "show_chapters": "Chapters"
+        "show_chapters": "Chapters",
+        "store_search_history": "Store Search history"
     },
     "comment": {
         "pinned_by": "Pinned by",