From a386b79175dc2cdfabf26653da5ed788e51ccfcd Mon Sep 17 00:00:00 2001
From: AuroraHuang22 <aurora90376@gmail.com>
Date: Mon, 23 Dec 2024 20:08:09 +0800
Subject: [PATCH 1/7] =?UTF-8?q?=E2=9C=A8=20Add=20<ScrollingList=20/>=20for?=
 =?UTF-8?q?=20buyer=20message=20animation?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ScrollingList.vue | 51 ++++++++++++++++++++++++++++++++
 1 file changed, 51 insertions(+)
 create mode 100644 src/components/ScrollingList.vue

diff --git a/src/components/ScrollingList.vue b/src/components/ScrollingList.vue
new file mode 100644
index 000000000..b4c343ced
--- /dev/null
+++ b/src/components/ScrollingList.vue
@@ -0,0 +1,51 @@
+<template>
+  <div
+    class="relative flex"
+    :style="{
+      '--animation-duration': durationTime,
+    }"
+  >
+    <ul class="flex animate-scroll">
+      <slot name="item" />
+    </ul>
+    <ul class="flex animate-scroll delay">
+      <slot name="item" />
+    </ul>
+  </div>
+</template>
+<script>
+export default {
+  name: 'ScrollingList',
+  props: {
+    animationDuration: {
+      type: String,
+      default: '60s',
+    },
+  },
+  computed: {
+    durationTime() {
+      return this.animationDuration;
+    },
+  },
+};
+</script>
+
+<style scoped>
+.animate-scroll {
+  animation: scroll var(--animation-duration, 60s) infinite linear;
+}
+
+.animate-scroll.delay {
+  animation: scroll var(--animation-duration, 60s) infinite linear;
+  animation-delay: calc(var(--animation-duration, 60s) * -1);
+}
+
+@keyframes scroll {
+  0% {
+    transform: translateX(100);
+  }
+  100% {
+    transform: translateX(-100%);
+  }
+}
+</style>

From 8bef8cd13255e942e0ae2d8ac1ec1207381e5c06 Mon Sep 17 00:00:00 2001
From: AuroraHuang22 <aurora90376@gmail.com>
Date: Tue, 24 Dec 2024 10:08:04 +0800
Subject: [PATCH 2/7] =?UTF-8?q?=F0=9F=92=84Init=20collectorMessageList=20U?=
 =?UTF-8?q?I=20on=20class=20page?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../collector-message-item-background.svg     |  16 ++
 .../NFTPage/CollectorMessageList/index.vue    |  59 ++++++++
 src/locales/en.json                           |   2 +
 src/locales/zh-Hant.json                      |   2 +
 src/pages/nft/class/_classId/index.vue        | 143 +++++++++++++++---
 5 files changed, 203 insertions(+), 19 deletions(-)
 create mode 100644 src/assets/images/nft/books/collector-message-item-background.svg
 create mode 100644 src/components/NFTPage/CollectorMessageList/index.vue

