From f4084f8f14bbd5ae500e3e75d598e2f0e9000b6f Mon Sep 17 00:00:00 2001
From: William Chong <6198816+williamchong@users.noreply.github.com>
Date: Fri, 22 Nov 2024 03:37:10 +0800
Subject: [PATCH 1/6] =?UTF-8?q?=F0=9F=9A=B8=20Make=20author=20in=20class?=
 =?UTF-8?q?=20page=20clickable=20(#1963)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 🚸 Make author in class page clickable

* 💄 Add hover underline for iscn author

Co-authored-by: Ng Wing Tat, David <i@nwt.hk>

---------

Co-authored-by: Ng Wing Tat, David <i@nwt.hk>
---
 src/components/NFTBook/ItemCard.vue | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/components/NFTBook/ItemCard.vue b/src/components/NFTBook/ItemCard.vue
index 52a19a223..bee2d641f 100644
--- a/src/components/NFTBook/ItemCard.vue
+++ b/src/components/NFTBook/ItemCard.vue
@@ -157,8 +157,22 @@
               v-if="iscnWorkAuthor"
               class="flex flex-col justify-center min-w-0"
             >
-              <NFTBookSpecTableLabel :text="$t('identity_type_author')" />
-              <NFTBookSpecTableValue :text="iscnWorkAuthor" :preset="preset" />
+              <NuxtLink
+                class="group"
+                :to="
+                  localeLocation({
+                    name: 'store',
+                    query: { q: iscnWorkAuthor },
+                  })
+                "
+              >
+                <NFTBookSpecTableLabel :text="$t('identity_type_author')" />
+                <NFTBookSpecTableValue
+                  class="group-hover:underline"
+                  :text="iscnWorkAuthor"
+                  :preset="preset"
+                />
+              </NuxtLink>
             </li>
             <li
               v-if="iscnWorkPublisher"

From 2fe8a57dfeae8fa87e413848b0aecccb687b1fb4 Mon Sep 17 00:00:00 2001
From: AuroraHuang22 <aurora90376@gmail.com>
Date: Sun, 24 Nov 2024 11:35:09 +0800
Subject: [PATCH 2/6] =?UTF-8?q?=F0=9F=94=A5=20Remove=20breadcrumb?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/store/index.vue | 16 ----------------
 1 file changed, 16 deletions(-)

diff --git a/src/pages/store/index.vue b/src/pages/store/index.vue
index 15c09c576..048ff2a15 100644
--- a/src/pages/store/index.vue
+++ b/src/pages/store/index.vue
@@ -13,22 +13,6 @@
             'px-[16px] laptop:px-0',
           ]"
         >
-          <!-- Breadcrumb -->
-          <div class="flex gap-[8px] px-[4px] items-center">
-            <NuxtLink
-              class="text-[14px] text-medium-gray"
-              :to="localeLocation({ name: 'index' })"
-              @click.native="handleClickHomePage"
-              >{{ $t('listing_page_header_homePage') }}</NuxtLink
-            >
-            <IconArrowRight class="text-medium-gray" />
-            <NuxtLink
-              class="text-[20px] laptop:text-[28px]"
-              :to="localeLocation({ name: 'store' })"
-              >{{ $t('listing_page_header_listingPage') }}</NuxtLink
-            >
-          </div>
-
           <!-- Desktop Filter & Sorting -->
           <div class="hidden desktop:flex items-center gap-[16px] relative">
             <SearchBar

From 8a02cae93fd86ba53692a5945033c39bc27fc9ab Mon Sep 17 00:00:00 2001
From: AuroraHuang22 <aurora90376@gmail.com>
Date: Sun, 24 Nov 2024 12:57:37 +0800
Subject: [PATCH 3/6] =?UTF-8?q?=E2=9C=A8Add=20arrows=20for=20tags=20naviga?=
 =?UTF-8?q?tion?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/store/index.vue | 212 ++++++++++++++++++--------------------
 1 file changed, 103 insertions(+), 109 deletions(-)

diff --git a/src/pages/store/index.vue b/src/pages/store/index.vue
index 048ff2a15..addd16a2f 100644
--- a/src/pages/store/index.vue
+++ b/src/pages/store/index.vue
@@ -6,7 +6,9 @@
         <div
           :class="[
             'flex',
+            'flex-row-reverse',
             'justify-between',
+            'gap-[16px]',
             'items-center',
 
             'w-full',
@@ -21,84 +23,21 @@
               @clear="handleSearchBarClear"
               @input="handleSearchBarInput"
             />
