feat(search): adds search memory & history

Author: dvcol

src/components/container/ContainerComponent.ce.vue

@@ -151,6 +151,7 @@ const root = ref<HTMLElement>();
   }
 }
 
+.n-popselect-menu,
 .n-select-menu {
   @include mixin.hover-background(var(--bg-color-20), var(--bg-color-80));
 

src/components/views/search/SearchNavbar.vue

@@ -3,6 +3,7 @@ import {
   NFlex,
   NIcon,
   NInput,
+  NPopselect,
   NSelect,
   NSwitch,
   NTooltip,
@@ -30,11 +31,37 @@ import { useDebouncedSearch } from '~/utils/store.utils';
 
 const i18n = useI18n('navbar', 'search');
 
-const { search, types, query, pageSize, loading } = useSearchStoreRefs();
+const { search, types, query, pageSize, loading, history } = useSearchStoreRefs();
 
 const typeOptions = ref<TraktSearchType[]>(SupportedSearchType);
 
-const debouncedSearch = useDebouncedSearch(search, 800);
+const inputFocus = ref(false);
+const toggleFocus = (focus: boolean) => {
+  inputFocus.value = focus;
+};
+
+const debouncedSearch = useDebouncedSearch(search, 1000);
+
+const filteredHistory = computed(() =>
+  [...history.value]
+    .filter(val => {
+      const _search = debouncedSearch.value?.toLowerCase().trim();
+      if (!_search) return false;
+      const _val = val.toLowerCase().trim();
+      if (_val === _search) return false;
+      return _val.includes(_search) || _search.includes(_val);
+    })
+    .slice(0, 10),
+);
+
+const historyOptions = computed(() =>
+  filteredHistory.value.map(value => ({ value, label: value })),
+);
+
+const showHistory = computed(() => {
+  if (!inputFocus.value) return false;
+  return !!filteredHistory.value.length;
+});
 
 defineProps({
   parentElement: {
@@ -131,7 +158,7 @@ const hideTooltip = () => {
 const inputRef = ref();
 
 onActivated(() => {
-  inputRef.value?.focus();
+  if (!search.value) inputRef.value?.focus();
 });
 </script>
 
@@ -174,20 +201,29 @@ onActivated(() => {
         </NFlex>
       </NFlex>
       <template #trigger>
-        <NInput
-          ref="inputRef"
+        <NPopselect
           v-model:value="debouncedSearch"
-          class="search-input"
-          :loading="loading"
-          :disabled="loading"
-          :placeholder="i18n('search', 'navbar')"
-          autosize
-          clearable
+          :options="historyOptions"
+          :to="parentElement"
+          :show="showHistory"
         >
-          <template #prefix>
-            <NIcon :component="IconLoop" />
-          </template>
-        </NInput>
+          <NInput
+            ref="inputRef"
+            v-model:value="debouncedSearch"
+            class="search-input"
+            :loading="loading"
+            :disabled="loading"
+            :placeholder="i18n('search', 'navbar')"
+            autosize
+            clearable
+            :on-input-focus="() => toggleFocus(true)"
+            :on-input-blur="() => toggleFocus(false)"
+          >
+            <template #prefix>
+              <NIcon :component="IconLoop" />
+            </template>
+          </NInput>
+        </NPopselect>
       </template>
     </NTooltip>
 

src/stores/data/search.store.ts

@@ -10,6 +10,7 @@ import { type ListScrollItem, ListScrollItemType } from '~/models/list-scroll.mo
 import { NotificationService } from '~/services/notification.service';
 import { TraktService } from '~/services/trakt.service';
 import { storage } from '~/utils/browser/browser-storage.utils';
+import { debounce } from '~/utils/debounce.utils';
 import { debounceLoading, useLoadingPlaceholder } from '~/utils/store.utils';
 
 export type SearchResult = Omit<TraktSearchResult, 'type'> & {
@@ -33,26 +34,64 @@ export const useSearchStore = defineStore('data.search', () => {
 
   const searchResults = ref<SearchResult[]>([]);
 
+  const history = ref<Set<string>>(new Set());
+
+  const saveHistory = debounce(() => storage.local.set('data.search.history', [...history.value]), 1000);
+  const saveSearch = debounce(() => storage.local.set('data.search.last', { value: search.value, date: Date.now() }), 1000);
+
+  const addToHistory = (value: string = search.value) => {
+    const newArray = [...history.value, value].filter(Boolean);
+    // Keep only the last 100 elements
+    if (newArray.length > 100) {
+      history.value = new Set(newArray.slice(-100));
+    } else {
+      history.value = new Set(newArray);
+    }
+    return Promise.all([saveHistory(), saveSearch()]);
+  };
+
   const clearState = () => {
     types.value = DefaultSearchType;
     query.value = false;
     pagination.value = undefined;
     search.value = '';
+    history.value = new Set();
   };
 
   const saveState = async () =>
     storage.local.set('data.search', {
       types: [...types.value],
       query: query.value,
+      pageSize: pageSize.value,
+      search: {
+        value: search.value,
+        date: new Date(),
+      },
     });
 
   const restoreState = async () => {
-    const restored = await storage.local.get<{
-      types: TraktSearchType[];
-      query: boolean;
-    }>('data.search');
-    if (restored?.types) types.value = restored.types;
-    if (restored?.query) query.value = restored.query;
+    const [_state, _history, _search] = await Promise.all([
+      storage.local.get<{
+        types: TraktSearchType[];
+        query: boolean;
+        pageSize: number;
+      }>('data.search'),
+      storage.local.get<string[]>('data.search.history'),
+      storage.local.get<{
+        value: string;
+        date: Date;
+      }>('data.search.last'),
+    ]);
+
+    if (_state?.types) types.value = _state.types;
+    if (_state?.query) query.value = _state.query;
+    if (_state?.pageSize) pageSize.value = _state.pageSize;
+    if (_history) history.value = new Set(_history);
+
+    if (_search?.date) {
+      const day = new Date(_search.date).toLocaleDateString();
+      if (day === new Date().toLocaleDateString()) search.value = _search.value;
+    }
   };
 
   const loadingPlaceholder = useLoadingPlaceholder<SearchResult>(pageSize);
@@ -105,7 +144,10 @@ export const useSearchStore = defineStore('data.search', () => {
   const initSearchStore = async () => {
     await restoreState();
 
-    watch(search, () => fetchSearchResults());
+    watch(search, async () => {
+      await fetchSearchResults();
+      await addToHistory().catch(e => console.error('Failed to save search history', e));
+    });
 
     watch(pageSize, async () => {
       await fetchSearchResults();
@@ -122,6 +164,7 @@ export const useSearchStore = defineStore('data.search', () => {
     types,
     query,
     search,
+    history,
     clearState,
     initSearchStore,
     fetchSearchResults,

src/utils/store.utils.ts

@@ -107,7 +107,7 @@ export const watchUserChange = ({
   return { active, user };
 };
 
-export const useDebouncedSearch = (search: Ref<string>, delay = 350) => {
+export const useDebouncedSearch = (search: Ref<string>, delay = 350, disabled?: Ref<boolean>) => {
   const debouncedSearch = ref(search.value);
 
   watch(search, () => {
@@ -119,6 +119,7 @@ export const useDebouncedSearch = (search: Ref<string>, delay = 350) => {
   watch(
     debouncedSearch,
     debounce(() => {
+      if (disabled?.value) return;
       search.value = debouncedSearch.value;
     }, delay),
   );