diff --git a/src/assets/images/nft/books/collector-message-item-background.svg b/src/assets/images/nft/books/collector-message-item-background.svg
new file mode 100644
index 000000000..ac89e9b0f
--- /dev/null
+++ b/src/assets/images/nft/books/collector-message-item-background.svg
@@ -0,0 +1,16 @@
+<svg class="absolute top-0 left-0" width="240" height="204" viewBox="0 0 240 204" fill="none"
+  xmlns="http://www.w3.org/2000/svg">
+  <rect x="0.5" y="0.5" width="239" height="203" rx="7.5" fill="white" />
+  <rect x="0.5" y="0.5" width="239" height="203" rx="7.5" stroke="url(#paint0_linear_1940_2184)" />
+  <path d="M145.095 203.971C143.124 204.037 142 203.971 142 203.971H145.095C155.359 203.625 188.584 199.679 205.449 164C231.205 172.756 240 164 240 164V203.971H145.095Z" fill="url(#paint1_radial_1940_2184)" />
+  <defs>
+    <linearGradient id="paint0_linear_1940_2184" x1="175" y1="133.786" x2="200.061" y2="204.86" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#E1E1E1" />
+      <stop offset="1" stop-color="#E1E1E1" stop-opacity="0" />
+    </linearGradient>
+    <radialGradient id="paint1_radial_1940_2184" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(206.077 164) rotate(57.8799) scale(23.6303 58.9055)">
+      <stop stop-color="#D9D9D9" />
+      <stop offset="1" stop-color="#F7F7F7" />
+    </radialGradient>
+  </defs>
+</svg>
\ No newline at end of file
diff --git a/src/components/NFTPage/CollectorMessageList/index.vue b/src/components/NFTPage/CollectorMessageList/index.vue
new file mode 100644
index 000000000..494cdb8be
--- /dev/null
+++ b/src/components/NFTPage/CollectorMessageList/index.vue
@@ -0,0 +1,59 @@
+<template>
+  <ScrollingList :animation-duration="durationTime">
+    <template #item>
+      <NFTPageCollectorMessageListItem
+        v-for="(message, i) in displayMessages"
+        :key="`${message.id}-${i}`"
+        class="mx-[16px]"
+        :message="message"
+      />
+    </template>
+  </ScrollingList>
+</template>
+<script>
+import { mapActions } from 'vuex';
+
+export default {
+  name: 'NFTPageCollectorMessageList',
+  props: {
+    messages: {
+      type: Array,
+      default: () => [],
+    },
+    classId: {
+      type: String,
+      default: undefined,
+    },
+    isLoading: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  computed: {
+    displayMessages() {
+      if (this.messages.length < 3) return [];
+      let loopedMessages = [...this.messages];
+
+      while (loopedMessages.length < 6) {
+        loopedMessages = loopedMessages.concat(this.messages);
+      }
+      if (loopedMessages.length > 20) {
+        loopedMessages = loopedMessages.slice(0, 20);
+      }
+      return loopedMessages;
+    },
+    durationTime() {
+      return `${this.messages.length * 3.33}s`;
+    },
+  },
+  mounted() {
+    const buyerList = this.messages?.map(buyer => buyer.id);
+    const uniqueBuyerList = [...new Set(buyerList)];
+
+    this.lazyGetUserInfoByAddresses(uniqueBuyerList);
+  },
+  methods: {
+    ...mapActions(['lazyGetUserInfoByAddresses']),
+  },
+};
+</script>
diff --git a/src/locales/en.json b/src/locales/en.json
index 8ac634eb8..748082504 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -622,6 +622,8 @@
   "nft_collect_modal_subtitle_select_collect_method": "Select a collect method",
   "nft_collect_modal_title_collect": "Collect NFT",
   "nft_collect_modal_title_collecting": "Collecting NFT",
+  "nft_collector_message_label": "Collector's message",
+  "nft_collector_message_view_all": "View all",
   "nft_collection_content_label": "Content in this collection",
   "nft_collection_hint": "This book is part of a collection",
   "nft_collection_label": "Collection",
diff --git a/src/locales/zh-Hant.json b/src/locales/zh-Hant.json
index e51787675..2e9a69a1e 100644
--- a/src/locales/zh-Hant.json
+++ b/src/locales/zh-Hant.json
@@ -622,6 +622,8 @@
   "nft_collect_modal_subtitle_select_collect_method": "請選擇收藏方法",
   "nft_collect_modal_title_collect": "收藏作品",
   "nft_collect_modal_title_collecting": "正在收藏作品",
+  "nft_collector_message_label": "收藏者的留言",
+  "nft_collector_message_view_all": "顯示全部",
   "nft_collection_content_label": "套裝內容",
   "nft_collection_hint": "此本書收錄在套裝中",
   "nft_collection_label": "組合套裝",
diff --git a/src/pages/nft/class/_classId/index.vue b/src/pages/nft/class/_classId/index.vue
index e8bc0888a..8fa3c1981 100644
--- a/src/pages/nft/class/_classId/index.vue
+++ b/src/pages/nft/class/_classId/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <Page class="relative">
+  <Page class="relative overflow-x-hidden">
     <CardV2 v-if="isLoading" class="absolute top-[40%]">{{
       $t('nft_details_page_label_loading')
     }}</CardV2>
@@ -173,6 +173,46 @@
             </ul>
           </section>
 
+          <client-only>
+            <lazy-component
+              class="pointer-events-none"
+              @show.once="fetchTrimmedCollectorsInfo"
+            />
+          </client-only>
+          <section
+            v-if="shouldShowCollectorMessage"
+            :class="[
+              'relative',
+              isHistoryInfoLoading ? 'py-[32px]' : 'pt-[48px] pb-[96px]',
+            ]"
+          >
+            <div
+              v-if="isHistoryInfoLoading"
+              class="flex items-center justify-center w-full"
+            >
+              <ProgressIndicator preset="thin" />
+            </div>
+            <div v-else>
+              <div class="flex items-center justify-between mb-[24px]">
+                <h3
+                  class="text-[28px] font-600 text-center text-like-green"
+                  v-text="$t('nft_collector_message_label')"
+                />
+                <ButtonV2
+                  preset="tertiary"
+                  size="mini"
+                  :text="$t('nft_collector_message_view_all')"
+                  @click="handleClickMoreCollectorMessage"
+                />
+              </div>
+              <NFTPageCollectorMessageList
+                class="absolute transform -translate-x-1/2 w-[100vw] left-1/2"
+                :class-id="classId"
+                :messages="filterCollectorsWithReplies"
+              />
+            </div>
+          </section>
+
           <NFTBookSignatureBanner
             v-if="nftHasSignImage"
             tag="section"
@@ -223,24 +263,6 @@
               </li>
             </ul>
           </section>
-
-          <Separator class="mx-auto" />
-
-          <section>
-            <client-only>
-              <lazy-component
-                class="pointer-events-none"
-                @show.once="fetchTrimmedCollectorsInfo"
-              />
-            </client-only>
-            <NFTPageCollectorList
-              :class-id="classId"
-              :owner-count="ownerCount"
-              :items="populatedBuyerWithMessage"
-              :trimmed-count="trimmedCount"
-              @click-show-more-collector="handleClickMoreCollector"
-            />
-          </section>
         </template>
 
         <section
@@ -421,6 +443,13 @@
       class="w-full"
       @click-button="handleClickBookBannerCTA"
     />
+
+    <NFTPageCollectorListDialog
+      :is-open-dialog="isOpeningCollectorListDialog"
+      :class-id="classId"
+      :items="populatedBuyerWithMessage"
+      @close="isOpeningCollectorListDialog = false"
+    />
   </Page>
 </template>
 