-            <Dropdown>
-              <template #trigger="{ toggle }">
-                <ButtonV2
-                  preset="tertiary"
-                  :text="selectedLanguageFilterLabel"
-                  @click="toggle"
-                >
-                  <template #append>
-                    <IconArrowDown />
-                  </template>
-                </ButtonV2>
-              </template>
-              <MenuList class="!py-[8px]">
-                <MenuItem
-                  v-for="(item, i) in languageFilterList"
-                  :key="i"
-                  class="w-full"
-                  label-align="left"
-                  label-class="py-[8px]"
-                  :value="item.value"
-                  :label="item.text"
-                  :selected-value="selectedLanguageFilter"
-                  @select="selectedLanguageFilter = item.value"
-                >
-                  <template
-                    v-if="selectedLanguageFilter === item.value"
-                    #label-append
-                  >
-                    <IconCheck />
-                  </template>
-                </MenuItem>
-              </MenuList>
-            </Dropdown>
 
-            <Dropdown>
-              <template #trigger="{ toggle }">
-                <ButtonV2
-                  preset="tertiary"
-                  :text="selectedPriceFilterLabel"
-                  @click="toggle"
-                >
-                  <template #append>
-                    <IconArrowDown />
-                  </template>
-                </ButtonV2>
+            <ButtonV2
+              preset="tertiary"
+              :text="$t('listing_page_filter')"
+              class="whitespace-nowrap"
+            >
+              <template #prepend>
+                <IconFilter />
               </template>
-              <MenuList class="!py-[8px]">
-                <MenuItem
-                  v-for="(item, i) in priceFilterList"
-                  :key="i"
-                  class="w-full"
-                  label-align="left"
-                  label-class="py-[8px]"
-                  :value="item.value"
-                  :label="item.text"
-                  :selected-value="selectedPriceFilter"
-                  @select="selectedPriceFilter = item.value"
-                >
-                  <template
-                    v-if="selectedPriceFilter === item.value"
-                    #label-append
-                  >
-                    <IconCheck />
-                  </template>
-                </MenuItem>
-              </MenuList>
-            </Dropdown>
-
-            <ListingPageToggleButton
-              v-model="isAppliedDRMFreeFilter"
-              :label="$t('listing_page_filter_drm_free_label')"
-              @input="handleToggleDRMFreeFilter"
-            />
-
+            </ButtonV2>
             <Dropdown>
               <template #trigger="{ toggle }">
                 <ButtonV2
                   preset="tertiary"
+                  class="whitespace-nowrap"
                   :text="selectedSortingLabel"
                   @click="toggle"
                 >
@@ -125,45 +64,64 @@
               </MenuList>
             </Dropdown>
           </div>
-        </div>
-
-        <nav
-          v-show="!searchQuery"
-          :class="[
-            'flex',
-            'items-start',
 
-            'w-full',
-            'px-[16px] laptop:px-0',
-            'py-[16px]',
-
-            'overflow-x-auto',
-            'overflow-y-hidden',
-          ]"
-        >
-          <ul class="flex gap-x-2 gap-y-4">
-            <li
-              v-for="tag in bookstoreTagButtons"
-              :key="tag.id"
-              class="shrink-0"
+          <nav class="relative flex items-center">
+            <!-- Left arrow -->
+            <div
+              v-if="isOverflowing && !isAtStart"
+              class="absolute left-0 h-full z-10 flex items-center pr-[120px] text-gray-500 bg-gradient-to-l from-transparent to-light-gray cursor-pointer"
+              @click="scrollLeft"
             >
