feat: add search history on product landing page

See: FE-96

Author: marcel-bitfly

frontend/i18n/locales/en.json

@@ -5,14 +5,17 @@
         },
         "beaconchain_homepage": "Beaconchain Homepage",
         "common": {
+            "action": {
+                "try_again": "Try again"
+            },
             "all": "All",
             "close": "Close",
-            "error_retry": "An error occurred. Please try again.",
             "ethereum": "Ethereum",
             "log_in": "Log in",
             "no_results": "No results found.",
             "open_navigation": "Open Navigation",
-            "side_navigation": "Side Navigation"
+            "side_navigation": "Side Navigation",
+            "something_went_wrong": "Something went wrong."
         },
         "footer": {
             "color_mode": {
@@ -1230,6 +1233,13 @@
             },
             "search": {
                 "filter_aria_label": "Filter by type",
+                "history": {
+                    "action": {
+                        "toggle_history": "Toggle Search History"
+                    },
+                    "recent": "Search History"
+
+                },
                 "input_label": "Search by Address / Tx hash / Block / Token / ENS",
                 "input_placeholder": "Search anything...",
                 "loading_message": "Loading search results...",

frontend/layers/base/app/components/BaseButton.vue

@@ -43,7 +43,13 @@ const {
       :name="leadingIcon"
       class=""
     />
-    <span class="px-lg">
+    <span
+      :class="[
+        size === 'xl' && 'px-lg',
+        size === 'lg' && 'px-md',
+        size === 'md' && 'px-xs',
+      ]"
+    >
       <slot />
     </span>
     <LazyBaseIcon

frontend/layers/base/app/components/BaseButtonIcon.vue

@@ -6,6 +6,7 @@ import type { IconName } from '~/layers/base/app/components/BaseIcon.vue'
 
 const {
   size = 'md',
+  to,
 } = defineProps<(
   {
     // eslint-disable-next-line vue/prop-name-casing -- conditional props for props like `ariaLabel` do not work
@@ -19,17 +20,21 @@ const {
   }
 )
 & {
+  isDisabled?: boolean,
   name: IconName,
   size?: 'lg' | 'md',
   to?: NuxtLinkProps['to'],
   variant: 'secondary' | 'tertiary',
 }
 >()
+const isButton = computed(() => !to)
 </script>
 
 <template>
   <component
-    :is="to ? NuxtLink : 'button'"
+    :is="isButton ? 'button' : NuxtLink"
+    :type="isButton ? 'button' : undefined"
+    :disabled="isDisabled"
     :to
     class="border flex rounded-full bg-linear-to-b disabled:opacity-40 aria-disabled:opacity-40 active:opacity-80 size-fit"
     :class="[

frontend/layers/base/app/components/BaseChipGroup.vue

@@ -61,7 +61,7 @@ const handleSelectFilter = (value: ChipItem['value']) => {
 
 <template>
   <ul
-    class="flex gap-md px-2xl py-lg"
+    class="flex gap-md"
     role="group"
     :aria-label
   >

frontend/layers/base/app/components/BaseSearchInput.vue

@@ -31,17 +31,13 @@ const input = defineModel<string>({
 watchDebounced(
   input,
   async () => {
-    if (input.value.length) {
-      emit('search', input.value)
-      hasSearched.value = true
-    }
+    emit('search', input.value)
   },
   {
     immediate: false,
   },
 )
 
-const showDropdown = computed(() => isLoading || hasSearched.value)
 const groupedResults = computed(() => {
   if (!results?.length) return
   if (!groupBy) return
@@ -58,6 +54,7 @@ const handleClickOutside = (e: PointerDownOutsideEvent) => {
   input.value = ''
   hasSearched.value = false
 }
+const idSearchInput = useId()
 </script>
 
 <template>
@@ -66,19 +63,19 @@ const handleClickOutside = (e: PointerDownOutsideEvent) => {
     class="base-search-input__form p-2xl isolate"
   >
     <RkComboboxRoot
-      v-model:open="showDropdown"
+      :open-on-focus="!!results?.length"
       class="relative"
       ignore-filter
       :reset-search-term-on-blur="false"
     >
       <RkLabel
-        for="search-input"
+        :for="idSearchInput"
         class="absolute bottom-2xl left-2xl dark:text-gray-400 text-sm-tight"
       >
         {{ label }}
       </RkLabel>
       <RkComboboxInput
-        id="search-input"
+        :id="idSearchInput"
         ref="search-input"
         v-model.trim="input"
         type="search"
@@ -89,13 +86,16 @@ const handleClickOutside = (e: PointerDownOutsideEvent) => {
         dark:focus:border-charcoal-50 dark:focus-within:outline-0"
         @update:model-value="(value) => { if (!value) hasSearched = false }"
       />
-
       <RkComboboxContent
+        v-if="results !== undefined || isLoading || hasError"
         class="absolute z-10 bg-gray-50 dark:bg-gray-950 mt-xl rounded-xl w-full max-h-[400px]"
         @pointer-down-outside="handleClickOutside"
+        @focus-outside.prevent
       >
-        <slot name="dropdown-fixed-header" />
-
+        <slot
+          name="dropdown-fixed-header"
+          :id-search-input
+        />
         <div
           role="presentation"
           class="overflow-y-auto overscroll-contain"
@@ -113,17 +113,27 @@ const handleClickOutside = (e: PointerDownOutsideEvent) => {
             >
               <div
                 role="alert"
-                class="px-2xl py-md dark:text-gray-400 "
+                class="px-2xl py-md dark:text-gray-400 flex items-center"
               >
-                {{ $t('base.common.error_retry') }}
+                <div>
+                  {{ $t('base.common.something_went_wrong') }}
+                </div>
+                <BaseButton
+                  trailing-icon="rotate"
+                  variant="quaternary"
+                  @click="$emit('search', input)"
+                >
+                  {{ $t('base.common.action.try_again') }}
+                </BaseButton>
               </div>
             </slot>
 
-            <slot v-else-if="!results?.length">
-              <div class="dark:text-gray-400 px-2xl py-md font-semibold">
-                {{ $t('base.common.no_results') }}
-              </div>
-            </slot>
+            <div
+              v-else-if="!results?.length"
+              class="dark:text-gray-400 px-2xl py-md font-semibold"
+            >
+              {{ $t('base.common.no_results') }}
+            </div>
 
             <template v-else-if="results?.length && groupBy">
               <RkComboboxGroup
@@ -176,10 +186,6 @@ const handleClickOutside = (e: PointerDownOutsideEvent) => {
 </template>
 
 <style lang="scss" scoped>
-.search-input::-webkit-search-cancel-button {
-  display: none;
-}
-
 form {
   position: relative;
 

frontend/layers/base/app/composables/useLocalStorage.ts

@@ -0,0 +1,10 @@
+import { useStorage } from '@vueuse/core'
+
+type LocalStorageKey = 'bc-search-history-product-landing'
+
+export const useLocalStorage
+  = <T extends MaybeRefOrGetter<boolean | null | number | Record<PropertyKey, any> | string>>
+  (key: LocalStorageKey, value: T) => {
+    const state = useStorage<T>(key, value)
+    return state
+  }

frontend/layers/products/app/components/BlockchainSearchInput.vue

@@ -20,7 +20,7 @@ const {
 const { t: $t } = useTranslation()
 
 const emit = defineEmits<{
-  (e: 'search'): void,
+  (e: 'search', input: string): void,
 }>()
 
 const searchParams = defineModel<BlockchainSearchParams>({
@@ -50,8 +50,9 @@ const chips: { label: string, value: BlockchainSearchParams['types'][number] }[]
   },
 ]
 
-const handleSearch = () => {
-  emit('search')
+const handleSearch = (input: string) => {
+  isHistoryVisible.value = false
+  emit('search', input)
 }
 
 const handleTypeFilterChange = () => {
@@ -61,29 +62,80 @@ const handleTypeFilterChange = () => {
     searchParams.value.types = typeFilters
   }
 
-  handleSearch()
+  handleSearch(searchParams.value.input)
 }
+const history = useLocalStorage<string[]>('bc-search-history-product-landing', [])
+// using localHistory instead of history directly to avoid
+// that the search history in the UI is updated before navigating away
+const localHistory = ref<InternalPostSearchResponseWithChainId['data']>(history.value.map(item => JSON.parse(item)))
+const hasHistory = computed(() => !!localHistory.value.length)
+const hasResults = computed(() => results !== undefined)
+
+const isHistoryVisible = ref<boolean>(!hasResults.value && hasHistory.value)
+const resultsOrHistory = computed(() => {
+  if ((!hasResults.value && hasHistory.value) || isHistoryVisible.value) {
+    return localHistory.value
+  }
+  return results
+})
+const showHistory = () => {
+  isHistoryVisible.value = !isHistoryVisible.value
+  localHistory.value = history.value.map(item => JSON.parse(item))
+}
+const handleClick = (searchResult: InternalPostSearchResponseWithChainId['data'][number]) => {
+  const currentEntry = JSON.stringify(searchResult)
+  if (history.value.length >= 10) {
+    history.value.pop()
+  }
+  history.value = history.value.filter(entry => entry !== currentEntry)
+  history.value.unshift(currentEntry)
+}
+watch(hasResults, () => {
+  if (!hasHistory.value) return
+  if (hasResults.value) return
+  isHistoryVisible.value = true
+})
 </script>
 
 <template>
   <BaseSearchInput
     v-model="searchParams.input"
-    :is-loading
-    :has-error
+    :is-loading="isHistoryVisible ? false : isLoading"
+    :has-error="isHistoryVisible ? false : hasError"
     :label="$t('products.landing_page.search.input_label')"
     :placeholder="$t('products.landing_page.search.input_placeholder')"
     :group-by="'type'"
-    :results
+    :results="resultsOrHistory"
     @search="handleSearch"
   >
-    <template #dropdown-fixed-header>
-      <BaseChipGroup
-        v-model="searchParams.types"
-        :items="chips"
-        class="overflow-x-auto overscroll-contain min-h-fit"
-        :aria-label="$t('products.landing_page.search.filter_aria_label')"
-        @update:model-value="handleTypeFilterChange"
-      />
+    <template #dropdown-fixed-header="{ idSearchInput }">
+      <div
+        class="min-h-fit overflow-x-auto overscroll-contain flex gap-md items-center px-2xl py-lg"
+        @keydown.enter.stop
+      >
+        <BaseButtonIcon
+          v-if="hasHistory"
+          :aria-controls="idSearchInput"
+          :is-disabled="!hasResults"
+          role="switch"
+          screenreader-text="products.landing_page.search.history.action.toggle_history"
+          name="history"
+          :aria-checked="`${isHistoryVisible}`"
+          variant="secondary"
+          @click="showHistory"
+        />
+        <BaseChipGroup
+          v-if="!isHistoryVisible"
+          v-model="searchParams.types"
+          :aria-controls="idSearchInput"
+          :items="chips"
+          :aria-label="$t('products.landing_page.search.filter_aria_label')"
+          @update:model-value="handleTypeFilterChange"
+        />
+        <span v-else>
+          {{ $t('products.landing_page.search.history.recent') }}
+        </span>
+      </div>
       <hr class="mx-2xl text-gray-600">
     </template>
 
@@ -107,7 +159,10 @@ const handleTypeFilterChange = () => {
     </template>
 
     <template #result-item="{ result }">
-      <BlockchainSearchResultItem :result />
+      <BlockchainSearchResultItem
+        :result
+        @click="handleClick(result)"
+      />
     </template>
 
     <template #loading-content>

frontend/layers/products/app/pages/products/index.vue

@@ -54,6 +54,7 @@ const searchParams = ref<BlockchainSearchParams>({
 })
 
 const {
+  clear,
   data,
   error,
   execute,
@@ -64,6 +65,12 @@ const {
   method: 'POST',
   watch: false,
 })
+const handleSearch = (input: string) => {
+  if (!input.length) {
+    return clear()
+  }
+  execute()
+}
 </script>
 
 <template>
@@ -93,7 +100,7 @@ const {
           :type-filters="searchTypes"
           :is-loading="status === 'pending'"
           :has-error="!!error"
-          @search="execute()"
+          @search="handleSearch"
         />
       </ProductLandingpageSection>
       <ProductLandingpageSection class="mt-11xl">