From 205652195808457e620f78b6d18c9c6ad8350e60 Mon Sep 17 00:00:00 2001
From: silver-it <alex.jin220@gmail.com>
Date: Sat, 20 Apr 2024 06:15:15 +0800
Subject: [PATCH 01/77] chore: do not open new tab when user is signed in

---
 frontend/common/translations.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/common/translations.js b/frontend/common/translations.js
index 79cb55964..b7bccc9ac 100644
--- a/frontend/common/translations.js
+++ b/frontend/common/translations.js
@@ -133,13 +133,14 @@ export default function L (
 
 export function LError (error: Error): {|reportError: any|} {
   let url = `/app/dashboard?modal=UserSettingsModal&tab=application-logs&errorMsg=${encodeURI(error.message)}`
+  const target = !sbp('state/vuex/state').loggedIn ? 'target="_blank"' : ''
   if (!sbp('state/vuex/state').loggedIn) {
     url = 'https://github.com/okTurtles/group-income/issues'
   }
   return {
     reportError: L('"{errorMsg}". You can {a_}report the error{_a}.', {
       errorMsg: error.message,
-      'a_': `<a class="link" target="_blank" href="${url}">`,
+      'a_': `<a class="link" ${target} href="${url}">`,
       '_a': '</a>'
     })
   }

From 22ff2a8788c338252a4dc3389bf0a1d51b24af67 Mon Sep 17 00:00:00 2001
From: silver-it <alex.jin220@gmail.com>
Date: Fri, 17 May 2024 07:43:00 +0800
Subject: [PATCH 02/77] fix: wrong position of parentheses

---
 frontend/views/pages/DesignSystem.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/views/pages/DesignSystem.vue b/frontend/views/pages/DesignSystem.vue
index 3ff2d5cc0..0c220acdc 100644
--- a/frontend/views/pages/DesignSystem.vue
+++ b/frontend/views/pages/DesignSystem.vue
@@ -149,7 +149,7 @@ page(
     section.card
       h2.is-title-2.card-header Icons
       p
-        | This is only the currently used icons (at _icons.scss). A complete list can be find here:&nbsp;
+        | This is only the currently used icons at (_icons.scss). A complete list can be find here:&nbsp;
         br
         a.link(href='https://fortawesome.com/sets/font-awesome-5-solid' target='_blank') fortawesome 5 solid
         |  or&nbsp;

From 2450dd1e69939fad6aae28b269f122c51fb056c5 Mon Sep 17 00:00:00 2001
From: silver-it <alex.jin220@gmail.com>
Date: Fri, 17 May 2024 10:27:21 +0800
Subject: [PATCH 03/77] feat: implement pinned message tooltip

---
 frontend/assets/style/_icons.scss             |  1 +
 frontend/views/components/Tooltip.vue         |  2 +-
 .../views/containers/chatroom/MessageBase.vue |  2 -
 frontend/views/pages/DesignSystem.vue         |  1 +
 frontend/views/pages/GroupChat.vue            | 61 +++++++++++++++++--
 5 files changed, 60 insertions(+), 7 deletions(-)

diff --git a/frontend/assets/style/_icons.scss b/frontend/assets/style/_icons.scss
index 2cf52aecd..3ae86cc2e 100644
--- a/frontend/assets/style/_icons.scss
+++ b/frontend/assets/style/_icons.scss
@@ -59,6 +59,7 @@ $icons: (
   tag: "\f02b",
   times: "\f00d",
   times-circle: "\f057",
+  thumbtack: "\f08D",
   undo: "\f0e2",
   user: "\f007",
   user-plus: "\f234",
diff --git a/frontend/views/components/Tooltip.vue b/frontend/views/components/Tooltip.vue
index 65f835729..85c0b79fa 100644
--- a/frontend/views/components/Tooltip.vue
+++ b/frontend/views/components/Tooltip.vue
@@ -263,7 +263,7 @@ export default ({
   }
 
   &.manual {
-    max-width: auto;
+    max-width: unset;
   }
 
   &.is-dark-theme {
diff --git a/frontend/views/containers/chatroom/MessageBase.vue b/frontend/views/containers/chatroom/MessageBase.vue
index 41dd2f20f..d45bb85fc 100644
--- a/frontend/views/containers/chatroom/MessageBase.vue
+++ b/frontend/views/containers/chatroom/MessageBase.vue
@@ -116,7 +116,6 @@
 import sbp from '@sbp/sbp'
 import { mapGetters } from 'vuex'
 import Avatar from '@components/Avatar.vue'
-import Tooltip from '@components/Tooltip.vue'
 import ProfileCard from '@components/ProfileCard.vue'
 import emoticonsMixins from './EmoticonsMixins.js'
 import MessageActions from './MessageActions.vue'
@@ -145,7 +144,6 @@ export default ({
   mixins: [emoticonsMixins],
   components: {
     Avatar,
-    Tooltip,
     ProfileCard,
     MessageActions,
     MessageReactions,
diff --git a/frontend/views/pages/DesignSystem.vue b/frontend/views/pages/DesignSystem.vue
index 0c220acdc..c7c7ea02b 100644
--- a/frontend/views/pages/DesignSystem.vue
+++ b/frontend/views/pages/DesignSystem.vue
@@ -215,6 +215,7 @@ page(
               i.icon-sort-down sort-down
               i.icon-star icon-star
               i.icon-strikethrough icon-strikethrough
+              i.icon-thumbtack icon-thumbtack
               i.icon-times icon-times
               i.icon-times-circle icon-times-circle
               i.icon-undo icon-undo
diff --git a/frontend/views/pages/GroupChat.vue b/frontend/views/pages/GroupChat.vue
index dd7a6ad6f..03e495cbc 100644
--- a/frontend/views/pages/GroupChat.vue
+++ b/frontend/views/pages/GroupChat.vue
@@ -81,6 +81,28 @@ page(pageTestName='groupChat' :miniHeader='isDirectMessage()')
           data-test='updateDescription'
           @click='editDescription'
         ) Add description
+    .c-header-shortcuts
+      tooltip(:manual='true' :opacity='1')
+        span.c-pin-wrapper
+          i.icon-thumbtack
+          span 2 Pinned
+        template(slot='tooltip')
+          .card.c-pinned-messages
+            .c-pinned-message asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf
+            .c-pinned-message asdfasdfasdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf
+            .c-pinned-message asdfasdf asdfasdf asdfasdf
+            .c-pinned-message asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf
+            .c-pinned-message asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf
+            .c-pinned-message asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf
+            .c-pinned-message asdfasdfasdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf
+            .c-pinned-message asdfasdf asdfasdf asdfasdf
+            .c-pinned-message asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf
+            .c-pinned-message asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf
+            .c-pinned-message asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf
+            .c-pinned-message asdfasdfasdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf
+            .c-pinned-message asdfasdf asdfasdf asdfasdf
+            .c-pinned-message asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf
+            .c-pinned-message asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf
 
   template(#sidebar='{ toggle }')
     chat-nav(:title='L("Chat")')
@@ -107,8 +129,9 @@ page(pageTestName='groupChat' :miniHeader='isDirectMessage()')
 <script>
 import sbp from '@sbp/sbp'
 import { mapGetters } from 'vuex'
-import Page from '@components/Page.vue'
 import Avatar from '@components/Avatar.vue'
+import Page from '@components/Page.vue'
+import Tooltip from '@components/Tooltip.vue'
 import ConversationsList from '@containers/chatroom/ConversationsList.vue'
 import ChatNav from '@containers/chatroom/ChatNav.vue'
 import ChatMain from '@containers/chatroom/ChatMain.vue'
@@ -124,8 +147,9 @@ export default ({
     ChatMixin
   ],
   components: {
-    Page,
     Avatar,
+    Page,
+    Tooltip,
     ChatNav,
     ChatMain,
     ConversationsList,
@@ -210,8 +234,8 @@ export default ({
   border-radius: 0.625rem;
 
   @include tablet {
-    height: calc(100% - 3rem);
-    margin-top: 1.5rem;
+    height: calc(100% - 2rem);
+    margin-top: 0.5rem;
     margin-bottom: 1rem;
   }
 
@@ -341,6 +365,35 @@ export default ({
   }
 }
 
+.c-header-shortcuts {
+  padding: 0 0.2rem;
+
+  .c-pin-wrapper {
+    span {
+      margin-left: 0.25rem;
+    }
+  }
+}
+
+.c-pinned-messages {
+  margin: 0;
+  padding: 1rem;
+  max-height: 45rem;
+  max-width: 25rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  overflow: auto;
+
+  .c-pinned-message {
+    padding: 0.5rem;
+    color: $text_0;
+    border-radius: 0.3rem;
+    background-color: $general_2;
+    cursor: pointer;
+  }
+}
+
 .c-menu-trigger.is-active {
   pointer-events: none;
 

From 2762dc17d93dc76bc8aa00fec53632051e0d36ca Mon Sep 17 00:00:00 2001
From: silver-it <alex.jin220@gmail.com>
Date: Fri, 17 May 2024 15:25:39 +0800
Subject: [PATCH 04/77] chore: revert unrelated changes

---
 frontend/common/translations.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/frontend/common/translations.js b/frontend/common/translations.js
index b7bccc9ac..79cb55964 100644
--- a/frontend/common/translations.js
+++ b/frontend/common/translations.js
@@ -133,14 +133,13 @@ export default function L (
 
 export function LError (error: Error): {|reportError: any|} {
   let url = `/app/dashboard?modal=UserSettingsModal&tab=application-logs&errorMsg=${encodeURI(error.message)}`
-  const target = !sbp('state/vuex/state').loggedIn ? 'target="_blank"' : ''
   if (!sbp('state/vuex/state').loggedIn) {
     url = 'https://github.com/okTurtles/group-income/issues'
   }
   return {
     reportError: L('"{errorMsg}". You can {a_}report the error{_a}.', {
       errorMsg: error.message,
-      'a_': `<a class="link" ${target} href="${url}">`,
+      'a_': `<a class="link" target="_blank" href="${url}">`,
       '_a': '</a>'
     })
   }

From c6a6514101cec8f2792771c4df129ab1f1a10fd4 Mon Sep 17 00:00:00 2001
From: silver-it <alex.jin220@gmail.com>
Date: Mon, 20 May 2024 10:06:10 +0800
Subject: [PATCH 05/77] feat: created PinnedMessages component

---
 frontend/views/components/Tooltip.vue         |  8 +-
 .../group-creation-steps/GroupMincome.vue     |  2 +-
 .../containers/chatroom/PinnedMessages.vue    | 95 +++++++++++++++++++
 .../dashboard/GroupMembersTooltipPending.vue  |  2 +-
 .../dashboard/SentenceWithMemberTooltip.vue   |  2 +-
 frontend/views/pages/DesignSystem.vue         |  2 +-
 frontend/views/pages/GroupChat.vue            | 40 +-------
 7 files changed, 109 insertions(+), 42 deletions(-)
 create mode 100644 frontend/views/containers/chatroom/PinnedMessages.vue

diff --git a/frontend/views/components/Tooltip.vue b/frontend/views/components/Tooltip.vue
index 85c0b79fa..bc897f4be 100644
--- a/frontend/views/components/Tooltip.vue
+++ b/frontend/views/components/Tooltip.vue
@@ -46,7 +46,7 @@ export default ({
     },
     direction: {
       type: String,
-      validator: (value) => ['bottom', 'bottom-end', 'right', 'left', 'top', 'top-left'].includes(value),
+      validator: (value) => ['bottom', 'bottom-left', 'bottom-right', 'right', 'left', 'top', 'top-left'].includes(value),
       default: 'bottom'
     },
     opacity: {
@@ -132,7 +132,11 @@ export default ({
           case 'left':
             x = scrollX + left - spacing - this.tooltipWidth
             break
-          case 'bottom-end':
+          case 'bottom-left':
+            x = scrollX + left
+            y = scrollY + top + height + spacing
+            break
+          case 'bottom-right':
             x = scrollX + left + width - this.tooltipWidth
             y = scrollY + top + height + spacing
             break
diff --git a/frontend/views/components/group-creation-steps/GroupMincome.vue b/frontend/views/components/group-creation-steps/GroupMincome.vue
index 79bcdccd1..cb99dafa9 100644
--- a/frontend/views/components/group-creation-steps/GroupMincome.vue
+++ b/frontend/views/components/group-creation-steps/GroupMincome.vue
@@ -41,7 +41,7 @@
     fieldset.field
       .label.c-label-tooltip
         i18n On what day should the first payment distribution be calculated?
-        tooltip(direction='bottom-end')
+        tooltip(direction='bottom-right')
           span.button.is-icon-small
             i.icon-question-circle
           template(slot='tooltip')
diff --git a/frontend/views/containers/chatroom/PinnedMessages.vue b/frontend/views/containers/chatroom/PinnedMessages.vue
new file mode 100644
index 000000000..c09557873
--- /dev/null
+++ b/frontend/views/containers/chatroom/PinnedMessages.vue
@@ -0,0 +1,95 @@
+<template lang='pug'>
+.card.c-pinned-messages-wrapper
+  template(v-for='(msg, index) in fakeMessageList')
+    .c-pinned-message(:key='msg.hash')
+      .c-pinned-message-header
+        .c-sender-profile
+          profile-card(:contractID='msg.from')
+            avatar-user(:contractID='msg.from' size='xs')
+            .c-message-sender-name.has-text-bold.has-ellipsis {{ userDisplayNameFromID(msg.from) }}
+        i.icon-times
+      .c-pinned-message-content
+        span.custom-markdown-content(
+          v-safe-html:a='renderMarkdown(msg.text)'
+        )
+      p.c-pinned-message-footer {{ humanDate(msg.datetime, { month: 'long', year: 'numeric', day: 'numeric', hour: 'numeric', minute: 'numeric' }) }}
+
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import ProfileCard from '@components/ProfileCard.vue'
+import AvatarUser from '@components/AvatarUser.vue'
+import { MESSAGE_TYPES } from '@model/contracts/shared/constants.js'
+import { humanDate } from '@model/contracts/shared/time.js'
+import { renderMarkdown } from '@view-utils/markdown-utils.js'
+
+export default ({
+  name: 'PinnedMessage',
+  components: {
+    ProfileCard,
+    AvatarUser
+  },
+  props: {},
+  data () {
+    return {}
+  },
+  computed: {
+    ...mapGetters(['ourIdentityContractId', 'chatRoomLatestMessages', 'userDisplayNameFromID']),
+    fakeMessageList () {
+      return this.chatRoomLatestMessages.filter(msg => msg.type === MESSAGE_TYPES.TEXT)
+    }
+  },
+  methods: {
+    humanDate,
+    renderMarkdown
+  }
+}: Object)
+</script>
+
+<style lang="scss" scoped>
+@import "@assets/style/_variables.scss";
+
+.c-pinned-messages-wrapper {
+  margin: -0.5rem;
+  padding: 1rem;
+  max-height: 40rem;
+  max-width: 25rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  overflow: auto;
+
+  .c-pinned-message {
+    padding: 0.5rem;
+    color: $text_0;
+    border-radius: 0.3rem;
+    background-color: $general_2;
+    cursor: pointer;
+
+    .c-pinned-message-header {
+      display: flex;
+      justify-content: space-between;
+
+      .c-sender-profile {
+        max-width: calc(100% - 1rem);
+
+        .c-message-sender-name {
+          // xs avatar size is 1.5rem
+          max-width: calc(100% - 1.5rem);
+          margin-left: 0.25rem;
+        }
+      }
+    }
+
+    .c-pinned-message-content {
+      margin: 0.5rem 0;
+    }
+
+    .c-pinned-message-footer {
+      font-size: 0.7rem;
+      color: $text_1;
+    }
+  }
+}
+</style>
diff --git a/frontend/views/containers/dashboard/GroupMembersTooltipPending.vue b/frontend/views/containers/dashboard/GroupMembersTooltipPending.vue
index 94d552f1b..7f280df6f 100644
--- a/frontend/views/containers/dashboard/GroupMembersTooltipPending.vue
+++ b/frontend/views/containers/dashboard/GroupMembersTooltipPending.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-  tooltip(direction='bottom-end')
+  tooltip(direction='bottom-right')
     span.button.is-icon-small(data-test='pendingTooltip')
       i.icon-question-circle
     template(slot='tooltip')
diff --git a/frontend/views/containers/dashboard/SentenceWithMemberTooltip.vue b/frontend/views/containers/dashboard/SentenceWithMemberTooltip.vue
index 2f6229398..eb7e62884 100644
--- a/frontend/views/containers/dashboard/SentenceWithMemberTooltip.vue
+++ b/frontend/views/containers/dashboard/SentenceWithMemberTooltip.vue
@@ -4,7 +4,7 @@ component(
   :key='members.length'
   :opacity='members.length === 0 ? 0 : 0.95'
   triggerElementSelector='.t-trigger'
-  direction='bottom-end'
+  direction='bottom-right'
 )
   // The reason for using <component /> tag here instead of <tooltip /> and specifying 'key' attr is,
   // to fix the bug where the link between the tooltip content(template(slot='tooltip') below) and the trigger target element(.t-trigger)
diff --git a/frontend/views/pages/DesignSystem.vue b/frontend/views/pages/DesignSystem.vue
index c7c7ea02b..edfd1c63b 100644
--- a/frontend/views/pages/DesignSystem.vue
+++ b/frontend/views/pages/DesignSystem.vue
@@ -668,7 +668,7 @@ page(
               | tooltip(triggerElementCss='.trigger-target')
               |   i.icon-* Basic
           td
-            tooltip(text='A simple text inside' triggerElementSelector='.trigger-target' direction='bottom-end')
+            tooltip(text='A simple text inside' triggerElementSelector='.trigger-target' direction='bottom-right')
               span
                 span.link.trigger-target 5 members
                 | &nbsp;have&nbsp;
diff --git a/frontend/views/pages/GroupChat.vue b/frontend/views/pages/GroupChat.vue
index 03e495cbc..7f8f3b587 100644
--- a/frontend/views/pages/GroupChat.vue
+++ b/frontend/views/pages/GroupChat.vue
@@ -82,27 +82,12 @@ page(pageTestName='groupChat' :miniHeader='isDirectMessage()')
           @click='editDescription'
         ) Add description
     .c-header-shortcuts
-      tooltip(:manual='true' :opacity='1')
+      tooltip(:manual='true' :opacity='1' direction='bottom-left')
         span.c-pin-wrapper
           i.icon-thumbtack
           span 2 Pinned
         template(slot='tooltip')
-          .card.c-pinned-messages
-            .c-pinned-message asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf
-            .c-pinned-message asdfasdfasdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf
-            .c-pinned-message asdfasdf asdfasdf asdfasdf
-            .c-pinned-message asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf
-            .c-pinned-message asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf
-            .c-pinned-message asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf
-            .c-pinned-message asdfasdfasdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf
-            .c-pinned-message asdfasdf asdfasdf asdfasdf
-            .c-pinned-message asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf
-            .c-pinned-message asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf
-            .c-pinned-message asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf
-            .c-pinned-message asdfasdfasdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf
-            .c-pinned-message asdfasdf asdfasdf asdfasdf
-            .c-pinned-message asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf
-            .c-pinned-message asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf
+          pinned-messages
 
   template(#sidebar='{ toggle }')
     chat-nav(:title='L("Chat")')
@@ -137,6 +122,7 @@ import ChatNav from '@containers/chatroom/ChatNav.vue'
 import ChatMain from '@containers/chatroom/ChatMain.vue'
 import ChatMixin from '@containers/chatroom/ChatMixin.js'
 import ChatMembers from '@containers/chatroom/ChatMembers.vue'
+import PinnedMessages from '@containers/chatroom/PinnedMessages.vue'
 import { OPEN_MODAL } from '@utils/events.js'
 import { MenuParent, MenuTrigger, MenuContent, MenuItem, MenuHeader } from '@components/menu/index.js'
 import { CHATROOM_PRIVACY_LEVEL } from '@model/contracts/shared/constants.js'
@@ -154,6 +140,7 @@ export default ({
     ChatMain,
     ConversationsList,
     ChatMembers,
+    PinnedMessages,
     MenuParent,
     MenuHeader,
     MenuTrigger,
@@ -375,25 +362,6 @@ export default ({
   }
 }
 
-.c-pinned-messages {
-  margin: 0;
-  padding: 1rem;
-  max-height: 45rem;
-  max-width: 25rem;
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  overflow: auto;
-
-  .c-pinned-message {
-    padding: 0.5rem;
-    color: $text_0;
-    border-radius: 0.3rem;
-    background-color: $general_2;
-    cursor: pointer;
-  }
-}
-
 .c-menu-trigger.is-active {
   pointer-events: none;
 

From 75623f5bfc02399a62f401c9385affc779bc7082 Mon Sep 17 00:00:00 2001
From: silver-it <alex.jin220@gmail.com>
Date: Mon, 20 May 2024 10:42:16 +0800
Subject: [PATCH 06/77] chore: removed ProfileCard inside pinned message

---
 frontend/views/components/ProfileCard.vue       |  2 +-
 .../containers/chatroom/PinnedMessages.vue      | 17 ++++++++++-------
 2 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/frontend/views/components/ProfileCard.vue b/frontend/views/components/ProfileCard.vue
index ccf404df2..58dd71499 100644
--- a/frontend/views/components/ProfileCard.vue
+++ b/frontend/views/components/ProfileCard.vue
@@ -99,7 +99,7 @@ export default ({
     contractID: String,
     direction: {
       type: String,
-      validator: (value) => ['left', 'top-left'].includes(value),
+      validator: (value) => ['left', 'top-left', 'bottom'].includes(value),
       default: 'left'
     },
     deactivated: {
diff --git a/frontend/views/containers/chatroom/PinnedMessages.vue b/frontend/views/containers/chatroom/PinnedMessages.vue
index c09557873..c4b56b460 100644
--- a/frontend/views/containers/chatroom/PinnedMessages.vue
+++ b/frontend/views/containers/chatroom/PinnedMessages.vue
@@ -1,12 +1,11 @@
 <template lang='pug'>
 .card.c-pinned-messages-wrapper
-  template(v-for='(msg, index) in fakeMessageList')
+  template(v-for='(msg, index) in fakeMessages')
     .c-pinned-message(:key='msg.hash')
       .c-pinned-message-header
         .c-sender-profile
-          profile-card(:contractID='msg.from')
-            avatar-user(:contractID='msg.from' size='xs')
-            .c-message-sender-name.has-text-bold.has-ellipsis {{ userDisplayNameFromID(msg.from) }}
+          avatar-user(:contractID='msg.from' size='xs')
+          .c-message-sender-name.has-text-bold.has-ellipsis {{ userDisplayNameFromID(msg.from) }}
         i.icon-times
       .c-pinned-message-content
         span.custom-markdown-content(
@@ -18,7 +17,6 @@
 
 <script>
 import { mapGetters } from 'vuex'
-import ProfileCard from '@components/ProfileCard.vue'
 import AvatarUser from '@components/AvatarUser.vue'
 import { MESSAGE_TYPES } from '@model/contracts/shared/constants.js'
 import { humanDate } from '@model/contracts/shared/time.js'
@@ -27,7 +25,6 @@ import { renderMarkdown } from '@view-utils/markdown-utils.js'
 export default ({
   name: 'PinnedMessage',
   components: {
-    ProfileCard,
     AvatarUser
   },
   props: {},
@@ -36,7 +33,7 @@ export default ({
   },
   computed: {
     ...mapGetters(['ourIdentityContractId', 'chatRoomLatestMessages', 'userDisplayNameFromID']),
-    fakeMessageList () {
+    fakeMessages () {
       return this.chatRoomLatestMessages.filter(msg => msg.type === MESSAGE_TYPES.TEXT)
     }
   },
@@ -73,6 +70,8 @@ export default ({
 
       .c-sender-profile {
         max-width: calc(100% - 1rem);
+        display: flex;
+        align-items: center;
 
         .c-message-sender-name {
           // xs avatar size is 1.5rem
@@ -80,6 +79,10 @@ export default ({
           margin-left: 0.25rem;
         }
       }
+
+      & > i {
+        margin-right: 0.25rem;
+      }
     }
 
     .c-pinned-message-content {

From 9d9ec8043305d59df013603637410cdb91ff23d0 Mon Sep 17 00:00:00 2001
From: silver-it <alex.jin220@gmail.com>
Date: Mon, 20 May 2024 18:37:07 +0800
Subject: [PATCH 07/77] chore: optimized codes

---
 frontend/views/containers/chatroom/ChatMembers.vue       | 2 +-
 frontend/views/containers/chatroom/ConversationsList.vue | 6 +++++-
 frontend/views/containers/chatroom/PinnedMessages.vue    | 7 ++++++-
 frontend/views/pages/GroupChat.vue                       | 4 +---
 4 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/frontend/views/containers/chatroom/ChatMembers.vue b/frontend/views/containers/chatroom/ChatMembers.vue
index f20d9f461..ab1bae257 100644
--- a/frontend/views/containers/chatroom/ChatMembers.vue
+++ b/frontend/views/containers/chatroom/ChatMembers.vue
@@ -59,7 +59,7 @@ export default ({
   props: {
     title: {
       type: String,
-      default: L('Members')
+      default: L('Direct Messages')
     },
     action: {
       type: String,
diff --git a/frontend/views/containers/chatroom/ConversationsList.vue b/frontend/views/containers/chatroom/ConversationsList.vue
index 875cf4f16..50ca07b72 100644
--- a/frontend/views/containers/chatroom/ConversationsList.vue
+++ b/frontend/views/containers/chatroom/ConversationsList.vue
@@ -41,6 +41,7 @@ import { OPEN_MODAL } from '@utils/events.js'
 import ListItem from '@components/ListItem.vue'
 import Avatar from '@components/Avatar.vue'
 import { CHATROOM_PRIVACY_LEVEL } from '@model/contracts/shared/constants.js'
+import { L } from '@common/common.js'
 
 export default ({
   name: 'ConversationsList',
@@ -49,7 +50,10 @@ export default ({
     Avatar
   },
   props: {
-    title: String,
+    title: {
+      type: String,
+      default: L('Channels')
+    },
     /** List of channels - shape: {
       order: [] - group channels in order,
       channels: - group channels
diff --git a/frontend/views/containers/chatroom/PinnedMessages.vue b/frontend/views/containers/chatroom/PinnedMessages.vue
index c4b56b460..ed8c0f486 100644
--- a/frontend/views/containers/chatroom/PinnedMessages.vue
+++ b/frontend/views/containers/chatroom/PinnedMessages.vue
@@ -11,7 +11,8 @@
         span.custom-markdown-content(
           v-safe-html:a='renderMarkdown(msg.text)'
         )
-      p.c-pinned-message-footer {{ humanDate(msg.datetime, { month: 'long', year: 'numeric', day: 'numeric', hour: 'numeric', minute: 'numeric' }) }}
+      .c-pinned-message-footer
+        span {{ humanDate(msg.datetime, { month: 'long', year: 'numeric', day: 'numeric', hour: 'numeric', minute: 'numeric' }) }}
 
 </template>
 
@@ -92,6 +93,10 @@ export default ({
     .c-pinned-message-footer {
       font-size: 0.7rem;
       color: $text_1;
+
+      span:hover {
+        text-decoration: underline;
+      }
     }
   }
 }
diff --git a/frontend/views/pages/GroupChat.vue b/frontend/views/pages/GroupChat.vue
index 7f8f3b587..075d34e53 100644
--- a/frontend/views/pages/GroupChat.vue
+++ b/frontend/views/pages/GroupChat.vue
@@ -90,9 +90,8 @@ page(pageTestName='groupChat' :miniHeader='isDirectMessage()')
           pinned-messages
 
   template(#sidebar='{ toggle }')
-    chat-nav(:title='L("Chat")')
+    chat-nav
       conversations-list(
-        :title='L("Channels")'
         routepath='/group-chat/'
         :list='channels'
         route-name='GroupChatConversation'
@@ -102,7 +101,6 @@ page(pageTestName='groupChat' :miniHeader='isDirectMessage()')
 
       chat-members(
         action='addDirectMessage'
-        :title='L("Direct Messages")'
         @new='toggle'
         @redirect='toggle'
       )

From 762d2b36facc864926187e7d0dd7a9be939f21d6 Mon Sep 17 00:00:00 2001
From: silver-it <alex.jin220@gmail.com>
Date: Mon, 20 May 2024 18:44:07 +0800
Subject: [PATCH 08/77] feat: add tooltip for unpin button

---
 frontend/views/containers/chatroom/PinnedMessages.vue | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/frontend/views/containers/chatroom/PinnedMessages.vue b/frontend/views/containers/chatroom/PinnedMessages.vue
index ed8c0f486..b3bac996e 100644
--- a/frontend/views/containers/chatroom/PinnedMessages.vue
+++ b/frontend/views/containers/chatroom/PinnedMessages.vue
@@ -6,7 +6,8 @@
         .c-sender-profile
           avatar-user(:contractID='msg.from' size='xs')
           .c-message-sender-name.has-text-bold.has-ellipsis {{ userDisplayNameFromID(msg.from) }}
-        i.icon-times
+        tooltip(:text='L("Unpin this message")')
+          i.icon-times
       .c-pinned-message-content
         span.custom-markdown-content(
           v-safe-html:a='renderMarkdown(msg.text)'
@@ -19,6 +20,7 @@
 <script>
 import { mapGetters } from 'vuex'
 import AvatarUser from '@components/AvatarUser.vue'
+import Tooltip from '@components/Tooltip.vue'
 import { MESSAGE_TYPES } from '@model/contracts/shared/constants.js'
 import { humanDate } from '@model/contracts/shared/time.js'
 import { renderMarkdown } from '@view-utils/markdown-utils.js'
@@ -26,7 +28,8 @@ import { renderMarkdown } from '@view-utils/markdown-utils.js'
 export default ({
   name: 'PinnedMessage',
   components: {
-    AvatarUser
+    AvatarUser,
+    Tooltip
   },
   props: {},
   data () {
@@ -81,7 +84,7 @@ export default ({
         }
       }
 
-      & > i {
+      i.icon-times {
         margin-right: 0.25rem;
       }
     }

From 3f2884705255af7969d3a05419a662e459f7cd99 Mon Sep 17 00:00:00 2001
From: silver-it <alex.jin220@gmail.com>
Date: Mon, 20 May 2024 21:53:20 +0800
Subject: [PATCH 09/77] fix: css space issue between user avatar and sender
 name in message base component

---
 frontend/views/containers/chatroom/MessageBase.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/views/containers/chatroom/MessageBase.vue b/frontend/views/containers/chatroom/MessageBase.vue
index d45bb85fc..f65967805 100644
--- a/frontend/views/containers/chatroom/MessageBase.vue
+++ b/frontend/views/containers/chatroom/MessageBase.vue
@@ -378,7 +378,7 @@ export default ({
   }
 
   .c-avatar {
-    margin-right: 0.5rem;
+    max-width: unset;
   }
 
   &:hover {
@@ -415,6 +415,7 @@ export default ({
 .c-message-wrapper {
   display: flex;
   align-items: flex-start;
+  gap: 0.5rem;
 }
 
 .c-avatar {

From 5b05ef42186e9401e43ca7db79e3ffa144add48b Mon Sep 17 00:00:00 2001
From: silver-it <alex.jin220@gmail.com>
Date: Mon, 20 May 2024 22:09:53 +0800
Subject: [PATCH 10/77] chore: reverted change which is not related to the
 current issue

---
 frontend/views/containers/chatroom/MessageBase.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/frontend/views/containers/chatroom/MessageBase.vue b/frontend/views/containers/chatroom/MessageBase.vue
index f65967805..d45bb85fc 100644
--- a/frontend/views/containers/chatroom/MessageBase.vue
+++ b/frontend/views/containers/chatroom/MessageBase.vue
@@ -378,7 +378,7 @@ export default ({
   }
 
   .c-avatar {
-    max-width: unset;
+    margin-right: 0.5rem;
   }
 
   &:hover {
@@ -415,7 +415,6 @@ export default ({
 .c-message-wrapper {
   display: flex;
   align-items: flex-start;
-  gap: 0.5rem;
 }
 
 .c-avatar {

From b5f76affbf26d4dea47fc8cb7e47ca7799f8fda5 Mon Sep 17 00:00:00 2001
From: silver-it <alex.jin220@gmail.com>
Date: Sat, 20 Apr 2024 06:15:15 +0800
Subject: [PATCH 11/77] chore: do not open new tab when user is signed in

---
 frontend/common/translations.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/common/translations.js b/frontend/common/translations.js
index 79cb55964..b7bccc9ac 100644
--- a/frontend/common/translations.js
+++ b/frontend/common/translations.js
@@ -133,13 +133,14 @@ export default function L (
 
 export function LError (error: Error): {|reportError: any|} {
   let url = `/app/dashboard?modal=UserSettingsModal&tab=application-logs&errorMsg=${encodeURI(error.message)}`
+  const target = !sbp('state/vuex/state').loggedIn ? 'target="_blank"' : ''
   if (!sbp('state/vuex/state').loggedIn) {
     url = 'https://github.com/okTurtles/group-income/issues'
   }
   return {
     reportError: L('"{errorMsg}". You can {a_}report the error{_a}.', {
       errorMsg: error.message,
-      'a_': `<a class="link" target="_blank" href="${url}">`,
+      'a_': `<a class="link" ${target} href="${url}">`,
       '_a': '</a>'
     })
   }

From d937f8c71f533ad22ea4d2e4f30b49fa1ded7d0d Mon Sep 17 00:00:00 2001
From: silver-it <alex.jin220@gmail.com>
Date: Wed, 22 May 2024 15:40:51 +0800
Subject: [PATCH 12/77] feat: improved style of pin button

---
 frontend/views/pages/GroupChat.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/frontend/views/pages/GroupChat.vue b/frontend/views/pages/GroupChat.vue
index 075d34e53..d95255f73 100644
--- a/frontend/views/pages/GroupChat.vue
+++ b/frontend/views/pages/GroupChat.vue
@@ -219,8 +219,8 @@ export default ({
   border-radius: 0.625rem;
 
   @include tablet {
-    height: calc(100% - 2rem);
-    margin-top: 0.5rem;
+    height: calc(100% - 1.625rem);
+    margin-top: 0.125rem;
     margin-bottom: 1rem;
   }
 
@@ -352,6 +352,7 @@ export default ({
 
 .c-header-shortcuts {
   padding: 0 0.2rem;
+  margin-top: 0.125rem;
 
   .c-pin-wrapper {
     span {

From 0e5e759dec7057ad6c9cb74940905dcd9bfe607f Mon Sep 17 00:00:00 2001
From: silver-it <alex.jin220@gmail.com>
Date: Wed, 22 May 2024 17:07:43 +0800
Subject: [PATCH 13/77] feat: improve css for pinned messages

---
 frontend/views/containers/chatroom/PinnedMessages.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/views/containers/chatroom/PinnedMessages.vue b/frontend/views/containers/chatroom/PinnedMessages.vue
index b3bac996e..f87b76c5f 100644
--- a/frontend/views/containers/chatroom/PinnedMessages.vue
+++ b/frontend/views/containers/chatroom/PinnedMessages.vue
@@ -53,7 +53,7 @@ export default ({
 
 .c-pinned-messages-wrapper {
   margin: -0.5rem;
-  padding: 1rem;
+  padding: 0.75rem;
   max-height: 40rem;
   max-width: 25rem;
   display: flex;
@@ -62,7 +62,7 @@ export default ({
   overflow: auto;
 
   .c-pinned-message {
-    padding: 0.5rem;
+    padding: 0.75rem 0.75rem 0.5rem 0.75rem;
     color: $text_0;
     border-radius: 0.3rem;
     background-color: $general_2;

From 2563ae16e2d56c5a1e09bfa0c713bd13af946011 Mon Sep 17 00:00:00 2001
From: silver-it <alex.jin220@gmail.com>
Date: Thu, 23 May 2024 09:15:01 +0800
Subject: [PATCH 14/77] feat: contract implemented for pinning message

---
 frontend/controller/actions/chatroom.js       |  2 +
 frontend/model/contracts/chatroom.js          | 41 +++++++++++++++++--
 frontend/model/contracts/shared/types.js      | 13 ++++--
 .../views/containers/chatroom/ChatMain.vue    |  1 -
 .../containers/chatroom/PinnedMessages.vue    |  8 +---
 5 files changed, 51 insertions(+), 14 deletions(-)

diff --git a/frontend/controller/actions/chatroom.js b/frontend/controller/actions/chatroom.js
index 7daa2d92e..4a62e7dc5 100644
--- a/frontend/controller/actions/chatroom.js
+++ b/frontend/controller/actions/chatroom.js
@@ -206,6 +206,8 @@ export default (sbp('sbp/selectors/register', {
   ...encryptedAction('gi.actions/chatroom/deleteMessage', L('Failed to delete message.')),
   ...encryptedAction('gi.actions/chatroom/deleteAttachment', L('Failed to delete attachment of message.')),
   ...encryptedAction('gi.actions/chatroom/makeEmotion', L('Failed to make emotion.')),
+  ...encryptedAction('gi.actions/chatroom/pinMessage', L('Failed to pin message.')),
+  ...encryptedAction('gi.actions/chatroom/unpinMessage', L('Failed to unpin message.')),
   ...encryptedAction('gi.actions/chatroom/join', L('Failed to join chat channel.'), async (sendMessage, params, signingKeyId) => {
     const rootState = sbp('state/vuex/state')
     const userID = params.data.memberID || rootState.loggedIn.identityContractID
diff --git a/frontend/model/contracts/chatroom.js b/frontend/model/contracts/chatroom.js
index d34c6f882..342938a7e 100644
--- a/frontend/model/contracts/chatroom.js
+++ b/frontend/model/contracts/chatroom.js
@@ -4,7 +4,7 @@
 
 import { L, Vue } from '@common/common.js'
 import sbp from '@sbp/sbp'
-import { objectOf, optional, string, arrayOf, actionRequireInnerSignature } from '~/frontend/model/contracts/misc/flowTyper.js'
+import { objectOf, optional, object, string, arrayOf, actionRequireInnerSignature } from '~/frontend/model/contracts/misc/flowTyper.js'
 import { ChelErrorGenerator } from '~/shared/domains/chelonia/errors.js'
 import { findForeignKeysByContractID, findKeyIdByName } from '~/shared/domains/chelonia/utils.js'
 import {
@@ -164,8 +164,11 @@ sbp('chelonia/defineContract', {
     chatRoomMembers (state, getters) {
       return getters.currentChatRoomState.members || {}
     },
-    chatRoomLatestMessages (state, getters) {
+    chatRoomRecentMessages (state, getters) {
       return getters.currentChatRoomState.messages || []
+    },
+    chatRoomPinnedMessages (state, getters) {
+      return getters.currentChatRoomState.pinnedMessages || []
     }
   },
   actions: {
@@ -185,7 +188,8 @@ sbp('chelonia/defineContract', {
             deletedDate: null
           },
           members: {},
-          messages: []
+          messages: [],
+          pinnedMessages: []
         }, data)
         for (const key in initialState) {
           Vue.set(state, key, initialState[key])
@@ -754,6 +758,37 @@ sbp('chelonia/defineContract', {
           Vue.set(state.messages[msgIndex].pollData, 'status', POLL_STATUS.CLOSED)
         }
       }
+    },
+    'gi.contracts/chatroom/pinMessage': {
+      validate: actionRequireInnerSignature(objectOf({
+        message: object
+      })),
+      process ({ data, innerSigningContractID }, { state }) {
+        const { message } = data
+        state.pinnedMessages.unshift(message)
+
+        const msgIndex = findMessageIdx(message.hash, state.messages)
+        if (msgIndex >= 0) {
+          Vue.set(state.messages[msgIndex], 'pinnedBy', innerSigningContractID)
+        }
+      }
+    },
+    'gi.contracts/chatroom/unpinMessage': {
+      validate: actionRequireInnerSignature(objectOf({
+        hash: string
+      })),
+      process ({ data }, { state }) {
+        const { hash } = data
+        const pinnedMsgIndex = state.pinnedMessages.findIndex(msg => msg.hash === hash)
+        if (pinnedMsgIndex >= 0) {
+          state.pinnedMessages.splice(pinnedMsgIndex, 1)
+        }
+
+        const msgIndex = findMessageIdx(hash, state.messages)
+        if (msgIndex >= 0) {
+          Vue.delete(state.messages[msgIndex], 'pinnedBy')
+        }
+      }
     }
   },
   methods: {
diff --git a/frontend/model/contracts/shared/types.js b/frontend/model/contracts/shared/types.js
index 35f4d6423..b2e27fbc0 100644
--- a/frontend/model/contracts/shared/types.js
+++ b/frontend/model/contracts/shared/types.js
@@ -1,12 +1,12 @@
 'use strict'
 
 import {
-  objectOf, objectMaybeOf, arrayOf, unionOf,
+  objectOf, objectMaybeOf, arrayOf, unionOf, boolean,
   object, string, optional, number, mapOf, literalOf
 } from '~/frontend/model/contracts/misc/flowTyper.js'
 import {
   CHATROOM_TYPES, CHATROOM_PRIVACY_LEVEL,
-  MESSAGE_TYPES, MESSAGE_NOTIFICATIONS, PROPOSAL_VARIANTS
+  MESSAGE_TYPES, MESSAGE_NOTIFICATIONS, PROPOSAL_VARIANTS, POLL_TYPES
 } from './constants.js'
 
 // group.js related
@@ -60,7 +60,12 @@ export const messageType: any = objectMaybeOf({
     hash: string, // scroll to the original message and highlight
     text: string // display text(if too long, truncate)
   }),
-  emoticons: mapOf(string, arrayOf(string)), // mapping of emoticons and usernames
+  pollData: objectOf({
+    question: string,
+    options: arrayOf(objectOf({ id: string, value: string })),
+    expires_date_ms: number,
+    hideVoters: boolean,
+    pollType: unionOf(...Object.values(POLL_TYPES).map(v => literalOf(v)))
+  }),
   onlyVisibleTo: arrayOf(string) // list of usernames, only necessary when type is NOTIFICATION
-  // TODO: need to consider POLL and add more down here
 })
diff --git a/frontend/views/containers/chatroom/ChatMain.vue b/frontend/views/containers/chatroom/ChatMain.vue
index d4902bb25..5ed6f9970 100644
--- a/frontend/views/containers/chatroom/ChatMain.vue
+++ b/frontend/views/containers/chatroom/ChatMain.vue
@@ -306,7 +306,6 @@ export default ({
       'chatRoomSettings',
       'chatRoomAttributes',
       'chatRoomMembers',
-      'chatRoomLatestMessages',
       'ourIdentityContractId',
       'currentIdentityState',
       'isJoinedChatRoom',
diff --git a/frontend/views/containers/chatroom/PinnedMessages.vue b/frontend/views/containers/chatroom/PinnedMessages.vue
index f87b76c5f..ed5d63f05 100644
--- a/frontend/views/containers/chatroom/PinnedMessages.vue
+++ b/frontend/views/containers/chatroom/PinnedMessages.vue
@@ -1,6 +1,6 @@
 <template lang='pug'>
 .card.c-pinned-messages-wrapper
-  template(v-for='(msg, index) in fakeMessages')
+  template(v-for='(msg, index) in chatRoomPinnedMessages')
     .c-pinned-message(:key='msg.hash')
       .c-pinned-message-header
         .c-sender-profile
@@ -21,7 +21,6 @@
 import { mapGetters } from 'vuex'
 import AvatarUser from '@components/AvatarUser.vue'
 import Tooltip from '@components/Tooltip.vue'
-import { MESSAGE_TYPES } from '@model/contracts/shared/constants.js'
 import { humanDate } from '@model/contracts/shared/time.js'
 import { renderMarkdown } from '@view-utils/markdown-utils.js'
 
@@ -36,10 +35,7 @@ export default ({
     return {}
   },
   computed: {
-    ...mapGetters(['ourIdentityContractId', 'chatRoomLatestMessages', 'userDisplayNameFromID']),
-    fakeMessages () {
-      return this.chatRoomLatestMessages.filter(msg => msg.type === MESSAGE_TYPES.TEXT)
-    }
+    ...mapGetters(['chatRoomPinnedMessages', 'userDisplayNameFromID'])
   },
   methods: {
     humanDate,

From 4933e73cd7499730eada8899d8f96f364117aaec Mon Sep 17 00:00:00 2001
From: silver-it <alex.jin220@gmail.com>
Date: Thu, 23 May 2024 09:24:59 +0800
Subject: [PATCH 15/77] chore: improved getters name to keep consistency

---
 frontend/model/chatroom/vuexModule.js                  |  2 +-
 frontend/model/contracts/group.js                      |  6 +++---
 .../views/containers/chatroom/ChatMembersAllModal.vue  | 10 +++++-----
 frontend/views/containers/chatroom/ChatMixin.js        | 10 +++++-----
 .../containers/chatroom/CreateNewChannelModal.vue      |  5 ++---
 .../views/containers/chatroom/DeleteChannelModal.vue   |  4 ++--
 .../views/containers/chatroom/EditChannelNameModal.vue |  9 ++++-----
 frontend/views/pages/GroupChat.vue                     |  9 +++++----
 8 files changed, 27 insertions(+), 28 deletions(-)

diff --git a/frontend/model/chatroom/vuexModule.js b/frontend/model/chatroom/vuexModule.js
index bba308e36..204053d4b 100644
--- a/frontend/model/chatroom/vuexModule.js
+++ b/frontend/model/chatroom/vuexModule.js
@@ -136,7 +136,7 @@ const getters = {
         Object.keys(rootState[cId].chatRooms).includes(chatRoomID))
   },
   chatRoomsInDetail (state, getters, rootState) {
-    const chatRoomsInDetail = merge({}, getters.getGroupChatRooms)
+    const chatRoomsInDetail = merge({}, getters.groupChatRooms)
     for (const contractID in chatRoomsInDetail) {
       const chatRoom = rootState[contractID]
       if (chatRoom && chatRoom.attributes &&
diff --git a/frontend/model/contracts/group.js b/frontend/model/contracts/group.js
index 4751638b6..f4ac05065 100644
--- a/frontend/model/contracts/group.js
+++ b/frontend/model/contracts/group.js
@@ -611,10 +611,10 @@ sbp('chelonia/defineContract', {
       //       bound to the UI in some location.
       return getters.groupCurrency?.displayWithCurrency
     },
-    getGroupChatRooms (state, getters) {
+    groupChatRooms (state, getters) {
       return getters.currentGroupState.chatRooms
     },
-    generalChatRoomId (state, getters) {
+    groupGeneralChatRoomId (state, getters) {
       return getters.currentGroupState.generalChatRoomId
     },
     // getter is named haveNeedsForThisPeriod instead of haveNeedsForPeriod because it uses
@@ -1402,7 +1402,7 @@ sbp('chelonia/defineContract', {
       validate: actionRequireActiveMember((data, { getters, meta, message: { innerSigningContractID } }) => {
         objectOf({ chatRoomID: string })(data)
 
-        if (getters.getGroupChatRooms[data.chatRoomID].creatorID !== innerSigningContractID) {
+        if (getters.groupChatRooms[data.chatRoomID].creatorID !== innerSigningContractID) {
           throw new TypeError(L('Only the channel creator can delete channel.'))
         }
       }),
diff --git a/frontend/views/containers/chatroom/ChatMembersAllModal.vue b/frontend/views/containers/chatroom/ChatMembersAllModal.vue
index dd0354b10..2881d0aeb 100644
--- a/frontend/views/containers/chatroom/ChatMembersAllModal.vue
+++ b/frontend/views/containers/chatroom/ChatMembersAllModal.vue
@@ -151,9 +151,9 @@ export default ({
   computed: {
     ...mapGetters([
       'currentChatRoomState',
-      'currentGroupState',
+      'groupGeneralChatRoomId',
       'groupMembersSorted',
-      'getGroupChatRooms',
+      'groupChatRooms',
       'chatRoomMembers',
       'chatRoomMembersInSort',
       'globalProfile',
@@ -204,13 +204,13 @@ export default ({
       // NOTE: Do not consider to get attributes of private chatroom which the user is not part of
       //       because it couldn't be happened
       // TODO: remove 'users', 'deletedDate' to keep consistency when this.isJoined === false
-      return this.isJoined ? this.currentChatRoomState.attributes : this.getGroupChatRooms[this.currentChatRoomId]
+      return this.isJoined ? this.currentChatRoomState.attributes : this.groupChatRooms[this.currentChatRoomId]
     },
     chatRoomMembersInOrder () {
       return this.isJoined
         ? this.chatRoomMembersInSort
         : this.groupMembersSorted
-          .filter(member => this.getGroupChatRooms[this.currentChatRoomId].members[member.username]?.status === PROFILE_STATUS.ACTIVE)
+          .filter(member => this.groupChatRooms[this.currentChatRoomId].members[member.username]?.status === PROFILE_STATUS.ACTIVE)
           .map(member => ({ contractID: member.contractID, username: member.username, displayName: member.displayName }))
     }
   },
@@ -267,7 +267,7 @@ export default ({
         return false
       }
       const { creatorID } = this.chatRoomAttribute
-      if (this.currentGroupState.generalChatRoomId === this.currentChatRoomId) {
+      if (this.groupGeneralChatRoomId === this.currentChatRoomId) {
         return false
       } else if (this.ourIdentityContractId === creatorID) {
         return true
diff --git a/frontend/views/containers/chatroom/ChatMixin.js b/frontend/views/containers/chatroom/ChatMixin.js
index 15d23cbf5..5829a8bf3 100644
--- a/frontend/views/containers/chatroom/ChatMixin.js
+++ b/frontend/views/containers/chatroom/ChatMixin.js
@@ -39,8 +39,8 @@ const ChatMixin: Object = {
       'groupIdFromChatRoomId',
       'ourGroupDirectMessages',
       'chatRoomMembers',
-      'generalChatRoomId',
-      'getGroupChatRooms',
+      'groupGeneralChatRoomId',
+      'groupChatRooms',
       'globalProfile',
       'isJoinedChatRoom',
       'ourContactProfilesById',
@@ -65,7 +65,7 @@ const ChatMixin: Object = {
         picture,
         attributes: Object.assign({}, this.currentChatRoomState.attributes),
         isPrivate: this.currentChatRoomState.attributes.privacyLevel === CHATROOM_PRIVACY_LEVEL.PRIVATE,
-        isGeneral: this.generalChatRoomId === this.currentChatRoomId,
+        isGeneral: this.groupGeneralChatRoomId === this.currentChatRoomId,
         isJoined: true,
         members: Object.fromEntries(Object.keys(this.currentChatRoomState.members).map(memberID => {
           const { displayName, picture, email } = this.globalProfile(memberID) || {}
@@ -81,7 +81,7 @@ const ChatMixin: Object = {
       const name = 'GroupChatConversation'
       // Temporarily blocked the chatrooms which the user is not part of
       // Need to open it later and display messages just like Slack
-      chatRoomID = chatRoomID || (this.isJoinedChatRoom(this.currentChatRoomId) ? this.currentChatRoomId : this.generalChatRoomId)
+      chatRoomID = chatRoomID || (this.isJoinedChatRoom(this.currentChatRoomId) ? this.currentChatRoomId : this.groupGeneralChatRoomId)
 
       this.$router.push({
         name,
@@ -93,7 +93,7 @@ const ChatMixin: Object = {
       document.title = title || this.summary.title
     },
     loadLatestState (chatRoomID: string): void {
-      const summarizedAttr = this.getGroupChatRooms[chatRoomID]
+      const summarizedAttr = this.groupChatRooms[chatRoomID]
       if (summarizedAttr) {
         const { creator, name, description, type, privacyLevel, members } = summarizedAttr
         const activeMembers = Object
diff --git a/frontend/views/containers/chatroom/CreateNewChannelModal.vue b/frontend/views/containers/chatroom/CreateNewChannelModal.vue
index 17d7a9760..63bb674de 100644
--- a/frontend/views/containers/chatroom/CreateNewChannelModal.vue
+++ b/frontend/views/containers/chatroom/CreateNewChannelModal.vue
@@ -128,7 +128,7 @@ export default ({
   },
   computed: {
     ...mapState(['currentGroupId']),
-    ...mapGetters(['groupSettings', 'getGroupChatRooms']),
+    ...mapGetters(['groupSettings', 'groupChatRooms']),
     maxNameCharacters () {
       return CHATROOM_NAME_LIMITS_IN_CHARS
     },
@@ -169,8 +169,7 @@ export default ({
   created () {
     // HACK: using rootGetters inside validator makes `Duplicate channel name` error
     // as soon as a new channel is created
-    this.form.existingNames = Object.keys(this.getGroupChatRooms)
-      .map(cId => this.getGroupChatRooms[cId].name)
+    this.form.existingNames = Object.keys(this.groupChatRooms).map(cId => this.groupChatRooms[cId].name)
   },
   mounted () {
     this.$refs.name.focus()
diff --git a/frontend/views/containers/chatroom/DeleteChannelModal.vue b/frontend/views/containers/chatroom/DeleteChannelModal.vue
index 395fd2acb..3c731b5ce 100644
--- a/frontend/views/containers/chatroom/DeleteChannelModal.vue
+++ b/frontend/views/containers/chatroom/DeleteChannelModal.vue
@@ -63,7 +63,7 @@ export default ({
     }
   },
   computed: {
-    ...mapGetters(['currentChatRoomId', 'chatRoomAttributes', 'generalChatRoomId']),
+    ...mapGetters(['currentChatRoomId', 'chatRoomAttributes', 'groupGeneralChatRoomId']),
     ...mapState(['currentGroupId'])
   },
   methods: {
@@ -80,7 +80,7 @@ export default ({
           data: { chatRoomID },
           hooks: {
             postpublish: (message) => {
-              const contractID = this.generalChatRoomId
+              const contractID = this.groupGeneralChatRoomId
               // TODO: This should be moved to a side-effect
               sbp('gi.actions/chatroom/addMessage', {
                 contractID,
diff --git a/frontend/views/containers/chatroom/EditChannelNameModal.vue b/frontend/views/containers/chatroom/EditChannelNameModal.vue
index 9206775e9..b76eea18c 100644
--- a/frontend/views/containers/chatroom/EditChannelNameModal.vue
+++ b/frontend/views/containers/chatroom/EditChannelNameModal.vue
@@ -55,7 +55,7 @@ export default ({
   },
   computed: {
     ...mapState(['currentGroupId']),
-    ...mapGetters(['currentChatRoomId', 'currentChatRoomState', 'generalChatRoomId', 'getGroupChatRooms']),
+    ...mapGetters(['currentChatRoomId', 'currentChatRoomState', 'groupGeneralChatRoomId', 'groupChatRooms']),
     maxNameCharacters () {
       return this.currentChatRoomState.settings.maxNameLength
     }
@@ -72,11 +72,10 @@ export default ({
   },
   created () {
     this.form.name = this.currentChatRoomState.attributes.name
-    this.form.existingNames = Object.keys(this.getGroupChatRooms)
-      .map(cId => this.getGroupChatRooms[cId].name)
+    this.form.existingNames = Object.keys(this.groupChatRooms).map(cId => this.groupChatRooms[cId].name)
   },
   mounted () {
-    if (this.generalChatRoomId === this.currentChatRoomId) {
+    if (this.groupGeneralChatRoomId === this.currentChatRoomId) {
       this.close()
     }
     this.$refs.name.focus()
@@ -92,7 +91,7 @@ export default ({
         if (this.currentChatRoomState.attributes.name === this.form.name) {
           // TODO: No need to update chatroom name. Display message box or toast or sth else
           console.log('TODO: Channel name is not changed')
-        } else if (this.currentChatRoomId === this.generalChatRoomId) {
+        } else if (this.currentChatRoomId === this.groupGeneralChatRoomId) {
           // TODO: display warning message '"General" chatroom can not be renamed'
           console.log('TODO: "General" chatroom can not be renamed')
         } else {
diff --git a/frontend/views/pages/GroupChat.vue b/frontend/views/pages/GroupChat.vue
index d95255f73..09fb1f1b4 100644
--- a/frontend/views/pages/GroupChat.vue
+++ b/frontend/views/pages/GroupChat.vue
@@ -151,13 +151,14 @@ export default ({
       'globalProfile',
       'groupProfiles',
       'isJoinedChatRoom',
-      'getGroupChatRooms',
+      'groupChatRooms',
+      'chatRoomPinnedMessages',
       'ourIdentityContractId'
     ]),
     getChatRoomIDsInSort () {
-      return Object.keys(this.getGroupChatRooms || {}).map(cID => ({
-        name: this.getGroupChatRooms[cID].name,
-        privacyLevel: this.getGroupChatRooms[cID].privacyLevel,
+      return Object.keys(this.groupChatRooms || {}).map(cID => ({
+        name: this.groupChatRooms[cID].name,
+        privacyLevel: this.groupChatRooms[cID].privacyLevel,
         joined: this.isJoinedChatRoom(cID),
         id: cID
       })).filter(attr => attr.privacyLevel !== CHATROOM_PRIVACY_LEVEL.PRIVATE || attr.joined).sort((former, latter) => {

From a024084f0024010fa5186981ce6df6d51b41cdf4 Mon Sep 17 00:00:00 2001
From: silver-it <alex.jin220@gmail.com>
Date: Thu, 23 May 2024 11:49:48 +0800
Subject: [PATCH 16/77] feat: linked pinned messages to the component

---
 frontend/views/containers/chatroom/ChatMixin.js       |  3 +++
 frontend/views/containers/chatroom/PinnedMessages.vue | 11 ++++++++---
 frontend/views/pages/GroupChat.vue                    | 11 ++++++++---
 3 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/frontend/views/containers/chatroom/ChatMixin.js b/frontend/views/containers/chatroom/ChatMixin.js
index 5829a8bf3..5bd793b77 100644
--- a/frontend/views/containers/chatroom/ChatMixin.js
+++ b/frontend/views/containers/chatroom/ChatMixin.js
@@ -39,6 +39,7 @@ const ChatMixin: Object = {
       'groupIdFromChatRoomId',
       'ourGroupDirectMessages',
       'chatRoomMembers',
+      'chatRoomPinnedMessages',
       'groupGeneralChatRoomId',
       'groupChatRooms',
       'globalProfile',
@@ -71,6 +72,7 @@ const ChatMixin: Object = {
           const { displayName, picture, email } = this.globalProfile(memberID) || {}
           return [memberID, { ...this.currentChatRoomState.members[memberID], displayName, picture, email }]
         })),
+        pinnedMessages: this.chatRoomPinnedMessages,
         numberOfMembers: Object.keys(this.currentChatRoomState.members).length,
         participants: this.ourContactProfilesById // TODO: return only historical contributors
       }
@@ -110,6 +112,7 @@ const ChatMixin: Object = {
           title: name,
           attributes: { creator, name, description, type, privacyLevel },
           members: activeMembers,
+          pinnedMessages: [],
           numberOfMembers: activeMembers.length,
           participants: this.ourContactProfilesById // TODO: return only historical contributors
         }
diff --git a/frontend/views/containers/chatroom/PinnedMessages.vue b/frontend/views/containers/chatroom/PinnedMessages.vue
index ed5d63f05..be7f963bb 100644
--- a/frontend/views/containers/chatroom/PinnedMessages.vue
+++ b/frontend/views/containers/chatroom/PinnedMessages.vue
@@ -1,6 +1,6 @@
 <template lang='pug'>
 .card.c-pinned-messages-wrapper
-  template(v-for='(msg, index) in chatRoomPinnedMessages')
+  template(v-for='(msg, index) in messages')
     .c-pinned-message(:key='msg.hash')
       .c-pinned-message-header
         .c-sender-profile
@@ -30,12 +30,17 @@ export default ({
     AvatarUser,
     Tooltip
   },
-  props: {},
+  props: {
+    messages: {
+      type: Array,
+      default: () => []
+    }
+  },
   data () {
     return {}
   },
   computed: {
-    ...mapGetters(['chatRoomPinnedMessages', 'userDisplayNameFromID'])
+    ...mapGetters(['userDisplayNameFromID'])
   },
   methods: {
     humanDate,
diff --git a/frontend/views/pages/GroupChat.vue b/frontend/views/pages/GroupChat.vue
index 09fb1f1b4..d596b1fc1 100644
--- a/frontend/views/pages/GroupChat.vue
+++ b/frontend/views/pages/GroupChat.vue
@@ -82,12 +82,17 @@ page(pageTestName='groupChat' :miniHeader='isDirectMessage()')
           @click='editDescription'
         ) Add description
     .c-header-shortcuts
-      tooltip(:manual='true' :opacity='1' direction='bottom-left')
+      tooltip(
+        v-if='summary.pinnedMessages.length'
+        :manual='true'
+        :opacity='1'
+        direction='bottom-left'
+      )
         span.c-pin-wrapper
           i.icon-thumbtack
-          span 2 Pinned
+          i18n(:args='{ messagesCount: summary.pinnedMessages.length }') {messagesCount} Pinned
         template(slot='tooltip')
-          pinned-messages
+          pinned-messages(:messages='summary.pinnedMessages')
 
   template(#sidebar='{ toggle }')
     chat-nav

From 982b90139d5c0b40e8bd000e1124e6a74640d619 Mon Sep 17 00:00:00 2001
From: silver-it <alex.jin220@gmail.com>
Date: Sat, 20 Apr 2024 06:15:15 +0800
Subject: [PATCH 17/77] chore: do not open new tab when user is signed in

---
 frontend/common/translations.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/common/translations.js b/frontend/common/translations.js
index 79cb55964..b7bccc9ac 100644
--- a/frontend/common/translations.js
+++ b/frontend/common/translations.js
@@ -133,13 +133,14 @@ export default function L (
 
 export function LError (error: Error): {|reportError: any|} {
   let url = `/app/dashboard?modal=UserSettingsModal&tab=application-logs&errorMsg=${encodeURI(error.message)}`
+  const target = !sbp('state/vuex/state').loggedIn ? 'target="_blank"' : ''
   if (!sbp('state/vuex/state').loggedIn) {
     url = 'https://github.com/okTurtles/group-income/issues'
   }
   return {
     reportError: L('"{errorMsg}". You can {a_}report the error{_a}.', {
       errorMsg: error.message,
-      'a_': `<a class="link" target="_blank" href="${url}">`,
+      'a_': `<a class="link" ${target} href="${url}">`,
       '_a': '</a>'
     })
   }

From 75df3ac4e446d1acc832f6e75ff6fed957335d27 Mon Sep 17 00:00:00 2001
From: silver-it <alex.jin220@gmail.com>
Date: Thu, 23 May 2024 15:04:16 +0800
Subject: [PATCH 18/77] chore: reverted unrelated changes

---
 frontend/common/translations.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/frontend/common/translations.js b/frontend/common/translations.js
index b7bccc9ac..79cb55964 100644
--- a/frontend/common/translations.js
+++ b/frontend/common/translations.js
@@ -133,14 +133,13 @@ export default function L (
 
 export function LError (error: Error): {|reportError: any|} {
   let url = `/app/dashboard?modal=UserSettingsModal&tab=application-logs&errorMsg=${encodeURI(error.message)}`
-  const target = !sbp('state/vuex/state').loggedIn ? 'target="_blank"' : ''
   if (!sbp('state/vuex/state').loggedIn) {
     url = 'https://github.com/okTurtles/group-income/issues'
   }
   return {
     reportError: L('"{errorMsg}". You can {a_}report the error{_a}.', {
       errorMsg: error.message,
-      'a_': `<a class="link" ${target} href="${url}">`,
+      'a_': `<a class="link" target="_blank" href="${url}">`,
       '_a': '</a>'
     })
   }

From c415903ee46d98cdfd53a9cc0af73b6710a66267 Mon Sep 17 00:00:00 2001
From: silver-it <alex.jin220@gmail.com>
Date: Thu, 23 May 2024 15:15:27 +0800
Subject: [PATCH 19/77] feat: updated style of Button to list pinned messages

---
 frontend/views/pages/GroupChat.vue | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/frontend/views/pages/GroupChat.vue b/frontend/views/pages/GroupChat.vue
index d596b1fc1..583ee316a 100644
--- a/frontend/views/pages/GroupChat.vue
+++ b/frontend/views/pages/GroupChat.vue
@@ -349,6 +349,7 @@ export default ({
 
   @include desktop {
     display: flex;
+    margin-bottom: 0.5rem;
   }
 
   .is-unstyled {
@@ -357,8 +358,13 @@ export default ({
 }
 
 .c-header-shortcuts {
+  display: none;
   padding: 0 0.2rem;
-  margin-top: 0.125rem;
+
+  @include desktop {
+    display: block;
+    margin-top: -0.375rem;
+  }
 
   .c-pin-wrapper {
     span {

From 81f35b5258f3c7d2f3ac7a16becfb9dabdddae41 Mon Sep 17 00:00:00 2001
From: silver-it <alex.jin220@gmail.com>
Date: Thu, 23 May 2024 15:49:06 +0800
Subject: [PATCH 20/77] feat: pin message

---
 frontend/views/containers/chatroom/ChatMain.vue | 11 +++++++++++
 frontend/views/containers/chatroom/ChatMixin.js |  2 --
 frontend/views/containers/chatroom/Message.vue  |  2 ++
 .../containers/chatroom/MessageActions.vue      | 11 ++++++++++-
 .../views/containers/chatroom/MessageBase.vue   |  3 +++
 .../containers/chatroom/PinnedMessages.vue      | 17 ++++++++++++++---
 frontend/views/pages/GroupChat.vue              | 14 +++++++++++---
 7 files changed, 51 insertions(+), 9 deletions(-)

diff --git a/frontend/views/containers/chatroom/ChatMain.vue b/frontend/views/containers/chatroom/ChatMain.vue
index 5ed6f9970..97d83d790 100644
--- a/frontend/views/containers/chatroom/ChatMain.vue
+++ b/frontend/views/containers/chatroom/ChatMain.vue
@@ -82,11 +82,13 @@
           :isSameSender='isSameSender(index)'
           :isMsgSender='isMsgSender(message.from)'
           :isGroupCreator='isGroupCreator'
+          :isAlreadyPinned='!!message.pinnedBy'
           :class='{removed: message.delete}'
           @retry='retryMessage(index)'
           @reply='replyMessage(message)'
           @scroll-to-replying-message='scrollToMessage(message.replyingMessage.hash)'
           @edit-message='(newMessage) => editMessage(message, newMessage)'
+          @pin-to-channel='pinToChannel(message)'
           @delete-message='deleteMessage(message)'
           @delete-attachment='manifestCid => deleteAttachment(message, manifestCid)'
           @add-emoticon='addEmoticon(message, $event)'
@@ -626,6 +628,15 @@ export default ({
         console.error(`Error while editing message(${message.hash}) in chatroom(${contractID})`, e)
       })
     },
+    pinToChannel (message) {
+      const contractID = this.renderingChatRoomId
+      sbp('gi.actions/chatroom/pinMessage', {
+        contractID,
+        data: { message }
+      }).catch((e) => {
+        console.error(`Error while pinning message(${message.hash}) in chatroom(${contractID})`, e)
+      })
+    },
     async deleteMessage (message) {
       const contractID = this.renderingChatRoomId
       const manifestCids = (message.attachments || []).map(attachment => attachment.downloadData.manifestCid)
diff --git a/frontend/views/containers/chatroom/ChatMixin.js b/frontend/views/containers/chatroom/ChatMixin.js
index 5bd793b77..4834ba3ed 100644
--- a/frontend/views/containers/chatroom/ChatMixin.js
+++ b/frontend/views/containers/chatroom/ChatMixin.js
@@ -39,7 +39,6 @@ const ChatMixin: Object = {
       'groupIdFromChatRoomId',
       'ourGroupDirectMessages',
       'chatRoomMembers',
-      'chatRoomPinnedMessages',
       'groupGeneralChatRoomId',
       'groupChatRooms',
       'globalProfile',
@@ -72,7 +71,6 @@ const ChatMixin: Object = {
           const { displayName, picture, email } = this.globalProfile(memberID) || {}
           return [memberID, { ...this.currentChatRoomState.members[memberID], displayName, picture, email }]
         })),
-        pinnedMessages: this.chatRoomPinnedMessages,
         numberOfMembers: Object.keys(this.currentChatRoomState.members).length,
         participants: this.ourContactProfilesById // TODO: return only historical contributors
       }
diff --git a/frontend/views/containers/chatroom/Message.vue b/frontend/views/containers/chatroom/Message.vue
index 564c8467c..b5c1cf50f 100644
--- a/frontend/views/containers/chatroom/Message.vue
+++ b/frontend/views/containers/chatroom/Message.vue
@@ -6,6 +6,7 @@ message-base(
   @retry='$emit("retry")'
   @reply-message-clicked='$emit("scroll-to-replying-message")'
   @message-edited='editMessage'
+  @pin-to-channel='$emit("pin-to-channel")'
   @delete-attachment='deleteAttachment'
   @delete-message='$emit("delete-message")'
   :shouldRenderMarkdown='true'
@@ -51,6 +52,7 @@ export default ({
     },
     isSameSender: Boolean,
     isGroupCreator: Boolean,
+    isAlreadyPinned: Boolean,
     isMsgSender: Boolean,
     replyingMessage: String
   },
diff --git a/frontend/views/containers/chatroom/MessageActions.vue b/frontend/views/containers/chatroom/MessageActions.vue
index aea4fd9b9..950f580c8 100644
--- a/frontend/views/containers/chatroom/MessageActions.vue
+++ b/frontend/views/containers/chatroom/MessageActions.vue
@@ -89,6 +89,14 @@ menu-parent(ref='menu')
         i.icon-link
         i18n Copy message Link
 
+      menu-item.is-icon-small(
+        v-if='!isAlreadyPinned'
+        tag='button'
+        @click='action("pinToChannel")'
+      )
+        i.icon-thumbtack
+        i18n Pin to channel
+
       menu-item.is-icon-small.is-danger(
         tag='button'
         data-test='deleteMessage'
@@ -122,7 +130,8 @@ export default ({
     },
     type: String,
     isMsgSender: Boolean,
-    isGroupCreator: Boolean
+    isGroupCreator: Boolean,
+    isAlreadyPinned: Boolean
   },
   computed: {
     isText () {
diff --git a/frontend/views/containers/chatroom/MessageBase.vue b/frontend/views/containers/chatroom/MessageBase.vue
index 01b44db45..c38481975 100644
--- a/frontend/views/containers/chatroom/MessageBase.vue
+++ b/frontend/views/containers/chatroom/MessageBase.vue
@@ -102,6 +102,7 @@
     :type='type'
     :isMsgSender='isMsgSender'
     :isGroupCreator='isGroupCreator'
+    :isAlreadyPinned='isAlreadyPinned'
     ref='messageAction'
     @openEmoticon='openEmoticon($event)'
     @editMessage='editMessage'
@@ -109,6 +110,7 @@
     @reply='reply'
     @retry='$emit("retry")'
     @copyMessageLink='copyMessageLink'
+    @pinToChannel='$emit("pin-to-channel")'
   )
 </template>
 
@@ -184,6 +186,7 @@ export default ({
     },
     isSameSender: Boolean,
     isGroupCreator: Boolean,
+    isAlreadyPinned: Boolean,
     isMsgSender: Boolean,
     shouldRenderMarkdown: Boolean
   },
diff --git a/frontend/views/containers/chatroom/PinnedMessages.vue b/frontend/views/containers/chatroom/PinnedMessages.vue
index be7f963bb..25730a816 100644
--- a/frontend/views/containers/chatroom/PinnedMessages.vue
+++ b/frontend/views/containers/chatroom/PinnedMessages.vue
@@ -1,13 +1,18 @@
 <template lang='pug'>
 .card.c-pinned-messages-wrapper
   template(v-for='(msg, index) in messages')
-    .c-pinned-message(:key='msg.hash')
+    .c-pinned-message(
+      :key='msg.hash'
+      @click='scrollToPinnedMessage(msg)'
+    )
       .c-pinned-message-header
         .c-sender-profile
           avatar-user(:contractID='msg.from' size='xs')
           .c-message-sender-name.has-text-bold.has-ellipsis {{ userDisplayNameFromID(msg.from) }}
         tooltip(:text='L("Unpin this message")')
-          i.icon-times
+          i.icon-times(
+            @click.stop='unpinMessage(msg.hash)'
+          )
       .c-pinned-message-content
         span.custom-markdown-content(
           v-safe-html:a='renderMarkdown(msg.text)'
@@ -44,7 +49,13 @@ export default ({
   },
   methods: {
     humanDate,
-    renderMarkdown
+    renderMarkdown,
+    unpinMessage (messageHash) {
+      console.log('TODO: Unpin Message -', messageHash)
+    },
+    scrollToPinnedMessage (message) {
+      console.log('TODO: Scroll To Pinned Message -', message)
+    }
   }
 }: Object)
 </script>
diff --git a/frontend/views/pages/GroupChat.vue b/frontend/views/pages/GroupChat.vue
index 583ee316a..e9daa4aba 100644
--- a/frontend/views/pages/GroupChat.vue
+++ b/frontend/views/pages/GroupChat.vue
@@ -83,16 +83,16 @@ page(pageTestName='groupChat' :miniHeader='isDirectMessage()')
         ) Add description
     .c-header-shortcuts
       tooltip(
-        v-if='summary.pinnedMessages.length'
+        v-if='pinnedMessages.length'
         :manual='true'
         :opacity='1'
         direction='bottom-left'
       )
         span.c-pin-wrapper
           i.icon-thumbtack
-          i18n(:args='{ messagesCount: summary.pinnedMessages.length }') {messagesCount} Pinned
+          i18n(:args='{ messagesCount: pinnedMessages.length }') {messagesCount} Pinned
         template(slot='tooltip')
-          pinned-messages(:messages='summary.pinnedMessages')
+          pinned-messages(:messages='pinnedMessages')
 
   template(#sidebar='{ toggle }')
     chat-nav
@@ -152,6 +152,7 @@ export default ({
   },
   computed: {
     ...mapGetters([
+      'currentChatRoomId',
       'chatRoomsInDetail',
       'globalProfile',
       'groupProfiles',
@@ -185,6 +186,13 @@ export default ({
         order: this.getChatRoomIDsInSort,
         channels: this.chatRoomsInDetail
       }
+    },
+    pinnedMessages () {
+      const { chatRoomID } = this.summary
+      if (this.isJoinedChatRoom(chatRoomID) && chatRoomID === this.currentChatRoomId) {
+        return this.chatRoomPinnedMessages
+      }
+      return []
     }
   },
   methods: {

From 0f873218f79f42ec97099ea0fa98923669e54b7f Mon Sep 17 00:00:00 2001
From: silver-it <alex.jin220@gmail.com>
Date: Thu, 23 May 2024 17:26:33 +0800
Subject: [PATCH 21/77] feat: unpin message & sort pinned messages

---
 frontend/model/contracts/chatroom.js                 |  4 ++--
 frontend/views/containers/chatroom/ChatMain.vue      |  9 +++++++++
 .../views/containers/chatroom/PinnedMessages.vue     |  2 +-
 frontend/views/pages/GroupChat.vue                   | 12 ++++++++++--
 4 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/frontend/model/contracts/chatroom.js b/frontend/model/contracts/chatroom.js
index 342938a7e..13447ce7b 100644
--- a/frontend/model/contracts/chatroom.js
+++ b/frontend/model/contracts/chatroom.js
@@ -168,7 +168,7 @@ sbp('chelonia/defineContract', {
       return getters.currentChatRoomState.messages || []
     },
     chatRoomPinnedMessages (state, getters) {
-      return getters.currentChatRoomState.pinnedMessages || []
+      return (getters.currentChatRoomState.pinnedMessages || []).sort((a, b) => a.height < b.height ? 1 : -1)
     }
   },
   actions: {
@@ -779,7 +779,7 @@ sbp('chelonia/defineContract', {
       })),
       process ({ data }, { state }) {
         const { hash } = data
-        const pinnedMsgIndex = state.pinnedMessages.findIndex(msg => msg.hash === hash)
+        const pinnedMsgIndex = findMessageIdx(hash, state.pinnedMessages)
         if (pinnedMsgIndex >= 0) {
           state.pinnedMessages.splice(pinnedMsgIndex, 1)
         }
diff --git a/frontend/views/containers/chatroom/ChatMain.vue b/frontend/views/containers/chatroom/ChatMain.vue
index 97d83d790..59a2f6fbc 100644
--- a/frontend/views/containers/chatroom/ChatMain.vue
+++ b/frontend/views/containers/chatroom/ChatMain.vue
@@ -637,6 +637,15 @@ export default ({
         console.error(`Error while pinning message(${message.hash}) in chatroom(${contractID})`, e)
       })
     },
+    unpinFromChannel (hash) {
+      const contractID = this.renderingChatRoomId
+      sbp('gi.actions/chatroom/unpinMessage', {
+        contractID,
+        data: { hash }
+      }).catch((e) => {
+        console.error(`Error while un-pinning message(${hash}) in chatroom(${contractID})`, e)
+      })
+    },
     async deleteMessage (message) {
       const contractID = this.renderingChatRoomId
       const manifestCids = (message.attachments || []).map(attachment => attachment.downloadData.manifestCid)
diff --git a/frontend/views/containers/chatroom/PinnedMessages.vue b/frontend/views/containers/chatroom/PinnedMessages.vue
index 25730a816..8a2294be6 100644
--- a/frontend/views/containers/chatroom/PinnedMessages.vue
+++ b/frontend/views/containers/chatroom/PinnedMessages.vue
@@ -51,7 +51,7 @@ export default ({
     humanDate,
     renderMarkdown,
     unpinMessage (messageHash) {
-      console.log('TODO: Unpin Message -', messageHash)
+      this.$emit('unpin-message', messageHash)
     },
     scrollToPinnedMessage (message) {
       console.log('TODO: Scroll To Pinned Message -', message)
diff --git a/frontend/views/pages/GroupChat.vue b/frontend/views/pages/GroupChat.vue
index e9daa4aba..f1fca49c7 100644
--- a/frontend/views/pages/GroupChat.vue
+++ b/frontend/views/pages/GroupChat.vue
@@ -92,7 +92,10 @@ page(pageTestName='groupChat' :miniHeader='isDirectMessage()')
           i.icon-thumbtack
           i18n(:args='{ messagesCount: pinnedMessages.length }') {messagesCount} Pinned
         template(slot='tooltip')
-          pinned-messages(:messages='pinnedMessages')
+          pinned-messages(
+            :messages='pinnedMessages'
+            @unpin-message='unpinMessage'
+          )
 
   template(#sidebar='{ toggle }')
     chat-nav
@@ -111,7 +114,7 @@ page(pageTestName='groupChat' :miniHeader='isDirectMessage()')
       )
 
   .card.c-card
-    chat-main(:summary='summary')
+    chat-main(ref='chatMain' :summary='summary')
 </template>
 
 <script>
@@ -201,6 +204,11 @@ export default ({
     },
     editDescription () {
       this.openModal('EditChannelDescriptionModal')
+    },
+    unpinMessage (messageHash) {
+      if (this.$refs.chatMain) {
+        this.$refs.chatMain.unpinFromChannel(messageHash)
+      }
     }
   },
   watch: {

From 85c17bbd5971b44725667f580cf852a0124d05c3 Mon Sep 17 00:00:00 2001
From: silver-it <alex.jin220@gmail.com>
Date: Thu, 23 May 2024 17:33:24 +0800
Subject: [PATCH 22/77] feat: scroll to pinned message

---
 frontend/views/containers/chatroom/PinnedMessages.vue | 6 +++---
 frontend/views/pages/GroupChat.vue                    | 6 ++++++
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/frontend/views/containers/chatroom/PinnedMessages.vue b/frontend/views/containers/chatroom/PinnedMessages.vue
index 8a2294be6..2465cefcf 100644
--- a/frontend/views/containers/chatroom/PinnedMessages.vue
+++ b/frontend/views/containers/chatroom/PinnedMessages.vue
@@ -3,7 +3,7 @@
   template(v-for='(msg, index) in messages')
     .c-pinned-message(
       :key='msg.hash'
-      @click='scrollToPinnedMessage(msg)'
+      @click='scrollToPinnedMessage(msg.hash)'
     )
       .c-pinned-message-header
         .c-sender-profile
@@ -53,8 +53,8 @@ export default ({
     unpinMessage (messageHash) {
       this.$emit('unpin-message', messageHash)
     },
-    scrollToPinnedMessage (message) {
-      console.log('TODO: Scroll To Pinned Message -', message)
+    scrollToPinnedMessage (messageHash) {
+      this.$emit('scroll-to-pinned-message', messageHash)
     }
   }
 }: Object)
diff --git a/frontend/views/pages/GroupChat.vue b/frontend/views/pages/GroupChat.vue
index f1fca49c7..e1de23328 100644
--- a/frontend/views/pages/GroupChat.vue
+++ b/frontend/views/pages/GroupChat.vue
@@ -95,6 +95,7 @@ page(pageTestName='groupChat' :miniHeader='isDirectMessage()')
           pinned-messages(
             :messages='pinnedMessages'
             @unpin-message='unpinMessage'
+            @scroll-to-pinned-message='scrollToPinnedMessage'
           )
 
   template(#sidebar='{ toggle }')
@@ -209,6 +210,11 @@ export default ({
       if (this.$refs.chatMain) {
         this.$refs.chatMain.unpinFromChannel(messageHash)
       }
+    },
+    scrollToPinnedMessage (messageHash) {
+      if (this.$refs.chatMain) {
+        this.$refs.chatMain.scrollToMessage(messageHash)
+      }
     }
   },
   watch: {

From e9334bd41a8018540e07aa607923892f2cf1c928 Mon Sep 17 00:00:00 2001
From: silver-it <alex.jin220@gmail.com>
Date: Thu, 23 May 2024 18:45:37 +0800
Subject: [PATCH 23/77] feat: pinned messages would be updated if the original
 message is changed

---
 frontend/model/contracts/chatroom.js | 20 ++++++++++++++++----
 frontend/views/pages/GroupChat.vue   |  3 +++
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/frontend/model/contracts/chatroom.js b/frontend/model/contracts/chatroom.js
index 13447ce7b..32e9e1a48 100644
--- a/frontend/model/contracts/chatroom.js
+++ b/frontend/model/contracts/chatroom.js
@@ -470,9 +470,10 @@ sbp('chelonia/defineContract', {
         text: string
       })),
       process ({ data, meta, innerSigningContractID }, { state }) {
-        const msgIndex = findMessageIdx(data.hash, state.messages)
+        const { hash, text } = data
+        const msgIndex = findMessageIdx(hash, state.messages)
         if (msgIndex >= 0 && innerSigningContractID === state.messages[msgIndex].from) {
-          state.messages[msgIndex].text = data.text
+          state.messages[msgIndex].text = text
           state.messages[msgIndex].updatedDate = meta.createdDate
           if (state.renderingContext && state.messages[msgIndex].pending) {
             // NOTE: 'pending' message attribute is not the original message attribute
@@ -480,6 +481,11 @@ sbp('chelonia/defineContract', {
             delete state.messages[msgIndex].pending
           }
         }
+
+        const pinnedMsgIndex = findMessageIdx(hash, state.pinnedMessages)
+        if (pinnedMsgIndex >= 0) {
+          state.pinnedMessages[pinnedMsgIndex].text = text
+        }
       },
       sideEffect ({ contractID, hash, meta, data, innerSigningContractID }, { getters }) {
         const rootState = sbp('state/vuex/state')
@@ -540,19 +546,25 @@ sbp('chelonia/defineContract', {
         }
       }),
       process ({ data, meta, innerSigningContractID }, { state }) {
-        const msgIndex = findMessageIdx(data.hash, state.messages)
+        const { hash } = data
+        const msgIndex = findMessageIdx(hash, state.messages)
         if (msgIndex >= 0) {
           state.messages.splice(msgIndex, 1)
         }
         // filter replied messages and check if the current message is original
         for (const message of state.messages) {
-          if (message.replyingMessage?.hash === data.hash) {
+          if (message.replyingMessage?.hash === hash) {
             message.replyingMessage.hash = null
             message.replyingMessage.text = L('Original message was removed by {user}', {
               user: makeMentionFromUserID(innerSigningContractID).me
             })
           }
         }
+
+        const pinnedMsgIndex = findMessageIdx(hash, state.pinnedMessages)
+        if (pinnedMsgIndex >= 0) {
+          state.pinnedMessages.splice(pinnedMsgIndex, 1)
+        }
       },
       sideEffect ({ data, contractID, hash, meta, innerSigningContractID }) {
         const rootState = sbp('state/vuex/state')
diff --git a/frontend/views/pages/GroupChat.vue b/frontend/views/pages/GroupChat.vue
index e1de23328..05eb4a3c2 100644
--- a/frontend/views/pages/GroupChat.vue
+++ b/frontend/views/pages/GroupChat.vue
@@ -84,6 +84,7 @@ page(pageTestName='groupChat' :miniHeader='isDirectMessage()')
     .c-header-shortcuts
       tooltip(
         v-if='pinnedMessages.length'
+        ref='pinnedMessagesToolTip'
         :manual='true'
         :opacity='1'
         direction='bottom-left'
@@ -210,11 +211,13 @@ export default ({
       if (this.$refs.chatMain) {
         this.$refs.chatMain.unpinFromChannel(messageHash)
       }
+      this.$refs.pinnedMessagesToolTip?.toggle()
     },
     scrollToPinnedMessage (messageHash) {
       if (this.$refs.chatMain) {
         this.$refs.chatMain.scrollToMessage(messageHash)
       }
+      this.$refs.pinnedMessagesToolTip?.toggle()
     }
   },
   watch: {

From b6378d27630272a0be8d4e58a26ec3d137451719 Mon Sep 17 00:00:00 2001
From: silver-it <alex.jin220@gmail.com>
Date: Fri, 24 May 2024 08:44:33 +0800
Subject: [PATCH 24/77] feat: add poll to pinned messages

---
 .../views/containers/chatroom/MessagePoll.vue | 37 ++++--------------
 .../containers/chatroom/PinnedMessages.vue    | 27 ++++++++++++-
 .../views/containers/chatroom/PollMixin.js    | 38 +++++++++++++++++++
 .../poll-message-content/PollToVote.vue       | 22 ++---------
 .../poll-message-content/PollVoteResult.vue   | 29 ++++----------
 5 files changed, 84 insertions(+), 69 deletions(-)
 create mode 100644 frontend/views/containers/chatroom/PollMixin.js

diff --git a/frontend/views/containers/chatroom/MessagePoll.vue b/frontend/views/containers/chatroom/MessagePoll.vue
index 5e58b41a3..ec12ffff4 100644
--- a/frontend/views/containers/chatroom/MessagePoll.vue
+++ b/frontend/views/containers/chatroom/MessagePoll.vue
@@ -3,6 +3,7 @@ message-base.c-message-poll(
   v-bind='$props'
   @delete-message='deleteMessage'
   @add-emoticon='addEmoticon($event)'
+  @pin-to-channel='$emit("pin-to-channel")'
 )
   template(#body='')
     i18n.c-poll-created-sentence(tag='p') Created a new poll:
@@ -16,6 +17,8 @@ message-base.c-message-poll(
         :messageId='messageId'
         :messageHash='messageHash'
         :pollData='pollData'
+        @request-vote-change='switchOnChangeMode'
+        @cancel-vote-change='switchOffChangeMode'
       )
 
       banner-scoped(ref='errBanner')
@@ -23,16 +26,17 @@ message-base.c-message-poll(
 
 <script>
 import sbp from '@sbp/sbp'
-import { mapGetters } from 'vuex'
 import MessageBase from './MessageBase.vue'
-import { MESSAGE_VARIANTS, POLL_STATUS } from '@model/contracts/shared/constants.js'
+import { MESSAGE_VARIANTS } from '@model/contracts/shared/constants.js'
 import { DAYS_MILLIS, MINS_MILLIS } from '@model/contracts/shared/time.js'
 import PollToVote from './poll-message-content/PollToVote.vue'
 import PollVoteResult from './poll-message-content/PollVoteResult.vue'
 import BannerScoped from '@components/banners/BannerScoped.vue'
+import PollMixin from '@containers/chatroom/PollMixin.js'
 
 export default ({
   name: 'MessagePoll',
+  mixins: [PollMixin],
   components: {
     MessageBase,
     PollToVote,
@@ -62,7 +66,8 @@ export default ({
         return Object.values(MESSAGE_VARIANTS).indexOf(value) !== -1
       }
     },
-    isMsgSender: Boolean // says if the current user is the creator of the message
+    isMsgSender: Boolean, // says if the current user is the creator of the message
+    isAlreadyPinned: Boolean
   },
   data () {
     return {
@@ -72,22 +77,6 @@ export default ({
     }
   },
   computed: {
-    ...mapGetters([
-      'ourIdentityContractId',
-      'currentChatRoomId'
-    ]),
-    votesFlattened () {
-      return this.pollData.options.reduce((accu, opt) => [...accu, ...opt.voted], [])
-    },
-    hasVoted () { // checks if the current user has voted on this poll or not
-      return this.votesFlattened.includes(this.ourIdentityContractId)
-    },
-    isPollEditable () { // If the current user is the creator of the poll and no one has voted yet, poll can be editted.
-      return this.isMsgSender && this.votesFlattened.length === 0
-    },
-    isPollExpired () {
-      return this.pollData.status === POLL_STATUS.CLOSED
-    },
     messageContentComponent () {
       if (this.hasVoted) {
         return this.ephemeral.isChangeMode ? 'poll-to-vote' : 'poll-vote-result'
@@ -147,16 +136,6 @@ export default ({
       }
     }
   },
-  provide () {
-    return {
-      pollUtils: {
-        hasVoted: () => this.hasVoted,
-        totalVoteCount: () => this.votesFlattened.length,
-        switchOnChangeMode: this.switchOnChangeMode,
-        switchOffChangeMode: this.switchOffChangeMode
-      }
-    }
-  },
   created () {
     this.checkAndSetupPollExpirationTimer()
   },
diff --git a/frontend/views/containers/chatroom/PinnedMessages.vue b/frontend/views/containers/chatroom/PinnedMessages.vue
index 2465cefcf..b9a921da3 100644
--- a/frontend/views/containers/chatroom/PinnedMessages.vue
+++ b/frontend/views/containers/chatroom/PinnedMessages.vue
@@ -15,8 +15,14 @@
           )
       .c-pinned-message-content
         span.custom-markdown-content(
+          v-if='isText(msg)'
           v-safe-html:a='renderMarkdown(msg.text)'
         )
+        .c-poll-wrapper(v-else-if='isPoll(msg)')
+          poll-vote-result.c-poll-inner(
+            :pollData='msg.pollData'
+            :readOnly='true'
+          )
       .c-pinned-message-footer
         span {{ humanDate(msg.datetime, { month: 'long', year: 'numeric', day: 'numeric', hour: 'numeric', minute: 'numeric' }) }}
 
@@ -26,14 +32,17 @@
 import { mapGetters } from 'vuex'
 import AvatarUser from '@components/AvatarUser.vue'
 import Tooltip from '@components/Tooltip.vue'
+import PollVoteResult from '@containers/chatroom/poll-message-content/PollVoteResult.vue'
 import { humanDate } from '@model/contracts/shared/time.js'
+import { MESSAGE_TYPES } from '@model/contracts/shared/constants.js'
 import { renderMarkdown } from '@view-utils/markdown-utils.js'
 
 export default ({
   name: 'PinnedMessage',
   components: {
     AvatarUser,
-    Tooltip
+    Tooltip,
+    PollVoteResult
   },
   props: {
     messages: {
@@ -50,6 +59,12 @@ export default ({
   methods: {
     humanDate,
     renderMarkdown,
+    isText (message) {
+      return message.type === MESSAGE_TYPES.TEXT
+    },
+    isPoll (message) {
+      return message.type === MESSAGE_TYPES.POLL
+    },
     unpinMessage (messageHash) {
       this.$emit('unpin-message', messageHash)
     },
@@ -68,6 +83,7 @@ export default ({
   padding: 0.75rem;
   max-height: 40rem;
   max-width: 25rem;
+  width: 25rem;
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
@@ -103,6 +119,15 @@ export default ({
 
     .c-pinned-message-content {
       margin: 0.5rem 0;
+
+      .c-poll-inner {
+        position: relative;
+        width: 100%;
+        border-radius: 10px;
+        border: 1px solid $general_0;
+        padding: 1rem;
+        background-color: $background_0;
+      }
     }
 
     .c-pinned-message-footer {
diff --git a/frontend/views/containers/chatroom/PollMixin.js b/frontend/views/containers/chatroom/PollMixin.js
new file mode 100644
index 000000000..149e04e46
--- /dev/null
+++ b/frontend/views/containers/chatroom/PollMixin.js
@@ -0,0 +1,38 @@
+import { mapGetters } from 'vuex'
+import { POLL_STATUS, POLL_TYPES } from '@model/contracts/shared/constants.js'
+import { humanDate } from '@model/contracts/shared/time.js'
+
+const PollMixin: Object = {
+  computed: {
+    ...mapGetters([
+      'ourIdentityContractId',
+      'currentChatRoomId'
+    ]),
+    votesFlattened () {
+      return this.pollData.options.reduce((accu, opt) => [...accu, ...opt.voted], [])
+    },
+    totalVoteCount () {
+      return this.votesFlattened.length
+    },
+    hasVoted () { // checks if the current user has voted on this poll or not
+      return this.votesFlattened.includes(this.ourIdentityContractId)
+    },
+    isPollEditable () { // If the current user is the creator of the poll and no one has voted yet, poll can be editted.
+      return this.isMsgSender && this.votesFlattened.length === 0
+    },
+    isPollExpired () {
+      return this.pollData.status === POLL_STATUS.CLOSED
+    },
+    isAnonymousPoll () {
+      return !!this.pollData.hideVoters
+    },
+    allowMultipleChoices () {
+      return this.pollData.pollType === POLL_TYPES.MULTIPLE_CHOICES
+    },
+    pollExpiryDate () {
+      return humanDate(new Date(this.pollData.expires_date_ms))
+    }
+  }
+}
+
+export default PollMixin
diff --git a/frontend/views/containers/chatroom/poll-message-content/PollToVote.vue b/frontend/views/containers/chatroom/poll-message-content/PollToVote.vue
index 1b2c97110..0b1116a36 100644
--- a/frontend/views/containers/chatroom/poll-message-content/PollToVote.vue
+++ b/frontend/views/containers/chatroom/poll-message-content/PollToVote.vue
@@ -39,16 +39,15 @@ form(@submit.prevent='')
 
 <script>
 import sbp from '@sbp/sbp'
-import { mapGetters } from 'vuex'
 import { cloneDeep } from '@model/contracts/shared/giLodash.js'
 import { POLL_TYPES } from '@model/contracts/shared/constants.js'
 import BannerScoped from '@components/banners/BannerScoped.vue'
 import ButtonSubmit from '@components/ButtonSubmit.vue'
-import { humanDate } from '@model/contracts/shared/time.js'
+import PollMixin from '@containers/chatroom/PollMixin.js'
 
 export default ({
   name: 'PollToVote',
-  inject: ['pollUtils'],
+  mixins: [PollMixin],
   components: {
     BannerScoped,
     ButtonSubmit
@@ -70,13 +69,6 @@ export default ({
     }
   },
   computed: {
-    ...mapGetters([
-      'ourIdentityContractId',
-      'currentChatRoomId'
-    ]),
-    allowMultipleChoices () {
-      return this.pollData.pollType === POLL_TYPES.MULTIPLE_CHOICES
-    },
     enableSubmitBtn () {
       if (this.isChangeMode) {
         return this.formBeenUpdated()
@@ -86,18 +78,12 @@ export default ({
           : Boolean(this.form.selectedOptions)
       }
     },
-    isAnonymousPoll () {
-      return !!this.pollData.hideVoters
-    },
     selectedVotesAsString () {
       if (this.isAnonymousPoll) { return '' }
 
       return this.allowMultipleChoices
         ? this.form.selectedOptions.map(id => this.getOptValue(id)).join(', ')
         : this.getOptValue(this.form.selectedOptions)
-    },
-    pollExpiryDate () {
-      return humanDate(new Date(this.pollData.expires_date_ms))
     }
   },
   methods: {
@@ -127,7 +113,7 @@ export default ({
           }
         })
 
-        this.pollUtils.switchOffChangeMode()
+        this.onCancelClick()
       } catch (e) {
         console.error('"changeVoteOnPoll" action failed: ', e)
         this.$refs.errBanner.danger(e.message)
@@ -145,7 +131,7 @@ export default ({
       } else return this.selectedOptionsBeforeUpdate !== this.form.selectedOptions
     },
     onCancelClick () {
-      this.pollUtils.switchOffChangeMode()
+      this.$emit('cancel-vote-change')
     }
   },
   mounted () {
diff --git a/frontend/views/containers/chatroom/poll-message-content/PollVoteResult.vue b/frontend/views/containers/chatroom/poll-message-content/PollVoteResult.vue
index 4bf2d8b79..e93a86bb6 100644
--- a/frontend/views/containers/chatroom/poll-message-content/PollVoteResult.vue
+++ b/frontend/views/containers/chatroom/poll-message-content/PollVoteResult.vue
@@ -9,12 +9,12 @@
     h3.is-title-4 {{ pollData.question }}
 
     i18n.pill.is-neutral.c-poll-closed-badge(v-if='isPollExpired') Poll closed
-    menu-parent.c-poll-menu(v-else)
+    menu-parent.c-poll-menu(v-else-if='!readOnly')
       menu-trigger.is-icon.c-poll-menu-trigger
         i.icon-ellipsis-v
       menu-content.c-poll-menu-content
         ul
-          menu-item(tag='button' icon='edit' @click='pollUtils.switchOnChangeMode')
+          menu-item(tag='button' icon='edit' @click='$emit("request-vote-change")')
             i18n Change vote
   .c-options-and-voters
     ul.c-options-list
@@ -38,19 +38,18 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
 import { uniq } from '@model/contracts/shared/giLodash.js'
 import { MenuParent, MenuTrigger, MenuContent, MenuItem } from '@components/menu/index.js'
 import VoterAvatars from './VoterAvatars.vue'
-import { POLL_STATUS } from '@model/contracts/shared/constants.js'
-import { humanDate } from '@model/contracts/shared/time.js'
+import PollMixin from '@containers/chatroom/PollMixin.js'
 
 export default ({
   name: 'PollVoteResult',
-  inject: ['pollUtils'],
   props: {
-    pollData: Object
+    pollData: Object,
+    readOnly: Boolean
   },
+  mixins: [PollMixin],
   components: {
     VoterAvatars,
     MenuParent,
@@ -59,18 +58,6 @@ export default ({
     MenuItem
   },
   computed: {
-    ...mapGetters([
-      'ourIdentityContractId'
-    ]),
-    isPollExpired () {
-      return this.pollData.status === POLL_STATUS.CLOSED
-    },
-    pollExpiryDate () {
-      return humanDate(new Date(this.pollData.expires_date_ms))
-    },
-    isAnonymousPoll () {
-      return !!this.pollData.hideVoters
-    },
     list () {
       const percents = []
       const voters = []
@@ -97,10 +84,10 @@ export default ({
   },
   methods: {
     getPercent (votes) {
-      const total = this.pollUtils.totalVoteCount()
+      const total = this.totalVoteCount
       return total === 0
         ? '0%'
-        : `${Math.round(votes.length / this.pollUtils.totalVoteCount() * 100)}%`
+        : `${Math.round(votes.length / this.totalVoteCount * 100)}%`
     }
   }
 }: Object)

From 37edff8674458686e1242f2102ad7195e359fc81 Mon Sep 17 00:00:00 2001
From: silver-it <alex.jin220@gmail.com>
Date: Fri, 24 May 2024 08:49:20 +0800
Subject: [PATCH 25/77] feat: only text and poll can be pinned

---
 frontend/views/containers/chatroom/MessageActions.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/frontend/views/containers/chatroom/MessageActions.vue b/frontend/views/containers/chatroom/MessageActions.vue
index 950f580c8..384131060 100644
--- a/frontend/views/containers/chatroom/MessageActions.vue
+++ b/frontend/views/containers/chatroom/MessageActions.vue
@@ -90,7 +90,7 @@ menu-parent(ref='menu')
         i18n Copy message Link
 
       menu-item.is-icon-small(
-        v-if='!isAlreadyPinned'
+        v-if='!isAlreadyPinned && isPinnable'
         tag='button'
         @click='action("pinToChannel")'
       )
@@ -140,6 +140,9 @@ export default ({
     isPoll () {
       return this.type === MESSAGE_TYPES.POLL
     },
+    isPinnable () {
+      return this.isText || this.isPoll
+    },
     isEditable () {
       return this.isMsgSender && (this.isText || this.isPoll)
     },

From cdfdc4877e6da71042b8e8a6a8f6d37abd844ada Mon Sep 17 00:00:00 2001
From: silver-it <alex.jin220@gmail.com>
Date: Fri, 24 May 2024 10:03:34 +0800
Subject: [PATCH 26/77] feat: update pinned messages whenever original message
 is updated

---
 frontend/model/contracts/chatroom.js | 103 +++++++++++++++++----------
 1 file changed, 67 insertions(+), 36 deletions(-)

diff --git a/frontend/model/contracts/chatroom.js b/frontend/model/contracts/chatroom.js
index 32e9e1a48..ec4050d3a 100644
--- a/frontend/model/contracts/chatroom.js
+++ b/frontend/model/contracts/chatroom.js
@@ -614,16 +614,25 @@ sbp('chelonia/defineContract', {
         messageSender: string
       })),
       process ({ data, innerSigningContractID }, { state }) {
-        const msgIndex = findMessageIdx(data.hash, state.messages)
-        if (msgIndex >= 0) {
-          const oldAttachments = state.messages[msgIndex].attachments
+        const { hash, manifestCid } = data
+        const fnDeleteAttachment = (message) => {
+          const oldAttachments = message.attachments
           if (Array.isArray(oldAttachments)) {
             const newAttachments = oldAttachments.filter(attachment => {
-              return attachment.downloadData.manifestCid !== data.manifestCid
+              return attachment.downloadData.manifestCid !== manifestCid
             })
-            Vue.set(state.messages[msgIndex], 'attachments', newAttachments)
+            Vue.set(message, 'attachments', newAttachments)
           }
         }
+
+        const msgIndex = findMessageIdx(hash, state.messages)
+        if (msgIndex >= 0) {
+          fnDeleteAttachment(state.messages[msgIndex])
+        }
+        const pinnedMsgIndex = findMessageIdx(hash, state.pinnedMessages)
+        if (pinnedMsgIndex >= 0) {
+          fnDeleteAttachment(state.pinnedMessages[pinnedMsgIndex])
+        }
       },
       sideEffect ({ data, contractID, hash, meta, innerSigningContractID }) {
         const me = sbp('state/vuex/state').loggedIn.identityContractID
@@ -643,9 +652,9 @@ sbp('chelonia/defineContract', {
       })),
       process ({ data, innerSigningContractID }, { state }) {
         const { hash, emoticon } = data
-        const msgIndex = findMessageIdx(hash, state.messages)
-        if (msgIndex >= 0) {
-          let emoticons = cloneDeep(state.messages[msgIndex].emoticons || {})
+
+        const fnMakeEmotion = (message) => {
+          let emoticons = cloneDeep(message.emoticons || {})
           if (emoticons[emoticon]) {
             const alreadyAdded = emoticons[emoticon].indexOf(innerSigningContractID)
             if (alreadyAdded >= 0) {
@@ -663,11 +672,20 @@ sbp('chelonia/defineContract', {
             emoticons[emoticon] = [innerSigningContractID]
           }
           if (emoticons) {
-            Vue.set(state.messages[msgIndex], 'emoticons', emoticons)
+            Vue.set(message, 'emoticons', emoticons)
           } else {
-            Vue.delete(state.messages[msgIndex], 'emoticons')
+            Vue.delete(message, 'emoticons')
           }
         }
+
+        const msgIndex = findMessageIdx(hash, state.messages)
+        if (msgIndex >= 0) {
+          fnMakeEmotion(state.messages[msgIndex])
+        }
+        const pinnedMsgIndex = findMessageIdx(hash, state.pinnedMessages)
+        if (pinnedMsgIndex >= 0) {
+          fnMakeEmotion(state.pinnedMessages[pinnedMsgIndex])
+        }
       }
     },
     'gi.contracts/chatroom/voteOnPoll': {
@@ -677,25 +695,30 @@ sbp('chelonia/defineContract', {
         votesAsString: string
       })),
       process ({ data, meta, hash, height, innerSigningContractID }, { state }) {
-        const msgIndex = findMessageIdx(data.hash, state.messages)
-        if (msgIndex >= 0) {
+        const fnVoteOnPoll = (message) => {
           const myVotes = data.votes
-          const pollData = state.messages[msgIndex].pollData
+          const pollData = message.pollData
           const optsCopy = cloneDeep(pollData.options)
-          const votedOptNames = []
 
           myVotes.forEach(optId => {
-            const foundOpt = optsCopy.find(x => x.id === optId)
-
-            if (foundOpt) {
-              foundOpt.voted.push(innerSigningContractID)
-              votedOptNames.push(`"${foundOpt.value}"`)
-            }
+            optsCopy.find(x => x.id === optId)?.voted.push(innerSigningContractID)
           })
 
-          Vue.set(state.messages[msgIndex], 'pollData', { ...pollData, options: optsCopy })
+          Vue.set(message, 'pollData', { ...pollData, options: optsCopy })
+        }
 
-          if (pollData.hideVoters) { return }
+        const pinnedMsgIndex = findMessageIdx(data.hash, state.pinnedMessages)
+        if (pinnedMsgIndex >= 0) {
+          fnVoteOnPoll(state.pinnedMessages[pinnedMsgIndex])
+        }
+
+        const msgIndex = findMessageIdx(data.hash, state.messages)
+        if (msgIndex >= 0) {
+          fnVoteOnPoll(state.messages[msgIndex])
+
+          // TODO: this doesn't always run. fix it
+          //       https://github.com/okTurtles/group-income/issues/2010
+          if (state.messages[msgIndex].pollData.hideVoters) { return }
         }
 
         // create & add a notification-message for user having voted.
@@ -719,31 +742,35 @@ sbp('chelonia/defineContract', {
         votesAsString: string
       })),
       process ({ data, meta, hash, height, innerSigningContractID }, { state }) {
-        const msgIndex = findMessageIdx(data.hash, state.messages)
-        if (msgIndex >= 0) {
-          const me = innerSigningContractID
+        const fnChangeVoteOnPoll = (message) => {
           const myUpdatedVotes = data.votes
-          const pollData = state.messages[msgIndex].pollData
+          const pollData = message.pollData
           const optsCopy = cloneDeep(pollData.options)
-          const votedOptNames = []
 
           // remove all the previous votes of the user before update.
           optsCopy.forEach(opt => {
-            opt.voted = opt.voted.filter(votername => votername !== me)
+            opt.voted = opt.voted.filter(votername => votername !== innerSigningContractID)
           })
 
           myUpdatedVotes.forEach(optId => {
-            const foundOpt = optsCopy.find(x => x.id === optId)
-
-            if (foundOpt) {
-              foundOpt.voted.push(me)
-              votedOptNames.push(`"${foundOpt.value}"`)
-            }
+            optsCopy.find(x => x.id === optId)?.voted.push(innerSigningContractID)
           })
 
-          Vue.set(state.messages[msgIndex], 'pollData', { ...pollData, options: optsCopy })
+          Vue.set(message, 'pollData', { ...pollData, options: optsCopy })
+        }
+
+        const pinnedMsgIndex = findMessageIdx(data.hash, state.pinnedMessages)
+        if (pinnedMsgIndex >= 0) {
+          fnChangeVoteOnPoll(state.pinnedMessages[pinnedMsgIndex])
+        }
+
+        const msgIndex = findMessageIdx(data.hash, state.messages)
+        if (msgIndex >= 0) {
+          fnChangeVoteOnPoll(state.messages[msgIndex])
 
-          if (pollData.hideVoters) { return }
+          // TODO: this doesn't always run. fix it
+          //       https://github.com/okTurtles/group-income/issues/2010
+          if (state.messages[msgIndex].pollData.hideVoters) { return }
         }
 
         // create & add a notification-message for user having update his/her votes.
@@ -769,6 +796,10 @@ sbp('chelonia/defineContract', {
         if (msgIndex >= 0) {
           Vue.set(state.messages[msgIndex].pollData, 'status', POLL_STATUS.CLOSED)
         }
+        const pinnedMsgIndex = findMessageIdx(data.hash, state.pinnedMessages)
+        if (pinnedMsgIndex >= 0) {
+          Vue.set(state.pinnedMessages[pinnedMsgIndex].pollData, 'status', POLL_STATUS.CLOSED)
+        }
       }
     },
     'gi.contracts/chatroom/pinMessage': {

From 52cb12c18f86bb110b3b5ee69f2fdfac56e6a558 Mon Sep 17 00:00:00 2001
From: silver-it <alex.jin220@gmail.com>
Date: Fri, 24 May 2024 10:49:38 +0800
Subject: [PATCH 27/77] feat: preview attachments inside pinned messages

---
 .../containers/chatroom/PinnedMessages.vue    | 20 ++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/frontend/views/containers/chatroom/PinnedMessages.vue b/frontend/views/containers/chatroom/PinnedMessages.vue
index b9a921da3..d5bb45d0e 100644
--- a/frontend/views/containers/chatroom/PinnedMessages.vue
+++ b/frontend/views/containers/chatroom/PinnedMessages.vue
@@ -23,6 +23,12 @@
             :pollData='msg.pollData'
             :readOnly='true'
           )
+        .c-attachments-wrapper(v-if='hasAttachments(msg)')
+          chat-attachment-preview(
+            :attachmentList='msg.attachments'
+            :isForDownload='true'
+            :variant='messageSentVariant'
+          )
       .c-pinned-message-footer
         span {{ humanDate(msg.datetime, { month: 'long', year: 'numeric', day: 'numeric', hour: 'numeric', minute: 'numeric' }) }}
 
@@ -33,8 +39,9 @@ import { mapGetters } from 'vuex'
 import AvatarUser from '@components/AvatarUser.vue'
 import Tooltip from '@components/Tooltip.vue'
 import PollVoteResult from '@containers/chatroom/poll-message-content/PollVoteResult.vue'
+import ChatAttachmentPreview from '@containers/chatroom/file-attachment/ChatAttachmentPreview.vue'
 import { humanDate } from '@model/contracts/shared/time.js'
-import { MESSAGE_TYPES } from '@model/contracts/shared/constants.js'
+import { MESSAGE_TYPES, MESSAGE_VARIANTS } from '@model/contracts/shared/constants.js'
 import { renderMarkdown } from '@view-utils/markdown-utils.js'
 
 export default ({
@@ -42,7 +49,8 @@ export default ({
   components: {
     AvatarUser,
     Tooltip,
-    PollVoteResult
+    PollVoteResult,
+    ChatAttachmentPreview
   },
   props: {
     messages: {
@@ -54,7 +62,10 @@ export default ({
     return {}
   },
   computed: {
-    ...mapGetters(['userDisplayNameFromID'])
+    ...mapGetters(['userDisplayNameFromID']),
+    messageSentVariant () {
+      return MESSAGE_VARIANTS.SENT
+    }
   },
   methods: {
     humanDate,
@@ -65,6 +76,9 @@ export default ({
     isPoll (message) {
       return message.type === MESSAGE_TYPES.POLL
     },
+    hasAttachments (message) {
+      return message.attachments?.length > 0
+    },
     unpinMessage (messageHash) {
       this.$emit('unpin-message', messageHash)
     },

From 400f9e6b9342447acba930bd165eb0c3c2ac56b5 Mon Sep 17 00:00:00 2001
From: silver-it <alex.jin220@gmail.com>
Date: Fri, 24 May 2024 16:05:14 +0800
Subject: [PATCH 28/77] feat: stop propagation in download attachment action
 inside pinned messages

---
 .../views/containers/chatroom/PinnedMessages.vue     | 12 ++++++------
 .../file-attachment/ChatAttachmentPreview.vue        |  7 ++++++-
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/frontend/views/containers/chatroom/PinnedMessages.vue b/frontend/views/containers/chatroom/PinnedMessages.vue
index d5bb45d0e..ae5f761bd 100644
--- a/frontend/views/containers/chatroom/PinnedMessages.vue
+++ b/frontend/views/containers/chatroom/PinnedMessages.vue
@@ -23,12 +23,12 @@
             :pollData='msg.pollData'
             :readOnly='true'
           )
-        .c-attachments-wrapper(v-if='hasAttachments(msg)')
-          chat-attachment-preview(
-            :attachmentList='msg.attachments'
-            :isForDownload='true'
-            :variant='messageSentVariant'
-          )
+        chat-attachment-preview(
+          v-if='hasAttachments(msg)'
+          :attachmentList='msg.attachments'
+          :isForDownload='true'
+          :variant='messageSentVariant'
+        )
       .c-pinned-message-footer
         span {{ humanDate(msg.datetime, { month: 'long', year: 'numeric', day: 'numeric', hour: 'numeric', minute: 'numeric' }) }}
 
diff --git a/frontend/views/containers/chatroom/file-attachment/ChatAttachmentPreview.vue b/frontend/views/containers/chatroom/file-attachment/ChatAttachmentPreview.vue
index 2e18c7566..17ab90f03 100644
--- a/frontend/views/containers/chatroom/file-attachment/ChatAttachmentPreview.vue
+++ b/frontend/views/containers/chatroom/file-attachment/ChatAttachmentPreview.vue
@@ -37,7 +37,7 @@
           )
             button.is-icon-small(
               :aria-label='L("Download")'
-              @click='downloadAttachment(entryIndex)'
+              @click.stop='downloadAttachment(entryIndex)'
             )
               i.icon-download
           tooltip(
@@ -176,6 +176,11 @@ export default {
 
         aTag.setAttribute('href', url)
         aTag.setAttribute('download', attachment.name)
+
+        aTag.addEventListener('click', function (event) {
+          event.stopPropagation()
+        })
+
         aTag.click()
       } catch (err) {
         console.error('error caught while downloading a file: ', err)

From 51a47ba9b3ce0edf846b9a6ca1c689d30ca4bf89 Mon Sep 17 00:00:00 2001
From: silver-it <alex.jin220@gmail.com>
Date: Fri, 24 May 2024 16:18:30 +0800
Subject: [PATCH 29/77] feat: display reactions to the pinned messages

---
 .../containers/chatroom/MessageReactions.vue  |  7 ++---
 .../containers/chatroom/PinnedMessages.vue    | 26 +++++++++++++------
 2 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/frontend/views/containers/chatroom/MessageReactions.vue b/frontend/views/containers/chatroom/MessageReactions.vue
index ce74385a1..a1ae8689d 100644
--- a/frontend/views/containers/chatroom/MessageReactions.vue
+++ b/frontend/views/containers/chatroom/MessageReactions.vue
@@ -14,7 +14,7 @@
       | {{emoticon}}
       .c-emoticon-number {{list.length}}
 
-  .c-emoticon-wrapper.c-add-icon
+  .c-emoticon-wrapper.c-add-icon(v-if='!readOnly')
     button.is-icon-small(
       :aria-label='L("Add reaction")'
       @click='(e) => $emit("openEmoticon", e)'
@@ -40,7 +40,8 @@ export default ({
       type: Object,
       default: null
     },
-    messageType: String
+    messageType: String,
+    readOnly: Boolean
   },
   computed: {
     ...mapGetters(['globalProfile']),
@@ -79,7 +80,7 @@ export default ({
 @import "@assets/style/_variables.scss";
 
 .c-emoticons-list {
-  padding-left: 2.5rem;
+  padding-left: 3rem;
   display: flex;
 
   &.for-type-poll {
diff --git a/frontend/views/containers/chatroom/PinnedMessages.vue b/frontend/views/containers/chatroom/PinnedMessages.vue
index ae5f761bd..7ff00d344 100644
--- a/frontend/views/containers/chatroom/PinnedMessages.vue
+++ b/frontend/views/containers/chatroom/PinnedMessages.vue
@@ -19,16 +19,20 @@
           v-safe-html:a='renderMarkdown(msg.text)'
         )
         .c-poll-wrapper(v-else-if='isPoll(msg)')
-          poll-vote-result.c-poll-inner(
-            :pollData='msg.pollData'
-            :readOnly='true'
-          )
+          poll-vote-result.c-poll-inner(:pollData='msg.pollData' :readOnly='true')
         chat-attachment-preview(
           v-if='hasAttachments(msg)'
           :attachmentList='msg.attachments'
           :isForDownload='true'
           :variant='messageSentVariant'
         )
+        .c-message-reactions-wrapper
+          message-reactions(
+            :emoticonsList='msg.emoticons'
+            :messageType='msg.type'
+            :currentUserID='ourIdentityContractId'
+            :readOnly='true'
+          )
       .c-pinned-message-footer
         span {{ humanDate(msg.datetime, { month: 'long', year: 'numeric', day: 'numeric', hour: 'numeric', minute: 'numeric' }) }}
 
@@ -38,8 +42,9 @@
 import { mapGetters } from 'vuex'
 import AvatarUser from '@components/AvatarUser.vue'
 import Tooltip from '@components/Tooltip.vue'
-import PollVoteResult from '@containers/chatroom/poll-message-content/PollVoteResult.vue'
-import ChatAttachmentPreview from '@containers/chatroom/file-attachment/ChatAttachmentPreview.vue'
+import PollVoteResult from './poll-message-content/PollVoteResult.vue'
+import ChatAttachmentPreview from './file-attachment/ChatAttachmentPreview.vue'
+import MessageReactions from './MessageReactions.vue'
 import { humanDate } from '@model/contracts/shared/time.js'
 import { MESSAGE_TYPES, MESSAGE_VARIANTS } from '@model/contracts/shared/constants.js'
 import { renderMarkdown } from '@view-utils/markdown-utils.js'
@@ -50,7 +55,8 @@ export default ({
     AvatarUser,
     Tooltip,
     PollVoteResult,
-    ChatAttachmentPreview
+    ChatAttachmentPreview,
+    MessageReactions
   },
   props: {
     messages: {
@@ -62,7 +68,7 @@ export default ({
     return {}
   },
   computed: {
-    ...mapGetters(['userDisplayNameFromID']),
+    ...mapGetters(['userDisplayNameFromID', 'ourIdentityContractId']),
     messageSentVariant () {
       return MESSAGE_VARIANTS.SENT
     }
@@ -142,6 +148,10 @@ export default ({
         padding: 1rem;
         background-color: $background_0;
       }
+
+      .c-message-reactions-wrapper {
+        margin-left: -3rem;
+      }
     }
 
     .c-pinned-message-footer {

From 6c9d78b602230de80de93f5a0a0aa84cfb8912aa Mon Sep 17 00:00:00 2001
From: silver-it <alex.jin220@gmail.com>
Date: Fri, 24 May 2024 19:38:15 +0800
Subject: [PATCH 30/77] feat: implemented pinned by

---
 .../views/containers/chatroom/ChatMain.vue    |  2 +-
 .../views/containers/chatroom/Message.vue     |  2 +-
 .../views/containers/chatroom/MessageBase.vue | 38 ++++++++++++++++++-
 .../views/containers/chatroom/MessagePoll.vue |  4 +-
 4 files changed, 40 insertions(+), 6 deletions(-)

diff --git a/frontend/views/containers/chatroom/ChatMain.vue b/frontend/views/containers/chatroom/ChatMain.vue
index 59a2f6fbc..672ebb3fa 100644
--- a/frontend/views/containers/chatroom/ChatMain.vue
+++ b/frontend/views/containers/chatroom/ChatMain.vue
@@ -79,10 +79,10 @@
           :currentUserID='currentUserAttr.id'
           :avatar='avatar(message.from)'
           :variant='variant(message)'
+          :pinnedBy='message.pinnedBy'
           :isSameSender='isSameSender(index)'
           :isMsgSender='isMsgSender(message.from)'
           :isGroupCreator='isGroupCreator'
-          :isAlreadyPinned='!!message.pinnedBy'
           :class='{removed: message.delete}'
           @retry='retryMessage(index)'
           @reply='replyMessage(message)'
diff --git a/frontend/views/containers/chatroom/Message.vue b/frontend/views/containers/chatroom/Message.vue
index b5c1cf50f..1cea7a4ff 100644
--- a/frontend/views/containers/chatroom/Message.vue
+++ b/frontend/views/containers/chatroom/Message.vue
@@ -50,9 +50,9 @@ export default ({
         return null
       }
     },
+    pinnedBy: String,
     isSameSender: Boolean,
     isGroupCreator: Boolean,
-    isAlreadyPinned: Boolean,
     isMsgSender: Boolean,
     replyingMessage: String
   },
diff --git a/frontend/views/containers/chatroom/MessageBase.vue b/frontend/views/containers/chatroom/MessageBase.vue
index c38481975..274b8e13c 100644
--- a/frontend/views/containers/chatroom/MessageBase.vue
+++ b/frontend/views/containers/chatroom/MessageBase.vue
@@ -1,10 +1,15 @@
 <template lang='pug'>
 .c-message(
-  :class='[variant, isSameSender && "same-sender", "is-type-" + type]'
+  :class='[variant, isSameSender && "same-sender", "is-type-" + type, isAlreadyPinned && "pinned"]'
   @click='$emit("wrapperAction")'
   v-touch:touchhold='longPressHandler'
   v-touch:swipe.left='reply'
 )
+  .c-pinned-wrapper(v-if='isAlreadyPinned')
+    .c-pinned-icon
+      i.icon-thumbtack
+    i18n(:args='{ user: pinnedUserName }') Pinned by {user}
+
   .c-message-wrapper
     slot(name='image')
       profile-card(:contractID='from' direction='top-left')
@@ -135,6 +140,7 @@ import {
 } from '@model/contracts/shared/constants.js'
 import { OPEN_TOUCH_LINK_HELPER } from '@utils/events.js'
 import { renderMarkdown } from '@view-utils/markdown-utils.js'
+import { L } from '@common/common.js'
 
 const TextObjectType = {
   Text: 'TEXT',
@@ -184,9 +190,9 @@ export default ({
         return Object.values(MESSAGE_VARIANTS).indexOf(value) !== -1
       }
     },
+    pinnedBy: String,
     isSameSender: Boolean,
     isGroupCreator: Boolean,
-    isAlreadyPinned: Boolean,
     isMsgSender: Boolean,
     shouldRenderMarkdown: Boolean
   },
@@ -194,6 +200,7 @@ export default ({
     ...mapGetters([
       'ourContactProfilesById',
       'usernameFromID',
+      'userDisplayNameFromID',
       'chatRoomsInDetail'
     ]),
     textObjects () {
@@ -210,6 +217,18 @@ export default ({
         ...Object.keys(this.ourContactProfilesById).map(u => makeMentionFromUserID(u).me).filter(v => !!v),
         ...Object.values(this.chatRoomsInDetail).map(details => makeChannelMention(details.id))
       ]
+    },
+    isAlreadyPinned () {
+      return !!this.pinnedBy
+    },
+    pinnedUserName () {
+      if (this.isAlreadyPinned) {
+        if (this.currentUserID === this.pinnedBy) {
+          return L('you')
+        }
+        return this.userDisplayNameFromID(this.pinnedBy)
+      }
+      return ''
     }
   },
   methods: {
@@ -375,6 +394,10 @@ export default ({
     }
   }
 
+  &.pinned {
+    background-color: $warning_2;
+  }
+
   &.same-sender {
     margin-top: 0.25rem;
   }
@@ -418,6 +441,17 @@ export default ({
   }
 }
 
+.c-pinned-wrapper {
+  color: $warning_0;
+  display: flex;
+  gap: 0.5rem;
+
+  .c-pinned-icon {
+    width: 2.5rem;
+    text-align: right;
+  }
+}
+
 .c-message-wrapper {
   display: flex;
   align-items: flex-start;
diff --git a/frontend/views/containers/chatroom/MessagePoll.vue b/frontend/views/containers/chatroom/MessagePoll.vue
index ec12ffff4..6cb6254af 100644
--- a/frontend/views/containers/chatroom/MessagePoll.vue
+++ b/frontend/views/containers/chatroom/MessagePoll.vue
@@ -66,8 +66,8 @@ export default ({
         return Object.values(MESSAGE_VARIANTS).indexOf(value) !== -1
       }
     },
-    isMsgSender: Boolean, // says if the current user is the creator of the message
-    isAlreadyPinned: Boolean
+    pinnedBy: String,
+    isMsgSender: Boolean // says if the current user is the creator of the message
   },
   data () {
     return {

From 70938ae3888968ee7b79369898d2ef322492dbc2 Mon Sep 17 00:00:00 2001
From: silver-it <alex.jin220@gmail.com>
Date: Sat, 20 Apr 2024 06:15:15 +0800
Subject: [PATCH 31/77] chore: do not open new tab when user is signed in

---
 frontend/common/translations.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/common/translations.js b/frontend/common/translations.js
index 79cb55964..b7bccc9ac 100644
--- a/frontend/common/translations.js
+++ b/frontend/common/translations.js
@@ -133,13 +133,14 @@ export default function L (
 
 export function LError (error: Error): {|reportError: any|} {
   let url = `/app/dashboard?modal=UserSettingsModal&tab=application-logs&errorMsg=${encodeURI(error.message)}`
+  const target = !sbp('state/vuex/state').loggedIn ? 'target="_blank"' : ''
   if (!sbp('state/vuex/state').loggedIn) {
     url = 'https://github.com/okTurtles/group-income/issues'
   }
   return {
     reportError: L('"{errorMsg}". You can {a_}report the error{_a}.', {
       errorMsg: error.message,
-      'a_': `<a class="link" target="_blank" href="${url}">`,
+      'a_': `<a class="link" ${target} href="${url}">`,
       '_a': '</a>'
     })
   }

From 5d53f2ec2921008472735931c297d0759170347e Mon Sep 17 00:00:00 2001
From: silver-it <alex.jin220@gmail.com>
Date: Mon, 27 May 2024 06:19:27 +0800
Subject: [PATCH 32/77] chore: reverted unrelated changes

---
 frontend/common/translations.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/frontend/common/translations.js b/frontend/common/translations.js
index b7bccc9ac..79cb55964 100644
--- a/frontend/common/translations.js
+++ b/frontend/common/translations.js
@@ -133,14 +133,13 @@ export default function L (
 
 export function LError (error: Error): {|reportError: any|} {
   let url = `/app/dashboard?modal=UserSettingsModal&tab=application-logs&errorMsg=${encodeURI(error.message)}`
-  const target = !sbp('state/vuex/state').loggedIn ? 'target="_blank"' : ''
   if (!sbp('state/vuex/state').loggedIn) {
     url = 'https://github.com/okTurtles/group-income/issues'
   }
   return {
     reportError: L('"{errorMsg}". You can {a_}report the error{_a}.', {
       errorMsg: error.message,
-      'a_': `<a class="link" ${target} href="${url}">`,
+      'a_': `<a class="link" target="_blank" href="${url}">`,
       '_a': '</a>'
     })
   }

From 7d28f756e249ee817061d6b725e3b1c6c1c3c929 Mon Sep 17 00:00:00 2001
From: silver-it <alex.jin220@gmail.com>
Date: Mon, 27 May 2024 09:30:07 +0800
Subject: [PATCH 33/77] fix: css styles for responsive

---
 frontend/views/pages/GroupChat.vue | 23 ++++++++---------------
 1 file changed, 8 insertions(+), 15 deletions(-)

diff --git a/frontend/views/pages/GroupChat.vue b/frontend/views/pages/GroupChat.vue
index 05eb4a3c2..228afbf64 100644
--- a/frontend/views/pages/GroupChat.vue
+++ b/frontend/views/pages/GroupChat.vue
@@ -243,27 +243,16 @@ export default ({
 @import "@assets/style/_variables.scss";
 
 .c-card {
-  margin-top: -1.5rem;
   padding: 0;
-  height: 100%;
-  margin-bottom: 0;
+  height: calc(100% - 1.5rem);
+  margin-bottom: 1.5rem;
   border-radius: 0.625rem;
 
-  @include tablet {
-    height: calc(100% - 1.625rem);
-    margin-top: 0.125rem;
-    margin-bottom: 1rem;
-  }
-
   @include phone {
-    margin: -1.5rem -1rem 0 -1rem;
-    height: calc(100% + 1.5rem);
+    height: 100%;
+    margin: 0 -1rem 0 -1rem;
     border-radius: 0.625rem 0.625rem 0 0;
   }
-
-  &:last-child {
-    margin-bottom: 1.5rem;
-  }
 }
 
 ::v-deep {
@@ -277,6 +266,10 @@ export default ({
     height: auto !important;
     // removing width constraints only for group-chat page to take advantage of big monitors to display more of the chat (refer to: https://github.com/okTurtles/group-income/issues/1623)
     max-width: unset !important;
+
+    @include touch {
+      padding-top: 0 !important;
+    }
   }
 }
 

From 790c469b8c25a204d398cc19d3988ff1f4528c5c Mon Sep 17 00:00:00 2001
From: silver-it <alex.jin220@gmail.com>
Date: Mon, 27 May 2024 16:44:47 +0800
Subject: [PATCH 34/77] feat: mobile design for pinned messages

---
 .../containers/chatroom/MessageActions.vue    |   1 +
 .../containers/chatroom/PinnedMessages.vue    | 239 ++++++++++++++----
 frontend/views/pages/GroupChat.vue            |  39 +--
 3 files changed, 205 insertions(+), 74 deletions(-)

diff --git a/frontend/views/containers/chatroom/MessageActions.vue b/frontend/views/containers/chatroom/MessageActions.vue
index 384131060..e7603dbe0 100644
--- a/frontend/views/containers/chatroom/MessageActions.vue
+++ b/frontend/views/containers/chatroom/MessageActions.vue
@@ -92,6 +92,7 @@ menu-parent(ref='menu')
       menu-item.is-icon-small(
         v-if='!isAlreadyPinned && isPinnable'
         tag='button'
+        :aria-label='L("Pin")'
         @click='action("pinToChannel")'
       )
         i.icon-thumbtack
diff --git a/frontend/views/containers/chatroom/PinnedMessages.vue b/frontend/views/containers/chatroom/PinnedMessages.vue
index 7ff00d344..6f1e6e154 100644
--- a/frontend/views/containers/chatroom/PinnedMessages.vue
+++ b/frontend/views/containers/chatroom/PinnedMessages.vue
@@ -1,71 +1,72 @@
-<template lang='pug'>
-.card.c-pinned-messages-wrapper
-  template(v-for='(msg, index) in messages')
-    .c-pinned-message(
-      :key='msg.hash'
-      @click='scrollToPinnedMessage(msg.hash)'
-    )
-      .c-pinned-message-header
-        .c-sender-profile
-          avatar-user(:contractID='msg.from' size='xs')
-          .c-message-sender-name.has-text-bold.has-ellipsis {{ userDisplayNameFromID(msg.from) }}
-        tooltip(:text='L("Unpin this message")')
-          i.icon-times(
-            @click.stop='unpinMessage(msg.hash)'
-          )
-      .c-pinned-message-content
-        span.custom-markdown-content(
-          v-if='isText(msg)'
-          v-safe-html:a='renderMarkdown(msg.text)'
-        )
-        .c-poll-wrapper(v-else-if='isPoll(msg)')
-          poll-vote-result.c-poll-inner(:pollData='msg.pollData' :readOnly='true')
-        chat-attachment-preview(
-          v-if='hasAttachments(msg)'
-          :attachmentList='msg.attachments'
-          :isForDownload='true'
-          :variant='messageSentVariant'
-        )
-        .c-message-reactions-wrapper
-          message-reactions(
-            :emoticonsList='msg.emoticons'
-            :messageType='msg.type'
-            :currentUserID='ourIdentityContractId'
-            :readOnly='true'
-          )
-      .c-pinned-message-footer
-        span {{ humanDate(msg.datetime, { month: 'long', year: 'numeric', day: 'numeric', hour: 'numeric', minute: 'numeric' }) }}
+<template lang="pug">
+.c-pinned-messages(
+  v-if='ephemeral.isActive'
+  @click='onBackDropClick'
+  @keyup.esc='close'
+)
+  .c-pinned-messages-wrapper(:style='this.ephemeral.isDesktopScreen ? this.ephemeral.wrapperPosition : {}')
+    header.c-header
+      i18n.is-title-2.c-popup-title(tag='h2') Pinned Messages
+      modal-close.c-popup-close-btn(v-if='!ephemeral.isDesktopScreen' @close='close')
 
+    section.c-body
+      template(v-for='(msg, index) in messages')
+        .c-pinned-message(:key='msg.hash' @click='scrollToPinnedMessage(msg.hash)')
+          .c-pinned-message-header
+            .c-sender-profile
+              avatar-user(:contractID='msg.from' size='xs')
+              .c-message-sender-name.has-text-bold.has-ellipsis {{ userDisplayNameFromID(msg.from) }}
+            tooltip(:text='ephemeral.isDesktopScreen ? L("Unpin this message") : L("Unpin")')
+              i.icon-times(@click.stop='unpinMessage(msg.hash)')
+          .c-pinned-message-content
+            span.custom-markdown-content(
+              v-if='isText(msg)'
+              v-safe-html:a='renderMarkdown(msg.text)'
+            )
+            .c-poll-wrapper(v-else-if='isPoll(msg)')
+              poll-vote-result.c-poll-inner(:pollData='msg.pollData' :readOnly='true')
+            chat-attachment-preview(
+              v-if='hasAttachments(msg)'
+              :attachmentList='msg.attachments'
+              :isForDownload='true'
+              :variant='messageSentVariant'
+            )
+            .c-message-reactions-wrapper
+              message-reactions(
+                :emoticonsList='msg.emoticons'
+                :messageType='msg.type'
+                :currentUserID='ourIdentityContractId'
+                :readOnly='true'
+              )
+          .c-pinned-message-footer
+            span {{ humanDate(msg.datetime, { month: 'long', year: 'numeric', day: 'numeric', hour: 'numeric', minute: 'numeric' }) }}
 </template>
 
 <script>
 import { mapGetters } from 'vuex'
 import AvatarUser from '@components/AvatarUser.vue'
 import Tooltip from '@components/Tooltip.vue'
+import ModalClose from '@components/modal/ModalClose.vue'
 import PollVoteResult from './poll-message-content/PollVoteResult.vue'
 import ChatAttachmentPreview from './file-attachment/ChatAttachmentPreview.vue'
 import MessageReactions from './MessageReactions.vue'
 import { humanDate } from '@model/contracts/shared/time.js'
 import { MESSAGE_TYPES, MESSAGE_VARIANTS } from '@model/contracts/shared/constants.js'
 import { renderMarkdown } from '@view-utils/markdown-utils.js'
+import trapFocus from '@utils/trapFocus.js'
 
-export default ({
-  name: 'PinnedMessage',
+export default {
+  name: 'PinnedMessages',
+  mixins: [
+    trapFocus
+  ],
   components: {
     AvatarUser,
     Tooltip,
     PollVoteResult,
     ChatAttachmentPreview,
-    MessageReactions
-  },
-  props: {
-    messages: {
-      type: Array,
-      default: () => []
-    }
-  },
-  data () {
-    return {}
+    MessageReactions,
+    ModalClose
   },
   computed: {
     ...mapGetters(['userDisplayNameFromID', 'ourIdentityContractId']),
@@ -73,9 +74,52 @@ export default ({
       return MESSAGE_VARIANTS.SENT
     }
   },
+  data () {
+    return {
+      ephemeral: {
+        isActive: false,
+        isDesktopScreen: false,
+        wrapperPosition: {
+          top: 0,
+          left: 0
+        }
+      },
+      messages: []
+    }
+  },
   methods: {
     humanDate,
     renderMarkdown,
+    open (position, pinnedMessages) {
+      if (this.ephemeral.isActive) { return }
+
+      this.messages = pinnedMessages
+
+      if (position) {
+        this.ephemeral.wrapperPosition = { ...position }
+        this.$nextTick(() => { this.ephemeral.isActive = true })
+      } else {
+        this.ephemeral.isActive = true
+      }
+    },
+    close () {
+      if (this.ephemeral.isActive) {
+        this.ephemeral.isActive = false
+      }
+    },
+    onBackDropClick (e) {
+      if (e.target.matches('.c-pinned-messages')) {
+        this.close()
+      }
+    },
+    resizeHandler () {
+      if (window.matchMedia('(hover: hover)').matches) {
+        // This is a fix for the issue #1954(https://github.com/okTurtles/group-income/issues/1954)
+        // -> closes the pop-up if the viewport size changes only when it's NOT a touch device.
+        //    e.g) The viewport size changes when the keyboard tab is pulled out on the touch device.
+        this.close()
+      }
+    },
     isText (message) {
       return message.type === MESSAGE_TYPES.TEXT
     },
@@ -87,27 +131,110 @@ export default ({
     },
     unpinMessage (messageHash) {
       this.$emit('unpin-message', messageHash)
+      this.close()
     },
     scrollToPinnedMessage (messageHash) {
       this.$emit('scroll-to-pinned-message', messageHash)
+      this.close()
     }
+  },
+  created () {
+    this.matchMediaDesktop = window.matchMedia('screen and (min-width: 1200px)')
+    this.matchMediaDesktop.onchange = (e) => {
+      this.ephemeral.isDesktopScreen = e.matches
+    }
+    this.ephemeral.isDesktopScreen = this.matchMediaDesktop.matches
+
+    window.addEventListener('resize', this.resizeHandler)
+    document.addEventListener('keydown', this.trapFocus)
+  },
+  beforeDestroy () {
+    window.removeEventListener('resize', this.resizeHandler)
+    document.removeEventListener('keydown', this.trapFocus)
+
+    this.matchMediaDesktop.onchange = null
   }
-}: Object)
+}
 </script>
 
 <style lang="scss" scoped>
 @import "@assets/style/_variables.scss";
 
+.c-pinned-messages {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  overflow: hidden;
+  // NOTE: z-index should be bigger than the one of sidebar
+  //       because PinnedMessages modal is rendered before the sidebar
+  // REF:  https://github.com/okTurtles/group-income/issues/1843
+  z-index: $zindex-modal + 1;
+  pointer-events: initial;
+  height: 100%;
+}
+
 .c-pinned-messages-wrapper {
-  margin: -0.5rem;
-  padding: 0.75rem;
-  max-height: 40rem;
-  max-width: 25rem;
-  width: 25rem;
+  position: absolute;
+  pointer-events: inherit;
+  background-color: $background_0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: auto 1fr;
+  grid-template-areas: "pinned-messages-header" "pinned-messages-body";
+
+  @include desktop {
+    max-width: 25rem;
+    width: 25rem;
+    height: fit-content;
+    max-height: 70vh;
+    border-radius: 0.75rem;
+    box-shadow: 0 0 20px rgba(219, 219, 219, 0.6);
+    left: unset;
+
+    .is-dark-theme & {
+      box-shadow: 0 0 20px rgba(38, 38, 38, 0.625);
+    }
+  }
+}
+
+.c-header {
+  grid-area: pinned-messages-header;
+  position: relative;
+  height: 5.75rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  @include desktop {
+    display: none;
+  }
+
+  .c-popup-title {
+    font-size: $size_2;
+    text-align: center;
+
+    @include tablet {
+      font-size: $size_3;
+      text-align: left;
+    }
+  }
+}
+
+.c-body {
+  grid-area: pinned-messages-body;
+  position: relative;
+  padding: 0.5rem 0.5rem;
+  overflow-y: auto;
+  height: fit-content;
+  max-height: 100%;
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
-  overflow: auto;
 
   .c-pinned-message {
     padding: 0.75rem 0.75rem 0.5rem 0.75rem;
diff --git a/frontend/views/pages/GroupChat.vue b/frontend/views/pages/GroupChat.vue
index 228afbf64..56a22dd6a 100644
--- a/frontend/views/pages/GroupChat.vue
+++ b/frontend/views/pages/GroupChat.vue
@@ -36,6 +36,8 @@ page(pageTestName='groupChat' :miniHeader='isDirectMessage()')
               i18n Members
             menu-item(v-else @click='openModal("ChatMembersAllModal")' data-test='addPeople')
               i18n Add People
+            menu-item.hide-desktop(v-if='pinnedMessages.length')
+              i18n(@click='showPinnedMessages($event)') Pinned Messages
             menu-item(
               :class='`${!summary.isGeneral && !isDirectMessage() ? "c-separator" : ""}`'
               @click='openModal("ChatNotificationSettingsModal")'
@@ -82,22 +84,12 @@ page(pageTestName='groupChat' :miniHeader='isDirectMessage()')
           @click='editDescription'
         ) Add description
     .c-header-shortcuts
-      tooltip(
+      span.c-pin-wrapper(
         v-if='pinnedMessages.length'
-        ref='pinnedMessagesToolTip'
-        :manual='true'
-        :opacity='1'
-        direction='bottom-left'
+        @click='showPinnedMessages($event)'
       )
-        span.c-pin-wrapper
-          i.icon-thumbtack
-          i18n(:args='{ messagesCount: pinnedMessages.length }') {messagesCount} Pinned
-        template(slot='tooltip')
-          pinned-messages(
-            :messages='pinnedMessages'
-            @unpin-message='unpinMessage'
-            @scroll-to-pinned-message='scrollToPinnedMessage'
-          )
+        i.icon-thumbtack
+        i18n(:args='{ messagesCount: pinnedMessages.length }') {messagesCount} Pinned
 
   template(#sidebar='{ toggle }')
     chat-nav
@@ -117,6 +109,12 @@ page(pageTestName='groupChat' :miniHeader='isDirectMessage()')
 
   .card.c-card
     chat-main(ref='chatMain' :summary='summary')
+
+  pinned-messages(
+    ref='pinnedMessages'
+    @unpin-message='unpinMessage'
+    @scroll-to-pinned-message='scrollToPinnedMessage'
+  )
 </template>
 
 <script>
@@ -124,7 +122,6 @@ import sbp from '@sbp/sbp'
 import { mapGetters } from 'vuex'
 import Avatar from '@components/Avatar.vue'
 import Page from '@components/Page.vue'
-import Tooltip from '@components/Tooltip.vue'
 import ConversationsList from '@containers/chatroom/ConversationsList.vue'
 import ChatNav from '@containers/chatroom/ChatNav.vue'
 import ChatMain from '@containers/chatroom/ChatMain.vue'
@@ -143,7 +140,6 @@ export default ({
   components: {
     Avatar,
     Page,
-    Tooltip,
     ChatNav,
     ChatMain,
     ConversationsList,
@@ -204,6 +200,13 @@ export default ({
     openModal (modal, props) {
       sbp('okTurtles.events/emit', OPEN_MODAL, modal, props)
     },
+    showPinnedMessages (event) {
+      const element = event.target.parentNode.getBoundingClientRect()
+      this.$refs.pinnedMessages.open({
+        left: `${element.left - 3.2}px`, // 3.2 -> 0.2rem of description element padding
+        top: `${element.bottom + 8}px` // 8 -> 0.5rem gap
+      }, this.pinnedMessages)
+    },
     editDescription () {
       this.openModal('EditChannelDescriptionModal')
     },
@@ -211,13 +214,11 @@ export default ({
       if (this.$refs.chatMain) {
         this.$refs.chatMain.unpinFromChannel(messageHash)
       }
-      this.$refs.pinnedMessagesToolTip?.toggle()
     },
     scrollToPinnedMessage (messageHash) {
       if (this.$refs.chatMain) {
         this.$refs.chatMain.scrollToMessage(messageHash)
       }
-      this.$refs.pinnedMessagesToolTip?.toggle()
     }
   },
   watch: {
@@ -385,6 +386,8 @@ export default ({
   }
 
   .c-pin-wrapper {
+    cursor: pointer;
+
     span {
       margin-left: 0.25rem;
     }

From 57352381c98bddf0ffb3afb07b297d3203f79307 Mon Sep 17 00:00:00 2001
From: silver-it <alex.jin220@gmail.com>
Date: Mon, 27 May 2024 17:38:55 +0800
Subject: [PATCH 35/77] feat: implementING cypress test cases

---
 .../containers/chatroom/MessageActions.vue    |  2 +-
 .../containers/chatroom/PinnedMessages.vue    |  3 +-
 frontend/views/pages/GroupChat.vue            |  1 +
 .../integration/group-chat-message.spec.js    | 41 +++++++++++++++++++
 4 files changed, 45 insertions(+), 2 deletions(-)

diff --git a/frontend/views/containers/chatroom/MessageActions.vue b/frontend/views/containers/chatroom/MessageActions.vue
index e7603dbe0..7b5e4de12 100644
--- a/frontend/views/containers/chatroom/MessageActions.vue
+++ b/frontend/views/containers/chatroom/MessageActions.vue
@@ -92,7 +92,7 @@ menu-parent(ref='menu')
       menu-item.is-icon-small(
         v-if='!isAlreadyPinned && isPinnable'
         tag='button'
-        :aria-label='L("Pin")'
+        data-test='pinMessage'
         @click='action("pinToChannel")'
       )
         i.icon-thumbtack
diff --git a/frontend/views/containers/chatroom/PinnedMessages.vue b/frontend/views/containers/chatroom/PinnedMessages.vue
index 6f1e6e154..b9412ec53 100644
--- a/frontend/views/containers/chatroom/PinnedMessages.vue
+++ b/frontend/views/containers/chatroom/PinnedMessages.vue
@@ -1,6 +1,7 @@
 <template lang="pug">
 .c-pinned-messages(
   v-if='ephemeral.isActive'
+  data-test='pinnedMessages'
   @click='onBackDropClick'
   @keyup.esc='close'
 )
@@ -17,7 +18,7 @@
               avatar-user(:contractID='msg.from' size='xs')
               .c-message-sender-name.has-text-bold.has-ellipsis {{ userDisplayNameFromID(msg.from) }}
             tooltip(:text='ephemeral.isDesktopScreen ? L("Unpin this message") : L("Unpin")')
-              i.icon-times(@click.stop='unpinMessage(msg.hash)')
+              i.icon-times(data-test='unpinMessage' @click.stop='unpinMessage(msg.hash)')
           .c-pinned-message-content
             span.custom-markdown-content(
               v-if='isText(msg)'
diff --git a/frontend/views/pages/GroupChat.vue b/frontend/views/pages/GroupChat.vue
index 56a22dd6a..e575e650a 100644
--- a/frontend/views/pages/GroupChat.vue
+++ b/frontend/views/pages/GroupChat.vue
@@ -85,6 +85,7 @@ page(pageTestName='groupChat' :miniHeader='isDirectMessage()')
         ) Add description
     .c-header-shortcuts
       span.c-pin-wrapper(
+        data-test='numberOfPinnedMessages'
         v-if='pinnedMessages.length'
         @click='showPinnedMessages($event)'
       )
diff --git a/test/cypress/integration/group-chat-message.spec.js b/test/cypress/integration/group-chat-message.spec.js
index a7837389f..0ce777a51 100644
--- a/test/cypress/integration/group-chat-message.spec.js
+++ b/test/cypress/integration/group-chat-message.spec.js
@@ -45,6 +45,7 @@ describe('Send/edit/remove messages & add/remove emoticons inside group chat', (
       cy.getByDT('messageInputWrapper').within(() => {
         cy.get('textarea').clear().type(`${message}{enter}`)
       })
+      cy.get('.c-menu>.c-actions').invoke('hide')
       cy.get('.c-text').should('contain', message)
       cy.get('.c-edited').should('contain', '(edited)')
     })
@@ -60,6 +61,7 @@ describe('Send/edit/remove messages & add/remove emoticons inside group chat', (
           cy.getByDT('deleteMessage').click()
         })
       })
+      cy.get('.c-menu>.c-actions').invoke('hide')
     })
 
     cy.getByDT('modal').within(() => {
@@ -76,6 +78,27 @@ describe('Send/edit/remove messages & add/remove emoticons inside group chat', (
     })
   }
 
+  function pinMessage (nth) {
+    cy.getByDT('conversationWrapper').find(`.c-message:nth-child(${nth})`).within(() => {
+      cy.get('.c-menu>.c-actions').invoke('attr', 'style', 'display: flex').invoke('show')
+      cy.get('.c-menu').within(() => {
+        cy.getByDT('menuTrigger').click()
+        cy.getByDT('menuContent').within(() => {
+          cy.getByDT('pinMessage').click()
+        })
+      })
+      cy.get('.c-menu>.c-actions').invoke('hide')
+      cy.get('.c-pinned-wrapper').should('contain', 'Pinned by you')
+    })
+  }
+
+  function unpinMessage (nth) {
+    cy.getByDT('numberOfPinnedMessages').click()
+    cy.getByDT('pinnedMessages').find(`.c-body>.c-pinned-message:nth-child(${nth})`).within(() => {
+      cy.getByDT('unpinMessage').click()
+    })
+  }
+
   function sendEmoticon (nth, emojiCode, emojiCount) {
     const emojiWrapperSelector = '.c-picker-wrapper .emoji-mart .vue-recycle-scroller__item-wrapper .vue-recycle-scroller__item-view:first-child .emoji-mart-category'
     cy.getByDT('conversationWrapper').find(`.c-message:nth-child(${nth})`).within(() => {
@@ -264,6 +287,24 @@ describe('Send/edit/remove messages & add/remove emoticons inside group chat', (
     cy.getByDT('conversationWrapper').find('.c-message:nth-child(10)').within(() => {
       cy.get('.c-attachment-container').find('.c-attachment-preview').should('have.length', 2)
     })
+  })
+
+  it('user1 pins 3 messages and unpins 1 message', () => {
+    pinMessage(9)
+    pinMessage(8)
+    pinMessage(10)
+    cy.getByDT('numberOfPinnedMessages').should('contain', '3 Pinned')
+    unpinMessage(3)
+    cy.getByDT('numberOfPinnedMessages').should('contain', '2 Pinned')
+  })
+
+  it('pinned messages should be sorted by the created date of original messages', () => {})
+
+  it('user2 checks 2 pinned message and logout', () => {
+    switchUser(user1)
+
+    cy.giRedirectToGroupChat()
+    cy.getByDT('numberOfPinnedMessages').should('contain', '2 Pinned')
 
     cy.giLogout()
   })

From 4a834eb7902de58d09dd8b55e0e299ce486d514b Mon Sep 17 00:00:00 2001
From: silver-it <alex.jin220@gmail.com>
Date: Mon, 27 May 2024 22:00:50 +0800
Subject: [PATCH 36/77] feat: completed test cases for pinned messages

---
 .../containers/chatroom/MessageActions.vue    | 19 +++++++-------
 .../integration/group-chat-message.spec.js    | 25 ++++++++++++++++---
 2 files changed, 32 insertions(+), 12 deletions(-)

diff --git a/frontend/views/containers/chatroom/MessageActions.vue b/frontend/views/containers/chatroom/MessageActions.vue
index 7b5e4de12..338a0d693 100644
--- a/frontend/views/containers/chatroom/MessageActions.vue
+++ b/frontend/views/containers/chatroom/MessageActions.vue
@@ -18,7 +18,7 @@ menu-parent(ref='menu')
     )
       button.hide-touch.is-icon-small(
         :aria-label='L("Edit")'
-        @click='action("editMessage")'
+        @click='action("editMessage", $event)'
       )
         i.icon-pencil-alt
 
@@ -29,7 +29,7 @@ menu-parent(ref='menu')
     )
       button.hide-touch.is-icon-small(
         :aria-label='L("Reply")'
-        @click='action("reply")'
+        @click='action("reply", $event)'
       )
         i.icon-reply
 
@@ -40,7 +40,7 @@ menu-parent(ref='menu')
     )
       button.hide-touch.is-icon-small(
         :aria-label='L("Retry")'
-        @click='action("retry")'
+        @click='action("retry", $event)'
       )
         i.icon-undo
 
@@ -61,7 +61,7 @@ menu-parent(ref='menu')
       menu-item.hide-desktop.is-icon-small(
         tag='button'
         v-if='isEditable'
-        @click='action("editMessage")'
+        @click='action("editMessage", $event)'
       )
         i.icon-pencil-alt
         i18n Edit
@@ -69,7 +69,7 @@ menu-parent(ref='menu')
       menu-item.hide-desktop.is-icon-small(
         tag='button'
         v-if='isText'
-        @click='action("reply")'
+        @click='action("reply", $event)'
       )
         i.icon-reply
         i18n Reply
@@ -77,14 +77,14 @@ menu-parent(ref='menu')
       menu-item.hide-desktop.is-icon-small(
         tag='button'
         v-if='variant==="failed"'
-        @click='action("retry")'
+        @click='action("retry", $event)'
       )
         i.icon-undo
         i18n Add emoticons
 
       menu-item.is-icon-small(
         tag='button'
-        @click='action("copyMessageLink")'
+        @click='action("copyMessageLink", $event)'
       )
         i.icon-link
         i18n Copy message Link
@@ -93,7 +93,7 @@ menu-parent(ref='menu')
         v-if='!isAlreadyPinned && isPinnable'
         tag='button'
         data-test='pinMessage'
-        @click='action("pinToChannel")'
+        @click='action("pinToChannel", $event)'
       )
         i.icon-thumbtack
         i18n Pin to channel
@@ -102,7 +102,7 @@ menu-parent(ref='menu')
         tag='button'
         data-test='deleteMessage'
         v-if='isDeletable'
-        @click='action("deleteMessage")'
+        @click='action("deleteMessage", $event)'
       )
         i.icon-trash-alt
         i18n Delete message
@@ -153,6 +153,7 @@ export default ({
   },
   methods: {
     action (type, e) {
+      e.stopPropagation()
       // Change to sbp action
       this.$emit(type, e)
     }
diff --git a/test/cypress/integration/group-chat-message.spec.js b/test/cypress/integration/group-chat-message.spec.js
index 0ce777a51..f5413afca 100644
--- a/test/cypress/integration/group-chat-message.spec.js
+++ b/test/cypress/integration/group-chat-message.spec.js
@@ -275,6 +275,7 @@ describe('Send/edit/remove messages & add/remove emoticons inside group chat', (
       cy.get('.c-attachment-container').find('.c-attachment-preview:nth-child(2)').within(() => {
         cy.get('.c-attachment-actions-wrapper').invoke('attr', 'style', 'display: flex').invoke('show')
         cy.get('.c-attachment-actions span[aria-label="Delete"]').click()
+        cy.get('.c-attachment-actions-wrapper').invoke('hide')
       })
     })
 
@@ -290,15 +291,33 @@ describe('Send/edit/remove messages & add/remove emoticons inside group chat', (
   })
 
   it('user1 pins 3 messages and unpins 1 message', () => {
-    pinMessage(9)
+    pinMessage(11)
     pinMessage(8)
     pinMessage(10)
     cy.getByDT('numberOfPinnedMessages').should('contain', '3 Pinned')
-    unpinMessage(3)
+    unpinMessage(1)
     cy.getByDT('numberOfPinnedMessages').should('contain', '2 Pinned')
   })
 
-  it('pinned messages should be sorted by the created date of original messages', () => {})
+  it('pinned messages should be sorted by the created date of original messages', () => {
+    cy.getByDT('numberOfPinnedMessages').click()
+    cy.getByDT('pinnedMessages').within(() => {
+      cy.get('.c-body>.c-pinned-message:first-child .c-pinned-message-content')
+        .should('contain', 'Sending three profile pictures which are designed by Apple. Cute, right?')
+      cy.get('.c-body>.c-pinned-message:last-child .c-pinned-message-content')
+        .should('contain', 'Hi @all. Hope you are doing well.')
+    })
+  })
+
+  it('user1 clicks the first pinned message to highlight the original message', () => {
+    cy.getByDT('pinnedMessages').within(() => {
+      cy.get('.c-body>.c-pinned-message:first-child').click()
+    })
+
+    cy.getByDT('conversationWrapper').within(() => {
+      cy.get('.c-message:nth-child(10)').should('have.class', 'c-focused')
+    })
+  })
 
   it('user2 checks 2 pinned message and logout', () => {
     switchUser(user1)

From 7c5e687615b2ecc8a9fcd98c698633be34beb816 Mon Sep 17 00:00:00 2001
From: silver-it <alex.jin220@gmail.com>
Date: Tue, 28 May 2024 07:47:15 +0800
Subject: [PATCH 37/77] feat: add confirm dialog when unpin message

---
 .../views/containers/chatroom/ChatMain.vue    | 26 ++++++++++++++-----
 .../containers/chatroom/PinnedMessages.vue    | 10 +++++--
 .../integration/group-chat-message.spec.js    |  5 ++++
 3 files changed, 32 insertions(+), 9 deletions(-)

diff --git a/frontend/views/containers/chatroom/ChatMain.vue b/frontend/views/containers/chatroom/ChatMain.vue
index 672ebb3fa..776b33f19 100644
--- a/frontend/views/containers/chatroom/ChatMain.vue
+++ b/frontend/views/containers/chatroom/ChatMain.vue
@@ -637,14 +637,26 @@ export default ({
         console.error(`Error while pinning message(${message.hash}) in chatroom(${contractID})`, e)
       })
     },
-    unpinFromChannel (hash) {
+    async unpinFromChannel (hash) {
       const contractID = this.renderingChatRoomId
-      sbp('gi.actions/chatroom/unpinMessage', {
-        contractID,
-        data: { hash }
-      }).catch((e) => {
-        console.error(`Error while un-pinning message(${hash}) in chatroom(${contractID})`, e)
-      })
+
+      const promptConfig = {
+        heading: L('Remove pinned message'),
+        question: L('Are you sure you want to remove this pinned message?'),
+        primaryButton: L('Yes'),
+        secondaryButton: L('Cancel')
+      }
+
+      const primaryButtonSelected = await sbp('gi.ui/prompt', promptConfig)
+
+      if (primaryButtonSelected) {
+        sbp('gi.actions/chatroom/unpinMessage', {
+          contractID,
+          data: { hash }
+        }).catch((e) => {
+          console.error(`Error while un-pinning message(${hash}) in chatroom(${contractID})`, e)
+        })
+      }
     },
     async deleteMessage (message) {
       const contractID = this.renderingChatRoomId
diff --git a/frontend/views/containers/chatroom/PinnedMessages.vue b/frontend/views/containers/chatroom/PinnedMessages.vue
index b9412ec53..55d7f73df 100644
--- a/frontend/views/containers/chatroom/PinnedMessages.vue
+++ b/frontend/views/containers/chatroom/PinnedMessages.vue
@@ -18,7 +18,8 @@
               avatar-user(:contractID='msg.from' size='xs')
               .c-message-sender-name.has-text-bold.has-ellipsis {{ userDisplayNameFromID(msg.from) }}
             tooltip(:text='ephemeral.isDesktopScreen ? L("Unpin this message") : L("Unpin")')
-              i.icon-times(data-test='unpinMessage' @click.stop='unpinMessage(msg.hash)')
+              span.c-unpin-button(data-test='unpinMessage' @click.stop='unpinMessage(msg.hash)')
+                i.icon-times
           .c-pinned-message-content
             span.custom-markdown-content(
               v-if='isText(msg)'
@@ -260,7 +261,12 @@ export default {
         }
       }
 
-      i.icon-times {
+      .c-unpin-button {
+        width: 1.5rem;
+        height: 1.5rem;
+        display: flex;
+        justify-content: center;
+        align-items: center;
         margin-right: 0.25rem;
       }
     }
diff --git a/test/cypress/integration/group-chat-message.spec.js b/test/cypress/integration/group-chat-message.spec.js
index f5413afca..0d403415d 100644
--- a/test/cypress/integration/group-chat-message.spec.js
+++ b/test/cypress/integration/group-chat-message.spec.js
@@ -97,6 +97,11 @@ describe('Send/edit/remove messages & add/remove emoticons inside group chat', (
     cy.getByDT('pinnedMessages').find(`.c-body>.c-pinned-message:nth-child(${nth})`).within(() => {
       cy.getByDT('unpinMessage').click()
     })
+
+    cy.getByDT('modal').within(() => {
+      cy.getByDT('modal-header-title').should('contain', 'Remove pinned message')
+      cy.getByDT('submitPrompt').click()
+    })
   }
 
   function sendEmoticon (nth, emojiCode, emojiCount) {

From b18ca8c00dcc40e3e34ad7cbc61a86134dece004 Mon Sep 17 00:00:00 2001
From: silver-it <alex.jin220@gmail.com>
Date: Tue, 28 May 2024 10:14:18 +0800
Subject: [PATCH 38/77] feat: handle mentions in pinned messages

---
 .../containers/chatroom/PinnedMessages.vue    | 45 +++++++++++++++++--
 1 file changed, 42 insertions(+), 3 deletions(-)

diff --git a/frontend/views/containers/chatroom/PinnedMessages.vue b/frontend/views/containers/chatroom/PinnedMessages.vue
index 55d7f73df..09d8550fa 100644
--- a/frontend/views/containers/chatroom/PinnedMessages.vue
+++ b/frontend/views/containers/chatroom/PinnedMessages.vue
@@ -23,7 +23,7 @@
           .c-pinned-message-content
             span.custom-markdown-content(
               v-if='isText(msg)'
-              v-safe-html:a='renderMarkdown(msg.text)'
+              v-safe-html:a='renderTextMessage(msg.text)'
             )
             .c-poll-wrapper(v-else-if='isPoll(msg)')
               poll-vote-result.c-poll-inner(:pollData='msg.pollData' :readOnly='true')
@@ -53,9 +53,15 @@ import PollVoteResult from './poll-message-content/PollVoteResult.vue'
 import ChatAttachmentPreview from './file-attachment/ChatAttachmentPreview.vue'
 import MessageReactions from './MessageReactions.vue'
 import { humanDate } from '@model/contracts/shared/time.js'
-import { MESSAGE_TYPES, MESSAGE_VARIANTS } from '@model/contracts/shared/constants.js'
+import {
+  MESSAGE_TYPES,
+  MESSAGE_VARIANTS,
+  CHATROOM_MEMBER_MENTION_SPECIAL_CHAR,
+  CHATROOM_CHANNEL_MENTION_SPECIAL_CHAR
+} from '@model/contracts/shared/constants.js'
 import { renderMarkdown } from '@view-utils/markdown-utils.js'
 import trapFocus from '@utils/trapFocus.js'
+import { makeMentionFromUserID, makeChannelMention } from '@model/contracts/shared/functions.js'
 
 export default {
   name: 'PinnedMessages',
@@ -71,7 +77,19 @@ export default {
     ModalClose
   },
   computed: {
-    ...mapGetters(['userDisplayNameFromID', 'ourIdentityContractId']),
+    ...mapGetters([
+      'userDisplayNameFromID',
+      'ourIdentityContractId',
+      'ourContactProfilesById',
+      'chatRoomsInDetail',
+      'usernameFromID'
+    ]),
+    possibleMentions () {
+      return [
+        ...Object.keys(this.ourContactProfilesById).map(u => makeMentionFromUserID(u).me).filter(v => !!v),
+        ...Object.values(this.chatRoomsInDetail).map(details => makeChannelMention(details.id))
+      ]
+    },
     messageSentVariant () {
       return MESSAGE_VARIANTS.SENT
     }
@@ -92,6 +110,27 @@ export default {
   methods: {
     humanDate,
     renderMarkdown,
+    renderTextMessage (text) {
+      // TODO: Update this after PR #2016 is merged
+      const replaceChannelMention = (text) => {
+        const chatRoomID = text.slice(1)
+        const found = Object.values(this.chatRoomsInDetail).find(details => details.id === chatRoomID)
+        return found ? `#${found.name}` : text
+      }
+      const mentionReplacedText = text.split(new RegExp(`(?<=\\s|^)(${this.possibleMentions.join('|')})(?=[^\\w\\d]|$)`))
+        .map(t => {
+          if (this.possibleMentions.includes(t)) {
+            if (t.startsWith(CHATROOM_MEMBER_MENTION_SPECIAL_CHAR)) {
+              return CHATROOM_MEMBER_MENTION_SPECIAL_CHAR + this.usernameFromID(t.slice(1))
+            } else if (t.startsWith(CHATROOM_CHANNEL_MENTION_SPECIAL_CHAR)) {
+              return replaceChannelMention(t)
+            }
+          }
+          return t
+        }).join('')
+
+      return renderMarkdown(mentionReplacedText)
+    },
     open (position, pinnedMessages) {
       if (this.ephemeral.isActive) { return }
 

From d920f7f8b796c7241d0a90bdccb29661b31161bd Mon Sep 17 00:00:00 2001
From: silver-it <alex.jin220@gmail.com>
Date: Sat, 20 Apr 2024 06:15:15 +0800
Subject: [PATCH 39/77] chore: do not open new tab when user is signed in

---
 frontend/common/translations.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/common/translations.js b/frontend/common/translations.js
index 79cb55964..b7bccc9ac 100644
--- a/frontend/common/translations.js
+++ b/frontend/common/translations.js
@@ -133,13 +133,14 @@ export default function L (
 
 export function LError (error: Error): {|reportError: any|} {
   let url = `/app/dashboard?modal=UserSettingsModal&tab=application-logs&errorMsg=${encodeURI(error.message)}`
+  const target = !sbp('state/vuex/state').loggedIn ? 'target="_blank"' : ''
   if (!sbp('state/vuex/state').loggedIn) {
     url = 'https://github.com/okTurtles/group-income/issues'
   }
   return {
     reportError: L('"{errorMsg}". You can {a_}report the error{_a}.', {
       errorMsg: error.message,
-      'a_': `<a class="link" target="_blank" href="${url}">`,
+      'a_': `<a class="link" ${target} href="${url}">`,
       '_a': '</a>'
     })
   }

From 7c68517e459252d88570133e19a1e4ad88285eae Mon Sep 17 00:00:00 2001
From: silver-it <alex.jin220@gmail.com>
Date: Sat, 1 Jun 2024 07:54:55 +0800
Subject: [PATCH 40/77] chore: improved style removing margin

---
 frontend/views/containers/chatroom/PinnedMessages.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/frontend/views/containers/chatroom/PinnedMessages.vue b/frontend/views/containers/chatroom/PinnedMessages.vue
index 09d8550fa..66577c684 100644
--- a/frontend/views/containers/chatroom/PinnedMessages.vue
+++ b/frontend/views/containers/chatroom/PinnedMessages.vue
@@ -306,7 +306,6 @@ export default {
         display: flex;
         justify-content: center;
         align-items: center;
-        margin-right: 0.25rem;
       }
     }
 

From d2ead74883bb4bff7dd4fa5c9d99967d67f982f6 Mon Sep 17 00:00:00 2001
From: silver-it <alex.jin220@gmail.com>
Date: Wed, 5 Jun 2024 08:55:56 +0800
Subject: [PATCH 41/77] fix: error in passing params

---
 frontend/views/containers/chatroom/MessageActions.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/views/containers/chatroom/MessageActions.vue b/frontend/views/containers/chatroom/MessageActions.vue
index 2ca792cdf..1b06358d7 100644
--- a/frontend/views/containers/chatroom/MessageActions.vue
+++ b/frontend/views/containers/chatroom/MessageActions.vue
@@ -85,7 +85,7 @@ menu-parent(ref='menu')
       menu-item.is-icon-small(
         v-if='isText'
         tag='button'
-        @click='action("copyMessageText")'
+        @click='action("copyMessageText", $event)'
       )
         i.icon-copy
         i18n Copy message text

From f34b94b94e6e14b958c362d9461ebf74fe642e15 Mon Sep 17 00:00:00 2001
From: silver-it <alex.jin220@gmail.com>
Date: Wed, 5 Jun 2024 09:18:33 +0800
Subject: [PATCH 42/77] fix: update pinnedMessages when the original messages
 are edited

---
 frontend/model/contracts/chatroom.js | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/frontend/model/contracts/chatroom.js b/frontend/model/contracts/chatroom.js
index ec4050d3a..d6bfdeae4 100644
--- a/frontend/model/contracts/chatroom.js
+++ b/frontend/model/contracts/chatroom.js
@@ -471,10 +471,14 @@ sbp('chelonia/defineContract', {
       })),
       process ({ data, meta, innerSigningContractID }, { state }) {
         const { hash, text } = data
+        const fnEditMessage = (message) => {
+          Vue.set(message, 'text', text)
+          Vue.set(message, 'updatedDate', meta.createdDate)
+        }
+
         const msgIndex = findMessageIdx(hash, state.messages)
         if (msgIndex >= 0 && innerSigningContractID === state.messages[msgIndex].from) {
-          state.messages[msgIndex].text = text
-          state.messages[msgIndex].updatedDate = meta.createdDate
+          fnEditMessage(state.messages[msgIndex])
           if (state.renderingContext && state.messages[msgIndex].pending) {
             // NOTE: 'pending' message attribute is not the original message attribute
             //       and it is only set and used in Chat page
@@ -484,7 +488,7 @@ sbp('chelonia/defineContract', {
 
         const pinnedMsgIndex = findMessageIdx(hash, state.pinnedMessages)
         if (pinnedMsgIndex >= 0) {
-          state.pinnedMessages[pinnedMsgIndex].text = text
+          fnEditMessage(state.pinnedMessages[pinnedMsgIndex])
         }
       },
       sideEffect ({ contractID, hash, meta, data, innerSigningContractID }, { getters }) {

From d144286146a8d668e832aae39076f78b5b620382 Mon Sep 17 00:00:00 2001
From: silver-it <alex.jin220@gmail.com>
Date: Wed, 5 Jun 2024 09:22:29 +0800
Subject: [PATCH 43/77] feat: implement markdown and all mentions inside pinned
 messages

---
 frontend/views/containers/chatroom/PinnedMessages.vue | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/frontend/views/containers/chatroom/PinnedMessages.vue b/frontend/views/containers/chatroom/PinnedMessages.vue
index 66577c684..1faf7b5b2 100644
--- a/frontend/views/containers/chatroom/PinnedMessages.vue
+++ b/frontend/views/containers/chatroom/PinnedMessages.vue
@@ -21,10 +21,7 @@
               span.c-unpin-button(data-test='unpinMessage' @click.stop='unpinMessage(msg.hash)')
                 i.icon-times
           .c-pinned-message-content
-            span.custom-markdown-content(
-              v-if='isText(msg)'
-              v-safe-html:a='renderTextMessage(msg.text)'
-            )
+            render-message-with-markdown.c-text(v-if='isText(msg)' :text='msg.text' :edited='!!msg.updatedDate')
             .c-poll-wrapper(v-else-if='isPoll(msg)')
               poll-vote-result.c-poll-inner(:pollData='msg.pollData' :readOnly='true')
             chat-attachment-preview(
@@ -52,6 +49,7 @@ import ModalClose from '@components/modal/ModalClose.vue'
 import PollVoteResult from './poll-message-content/PollVoteResult.vue'
 import ChatAttachmentPreview from './file-attachment/ChatAttachmentPreview.vue'
 import MessageReactions from './MessageReactions.vue'
+import RenderMessageWithMarkdown from './chat-mentions/RenderMessageWithMarkdown.js'
 import { humanDate } from '@model/contracts/shared/time.js'
 import {
   MESSAGE_TYPES,
@@ -74,6 +72,7 @@ export default {
     PollVoteResult,
     ChatAttachmentPreview,
     MessageReactions,
+    RenderMessageWithMarkdown,
     ModalClose
   },
   computed: {

From 172db19203003bcc7bf5bf70397874a45eda5fe8 Mon Sep 17 00:00:00 2001
From: silver-it <alex.jin220@gmail.com>
Date: Tue, 11 Jun 2024 08:58:15 +0800
Subject: [PATCH 44/77] chore: remove useless args in chatroom contract
 functions and Travis retry

---
 frontend/model/contracts/chatroom.js | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/frontend/model/contracts/chatroom.js b/frontend/model/contracts/chatroom.js
index 2edca1524..412c29ee8 100644
--- a/frontend/model/contracts/chatroom.js
+++ b/frontend/model/contracts/chatroom.js
@@ -439,7 +439,7 @@ sbp('chelonia/defineContract', {
           fnEditMessage(state.pinnedMessages[pinnedMsgIndex])
         }
       },
-      sideEffect ({ contractID, hash, meta, data, innerSigningContractID }, { getters }) {
+      sideEffect ({ contractID, data, innerSigningContractID }, { getters }) {
         const rootState = sbp('state/vuex/state')
         const me = rootState.loggedIn.identityContractID
         if (me === innerSigningContractID || getters.chatRoomAttributes.type === CHATROOM_TYPES.DIRECT_MESSAGE) {
@@ -474,7 +474,7 @@ sbp('chelonia/defineContract', {
       }
     },
     'gi.contracts/chatroom/deleteMessage': {
-      validate: actionRequireInnerSignature((data, { state, meta, message: { innerSigningContractID }, contractID }) => {
+      validate: actionRequireInnerSignature((data, { state, message: { innerSigningContractID }, contractID }) => {
         objectOf({
           hash: string,
           // NOTE: manifestCids of the attachments which belong to the message
@@ -494,7 +494,7 @@ sbp('chelonia/defineContract', {
           }
         }
       }),
-      process ({ data, meta, innerSigningContractID }, { state }) {
+      process ({ data, innerSigningContractID }, { state }) {
         const { hash } = data
         const msgIndex = findMessageIdx(hash, state.messages)
         if (msgIndex >= 0) {
@@ -515,7 +515,7 @@ sbp('chelonia/defineContract', {
           state.pinnedMessages.splice(pinnedMsgIndex, 1)
         }
       },
-      sideEffect ({ data, contractID, hash, meta, innerSigningContractID }) {
+      sideEffect ({ data, contractID, innerSigningContractID }) {
         const rootState = sbp('state/vuex/state')
         const me = rootState.loggedIn.identityContractID
 
@@ -550,7 +550,7 @@ sbp('chelonia/defineContract', {
         manifestCid: string,
         messageSender: string
       })),
-      process ({ data, innerSigningContractID }, { state }) {
+      process ({ data }, { state }) {
         const { hash, manifestCid } = data
         const fnDeleteAttachment = (message) => {
           const oldAttachments = message.attachments
@@ -571,7 +571,7 @@ sbp('chelonia/defineContract', {
           fnDeleteAttachment(state.pinnedMessages[pinnedMsgIndex])
         }
       },
-      sideEffect ({ data, contractID, hash, meta, innerSigningContractID }) {
+      sideEffect ({ data, contractID, innerSigningContractID }) {
         const me = sbp('state/vuex/state').loggedIn.identityContractID
         const option = {
           shouldDeleteFile: me === innerSigningContractID,

From f01b309ad7d5f940098fe81e10ffe57b6de56e08 Mon Sep 17 00:00:00 2001
From: silver-it <alex.jin220@gmail.com>
Date: Tue, 11 Jun 2024 09:04:18 +0800
Subject: [PATCH 45/77] chore: removed useless args and Travis retry

---
 frontend/model/contracts/group.js    | 32 ++++++++++++++--------------
 frontend/model/contracts/identity.js | 20 ++++++++---------
 2 files changed, 26 insertions(+), 26 deletions(-)

diff --git a/frontend/model/contracts/group.js b/frontend/model/contracts/group.js
index f4ac05065..52bb2d038 100644
--- a/frontend/model/contracts/group.js
+++ b/frontend/model/contracts/group.js
@@ -882,7 +882,7 @@ sbp('chelonia/defineContract', {
       }
     },
     'gi.contracts/group/proposal': {
-      validate: actionRequireActiveMember((data, { state, meta }) => {
+      validate: actionRequireActiveMember((data, { state }) => {
         objectOf({
           proposalType: proposalType,
           proposalData: object, // data for Vue widgets
@@ -1025,14 +1025,14 @@ sbp('chelonia/defineContract', {
     },
     'gi.contracts/group/notifyExpiringProposals': {
       validate: actionRequireActiveMember(arrayOf(string)),
-      process ({ data, meta, contractID }, { state }) {
+      process ({ data }, { state }) {
         for (const proposalId of data) {
           Vue.set(state.proposals[proposalId], 'notifiedBeforeExpire', true)
         }
       }
     },
     'gi.contracts/group/removeMember': {
-      validate: actionRequireActiveMember((data, { state, getters, meta, message: { innerSigningContractID, proposalHash } }) => {
+      validate: actionRequireActiveMember((data, { state, getters, message: { innerSigningContractID, proposalHash } }) => {
         objectOf({
           memberID: optional(string), // member to remove
           reason: optional(string),
@@ -1090,7 +1090,7 @@ sbp('chelonia/defineContract', {
     },
     'gi.contracts/group/invite': {
       validate: actionRequireActiveMember(inviteType),
-      process ({ data, meta }, { state }) {
+      process ({ data }, { state }) {
         Vue.set(state.invites, data.inviteKeyId, data)
       }
     },
@@ -1110,7 +1110,7 @@ sbp('chelonia/defineContract', {
       // They MUST NOT call 'commit'!
       // They should only coordinate the actions of outside contracts.
       // Otherwise `latestContractState` and `handleEvent` will not produce same state!
-      sideEffect ({ meta, contractID, height, innerSigningContractID }, { state }) {
+      sideEffect ({ meta, contractID, height, innerSigningContractID }) {
         const { loggedIn } = sbp('state/vuex/state')
 
         sbp('chelonia/queueInvocation', contractID, async () => {
@@ -1213,7 +1213,7 @@ sbp('chelonia/defineContract', {
       }
     },
     'gi.contracts/group/inviteRevoke': {
-      validate: actionRequireActiveMember((data, { state, meta }) => {
+      validate: actionRequireActiveMember((data, { state }) => {
         objectOf({
           inviteKeyId: string
         })(data)
@@ -1330,7 +1330,7 @@ sbp('chelonia/defineContract', {
         ruleThreshold: number,
         expires_ms: number
       })),
-      process ({ data, meta }, { state }) {
+      process ({ data }, { state }) {
         // Update all types of proposal settings for simplicity
         if (data.ruleName && data.ruleThreshold) {
           for (const proposalSettings in state.settings.proposals) {
@@ -1369,7 +1369,7 @@ sbp('chelonia/defineContract', {
           }
         }
       },
-      process ({ data, meta, contractID, innerSigningContractID }, { state }) {
+      process ({ data, contractID, innerSigningContractID }, { state }) {
         const { name, type, privacyLevel, description } = data.attributes
         // XOR: has(innerSigningContractID) XOR #General
         if (!!innerSigningContractID === (data.attributes.name === CHATROOM_GENERAL_NAME)) {
@@ -1399,14 +1399,14 @@ sbp('chelonia/defineContract', {
       }
     },
     'gi.contracts/group/deleteChatRoom': {
-      validate: actionRequireActiveMember((data, { getters, meta, message: { innerSigningContractID } }) => {
+      validate: actionRequireActiveMember((data, { getters, message: { innerSigningContractID } }) => {
         objectOf({ chatRoomID: string })(data)
 
         if (getters.groupChatRooms[data.chatRoomID].creatorID !== innerSigningContractID) {
           throw new TypeError(L('Only the channel creator can delete channel.'))
         }
       }),
-      process ({ data, meta }, { state }) {
+      process ({ data }, { state }) {
         Vue.delete(state.chatRooms, data.chatRoomID)
       }
     },
@@ -1425,7 +1425,7 @@ sbp('chelonia/defineContract', {
         }
         removeGroupChatroomProfile(state, data.chatRoomID, memberID)
       },
-      sideEffect ({ meta, data, contractID, innerSigningContractID }, { state }) {
+      sideEffect ({ data, contractID, innerSigningContractID }, { state }) {
         const rootState = sbp('state/vuex/state')
         const memberID = data.memberID || innerSigningContractID
         if (innerSigningContractID === rootState.loggedIn.identityContractID) {
@@ -1445,7 +1445,7 @@ sbp('chelonia/defineContract', {
         memberID: optional(string),
         chatRoomID: string
       })),
-      process ({ data, meta, innerSigningContractID }, { state }) {
+      process ({ data, innerSigningContractID }, { state }) {
         const memberID = data.memberID || innerSigningContractID
         const { chatRoomID } = data
 
@@ -1471,7 +1471,7 @@ sbp('chelonia/defineContract', {
         // a part of.
         Vue.set(state.chatRooms[chatRoomID].members, memberID, { status: PROFILE_STATUS.ACTIVE })
       },
-      sideEffect ({ meta, data, contractID, innerSigningContractID }, { state }) {
+      sideEffect ({ data, contractID, innerSigningContractID }) {
         const rootState = sbp('state/vuex/state')
         const memberID = data.memberID || innerSigningContractID
 
@@ -1514,7 +1514,7 @@ sbp('chelonia/defineContract', {
         chatRoomID: string,
         name: string
       })),
-      process ({ data, meta }, { state, getters }) {
+      process ({ data }, { state }) {
         Vue.set(state.chatRooms[data.chatRoomID], 'name', data.name)
       }
     },
@@ -1523,7 +1523,7 @@ sbp('chelonia/defineContract', {
         chatRoomID: string,
         description: string
       })),
-      process ({ data, meta }, { state, getters }) {
+      process ({ data }, { state }) {
         Vue.set(state.chatRooms[data.chatRoomID], 'description', data.description)
       }
     },
@@ -1542,7 +1542,7 @@ sbp('chelonia/defineContract', {
     ...((process.env.NODE_ENV === 'development' || process.env.CI) && {
       'gi.contracts/group/forceDistributionDate': {
         validate: optional,
-        process ({ meta, contractID }, { state, getters }) {
+        process ({ meta }, { getters }) {
           getters.groupSettings.distributionDate = dateToPeriodStamp(meta.createdDate)
         }
       },
diff --git a/frontend/model/contracts/identity.js b/frontend/model/contracts/identity.js
index c6483cf2e..a8a366b4e 100644
--- a/frontend/model/contracts/identity.js
+++ b/frontend/model/contracts/identity.js
@@ -87,7 +87,7 @@ sbp('chelonia/defineContract', {
   },
   actions: {
     'gi.contracts/identity': {
-      validate: (data, { state }) => {
+      validate: (data) => {
         objectMaybeOf({
           attributes: attributesType
         })(data)
@@ -153,7 +153,7 @@ sbp('chelonia/defineContract', {
       }
     },
     'gi.contracts/identity/createDirectMessage': {
-      validate: (data, { state, getters }) => {
+      validate: (data) => {
         objectOf({
           contractID: string // NOTE: chatroom contract id
         })(data)
@@ -164,7 +164,7 @@ sbp('chelonia/defineContract', {
           visible: true // NOTE: this attr is used to hide/show direct message
         })
       },
-      sideEffect ({ contractID, data }) {
+      sideEffect ({ data }) {
         sbp('chelonia/contract/retain', data.contractID).catch((e) => {
           console.error('[gi.contracts/identity/createDirectMessage/sideEffect] Error calling retain', e)
         })
@@ -199,7 +199,7 @@ sbp('chelonia/defineContract', {
         inviteSecret: string,
         creatorID: optional(boolean)
       }),
-      process ({ hash, data, meta }, { state }) {
+      process ({ hash, data }, { state }) {
         const { groupContractID, inviteSecret } = data
         if (has(state.groups, groupContractID)) {
           throw new Error(`Cannot join already joined group ${groupContractID}`)
@@ -275,7 +275,7 @@ sbp('chelonia/defineContract', {
       validate: objectOf({
         groupContractID: string
       }),
-      process ({ data, meta }, { state }) {
+      process ({ data }, { state }) {
         const { groupContractID } = data
 
         if (!has(state.groups, groupContractID)) {
@@ -284,7 +284,7 @@ sbp('chelonia/defineContract', {
 
         Vue.delete(state.groups, groupContractID)
       },
-      sideEffect ({ meta, data, contractID, innerSigningContractID }, { state }) {
+      sideEffect ({ data, contractID, innerSigningContractID }, { state }) {
         sbp('chelonia/queueInvocation', contractID, () => {
           const rootState = sbp('state/vuex/state')
           const state = rootState[contractID]
@@ -352,7 +352,7 @@ sbp('chelonia/defineContract', {
       }
     },
     'gi.contracts/identity/setDirectMessageVisibility': {
-      validate: (data, { state, getters }) => {
+      validate: (data, { getters }) => {
         objectOf({
           contractID: string,
           visible: boolean
@@ -361,7 +361,7 @@ sbp('chelonia/defineContract', {
           throw new TypeError(L('Not existing direct message.'))
         }
       },
-      process ({ data }, { state, getters }) {
+      process ({ data }, { state }) {
         Vue.set(state.chatRooms[data.contractID], 'visible', data.visible)
       }
     },
@@ -372,7 +372,7 @@ sbp('chelonia/defineContract', {
           token: string
         }))
       }),
-      process ({ data }, { state, getters }) {
+      process ({ data }, { state }) {
         for (const { manifestCid, token } of data.tokensByManifestCid) {
           Vue.set(state.fileDeleteTokens, manifestCid, token)
         }
@@ -382,7 +382,7 @@ sbp('chelonia/defineContract', {
       validate: objectOf({
         manifestCids: arrayOf(string)
       }),
-      process ({ data }, { state, getters }) {
+      process ({ data }, { state }) {
         for (const manifestCid of data.manifestCids) {
           Vue.delete(state.fileDeleteTokens, manifestCid)
         }

From ad9b4bef78bfcf1c71045bb323129801bbf67a72 Mon Sep 17 00:00:00 2001
From: silver-it <alex.jin220@gmail.com>
Date: Tue, 11 Jun 2024 11:44:52 +0800
Subject: [PATCH 46/77] chore: removed useless args

---
 frontend/model/contracts/identity.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/model/contracts/identity.js b/frontend/model/contracts/identity.js
index a8a366b4e..f7bcd27dc 100644
--- a/frontend/model/contracts/identity.js
+++ b/frontend/model/contracts/identity.js
@@ -284,7 +284,7 @@ sbp('chelonia/defineContract', {
 
         Vue.delete(state.groups, groupContractID)
       },
-      sideEffect ({ data, contractID, innerSigningContractID }, { state }) {
+      sideEffect ({ data, contractID }) {
         sbp('chelonia/queueInvocation', contractID, () => {
           const rootState = sbp('state/vuex/state')
           const state = rootState[contractID]

From 9efac8c279c39ba179b4fd6011b6e0bf88a6b1b8 Mon Sep 17 00:00:00 2001
From: silver-it <alex.jin220@gmail.com>
Date: Tue, 11 Jun 2024 12:40:15 +0800
Subject: [PATCH 47/77] fix: cypress error

---
 test/cypress/integration/group-chat-message.spec.js   | 2 ++
 test/cypress/integration/group-chat-scrolling.spec.js | 3 ++-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/test/cypress/integration/group-chat-message.spec.js b/test/cypress/integration/group-chat-message.spec.js
index 7229c383d..dd590deb5 100644
--- a/test/cypress/integration/group-chat-message.spec.js
+++ b/test/cypress/integration/group-chat-message.spec.js
@@ -252,11 +252,13 @@ describe('Send/edit/remove messages & add/remove emoticons inside group chat', (
     switchUser(user2)
     cy.getByDT('groupChatLink').get('.c-badge.is-compact[aria-label="1 new notifications"]').contains('1')
     cy.giRedirectToGroupChat()
+    cy.getByDT('conversationWrapper').scrollTo('bottom')
     cy.get('[data-test="groupChatLink"] .c-badge.is-compact').should('not.exist')
 
     switchUser(user1)
     cy.getByDT('groupChatLink').get('.c-badge.is-compact[aria-label="2 new notifications"]').contains('2')
     cy.giRedirectToGroupChat()
+    cy.getByDT('conversationWrapper').scrollTo('bottom')
     cy.get('[data-test="groupChatLink"] .c-badge.is-compact').should('not.exist')
   })
 
diff --git a/test/cypress/integration/group-chat-scrolling.spec.js b/test/cypress/integration/group-chat-scrolling.spec.js
index 58b854b08..27d910ce5 100644
--- a/test/cypress/integration/group-chat-scrolling.spec.js
+++ b/test/cypress/integration/group-chat-scrolling.spec.js
@@ -153,7 +153,8 @@ describe('Send/edit/remove messages & add/remove emoticons inside group chat', (
     switchUser(user1)
     cy.giRedirectToGroupChat()
 
-    cy.getByDT('conversationWrapper').scrollTo(0)
+    cy.getByDT('conversationWrapper').scrollTo('top')
+    cy.giWaitUntilMessagesLoaded()
 
     cy.getByDT('conversationWrapper').within(() => {
       cy.get('.c-message:nth-child(2) .c-who > span:first-child').should('contain', user1)

From 8b027eecfaff119587cf3d229325c79f9fc29890 Mon Sep 17 00:00:00 2001
From: silver-it <alex.jin220@gmail.com>
Date: Tue, 11 Jun 2024 17:19:08 +0800
Subject: [PATCH 48/77] fix: errors from cypress and initializing new chatroom
 state in ChatMain

---
 .../views/containers/chatroom/ChatMain.vue     |  1 +
 .../integration/group-chat-message.spec.js     | 18 ++++++++++--------
 2 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/frontend/views/containers/chatroom/ChatMain.vue b/frontend/views/containers/chatroom/ChatMain.vue
index 2d8888f4f..499feb6d9 100644
--- a/frontend/views/containers/chatroom/ChatMain.vue
+++ b/frontend/views/containers/chatroom/ChatMain.vue
@@ -734,6 +734,7 @@ export default ({
         members: state.members || {},
         _vm: state._vm,
         messages: shouldClearMessages ? [] : state.messages,
+        pinnedMessages: [], // NOTE: We don't use this pinnedMessages, but initialize so that the process functions won't break
         renderingContext: true // NOTE: DO NOT RENAME THIS OR CHATROOM WOULD BREAK
       }
     },
diff --git a/test/cypress/integration/group-chat-message.spec.js b/test/cypress/integration/group-chat-message.spec.js
index dd590deb5..42cb17bae 100644
--- a/test/cypress/integration/group-chat-message.spec.js
+++ b/test/cypress/integration/group-chat-message.spec.js
@@ -248,17 +248,19 @@ describe('Send/edit/remove messages & add/remove emoticons inside group chat', (
     sendMessage(`I am a friend of ${makeMentionFromUsername(user1).me}. Let's work together.`)
   })
 
-  it('user2 and user1 check mentions for themselves', () => {
+  it('user2 checks a mention for himself', () => {
     switchUser(user2)
     cy.getByDT('groupChatLink').get('.c-badge.is-compact[aria-label="1 new notifications"]').contains('1')
     cy.giRedirectToGroupChat()
-    cy.getByDT('conversationWrapper').scrollTo('bottom')
+    sendMessage('Welcome!')
     cy.get('[data-test="groupChatLink"] .c-badge.is-compact').should('not.exist')
+  })
 
+  it('user1 checks two mentions for himself', () => {
     switchUser(user1)
     cy.getByDT('groupChatLink').get('.c-badge.is-compact[aria-label="2 new notifications"]').contains('2')
     cy.giRedirectToGroupChat()
-    cy.getByDT('conversationWrapper').scrollTo('bottom')
+    sendMessage(`Hi ${makeMentionFromUsername(user3).me}. Nice to see you here.`)
     cy.get('[data-test="groupChatLink"] .c-badge.is-compact').should('not.exist')
   })
 
@@ -274,7 +276,7 @@ describe('Send/edit/remove messages & add/remove emoticons inside group chat', (
     cy.getByDT('attachments').attachFile(fileNames[1])
     sendMessage('Sending two files; one is image, and the other is JSON file.')
 
-    cy.getByDT('conversationWrapper').find('.c-message:nth-child(10)').within(() => {
+    cy.getByDT('conversationWrapper').find('.c-message:nth-child(12)').within(() => {
       cy.get('.c-attachment-container').find('.c-attachment-preview:nth-child(2)').within(() => {
         cy.get('.c-attachment-actions-wrapper').invoke('attr', 'style', 'display: flex').invoke('show')
         cy.get('.c-attachment-actions span[aria-label="Delete"]').click()
@@ -288,15 +290,15 @@ describe('Send/edit/remove messages & add/remove emoticons inside group chat', (
       cy.getByDT('submitPrompt').click()
     })
 
-    cy.getByDT('conversationWrapper').find('.c-message:nth-child(10)').within(() => {
+    cy.getByDT('conversationWrapper').find('.c-message:nth-child(12)').within(() => {
       cy.get('.c-attachment-container').find('.c-attachment-preview').should('have.length', 2)
     })
   })
 
   it('user1 pins 3 messages and unpins 1 message', () => {
-    pinMessage(11)
+    pinMessage(13)
     pinMessage(8)
-    pinMessage(10)
+    pinMessage(12)
     cy.getByDT('numberOfPinnedMessages').should('contain', '3 Pinned')
     unpinMessage(1)
     cy.getByDT('numberOfPinnedMessages').should('contain', '2 Pinned')
@@ -318,7 +320,7 @@ describe('Send/edit/remove messages & add/remove emoticons inside group chat', (
     })
 
     cy.getByDT('conversationWrapper').within(() => {
-      cy.get('.c-message:nth-child(10)').should('have.class', 'c-focused')
+      cy.get('.c-message:nth-child(12)').should('have.class', 'c-focused')
     })
   })
 

From 9f7390245a476c3e403fe6dd68a9e1b4ae6a241c Mon Sep 17 00:00:00 2001
From: silver-it <alex.jin220@gmail.com>
Date: Tue, 11 Jun 2024 17:39:10 +0800
Subject: [PATCH 49/77] fix: error in cypress

---
 test/cypress/integration/group-chat-message.spec.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/test/cypress/integration/group-chat-message.spec.js b/test/cypress/integration/group-chat-message.spec.js
index 42cb17bae..1b97277d1 100644
--- a/test/cypress/integration/group-chat-message.spec.js
+++ b/test/cypress/integration/group-chat-message.spec.js
@@ -297,7 +297,7 @@ describe('Send/edit/remove messages & add/remove emoticons inside group chat', (
 
   it('user1 pins 3 messages and unpins 1 message', () => {
     pinMessage(13)
-    pinMessage(8)
+    pinMessage(10)
     pinMessage(12)
     cy.getByDT('numberOfPinnedMessages').should('contain', '3 Pinned')
     unpinMessage(1)
@@ -310,7 +310,7 @@ describe('Send/edit/remove messages & add/remove emoticons inside group chat', (
       cy.get('.c-body>.c-pinned-message:first-child .c-pinned-message-content')
         .should('contain', 'Sending three profile pictures which are designed by Apple. Cute, right?')
       cy.get('.c-body>.c-pinned-message:last-child .c-pinned-message-content')
-        .should('contain', 'Hi @all. Hope you are doing well.')
+        .should('contain', 'Welcome!')
     })
   })
 

From 65fe1053fade36d5318eee955c7286268efa1859 Mon Sep 17 00:00:00 2001
From: silver-it <alex.jin220@gmail.com>
Date: Tue, 11 Jun 2024 18:29:48 +0800
Subject: [PATCH 50/77] chore: minor updates and Travis retry

---
 test/cypress/integration/group-chat-message.spec.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/test/cypress/integration/group-chat-message.spec.js b/test/cypress/integration/group-chat-message.spec.js
index 1b97277d1..344301b22 100644
--- a/test/cypress/integration/group-chat-message.spec.js
+++ b/test/cypress/integration/group-chat-message.spec.js
@@ -21,7 +21,7 @@ const user3 = `user3${userId}`
 let invitationLinkAnyone
 let me
 
-describe('Send/edit/remove messages & add/remove emoticons inside group chat', () => {
+describe('Send/edit/remove messages & add/remove emoticons & pin/unpin messages inside group chat', () => {
   function switchUser (username) {
     cy.giSwitchUser(username)
     me = username
@@ -254,6 +254,7 @@ describe('Send/edit/remove messages & add/remove emoticons inside group chat', (
     cy.giRedirectToGroupChat()
     sendMessage('Welcome!')
     cy.get('[data-test="groupChatLink"] .c-badge.is-compact').should('not.exist')
+    cy.getByDT('dashboard').click()
   })
 
   it('user1 checks two mentions for himself', () => {

From c3566b4b39fb34d1a705444d1371475b7477bb8d Mon Sep 17 00:00:00 2001
From: silver-it <alex.jin220@gmail.com>
Date: Wed, 12 Jun 2024 07:18:13 +0800
Subject: [PATCH 51/77] feat: updated position of *N Pinned* in GroupChat

---
 frontend/views/pages/GroupChat.vue            | 28 ++++++-------------
 .../integration/group-chat-message.spec.js    |  1 -
 2 files changed, 9 insertions(+), 20 deletions(-)

diff --git a/frontend/views/pages/GroupChat.vue b/frontend/views/pages/GroupChat.vue
index e575e650a..bcaa5c31c 100644
--- a/frontend/views/pages/GroupChat.vue
+++ b/frontend/views/pages/GroupChat.vue
@@ -59,6 +59,14 @@ page(pageTestName='groupChat' :miniHeader='isDirectMessage()')
 
   template(#description='' v-if='!isDirectMessage()')
     .c-header-description
+      span.c-pin-wrapper(
+        data-test='numberOfPinnedMessages'
+        v-if='pinnedMessages.length'
+        @click='showPinnedMessages($event)'
+      )
+        i.icon-thumbtack
+        i18n(:args='{ messagesCount: pinnedMessages.length }') {messagesCount} Pinned
+        | ∙
       i18n.is-unstyled.c-link(
         tag='button'
         @click='openModal("ChatMembersAllModal")'
@@ -83,14 +91,6 @@ page(pageTestName='groupChat' :miniHeader='isDirectMessage()')
           data-test='updateDescription'
           @click='editDescription'
         ) Add description
-    .c-header-shortcuts
-      span.c-pin-wrapper(
-        data-test='numberOfPinnedMessages'
-        v-if='pinnedMessages.length'
-        @click='showPinnedMessages($event)'
-      )
-        i.icon-thumbtack
-        i18n(:args='{ messagesCount: pinnedMessages.length }') {messagesCount} Pinned
 
   template(#sidebar='{ toggle }')
     chat-nav
@@ -375,22 +375,12 @@ export default ({
   .is-unstyled {
     margin: 0 0.2rem;
   }
-}
-
-.c-header-shortcuts {
-  display: none;
-  padding: 0 0.2rem;
-
-  @include desktop {
-    display: block;
-    margin-top: -0.375rem;
-  }
 
   .c-pin-wrapper {
     cursor: pointer;
 
     span {
-      margin-left: 0.25rem;
+      margin: 0 0.25rem;
     }
   }
 }
diff --git a/test/cypress/integration/group-chat-message.spec.js b/test/cypress/integration/group-chat-message.spec.js
index 344301b22..8dcdda8e2 100644
--- a/test/cypress/integration/group-chat-message.spec.js
+++ b/test/cypress/integration/group-chat-message.spec.js
@@ -254,7 +254,6 @@ describe('Send/edit/remove messages & add/remove emoticons & pin/unpin messages
     cy.giRedirectToGroupChat()
     sendMessage('Welcome!')
     cy.get('[data-test="groupChatLink"] .c-badge.is-compact').should('not.exist')
-    cy.getByDT('dashboard').click()
   })
 
   it('user1 checks two mentions for himself', () => {

From 41b594e8e57b54540867dc5ea7e2937e3fbcd298 Mon Sep 17 00:00:00 2001
From: silver-it <alex.jin220@gmail.com>
Date: Wed, 12 Jun 2024 07:25:48 +0800
Subject: [PATCH 52/77] fix: error in using getter

---
 frontend/views/containers/chatroom/MessageBase.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/frontend/views/containers/chatroom/MessageBase.vue b/frontend/views/containers/chatroom/MessageBase.vue
index d016f16f8..445dba572 100644
--- a/frontend/views/containers/chatroom/MessageBase.vue
+++ b/frontend/views/containers/chatroom/MessageBase.vue
@@ -103,6 +103,7 @@
 
 <script>
 import sbp from '@sbp/sbp'
+import { mapGetters } from 'vuex'
 import Avatar from '@components/Avatar.vue'
 import ProfileCard from '@components/ProfileCard.vue'
 import emoticonsMixins from './EmoticonsMixins.js'
@@ -173,6 +174,7 @@ export default ({
     shouldRenderMarkdown: Boolean
   },
   computed: {
+    ...mapGetters(['userDisplayNameFromID']),
     hasAttachments () {
       return Boolean(this.attachments?.length)
     },

From cf56b33db944b9012fec4d441d2f0b96b823e3c8 Mon Sep 17 00:00:00 2001
From: silver-it <alex.jin220@gmail.com>
Date: Wed, 12 Jun 2024 07:38:22 +0800
Subject: [PATCH 53/77] feat: improved pinned style

---
 frontend/views/containers/chatroom/MessageBase.vue | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/frontend/views/containers/chatroom/MessageBase.vue b/frontend/views/containers/chatroom/MessageBase.vue
index 445dba572..32fab9182 100644
--- a/frontend/views/containers/chatroom/MessageBase.vue
+++ b/frontend/views/containers/chatroom/MessageBase.vue
@@ -8,7 +8,7 @@
   .c-pinned-wrapper(v-if='isAlreadyPinned')
     .c-pinned-icon
       i.icon-thumbtack
-    i18n(:args='{ user: pinnedUserName }') Pinned by {user}
+    span(v-safe-html='pinLabel')
 
   .c-message-wrapper
     slot(name='image')
@@ -120,7 +120,7 @@ import {
   MESSAGE_VARIANTS
 } from '@model/contracts/shared/constants.js'
 import { OPEN_TOUCH_LINK_HELPER } from '@utils/events.js'
-import { L } from '@common/common.js'
+import { L, LTags } from '@common/common.js'
 
 export default ({
   name: 'MessageBase',
@@ -189,6 +189,11 @@ export default ({
         return this.userDisplayNameFromID(this.pinnedBy)
       }
       return ''
+    },
+    pinLabel () {
+      return this.isAlreadyPinned
+        ? L('Pinned by {strong_}{user}{_strong}', { user: this.pinnedUserName, ...LTags('strong') })
+        : ''
     }
   },
   methods: {

From 58f84463ce349c53fb12effcd83f86e5fe0ecb7b Mon Sep 17 00:00:00 2001
From: silver-it <alex.jin220@gmail.com>
Date: Wed, 12 Jun 2024 09:47:39 +0800
Subject: [PATCH 54/77] fix: error in logout and wait invocations from
 UNREAD_MESSAGES_QUEUE

---
 frontend/controller/actions/identity.js       |  2 ++
 frontend/views/pages/GroupChat.vue            |  3 +-
 .../group-chat-direct-message.spec.js         | 23 ++++-----------
 .../integration/group-chat-message.spec.js    | 29 ++++++-------------
 .../integration/group-chat-scrolling.spec.js  | 17 ++---------
 test/cypress/support/commands.js              | 14 +++++++--
 6 files changed, 33 insertions(+), 55 deletions(-)

diff --git a/frontend/controller/actions/identity.js b/frontend/controller/actions/identity.js
index 5c13cafd3..a6cdf430b 100644
--- a/frontend/controller/actions/identity.js
+++ b/frontend/controller/actions/identity.js
@@ -511,6 +511,8 @@ export default (sbp('sbp/selectors/register', {
       //   4. (In reset handler) Outgoing actions from side-effects (again, in
       //      the `encrypted-action` queue)
       await sbp('okTurtles.eventQueue/queueEvent', 'encrypted-action', () => {})
+      // NOTE: wait for all the pending unreadMessages invocations to be finished
+      await sbp('okTurtles.eventQueue/queueEvent', UNREAD_MESSAGES_QUEUE, () => {})
       // reset will wait until we have processed any remaining actions
       await sbp('chelonia/reset', async () => {
         // some of the actions that reset waited for might have side-effects
diff --git a/frontend/views/pages/GroupChat.vue b/frontend/views/pages/GroupChat.vue
index bcaa5c31c..b1246749c 100644
--- a/frontend/views/pages/GroupChat.vue
+++ b/frontend/views/pages/GroupChat.vue
@@ -380,7 +380,8 @@ export default ({
     cursor: pointer;
 
     span {
-      margin: 0 0.25rem;
+      margin-left: 0.25rem;
+      margin-right: 0.2rem;
     }
   }
 }
diff --git a/test/cypress/integration/group-chat-direct-message.spec.js b/test/cypress/integration/group-chat-direct-message.spec.js
index b54389866..bc06faf23 100644
--- a/test/cypress/integration/group-chat-direct-message.spec.js
+++ b/test/cypress/integration/group-chat-direct-message.spec.js
@@ -15,17 +15,6 @@ describe('Create/Join direct messages and orders of direct message channels', ()
     me = username
   }
 
-  function sendMessage (message) {
-    cy.getByDT('messageInputWrapper').within(() => {
-      cy.get('textarea').clear().type(`${message}{enter}`)
-      cy.get('textarea').should('be.empty')
-    })
-    cy.getByDT('conversationWrapper').within(() => {
-      cy.get('.c-message:last-child .c-who > span:first-child').should('contain', me)
-      cy.get('.c-message.sent:last-child .c-text').should('contain', message)
-    })
-  }
-
   function createPrivateDM (partner) {
     cy.getByDT('chatMembers').within(() => {
       cy.getByDT('inviteButton').click()
@@ -124,8 +113,8 @@ describe('Create/Join direct messages and orders of direct message channels', ()
     cy.getByDT('chatMembers').find('ul').children().should('have.length', 1)
     cy.getByDT('channelName').should('contain', user1)
 
-    sendMessage('Hi! Nice to meet you.')
-    sendMessage('Hope you are doing well.')
+    cy.giSendMessage(me, 'Hi! Nice to meet you.')
+    cy.giSendMessage(me, 'Hope you are doing well.')
   })
 
   it('user1 checks direct messages from user2 and replies', () => {
@@ -138,7 +127,7 @@ describe('Create/Join direct messages and orders of direct message channels', ()
 
     cy.getByDT('conversationWrapper').find('.c-message').should('have.length', 2)
 
-    sendMessage('I am fine. Thanks.')
+    cy.giSendMessage(me, 'I am fine. Thanks.')
   })
 
   it('user3 creates a direct message channel with user1 and sends greetings', () => {
@@ -150,7 +139,7 @@ describe('Create/Join direct messages and orders of direct message channels', ()
     cy.getByDT('chatMembers').find('ul').children().should('have.length', 1)
     cy.getByDT('conversationWrapper').find('.c-message').should('have.length', 0)
 
-    sendMessage('Hello. How are you?')
+    cy.giSendMessage(me, 'Hello. How are you?')
   })
 
   it('user1 checks the direct messages from user3 and replies', () => {
@@ -163,7 +152,7 @@ describe('Create/Join direct messages and orders of direct message channels', ()
     cy.getByDT('conversationWrapper').find('.c-message').should('have.length', 1)
     cy.getByDT('channelName').should('contain', user3)
 
-    sendMessage('Fine. You?')
+    cy.giSendMessage(me, 'Fine. You?')
   })
 
   it('direct message channels should be sorted by name and the latest message', () => {
@@ -204,7 +193,7 @@ describe('Create/Join direct messages and orders of direct message channels', ()
     cy.getByDT('channelName').should('contain', `${user3}, ${user1}`)
     // NOTE: no notification messages in DM
     cy.getByDT('conversationWrapper').find('.c-message').should('have.length', 0)
-    sendMessage(message)
+    cy.giSendMessage(me, message)
 
     cy.url().then(url => url).as('groupMessageLink')
 
diff --git a/test/cypress/integration/group-chat-message.spec.js b/test/cypress/integration/group-chat-message.spec.js
index 8dcdda8e2..def626d69 100644
--- a/test/cypress/integration/group-chat-message.spec.js
+++ b/test/cypress/integration/group-chat-message.spec.js
@@ -27,17 +27,6 @@ describe('Send/edit/remove messages & add/remove emoticons & pin/unpin messages
     me = username
   }
 
-  function sendMessage (message) {
-    cy.getByDT('messageInputWrapper').within(() => {
-      cy.get('textarea').clear().type(`${message}{enter}`)
-      cy.get('textarea').should('be.empty')
-    })
-    cy.getByDT('conversationWrapper').within(() => {
-      cy.get('.c-message:last-child .c-who > span:first-child').should('contain', me)
-      cy.get('.c-message.sent:last-child .c-text').should('contain', message)
-    })
-  }
-
   function editMessage (nth, message) {
     cy.getByDT('conversationWrapper').find(`.c-message:nth-child(${nth})`).within(() => {
       cy.get('.c-menu>.c-actions').invoke('attr', 'style', 'display: flex').invoke('show')
@@ -169,15 +158,15 @@ describe('Send/edit/remove messages & add/remove emoticons & pin/unpin messages
     me = user2
 
     cy.giRedirectToGroupChat()
-    sendMessage(`Hello ${user1}. How are you? Thanks for inviting me to this awesome group.`)
-    sendMessage('Can we have a meeting this morning?')
+    cy.giSendMessage(me, `Hello ${user1}. How are you? Thanks for inviting me to this awesome group.`)
+    cy.giSendMessage(me, 'Can we have a meeting this morning?')
   })
 
   it('user1 sends greetings and edits', () => {
     switchUser(user1)
     cy.giRedirectToGroupChat()
 
-    sendMessage('Hi')
+    cy.giSendMessage(me, 'Hi')
 
     editMessage(7, `Hi ${user2}. I am fine thanks.`)
   })
@@ -244,15 +233,15 @@ describe('Send/edit/remove messages & add/remove emoticons & pin/unpin messages
     me = user3
     cy.giRedirectToGroupChat()
 
-    sendMessage(`Hi ${makeMentionFromUsername(user1).all}. Hope you are doing well.`)
-    sendMessage(`I am a friend of ${makeMentionFromUsername(user1).me}. Let's work together.`)
+    cy.giSendMessage(me, `Hi ${makeMentionFromUsername(user1).all}. Hope you are doing well.`)
+    cy.giSendMessage(me, `I am a friend of ${makeMentionFromUsername(user1).me}. Let's work together.`)
   })
 
   it('user2 checks a mention for himself', () => {
     switchUser(user2)
     cy.getByDT('groupChatLink').get('.c-badge.is-compact[aria-label="1 new notifications"]').contains('1')
     cy.giRedirectToGroupChat()
-    sendMessage('Welcome!')
+    cy.giSendMessage(me, 'Welcome!')
     cy.get('[data-test="groupChatLink"] .c-badge.is-compact').should('not.exist')
   })
 
@@ -260,7 +249,7 @@ describe('Send/edit/remove messages & add/remove emoticons & pin/unpin messages
     switchUser(user1)
     cy.getByDT('groupChatLink').get('.c-badge.is-compact[aria-label="2 new notifications"]').contains('2')
     cy.giRedirectToGroupChat()
-    sendMessage(`Hi ${makeMentionFromUsername(user3).me}. Nice to see you here.`)
+    cy.giSendMessage(me, `Hi ${makeMentionFromUsername(user3).me}. Nice to see you here.`)
     cy.get('[data-test="groupChatLink"] .c-badge.is-compact').should('not.exist')
   })
 
@@ -271,10 +260,10 @@ describe('Send/edit/remove messages & add/remove emoticons & pin/unpin messages
     ]
 
     cy.getByDT('attachments').attachFile(fileNames[0])
-    sendMessage('Sending three profile pictures which are designed by Apple. Cute, right?')
+    cy.giSendMessage(me, 'Sending three profile pictures which are designed by Apple. Cute, right?')
 
     cy.getByDT('attachments').attachFile(fileNames[1])
-    sendMessage('Sending two files; one is image, and the other is JSON file.')
+    cy.giSendMessage(me, 'Sending two files; one is image, and the other is JSON file.')
 
     cy.getByDT('conversationWrapper').find('.c-message:nth-child(12)').within(() => {
       cy.get('.c-attachment-container').find('.c-attachment-preview:nth-child(2)').within(() => {
diff --git a/test/cypress/integration/group-chat-scrolling.spec.js b/test/cypress/integration/group-chat-scrolling.spec.js
index 27d910ce5..5b10bd1ea 100644
--- a/test/cypress/integration/group-chat-scrolling.spec.js
+++ b/test/cypress/integration/group-chat-scrolling.spec.js
@@ -28,17 +28,6 @@ describe('Send/edit/remove messages & add/remove emoticons inside group chat', (
     cy.giWaitUntilMessagesLoaded()
   }
 
-  function sendMessage (message) {
-    cy.getByDT('messageInputWrapper').within(() => {
-      cy.get('textarea').clear().type(`${message}{enter}`, { delay: 0 })
-      cy.get('textarea').should('be.empty')
-    })
-    cy.getByDT('conversationWrapper').within(() => {
-      cy.get('.c-message:last-child .c-who > span:first-child').should('contain', me)
-      cy.get('.c-message.sent:last-child .c-text').should('contain', message)
-    })
-  }
-
   function replyMessage (nth, message) {
     cy.getByDT('conversationWrapper').find(`.c-message:nth-child(${nth})`).within(() => {
       cy.get('.c-menu>.c-actions')
@@ -59,7 +48,7 @@ describe('Send/edit/remove messages & add/remove emoticons inside group chat', (
       cy.get('.c-replying-wrapper').should('exist')
     })
 
-    sendMessage(message)
+    cy.giSendMessage(me, message)
   }
 
   it(`user1 creates '${groupName}' group and joins "${CHATROOM_GENERAL_NAME}" channel by default and sends 15 messages`, () => {
@@ -79,7 +68,7 @@ describe('Send/edit/remove messages & add/remove emoticons inside group chat', (
     cy.giCheckIfJoinedChatroom(CHATROOM_GENERAL_NAME, me)
 
     for (let i = 0; i < 15; i++) {
-      sendMessage(`Text-${i + 1}`)
+      cy.giSendMessage(me, `Text-${i + 1}`)
     }
 
     cy.giLogout()
@@ -97,7 +86,7 @@ describe('Send/edit/remove messages & add/remove emoticons inside group chat', (
     cy.giRedirectToGroupChat()
 
     for (let i = 15; i < 30; i++) {
-      sendMessage(`Text-${i + 1}`)
+      cy.giSendMessage(me, `Text-${i + 1}`)
     }
 
     replyMessage(5, 'Three') // Message with 'Text-3'
diff --git a/test/cypress/support/commands.js b/test/cypress/support/commands.js
index 6b7a51534..31f3f52cc 100644
--- a/test/cypress/support/commands.js
+++ b/test/cypress/support/commands.js
@@ -259,9 +259,6 @@ Cypress.Commands.add('giLogin', (username, {
 })
 
 Cypress.Commands.add('giLogout', ({ hasNoGroup = false } = {}) => {
-  // NOTE: wait until all the queued invocations to run before logout
-  cy.giEmptyInvocationQueue()
-
   if (hasNoGroup) {
     cy.window().its('sbp').then(async sbp => await sbp('gi.actions/identity/logout'))
   } else {
@@ -736,3 +733,14 @@ Cypress.Commands.add('giWaitUntilMessagesLoaded', (isGroupChannel = true) => {
     cy.getByDT('conversationWrapper').find('.c-message-wrapper').its('length').should('be.gte', 1)
   }
 })
+
+Cypress.Commands.add('giSendMessage', (sender, message) => {
+  cy.getByDT('messageInputWrapper').within(() => {
+    cy.get('textarea').clear().type(`${message}{enter}`)
+    cy.get('textarea').should('be.empty')
+  })
+  cy.getByDT('conversationWrapper').within(() => {
+    cy.get('.c-message:last-child .c-who > span:first-child').should('contain', sender)
+    cy.get('.c-message.sent:last-child .c-text').should('contain', message)
+  })
+})

From 2b02bb727b397363da0ebc207c14c84f7c5336b9 Mon Sep 17 00:00:00 2001
From: silver-it <alex.jin220@gmail.com>
Date: Wed, 12 Jun 2024 10:05:06 +0800
Subject: [PATCH 55/77] fix: cypress error

---
 .../views/containers/chatroom/ChatMain.vue    |  4 ++--
 test/cypress/support/commands.js              | 22 ++++++++++++-------
 2 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/frontend/views/containers/chatroom/ChatMain.vue b/frontend/views/containers/chatroom/ChatMain.vue
index 499feb6d9..89a42209a 100644
--- a/frontend/views/containers/chatroom/ChatMain.vue
+++ b/frontend/views/containers/chatroom/ChatMain.vue
@@ -142,7 +142,7 @@ import {
 import { CHATROOM_EVENTS } from '@utils/events.js'
 import { findMessageIdx, createMessage } from '@model/contracts/shared/functions.js'
 import { proximityDate, MINS_MILLIS } from '@model/contracts/shared/time.js'
-import { cloneDeep, debounce, throttle } from '@model/contracts/shared/giLodash.js'
+import { cloneDeep, debounce, throttle, delay } from '@model/contracts/shared/giLodash.js'
 import { EVENT_HANDLED } from '~/shared/domains/chelonia/events.js'
 
 const collectEventStream = async (s: ReadableStream) => {
@@ -969,7 +969,7 @@ export default ({
 
               // NOTE: waiting for the animation is done
               //       it's duration is 500ms described in MessageBase.vue
-              await new Promise(resolve => setTimeout(resolve, 500))
+              await delay(500)
               if (!this.checkEventSourceConsistency(contractID)) return
             }
           }
diff --git a/test/cypress/support/commands.js b/test/cypress/support/commands.js
index 31f3f52cc..28753586f 100644
--- a/test/cypress/support/commands.js
+++ b/test/cypress/support/commands.js
@@ -647,16 +647,22 @@ Cypress.Commands.add('giAddNewChatroom', ({
     })
   }
 
-  cy.giWaitUntilMessagesLoaded()
   cy.getByDT('channelName').should('contain', name)
+
+  cy.giWaitUntilMessagesLoaded()
   cy.getByDT('conversationWrapper').within(() => {
-    cy.get('.c-greetings .is-title-4').should('contain', 'Welcome!')
-    cy.get('.c-greetings p').should('contain', `This is the beginning of ${name}.`)
-    cy.get('.buttons').within(() => {
-      cy.getByDT('addMembers').should('exist')
-      if (!description) {
-        cy.getByDT('addDescription').should('exist')
-      }
+    cy.get('.infinite-status-prompt:nth-child(3)')
+      .invoke('attr', 'style')
+      .should('not.include', 'display: none')
+    cy.get('.infinite-status-prompt:nth-child(3)').within(() => {
+      cy.get('.c-greetings .is-title-4').should('contain', 'Welcome!')
+      cy.get('.c-greetings p').should('contain', `This is the beginning of ${name}.`)
+      cy.get('.buttons').within(() => {
+        cy.getByDT('addMembers').should('exist')
+        if (!description) {
+          cy.getByDT('addDescription').should('exist')
+        }
+      })
     })
   })
 })

From 749571e25ad3fbec8671964a459770043d41ea91 Mon Sep 17 00:00:00 2001
From: silver-it <alex.jin220@gmail.com>
Date: Wed, 12 Jun 2024 10:38:22 +0800
Subject: [PATCH 56/77] chore: updated comment

---
 frontend/views/containers/chatroom/ChatMain.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/views/containers/chatroom/ChatMain.vue b/frontend/views/containers/chatroom/ChatMain.vue
index 89a42209a..2ce808b0e 100644
--- a/frontend/views/containers/chatroom/ChatMain.vue
+++ b/frontend/views/containers/chatroom/ChatMain.vue
@@ -967,8 +967,8 @@ export default ({
             if (msgIndex !== -1) {
               document.querySelectorAll('.c-body-conversation > .c-message')[msgIndex]?.classList.add('c-disappeared')
 
-              // NOTE: waiting for the animation is done
-              //       it's duration is 500ms described in MessageBase.vue
+              // NOTE: waiting for the animation to be completed with the duration of 500ms
+              //       .c-disappeared class is defined in MessageBase.vue
               await delay(500)
               if (!this.checkEventSourceConsistency(contractID)) return
             }

From ff486f398342db4209595eee537a7c0f37704573 Mon Sep 17 00:00:00 2001
From: silver-it <alex.jin220@gmail.com>
Date: Wed, 12 Jun 2024 12:08:51 +0800
Subject: [PATCH 57/77] fix: Cypress error in logout before waiting for
 UNREAD_MESSAGES_QUEUE

---
 frontend/controller/actions/identity.js       |  4 +--
 .../views/containers/chatroom/ChatMain.vue    | 25 ++++++++++++++-----
 2 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/frontend/controller/actions/identity.js b/frontend/controller/actions/identity.js
index a6cdf430b..8b04a237b 100644
--- a/frontend/controller/actions/identity.js
+++ b/frontend/controller/actions/identity.js
@@ -511,8 +511,6 @@ export default (sbp('sbp/selectors/register', {
       //   4. (In reset handler) Outgoing actions from side-effects (again, in
       //      the `encrypted-action` queue)
       await sbp('okTurtles.eventQueue/queueEvent', 'encrypted-action', () => {})
-      // NOTE: wait for all the pending unreadMessages invocations to be finished
-      await sbp('okTurtles.eventQueue/queueEvent', UNREAD_MESSAGES_QUEUE, () => {})
       // reset will wait until we have processed any remaining actions
       await sbp('chelonia/reset', async () => {
         // some of the actions that reset waited for might have side-effects
@@ -524,6 +522,8 @@ export default (sbp('sbp/selectors/register', {
         // TODO: We might not need this second await and 1-3 could be fine (i.e.,
         // we could avoid waiting on these 2nd layer of actions)
         await sbp('okTurtles.eventQueue/queueEvent', 'encrypted-action', () => {})
+        // NOTE: wait for all the pending unreadMessages invocations to be finished
+        await sbp('okTurtles.eventQueue/queueEvent', UNREAD_MESSAGES_QUEUE, () => {})
         // See comment below for 'gi.db/settings/delete'
         await sbp('state/vuex/save')
 
diff --git a/frontend/views/containers/chatroom/ChatMain.vue b/frontend/views/containers/chatroom/ChatMain.vue
index 2ce808b0e..9d9743f4a 100644
--- a/frontend/views/containers/chatroom/ChatMain.vue
+++ b/frontend/views/containers/chatroom/ChatMain.vue
@@ -876,9 +876,11 @@ export default ({
     updateReadUntilMessageHash ({ messageHash, createdHeight }) {
       const chatRoomID = this.renderingChatRoomId
       if (chatRoomID && this.isJoinedChatRoom(chatRoomID)) {
-        sbp('gi.actions/identity/setChatRoomReadUntil', {
-          contractID: chatRoomID, messageHash, createdHeight
-        })
+        if (this.currentChatRoomReadUntil.createdHeight < createdHeight) {
+          sbp('gi.actions/identity/setChatRoomReadUntil', {
+            contractID: chatRoomID, messageHash, createdHeight
+          })
+        }
       }
     },
     listenChatRoomActions (contractID: string, message?: GIMessage) {
@@ -970,7 +972,6 @@ export default ({
               // NOTE: waiting for the animation to be completed with the duration of 500ms
               //       .c-disappeared class is defined in MessageBase.vue
               await delay(500)
-              if (!this.checkEventSourceConsistency(contractID)) return
             }
           }
 
@@ -978,8 +979,20 @@ export default ({
           const newContractState = await sbp('chelonia/in/processMessage', serializedMessage, this.messageState.contract)
 
           if (!this.checkEventSourceConsistency(contractID)) return
-          Vue.set(this.messageState, 'contract', newContractState)
 
+          if (window.Cypress) {
+            // NOTE: When the user's actions are very quick, that can logout before to save `readUntilMessageHash`,
+            //       we should save `readUntilMessageHash` before to update contract state.
+            //       This normally happens in Cypress, when user logs out just after sending a message.
+            const curMessages = newContractState.messages || []
+            const lastMessage = curMessages[curMessages.length - 1]
+            this.updateReadUntilMessageHash({
+              messageHash: lastMessage.hash,
+              createdHeight: lastMessage.height
+            })
+          }
+
+          Vue.set(this.messageState, 'contract', newContractState)
           this.latestEvents.push(serializedMessage)
 
           if (this.ephemeral.scrolledDistance < 50) {
@@ -989,7 +1002,7 @@ export default ({
               const fromOurselves = this.isMsgSender(this.messages[this.messages.length - 1].from)
               if (!fromOurselves && isScrollable) {
                 this.updateScroll()
-              } else if (!isScrollable && this.messages.length) {
+              } else {
                 const msg = this.messages[this.messages.length - 1]
                 this.updateReadUntilMessageHash({
                   messageHash: msg.hash,

From 9aa182ca2470fa3a3eaa41b91f8b2d58f4f388f3 Mon Sep 17 00:00:00 2001
From: silver-it <alex.jin220@gmail.com>
Date: Wed, 12 Jun 2024 16:17:18 +0800
Subject: [PATCH 58/77] fix: update readUntilMessage before update contract
 state in Cypress mode

---
 frontend/controller/actions/identity.js       |  4 +++-
 .../views/containers/chatroom/ChatMain.vue    | 23 +++++++++++--------
 2 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/frontend/controller/actions/identity.js b/frontend/controller/actions/identity.js
index 8b04a237b..5d4629938 100644
--- a/frontend/controller/actions/identity.js
+++ b/frontend/controller/actions/identity.js
@@ -522,8 +522,10 @@ export default (sbp('sbp/selectors/register', {
         // TODO: We might not need this second await and 1-3 could be fine (i.e.,
         // we could avoid waiting on these 2nd layer of actions)
         await sbp('okTurtles.eventQueue/queueEvent', 'encrypted-action', () => {})
-        // NOTE: wait for all the pending unreadMessages invocations to be finished
+
+        // NOTE: wait for all the pending UNREAD_MESSAGES_QUEUE invocations to be finished
         await sbp('okTurtles.eventQueue/queueEvent', UNREAD_MESSAGES_QUEUE, () => {})
+
         // See comment below for 'gi.db/settings/delete'
         await sbp('state/vuex/save')
 
diff --git a/frontend/views/containers/chatroom/ChatMain.vue b/frontend/views/containers/chatroom/ChatMain.vue
index 9d9743f4a..e976f8f5a 100644
--- a/frontend/views/containers/chatroom/ChatMain.vue
+++ b/frontend/views/containers/chatroom/ChatMain.vue
@@ -876,11 +876,12 @@ export default ({
     updateReadUntilMessageHash ({ messageHash, createdHeight }) {
       const chatRoomID = this.renderingChatRoomId
       if (chatRoomID && this.isJoinedChatRoom(chatRoomID)) {
-        if (this.currentChatRoomReadUntil.createdHeight < createdHeight) {
-          sbp('gi.actions/identity/setChatRoomReadUntil', {
-            contractID: chatRoomID, messageHash, createdHeight
-          })
+        if (this.currentChatRoomReadUntil?.createdHeight >= createdHeight) {
+          return
         }
+        sbp('gi.actions/identity/setChatRoomReadUntil', {
+          contractID: chatRoomID, messageHash, createdHeight
+        })
       }
     },
     listenChatRoomActions (contractID: string, message?: GIMessage) {
@@ -980,16 +981,18 @@ export default ({
 
           if (!this.checkEventSourceConsistency(contractID)) return
 
-          if (window.Cypress) {
+          if (window.sbp === sbp && window.Cypress) {
             // NOTE: When the user's actions are very quick, that can logout before to save `readUntilMessageHash`,
             //       we should save `readUntilMessageHash` before to update contract state.
             //       This normally happens in Cypress, when user logs out just after sending a message.
             const curMessages = newContractState.messages || []
-            const lastMessage = curMessages[curMessages.length - 1]
-            this.updateReadUntilMessageHash({
-              messageHash: lastMessage.hash,
-              createdHeight: lastMessage.height
-            })
+            if (addedOrDeleted === 'ADDED' && curMessages.length) {
+              const lastMessage = curMessages[curMessages.length - 1]
+              this.updateReadUntilMessageHash({
+                messageHash: lastMessage.hash,
+                createdHeight: lastMessage.height
+              })
+            }
           }
 
           Vue.set(this.messageState, 'contract', newContractState)

From 34a1f58b608b5b7b6a8fc8d16e38c65999d7d52f Mon Sep 17 00:00:00 2001
From: silver-it <alex.jin220@gmail.com>
Date: Wed, 12 Jun 2024 16:47:44 +0800
Subject: [PATCH 59/77] chore: added comment and Travis retry to check if it
 passes in a row

---
 frontend/main.js                                |  2 +-
 frontend/views/containers/chatroom/ChatMain.vue | 11 +++++++++--
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/frontend/main.js b/frontend/main.js
index 654413682..527e232c6 100644
--- a/frontend/main.js
+++ b/frontend/main.js
@@ -430,7 +430,7 @@ async function startApp () {
         }
       },
       isInCypress () {
-        return !!window.Cypress
+        return !!window.Cypress && window.sbp === sbp
       }
     },
     methods: {
diff --git a/frontend/views/containers/chatroom/ChatMain.vue b/frontend/views/containers/chatroom/ChatMain.vue
index e976f8f5a..fc225b814 100644
--- a/frontend/views/containers/chatroom/ChatMain.vue
+++ b/frontend/views/containers/chatroom/ChatMain.vue
@@ -335,7 +335,14 @@ export default ({
         return this.currentUserAttr.id === this.currentGroupOwnerID
       }
       return false
-    }
+    },
+    isInCypress () {
+      // NOTE: By only checking the window.Cypress, it's difficult to say that the app is running in Cypress
+      //       because anyone can access the window object.
+      //       in Cypress mode, sbp is exposed to window object (see main.js) so window.sbp can be compared
+      //       with our sbp object to verify if the app is in Cypress mode in real
+        return !!window.Cypress && window.sbp === sbp
+      }
   },
   methods: {
     proximityDate,
@@ -981,7 +988,7 @@ export default ({
 
           if (!this.checkEventSourceConsistency(contractID)) return
 
-          if (window.sbp === sbp && window.Cypress) {
+          if (this.isInCypress) {
             // NOTE: When the user's actions are very quick, that can logout before to save `readUntilMessageHash`,
             //       we should save `readUntilMessageHash` before to update contract state.
             //       This normally happens in Cypress, when user logs out just after sending a message.

From cf4cd75da1f495564af4c35215c03f672e914bd4 Mon Sep 17 00:00:00 2001
From: silver-it <alex.jin220@gmail.com>
Date: Wed, 12 Jun 2024 16:49:57 +0800
Subject: [PATCH 60/77] chore: fix wrong indent

---
 frontend/views/containers/chatroom/ChatMain.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/views/containers/chatroom/ChatMain.vue b/frontend/views/containers/chatroom/ChatMain.vue
index fc225b814..2d097781a 100644
--- a/frontend/views/containers/chatroom/ChatMain.vue
+++ b/frontend/views/containers/chatroom/ChatMain.vue
@@ -341,8 +341,8 @@ export default ({
       //       because anyone can access the window object.
       //       in Cypress mode, sbp is exposed to window object (see main.js) so window.sbp can be compared
       //       with our sbp object to verify if the app is in Cypress mode in real
-        return !!window.Cypress && window.sbp === sbp
-      }
+      return !!window.Cypress && window.sbp === sbp
+    }
   },
   methods: {
     proximityDate,

From ecb063c3439fde863620348888e36ccf1bfe0ec7 Mon Sep 17 00:00:00 2001
From: silver-it <alex.jin220@gmail.com>
Date: Wed, 12 Jun 2024 17:02:36 +0800
Subject: [PATCH 61/77] chore: add comment and Travis retry

---
 frontend/views/containers/chatroom/ChatMain.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/views/containers/chatroom/ChatMain.vue b/frontend/views/containers/chatroom/ChatMain.vue
index 2d097781a..dccf387e5 100644
--- a/frontend/views/containers/chatroom/ChatMain.vue
+++ b/frontend/views/containers/chatroom/ChatMain.vue
@@ -884,6 +884,7 @@ export default ({
       const chatRoomID = this.renderingChatRoomId
       if (chatRoomID && this.isJoinedChatRoom(chatRoomID)) {
         if (this.currentChatRoomReadUntil?.createdHeight >= createdHeight) {
+          // NOTE: skip adding useless invocations in UNREAD_MESSAGES_QUEUE queue
           return
         }
         sbp('gi.actions/identity/setChatRoomReadUntil', {

From e21a7c4a0bd43e370308478185bbbec6663f49b5 Mon Sep 17 00:00:00 2001
From: silver-it <alex.jin220@gmail.com>
Date: Wed, 12 Jun 2024 17:16:59 +0800
Subject: [PATCH 62/77] chore: Travis passes in a rowgit add .!

---
 frontend/controller/actions/identity.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/frontend/controller/actions/identity.js b/frontend/controller/actions/identity.js
index 5d4629938..3279a2089 100644
--- a/frontend/controller/actions/identity.js
+++ b/frontend/controller/actions/identity.js
@@ -463,8 +463,7 @@ export default (sbp('sbp/selectors/register', {
             }
           })
 
-        // NOTE: users could notice that they leave the group by someone
-        // else when they log in
+        // NOTE: users could notice that they leave the group by someone else when they log in
         if (!state.currentGroupId) {
           const gId = Object.keys(state.contracts)
             .find(cID => has(state[identityContractID].groups, cID))

From 8ea8dca3f26f3ba9c6c15e8dd2c76c7f6866a2da Mon Sep 17 00:00:00 2001
From: silver-it <alex.jin220@gmail.com>
Date: Thu, 13 Jun 2024 06:55:15 +0800
Subject: [PATCH 63/77] chore: reverted unrelated code changes

---
 frontend/controller/actions/identity.js       |  7 ++----
 frontend/main.js                              |  2 +-
 .../views/containers/chatroom/ChatMain.vue    | 25 -------------------
 test/cypress/support/commands.js              | 23 ++++++-----------
 4 files changed, 11 insertions(+), 46 deletions(-)

diff --git a/frontend/controller/actions/identity.js b/frontend/controller/actions/identity.js
index 3279a2089..5c13cafd3 100644
--- a/frontend/controller/actions/identity.js
+++ b/frontend/controller/actions/identity.js
@@ -463,7 +463,8 @@ export default (sbp('sbp/selectors/register', {
             }
           })
 
-        // NOTE: users could notice that they leave the group by someone else when they log in
+        // NOTE: users could notice that they leave the group by someone
+        // else when they log in
         if (!state.currentGroupId) {
           const gId = Object.keys(state.contracts)
             .find(cID => has(state[identityContractID].groups, cID))
@@ -521,10 +522,6 @@ export default (sbp('sbp/selectors/register', {
         // TODO: We might not need this second await and 1-3 could be fine (i.e.,
         // we could avoid waiting on these 2nd layer of actions)
         await sbp('okTurtles.eventQueue/queueEvent', 'encrypted-action', () => {})
-
-        // NOTE: wait for all the pending UNREAD_MESSAGES_QUEUE invocations to be finished
-        await sbp('okTurtles.eventQueue/queueEvent', UNREAD_MESSAGES_QUEUE, () => {})
-
         // See comment below for 'gi.db/settings/delete'
         await sbp('state/vuex/save')
 
diff --git a/frontend/main.js b/frontend/main.js
index 527e232c6..654413682 100644
--- a/frontend/main.js
+++ b/frontend/main.js
@@ -430,7 +430,7 @@ async function startApp () {
         }
       },
       isInCypress () {
-        return !!window.Cypress && window.sbp === sbp
+        return !!window.Cypress
       }
     },
     methods: {
diff --git a/frontend/views/containers/chatroom/ChatMain.vue b/frontend/views/containers/chatroom/ChatMain.vue
index dccf387e5..11684e1fc 100644
--- a/frontend/views/containers/chatroom/ChatMain.vue
+++ b/frontend/views/containers/chatroom/ChatMain.vue
@@ -335,13 +335,6 @@ export default ({
         return this.currentUserAttr.id === this.currentGroupOwnerID
       }
       return false
-    },
-    isInCypress () {
-      // NOTE: By only checking the window.Cypress, it's difficult to say that the app is running in Cypress
-      //       because anyone can access the window object.
-      //       in Cypress mode, sbp is exposed to window object (see main.js) so window.sbp can be compared
-      //       with our sbp object to verify if the app is in Cypress mode in real
-      return !!window.Cypress && window.sbp === sbp
     }
   },
   methods: {
@@ -883,10 +876,6 @@ export default ({
     updateReadUntilMessageHash ({ messageHash, createdHeight }) {
       const chatRoomID = this.renderingChatRoomId
       if (chatRoomID && this.isJoinedChatRoom(chatRoomID)) {
-        if (this.currentChatRoomReadUntil?.createdHeight >= createdHeight) {
-          // NOTE: skip adding useless invocations in UNREAD_MESSAGES_QUEUE queue
-          return
-        }
         sbp('gi.actions/identity/setChatRoomReadUntil', {
           contractID: chatRoomID, messageHash, createdHeight
         })
@@ -989,20 +978,6 @@ export default ({
 
           if (!this.checkEventSourceConsistency(contractID)) return
 
-          if (this.isInCypress) {
-            // NOTE: When the user's actions are very quick, that can logout before to save `readUntilMessageHash`,
-            //       we should save `readUntilMessageHash` before to update contract state.
-            //       This normally happens in Cypress, when user logs out just after sending a message.
-            const curMessages = newContractState.messages || []
-            if (addedOrDeleted === 'ADDED' && curMessages.length) {
-              const lastMessage = curMessages[curMessages.length - 1]
-              this.updateReadUntilMessageHash({
-                messageHash: lastMessage.hash,
-                createdHeight: lastMessage.height
-              })
-            }
-          }
-
           Vue.set(this.messageState, 'contract', newContractState)
           this.latestEvents.push(serializedMessage)
 
diff --git a/test/cypress/support/commands.js b/test/cypress/support/commands.js
index 28753586f..b7c8b9cca 100644
--- a/test/cypress/support/commands.js
+++ b/test/cypress/support/commands.js
@@ -647,23 +647,16 @@ Cypress.Commands.add('giAddNewChatroom', ({
     })
   }
 
-  cy.getByDT('channelName').should('contain', name)
-
   cy.giWaitUntilMessagesLoaded()
+  cy.getByDT('channelName').should('contain', name)
   cy.getByDT('conversationWrapper').within(() => {
-    cy.get('.infinite-status-prompt:nth-child(3)')
-      .invoke('attr', 'style')
-      .should('not.include', 'display: none')
-    cy.get('.infinite-status-prompt:nth-child(3)').within(() => {
-      cy.get('.c-greetings .is-title-4').should('contain', 'Welcome!')
-      cy.get('.c-greetings p').should('contain', `This is the beginning of ${name}.`)
-      cy.get('.buttons').within(() => {
-        cy.getByDT('addMembers').should('exist')
-        if (!description) {
-          cy.getByDT('addDescription').should('exist')
-        }
-      })
-    })
+    cy.get('.c-greetings .is-title-4').should('contain', 'Welcome!')
+    cy.get('.c-greetings p').should('contain', `This is the beginning of ${name}.`)
+    cy.get('.buttons').within(() => {
+      cy.getByDT('addMembers').should('exist')
+      if (!description) {
+        cy.getByDT('addDescription').should('exist')
+      }
   })
 })
 

From 8e612d8109786e7b95d87a680126c8a740e50229 Mon Sep 17 00:00:00 2001
From: silver-it <alex.jin220@gmail.com>
Date: Thu, 13 Jun 2024 07:48:50 +0800
Subject: [PATCH 64/77] chore: reverted changes

---
 frontend/views/containers/chatroom/ChatMain.vue     |  4 ++--
 test/cypress/integration/group-chat-message.spec.js | 10 +++-------
 2 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/frontend/views/containers/chatroom/ChatMain.vue b/frontend/views/containers/chatroom/ChatMain.vue
index 11684e1fc..4fa37feea 100644
--- a/frontend/views/containers/chatroom/ChatMain.vue
+++ b/frontend/views/containers/chatroom/ChatMain.vue
@@ -977,8 +977,8 @@ export default ({
           const newContractState = await sbp('chelonia/in/processMessage', serializedMessage, this.messageState.contract)
 
           if (!this.checkEventSourceConsistency(contractID)) return
-
           Vue.set(this.messageState, 'contract', newContractState)
+
           this.latestEvents.push(serializedMessage)
 
           if (this.ephemeral.scrolledDistance < 50) {
@@ -988,7 +988,7 @@ export default ({
               const fromOurselves = this.isMsgSender(this.messages[this.messages.length - 1].from)
               if (!fromOurselves && isScrollable) {
                 this.updateScroll()
-              } else {
+              } else if (!isScrollable && this.messages.length) {
                 const msg = this.messages[this.messages.length - 1]
                 this.updateReadUntilMessageHash({
                   messageHash: msg.hash,
diff --git a/test/cypress/integration/group-chat-message.spec.js b/test/cypress/integration/group-chat-message.spec.js
index def626d69..7268dfcd9 100644
--- a/test/cypress/integration/group-chat-message.spec.js
+++ b/test/cypress/integration/group-chat-message.spec.js
@@ -237,19 +237,15 @@ describe('Send/edit/remove messages & add/remove emoticons & pin/unpin messages
     cy.giSendMessage(me, `I am a friend of ${makeMentionFromUsername(user1).me}. Let's work together.`)
   })
 
-  it('user2 checks a mention for himself', () => {
+  it('user2 and user1 check mentions for themselves', () => {
     switchUser(user2)
     cy.getByDT('groupChatLink').get('.c-badge.is-compact[aria-label="1 new notifications"]').contains('1')
     cy.giRedirectToGroupChat()
-    cy.giSendMessage(me, 'Welcome!')
     cy.get('[data-test="groupChatLink"] .c-badge.is-compact').should('not.exist')
-  })
 
-  it('user1 checks two mentions for himself', () => {
     switchUser(user1)
     cy.getByDT('groupChatLink').get('.c-badge.is-compact[aria-label="2 new notifications"]').contains('2')
     cy.giRedirectToGroupChat()
-    cy.giSendMessage(me, `Hi ${makeMentionFromUsername(user3).me}. Nice to see you here.`)
     cy.get('[data-test="groupChatLink"] .c-badge.is-compact').should('not.exist')
   })
 
@@ -265,7 +261,7 @@ describe('Send/edit/remove messages & add/remove emoticons & pin/unpin messages
     cy.getByDT('attachments').attachFile(fileNames[1])
     cy.giSendMessage(me, 'Sending two files; one is image, and the other is JSON file.')
 
-    cy.getByDT('conversationWrapper').find('.c-message:nth-child(12)').within(() => {
+    cy.getByDT('conversationWrapper').find('.c-message:nth-child(10)').within(() => {
       cy.get('.c-attachment-container').find('.c-attachment-preview:nth-child(2)').within(() => {
         cy.get('.c-attachment-actions-wrapper').invoke('attr', 'style', 'display: flex').invoke('show')
         cy.get('.c-attachment-actions span[aria-label="Delete"]').click()
@@ -279,7 +275,7 @@ describe('Send/edit/remove messages & add/remove emoticons & pin/unpin messages
       cy.getByDT('submitPrompt').click()
     })
 
-    cy.getByDT('conversationWrapper').find('.c-message:nth-child(12)').within(() => {
+    cy.getByDT('conversationWrapper').find('.c-message:nth-child(10)').within(() => {
       cy.get('.c-attachment-container').find('.c-attachment-preview').should('have.length', 2)
     })
   })

From 550e91594c84b9d71032c5260c3abc90bc00f011 Mon Sep 17 00:00:00 2001
From: silver-it <alex.jin220@gmail.com>
Date: Thu, 13 Jun 2024 07:51:06 +0800
Subject: [PATCH 65/77] fix: tiny error

---
 test/cypress/support/commands.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/test/cypress/support/commands.js b/test/cypress/support/commands.js
index b7c8b9cca..31f3f52cc 100644
--- a/test/cypress/support/commands.js
+++ b/test/cypress/support/commands.js
@@ -657,6 +657,7 @@ Cypress.Commands.add('giAddNewChatroom', ({
       if (!description) {
         cy.getByDT('addDescription').should('exist')
       }
+    })
   })
 })
 

From ca43ec2bf820a92ad38eac0e9f70e8054dca56d2 Mon Sep 17 00:00:00 2001
From: silver-it <alex.jin220@gmail.com>
Date: Thu, 13 Jun 2024 08:42:24 +0800
Subject: [PATCH 66/77] feat: added 'unpin message' in message actions

---
 frontend/views/containers/chatroom/ChatMain.vue       | 1 +
 frontend/views/containers/chatroom/Message.vue        | 1 +
 frontend/views/containers/chatroom/MessageActions.vue | 9 +++++++++
 frontend/views/containers/chatroom/MessageBase.vue    | 1 +
 frontend/views/containers/chatroom/MessagePoll.vue    | 1 +
 test/cypress/integration/group-chat-message.spec.js   | 8 ++++----
 6 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/frontend/views/containers/chatroom/ChatMain.vue b/frontend/views/containers/chatroom/ChatMain.vue
index 4fa37feea..4b07b4e12 100644
--- a/frontend/views/containers/chatroom/ChatMain.vue
+++ b/frontend/views/containers/chatroom/ChatMain.vue
@@ -89,6 +89,7 @@
           @scroll-to-replying-message='scrollToMessage(message.replyingMessage.hash)'
           @edit-message='(newMessage) => editMessage(message, newMessage)'
           @pin-to-channel='pinToChannel(message)'
+          @unpin-from-channel='unpinFromChannel(message.hash)'
           @delete-message='deleteMessage(message)'
           @delete-attachment='manifestCid => deleteAttachment(message, manifestCid)'
           @add-emoticon='addEmoticon(message, $event)'
diff --git a/frontend/views/containers/chatroom/Message.vue b/frontend/views/containers/chatroom/Message.vue
index 1cea7a4ff..7bc408648 100644
--- a/frontend/views/containers/chatroom/Message.vue
+++ b/frontend/views/containers/chatroom/Message.vue
@@ -7,6 +7,7 @@ message-base(
   @reply-message-clicked='$emit("scroll-to-replying-message")'
   @message-edited='editMessage'
   @pin-to-channel='$emit("pin-to-channel")'
+  @unpin-from-channel='$emit("unpin-from-channel")'
   @delete-attachment='deleteAttachment'
   @delete-message='$emit("delete-message")'
   :shouldRenderMarkdown='true'
diff --git a/frontend/views/containers/chatroom/MessageActions.vue b/frontend/views/containers/chatroom/MessageActions.vue
index 1b06358d7..29d629f9b 100644
--- a/frontend/views/containers/chatroom/MessageActions.vue
+++ b/frontend/views/containers/chatroom/MessageActions.vue
@@ -106,6 +106,15 @@ menu-parent(ref='menu')
         i.icon-thumbtack
         i18n Pin to channel
 
+      menu-item.is-icon-small(
+        v-if='isAlreadyPinned'
+        tag='button'
+        data-test='unpinMessage'
+        @click='action("unpinFromChannel", $event)'
+      )
+        i.icon-thumbtack
+        i18n Unpin from channel
+
       menu-item.is-icon-small.is-danger(
         tag='button'
         data-test='deleteMessage'
diff --git a/frontend/views/containers/chatroom/MessageBase.vue b/frontend/views/containers/chatroom/MessageBase.vue
index 32fab9182..e1524de08 100644
--- a/frontend/views/containers/chatroom/MessageBase.vue
+++ b/frontend/views/containers/chatroom/MessageBase.vue
@@ -98,6 +98,7 @@
     @reply='reply'
     @retry='$emit("retry")'
     @pinToChannel='$emit("pin-to-channel")'
+    @unpinFromChannel='$emit("unpin-from-channel")'
   )
 </template>
 
diff --git a/frontend/views/containers/chatroom/MessagePoll.vue b/frontend/views/containers/chatroom/MessagePoll.vue
index 6cb6254af..b7c299744 100644
--- a/frontend/views/containers/chatroom/MessagePoll.vue
+++ b/frontend/views/containers/chatroom/MessagePoll.vue
@@ -4,6 +4,7 @@ message-base.c-message-poll(
   @delete-message='deleteMessage'
   @add-emoticon='addEmoticon($event)'
   @pin-to-channel='$emit("pin-to-channel")'
+  @unpin-from-channel='$emit("unpin-from-channel")'
 )
   template(#body='')
     i18n.c-poll-created-sentence(tag='p') Created a new poll:
diff --git a/test/cypress/integration/group-chat-message.spec.js b/test/cypress/integration/group-chat-message.spec.js
index 7268dfcd9..91bb5ca58 100644
--- a/test/cypress/integration/group-chat-message.spec.js
+++ b/test/cypress/integration/group-chat-message.spec.js
@@ -281,9 +281,9 @@ describe('Send/edit/remove messages & add/remove emoticons & pin/unpin messages
   })
 
   it('user1 pins 3 messages and unpins 1 message', () => {
-    pinMessage(13)
+    pinMessage(11)
+    pinMessage(8)
     pinMessage(10)
-    pinMessage(12)
     cy.getByDT('numberOfPinnedMessages').should('contain', '3 Pinned')
     unpinMessage(1)
     cy.getByDT('numberOfPinnedMessages').should('contain', '2 Pinned')
@@ -295,7 +295,7 @@ describe('Send/edit/remove messages & add/remove emoticons & pin/unpin messages
       cy.get('.c-body>.c-pinned-message:first-child .c-pinned-message-content')
         .should('contain', 'Sending three profile pictures which are designed by Apple. Cute, right?')
       cy.get('.c-body>.c-pinned-message:last-child .c-pinned-message-content')
-        .should('contain', 'Welcome!')
+        .should('contain', 'Hi @all. Hope you are doing well.')
     })
   })
 
@@ -305,7 +305,7 @@ describe('Send/edit/remove messages & add/remove emoticons & pin/unpin messages
     })
 
     cy.getByDT('conversationWrapper').within(() => {
-      cy.get('.c-message:nth-child(12)').should('have.class', 'c-focused')
+      cy.get('.c-message:nth-child(10)').should('have.class', 'c-focused')
     })
   })
 

From ab4d91d6fc88fc5794ab3c61b45173181b9406db Mon Sep 17 00:00:00 2001
From: silver-it <alex.jin220@gmail.com>
Date: Thu, 13 Jun 2024 09:00:56 +0800
Subject: [PATCH 67/77] fix: error to display pinned messages in DM

---
 frontend/views/pages/GroupChat.vue | 50 ++++++++++++++++--------------
 1 file changed, 26 insertions(+), 24 deletions(-)

diff --git a/frontend/views/pages/GroupChat.vue b/frontend/views/pages/GroupChat.vue
index b1246749c..f3c62f0f5 100644
--- a/frontend/views/pages/GroupChat.vue
+++ b/frontend/views/pages/GroupChat.vue
@@ -57,7 +57,7 @@ page(pageTestName='groupChat' :miniHeader='isDirectMessage()')
             )
               i18n Delete channel
 
-  template(#description='' v-if='!isDirectMessage()')
+  template(#description='')
     .c-header-description
       span.c-pin-wrapper(
         data-test='numberOfPinnedMessages'
@@ -66,31 +66,30 @@ page(pageTestName='groupChat' :miniHeader='isDirectMessage()')
       )
         i.icon-thumbtack
         i18n(:args='{ messagesCount: pinnedMessages.length }') {messagesCount} Pinned
+      template(v-if='!isDirectMessage()')
         | ∙
-      i18n.is-unstyled.c-link(
-        tag='button'
-        @click='openModal("ChatMembersAllModal")'
-        :args='{ numMembers: summary.numberOfMembers  }'
-        data-test='channelMembers'
-      ) {numMembers} members
-      template(
-        v-if='summary.attributes.description || ourIdentityContractId === summary.attributes.creatorID'
-      )
-        | ∙
-        .is-unstyled(
-          v-if='summary.attributes.description'
-          :class='{"c-link": ourIdentityContractId === summary.attributes.creatorID}'
-          data-test='updateDescription'
-          @click='editDescription'
-        )
-          | {{ summary.attributes.description }}
-          i.icon-pencil-alt
-
         i18n.is-unstyled.c-link(
-          v-else
-          data-test='updateDescription'
-          @click='editDescription'
-        ) Add description
+          tag='button'
+          @click='openModal("ChatMembersAllModal")'
+          :args='{ numMembers: summary.numberOfMembers  }'
+          data-test='channelMembers'
+        ) {numMembers} members
+        template(v-if='summary.attributes.description || isChatRoomCreator')
+          | ∙
+          .is-unstyled(
+            v-if='summary.attributes.description'
+            :class='{"c-link": isChatRoomCreator}'
+            data-test='updateDescription'
+            @click='editDescription'
+          )
+            | {{ summary.attributes.description }}
+            i.icon-pencil-alt
+
+          i18n.is-unstyled.c-link(
+            v-else
+            data-test='updateDescription'
+            @click='editDescription'
+          ) Add description
 
   template(#sidebar='{ toggle }')
     chat-nav
@@ -195,6 +194,9 @@ export default ({
         return this.chatRoomPinnedMessages
       }
       return []
+    },
+    isChatRoomCreator () {
+      return this.ourIdentityContractId === this.summary.attributes.creatorID
     }
   },
   methods: {

From cf81c6e880c6781cb9e013963ac46a01e1c4e52d Mon Sep 17 00:00:00 2001
From: silver-it <alex.jin220@gmail.com>
Date: Thu, 13 Jun 2024 09:56:12 +0800
Subject: [PATCH 68/77] fix: error while logging out

---
 frontend/model/state.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/model/state.js b/frontend/model/state.js
index c0f07f6a7..7cf2fbaf0 100644
--- a/frontend/model/state.js
+++ b/frontend/model/state.js
@@ -405,7 +405,7 @@ const getters = {
   profilesByGroup (state, getters) {
     return groupID => {
       const profiles = {}
-      if (state.contracts[groupID].type !== 'gi.contracts/group') {
+      if (state.contracts[groupID]?.type !== 'gi.contracts/group') {
         return profiles
       }
       const groupProfiles = state[groupID].profiles || {}

From 2a621cb4518b03c39cf3791621775ffa466a735e Mon Sep 17 00:00:00 2001
From: silver-it <alex.jin220@gmail.com>
Date: Fri, 14 Jun 2024 08:36:18 +0800
Subject: [PATCH 69/77] fix: DRY

---
 frontend/model/contracts/chatroom.js | 178 +++++++++++++--------------
 1 file changed, 85 insertions(+), 93 deletions(-)

diff --git a/frontend/model/contracts/chatroom.js b/frontend/model/contracts/chatroom.js
index 412c29ee8..b23a73154 100644
--- a/frontend/model/contracts/chatroom.js
+++ b/frontend/model/contracts/chatroom.js
@@ -385,7 +385,7 @@ sbp('chelonia/defineContract', {
           addMessage(state, createMessage({ meta, data, hash, height, state, pending, innerSigningContractID }))
         } else if (direction !== 'outgoing') {
           // If an existing message is found, it's no longer pending.
-          delete existingMsg.pending
+          Vue.delete(existingMsg, 'pending')
         }
       },
       sideEffect ({ contractID, hash, height, meta, data, innerSigningContractID }, { state, getters }) {
@@ -417,27 +417,25 @@ sbp('chelonia/defineContract', {
         createdHeight: number,
         text: string
       })),
-      process ({ data, meta, innerSigningContractID }, { state }) {
+      process ({ data, meta }, { state }) {
         const { hash, text } = data
         const fnEditMessage = (message) => {
           Vue.set(message, 'text', text)
           Vue.set(message, 'updatedDate', meta.createdDate)
-        }
 
-        const msgIndex = findMessageIdx(hash, state.messages)
-        if (msgIndex >= 0 && innerSigningContractID === state.messages[msgIndex].from) {
-          fnEditMessage(state.messages[msgIndex])
-          if (state.renderingContext && state.messages[msgIndex].pending) {
-            // NOTE: 'pending' message attribute is not the original message attribute
-            //       and it is only set and used in Chat page
-            delete state.messages[msgIndex].pending
+          if (state.renderingContext && message.pending) {
+              // NOTE: 'pending' message attribute is not the original message attribute
+              //       and it is only set and used in Chat page
+              Vue.delete(message, 'pending')
           }
         }
 
-        const pinnedMsgIndex = findMessageIdx(hash, state.pinnedMessages)
-        if (pinnedMsgIndex >= 0) {
-          fnEditMessage(state.pinnedMessages[pinnedMsgIndex])
-        }
+        [state.messages, state.pinnedMessages].forEach(messageArray => {
+          const msgIndex = findMessageIdx(hash, messageArray)
+          if (msgIndex >= 0) {
+            fnEditMessage(messageArray[msgIndex])
+          }
+        })
       },
       sideEffect ({ contractID, data, innerSigningContractID }, { getters }) {
         const rootState = sbp('state/vuex/state')
@@ -496,24 +494,22 @@ sbp('chelonia/defineContract', {
       }),
       process ({ data, innerSigningContractID }, { state }) {
         const { hash } = data
-        const msgIndex = findMessageIdx(hash, state.messages)
-        if (msgIndex >= 0) {
-          state.messages.splice(msgIndex, 1)
-        }
-        // filter replied messages and check if the current message is original
-        for (const message of state.messages) {
-          if (message.replyingMessage?.hash === hash) {
-            message.replyingMessage.hash = null
-            message.replyingMessage.text = L('Original message was removed by {user}', {
-              user: makeMentionFromUserID(innerSigningContractID).me
-            })
+        [state.messages, state.pinnedMessages].forEach(messageArray => {
+          const msgIndex = findMessageIdx(hash, messageArray)
+          if (msgIndex >= 0) {
+            messageArray.splice(msgIndex, 1)
           }
-        }
 
-        const pinnedMsgIndex = findMessageIdx(hash, state.pinnedMessages)
-        if (pinnedMsgIndex >= 0) {
-          state.pinnedMessages.splice(pinnedMsgIndex, 1)
-        }
+          // filter replied messages and check if the current message is original
+          for (const message of messageArray) {
+            if (message.replyingMessage?.hash === hash) {
+              message.replyingMessage.hash = null
+              message.replyingMessage.text = L('Original message was removed by {user}', {
+                user: makeMentionFromUserID(innerSigningContractID).me
+              })
+            }
+          }
+        })
       },
       sideEffect ({ data, contractID, innerSigningContractID }) {
         const rootState = sbp('state/vuex/state')
@@ -562,14 +558,12 @@ sbp('chelonia/defineContract', {
           }
         }
 
-        const msgIndex = findMessageIdx(hash, state.messages)
-        if (msgIndex >= 0) {
-          fnDeleteAttachment(state.messages[msgIndex])
-        }
-        const pinnedMsgIndex = findMessageIdx(hash, state.pinnedMessages)
-        if (pinnedMsgIndex >= 0) {
-          fnDeleteAttachment(state.pinnedMessages[pinnedMsgIndex])
-        }
+        [state.messages, state.pinnedMessages].forEach(messageArray => {
+          const msgIndex = findMessageIdx(hash, messageArray)
+          if (msgIndex >= 0) {
+            fnDeleteAttachment(messageArray[msgIndex])
+          }
+        })
       },
       sideEffect ({ data, contractID, innerSigningContractID }) {
         const me = sbp('state/vuex/state').loggedIn.identityContractID
@@ -615,14 +609,12 @@ sbp('chelonia/defineContract', {
           }
         }
 
-        const msgIndex = findMessageIdx(hash, state.messages)
-        if (msgIndex >= 0) {
-          fnMakeEmotion(state.messages[msgIndex])
-        }
-        const pinnedMsgIndex = findMessageIdx(hash, state.pinnedMessages)
-        if (pinnedMsgIndex >= 0) {
-          fnMakeEmotion(state.pinnedMessages[pinnedMsgIndex])
-        }
+        [state.messages, state.pinnedMessages].forEach(messageArray => {
+          const msgIndex = findMessageIdx(hash, messageArray)
+          if (msgIndex >= 0) {
+            fnMakeEmotion(messageArray[msgIndex])
+          }
+        })
       }
     },
     'gi.contracts/chatroom/voteOnPoll': {
@@ -644,29 +636,28 @@ sbp('chelonia/defineContract', {
           Vue.set(message, 'pollData', { ...pollData, options: optsCopy })
         }
 
-        const pinnedMsgIndex = findMessageIdx(data.hash, state.pinnedMessages)
-        if (pinnedMsgIndex >= 0) {
-          fnVoteOnPoll(state.pinnedMessages[pinnedMsgIndex])
-        }
+        let shouldHideVoters = false
+        [state.messages, state.pinnedMessages].forEach(messageArray => {
+          const msgIndex = findMessageIdx(hash, messageArray)
+          if (msgIndex >= 0) {
+            fnVoteOnPoll(messageArray[msgIndex])
 
-        const msgIndex = findMessageIdx(data.hash, state.messages)
-        if (msgIndex >= 0) {
-          fnVoteOnPoll(state.messages[msgIndex])
+            // TODO: https://github.com/okTurtles/group-income/issues/2010
+            shouldHideVoters = shouldHideVoters || messageArray[msgIndex].pollData.hideVoters
+          }
+        })
 
-          // TODO: this doesn't always run. fix it
-          //       https://github.com/okTurtles/group-income/issues/2010
-          if (state.messages[msgIndex].pollData.hideVoters) { return }
+        if (!shouldHideVoters) {
+          // create & add a notification-message for user having voted.
+          const notificationData = createNotificationData(
+            MESSAGE_NOTIFICATIONS.VOTE_ON_POLL,
+            {
+              votedOptions: data.votesAsString,
+              pollMessageHash: data.hash
+            }
+          )
+          addMessage(state, createMessage({ meta, hash, height, state, data: notificationData, innerSigningContractID }))
         }
-
-        // create & add a notification-message for user having voted.
-        const notificationData = createNotificationData(
-          MESSAGE_NOTIFICATIONS.VOTE_ON_POLL,
-          {
-            votedOptions: data.votesAsString,
-            pollMessageHash: data.hash
-          }
-        )
-        addMessage(state, createMessage({ meta, hash, height, state, data: notificationData, innerSigningContractID }))
       }
     },
     'gi.contracts/chatroom/changeVoteOnPoll': {
@@ -693,29 +684,28 @@ sbp('chelonia/defineContract', {
           Vue.set(message, 'pollData', { ...pollData, options: optsCopy })
         }
 
-        const pinnedMsgIndex = findMessageIdx(data.hash, state.pinnedMessages)
-        if (pinnedMsgIndex >= 0) {
-          fnChangeVoteOnPoll(state.pinnedMessages[pinnedMsgIndex])
-        }
+        let shouldHideVoters = false
+        [state.messages, state.pinnedMessages].forEach(messageArray => {
+          const msgIndex = findMessageIdx(hash, messageArray)
+          if (msgIndex >= 0) {
+            fnChangeVoteOnPoll(messageArray[msgIndex])
 
-        const msgIndex = findMessageIdx(data.hash, state.messages)
-        if (msgIndex >= 0) {
-          fnChangeVoteOnPoll(state.messages[msgIndex])
+            // TODO: https://github.com/okTurtles/group-income/issues/2010
+            shouldHideVoters = shouldHideVoters || messageArray[msgIndex].pollData.hideVoters
+          }
+        })
 
-          // TODO: this doesn't always run. fix it
-          //       https://github.com/okTurtles/group-income/issues/2010
-          if (state.messages[msgIndex].pollData.hideVoters) { return }
+        if (!shouldHideVoters) {
+          // create & add a notification-message for user having update his/her votes.
+          const notificationData = createNotificationData(
+            MESSAGE_NOTIFICATIONS.CHANGE_VOTE_ON_POLL,
+            {
+              votedOptions: data.votesAsString,
+              pollMessageHash: data.hash
+            }
+          )
+          addMessage(state, createMessage({ meta, hash, height, state, data: notificationData, innerSigningContractID }))
         }
-
-        // create & add a notification-message for user having update his/her votes.
-        const notificationData = createNotificationData(
-          MESSAGE_NOTIFICATIONS.CHANGE_VOTE_ON_POLL,
-          {
-            votedOptions: data.votesAsString,
-            pollMessageHash: data.hash
-          }
-        )
-        addMessage(state, createMessage({ meta, hash, height, state, data: notificationData, innerSigningContractID }))
       }
     },
     'gi.contracts/chatroom/closePoll': {
@@ -723,14 +713,16 @@ sbp('chelonia/defineContract', {
         hash: string
       })),
       process ({ data }, { state }) {
-        const msgIndex = findMessageIdx(data.hash, state.messages)
-        if (msgIndex >= 0) {
-          Vue.set(state.messages[msgIndex].pollData, 'status', POLL_STATUS.CLOSED)
-        }
-        const pinnedMsgIndex = findMessageIdx(data.hash, state.pinnedMessages)
-        if (pinnedMsgIndex >= 0) {
-          Vue.set(state.pinnedMessages[pinnedMsgIndex].pollData, 'status', POLL_STATUS.CLOSED)
+        const fnClosePoll = (message) => {
+          Vue.set(message.pollData, 'status', POLL_STATUS.CLOSED)
         }
+
+        [state.messages, state.pinnedMessages].forEach(messageArray => {
+          const msgIndex = findMessageIdx(hash, messageArray)
+          if (msgIndex >= 0) {
+            fnClosePoll(messageArray[msgIndex])
+          }
+        })
       }
     },
     'gi.contracts/chatroom/pinMessage': {

From 3e6c4e731d7ccee35066d897132b3f8ea31f92d5 Mon Sep 17 00:00:00 2001
From: silver-it <alex.jin220@gmail.com>
Date: Fri, 14 Jun 2024 08:44:39 +0800
Subject: [PATCH 70/77] fix: syntax errors

---
 frontend/model/contracts/chatroom.js | 41 ++++++++++++++--------------
 1 file changed, 20 insertions(+), 21 deletions(-)

diff --git a/frontend/model/contracts/chatroom.js b/frontend/model/contracts/chatroom.js
index b23a73154..db85d8d61 100644
--- a/frontend/model/contracts/chatroom.js
+++ b/frontend/model/contracts/chatroom.js
@@ -424,9 +424,9 @@ sbp('chelonia/defineContract', {
           Vue.set(message, 'updatedDate', meta.createdDate)
 
           if (state.renderingContext && message.pending) {
-              // NOTE: 'pending' message attribute is not the original message attribute
-              //       and it is only set and used in Chat page
-              Vue.delete(message, 'pending')
+            // NOTE: 'pending' message attribute is not the original message attribute
+            //       and it is only set and used in Chat page
+            Vue.delete(message, 'pending')
           }
         }
 
@@ -493,16 +493,15 @@ sbp('chelonia/defineContract', {
         }
       }),
       process ({ data, innerSigningContractID }, { state }) {
-        const { hash } = data
         [state.messages, state.pinnedMessages].forEach(messageArray => {
-          const msgIndex = findMessageIdx(hash, messageArray)
+          const msgIndex = findMessageIdx(data.hash, messageArray)
           if (msgIndex >= 0) {
             messageArray.splice(msgIndex, 1)
           }
 
           // filter replied messages and check if the current message is original
           for (const message of messageArray) {
-            if (message.replyingMessage?.hash === hash) {
+            if (message.replyingMessage?.hash === data.hash) {
               message.replyingMessage.hash = null
               message.replyingMessage.text = L('Original message was removed by {user}', {
                 user: makeMentionFromUserID(innerSigningContractID).me
@@ -547,19 +546,18 @@ sbp('chelonia/defineContract', {
         messageSender: string
       })),
       process ({ data }, { state }) {
-        const { hash, manifestCid } = data
         const fnDeleteAttachment = (message) => {
           const oldAttachments = message.attachments
           if (Array.isArray(oldAttachments)) {
             const newAttachments = oldAttachments.filter(attachment => {
-              return attachment.downloadData.manifestCid !== manifestCid
+              return attachment.downloadData.manifestCid !== data.manifestCid
             })
             Vue.set(message, 'attachments', newAttachments)
           }
         }
 
         [state.messages, state.pinnedMessages].forEach(messageArray => {
-          const msgIndex = findMessageIdx(hash, messageArray)
+          const msgIndex = findMessageIdx(data.hash, messageArray)
           if (msgIndex >= 0) {
             fnDeleteAttachment(messageArray[msgIndex])
           }
@@ -624,6 +622,8 @@ sbp('chelonia/defineContract', {
         votesAsString: string
       })),
       process ({ data, meta, hash, height, innerSigningContractID }, { state }) {
+        let shouldHideVoters = false
+
         const fnVoteOnPoll = (message) => {
           const myVotes = data.votes
           const pollData = message.pollData
@@ -634,16 +634,15 @@ sbp('chelonia/defineContract', {
           })
 
           Vue.set(message, 'pollData', { ...pollData, options: optsCopy })
+
+          // TODO: https://github.com/okTurtles/group-income/issues/2010
+          shouldHideVoters = shouldHideVoters || message.pollData.hideVoters
         }
 
-        let shouldHideVoters = false
         [state.messages, state.pinnedMessages].forEach(messageArray => {
           const msgIndex = findMessageIdx(hash, messageArray)
           if (msgIndex >= 0) {
             fnVoteOnPoll(messageArray[msgIndex])
-
-            // TODO: https://github.com/okTurtles/group-income/issues/2010
-            shouldHideVoters = shouldHideVoters || messageArray[msgIndex].pollData.hideVoters
           }
         })
 
@@ -667,6 +666,8 @@ sbp('chelonia/defineContract', {
         votesAsString: string
       })),
       process ({ data, meta, hash, height, innerSigningContractID }, { state }) {
+        let shouldHideVoters = false
+
         const fnChangeVoteOnPoll = (message) => {
           const myUpdatedVotes = data.votes
           const pollData = message.pollData
@@ -682,16 +683,15 @@ sbp('chelonia/defineContract', {
           })
 
           Vue.set(message, 'pollData', { ...pollData, options: optsCopy })
+
+          // TODO: https://github.com/okTurtles/group-income/issues/2010
+          shouldHideVoters = shouldHideVoters || message.pollData.hideVoters
         }
 
-        let shouldHideVoters = false
         [state.messages, state.pinnedMessages].forEach(messageArray => {
           const msgIndex = findMessageIdx(hash, messageArray)
           if (msgIndex >= 0) {
             fnChangeVoteOnPoll(messageArray[msgIndex])
-
-            // TODO: https://github.com/okTurtles/group-income/issues/2010
-            shouldHideVoters = shouldHideVoters || messageArray[msgIndex].pollData.hideVoters
           }
         })
 
@@ -718,7 +718,7 @@ sbp('chelonia/defineContract', {
         }
 
         [state.messages, state.pinnedMessages].forEach(messageArray => {
-          const msgIndex = findMessageIdx(hash, messageArray)
+          const msgIndex = findMessageIdx(data.hash, messageArray)
           if (msgIndex >= 0) {
             fnClosePoll(messageArray[msgIndex])
           }
@@ -744,13 +744,12 @@ sbp('chelonia/defineContract', {
         hash: string
       })),
       process ({ data }, { state }) {
-        const { hash } = data
-        const pinnedMsgIndex = findMessageIdx(hash, state.pinnedMessages)
+        const pinnedMsgIndex = findMessageIdx(data.hash, state.pinnedMessages)
         if (pinnedMsgIndex >= 0) {
           state.pinnedMessages.splice(pinnedMsgIndex, 1)
         }
 
-        const msgIndex = findMessageIdx(hash, state.messages)
+        const msgIndex = findMessageIdx(data.hash, state.messages)
         if (msgIndex >= 0) {
           Vue.delete(state.messages[msgIndex], 'pinnedBy')
         }

From 37e3ab68d73fe56a7429237dc2693a3ad6d95d26 Mon Sep 17 00:00:00 2001
From: silver-it <alex.jin220@gmail.com>
Date: Tue, 18 Jun 2024 08:22:48 +0800
Subject: [PATCH 71/77] fix: error in using variable 'hash'

---
 frontend/model/contracts/chatroom.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/model/contracts/chatroom.js b/frontend/model/contracts/chatroom.js
index db85d8d61..a47bceae3 100644
--- a/frontend/model/contracts/chatroom.js
+++ b/frontend/model/contracts/chatroom.js
@@ -640,7 +640,7 @@ sbp('chelonia/defineContract', {
         }
 
         [state.messages, state.pinnedMessages].forEach(messageArray => {
-          const msgIndex = findMessageIdx(hash, messageArray)
+          const msgIndex = findMessageIdx(data.hash, messageArray)
           if (msgIndex >= 0) {
             fnVoteOnPoll(messageArray[msgIndex])
           }
@@ -689,7 +689,7 @@ sbp('chelonia/defineContract', {
         }
 
         [state.messages, state.pinnedMessages].forEach(messageArray => {
-          const msgIndex = findMessageIdx(hash, messageArray)
+          const msgIndex = findMessageIdx(data.hash, messageArray)
           if (msgIndex >= 0) {
             fnChangeVoteOnPoll(messageArray[msgIndex])
           }

From 511b19047234d9c7bd0572ef2b90ce8df7757a45 Mon Sep 17 00:00:00 2001
From: silver-it <alex.jin220@gmail.com>
Date: Wed, 19 Jun 2024 05:19:44 +0800
Subject: [PATCH 72/77] fix: remove useless ipmort

---
 frontend/views/containers/chatroom/PinnedMessages.vue | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/frontend/views/containers/chatroom/PinnedMessages.vue b/frontend/views/containers/chatroom/PinnedMessages.vue
index 1faf7b5b2..9b51c5ae1 100644
--- a/frontend/views/containers/chatroom/PinnedMessages.vue
+++ b/frontend/views/containers/chatroom/PinnedMessages.vue
@@ -58,14 +58,10 @@ import {
   CHATROOM_CHANNEL_MENTION_SPECIAL_CHAR
 } from '@model/contracts/shared/constants.js'
 import { renderMarkdown } from '@view-utils/markdown-utils.js'
-import trapFocus from '@utils/trapFocus.js'
 import { makeMentionFromUserID, makeChannelMention } from '@model/contracts/shared/functions.js'
 
 export default {
   name: 'PinnedMessages',
-  mixins: [
-    trapFocus
-  ],
   components: {
     AvatarUser,
     Tooltip,
@@ -186,11 +182,9 @@ export default {
     this.ephemeral.isDesktopScreen = this.matchMediaDesktop.matches
 
     window.addEventListener('resize', this.resizeHandler)
-    document.addEventListener('keydown', this.trapFocus)
   },
   beforeDestroy () {
     window.removeEventListener('resize', this.resizeHandler)
-    document.removeEventListener('keydown', this.trapFocus)
 
     this.matchMediaDesktop.onchange = null
   }

From 7a03e0d98d7466bcc70500d30602aecd02aa4861 Mon Sep 17 00:00:00 2001
From: silver-it <alex.jin220@gmail.com>
Date: Wed, 19 Jun 2024 05:24:39 +0800
Subject: [PATCH 73/77] fix: flow error regarding variable initialization

---
 frontend/controller/actions/identity.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/controller/actions/identity.js b/frontend/controller/actions/identity.js
index bab3e75fa..ccd86adb8 100644
--- a/frontend/controller/actions/identity.js
+++ b/frontend/controller/actions/identity.js
@@ -798,7 +798,8 @@ export default (sbp('sbp/selectors/register', {
     }
 
     if (deleteResult?.some(r => r.status === 'rejected')) {
-      console.error('[gi.actions/identity/removeFiles] Some CIDs could not be deleted', deleteResult.map((r, i) => r.status === 'rejected' && toDelete[i]).filter(Boolean))
+      console.error('[gi.actions/identity/removeFiles] Some CIDs could not be deleted',
+        (deleteResult || []).map((r, i) => r.status === 'rejected' && toDelete[i]).filter(Boolean))
       throw new Error('Some CIDs could not be deleted')
     }
   },

From cda579de5ffc0b8c78d8f965c071cc087dec438a Mon Sep 17 00:00:00 2001
From: silver-it <alex.jin220@gmail.com>
Date: Wed, 19 Jun 2024 12:31:59 +0800
Subject: [PATCH 74/77] fix: optimization and added comments

---
 .../containers/chatroom/MessageActions.vue    | 27 +++++++++----------
 .../file-attachment/ChatAttachmentPreview.vue |  2 ++
 frontend/views/pages/DesignSystem.vue         |  2 +-
 3 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/frontend/views/containers/chatroom/MessageActions.vue b/frontend/views/containers/chatroom/MessageActions.vue
index 29d629f9b..3de90e59d 100644
--- a/frontend/views/containers/chatroom/MessageActions.vue
+++ b/frontend/views/containers/chatroom/MessageActions.vue
@@ -7,7 +7,7 @@ menu-parent(ref='menu')
     )
       button.hide-touch.is-icon-small(
         :aria-label='L("Add reaction")'
-        @click='action("openEmoticon", $event)'
+        @click.stop='action("openEmoticon", $event)'
       )
         i.icon-smile-beam
 
@@ -18,7 +18,7 @@ menu-parent(ref='menu')
     )
       button.hide-touch.is-icon-small(
         :aria-label='L("Edit")'
-        @click='action("editMessage", $event)'
+        @click.stop='action("editMessage")'
       )
         i.icon-pencil-alt
 
@@ -29,7 +29,7 @@ menu-parent(ref='menu')
     )
       button.hide-touch.is-icon-small(
         :aria-label='L("Reply")'
-        @click='action("reply", $event)'
+        @click.stop='action("reply")'
       )
         i.icon-reply
 
@@ -40,7 +40,7 @@ menu-parent(ref='menu')
     )
       button.hide-touch.is-icon-small(
         :aria-label='L("Retry")'
-        @click='action("retry", $event)'
+        @click.stop='action("retry")'
       )
         i.icon-undo
 
@@ -53,7 +53,7 @@ menu-parent(ref='menu')
     ul
       menu-item.hide-desktop.is-icon-small(
         tag='button'
-        @click='action("openEmoticon", $event)'
+        @click.stop='action("openEmoticon", $event)'
       )
         i.icon-smile-beam
         i18n Add reaction
@@ -61,7 +61,7 @@ menu-parent(ref='menu')
       menu-item.hide-desktop.is-icon-small(
         tag='button'
         v-if='isEditable'
-        @click='action("editMessage", $event)'
+        @click.stop='action("editMessage")'
       )
         i.icon-pencil-alt
         i18n Edit
@@ -69,7 +69,7 @@ menu-parent(ref='menu')
       menu-item.hide-desktop.is-icon-small(
         tag='button'
         v-if='isText'
-        @click='action("reply", $event)'
+        @click.stop='action("reply")'
       )
         i.icon-reply
         i18n Reply
@@ -77,7 +77,7 @@ menu-parent(ref='menu')
       menu-item.hide-desktop.is-icon-small(
         tag='button'
         v-if='variant==="failed"'
-        @click='action("retry", $event)'
+        @click.stop='action("retry")'
       )
         i.icon-undo
         i18n Add emoticons
@@ -85,14 +85,14 @@ menu-parent(ref='menu')
       menu-item.is-icon-small(
         v-if='isText'
         tag='button'
-        @click='action("copyMessageText", $event)'
+        @click.stop='action("copyMessageText")'
       )
         i.icon-copy
         i18n Copy message text
 
       menu-item.is-icon-small(
         tag='button'
-        @click='action("copyMessageLink", $event)'
+        @click.stop='action("copyMessageLink")'
       )
         i.icon-link
         i18n Copy message link
@@ -101,7 +101,7 @@ menu-parent(ref='menu')
         v-if='!isAlreadyPinned && isPinnable'
         tag='button'
         data-test='pinMessage'
-        @click='action("pinToChannel", $event)'
+        @click.stop='action("pinToChannel")'
       )
         i.icon-thumbtack
         i18n Pin to channel
@@ -110,7 +110,7 @@ menu-parent(ref='menu')
         v-if='isAlreadyPinned'
         tag='button'
         data-test='unpinMessage'
-        @click='action("unpinFromChannel", $event)'
+        @click.stop='action("unpinFromChannel")'
       )
         i.icon-thumbtack
         i18n Unpin from channel
@@ -119,7 +119,7 @@ menu-parent(ref='menu')
         tag='button'
         data-test='deleteMessage'
         v-if='isDeletable'
-        @click='action("deleteMessage", $event)'
+        @click.stop='action("deleteMessage")'
       )
         i.icon-trash-alt
         i18n Delete message
@@ -172,7 +172,6 @@ export default ({
   },
   methods: {
     action (type, e) {
-      e.stopPropagation()
       const copyString = str => {
         navigator?.clipboard.writeText(str)
       }
diff --git a/frontend/views/containers/chatroom/file-attachment/ChatAttachmentPreview.vue b/frontend/views/containers/chatroom/file-attachment/ChatAttachmentPreview.vue
index 17ab90f03..41cae14cb 100644
--- a/frontend/views/containers/chatroom/file-attachment/ChatAttachmentPreview.vue
+++ b/frontend/views/containers/chatroom/file-attachment/ChatAttachmentPreview.vue
@@ -178,6 +178,8 @@ export default {
         aTag.setAttribute('download', attachment.name)
 
         aTag.addEventListener('click', function (event) {
+          // NOTE: should call stopPropagation here to keep showing the PinnedMessages dialog
+          //       when user trys to download attachment inside the dialog
           event.stopPropagation()
         })
 
diff --git a/frontend/views/pages/DesignSystem.vue b/frontend/views/pages/DesignSystem.vue
index f105ae123..b46d0f171 100644
--- a/frontend/views/pages/DesignSystem.vue
+++ b/frontend/views/pages/DesignSystem.vue
@@ -149,7 +149,7 @@ page(
     section.card
       h2.is-title-2.card-header Icons
       p
-        | This is only the currently used icons at (_icons.scss). A complete list can be find here:&nbsp;
+        | This is only the currently used icons (at _icons.scss). A complete list can be find here:&nbsp;
         br
         a.link(href='https://fortawesome.com/sets/font-awesome-5-solid' target='_blank') fortawesome 5 solid
         |  or&nbsp;

From 9be73e34a216f4aaef1dfffc339d36ab72dc3343 Mon Sep 17 00:00:00 2001
From: silver-it <alex.jin220@gmail.com>
Date: Thu, 20 Jun 2024 05:33:16 +0800
Subject: [PATCH 75/77] fix: resolved flow lint error

---
 frontend/controller/actions/identity.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/controller/actions/identity.js b/frontend/controller/actions/identity.js
index bab3e75fa..4456f3c23 100644
--- a/frontend/controller/actions/identity.js
+++ b/frontend/controller/actions/identity.js
@@ -798,7 +798,8 @@ export default (sbp('sbp/selectors/register', {
     }
 
     if (deleteResult?.some(r => r.status === 'rejected')) {
-      console.error('[gi.actions/identity/removeFiles] Some CIDs could not be deleted', deleteResult.map((r, i) => r.status === 'rejected' && toDelete[i]).filter(Boolean))
+      console.error('[gi.actions/identity/removeFiles] Some CIDs could not be deleted',
+        deleteResult?.map((r, i) => r.status === 'rejected' && toDelete[i]).filter(Boolean))
       throw new Error('Some CIDs could not be deleted')
     }
   },

From d71fd7a4326448b36f486d1cf4651f159beefa39 Mon Sep 17 00:00:00 2001
From: silver-it <alex.jin220@gmail.com>
Date: Thu, 20 Jun 2024 05:50:41 +0800
Subject: [PATCH 76/77] fix: text overflow error inside PinnedMessages

---
 frontend/views/containers/chatroom/PinnedMessages.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/views/containers/chatroom/PinnedMessages.vue b/frontend/views/containers/chatroom/PinnedMessages.vue
index 9b51c5ae1..a739fd0b7 100644
--- a/frontend/views/containers/chatroom/PinnedMessages.vue
+++ b/frontend/views/containers/chatroom/PinnedMessages.vue
@@ -304,6 +304,7 @@ export default {
 
     .c-pinned-message-content {
       margin: 0.5rem 0;
+      word-break: break-word;
 
       .c-poll-inner {
         position: relative;

From 31441ff57b64523e5298ab259a15eb89c5b3b613 Mon Sep 17 00:00:00 2001
From: silver-it <alex.jin220@gmail.com>
Date: Thu, 20 Jun 2024 06:55:31 +0800
Subject: [PATCH 77/77] fix: to remove mhash in the query after hightlight it

---
 frontend/views/containers/chatroom/ChatMain.vue | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/frontend/views/containers/chatroom/ChatMain.vue b/frontend/views/containers/chatroom/ChatMain.vue
index b41108008..f4e4a924f 100644
--- a/frontend/views/containers/chatroom/ChatMain.vue
+++ b/frontend/views/containers/chatroom/ChatMain.vue
@@ -806,17 +806,17 @@ export default ({
         if (events.length) {
           // NOTE: if 'messageHashToScroll' was not there in the messages of the contract state
           //       we need to retrieve more events, and render to scroll to that message
-          this.updateScroll(messageHashToScroll, Boolean(mhash)).then(() => {
-            // NOTE: delete mhash in the query after scroll and highlight the message with mhash
-            if (mhash) {
-              const newQuery = { ...this.$route.query }
-              delete newQuery.mhash
-              this.$router.replace({ query: newQuery })
-            }
-          })
+          this.updateScroll(messageHashToScroll, Boolean(mhash))
         } else {
           // NOTE: we need to scroll to the message first in order to no more infiniteHandler is called
           await this.updateScroll(messageHashToScroll, Boolean(mhash))
+
+          if (mhash) {
+            // NOTE: delete mhash in the query after scroll and highlight the message with mhash
+            const newQuery = { ...this.$route.query }
+            delete newQuery.mhash
+            this.$router.replace({ query: newQuery })
+          }
         }
       }