-              <ButtonV2
-                :preset="
-                  tag.id === selectedTagId ||
-                  (!selectedTagId && tag.id === 'all')
-                    ? 'secondary'
-                    : 'outline'
-                "
-                :text="tag.name"
-                :alt="tag.name"
-                size="mini"
-                theme="glow"
-                :to="tag.route"
-                @click.native="handleTagClick(tag)"
-              />
-            </li>
-          </ul>
-        </nav>
+              <IconArrowLeft class="w-[20px] h-[20px]" />
+            </div>
+            <!-- Tags -->
+            <div
+              ref="tagsContainer"
+              :class="[
+                'flex',
+                'flex-nowrap',
+                'items-start',
+                'w-full',
+                'px-[16px] laptop:px-0',
+                'py-[16px]',
+                'overflow-x-hidden',
+                'overflow-y-hidden',
+              ]"
+              @scroll="handleScroll"
+            >
+              <ul class="flex gap-x-2 gap-y-4">
+                <li
+                  v-for="tag in bookstoreTagButtons"
+                  :key="tag.id"
+                  class="shrink-0"
+                >
+                  <ButtonV2
+                    :preset="
+                      tag.id === selectedTagId ||
+                      (!selectedTagId && tag.id === 'all')
+                        ? 'secondary'
+                        : 'outline'
+                    "
+                    :text="tag.name"
+                    :alt="tag.name"
+                    size="mini"
+                    theme="glow"
+                    :to="tag.route"
+                    @click.native="handleTagClick(tag)"
+                  />
+                </li>
+              </ul>
+            </div>
+            <!-- Right arrow -->
+            <div
+              v-if="isOverflowing && !isAtEnd"
+              class="absolute right-0 h-full z-10 flex items-center pl-[120px] text-gray-500 bg-gradient-to-r from-transparent to-light-gray cursor-pointer"
+              @click="scrollRight"
+            >
+              <IconArrowRight class="w-[20px] h-[20px]" />
+            </div>
+          </nav>
+        </div>
 
         <!-- Mobile Filter & Sorting -->
         <div
@@ -594,6 +552,11 @@ export default {
 
       isSearching: false,
       searchItems: [],
+
+      // Tag scroll
+      isOverflowing: false,
+      isAtStart: true,
+      isAtEnd: false,
     };
   },
   head() {
@@ -1069,6 +1032,13 @@ export default {
       search_term: this.searchQuery || undefined,
       isNFTBook: true,
     });
+    this.$nextTick(() => {
+      this.checkOverflow();
+    });
+    window.addEventListener('resize', this.checkOverflow);
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.checkOverflow);
   },
   methods: {
     ...mapActions(['lazyFetchBookstoreCMSProductsByTagId']),
@@ -1287,6 +1257,30 @@ export default {
         isNFTBook: true,
       });
     },
+    checkOverflow() {
+      const container = this.$refs.tagsContainer;
+      const overflowThreshold = 4;
+      this.isOverflowing =
+        container.scrollWidth > container.clientWidth + overflowThreshold;
+      this.handleScroll();
+    },
+    handleScroll() {
+      const container = this.$refs.tagsContainer;
+      const threshold = 4;
+
+      this.isAtStart = container.scrollLeft <= threshold;
+      this.isAtEnd =
+        container.scrollLeft + container.clientWidth >=
+        container.scrollWidth - threshold;
+    },
+    scrollLeft() {
+      const container = this.$refs.tagsContainer;
+      container.scrollBy({ left: -100, behavior: 'smooth' });
+    },
+    scrollRight() {
+      const container = this.$refs.tagsContainer;
+      container.scrollBy({ left: 100, behavior: 'smooth' });
+    },
   },
 };
 </script>

From 129c4935b9fa7f5cf43bd83a60c2e152f8fe10b6 Mon Sep 17 00:00:00 2001
From: AuroraHuang22 <aurora90376@gmail.com>
Date: Sun, 24 Nov 2024 13:37:36 +0800
Subject: [PATCH 4/6] =?UTF-8?q?=E2=9C=A8=20Add=20random=20search=20placeho?=
 =?UTF-8?q?lder?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/SearchBar.vue | 24 +++++++++++++++++++++---
 src/constant/index.js        | 15 +++++++++++++++
 src/locales/en.json          |  1 +
 src/locales/zh-Hant.json     |  1 +
 src/pages/store/index.vue    |  5 ++++-
 5 files changed, 42 insertions(+), 4 deletions(-)

diff --git a/src/components/SearchBar.vue b/src/components/SearchBar.vue
index 7344e805c..e1130c39c 100644
--- a/src/components/SearchBar.vue
+++ b/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,11 @@ export default {
       },
       200
     ),
+    getRandomPlaceholder() {
+      const shuffled = [...SEARCH_SUGGESTIONS].sort(() => Math.random() - 0.5);
+      const randomTerms = shuffled.slice(0, 3);
+      return randomTerms.join('、');
+    },
   },
 };
 </script>
diff --git a/src/constant/index.js b/src/constant/index.js
index af33d0c67..637e2e178 100644
--- a/src/constant/index.js
+++ b/src/constant/index.js
@@ -428,3 +428,18 @@ export const SIGN_AUTHORIZATION_PERMISSIONS = [
   'read:nftcollection',
   'write:nftcollection',
 ];