@@ -479,6 +508,10 @@ export default {
 
       customPrice: 0,
       isOpeningCheckoutPage: false,
+
+      isHistoryInfoLoading: false,
+      isFinishedLoadingHistory: false,
+      isOpeningCollectorListDialog: false,
     };
   },
   async fetch({ route, store, redirect, error, localeLocation }) {
@@ -936,6 +969,7 @@ export default {
     shouldShowFollowButton() {
       return Boolean(this.iscnOwner !== this.getAddress);
     },
+    // for WNFT
     populatedCollectorsWithMemo() {
       if (!this.populatedDisplayEvents) {
         return this.populatedCollectors;
@@ -967,6 +1001,7 @@ export default {
       }
       return collectorsWithMemo;
     },
+    // for collector dialog
     populatedBuyerWithMessage() {
       if (!this.populatedDisplayEvents) {
         return this.populatedCollectors;
@@ -1001,6 +1036,62 @@ export default {
       }
       return collectorsWithBuyerMessages;
     },
+    // for collector message list
+    filterCollectorsWithReplies() {
+      if (!this.populatedDisplayEvents || !this.populatedCollectors) {
+        return [];
+      }
+      const collectorsWithReplies = this.populatedCollectors
+        .map(collector => {
+          const purchaseEvent = this.populatedDisplayEvents.find(
+            event =>
+              event.event === 'purchase' && event.toWallet === collector.id
+          );
+
+          const transferEvent = this.populatedDisplayEvents.find(
+            event =>
+              event.event === 'transfer' && event.toWallet === collector.id
+          );
+
+          let buyerMessage = null;
+          let authorReply = null;
+
+          if (purchaseEvent) {
+            buyerMessage = purchaseEvent.buyerMessage || null;
+          } else if (transferEvent) {
+            buyerMessage = transferEvent.buyerMessage || null;
+            authorReply = transferEvent.memo || null;
+          }
+
+          if (!buyerMessage) {
+            return null;
+          }
+
+          return {
+            ...collector,
+            buyerMessage,
+            authorReply,
+          };
+        })
+        .filter(Boolean);
+
+      if (collectorsWithReplies && collectorsWithReplies.length) {
+        collectorsWithReplies.sort((a, b) => {
+          if (a.buyerMessage && !b.buyerMessage) {
+            return -1;
+          }
+          if (!a.buyerMessage && b.buyerMessage) {
+            return 1;
+          }
+          return b.authorReply - a.authorReply;
+        });
+      }
+
+      return collectorsWithReplies;
+    },
+    shouldShowCollectorMessage() {
+      return this.filterCollectorsWithReplies?.length > 3;
+    },
     isShowBanner() {
       return (
         this.classId ===
@@ -1100,6 +1191,7 @@ export default {
     ]),
     parseNFTMetadataURL,
     async fetchTrimmedCollectorsInfo() {
+      this.isHistoryInfoLoading = true;
       const trimmedCollectors = this.sortedOwnerListId.slice(
         0,
         this.trimmedCount
@@ -1108,6 +1200,8 @@ export default {
         this.lazyGetUserInfoByAddresses(trimmedCollectors),
         this.updateNFTHistory({ getAllUserInfo: false }),
       ]);
+      this.isHistoryInfoLoading = false;
+      this.isFinishedLoadingHistory = true;
     },
     getPurchaseEventParams(edition) {
       const customPriceInDecimal = this.customPrice
@@ -1140,6 +1234,17 @@ export default {
       );
       await this.lazyGetUserInfoByAddresses(this.sortedOwnerListId);
     },
+    async handleClickMoreCollectorMessage() {
+      this.isOpeningCollectorListDialog = true;
+      logTrackerEvent(
+        this,
+        'NFT',
+        'class_details_show_more_collector_clicked',
+        this.classId,
+        1
+      );
+      await this.lazyGetUserInfoByAddresses(this.sortedOwnerListId);
+    },
     async handleClickMoreHistory() {
       logTrackerEvent(
         this,

From 5053719fd794e4751143872b06e2fb0ee1143dc0 Mon Sep 17 00:00:00 2001
From: AuroraHuang22 <aurora90376@gmail.com>
Date: Tue, 24 Dec 2024 10:08:38 +0800
Subject: [PATCH 3/7] =?UTF-8?q?=F0=9F=92=84=20Add=20<CollectorListDialog/>?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../NFTPage/CollectorListDialog.vue           | 91 +++++++++++++++++++
 1 file changed, 91 insertions(+)
 create mode 100644 src/components/NFTPage/CollectorListDialog.vue

diff --git a/src/components/NFTPage/CollectorListDialog.vue b/src/components/NFTPage/CollectorListDialog.vue
new file mode 100644
index 000000000..29d99319e
--- /dev/null
+++ b/src/components/NFTPage/CollectorListDialog.vue
@@ -0,0 +1,91 @@
+<template>
+  <Dialog
+    :open="isOpenDialog"
+    preset="custom"
+    panel-class="overflow-x-auto shadow-lg"
+    panel-component="CardV2"
+    @close="$emit('close')"
+  >
+    <div class="flex justify-between mb-[12px] min-w-[310px]">
+      <Label
+        class="w-min font-600"
+        :text="`${$t('nft_details_page_title_collector')} (${items.length})`"
+        preset="h5"
+        valign="middle"
+        content-class="whitespace-nowrap text-like-green "
+        prepend-class="text-like-green"
+      >
+        <template #prepend>
+          <IconPerson />
+        </template>
+      </Label>
+    </div>
+    <hr class="w-full border-shade-gray" />
+    <div class="min-w-[310px]">
+      <table class="w-full">
+        <tbody class="w-full">
+          <tr class="w-full border-b-shade-gray border-b-[1px]">
+            <td
+              v-for="(text, index) in tableHeaderItems"
+              :key="index"
+              class="py-[8px]"
+            >
+              <Label
+                class="justify-start text-left text-dark-gray text-[12px] font-500"
+                :text="text"
+                tag="div"
+                valign="middle"
+                align="left"
+                content-class="whitespace-nowrap"
+              />
+            </td>
+          </tr>
+          <NFTPageCollectorListItem
+            v-for="owner in items"
+            :key="owner.id"
+            :class-id="classId"
+            :owner="owner"
+            :has-memo="hasMemo"
+          />
+        </tbody>
+      </table>
+    </div>
+  </Dialog>
+</template>
+<script>
+export default {
+  name: 'NFTPageCollectorListDialog',
+  props: {
+    items: {
+      type: Array,
+      default: () => [],
+    },
+    classId: {
+      type: String,
+      default: undefined,
+    },
+    isOpenDialog: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  computed: {
+    hasMemo() {
+      return this.items.some(item => item.memo);
+    },
+    tableHeaderItems() {
+      if (this.hasMemo) {
+        return [
+          this.$t('nft_details_page_title_collector'),
+          this.$t('nft_message_type_generic'),
+          this.$t('nft_details_page_label_owning'),
+        ];
+      }
+      return [
+        this.$t('nft_details_page_title_collector'),
+        this.$t('nft_details_page_label_owning'),
+      ];
+    },
+  },
+};
+</script>

From 40e7350339d789a5d133d98d318eb5a515406cf3 Mon Sep 17 00:00:00 2001
From: AuroraHuang22 <aurora90376@gmail.com>
Date: Tue, 24 Dec 2024 15:01:46 +0800
Subject: [PATCH 4/7] =?UTF-8?q?=F0=9F=8E=A8=20Add=20props=20for=20min/max?=
 =?UTF-8?q?=20messages=20and=20multiplier?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../NFTPage/CollectorMessageList/index.vue    | 28 +++++++++++++++----
 1 file changed, 23 insertions(+), 5 deletions(-)

diff --git a/src/components/NFTPage/CollectorMessageList/index.vue b/src/components/NFTPage/CollectorMessageList/index.vue
index 494cdb8be..9768d3410 100644
--- a/src/components/NFTPage/CollectorMessageList/index.vue
+++ b/src/components/NFTPage/CollectorMessageList/index.vue
@@ -4,8 +4,10 @@
       <NFTPageCollectorMessageListItem
         v-for="(message, i) in displayMessages"
         :key="`${message.id}-${i}`"
-        class="mx-[16px]"
+        class="mx-[8px]"
         :message="message"
+        :creator-avatar="creatorAvatar"
+        :class-id="classId"
       />
     </template>
   </ScrollingList>
@@ -20,6 +22,10 @@ export default {
       type: Array,
       default: () => [],
     },
+    creatorAvatar: {
+      type: String,
+      default: undefined,
+    },
     classId: {
       type: String,
       default: undefined,
@@ -28,22 +34,34 @@ export default {
       type: Boolean,
       default: false,
     },
+    minMessages: {
+      type: Number,
+      default: 6,
+    },
+    maxMessages: {
+      type: Number,
+      default: 20,
+    },
+    durationMultiplier: {
+      type: Number,
+      default: 3.33,
+    },
   },
   computed: {
     displayMessages() {
       if (this.messages.length < 3) return [];
       let loopedMessages = [...this.messages];
 
-      while (loopedMessages.length < 6) {
+      while (loopedMessages.length < this.minMessages) {
         loopedMessages = loopedMessages.concat(this.messages);
       }
-      if (loopedMessages.length > 20) {
-        loopedMessages = loopedMessages.slice(0, 20);
+      if (loopedMessages.length > this.maxMessages) {
+        loopedMessages = loopedMessages.slice(0, this.maxMessages);
       }
       return loopedMessages;
     },
     durationTime() {
-      return `${this.messages.length * 3.33}s`;
+      return `${this.messages.length * this.durationMultiplier}s`;
     },
   },
   mounted() {

From 8c4db426d560fd5506b0c7ff932f837c5e076641 Mon Sep 17 00:00:00 2001
From: AuroraHuang22 <aurora90376@gmail.com>
Date: Tue, 24 Dec 2024 15:02:53 +0800
Subject: [PATCH 5/7] =?UTF-8?q?=F0=9F=92=84=20Add=20item=20card=20&=20hove?=
 =?UTF-8?q?r=20effect?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/NFTMessage/Identity.vue        |   9 +-
 .../NFTPage/CollectorMessageList/Item.vue     | 124 ++++++++++++++++++
 src/components/ScrollingList.vue              |   7 +-
 src/pages/nft/class/_classId/index.vue        |   2 +
 4 files changed, 138 insertions(+), 4 deletions(-)
 create mode 100644 src/components/NFTPage/CollectorMessageList/Item.vue

diff --git a/src/components/NFTMessage/Identity.vue b/src/components/NFTMessage/Identity.vue
index b3a16ed22..7ffa19214 100644
--- a/src/components/NFTMessage/Identity.vue
+++ b/src/components/NFTMessage/Identity.vue
@@ -36,9 +36,12 @@
       >
         {{ userLabel }}
       </div>
-      <Label class="text-like-green" :preset="userLabelSize" align="center">{{
-        userDisplayNameFull | ellipsis
-      }}</Label>
+      <Label
+        class="text-like-green hover:underline"
+        :preset="userLabelSize"
+        align="center"
+        >{{ userDisplayNameFull | ellipsis }}</Label
+      >
     </div>
   </component>
 </template>
diff --git a/src/components/NFTPage/CollectorMessageList/Item.vue b/src/components/NFTPage/CollectorMessageList/Item.vue
new file mode 100644
index 000000000..70b6834df
--- /dev/null
+++ b/src/components/NFTPage/CollectorMessageList/Item.vue
@@ -0,0 +1,124 @@
+<template>
+  <NuxtLink :to="messagesPageLink">
+    <div
+      :class="[
+        'group',
+        'relative',
+        'flex',
+        'flex-col',
+        'justify-between',
+
+        'p-[16px] laptop:p-[24px]',
+        'pb-[12px] laptop:pb-[20px]',
+
+        'min-w-[195px] laptop:min-w-[240px]',
+        'h-[180px] laptop:h-[204px]',
+
+        'cursor-pointer',
+      ]"
+      :style="bgStyle"
+    >
+      <p class="block text-[16px] line-clamp-4">{{ buyerMessage }}</p>
+      <NFTMessageIdentity
+        :is-show-type-label="false"
+        :wallet-address="message.id"
+        :avatar-size="32"
+        :wrapper-classes="`!bg-transparent`"
+      />
+
+      <Identity
+        v-if="authorReplied"
+        :class="[
+          'absolute bottom-0 right-[6px]',
+          '!hidden',
+          'transition-all duration-100',
+          authorReplied
+            ? 'group-hover:!block group-hover:right-[8px]'
+            : 'hidden',
+        ]"
+        :avatar-url="creatorAvatar"
+        :avatar-size="20"
+      />
+      <svg
+        v-if="authorReplied"
+        :class="[
+          'absolute bottom-0 right-[6px]',
+          authorReplied ? 'group-hover:right-[22px]' : '',
+        ]"
+        width="20"
+        height="20"
+        viewBox="0 0 20 20"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <circle cx="10" cy="10" r="9.5" fill="#F7F7F7" stroke="#E1E1E1" />
+        <g opacity="0.5" clip-path="url(#clip0_2298_5781)">
+          <path
+            d="M5.2658 8.70773L8.70338 5.73928C9.00428 5.47941 9.47851 5.69037 9.47851 6.09404V7.65758C12.6158 7.69349 15.1035 8.32226 15.1035 11.2954C15.1035 12.4954 14.3304 13.6843 13.4759 14.3058C13.2093 14.4998 12.8292 14.2563 12.9275 13.9419C13.8132 11.1097 12.5075 10.3578 9.47851 10.3142V12.0312C9.47851 12.4355 9.0039 12.6456 8.70338 12.386L5.2658 9.41726C5.04957 9.23051 5.04927 8.89474 5.2658 8.70773Z"
+            fill="#9B9B9B"
+          />
+        </g>
+        <defs>
+          <clipPath id="clip0_2298_5781">
+            <rect
+              width="10"
+              height="10"
+              fill="white"
+              transform="translate(5.10352 5)"
+            />
+          </clipPath>
+        </defs>
+      </svg>
+    </div>
+  </NuxtLink>
+</template>
+
+<script>
+import collectorMessageBg from '~/assets/images/nft/books/collector-message-item-background.svg';
+import { ellipsis } from '~/util/ui';
+
+export default {
+  name: 'NFTPageCollectorMessageListItem',
+  filters: {
+    ellipsis,
+  },
+  props: {
+    message: {
+      type: Object,
+      required: true,
+    },
+    creatorAvatar: {
+      type: String,
+      default: undefined,
+    },
+    classId: {
+      type: String,
+      default: undefined,
+    },
+  },
+  computed: {
+    buyerMessage() {
+      return this.message?.buyerMessage;
+    },
+    bgStyle() {
+      return {
+        backgroundImage: `url(${collectorMessageBg})`,
+        backgroundSize: 'cover',
+        backgroundPosition: 'center',
+      };
+    },
+    authorReplied() {
+      return this.message?.authorReply;
+    },
+    messagesPageLink() {
+      return this.localeLocation({
+        name: 'nft-class-classId-nftId',
+        params: {
+          classId: this.classId,
+          nftId: this.message?.collectedFirstNFTId,
+        },
+      });
+    },
+  },
+};
+</script>
diff --git a/src/components/ScrollingList.vue b/src/components/ScrollingList.vue
index b4c343ced..22cbeab5a 100644
--- a/src/components/ScrollingList.vue
+++ b/src/components/ScrollingList.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="relative flex"
+    class="relative flex hover-animate"
     :style="{
       '--animation-duration': durationTime,
     }"
@@ -40,6 +40,11 @@ export default {
   animation-delay: calc(var(--animation-duration, 60s) * -1);
 }
 
+.hover-animate:hover .animate-scroll,
+.hover-animate:hover .animate-scroll.delay {
+  animation-play-state: paused;
+}
+
 @keyframes scroll {
   0% {
     transform: translateX(100);
diff --git a/src/pages/nft/class/_classId/index.vue b/src/pages/nft/class/_classId/index.vue
index 8fa3c1981..a1cb643c2 100644
--- a/src/pages/nft/class/_classId/index.vue
+++ b/src/pages/nft/class/_classId/index.vue
@@ -208,7 +208,9 @@
               <NFTPageCollectorMessageList
                 class="absolute transform -translate-x-1/2 w-[100vw] left-1/2"
                 :class-id="classId"
+                :creator-avatar="creatorAvatar"
                 :messages="filterCollectorsWithReplies"
+                :duration-multiplier="8"
               />
             </div>
           </section>

From e8317ef6e56939298ca6c4428fdf5c6ac1c72f57 Mon Sep 17 00:00:00 2001
From: AuroraHuang22 <aurora90376@gmail.com>
Date: Tue, 24 Dec 2024 18:08:32 +0800
Subject: [PATCH 6/7] =?UTF-8?q?=F0=9F=92=84=20Add=20overlay=20ui=20to=20li?=
 =?UTF-8?q?st?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/nft/class/_classId/index.vue | 20 +++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/src/pages/nft/class/_classId/index.vue b/src/pages/nft/class/_classId/index.vue
index a1cb643c2..5dda2e2fd 100644
--- a/src/pages/nft/class/_classId/index.vue
+++ b/src/pages/nft/class/_classId/index.vue
@@ -206,12 +206,27 @@
                 />
               </div>
               <NFTPageCollectorMessageList
-                class="absolute transform -translate-x-1/2 w-[100vw] left-1/2"
+                class="transform -translate-x-1/2 w-[100vw] left-1/2"
                 :class-id="classId"
                 :creator-avatar="creatorAvatar"
                 :messages="filterCollectorsWithReplies"
                 :duration-multiplier="8"
               />
+              <div
+                :class="[
+                  'relative',
+                  'flex',
+                  'justify-between',
+                  'h-[180px] laptop:h-[204px]',
+                  'z-50',
+                  '-mx-[12px] laptop:-mx-[24px] desktop:-mx-[calc((100vw-962px)/2)]',
+                  '-mt-[180px] laptop:-mt-[204px]',
+                  'pointer-events-none',
+                ]"
+              >
+                <div :class="[overlayClasses, 'bg-gradient-to-r']" />
+                <div :class="[overlayClasses, 'bg-gradient-to-l']" />
+              </div>
             </div>
           </section>
 
@@ -1119,6 +1134,9 @@ export default {
           : 'nft_edition_select_compare_button_text'
       );
     },
+    overlayClasses() {
+      return ['h-full', 'w-[60px]', 'from-light-gray', 'to-transparent'];
+    },
   },
   async mounted() {
     try {

From a5eaed89b6843e2a8fe907b4ca1128212273b670 Mon Sep 17 00:00:00 2001
From: AuroraHuang22 <aurora90376@gmail.com>
Date: Tue, 24 Dec 2024 20:36:51 +0800
Subject: [PATCH 7/7] =?UTF-8?q?=F0=9F=93=B1Update=20item=20ui=20for=20mobi?=
 =?UTF-8?q?le=20version?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../collector-message-item-background-lg.svg  |  16 +++
 .../collector-message-item-background.svg     |  22 ++--
 .../NFTPage/CollectorMessageList/Identity.vue | 103 ++++++++++++++++++
 .../NFTPage/CollectorMessageList/Item.vue     |  26 ++---
 src/components/ScrollingList.vue              |  60 ++++++++--
 src/util/ui.js                                |  13 +++
 6 files changed, 204 insertions(+), 36 deletions(-)
 create mode 100644 src/assets/images/nft/books/collector-message-item-background-lg.svg
 create mode 100644 src/components/NFTPage/CollectorMessageList/Identity.vue

diff --git a/src/assets/images/nft/books/collector-message-item-background-lg.svg b/src/assets/images/nft/books/collector-message-item-background-lg.svg
new file mode 100644
index 000000000..2a7ce151c
--- /dev/null
+++ b/src/assets/images/nft/books/collector-message-item-background-lg.svg
@@ -0,0 +1,16 @@
+<svg width="240" height="204" viewBox="0 0 240 204" fill="none"
+  xmlns="http://www.w3.org/2000/svg">
+  <rect x="0.5" y="0.5" width="239" height="203" rx="7.5" fill="white"/>
+  <rect x="0.5" y="0.5" width="239" height="203" rx="7.5" stroke="url(#paint0_linear_1947_2184)"/>
+  <path d="M145.095 203.971C143.124 204.037 142 203.971 142 203.971H145.095C155.359 203.625 188.584 199.679 205.449 164C231.205 172.756 240 164 240 164V203.971H145.095Z" fill="url(#paint1_radial_1947_2184)"/>
+  <defs>
+    <linearGradient id="paint0_linear_1947_2184" x1="175" y1="133.786" x2="200.061" y2="204.86" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#E1E1E1"/>
+      <stop offset="1" stop-color="#E1E1E1" stop-opacity="0"/>
+    </linearGradient>
+    <radialGradient id="paint1_radial_1947_2184" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(206.077 164) rotate(57.8799) scale(23.6303 58.9055)">
+      <stop stop-color="#D9D9D9"/>
+      <stop offset="1" stop-color="#F7F7F7"/>
+    </radialGradient>
+  </defs>
+</svg>
diff --git a/src/assets/images/nft/books/collector-message-item-background.svg b/src/assets/images/nft/books/collector-message-item-background.svg
index ac89e9b0f..cfceae4af 100644
--- a/src/assets/images/nft/books/collector-message-item-background.svg
+++ b/src/assets/images/nft/books/collector-message-item-background.svg
@@ -1,16 +1,16 @@
-<svg class="absolute top-0 left-0" width="240" height="204" viewBox="0 0 240 204" fill="none"
+<svg width="195" height="180" viewBox="0 0 195 180" fill="none"
   xmlns="http://www.w3.org/2000/svg">
-  <rect x="0.5" y="0.5" width="239" height="203" rx="7.5" fill="white" />
-  <rect x="0.5" y="0.5" width="239" height="203" rx="7.5" stroke="url(#paint0_linear_1940_2184)" />
-  <path d="M145.095 203.971C143.124 204.037 142 203.971 142 203.971H145.095C155.359 203.625 188.584 199.679 205.449 164C231.205 172.756 240 164 240 164V203.971H145.095Z" fill="url(#paint1_radial_1940_2184)" />
+  <rect x="0.5" y="0.5" width="194" height="179" rx="7.5" fill="white"/>
+  <rect x="0.5" y="0.5" width="194" height="179" rx="7.5" stroke="url(#paint0_linear_1940_2184)"/>
+  <path d="M100.095 179.971C98.1244 180.037 97 179.971 97 179.971H100.095C110.359 179.625 143.584 175.679 160.449 140C186.205 148.756 195 140 195 140V179.971H100.095Z" fill="url(#paint1_radial_1940_2184)"/>
   <defs>
-    <linearGradient id="paint0_linear_1940_2184" x1="175" y1="133.786" x2="200.061" y2="204.86" gradientUnits="userSpaceOnUse">
-      <stop stop-color="#E1E1E1" />
-      <stop offset="1" stop-color="#E1E1E1" stop-opacity="0" />
+    <linearGradient id="paint0_linear_1940_2184" x1="142.188" y1="118.047" x2="165.734" y2="179.539" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#E1E1E1"/>
+      <stop offset="1" stop-color="#E1E1E1" stop-opacity="0"/>
     </linearGradient>
-    <radialGradient id="paint1_radial_1940_2184" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(206.077 164) rotate(57.8799) scale(23.6303 58.9055)">
-      <stop stop-color="#D9D9D9" />
-      <stop offset="1" stop-color="#F7F7F7" />
+    <radialGradient id="paint1_radial_1940_2184" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(161.077 140) rotate(57.8799) scale(23.6303 58.9055)">
+      <stop stop-color="#D9D9D9"/>
+      <stop offset="1" stop-color="#F7F7F7"/>
     </radialGradient>
   </defs>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/src/components/NFTPage/CollectorMessageList/Identity.vue b/src/components/NFTPage/CollectorMessageList/Identity.vue
new file mode 100644
index 000000000..1d789922f
--- /dev/null
+++ b/src/components/NFTPage/CollectorMessageList/Identity.vue
@@ -0,0 +1,103 @@
+<template>
+  <component
+    :is="walletAddress ? 'NuxtLink' : 'div'"
+    :class="[
+      'flex',
+      'phone:flex-col',
+      'items-center',
+
+      'gap-[16px]',
+      'phone:gap-[8px]',
+
+      'pl-[8px]',
+      'pr-[24px]',
+      'py-[8px]',
+      'phone:pr-[12px]',
+
+      'bg-white',
+      'phone:rounded-[14px]',
+      'rounded-full',
+      'cursor-pointer',
+
+      wrapperClasses,
+    ]"
+    :to="toRoute"
+  >
+    <Identity
+      class="flex-shrink-0"
+      :avatar-url="userAvatar"
+      :avatar-size="avatarSize"
+      :is-avatar-outlined="isUserCivicLiker"
+    />
+    <div>
+      <p class="text-like-green hover:underline" align="center">
+        {{ userDisplayNameFull | ellipsisCollectorAddress }}
+      </p>
+    </div>
+  </component>
+</template>
+
+<script>
+import { mapActions } from 'vuex';
+
+import { createUserInfoMixin } from '~/mixins/user-info';
+import { ellipsisCollectorAddress } from '~/util/ui';
+
+const userInfoMixin = createUserInfoMixin({ walletKey: 'walletAddress' });
+
+export default {
+  name: 'NFTPageCollectorMessageListIdentity',
+  filters: {
+    ellipsisCollectorAddress,
+  },
+  mixins: [userInfoMixin],
+  props: {
+    walletAddress: {
+      type: String,
+      default: '',
+    },
+    type: {
+      type: String,
+      default: 'collector',
+    },
+    wrapperClasses: {
+      type: [String, Array],
+      default: undefined,
+    },
+    isShowTypeLabel: {
+      type: Boolean,
+      default: true,
+    },
+    avatarSize: {
+      type: Number,
+      default: 42,
+    },
+  },
+  computed: {
+    toRoute() {
+      if (!this.walletAddress) {
+        return '';
+      }
+
+      return this.localeLocation({
+        name: 'id',
+        params: { id: this.walletAddress },
+        query: { tab: this.isCreatedTab ? 'created' : 'collected' },
+      });
+    },
+  },
+  watch: {
+    walletAddress() {
+      this.lazyGetUserInfoByAddress(this.walletAddress);
+    },
+  },
+  mounted() {
+    if (this.walletAddress) {
+      this.lazyGetUserInfoByAddress(this.walletAddress);
+    }
+  },
+  methods: {
+    ...mapActions(['lazyGetUserInfoByAddress']),
+  },
+};
+</script>
diff --git a/src/components/NFTPage/CollectorMessageList/Item.vue b/src/components/NFTPage/CollectorMessageList/Item.vue
index 70b6834df..6f832d35c 100644
--- a/src/components/NFTPage/CollectorMessageList/Item.vue
+++ b/src/components/NFTPage/CollectorMessageList/Item.vue
@@ -8,22 +8,26 @@
         'flex-col',
         'justify-between',
 
-        'p-[16px] laptop:p-[24px]',
+        'p-[12px] laptop:p-[24px]',
         'pb-[12px] laptop:pb-[20px]',
 
         'min-w-[195px] laptop:min-w-[240px]',
         'h-[180px] laptop:h-[204px]',
-
         'cursor-pointer',
+
+        'bg-[url(~/assets/images/nft/books/collector-message-item-background.svg)]',
+        'laptop:bg-[url(~/assets/images/nft/books/collector-message-item-background-lg.svg)]',
+        'bg-cover',
+        'bg-center',
       ]"
       :style="bgStyle"
     >
       <p class="block text-[16px] line-clamp-4">{{ buyerMessage }}</p>
-      <NFTMessageIdentity
+      <NFTPageCollectorMessageListIdentity
         :is-show-type-label="false"
         :wallet-address="message.id"
         :avatar-size="32"
-        :wrapper-classes="`!bg-transparent`"
+        :wrapper-classes="['!bg-transparent', 'phone:!flex-row']"
       />
 
       <Identity
@@ -39,6 +43,7 @@
         :avatar-url="creatorAvatar"
         :avatar-size="20"
       />
+
       <svg
         v-if="authorReplied"
         :class="[
@@ -74,14 +79,8 @@
 </template>
 
 <script>
-import collectorMessageBg from '~/assets/images/nft/books/collector-message-item-background.svg';
-import { ellipsis } from '~/util/ui';
-
 export default {
   name: 'NFTPageCollectorMessageListItem',
-  filters: {
-    ellipsis,
-  },
   props: {
     message: {
       type: Object,
@@ -100,13 +99,6 @@ export default {
     buyerMessage() {
       return this.message?.buyerMessage;
     },
-    bgStyle() {
-      return {
-        backgroundImage: `url(${collectorMessageBg})`,
-        backgroundSize: 'cover',
-        backgroundPosition: 'center',
-      };
-    },
     authorReplied() {
       return this.message?.authorReply;
     },
diff --git a/src/components/ScrollingList.vue b/src/components/ScrollingList.vue
index 22cbeab5a..44fe05fa6 100644
--- a/src/components/ScrollingList.vue
+++ b/src/components/ScrollingList.vue
@@ -1,14 +1,30 @@
 <template>
   <div
-    class="relative flex hover-animate"
+    ref="sliderContainer"
+    :class="[
+      'relative',
+      'flex',
+      'overflow-x-auto laptop:overflow-x-hidden',
+      'hover-animate',
+
+      'select-none',
+      'scrollbar-custom',
+    ]"
     :style="{
       '--animation-duration': durationTime,
     }"
+    @mousedown="startDrag"
+    @mousemove="onDrag"
+    @mouseup="endDrag"
+    @mouseleave="endDrag"
+    @touchstart="startDrag"
+    @touchmove="onDrag"
+    @touchend="endDrag"
   >
     <ul class="flex animate-scroll">
       <slot name="item" />
     </ul>
-    <ul class="flex animate-scroll delay">
+    <ul class="hidden laptop:flex animate-scroll delay">
       <slot name="item" />
     </ul>
   </div>
@@ -22,22 +38,50 @@ export default {
       default: '60s',
     },
   },
+  data() {
+    return {
+      isDragging: false,
+      startX: 0,
+      scrollLeft: 0,
+    };
+  },
   computed: {
     durationTime() {
       return this.animationDuration;
     },
   },
+  methods: {
+    startDrag(event) {
+      this.isDragging = true;
+      const pageX = event.pageX || event.touches[0].pageX;
+      this.startX = pageX - this.$refs.sliderContainer.offsetLeft;
+      this.scrollLeft = this.$refs.sliderContainer.scrollLeft;
+    },
+    onDrag(event) {
+      if (!this.isDragging) return;
+      event.preventDefault();
+      const pageX = event.pageX || event.touches[0].pageX;
+      const x = pageX - this.$refs.sliderContainer.offsetLeft;
+      const walk = (x - this.startX) * 1.5;
+      this.$refs.sliderContainer.scrollLeft = this.scrollLeft - walk;
+    },
+    endDrag() {
+      this.isDragging = false;
+    },
+  },
 };
 </script>
 
 <style scoped>
-.animate-scroll {
-  animation: scroll var(--animation-duration, 60s) infinite linear;
-}
+@screen laptop {
+  .animate-scroll {
+    animation: scroll var(--animation-duration, 60s) infinite linear;
+  }
 
-.animate-scroll.delay {
-  animation: scroll var(--animation-duration, 60s) infinite linear;
-  animation-delay: calc(var(--animation-duration, 60s) * -1);
+  .animate-scroll.delay {
+    animation: scroll var(--animation-duration, 60s) infinite linear;
+    animation-delay: calc(var(--animation-duration, 60s) * -1);
+  }
 }
 
 .hover-animate:hover .animate-scroll,
diff --git a/src/util/ui.js b/src/util/ui.js
index 5e5ffee3a..cb0e5a8aa 100644
--- a/src/util/ui.js
+++ b/src/util/ui.js
@@ -22,6 +22,19 @@ export function ellipsis(value) {
   return value;
 }
 
+export function ellipsisCollectorAddress(value) {
+  if (value) {
+    const len = value.length;
+    const dots = '...';
+    if (!value) return '';
+    if (value.length > 10) {
+      return value.substring(0, 8) + dots;
+    }
+    return value;
+  }
+  return value;
+}
+
 export function ellipsisNFTName(value) {
   if (value) {
     const len = value.length;