[TAS-2514] 💄Listing page header UI revamp

src/components/SearchBar.vue

@@ -5,7 +5,13 @@
       preset="tertiary"
       @click="toggleSearch"
     >
-      <IconSearch />
+      <div class="flex flex-nowrap items-center gap-[8px]">
+        <IconSearch />
+        <p
+          class="text-medium-gray whitespace-nowrap"
+          v-text="$t('listing_page_search_label')"
+        />
+      </div>
     </ButtonV2>
     <div
       class="flex items-center justify-center cursor-pointer p-[8px] desktop:hidden"
@@ -42,10 +48,11 @@
     >
       <IconSearch />
       <input
-        :value="searchQuery"
+        ref="searchInput"
         class="w-full bg-transparent border-0 focus-visible:outline-none"
         type="text"
-        :placeholder="$t('gutenberg_search_placeholder')"
+        :value="searchQuery"
+        :placeholder="placeholderText"
         @input="debouncedUpdateSearchKeyword"
       />
       <ButtonV2
@@ -63,6 +70,7 @@
 
 <script>
 import debounce from 'lodash.debounce';
+import { SEARCH_SUGGESTIONS } from '@/constant/index';
 
 export default {
   name: 'SearchBar',
@@ -75,6 +83,7 @@ export default {
   data() {
     return {
       isSearchOpen: false,
+      placeholderText: this.$t('gutenberg_search_placeholder'),
     };
   },
   mounted() {
@@ -88,6 +97,10 @@ export default {
         this.$emit('clear');
       } else {
         this.$emit('open');
+        this.placeholderText = this.getRandomPlaceholder();
+        this.$nextTick(() => {
+          this.$refs.searchInput?.focus();
+        });
       }
       this.isSearchOpen = !this.isSearchOpen;
     },
@@ -97,6 +110,16 @@ export default {
       },
       200
     ),
+    getRandomPlaceholder() {
+      if (this.$i18n.locale === 'zh-Hant') {
+        const shuffled = [...SEARCH_SUGGESTIONS].sort(
+          () => Math.random() - 0.5
+        );
+        const randomTerms = shuffled.slice(0, 3);
+        return randomTerms.join('、');
+      }
+      return this.$t('gutenberg_search_placeholder');
+    },
   },
 };
 </script>

src/constant/index.js

@@ -428,3 +428,18 @@ export const SIGN_AUTHORIZATION_PERMISSIONS = [
   'read:nftcollection',
   'write:nftcollection',
 ];
+
+export const SEARCH_SUGGESTIONS = [
+  '免費',
+  '小說',
+  '旅遊',
+  '報刊',
+  '心靈',
+  '運動',
+  '董啟章',
+  '李立峯',
+  '新聞',
+  '理財',
+  '區塊鏈',
+  '繪本',
+];

src/constant/store.js

@@ -1,5 +1,6 @@
 export const SORTING_OPTIONS = {
   RECOMMEND: 'recommend',
+  DEFAULT: 'default',
   LATEST: 'latest',
   LOWER_PRICE: 'lower_price',
   HIGHER_PRICE: 'higher_price',

src/locales/en.json

@@ -470,6 +470,7 @@
   "listing_page_header_homePage": "Home",
   "listing_page_header_listingPage": "Bookstore",
   "listing_page_header_sort": "Sort: {sort}",
+  "listing_page_header_sort_default": "Default",
   "listing_page_header_sort_higher_price": "Price: High to Low",
   "listing_page_header_sort_latest": "Latest",
   "listing_page_header_sort_lower_price": "Price: Low to High",
@@ -480,6 +481,7 @@
   "listing_page_QA_label": "What is the difference between ebooks and paperbacks?",
   "listing_page_QA_title": "FAQ",
   "listing_page_search": "Search",
+  "listing_page_search_label": "Book title or Author",
   "listing_page_search_not_found": "Please try different keywords.",
   "listing_page_search_recommend": "Or explore our recommended books:",
   "listing_page_search_result": "The search results for '{query}':",
@@ -1029,6 +1031,8 @@
     "Stake your LikeCoin to gain extra reward, and participate in community governance."
   ],
   "tag_all_title": "All",
+  "tag_all_featured": "Featured",
+  "tag_all_latest": "Latest Arrivals",
   "tooltip_coming_soon": "Coming Soon",
   "tooltip_no_nft": "No owned NFTs to transfer",
   "tooltip_share": "Copy URL",

src/locales/zh-Hant.json

@@ -470,8 +470,9 @@
   "listing_page_header_homePage": "主頁",
   "listing_page_header_listingPage": "書店",
   "listing_page_header_sort": "排序：{sort}",
+  "listing_page_header_sort_default": "預設",
   "listing_page_header_sort_higher_price": "價錢高至低",
-  "listing_page_header_sort_latest": "最新上架",
+  "listing_page_header_sort_latest": "上架日期",
   "listing_page_header_sort_lower_price": "價錢低至高",
   "listing_page_header_sort_recommend": "推薦",
   "listing_page_header_total_books": "共 {num} 本書",
@@ -480,6 +481,7 @@
   "listing_page_QA_label": "電子書和紙本書有什麼分別?",
   "listing_page_QA_title": "常見問題",
   "listing_page_search": "搜尋",
+  "listing_page_search_label": "搜尋書名或作者",
   "listing_page_search_not_found": "請嘗試使用其他關鍵字。",
   "listing_page_search_recommend": "或是您可以瀏覽我們的推薦書籍：",
   "listing_page_search_result": "以下為 “{query}” 的搜尋結果：",
@@ -1029,6 +1031,8 @@
     "委託 LikeCoin 獲得額外回報，同時參與社群決策"
   ],
   "tag_all_title": "全部",
+  "tag_all_featured": "精選",
+  "tag_all_latest": "最新上架",
   "tooltip_coming_soon": "快將推出",
   "tooltip_no_nft": "沒有可發送的 NFT",
   "tooltip_share": "複製網址",