+
+export const SEARCH_SUGGESTIONS = [
+  '免費',
+  '小說',
+  '旅遊',
+  '報刊',
+  '心靈',
+  '運動',
+  '董啟章',
+  '李立峯',
+  '新聞',
+  '理財',
+  '區塊鏈',
+  '繪本',
+];
diff --git a/src/locales/en.json b/src/locales/en.json
index 402182c5e..1f037a140 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -480,6 +480,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}':",
diff --git a/src/locales/zh-Hant.json b/src/locales/zh-Hant.json
index 263b00391..0916f6315 100644
--- a/src/locales/zh-Hant.json
+++ b/src/locales/zh-Hant.json
@@ -480,6 +480,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}” 的搜尋結果：",
diff --git a/src/pages/store/index.vue b/src/pages/store/index.vue
index addd16a2f..4d736f4b0 100644
--- a/src/pages/store/index.vue
+++ b/src/pages/store/index.vue
@@ -142,8 +142,11 @@
             'relative',
           ]"
         >
-          <div class="flex items-center justify-center">
+          <div
+            class="flex items-center justify-center cursor-pointer px-[10px]"
+          >
             <SearchBar
+              class="w-full"
               :search-query="searchQuery"
               @open="handleSearchBarOpen"
               @clear="handleSearchBarClear"

From 9f50f424c8c0804d88501104676dfba027cdad52 Mon Sep 17 00:00:00 2001
From: AuroraHuang22 <aurora90376@gmail.com>
Date: Sun, 24 Nov 2024 13:47:32 +0800
Subject: [PATCH 5/6] =?UTF-8?q?=F0=9F=8E=A8Add=20click=20filter=20handling?=
 =?UTF-8?q?=20for=20desktop=20version?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/store/index.vue | 101 +++++++++++++++++++-------------------
 1 file changed, 50 insertions(+), 51 deletions(-)

diff --git a/src/pages/store/index.vue b/src/pages/store/index.vue
index 4d736f4b0..adef4e0e3 100644
--- a/src/pages/store/index.vue
+++ b/src/pages/store/index.vue
@@ -6,7 +6,6 @@
         <div
           :class="[
             'flex',
-            'flex-row-reverse',
             'justify-between',
             'gap-[16px]',
             'items-center',
@@ -15,56 +14,6 @@
             'px-[16px] laptop:px-0',
           ]"
         >
-          <!-- Desktop Filter & Sorting -->
-          <div class="hidden desktop:flex items-center gap-[16px] relative">
-            <SearchBar
-              :search-query="searchQuery"
-              @open="handleSearchBarOpen"
-              @clear="handleSearchBarClear"
-              @input="handleSearchBarInput"
-            />
-
-            <ButtonV2
-              preset="tertiary"
-              :text="$t('listing_page_filter')"
-              class="whitespace-nowrap"
-            >
-              <template #prepend>
-                <IconFilter />
-              </template>
-            </ButtonV2>
-            <Dropdown>
-              <template #trigger="{ toggle }">
-                <ButtonV2
-                  preset="tertiary"
-                  class="whitespace-nowrap"
-                  :text="selectedSortingLabel"
-                  @click="toggle"
-                >
-                  <template #append>
-                    <IconArrowDown />
-                  </template>
-                </ButtonV2>
-              </template>
-              <MenuList class="!py-[8px]">
-                <MenuItem
-                  v-for="(item, i) in availableSorting"
-                  :key="i"
-                  label-align="left"
-                  label-class="!py-[8px]"
-                  :value="item.value"
-                  :label="item.text"
-                  :selected-value="selectedSorting"
-                  @select="handleSortingChange"
-                >
-                  <template v-if="selectedSorting === item.value" #label-append>
-                    <IconCheck />
-                  </template>
-                </MenuItem>
-              </MenuList>
-            </Dropdown>
-          </div>
-
           <nav class="relative flex items-center">
             <!-- Left arrow -->
             <div
@@ -121,6 +70,56 @@
               <IconArrowRight class="w-[20px] h-[20px]" />
             </div>
           </nav>
