feat(search): adds recent search and allow type search

Author: dvcol

src/components/common/list/ListItem.vue

@@ -156,7 +156,6 @@ const overOpen = (e: MouseEvent) => {
 
 const onHover = (_event: MouseEvent, _hover: boolean) => {
   emit('onHover', { item: item?.value, hover: _hover });
-  itemRef.value?.$el?.focus({ preventScroll: true });
   open.value = _hover && (_event.altKey || _event.ctrlKey);
   if (!_hover) dragged.value = 0;
   if (!_hover) return clearTimeout(hoverTimeout.value);

src/components/views/search/SearchNavbar.vue

@@ -23,9 +23,9 @@ import IconChevronUp from '~/components/icons/IconChevronUpSmall.vue';
 import IconList from '~/components/icons/IconList.vue';
 import IconLoop from '~/components/icons/IconLoop.vue';
 import IconMovie from '~/components/icons/IconMovie.vue';
+import IconRestore from '~/components/icons/IconRestore.vue';
 import IconScreen from '~/components/icons/IconScreen.vue';
 import IconYoutube from '~/components/icons/IconYoutube.vue';
-
 import { ResolveExternalLinks } from '~/settings/external.links';
 import { SupportedSearchType, useSearchStoreRefs } from '~/stores/data/search.store';
 import { debounce } from '~/utils/debounce.utils';
@@ -34,34 +34,6 @@ import { useDebouncedSearch } from '~/utils/store.utils';
 
 const i18n = useI18n('navbar', 'search');
 
-const { search, types, query, pageSize, loading, history } = useSearchStoreRefs();
-
-const typeOptions = ref<TraktSearchType[]>(SupportedSearchType);
-
-const inputFocus = ref(false);
-const toggleFocus = (focus: boolean) => {
-  inputFocus.value = focus;
-};
-
-const debouncedSearch = useDebouncedSearch(search, 1000);
-const external = computed(() => ResolveExternalLinks.trakt.query(debouncedSearch.value));
-
-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 { reverse } = defineProps({
   parentElement: {
     type: HTMLElement,
@@ -74,6 +46,63 @@ const { reverse } = defineProps({
   },
 });
 
+const { search, types, query, pageSize, loading, history } = useSearchStoreRefs();
+
+const typeOptions = ref<TraktSearchType[]>(SupportedSearchType);
+
+const debouncedSearch = useDebouncedSearch(search, 1000);
+const external = computed(() => ResolveExternalLinks.trakt.query(debouncedSearch.value));
+
+const filteredHistory = computed(() => {
+  const _search = debouncedSearch.value?.toLowerCase().trim();
+
+  if (!_search || !history.value) {
+    return { filter: [], recent: Array.from(history.value) };
+  }
+
+  const filter: string[] = [];
+  const recent: string[] = [];
+
+  history.value.forEach(value => {
+    const _val = value.toLowerCase().trim();
+    if (_val === _search) return;
+    if (_val.includes(_search) || _search.includes(_val)) {
+      filter.push(value);
+    } else if (recent.length < 5) {
+      recent.push(value);
+    }
+  });
+
+  return { filter, recent };
+});
+const historyOptions = computed(() => {
+  const results = [];
+  const filter = {
+    type: 'group',
+    label: i18n('option_group_filter'),
+    key: 'filter',
+    children: filteredHistory.value.filter.map(value => ({
+      value,
+      label: value,
+      key: `filter-${value}`,
+    })),
+  };
+  if (filter.children.length) results.push(filter);
+  const recent = {
+    type: 'group',
+    label: i18n('option_group_recent'),
+    key: 'recent',
+    children: filteredHistory.value.recent.map(value => ({
+      value,
+      label: value,
+      key: `recent-${value}`,
+      icon: IconRestore,
+    })),
+  };
+  if (recent.children.length) results.push(recent);
+  return results;
+});
+
 const selectedValues = computed({
   get: () => types.value,
   set: selected => {
@@ -98,8 +127,11 @@ const getIcon = (type: TraktSearchType) => {
 
 const open = ref(false);
 
-type SearchOption = SelectOption & { value: TraktSearchType; icon: Component };
-const searchOptions = computed<SearchOption[]>(() =>
+type SearchOption<T extends string = string> = SelectOption & {
+  value: T;
+  icon: Component;
+};
+const searchOptions = computed<SearchOption<TraktSearchType>[]>(() =>
   typeOptions.value.map(type => ({
     label: i18n(type, 'navbar', 'search', 'type'),
     value: type,
@@ -169,7 +201,9 @@ const placement = computed(() => (reverse ? 'top' : 'bottom'));
 
 onActivated(() => {
   if (!search.value) inputRef.value?.focus();
-  if (typeof route?.query?.search === 'string') search.value = route.query.search;
+  const _search = route?.query?.search;
+  if (typeof _search !== 'string') return;
+  search.value = _search.trim();
 });
 </script>
 
@@ -218,12 +252,9 @@ onActivated(() => {
           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)"
           :options="historyOptions"
           :to="parentElement"
         >

src/i18n/en/navbar/navbar-search.json

@@ -82,5 +82,13 @@
   "navbar__search__tooltip_regex": {
     "message": "Used for searching using regular expressions.",
     "description": "Search query tooltip for the regex keywords (/)"
+  },
+  "navbar__search__option_group_filter": {
+    "message": "Filter",
+    "description": "Label for the search option group filter"
+  },
+  "navbar__search__option_group_recent": {
+    "message": "Recent",
+    "description": "Label for the search option group recent"
   }
 }

src/stores/data/search.store.ts

@@ -29,6 +29,7 @@ export type SearchResult = Omit<TraktSearchResult, 'type'> & {
 
 export const SupportedSearchType: TraktSearchType[] = ['episode', 'show', 'movie', 'person'];
 export const DefaultSearchType: TraktSearchType[] = ['show', 'movie'];
+export const minSearchLength = 3;
 
 const getSearchId = (result: TraktSearchResult) => {
   if (!result) return;
@@ -74,16 +75,17 @@ export const useSearchStore = defineStore(SearchStoreConstants.Store, () => {
   const saveHistory = debounce(() => storage.local.set(SearchStoreConstants.LocalHistory, [...history.value]), 1000);
   const saveSearch = debounce(() => storage.local.set(SearchStoreConstants.LocalLast, { value: search.value, date: Date.now() }), 1000);
 
-  const addToHistory = (value: string = search.value) => {
-    const newArray = [...history.value, value].filter(Boolean);
+  const addToHistory = debounce((value: string = search.value) => {
+    if (!value || value.trim().length < minSearchLength) return;
+    const newArray = [value, ...history.value].map(v => v.trim()).filter(v => v && v.length > 3);
     // Keep only the last 100 elements
     if (newArray.length > 100) {
-      history.value = new Set(newArray.slice(-100));
+      history.value = new Set(newArray.slice(0, 100));
     } else {
       history.value = new Set(newArray);
     }
     return Promise.all([saveHistory(), saveSearch()]);
-  };
+  }, 3000);
 
   const clearState = () => {
     types.value = DefaultSearchType;
@@ -186,8 +188,9 @@ export const useSearchStore = defineStore(SearchStoreConstants.Store, () => {
     await restoreState();
 
     watch(search, async () => {
+      if (!search.value || search.value.length < minSearchLength) return;
       await fetchSearchResults();
-      await addToHistory().catch(e => Logger.error('Failed to save search history', e));
+      addToHistory().catch(e => Logger.error('Failed to save search history', e));
     });
 
     watch([pageSize, types], async () => {
@@ -201,6 +204,7 @@ export const useSearchStore = defineStore(SearchStoreConstants.Store, () => {
     query,
     search,
     history,
+    addToHistory,
     clearState,
     initSearchStore,
     fetchSearchResults,