+          <!-- Desktop Filter & Sorting -->
+          <div class="hidden desktop:flex items-center gap-[16px] relative">
+            <SearchBar
+              :search-query="searchQuery"
+              @open="handleSearchBarOpen"
+              @clear="handleSearchBarClear"
+              @input="handleSearchBarInput"
+            />
+
+            <ButtonV2
+              preset="tertiary"
+              :text="$t('listing_page_filter')"
+              class="whitespace-nowrap"
+              @click="handleOpenFilterDialog"
+            >
+              <template #prepend>
+                <IconFilter />
+              </template>
+            </ButtonV2>
+            <Dropdown>
+              <template #trigger="{ toggle }">
+                <ButtonV2
+                  preset="tertiary"
+                  class="whitespace-nowrap"
+                  :text="selectedSortingLabel"
+                  @click="toggle"
+                >
+                  <template #append>
+                    <IconArrowDown />
+                  </template>
+                </ButtonV2>
+              </template>
+              <MenuList class="!py-[8px]">
+                <MenuItem
+                  v-for="(item, i) in availableSorting"
+                  :key="i"
+                  label-align="left"
+                  label-class="!py-[8px]"
+                  :value="item.value"
+                  :label="item.text"
+                  :selected-value="selectedSorting"
+                  @select="handleSortingChange"
+                >
+                  <template v-if="selectedSorting === item.value" #label-append>
+                    <IconCheck />
+                  </template>
+                </MenuItem>
+              </MenuList>
+            </Dropdown>
+          </div>
         </div>
 
         <!-- Mobile Filter & Sorting -->

From 23ac5df567507aeb3d0803b0f55e7a194b6ea6a6 Mon Sep 17 00:00:00 2001
From: AuroraHuang22 <aurora90376@gmail.com>
Date: Sun, 24 Nov 2024 20:42:06 +0800
Subject: [PATCH 6/6] =?UTF-8?q?=F0=9F=93=B1=20Handle=20tags=20scroll=20bar?=
 =?UTF-8?q?=20for=20phone=20version?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/store/index.vue | 67 +++++++++++++++++++++++++++++++++++++--
 1 file changed, 64 insertions(+), 3 deletions(-)

diff --git a/src/pages/store/index.vue b/src/pages/store/index.vue
index adef4e0e3..f15840804 100644
--- a/src/pages/store/index.vue
+++ b/src/pages/store/index.vue
@@ -18,11 +18,40 @@
             <!-- Left arrow -->
             <div
               v-if="isOverflowing && !isAtStart"
-              class="absolute left-0 h-full z-10 flex items-center pr-[120px] text-gray-500 bg-gradient-to-l from-transparent to-light-gray cursor-pointer"
+              :class="[
+                'hidden laptop:flex',
+                'absolute',
+                'left-0',
+                'h-full',
+                'z-10',
+                'items-center',
+                'pr-[120px]',
+                'text-gray-500',
+                'bg-gradient-to-l',
+                'from-transparent',
+                'to-light-gray',
+                'cursor-pointer',
+              ]"
               @click="scrollLeft"
             >
               <IconArrowLeft class="w-[20px] h-[20px]" />
             </div>
+            <div
+              v-if="isOverflowing && !isAtStart"
+              :class="[
+                'flex laptop:hidden',
+                'absolute',
+                'left-0',
+                'h-full',
+                'z-10',
+                'items-center',
+                'pr-[120px]',
+                'text-gray-500',
+                'bg-gradient-to-l',
+                'from-transparent',
+                'to-light-gray',
+              ]"
+            />
             <!-- Tags -->
             <div
               ref="tagsContainer"
@@ -33,7 +62,10 @@
                 'w-full',
                 'px-[16px] laptop:px-0',
                 'py-[16px]',
-                'overflow-x-hidden',
+                'overflow-scroll',
+                'scrollbar-custom',
+
+                'laptop:overflow-x-hidden',
                 'overflow-y-hidden',
               ]"
               @scroll="handleScroll"
@@ -64,11 +96,40 @@
             <!-- Right arrow -->
             <div
               v-if="isOverflowing && !isAtEnd"
-              class="absolute right-0 h-full z-10 flex items-center pl-[120px] text-gray-500 bg-gradient-to-r from-transparent to-light-gray cursor-pointer"
+              :class="[
+                'hidden laptop:flex',
+                'absolute',
+                'right-0',
+                'h-full',
+                'z-10',
+                'items-center',
+                'pl-[120px]',
+                'text-gray-500',
+                'bg-gradient-to-r',
+                'from-transparent',
+                'to-light-gray',
+                'cursor-pointer',
+              ]"
               @click="scrollRight"
             >
               <IconArrowRight class="w-[20px] h-[20px]" />
             </div>
+            <div
+              v-if="isOverflowing && !isAtEnd"
+              :class="[
+                'flex laptop:hidden',
+                'absolute',
+                'right-0',
+                'h-full',
+                'z-10',
+                'items-center',
+                'pl-[120px]',
+                'text-gray-500',
+                'bg-gradient-to-r',
+                'from-transparent',
+                'to-light-gray',
+              ]"
+            />
           </nav>
           <!-- Desktop Filter & Sorting -->
           <div class="hidden desktop:flex items-center gap-[16px] relative">