From d0546b66fde74e2e3f2c64280403a13fb18b6c6d Mon Sep 17 00:00:00 2001
From: skranee <125743202+skranee@users.noreply.github.com>
Date: Sun, 6 Apr 2025 23:01:20 +0300
Subject: [PATCH 01/18] feat: starting a new chat placholder init

---
 src/assets/styles/components/_chat.scss |  1 +
 src/components/AChat/AChat.vue          |  7 +++
 src/components/Chat/Chat.vue            | 21 +++++++-
 src/components/Chat/ChatPlaceholder.vue | 71 +++++++++++++++++++++++++
 src/locales/en.json                     |  6 +++
 src/locales/ru.json                     |  6 +++
 6 files changed, 110 insertions(+), 2 deletions(-)
 create mode 100644 src/components/Chat/ChatPlaceholder.vue

diff --git a/src/assets/styles/components/_chat.scss b/src/assets/styles/components/_chat.scss
index da7f78afd..232da69d8 100644
--- a/src/assets/styles/components/_chat.scss
+++ b/src/assets/styles/components/_chat.scss
@@ -52,6 +52,7 @@ $scroll-bar-width: 4px;
     left: 0;
     overflow-y: scroll;
     overflow-x: hidden;
+    scrollbar-gutter: stable both-edges;
     width: 100%;
     height: 100%;
     padding: 16px 16px 0 16px;
diff --git a/src/components/AChat/AChat.vue b/src/components/AChat/AChat.vue
index 278c34350..2f6495865 100644
--- a/src/components/AChat/AChat.vue
+++ b/src/components/AChat/AChat.vue
@@ -17,6 +17,9 @@
         </div>
 
         <div ref="messagesRef" :class="classes.bodyMessages">
+          <div v-if="showPlaceholder">
+            <slot name="placeholder" />
+          </div>
           <template v-for="message in messages" :key="message.id">
             <slot
               name="message"
@@ -84,6 +87,10 @@ export default defineComponent({
     locale: {
       type: String,
       default: 'en'
+    },
+    showPlaceholder: {
+      type: Boolean,
+      default: false
     }
   },
   emits: ['scroll', 'scroll:bottom', 'scroll:top'],
diff --git a/src/components/Chat/Chat.vue b/src/components/Chat/Chat.vue
index 5362fb68a..8d9dacdc0 100644
--- a/src/components/Chat/Chat.vue
+++ b/src/components/Chat/Chat.vue
@@ -5,6 +5,7 @@
       ref="chatRef"
       :messages="messages"
       :partners="partners"
+      :show-placeholder="showNewChatPlaceholder"
       :user-id="userId"
       :loading="loading"
       :locale="$i18n.locale"
@@ -83,6 +84,10 @@
         </chat-toolbar>
       </template>
 
+      <template #placeholder>
+        <chat-placeholder />
+      </template>
+
       <template #message="{ message, sender }">
         <a-chat-message
           v-if="message.type === 'message'"
@@ -298,6 +303,7 @@ import AChatAttachment from '@/components/AChat/AChatAttachment/AChatAttachment.
 import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 import { useStore } from 'vuex'
+import ChatPlaceholder from '@/components/Chat/ChatPlaceholder.vue'
 
 const validationErrors = {
   emptyMessage: 'EMPTY_MESSAGE',
@@ -350,6 +356,7 @@ const actionsMenuMessageId = ref<string | -1>(-1)
 const actionsDropdownMessageId = ref<string | -1>(-1)
 const replyMessageId = ref<string | -1>(-1)
 const showEmojiPicker = ref(false)
+const showNewChatPlaceholder = ref(false)
 
 const messages = computed(() => store.getters['chat/messages'](props.partnerId))
 const userId = computed(() => store.state.address)
@@ -421,8 +428,18 @@ watch(replyMessageId, (messageId) => {
 onBeforeMount(() => {
   window.addEventListener('keyup', onKeyPress)
 })
-onMounted(() => {
-  if (isFulfilled.value && chatPage.value <= 0) fetchChatMessages()
+onMounted(async () => {
+  if (isFulfilled.value && chatPage.value <= 0) await fetchChatMessages()
+
+  if (chatPage.value) {
+    const userMessages = messages.value.filter(
+      (message: NormalizedChatMessageTransaction) =>
+        message.senderId && message.senderId === userId.value
+    )
+
+    showNewChatPlaceholder.value = !userMessages.length
+  }
+
   scrollBehavior()
   nextTick(() => {
     isScrolledToBottom.value = chatRef.value.isScrolledToBottom()
diff --git a/src/components/Chat/ChatPlaceholder.vue b/src/components/Chat/ChatPlaceholder.vue
new file mode 100644
index 000000000..9e89ba2cf
--- /dev/null
+++ b/src/components/Chat/ChatPlaceholder.vue
@@ -0,0 +1,71 @@
+<template>
+  <div :class="className">
+    <div :class="`${className}__container`">
+      <Logo style="width: 35px" />
+      <p v-for="key in keys" :key="key" :class="`${className}__row`">
+        {{ $t(`chats.placeholder.${key}`) }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import Logo from '@/components/icons/common/Logo.vue'
+
+const className = 'chat-placeholder'
+const keys = ['encrypted', 'ipfs', 'anonymous', 'censorship']
+</script>
+
+<style lang="scss" scoped>
+@use 'sass:map';
+@use '@/assets/styles/settings/_colors.scss';
+
+.chat-placeholder {
+  width: 100%;
+  padding: 8px 0;
+  margin: 16px 0;
+
+  &__container {
+    margin: auto;
+    display: flex;
+    width: fit-content;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    row-gap: 5px;
+    padding: 16px;
+    background: map.get(colors.$adm-colors, 'black');
+    border-radius: 8px;
+  }
+
+  &__row {
+    width: 100%;
+    text-align: center;
+  }
+}
+
+/** Themes **/
+.v-theme--light {
+  .chat-placeholder {
+    &__container {
+      background: #fff;
+      box-shadow:
+        0 1px 10px hsla(0, 0%, 39.2%, 0.06),
+        0 1px 1px hsla(0, 0%, 39.2%, 0.04),
+        0 2px 10px -1px hsla(0, 0%, 39.2%, 0.02);
+    }
+  }
+}
+
+.v-theme--dark {
+  .chat-placeholder {
+    &__container {
+      background-color: map.get(colors.$adm-colors, 'black');
+      box-shadow:
+        0 1px 10px hsla(0, 0%, 39.2%, 0.06),
+        0 1px 1px hsla(0, 0%, 39.2%, 0.04),
+        0 2px 10px -1px hsla(0, 0%, 39.2%, 0.02);
+    }
+  }
+}
+</style>
diff --git a/src/locales/en.json b/src/locales/en.json
index 51a3835c3..c2bcfaae3 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -33,6 +33,12 @@
     "ok": "OK",
     "partner_info": "Partner's info",
     "partner_name": "Partner's name",
+    "placeholder": {
+      "encrypted": "\uD83D\uDD10 End-to-end encrypted across all devices",
+      "ipfs": "☁\uFE0F Decentralized IPFS storage for files/media",
+      "anonymous": "\uD83D\uDD76\uFE0F Anonymous: partners never see your IP address",
+      "censorship": "⛓\uFE0F Censorship-resistant blockchain architecture"
+    },
     "received_label": "Received",
     "recipient": "Partner's address",
     "recipient_tooltip": "Partner's ADM address like U1234567890987654321 or Share link",
diff --git a/src/locales/ru.json b/src/locales/ru.json
index 4820c4797..70e684456 100644
--- a/src/locales/ru.json
+++ b/src/locales/ru.json
@@ -33,6 +33,12 @@
     "ok": "OK",
     "partner_info": "Собеседник",
     "partner_name": "Имя собеседника",
+    "placeholder": {
+      "encrypted": "\uD83D\uDD10 Сквозное шифрование на всех устройствах",
+      "ipfs": "☁\uFE0F Распределенное IPFS-хранилище файлов и медиа",
+      "anonymous": "\uD83D\uDD76\uFE0F Анонимно: ваш IP-адрес скрыт от собеседников",
+      "censorship": "⛓\uFE0F Устойчивая к цензуре блокчейн-архитектура"
+    },
     "received_label": "Получено",
     "recipient": "Адрес собеседника",
     "recipient_tooltip": "ADM-адрес собеседника как U1234567890987654321 или ссылка",

From 4e39a862f5bb3d618632a291e798d7facfe87cd5 Mon Sep 17 00:00:00 2001
From: skranee <125743202+skranee@users.noreply.github.com>
Date: Mon, 7 Apr 2025 00:05:39 +0300
Subject: [PATCH 02/18] switch AChat.vue to composition API and fix ts errors

---
 src/components/AChat/AChat.vue          | 317 ++++++++++++------------
 src/components/Chat/Chat.vue            |  12 +-
 src/components/Chat/ChatPlaceholder.vue |   5 +-
 3 files changed, 165 insertions(+), 169 deletions(-)

diff --git a/src/components/AChat/AChat.vue b/src/components/AChat/AChat.vue
index 2f6495865..557915edb 100644
--- a/src/components/AChat/AChat.vue
+++ b/src/components/AChat/AChat.vue
@@ -45,8 +45,8 @@
   </div>
 </template>
 
-<script lang="ts">
-import { ref, onMounted, onBeforeUnmount, defineComponent, PropType } from 'vue'
+<script lang="ts" setup>
+import { ref, onMounted, onBeforeUnmount, PropType } from 'vue'
 import throttle from 'lodash/throttle'
 import scrollIntoView from 'scroll-into-view-if-needed'
 import Styler from 'stylefire'
@@ -66,205 +66,200 @@ const classes = {
   overlay: `${className}__overlay`
 }
 
-export default defineComponent({
-  props: {
-    messages: {
-      type: Array as PropType<NormalizedChatMessageTransaction[]>,
-      default: () => []
-    },
-    partners: {
-      type: Array as PropType<User[]>,
-      default: () => []
-    },
-    userId: {
-      type: String,
-      required: true
-    },
-    loading: {
-      type: Boolean,
-      default: false
-    },
-    locale: {
-      type: String,
-      default: 'en'
-    },
-    showPlaceholder: {
-      type: Boolean,
-      default: false
-    }
+const props = defineProps({
+  messages: {
+    type: Array as PropType<NormalizedChatMessageTransaction[]>,
+    default: () => []
   },
-  emits: ['scroll', 'scroll:bottom', 'scroll:top'],
-  setup(props, { emit }) {
-    const messagesRef = ref<HTMLDivElement | null>(null)
-    const currentScrollHeight = ref(0)
-    const currentScrollTop = ref(0)
-    const currentClientHeight = ref(0)
+  partners: {
+    type: Array as PropType<User[]>,
+    default: () => []
+  },
+  userId: {
+    type: String,
+    required: true
+  },
+  loading: {
+    type: Boolean,
+    default: false
+  },
+  locale: {
+    type: String,
+    default: 'en'
+  },
+  showPlaceholder: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const emit = defineEmits(['scroll', 'scroll:bottom', 'scroll:top'])
+
+const messagesRef = ref<HTMLDivElement | null>(null)
+const currentScrollHeight = ref(0)
+const currentScrollTop = ref(0)
+const currentClientHeight = ref(0)
 
-    const resizeHandler = () => {
-      if (!messagesRef.value) return
+const resizeHandler = () => {
+  if (!messagesRef.value) return
 
-      const clientHeightDelta = currentClientHeight.value - messagesRef.value.clientHeight
+  const clientHeightDelta = currentClientHeight.value - messagesRef.value.clientHeight
 
-      const nonVisibleClientHeight =
-        messagesRef.value.scrollHeight -
-        messagesRef.value.clientHeight -
-        Math.ceil(messagesRef.value.scrollTop)
-      const scrolledToBottom = nonVisibleClientHeight === 0
+  const nonVisibleClientHeight =
+    messagesRef.value.scrollHeight -
+    messagesRef.value.clientHeight -
+    Math.ceil(messagesRef.value.scrollTop)
+  const scrolledToBottom = nonVisibleClientHeight === 0
 
-      if (!scrolledToBottom) {
-        messagesRef.value.scrollTop += clientHeightDelta
-      }
+  if (!scrolledToBottom) {
+    messagesRef.value.scrollTop += clientHeightDelta
+  }
 
-      currentClientHeight.value = messagesRef.value.clientHeight
-    }
+  currentClientHeight.value = messagesRef.value.clientHeight
+}
 
-    const resizeObserver = ref(new ResizeObserver(resizeHandler))
+const resizeObserver = ref(new ResizeObserver(resizeHandler))
 
-    const emitScroll = throttle(
-      () => emit('scroll', currentScrollTop.value, isScrolledToBottom()),
-      200
-    )
+const emitScroll = throttle(() => emit('scroll', currentScrollTop.value, isScrolledToBottom()), 200)
 
-    const attachScrollListener = () => {
-      messagesRef.value?.addEventListener('scroll', onScroll)
-    }
+const attachScrollListener = () => {
+  messagesRef.value?.addEventListener('scroll', onScroll)
+}
 
-    const destroyScrollListener = () => {
-      messagesRef.value?.removeEventListener('scroll', onScroll)
-    }
+const destroyScrollListener = () => {
+  messagesRef.value?.removeEventListener('scroll', onScroll)
+}
 
-    const onScroll = () => {
-      if (!messagesRef.value) return
+const onScroll = () => {
+  if (!messagesRef.value) return
 
-      const scrollHeight = messagesRef.value.scrollHeight
-      const scrollTop = Math.ceil(messagesRef.value.scrollTop)
-      const clientHeight = messagesRef.value.clientHeight
+  const scrollHeight = messagesRef.value.scrollHeight
+  const scrollTop = Math.ceil(messagesRef.value.scrollTop)
+  const clientHeight = messagesRef.value.clientHeight
 
-      if (scrollHeight - scrollTop === clientHeight) {
-        emit('scroll:bottom')
-      } else if (scrollTop === 0) {
-        currentScrollHeight.value = scrollHeight
-        emit('scroll:top')
-      }
+  if (scrollHeight - scrollTop === clientHeight) {
+    emit('scroll:bottom')
+  } else if (scrollTop === 0) {
+    currentScrollHeight.value = scrollHeight
+    emit('scroll:top')
+  }
 
-      currentScrollTop.value = scrollTop
-      currentScrollHeight.value = scrollHeight
+  currentScrollTop.value = scrollTop
+  currentScrollHeight.value = scrollHeight
 
-      emitScroll()
-    }
+  emitScroll()
+}
 
-    const maintainScrollPosition = () => {
-      if (!messagesRef.value) return
+const maintainScrollPosition = () => {
+  if (!messagesRef.value) return
 
-      messagesRef.value.scrollTop =
-        messagesRef.value.scrollHeight - currentScrollHeight.value + currentScrollTop.value
-    }
+  messagesRef.value.scrollTop =
+    messagesRef.value.scrollHeight - currentScrollHeight.value + currentScrollTop.value
+}
 
-    const scrollToBottom = () => {
-      if (messagesRef.value) {
-        messagesRef.value.scrollTop = messagesRef.value.scrollHeight
-      }
-    }
+const scrollToBottom = () => {
+  if (messagesRef.value) {
+    messagesRef.value.scrollTop = messagesRef.value.scrollHeight
+  }
+}
 
-    const scrollTo = (position: number) => {
-      if (messagesRef.value) {
-        messagesRef.value.scrollTop = position
-      }
-    }
+const scrollTo = (position: number) => {
+  if (messagesRef.value) {
+    messagesRef.value.scrollTop = position
+  }
+}
 
-    const scrollToMessage = (index: number) => {
-      if (!messagesRef.value) return
+const scrollToMessage = (index: number) => {
+  if (!messagesRef.value) return
 
-      const elements = messagesRef.value.children
+  const elements = messagesRef.value.children
 
-      if (!elements) return
+  if (!elements) return
 
-      const element = elements[elements.length - 1 - index] as HTMLElement
+  const element = elements[elements.length - 1 - index] as HTMLElement
 
-      if (element) {
-        messagesRef.value.scrollTop = element.offsetTop - 16
-      } else {
-        scrollToBottom()
-      }
-    }
+  if (element) {
+    messagesRef.value.scrollTop = element.offsetTop - 16
+  } else {
+    scrollToBottom()
+  }
+}
 
-    const scrollToMessageEasy = async (index: number): Promise<boolean> => {
-      if (!messagesRef.value) return false
+const scrollToMessageEasy = async (index: number): Promise<boolean> => {
+  if (!messagesRef.value) return false
 
-      const elements = messagesRef.value.children
+  const elements = messagesRef.value.children
 
-      if (!elements) return false
+  if (!elements) return false
 
-      const element = elements[elements.length - 1 - index] as HTMLElement
+  const element = elements[elements.length - 1 - index] as HTMLElement
 
-      if (!element) return false
+  if (!element) return false
 
-      return new Promise((resolve) => {
-        scrollIntoView(element, {
-          behavior: (instructions) => {
-            const [{ el, top }] = instructions
-            const styler = Styler(el)
+  return new Promise((resolve) => {
+    scrollIntoView(element, {
+      behavior: (instructions) => {
+        const [{ el, top }] = instructions
+        const styler = Styler(el)
 
-            if (el.scrollTop === top) {
-              resolve(false)
-              return
-            }
+        if (el.scrollTop === top) {
+          resolve(false)
+          return
+        }
 
-            animate({
-              from: el.scrollTop,
-              to: top,
-              duration: SCROLL_TO_REPLIED_MESSAGE_ANIMATION_DURATION,
-              onUpdate: (top) => styler.set('scrollTop', top),
-              onComplete: () => resolve(true)
-            })
-          },
-          block: 'center'
+        animate({
+          from: el.scrollTop,
+          to: top,
+          duration: SCROLL_TO_REPLIED_MESSAGE_ANIMATION_DURATION,
+          onUpdate: (top) => styler.set('scrollTop', top),
+          onComplete: () => resolve(true)
         })
-      })
-    }
-
-    const isScrolledToBottom = () => {
-      if (!messagesRef.value) return false
+      },
+      block: 'center'
+    })
+  })
+}
 
-      const scrollOffset =
-        messagesRef.value.scrollHeight -
-        Math.ceil(messagesRef.value.scrollTop) -
-        messagesRef.value.clientHeight
+const isScrolledToBottom = () => {
+  if (!messagesRef.value) return false
 
-      return scrollOffset <= 60
-    }
+  const scrollOffset =
+    messagesRef.value.scrollHeight -
+    Math.ceil(messagesRef.value.scrollTop) -
+    messagesRef.value.clientHeight
 
-    const getSenderMeta = (senderId: string) => {
-      return props.partners.find((partner) => isStringEqualCI(partner.id, senderId))
-    }
+  return scrollOffset <= 60
+}
 
-    onMounted(() => {
-      attachScrollListener()
+const getSenderMeta = (senderId: string) => {
+  return props.partners.find((partner) => isStringEqualCI(partner.id, senderId))
+}
 
-      if (messagesRef.value) {
-        currentClientHeight.value = messagesRef.value.clientHeight
-        resizeObserver.value.observe(messagesRef.value)
-      }
-    })
+onMounted(() => {
+  attachScrollListener()
 
-    onBeforeUnmount(() => {
-      destroyScrollListener()
-      if (messagesRef.value) {
-        resizeObserver.value?.unobserve(messagesRef.value)
-      }
-    })
+  if (messagesRef.value) {
+    currentClientHeight.value = messagesRef.value.clientHeight
+    resizeObserver.value.observe(messagesRef.value)
+  }
+})
 
-    return {
-      classes,
-      messagesRef,
-      maintainScrollPosition,
-      scrollToBottom,
-      scrollTo,
-      scrollToMessage,
-      scrollToMessageEasy,
-      getSenderMeta,
-      isScrolledToBottom
-    }
+onBeforeUnmount(() => {
+  destroyScrollListener()
+  if (messagesRef.value) {
+    resizeObserver.value?.unobserve(messagesRef.value)
   }
 })
+
+defineExpose({
+  classes,
+  messagesRef,
+  maintainScrollPosition,
+  scrollToBottom,
+  scrollTo,
+  scrollToMessage,
+  scrollToMessageEasy,
+  getSenderMeta,
+  isScrolledToBottom
+})
 </script>
diff --git a/src/components/Chat/Chat.vue b/src/components/Chat/Chat.vue
index 8d9dacdc0..4654fe519 100644
--- a/src/components/Chat/Chat.vue
+++ b/src/components/Chat/Chat.vue
@@ -431,14 +431,12 @@ onBeforeMount(() => {
 onMounted(async () => {
   if (isFulfilled.value && chatPage.value <= 0) await fetchChatMessages()
 
-  if (chatPage.value) {
-    const userMessages = messages.value.filter(
-      (message: NormalizedChatMessageTransaction) =>
-        message.senderId && message.senderId === userId.value
-    )
+  const userMessages = messages.value.filter(
+    (message: NormalizedChatMessageTransaction) =>
+      message.senderId && message.senderId === userId.value
+  )
 
-    showNewChatPlaceholder.value = !userMessages.length
-  }
+  showNewChatPlaceholder.value = !userMessages.length
 
   scrollBehavior()
   nextTick(() => {
diff --git a/src/components/Chat/ChatPlaceholder.vue b/src/components/Chat/ChatPlaceholder.vue
index 9e89ba2cf..8d0b69683 100644
--- a/src/components/Chat/ChatPlaceholder.vue
+++ b/src/components/Chat/ChatPlaceholder.vue
@@ -3,7 +3,7 @@
     <div :class="`${className}__container`">
       <Logo style="width: 35px" />
       <p v-for="key in keys" :key="key" :class="`${className}__row`">
-        {{ $t(`chats.placeholder.${key}`) }}
+        {{ t(`chats.placeholder.${key}`) }}
       </p>
     </div>
   </div>
@@ -11,6 +11,9 @@
 
 <script lang="ts" setup>
 import Logo from '@/components/icons/common/Logo.vue'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
 
 const className = 'chat-placeholder'
 const keys = ['encrypted', 'ipfs', 'anonymous', 'censorship']

From 53c08f058a6aacd73e567b846681e72b9284c4f3 Mon Sep 17 00:00:00 2001
From: skranee <125743202+skranee@users.noreply.github.com>
Date: Mon, 7 Apr 2025 00:36:54 +0300
Subject: [PATCH 03/18] fix ts error and change props declaration

---
 src/components/AChat/AChat.vue | 43 ++++++++++++++--------------------
 1 file changed, 17 insertions(+), 26 deletions(-)

diff --git a/src/components/AChat/AChat.vue b/src/components/AChat/AChat.vue
index 557915edb..420d7743d 100644
--- a/src/components/AChat/AChat.vue
+++ b/src/components/AChat/AChat.vue
@@ -46,7 +46,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted, onBeforeUnmount, PropType } from 'vue'
+import { ref, onMounted, onBeforeUnmount } from 'vue'
 import throttle from 'lodash/throttle'
 import scrollIntoView from 'scroll-into-view-if-needed'
 import Styler from 'stylefire'
@@ -66,32 +66,23 @@ const classes = {
   overlay: `${className}__overlay`
 }
 
-const props = defineProps({
-  messages: {
-    type: Array as PropType<NormalizedChatMessageTransaction[]>,
-    default: () => []
-  },
-  partners: {
-    type: Array as PropType<User[]>,
-    default: () => []
-  },
-  userId: {
-    type: String,
-    required: true
-  },
-  loading: {
-    type: Boolean,
-    default: false
-  },
-  locale: {
-    type: String,
-    default: 'en'
-  },
-  showPlaceholder: {
-    type: Boolean,
-    default: false
+const props = withDefaults(
+  defineProps<{
+    messages: NormalizedChatMessageTransaction[]
+    partners: User[]
+    userId: string
+    loading: boolean
+    locale: string
+    showPlaceholder: boolean
+  }>(),
+  {
+    messages: () => [],
+    partners: () => [],
+    loading: false,
+    locale: 'en',
+    showPlaceholder: false
   }
-})
+)
 
 const emit = defineEmits(['scroll', 'scroll:bottom', 'scroll:top'])
 

From cf10972eca2c52d3248a2f66d7ca6238fb987165 Mon Sep 17 00:00:00 2001
From: skranee <125743202+skranee@users.noreply.github.com>
Date: Mon, 7 Apr 2025 00:39:34 +0300
Subject: [PATCH 04/18] fix: sender can be undefined

---
 src/components/Chat/Chat.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Chat/Chat.vue b/src/components/Chat/Chat.vue
index 4654fe519..8fec7b7d3 100644
--- a/src/components/Chat/Chat.vue
+++ b/src/components/Chat/Chat.vue
@@ -101,7 +101,7 @@
           @swipe:left="onSwipeLeft(message)"
           @longpress="onMessageLongPress(message)"
         >
-          <template #avatar>
+          <template #avatar v-if="sender">
             <ChatAvatar :user-id="sender.id" use-public-key @click="onClickAvatar(sender.id)" />
           </template>
 
@@ -135,7 +135,7 @@
           @swipe:left="onSwipeLeft(message)"
           @longpress="onMessageLongPress(message)"
         >
-          <template #avatar>
+          <template #avatar v-if="sender">
             <ChatAvatar :user-id="sender.id" use-public-key @click="onClickAvatar(sender.id)" />
           </template>
 

From 97a8dadffa5e2853b4c575c223cfc27c2ca29557 Mon Sep 17 00:00:00 2001
From: skranee <125743202+skranee@users.noreply.github.com>
Date: Tue, 8 Apr 2025 19:49:54 +0300
Subject: [PATCH 05/18] fix: reloading a chat - placholder not visible

---
 src/components/Chat/Chat.vue       |  3 ++-
 src/components/ChatStartDialog.vue | 36 ++++++++++++++++++------------
 src/views/Chats.vue                | 26 +++++++++++++++++----
 3 files changed, 46 insertions(+), 19 deletions(-)

diff --git a/src/components/Chat/Chat.vue b/src/components/Chat/Chat.vue
index 8fec7b7d3..be79e3637 100644
--- a/src/components/Chat/Chat.vue
+++ b/src/components/Chat/Chat.vue
@@ -428,8 +428,9 @@ watch(replyMessageId, (messageId) => {
 onBeforeMount(() => {
   window.addEventListener('keyup', onKeyPress)
 })
+
 onMounted(async () => {
-  if (isFulfilled.value && chatPage.value <= 0) await fetchChatMessages()
+  if (chatPage.value <= 0) await fetchChatMessages()
 
   const userMessages = messages.value.filter(
     (message: NormalizedChatMessageTransaction) =>
diff --git a/src/components/ChatStartDialog.vue b/src/components/ChatStartDialog.vue
index c93b69f5e..e5c37ca0a 100644
--- a/src/components/ChatStartDialog.vue
+++ b/src/components/ChatStartDialog.vue
@@ -136,20 +136,28 @@ export default {
         return Promise.reject(new Error(this.$t('chats.incorrect_address')))
       }
 
-      return this.$store
-        .dispatch('chat/createChat', {
-          partnerId: this.recipientAddress,
-          partnerName: this.recipientName
-        })
-        .then((_publicKey) => {
-          this.$emit('start-chat', this.recipientAddress, this.uriMessage)
-          this.show = false
-        })
-        .catch((err) => {
-          this.$store.dispatch('snackbar/show', {
-            message: err.message // @todo translations
-          })
-        })
+      return this.$emit(
+        'start-chat',
+        this.recipientAddress,
+        this.uriMessage,
+        true,
+        this.recipientName
+      )
+
+      // return this.$store
+      //   .dispatch('chat/createChat', {
+      //     partnerId: this.recipientAddress,
+      //     partnerName: this.recipientName
+      //   })
+      //   .then((_publicKey) => {
+      //     this.$emit('start-chat', this.recipientAddress, this.uriMessage)
+      //     this.show = false
+      //   })
+      //   .catch((err) => {
+      //     this.$store.dispatch('snackbar/show', {
+      //       message: err.message // @todo translations
+      //     })
+      //   })
     },
 
     /**
diff --git a/src/views/Chats.vue b/src/views/Chats.vue
index f46c02a67..c194a7f95 100644
--- a/src/views/Chats.vue
+++ b/src/views/Chats.vue
@@ -73,7 +73,6 @@ import scrollPosition from '@/mixins/scrollPosition'
 import { getAdamantChatMeta, isAdamantChat, isStaticChat } from '@/lib/chat/meta/utils'
 import { mdiMessageOutline, mdiCheckAll } from '@mdi/js'
 
-
 const scrollOffset = 64
 
 export default {
@@ -88,7 +87,7 @@ export default {
     partnerId: { default: undefined, type: String },
     showNewContact: { default: false, type: Boolean }
   },
-  setup () {
+  setup() {
     return {
       mdiCheckAll,
       mdiMessageOutline
@@ -146,12 +145,32 @@ export default {
     this.destroyScrollListener()
   },
   methods: {
-    openChat(partnerId, messageText) {
+    openChat(partnerId, messageText, retrieveKey = false, partnerName) {
       this.$router.push({
         name: 'Chat',
         params: { partnerId },
         query: { messageText }
       })
+
+      if (retrieveKey) {
+        this.retrievePublicKey(partnerId, partnerName)
+      }
+    },
+    retrievePublicKey(partnerId, partnerName) {
+      this.$store
+        .dispatch('chat/createChat', {
+          partnerId,
+          partnerName
+        })
+        .then((_publicKey) => {
+          console.log(`Success! Retrieved public key: ${_publicKey}`)
+        })
+        .catch((err) => {
+          console.log(`Error while retrieving public key: ${err}`)
+          this.$store.dispatch('snackbar/show', {
+            message: err.message // @todo translations
+          })
+        })
     },
     isAdamantChat,
     getAdamantChatMeta,
@@ -230,7 +249,6 @@ export default {
 @use 'vuetify/settings';
 
 .chats-view {
-
   &__item {
     justify-content: flex-end;
     height: 56px;

From 4740f63dc61a7a06636fadea53e4bd5354b741e4 Mon Sep 17 00:00:00 2001
From: skranee <125743202+skranee@users.noreply.github.com>
Date: Wed, 16 Apr 2025 15:24:19 +0300
Subject: [PATCH 06/18] feat: display getting public key in chatroom

---
 src/components/AChat/AChat.vue          |  6 ++--
 src/components/AChat/AChatForm.vue      |  6 +++-
 src/components/Chat/Chat.vue            | 36 ++++++++++++++++++++++--
 src/components/Chat/ChatPlaceholder.vue | 37 +++++++++++++++++++++++--
 src/components/ChatStartDialog.vue      | 15 ----------
 src/locales/en.json                     |  5 ++--
 src/locales/ru.json                     |  5 ++--
 src/store/modules/chat/index.js         | 19 ++++++++++++-
 src/views/Chats.vue                     | 24 +++-------------
 9 files changed, 103 insertions(+), 50 deletions(-)

diff --git a/src/components/AChat/AChat.vue b/src/components/AChat/AChat.vue
index 420d7743d..1dd6ca479 100644
--- a/src/components/AChat/AChat.vue
+++ b/src/components/AChat/AChat.vue
@@ -17,7 +17,7 @@
         </div>
 
         <div ref="messagesRef" :class="classes.bodyMessages">
-          <div v-if="showPlaceholder">
+          <div>
             <slot name="placeholder" />
           </div>
           <template v-for="message in messages" :key="message.id">
@@ -73,14 +73,12 @@ const props = withDefaults(
     userId: string
     loading: boolean
     locale: string
-    showPlaceholder: boolean
   }>(),
   {
     messages: () => [],
     partners: () => [],
     loading: false,
-    locale: 'en',
-    showPlaceholder: false
+    locale: 'en'
   }
 )
 
diff --git a/src/components/AChat/AChatForm.vue b/src/components/AChat/AChatForm.vue
index 39e0193ec..c67e91a32 100644
--- a/src/components/AChat/AChatForm.vue
+++ b/src/components/AChat/AChatForm.vue
@@ -10,6 +10,7 @@
       v-model="message"
       @input="onInput"
       :placeholder="label"
+      :disabled="isInputDisabled"
       hide-details
       single-line
       auto-grow
@@ -71,6 +72,10 @@ export default {
       type: String,
       default: 'Type a message'
     },
+    isInputDisabled: {
+      type: Boolean,
+      default: false
+    },
     showDivider: {
       type: Boolean,
       default: false
@@ -85,7 +90,6 @@ export default {
   },
   emits: ['message', 'esc', 'error'],
   setup() {
-
     return {
       mdiSend
     }
diff --git a/src/components/Chat/Chat.vue b/src/components/Chat/Chat.vue
index be79e3637..05d33242e 100644
--- a/src/components/Chat/Chat.vue
+++ b/src/components/Chat/Chat.vue
@@ -5,7 +5,6 @@
       ref="chatRef"
       :messages="messages"
       :partners="partners"
-      :show-placeholder="showNewChatPlaceholder"
       :user-id="userId"
       :loading="loading"
       :locale="$i18n.locale"
@@ -85,7 +84,10 @@
       </template>
 
       <template #placeholder>
-        <chat-placeholder />
+        <chat-placeholder
+          :show-placeholder="showNewChatPlaceholder"
+          :is-getting-public-key="isGettingPublicKey"
+        />
       </template>
 
       <template #message="{ message, sender }">
@@ -199,6 +201,7 @@
           :send-on-enter="sendMessageOnEnter"
           :show-divider="true"
           :label="t('chats.message')"
+          :is-input-disabled="isInputDisabled"
           :message-text="
             $route.query.messageText || $store.getters['draftMessage/draftMessage'](partnerId)
           "
@@ -357,9 +360,12 @@ const actionsDropdownMessageId = ref<string | -1>(-1)
 const replyMessageId = ref<string | -1>(-1)
 const showEmojiPicker = ref(false)
 const showNewChatPlaceholder = ref(false)
+const isGettingPublicKey = ref(false)
+const isInputDisabled = ref(false)
 
 const messages = computed(() => store.getters['chat/messages'](props.partnerId))
 const userId = computed(() => store.state.address)
+const isNewChat = computed(() => store.getters['chat/isNewChat'](props.partnerId))
 
 const getPartnerName = (address: string) => {
   const name: string = store.getters['partners/displayName'](address) || ''
@@ -430,6 +436,12 @@ onBeforeMount(() => {
 })
 
 onMounted(async () => {
+  if (isNewChat.value) {
+    const partnerName = store.getters['chat/getPartnerName'](props.partnerId)
+
+    await retrievePublicKey(props.partnerId, partnerName)
+  }
+
   if (chatPage.value <= 0) await fetchChatMessages()
 
   const userMessages = messages.value.filter(
@@ -457,6 +469,26 @@ onBeforeUnmount(() => {
   Visibility.unbind(Number(visibilityId.value))
 })
 
+async function retrievePublicKey(partnerId: string, partnerName: string) {
+  try {
+    isGettingPublicKey.value = true
+    await store.dispatch('chat/createChat', {
+      partnerId,
+      partnerName
+    })
+  } catch (err: unknown) {
+    const message = err instanceof Error ? err.message : 'Unknown error'
+    vibrate.long()
+    isInputDisabled.value = true
+
+    store.dispatch('snackbar/show', {
+      message: message
+    })
+  } finally {
+    isGettingPublicKey.value = false
+  }
+}
+
 /**
  * Validate message before sending.
  * @param message
diff --git a/src/components/Chat/ChatPlaceholder.vue b/src/components/Chat/ChatPlaceholder.vue
index 8d0b69683..f6a872acd 100644
--- a/src/components/Chat/ChatPlaceholder.vue
+++ b/src/components/Chat/ChatPlaceholder.vue
@@ -1,11 +1,15 @@
 <template>
-  <div :class="className">
-    <div :class="`${className}__container`">
+  <div v-if="showPlaceholder || isGettingPublicKey" :class="classes.root">
+    <div v-if="showPlaceholder" :class="classes.container">
       <Logo style="width: 35px" />
-      <p v-for="key in keys" :key="key" :class="`${className}__row`">
+      <p v-for="key in keys" :key="key" :class="classes.row">
         {{ t(`chats.placeholder.${key}`) }}
       </p>
     </div>
+    <div v-if="isGettingPublicKey" :class="[classes.container, `${classes.container}_public-key`]">
+      <v-progress-circular :class="classes.spinner" indeterminate :size="20" />
+      {{ t('chats.placeholder.public-key') }}
+    </div>
   </div>
 </template>
 
@@ -15,7 +19,18 @@ import { useI18n } from 'vue-i18n'
 
 const { t } = useI18n()
 
+defineProps<{
+  showPlaceholder: boolean
+  isGettingPublicKey: boolean
+}>()
+
 const className = 'chat-placeholder'
+const classes = {
+  root: className,
+  row: `${className}__row`,
+  container: `${className}__container`,
+  spinner: `${className}__spinner`
+}
 const keys = ['encrypted', 'ipfs', 'anonymous', 'censorship']
 </script>
 
@@ -24,6 +39,9 @@ const keys = ['encrypted', 'ipfs', 'anonymous', 'censorship']
 @use '@/assets/styles/settings/_colors.scss';
 
 .chat-placeholder {
+  display: flex;
+  flex-direction: column;
+  row-gap: 10px;
   width: 100%;
   padding: 8px 0;
   margin: 16px 0;
@@ -39,6 +57,11 @@ const keys = ['encrypted', 'ipfs', 'anonymous', 'censorship']
     padding: 16px;
     background: map.get(colors.$adm-colors, 'black');
     border-radius: 8px;
+
+    &_public-key {
+      flex-direction: row;
+      column-gap: 8px;
+    }
   }
 
   &__row {
@@ -57,6 +80,10 @@ const keys = ['encrypted', 'ipfs', 'anonymous', 'censorship']
         0 1px 1px hsla(0, 0%, 39.2%, 0.04),
         0 2px 10px -1px hsla(0, 0%, 39.2%, 0.02);
     }
+
+    &__spinner {
+      color: map.get(colors.$adm-colors, 'grey');
+    }
   }
 }
 
@@ -69,6 +96,10 @@ const keys = ['encrypted', 'ipfs', 'anonymous', 'censorship']
         0 1px 1px hsla(0, 0%, 39.2%, 0.04),
         0 2px 10px -1px hsla(0, 0%, 39.2%, 0.02);
     }
+
+    &__spinner {
+      color: map.get(colors.$adm-colors, 'regular');
+    }
   }
 }
 </style>
diff --git a/src/components/ChatStartDialog.vue b/src/components/ChatStartDialog.vue
index e5c37ca0a..3a6d70ec1 100644
--- a/src/components/ChatStartDialog.vue
+++ b/src/components/ChatStartDialog.vue
@@ -143,21 +143,6 @@ export default {
         true,
         this.recipientName
       )
-
-      // return this.$store
-      //   .dispatch('chat/createChat', {
-      //     partnerId: this.recipientAddress,
-      //     partnerName: this.recipientName
-      //   })
-      //   .then((_publicKey) => {
-      //     this.$emit('start-chat', this.recipientAddress, this.uriMessage)
-      //     this.show = false
-      //   })
-      //   .catch((err) => {
-      //     this.$store.dispatch('snackbar/show', {
-      //       message: err.message // @todo translations
-      //     })
-      //   })
     },
 
     /**
diff --git a/src/locales/en.json b/src/locales/en.json
index c2c199dae..58df71db4 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -34,10 +34,11 @@
     "partner_info": "Partner info",
     "partner_name": "Partner name",
     "placeholder": {
+      "anonymous": "\uD83D\uDD76\uFE0F Anonymous: partners never see your IP address",
+      "censorship": "⛓\uFE0F Censorship-resistant blockchain architecture",
       "encrypted": "\uD83D\uDD10 End-to-end encrypted across all devices",
       "ipfs": "☁\uFE0F Decentralized IPFS storage for files/media",
-      "anonymous": "\uD83D\uDD76\uFE0F Anonymous: partners never see your IP address",
-      "censorship": "⛓\uFE0F Censorship-resistant blockchain architecture"
+      "public-key": "Retrieving your partner’s key to encrypt messages…"
     },
     "received_label": "Received",
     "recipient": "Partner address",
diff --git a/src/locales/ru.json b/src/locales/ru.json
index 7a08b5548..ef62e43b5 100644
--- a/src/locales/ru.json
+++ b/src/locales/ru.json
@@ -34,10 +34,11 @@
     "partner_info": "Собеседник",
     "partner_name": "Имя собеседника",
     "placeholder": {
+      "anonymous": "\uD83D\uDD76\uFE0F Анонимно: ваш IP-адрес скрыт от собеседников",
+      "censorship": "⛓\uFE0F Устойчивая к цензуре блокчейн-архитектура",
       "encrypted": "\uD83D\uDD10 Сквозное шифрование на всех устройствах",
       "ipfs": "☁\uFE0F Распределенное IPFS-хранилище файлов и медиа",
-      "anonymous": "\uD83D\uDD76\uFE0F Анонимно: ваш IP-адрес скрыт от собеседников",
-      "censorship": "⛓\uFE0F Устойчивая к цензуре блокчейн-архитектура"
+      "public-key": "Получаю ключ вашего собеседника для шифрования сообщений…"
     },
     "received_label": "Получили",
     "recipient": "Адрес собеседника",
diff --git a/src/store/modules/chat/index.js b/src/store/modules/chat/index.js
index dd9f7ff70..75915e962 100644
--- a/src/store/modules/chat/index.js
+++ b/src/store/modules/chat/index.js
@@ -51,7 +51,8 @@ const state = () => ({
   lastMessageHeight: 0, // `height` value of the last message
   isFulfilled: false, // false - getChats did not start or in progress, true - getChats finished
   offset: 0, // for loading chat list with pagination. -1 if all of chats loaded
-  noActiveNodesDialog: undefined // true - visible dialog, false - hidden dialog, but shown before, undefined - not shown
+  noActiveNodesDialog: undefined, // true - visible dialog, false - hidden dialog, but shown before, undefined - not shown
+  newChats: {} // { [partnerId]: partnerName }, for pointing if a chat needs further handling after being opened
 })
 
 const getters = {
@@ -319,6 +320,14 @@ const getters = {
    */
   chatListOffset: (state) => {
     return state.offset
+  },
+
+  isNewChat: (state) => (partnerId) => {
+    return partnerId in state.newChats
+  },
+
+  getPartnerName: (state) => (partnerId) => {
+    return state.newChats[partnerId]
   }
 }
 
@@ -373,6 +382,14 @@ const mutations = {
     state.chats[partnerId] = createChat()
   },
 
+  addNewChat(state, { partnerId, partnerName }) {
+    state.newChats[partnerId] = partnerName
+  },
+
+  removeNewChat(state, partnerId) {
+    delete state.newChats[partnerId]
+  },
+
   /**
    * Push an message to a specific chat by senderId.
    * @param {string} userId Your address
diff --git a/src/views/Chats.vue b/src/views/Chats.vue
index c194a7f95..63620d0dc 100644
--- a/src/views/Chats.vue
+++ b/src/views/Chats.vue
@@ -146,31 +146,15 @@ export default {
   },
   methods: {
     openChat(partnerId, messageText, retrieveKey = false, partnerName) {
+      if (retrieveKey) {
+        this.$store.commit('chat/addNewChat', { partnerId, partnerName })
+      }
+
       this.$router.push({
         name: 'Chat',
         params: { partnerId },
         query: { messageText }
       })
-
-      if (retrieveKey) {
-        this.retrievePublicKey(partnerId, partnerName)
-      }
-    },
-    retrievePublicKey(partnerId, partnerName) {
-      this.$store
-        .dispatch('chat/createChat', {
-          partnerId,
-          partnerName
-        })
-        .then((_publicKey) => {
-          console.log(`Success! Retrieved public key: ${_publicKey}`)
-        })
-        .catch((err) => {
-          console.log(`Error while retrieving public key: ${err}`)
-          this.$store.dispatch('snackbar/show', {
-            message: err.message // @todo translations
-          })
-        })
     },
     isAdamantChat,
     getAdamantChatMeta,

From b4760785c961d034f86dda510d87bb93c8788559 Mon Sep 17 00:00:00 2001
From: skranee <125743202+skranee@users.noreply.github.com>
Date: Thu, 17 Apr 2025 11:39:15 +0300
Subject: [PATCH 07/18] feat: notify if public key is missing

---
 src/components/AChat/AChatForm.vue      |  4 ++--
 src/components/Chat/Chat.vue            | 15 ++++++++++-----
 src/components/Chat/ChatPlaceholder.vue | 24 +++++++++++++++++++-----
 src/locales/en.json                     |  1 +
 src/locales/ru.json                     |  1 +
 5 files changed, 33 insertions(+), 12 deletions(-)

diff --git a/src/components/AChat/AChatForm.vue b/src/components/AChat/AChatForm.vue
index c67e91a32..409d6388d 100644
--- a/src/components/AChat/AChatForm.vue
+++ b/src/components/AChat/AChatForm.vue
@@ -10,7 +10,7 @@
       v-model="message"
       @input="onInput"
       :placeholder="label"
-      :disabled="isInputDisabled"
+      :disabled="isKeyMissing"
       hide-details
       single-line
       auto-grow
@@ -72,7 +72,7 @@ export default {
       type: String,
       default: 'Type a message'
     },
-    isInputDisabled: {
+    isKeyMissing: {
       type: Boolean,
       default: false
     },
diff --git a/src/components/Chat/Chat.vue b/src/components/Chat/Chat.vue
index 05d33242e..855ffd610 100644
--- a/src/components/Chat/Chat.vue
+++ b/src/components/Chat/Chat.vue
@@ -87,6 +87,7 @@
         <chat-placeholder
           :show-placeholder="showNewChatPlaceholder"
           :is-getting-public-key="isGettingPublicKey"
+          :is-key-missing="isKeyMissing"
         />
       </template>
 
@@ -201,7 +202,7 @@
           :send-on-enter="sendMessageOnEnter"
           :show-divider="true"
           :label="t('chats.message')"
-          :is-input-disabled="isInputDisabled"
+          :is-key-missing="isKeyMissing"
           :message-text="
             $route.query.messageText || $store.getters['draftMessage/draftMessage'](partnerId)
           "
@@ -361,7 +362,7 @@ const replyMessageId = ref<string | -1>(-1)
 const showEmojiPicker = ref(false)
 const showNewChatPlaceholder = ref(false)
 const isGettingPublicKey = ref(false)
-const isInputDisabled = ref(false)
+const isKeyMissing = ref(false)
 
 const messages = computed(() => store.getters['chat/messages'](props.partnerId))
 const userId = computed(() => store.state.address)
@@ -436,14 +437,18 @@ onBeforeMount(() => {
 })
 
 onMounted(async () => {
+  if (chatPage.value <= 0) await fetchChatMessages()
+
+  if (!messages.value.length) {
+    store.commit('chat/addNewChat', { partnerId: props.partnerId })
+  }
+
   if (isNewChat.value) {
     const partnerName = store.getters['chat/getPartnerName'](props.partnerId)
 
     await retrievePublicKey(props.partnerId, partnerName)
   }
 
-  if (chatPage.value <= 0) await fetchChatMessages()
-
   const userMessages = messages.value.filter(
     (message: NormalizedChatMessageTransaction) =>
       message.senderId && message.senderId === userId.value
@@ -479,7 +484,7 @@ async function retrievePublicKey(partnerId: string, partnerName: string) {
   } catch (err: unknown) {
     const message = err instanceof Error ? err.message : 'Unknown error'
     vibrate.long()
-    isInputDisabled.value = true
+    isKeyMissing.value = true
 
     store.dispatch('snackbar/show', {
       message: message
diff --git a/src/components/Chat/ChatPlaceholder.vue b/src/components/Chat/ChatPlaceholder.vue
index f6a872acd..b487214de 100644
--- a/src/components/Chat/ChatPlaceholder.vue
+++ b/src/components/Chat/ChatPlaceholder.vue
@@ -1,14 +1,22 @@
 <template>
-  <div v-if="showPlaceholder || isGettingPublicKey" :class="classes.root">
-    <div v-if="showPlaceholder" :class="classes.container">
+  <div v-if="showPlaceholder || isGettingPublicKey || isKeyMissing" :class="classes.root">
+    <div v-if="showPlaceholder && !isKeyMissing" :class="classes.container">
       <Logo style="width: 35px" />
       <p v-for="key in keys" :key="key" :class="classes.row">
         {{ t(`chats.placeholder.${key}`) }}
       </p>
     </div>
-    <div v-if="isGettingPublicKey" :class="[classes.container, `${classes.container}_public-key`]">
-      <v-progress-circular :class="classes.spinner" indeterminate :size="20" />
-      {{ t('chats.placeholder.public-key') }}
+    <div
+      v-if="isGettingPublicKey || isKeyMissing"
+      :class="[classes.container, `${classes.container}_public-key`]"
+    >
+      <div v-if="!isKeyMissing">
+        <v-progress-circular :class="classes.spinner" indeterminate :size="20" />
+        {{ t('chats.placeholder.public-key') }}
+      </div>
+      <div v-else>
+        {{ t('chats.placeholder.key-missing') }}
+      </div>
     </div>
   </div>
 </template>
@@ -22,6 +30,7 @@ const { t } = useI18n()
 defineProps<{
   showPlaceholder: boolean
   isGettingPublicKey: boolean
+  isKeyMissing: boolean
 }>()
 
 const className = 'chat-placeholder'
@@ -64,6 +73,11 @@ const keys = ['encrypted', 'ipfs', 'anonymous', 'censorship']
     }
   }
 
+  &__spinner {
+    margin-bottom: 4px;
+    margin-right: 4px;
+  }
+
   &__row {
     width: 100%;
     text-align: center;
diff --git a/src/locales/en.json b/src/locales/en.json
index 58df71db4..bd0d13250 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -38,6 +38,7 @@
       "censorship": "⛓\uFE0F Censorship-resistant blockchain architecture",
       "encrypted": "\uD83D\uDD10 End-to-end encrypted across all devices",
       "ipfs": "☁\uFE0F Decentralized IPFS storage for files/media",
+      "key-missing": "Unable to start a chat, public key is missing",
       "public-key": "Retrieving your partner’s key to encrypt messages…"
     },
     "received_label": "Received",
diff --git a/src/locales/ru.json b/src/locales/ru.json
index ef62e43b5..3f76b3350 100644
--- a/src/locales/ru.json
+++ b/src/locales/ru.json
@@ -38,6 +38,7 @@
       "censorship": "⛓\uFE0F Устойчивая к цензуре блокчейн-архитектура",
       "encrypted": "\uD83D\uDD10 Сквозное шифрование на всех устройствах",
       "ipfs": "☁\uFE0F Распределенное IPFS-хранилище файлов и медиа",
+      "key-missing": "Невозможно начать чат, публичного ключа не существует",
       "public-key": "Получаю ключ вашего собеседника для шифрования сообщений…"
     },
     "received_label": "Получили",

From 9788df991f8711ceaf8bcc34c170238a292b8276 Mon Sep 17 00:00:00 2001
From: skranee <125743202+skranee@users.noreply.github.com>
Date: Thu, 17 Apr 2025 12:52:53 +0300
Subject: [PATCH 08/18] refactor: AChatForm to composition API

---
 src/components/AChat/AChatForm.vue | 463 ++++++++++++++---------------
 1 file changed, 227 insertions(+), 236 deletions(-)

diff --git a/src/components/AChat/AChatForm.vue b/src/components/AChat/AChatForm.vue
index 409d6388d..9fd427297 100644
--- a/src/components/AChat/AChatForm.vue
+++ b/src/components/AChat/AChatForm.vue
@@ -43,262 +43,253 @@
   </div>
 </template>
 
-<script>
-import { nextTick } from 'vue'
+<script lang="ts" setup>
+import { computed, nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
 import ChatEmojis from '@/components/Chat/ChatEmojis.vue'
 import { isMobile } from '@/lib/display-mobile'
 import { mdiSend } from '@mdi/js'
+import { useStore } from 'vuex'
 
-export default {
-  components: { ChatEmojis },
-  props: {
-    partnerId: {
-      default: '',
-      type: String
-    },
-    messageText: {
-      default: '',
-      type: String
-    },
-    showSendButton: {
-      type: Boolean,
-      default: true
-    },
-    sendOnEnter: {
-      type: Boolean,
-      default: true
-    },
-    label: {
-      type: String,
-      default: 'Type a message'
-    },
-    isKeyMissing: {
-      type: Boolean,
-      default: false
-    },
-    showDivider: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * Message validator.
-     */
-    validator: {
-      type: Function,
-      required: true
-    }
-  },
-  emits: ['message', 'esc', 'error'],
-  setup() {
-    return {
-      mdiSend
-    }
-  },
-  data: () => ({
-    message: '',
-    emojiPickerOpen: false,
-    botCommandIndex: null,
-    botCommandSelectionMode: false,
-    isInputFocused: false
-  }),
-  computed: {
-    isDesktopDevice: () => !isMobile(),
-    className: () => 'a-chat',
-    classes() {
-      return [
-        `${this.className}__form`,
-        {
-          [`${this.className}__form--is-active`]: !!this.message
-        }
-      ]
-    },
-    /**
-     * Processing `ctrl+enter`, `shift + enter` and `enter`
-     */
-    listeners() {
-      return {
-        keypress: (e) => {
-          // on some devices keyCode for CTRL+ENTER is 10
-          // https://bugs.chromium.org/p/chromium/issues/detail?id=79407
-          if (e.keyCode === 13 || e.keyCode === 10) {
-            // Enter || Ctrl+Enter
-            if (this.sendOnEnter) {
-              // add LF and calculate height when CTRL+ENTER or ALT+ENTER or CMD+ENTER (Mac & Windows)
-              // no need to add LF for shiftKey, it will be added automatically
-              if (e.ctrlKey || e.altKey || e.metaKey) {
-                this.addLineFeed()
-                this.calculateInputHeight()
-                return
-              }
-
-              if (!e.shiftKey) {
-                // send message if shiftKey is not pressed
-                e.preventDefault()
-                this.submitMessage()
-              }
-            } else {
-              if (e.ctrlKey || e.shiftKey || e.altKey || e.metaKey) {
-                e.preventDefault()
-                this.submitMessage()
-              }
-            }
+type Props = {
+  partnerId: string
+  messageText: string
+  showSendButton: boolean
+  sendOnEnter: boolean
+  label: string
+  isKeyMissing: boolean
+  showDivider: boolean
+  validator: (message: string) => string | false
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  partnerId: '',
+  messageText: '',
+  showSendButton: true,
+  sendOnEnter: true,
+  label: 'Type a message',
+  isKeyMissing: false,
+  showDivider: false
+})
+
+const emit = defineEmits<{
+  (e: 'message', message: string): void
+  (e: 'esc'): void
+  (e: 'error', error: string): void
+}>()
+
+const store = useStore()
+
+const message = ref('')
+const emojiPickerOpen = ref(false)
+const botCommandIndex = ref<number | null>(null)
+const botCommandSelectionMode = ref(false)
+const isInputFocused = ref(false)
+const messageTextarea = ref()
+
+const className = 'a-chat'
+const classes = [
+  `${className}__form`,
+  {
+    [`${className}__form--is-active`]: !!message.value
+  }
+]
+
+const isDesktopDevice = computed(() => !isMobile())
+const listeners = computed(() => {
+  return {
+    keypress: (e: KeyboardEvent) => {
+      // on some devices keyCode for CTRL+ENTER is 10
+      // https://bugs.chromium.org/p/chromium/issues/detail?id=79407
+      if (e.keyCode === 13 || e.keyCode === 10) {
+        // Enter || Ctrl+Enter
+        if (props.sendOnEnter) {
+          // add LF and calculate height when CTRL+ENTER or ALT+ENTER or CMD+ENTER (Mac & Windows)
+          // no need to add LF for shiftKey, it will be added automatically
+          if (e.ctrlKey || e.altKey || e.metaKey) {
+            addLineFeed()
+            calculateInputHeight()
+            return
           }
-        },
-        keydown: (e) => {
-          if (e.code === 'Escape') {
-            this.$emit('esc')
+
+          if (!e.shiftKey) {
+            // send message if shiftKey is not pressed
+            e.preventDefault()
+            submitMessage()
+          }
+        } else {
+          if (e.ctrlKey || e.shiftKey || e.altKey || e.metaKey) {
+            e.preventDefault()
+            submitMessage()
           }
         }
       }
-    }
-  },
-  mounted() {
-    if (this.messageText) {
-      this.message = this.messageText
-      this.focus()
-    }
-    this.attachKeyCommandListener()
-  },
-  beforeUnmount() {
-    this.destroyKeyCommandListener()
-  },
-  methods: {
-    attachKeyCommandListener() {
-      window.addEventListener('keydown', this.onKeyCommand)
-    },
-    destroyKeyCommandListener() {
-      window.removeEventListener('keydown', this.onKeyCommand)
     },
-    onKeyCommand: function (event) {
-      if (event.ctrlKey && event.shiftKey && event.code === 'Digit1') {
-        this.openElement()
-      } else if (this.isInputFocused && (event.code === 'ArrowUp' || event.code === 'ArrowDown')) {
-        this.selectCommand(event)
-      } else if (event.key.length === 1) {
-        this.botCommandSelectionMode = false
-        this.botCommandIndex = null
+    keydown: (e: KeyboardEvent) => {
+      if (e.code === 'Escape') {
+        emit('esc')
       }
-    },
-    openElement() {
-      this.emojiPickerOpen = true
-    },
-    closeElement() {
-      this.emojiPickerOpen = false
-      setTimeout(() => this.focus(), 0)
-    },
-    onInput: function () {
-      this.$store.commit('draftMessage/saveMessage', {
-        message: this.message,
-        partnerId: this.partnerId
-      })
-    },
-    emojiPicture(emoji) {
-      const caretPosition = this.$refs.messageTextarea.selectionStart
-
-      let before = this.message.slice(0, caretPosition)
-      const after = this.message.slice(caretPosition)
-      let emojiLength = emoji.length
-
-      if (
-        (before.length > 0 &&
-          !/\s|[[{(\n]/.test(before.slice(-1)) && // Check for a space, newline or parentheses before the emoji
-          !before
-            .slice(-2)
-            .match(
-              /[\p{Emoji_Presentation}\p{Emoji}\p{Emoji_Modifier_Base}\p{Emoji_Component}]/gu
-            )) ||
-        /[\d]/.test(before.slice(-1))
-      ) {
-        before += ' '
-        emojiLength += 1
-      }
-      this.message = before + emoji + after
-      this.closeElement()
-
-      // Set the cursor position to after the newly inserted text
-      const newCaretPosition = caretPosition + emojiLength
-      this.focus()
-      this.$nextTick(() => {
-        this.$refs.messageTextarea.setSelectionRange(newCaretPosition, newCaretPosition)
+    }
+  }
+})
+
+onMounted(() => {
+  if (props.messageText) {
+    message.value = props.messageText
+    focus()
+  }
+  attachKeyCommandListener()
+})
+
+onBeforeUnmount(() => {
+  destroyKeyCommandListener()
+})
+
+function attachKeyCommandListener() {
+  window.addEventListener('keydown', onKeyCommand)
+}
+
+function destroyKeyCommandListener() {
+  window.removeEventListener('keydown', onKeyCommand)
+}
+
+function onKeyCommand(event: KeyboardEvent) {
+  if (event.ctrlKey && event.shiftKey && event.code === 'Digit1') {
+    openElement()
+  } else if (isInputFocused.value && (event.code === 'ArrowUp' || event.code === 'ArrowDown')) {
+    selectCommand(event)
+  } else if (event.key.length === 1) {
+    botCommandSelectionMode.value = false
+    botCommandIndex.value = null
+  }
+}
+
+function openElement() {
+  emojiPickerOpen.value = true
+}
+
+function closeElement() {
+  emojiPickerOpen.value = false
+  setTimeout(() => focus(), 0)
+}
+
+function onInput() {
+  store.commit('draftMessage/saveMessage', {
+    message: message.value,
+    partnerId: props.partnerId
+  })
+}
+
+function emojiPicture(emoji: string) {
+  const caretPosition = messageTextarea.value.selectionStart
+
+  let before = message.value.slice(0, caretPosition)
+  const after = message.value.slice(caretPosition)
+  let emojiLength = emoji.length
+
+  if (
+    (before.length > 0 &&
+      !/\s|[[{(\n]/.test(before.slice(-1)) && // Check for a space, newline or parentheses before the emoji
+      !before
+        .slice(-2)
+        .match(/[\p{Emoji_Presentation}\p{Emoji}\p{Emoji_Modifier_Base}\p{Emoji_Component}]/gu)) ||
+    /[\d]/.test(before.slice(-1))
+  ) {
+    before += ' '
+    emojiLength += 1
+  }
+  message.value = before + emoji + after
+  closeElement()
+
+  // Set the cursor position to after the newly inserted text
+  const newCaretPosition = caretPosition + emojiLength
+  focus()
+  nextTick(() => {
+    messageTextarea.value.setSelectionRange(newCaretPosition, newCaretPosition)
+  })
+  onInput()
+}
+
+function onToggleEmojiPicker(state: boolean) {
+  emojiPickerOpen.value = state
+
+  focus()
+}
+
+function submitMessage() {
+  const error = props.validator(message.value)
+  if (error === false) {
+    if (message.value.startsWith('/')) {
+      store.commit('botCommands/addCommand', {
+        partnerId: props.partnerId,
+        command: message.value.trim(),
+        timestamp: Date.now()
       })
-      this.onInput()
-    },
+    }
+    emit('message', message.value)
+    message.value = ''
+    store.commit('draftMessage/deleteMessage', {
+      message: message.value,
+      partnerId: props.partnerId
+    })
+    botCommandIndex.value = null
+    botCommandSelectionMode.value = false
+  } else {
+    emit('error', error)
+  }
 
-    onToggleEmojiPicker(state) {
-      this.emojiPickerOpen = state
+  // Fix textarea height to 1 row after miltiline message send
+  calculateInputHeight()
+  focus()
+}
 
-      this.focus()
-    },
+function calculateInputHeight() {
+  nextTick(messageTextarea.value.calculateInputHeight)
+}
 
-    submitMessage() {
-      const error = this.validator(this.message)
-      if (error === false) {
-        if (this.message.startsWith('/')) {
-          this.$store.commit('botCommands/addCommand', {
-            partnerId: this.partnerId,
-            command: this.message.trim(),
-            timestamp: Date.now()
-          })
-        }
-        this.$emit('message', this.message)
-        this.message = ''
-        this.$store.commit('draftMessage/deleteMessage', {
-          message: this.message,
-          partnerId: this.partnerId
-        })
-        this.botCommandIndex = null
-        this.botCommandSelectionMode = false
-      } else {
-        this.$emit('error', error)
-      }
+function addLineFeed() {
+  message.value += '\n'
+}
 
-      // Fix textarea height to 1 row after miltiline message send
-      this.calculateInputHeight()
-      this.focus()
-    },
-    calculateInputHeight() {
-      nextTick(this.$refs.messageTextarea.calculateInputHeight)
-    },
-    addLineFeed() {
-      this.message += '\n'
-    },
-    focus() {
-      this.$refs.messageTextarea.focus()
-    },
-    selectCommand(event) {
-      const direction = event.code
-      if (!this.message) {
-        this.botCommandSelectionMode = true
-      }
-      if (!this.botCommandSelectionMode) {
-        return
-      }
-      event.preventDefault()
-      const commands = this.$store.getters['botCommands/getCommandsHistory'](this.partnerId)
-      const maxIndex = commands.length > 0 ? commands.length - 1 : 0
-      if (this.botCommandIndex === null) {
-        if (direction === 'ArrowUp') {
-          this.botCommandIndex = maxIndex
-          this.message = commands[this.botCommandIndex]?.command || ''
-        }
-        return
-      }
+function focus() {
+  messageTextarea.value.focus()
+}
 
-      if (direction === 'ArrowUp') {
-        if (this.botCommandIndex > 0) {
-          this.botCommandIndex--
-          this.message = commands[this.botCommandIndex]?.command || ''
-        }
-        return
-      }
+function selectCommand(event: KeyboardEvent) {
+  const direction = event.code
+  if (!message.value) {
+    botCommandSelectionMode.value = true
+  }
+  if (!botCommandSelectionMode.value) {
+    return
+  }
+  event.preventDefault()
+  const commands = store.getters['botCommands/getCommandsHistory'](props.partnerId)
+  const maxIndex = commands.length > 0 ? commands.length - 1 : 0
+  if (botCommandIndex.value === null) {
+    if (direction === 'ArrowUp') {
+      botCommandIndex.value = maxIndex
+      message.value = commands[botCommandIndex.value]?.command || ''
+    }
+    return
+  }
 
-      if (this.botCommandIndex < maxIndex) {
-        this.botCommandIndex++
-        this.message = commands[this.botCommandIndex]?.command || ''
-      }
+  if (direction === 'ArrowUp') {
+    if (botCommandIndex.value > 0) {
+      botCommandIndex.value--
+      message.value = commands[botCommandIndex.value]?.command || ''
     }
+    return
+  }
+
+  if (botCommandIndex.value < maxIndex) {
+    botCommandIndex.value++
+    message.value = commands[botCommandIndex.value]?.command || ''
   }
 }
+
+defineExpose({
+  focus
+})
 </script>
 
 <style lang="scss" scoped>

From 6403cf6c411809d27ea4783f1a206689e46947a1 Mon Sep 17 00:00:00 2001
From: skranee <125743202+skranee@users.noreply.github.com>
Date: Thu, 17 Apr 2025 13:31:55 +0300
Subject: [PATCH 09/18] hotfix: remove new chat from newChats when leaving
 chatroom

---
 src/components/Chat/Chat.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/Chat/Chat.vue b/src/components/Chat/Chat.vue
index 855ffd610..58d1c776e 100644
--- a/src/components/Chat/Chat.vue
+++ b/src/components/Chat/Chat.vue
@@ -446,7 +446,7 @@ onMounted(async () => {
   if (isNewChat.value) {
     const partnerName = store.getters['chat/getPartnerName'](props.partnerId)
 
-    await retrievePublicKey(props.partnerId, partnerName)
+    await createChat(props.partnerId, partnerName)
   }
 
   const userMessages = messages.value.filter(
@@ -472,9 +472,13 @@ onMounted(async () => {
 onBeforeUnmount(() => {
   window.removeEventListener('keyup', onKeyPress)
   Visibility.unbind(Number(visibilityId.value))
+
+  if (isNewChat.value) {
+    store.commit('chat/removeNewChat', props.partnerId)
+  }
 })
 
-async function retrievePublicKey(partnerId: string, partnerName: string) {
+async function createChat(partnerId: string, partnerName: string) {
   try {
     isGettingPublicKey.value = true
     await store.dispatch('chat/createChat', {

From a3690718a52f692012dbb2a23cf89059662030c7 Mon Sep 17 00:00:00 2001
From: skranee <125743202+skranee@users.noreply.github.com>
Date: Fri, 18 Apr 2025 11:23:40 +0300
Subject: [PATCH 10/18] refactor: add types and locale

---
 src/components/AChat/AChat.vue          | 39 +++++++++++--------------
 src/components/AChat/AChatForm.vue      | 25 +++++++++-------
 src/components/Chat/ChatPlaceholder.vue |  6 ++--
 src/components/ChatStartDialog.vue      |  4 +--
 src/locales/en.json                     |  1 +
 src/locales/ru.json                     |  1 +
 src/views/Chats.vue                     |  2 +-
 7 files changed, 40 insertions(+), 38 deletions(-)

diff --git a/src/components/AChat/AChat.vue b/src/components/AChat/AChat.vue
index 1dd6ca479..95a019df0 100644
--- a/src/components/AChat/AChat.vue
+++ b/src/components/AChat/AChat.vue
@@ -66,21 +66,20 @@ const classes = {
   overlay: `${className}__overlay`
 }
 
-const props = withDefaults(
-  defineProps<{
-    messages: NormalizedChatMessageTransaction[]
-    partners: User[]
-    userId: string
-    loading: boolean
-    locale: string
-  }>(),
-  {
-    messages: () => [],
-    partners: () => [],
-    loading: false,
-    locale: 'en'
-  }
-)
+type Props = {
+  messages: NormalizedChatMessageTransaction[]
+  partners: User[]
+  userId: string
+  loading: boolean
+  locale: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  messages: () => [],
+  partners: () => [],
+  loading: false,
+  locale: 'en'
+})
 
 const emit = defineEmits(['scroll', 'scroll:bottom', 'scroll:top'])
 
@@ -241,14 +240,10 @@ onBeforeUnmount(() => {
 })
 
 defineExpose({
-  classes,
-  messagesRef,
-  maintainScrollPosition,
   scrollToBottom,
-  scrollTo,
-  scrollToMessage,
+  isScrolledToBottom,
   scrollToMessageEasy,
-  getSenderMeta,
-  isScrolledToBottom
+  maintainScrollPosition,
+  scrollToMessage
 })
 </script>
diff --git a/src/components/AChat/AChatForm.vue b/src/components/AChat/AChatForm.vue
index 9fd427297..b3d052815 100644
--- a/src/components/AChat/AChatForm.vue
+++ b/src/components/AChat/AChatForm.vue
@@ -9,7 +9,7 @@
       ref="messageTextarea"
       v-model="message"
       @input="onInput"
-      :placeholder="label"
+      :placeholder="placeholder"
       :disabled="isKeyMissing"
       hide-details
       single-line
@@ -49,15 +49,19 @@ import ChatEmojis from '@/components/Chat/ChatEmojis.vue'
 import { isMobile } from '@/lib/display-mobile'
 import { mdiSend } from '@mdi/js'
 import { useStore } from 'vuex'
+import { useI18n } from 'vue-i18n'
+
+const store = useStore()
+const { t } = useI18n()
 
 type Props = {
-  partnerId: string
-  messageText: string
-  showSendButton: boolean
-  sendOnEnter: boolean
-  label: string
-  isKeyMissing: boolean
-  showDivider: boolean
+  partnerId?: string
+  messageText?: string
+  showSendButton?: boolean
+  sendOnEnter?: boolean
+  label?: string
+  isKeyMissing?: boolean
+  showDivider?: boolean
   validator: (message: string) => string | false
 }
 
@@ -66,7 +70,7 @@ const props = withDefaults(defineProps<Props>(), {
   messageText: '',
   showSendButton: true,
   sendOnEnter: true,
-  label: 'Type a message',
+  label: undefined,
   isKeyMissing: false,
   showDivider: false
 })
@@ -77,8 +81,6 @@ const emit = defineEmits<{
   (e: 'error', error: string): void
 }>()
 
-const store = useStore()
-
 const message = ref('')
 const emojiPickerOpen = ref(false)
 const botCommandIndex = ref<number | null>(null)
@@ -94,6 +96,7 @@ const classes = [
   }
 ]
 
+const placeholder = computed(() => props.label ?? t('chats.type_a_message'))
 const isDesktopDevice = computed(() => !isMobile())
 const listeners = computed(() => {
   return {
diff --git a/src/components/Chat/ChatPlaceholder.vue b/src/components/Chat/ChatPlaceholder.vue
index b487214de..ce1f7705c 100644
--- a/src/components/Chat/ChatPlaceholder.vue
+++ b/src/components/Chat/ChatPlaceholder.vue
@@ -27,11 +27,13 @@ import { useI18n } from 'vue-i18n'
 
 const { t } = useI18n()
 
-defineProps<{
+type Props = {
   showPlaceholder: boolean
   isGettingPublicKey: boolean
   isKeyMissing: boolean
-}>()
+}
+
+defineProps<Props>()
 
 const className = 'chat-placeholder'
 const classes = {
diff --git a/src/components/ChatStartDialog.vue b/src/components/ChatStartDialog.vue
index 3a6d70ec1..9ae200579 100644
--- a/src/components/ChatStartDialog.vue
+++ b/src/components/ChatStartDialog.vue
@@ -140,8 +140,8 @@ export default {
         'start-chat',
         this.recipientAddress,
         this.uriMessage,
-        true,
-        this.recipientName
+        this.recipientName,
+        true
       )
     },
 
diff --git a/src/locales/en.json b/src/locales/en.json
index bd0d13250..034847c9a 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -52,6 +52,7 @@
     "start_chat": "Start chat",
     "title": "Chats",
     "too_long": "The message is too long",
+    "type_a_message": "Type a message",
     "invalid_message": "Invalid message",
     "message_not_found": "Message not found",
     "free_adm_disclaimer": "ADAMANT is unique among messengers—it's truly decentralized. Every action, including messaging, incurs a network fee of 0.001 ADM. To start messaging now, get your free welcome coins.",
diff --git a/src/locales/ru.json b/src/locales/ru.json
index 3f76b3350..5ece842c4 100644
--- a/src/locales/ru.json
+++ b/src/locales/ru.json
@@ -52,6 +52,7 @@
     "start_chat": "Начать чат",
     "title": "Чаты",
     "too_long": "Сообщение слишком длинное",
+    "type_a_message": "Напишите сообщение",
     "invalid_message": "Невалидное сообщение",
     "message_not_found": "Сообщение не найдено",
     "free_adm_disclaimer": "АДАМАНТ не такой, как другие мессенджеры — он по-настоящему децентрализованный. Каждое действие, включая отправку сообщения, имеет комиссию сети 0.001 ADM. Чтобы начать общение, получите бесплатные монеты.",
diff --git a/src/views/Chats.vue b/src/views/Chats.vue
index 63620d0dc..2fc3303a6 100644
--- a/src/views/Chats.vue
+++ b/src/views/Chats.vue
@@ -145,7 +145,7 @@ export default {
     this.destroyScrollListener()
   },
   methods: {
-    openChat(partnerId, messageText, retrieveKey = false, partnerName) {
+    openChat(partnerId, messageText, partnerName, retrieveKey = false) {
       if (retrieveKey) {
         this.$store.commit('chat/addNewChat', { partnerId, partnerName })
       }

From 974f91bc8cc1f3d1dea2ab0599bdc9f250d68630 Mon Sep 17 00:00:00 2001
From: skranee <125743202+skranee@users.noreply.github.com>
Date: Sun, 20 Apr 2025 00:42:19 +0300
Subject: [PATCH 11/18] feat: update placeholder logic and refactor code

---
 src/components/AChat/AChat.vue          | 32 ++++++++++++++---
 src/components/AChat/AChatForm.vue      |  6 ++--
 src/components/Chat/Chat.vue            | 47 +++++++++++++++++--------
 src/components/Chat/ChatPlaceholder.vue | 40 +++++++++++++++++----
 src/components/ChatStartDialog.vue      |  8 +----
 src/locales/en.json                     |  6 +++-
 src/locales/ru.json                     |  6 +++-
 7 files changed, 109 insertions(+), 36 deletions(-)

diff --git a/src/components/AChat/AChat.vue b/src/components/AChat/AChat.vue
index 95a019df0..e6295bcdf 100644
--- a/src/components/AChat/AChat.vue
+++ b/src/components/AChat/AChat.vue
@@ -10,8 +10,8 @@
           <v-progress-circular
             v-show="loading"
             indeterminate
-            color="primary"
-            size="24"
+            :class="classes.spinner"
+            :size="20"
             style="z-index: 100"
           />
         </div>
@@ -63,7 +63,8 @@ const classes = {
   body: `${className}__body`,
   bodyMessages: `${className}__body-messages`,
   fab: `${className}__fab`,
-  overlay: `${className}__overlay`
+  overlay: `${className}__overlay`,
+  spinner: `${className}__spinner`
 }
 
 type Props = {
@@ -244,6 +245,29 @@ defineExpose({
   isScrolledToBottom,
   scrollToMessageEasy,
   maintainScrollPosition,
-  scrollToMessage
+  scrollToMessage,
+  scrollTo
 })
 </script>
+
+<style lang="scss" scoped>
+@use 'sass:map';
+@use '@/assets/styles/settings/_colors.scss';
+
+/** Themes **/
+.v-theme--light {
+  .a-chat {
+    &__spinner {
+      color: map.get(colors.$adm-colors, 'grey');
+    }
+  }
+}
+
+.v-theme--dark {
+  .a-chat {
+    &__spinner {
+      color: map.get(colors.$adm-colors, 'regular');
+    }
+  }
+}
+</style>
diff --git a/src/components/AChat/AChatForm.vue b/src/components/AChat/AChatForm.vue
index b3d052815..7bf572fdc 100644
--- a/src/components/AChat/AChatForm.vue
+++ b/src/components/AChat/AChatForm.vue
@@ -10,7 +10,7 @@
       v-model="message"
       @input="onInput"
       :placeholder="placeholder"
-      :disabled="isKeyMissing"
+      :disabled="shouldDisableInput"
       hide-details
       single-line
       auto-grow
@@ -60,7 +60,7 @@ type Props = {
   showSendButton?: boolean
   sendOnEnter?: boolean
   label?: string
-  isKeyMissing?: boolean
+  shouldDisableInput?: boolean
   showDivider?: boolean
   validator: (message: string) => string | false
 }
@@ -71,7 +71,7 @@ const props = withDefaults(defineProps<Props>(), {
   showSendButton: true,
   sendOnEnter: true,
   label: undefined,
-  isKeyMissing: false,
+  shouldDisableInput: false,
   showDivider: false
 })
 
diff --git a/src/components/Chat/Chat.vue b/src/components/Chat/Chat.vue
index 58d1c776e..468d1bfb0 100644
--- a/src/components/Chat/Chat.vue
+++ b/src/components/Chat/Chat.vue
@@ -202,7 +202,7 @@
           :send-on-enter="sendMessageOnEnter"
           :show-divider="true"
           :label="t('chats.message')"
-          :is-key-missing="isKeyMissing"
+          :should-disable-input="shouldDisableInput"
           :message-text="
             $route.query.messageText || $store.getters['draftMessage/draftMessage'](partnerId)
           "
@@ -308,6 +308,7 @@ import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 import { useStore } from 'vuex'
 import ChatPlaceholder from '@/components/Chat/ChatPlaceholder.vue'
+import { watchImmediate } from '@vueuse/core'
 
 const validationErrors = {
   emptyMessage: 'EMPTY_MESSAGE',
@@ -365,8 +366,16 @@ const isGettingPublicKey = ref(false)
 const isKeyMissing = ref(false)
 
 const messages = computed(() => store.getters['chat/messages'](props.partnerId))
+const userMessages = computed(() =>
+  messages.value.filter(
+    (message: NormalizedChatMessageTransaction) => message.senderId === userId.value
+  )
+)
 const userId = computed(() => store.state.address)
 const isNewChat = computed(() => store.getters['chat/isNewChat'](props.partnerId))
+const shouldDisableInput = computed(
+  () => isGettingPublicKey.value || isKeyMissing.value || !store.state.publicKeys[props.partnerId]
+)
 
 const getPartnerName = (address: string) => {
   const name: string = store.getters['partners/displayName'](address) || ''
@@ -432,12 +441,24 @@ watch(replyMessageId, (messageId) => {
   })
 })
 
+watch(userMessages, () => {
+  if (noMoreMessages.value) {
+    showNewChatPlaceholder.value = !userMessages.value.length
+  }
+})
+
+watchImmediate(messages, (updatedMessages) => {
+  if (isFulfilled.value && !updatedMessages.length) {
+    store.commit('chat/addNewChat', { partnerId: props.partnerId })
+  }
+})
+
 onBeforeMount(() => {
   window.addEventListener('keyup', onKeyPress)
 })
 
-onMounted(async () => {
-  if (chatPage.value <= 0) await fetchChatMessages()
+async function handleEmptyChat() {
+  showNewChatPlaceholder.value = !userMessages.value.length
 
   if (!messages.value.length) {
     store.commit('chat/addNewChat', { partnerId: props.partnerId })
@@ -448,13 +469,16 @@ onMounted(async () => {
 
     await createChat(props.partnerId, partnerName)
   }
+}
 
-  const userMessages = messages.value.filter(
-    (message: NormalizedChatMessageTransaction) =>
-      message.senderId && message.senderId === userId.value
-  )
+onMounted(async () => {
+  if (isNewChat.value) {
+    showNewChatPlaceholder.value = true
+  }
 
-  showNewChatPlaceholder.value = !userMessages.length
+  if (chatPage.value <= 0) await fetchChatMessages()
+
+  await handleEmptyChat()
 
   scrollBehavior()
   nextTick(() => {
@@ -485,14 +509,9 @@ async function createChat(partnerId: string, partnerName: string) {
       partnerId,
       partnerName
     })
-  } catch (err: unknown) {
-    const message = err instanceof Error ? err.message : 'Unknown error'
+  } catch {
     vibrate.long()
     isKeyMissing.value = true
-
-    store.dispatch('snackbar/show', {
-      message: message
-    })
   } finally {
     isGettingPublicKey.value = false
   }
diff --git a/src/components/Chat/ChatPlaceholder.vue b/src/components/Chat/ChatPlaceholder.vue
index ce1f7705c..ba4cb2b5e 100644
--- a/src/components/Chat/ChatPlaceholder.vue
+++ b/src/components/Chat/ChatPlaceholder.vue
@@ -1,7 +1,7 @@
 <template>
   <div v-if="showPlaceholder || isGettingPublicKey || isKeyMissing" :class="classes.root">
     <div v-if="showPlaceholder && !isKeyMissing" :class="classes.container">
-      <Logo style="width: 35px" />
+      <v-img :src="logo" :class="classes.logo" />
       <p v-for="key in keys" :key="key" :class="classes.row">
         {{ t(`chats.placeholder.${key}`) }}
       </p>
@@ -15,14 +15,16 @@
         {{ t('chats.placeholder.public-key') }}
       </div>
       <div v-else>
-        {{ t('chats.placeholder.key-missing') }}
+        <p>{{ t('chats.placeholder.can_not_message') }}</p>
+        <a class="a-text-active" @click="openLink">
+          {{ t('chats.placeholder.what_does_it_mean.text') }}
+        </a>
       </div>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import Logo from '@/components/icons/common/Logo.vue'
 import { useI18n } from 'vue-i18n'
 
 const { t } = useI18n()
@@ -35,27 +37,34 @@ type Props = {
 
 defineProps<Props>()
 
+const logo = '/img/adamant-logo-transparent-512x512.png'
 const className = 'chat-placeholder'
 const classes = {
   root: className,
   row: `${className}__row`,
   container: `${className}__container`,
-  spinner: `${className}__spinner`
+  spinner: `${className}__spinner`,
+  logo: `${className}__logo`
 }
 const keys = ['encrypted', 'ipfs', 'anonymous', 'censorship']
+
+function openLink() {
+  const link = t('chats.placeholder.what_does_it_mean.link')
+  window.open(link, '_blank', 'resizable,scrollbars,status,noopener')
+}
 </script>
 
 <style lang="scss" scoped>
 @use 'sass:map';
 @use '@/assets/styles/settings/_colors.scss';
+@use 'vuetify/settings';
 
 .chat-placeholder {
   display: flex;
   flex-direction: column;
   row-gap: 10px;
   width: 100%;
-  padding: 8px 0;
-  margin: 16px 0;
+  margin-bottom: 16px;
 
   &__container {
     margin: auto;
@@ -84,12 +93,22 @@ const keys = ['encrypted', 'ipfs', 'anonymous', 'censorship']
     width: 100%;
     text-align: center;
   }
+
+  &__logo {
+    width: 100px;
+  }
 }
 
 /** Themes **/
 .v-theme--light {
   .chat-placeholder {
     &__container {
+      color: map.get(colors.$adm-colors, 'regular');
+
+      a {
+        color: map.get(settings.$blue, 'base');
+      }
+
       background: #fff;
       box-shadow:
         0 1px 10px hsla(0, 0%, 39.2%, 0.06),
@@ -106,6 +125,10 @@ const keys = ['encrypted', 'ipfs', 'anonymous', 'censorship']
 .v-theme--dark {
   .chat-placeholder {
     &__container {
+      a {
+        color: map.get(settings.$blue, 'lighten-2');
+      }
+
       background-color: map.get(colors.$adm-colors, 'black');
       box-shadow:
         0 1px 10px hsla(0, 0%, 39.2%, 0.06),
@@ -116,6 +139,11 @@ const keys = ['encrypted', 'ipfs', 'anonymous', 'censorship']
     &__spinner {
       color: map.get(colors.$adm-colors, 'regular');
     }
+
+    &__logo {
+      filter: invert(1);
+      mix-blend-mode: lighten;
+    }
   }
 }
 </style>
diff --git a/src/components/ChatStartDialog.vue b/src/components/ChatStartDialog.vue
index 9ae200579..2208aa1a9 100644
--- a/src/components/ChatStartDialog.vue
+++ b/src/components/ChatStartDialog.vue
@@ -136,13 +136,7 @@ export default {
         return Promise.reject(new Error(this.$t('chats.incorrect_address')))
       }
 
-      return this.$emit(
-        'start-chat',
-        this.recipientAddress,
-        this.uriMessage,
-        this.recipientName,
-        true
-      )
+      this.$emit('start-chat', this.recipientAddress, this.uriMessage, this.recipientName, true)
     },
 
     /**
diff --git a/src/locales/en.json b/src/locales/en.json
index 034847c9a..068d6f682 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -38,7 +38,11 @@
       "censorship": "⛓\uFE0F Censorship-resistant blockchain architecture",
       "encrypted": "\uD83D\uDD10 End-to-end encrypted across all devices",
       "ipfs": "☁\uFE0F Decentralized IPFS storage for files/media",
-      "key-missing": "Unable to start a chat, public key is missing",
+      "can_not_message": "Cannot message this user yet—their account isn't activated",
+      "what_does_it_mean": {
+        "text": "What does it mean?",
+        "link": "https://news.adamant.im/chats-and-uninitialized-accounts-in-adamant-5035438e2fcd"
+      },
       "public-key": "Retrieving your partner’s key to encrypt messages…"
     },
     "received_label": "Received",
diff --git a/src/locales/ru.json b/src/locales/ru.json
index 5ece842c4..08c315e9e 100644
--- a/src/locales/ru.json
+++ b/src/locales/ru.json
@@ -38,7 +38,11 @@
       "censorship": "⛓\uFE0F Устойчивая к цензуре блокчейн-архитектура",
       "encrypted": "\uD83D\uDD10 Сквозное шифрование на всех устройствах",
       "ipfs": "☁\uFE0F Распределенное IPFS-хранилище файлов и медиа",
-      "key-missing": "Невозможно начать чат, публичного ключа не существует",
+      "can_not_message": "Написать этому пользователю пока не получится — его аккаунт не активирован",
+      "what_does_it_mean": {
+        "text": "Что это значит?",
+        "link": "https://news.adamant.im/chats-and-uninitialized-accounts-in-adamant-5035438e2fcd"
+      },
       "public-key": "Получаю ключ вашего собеседника для шифрования сообщений…"
     },
     "received_label": "Получили",

From 81c3bc047f73a6070a28b461a68a08998f27cf53 Mon Sep 17 00:00:00 2001
From: skranee <125743202+skranee@users.noreply.github.com>
Date: Sun, 20 Apr 2025 00:45:22 +0300
Subject: [PATCH 12/18] refactor: declare function after component lifecycle
 stages

---
 src/components/Chat/Chat.vue | 28 ++++++++++++++--------------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/components/Chat/Chat.vue b/src/components/Chat/Chat.vue
index 468d1bfb0..d2cefdba7 100644
--- a/src/components/Chat/Chat.vue
+++ b/src/components/Chat/Chat.vue
@@ -457,20 +457,6 @@ onBeforeMount(() => {
   window.addEventListener('keyup', onKeyPress)
 })
 
-async function handleEmptyChat() {
-  showNewChatPlaceholder.value = !userMessages.value.length
-
-  if (!messages.value.length) {
-    store.commit('chat/addNewChat', { partnerId: props.partnerId })
-  }
-
-  if (isNewChat.value) {
-    const partnerName = store.getters['chat/getPartnerName'](props.partnerId)
-
-    await createChat(props.partnerId, partnerName)
-  }
-}
-
 onMounted(async () => {
   if (isNewChat.value) {
     showNewChatPlaceholder.value = true
@@ -502,6 +488,20 @@ onBeforeUnmount(() => {
   }
 })
 
+async function handleEmptyChat() {
+  showNewChatPlaceholder.value = !userMessages.value.length
+
+  if (!messages.value.length) {
+    store.commit('chat/addNewChat', { partnerId: props.partnerId })
+  }
+
+  if (isNewChat.value) {
+    const partnerName = store.getters['chat/getPartnerName'](props.partnerId)
+
+    await createChat(props.partnerId, partnerName)
+  }
+}
+
 async function createChat(partnerId: string, partnerName: string) {
   try {
     isGettingPublicKey.value = true

From a65e875414877cefd3ec86c88a43f68b9fdf1e52 Mon Sep 17 00:00:00 2001
From: skranee <125743202+skranee@users.noreply.github.com>
Date: Tue, 29 Apr 2025 17:55:30 +0300
Subject: [PATCH 13/18] refactor: fix styles

---
 src/assets/styles/components/_chat.scss |  2 ++
 src/components/AChat/AChat.vue          | 13 ++++++++++++-
 src/components/Chat/Chat.vue            |  1 +
 src/components/Chat/ChatPlaceholder.vue |  9 ++++++---
 4 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/src/assets/styles/components/_chat.scss b/src/assets/styles/components/_chat.scss
index 921925782..87f31f3f3 100644
--- a/src/assets/styles/components/_chat.scss
+++ b/src/assets/styles/components/_chat.scss
@@ -19,6 +19,8 @@ $chat-avatar-size: 40px;
 
 $scroll-bar-width: 4px;
 
+$placeholder-height: 248px;
+
 .a-chat {
   display: block;
   text-decoration: none;
diff --git a/src/components/AChat/AChat.vue b/src/components/AChat/AChat.vue
index e6295bcdf..5710b19d3 100644
--- a/src/components/AChat/AChat.vue
+++ b/src/components/AChat/AChat.vue
@@ -10,7 +10,7 @@
           <v-progress-circular
             v-show="loading"
             indeterminate
-            :class="classes.spinner"
+            :class="[classes.spinner, !messages.length ? `${classes.spinner}_no-messages` : '']"
             :size="20"
             style="z-index: 100"
           />
@@ -253,6 +253,17 @@ defineExpose({
 <style lang="scss" scoped>
 @use 'sass:map';
 @use '@/assets/styles/settings/_colors.scss';
+@use '@/assets/styles/components/_chat.scss';
+
+.a-chat {
+  &__spinner {
+    margin-top: 26px;
+
+    &_no-messages {
+      margin-top: chat.$placeholder-height + 16px;
+    }
+  }
+}
 
 /** Themes **/
 .v-theme--light {
diff --git a/src/components/Chat/Chat.vue b/src/components/Chat/Chat.vue
index 3714854f6..5032cfd58 100644
--- a/src/components/Chat/Chat.vue
+++ b/src/components/Chat/Chat.vue
@@ -92,6 +92,7 @@
 
       <template #placeholder>
         <chat-placeholder
+          v-if="!isWelcomeChat(partnerId)"
           :show-placeholder="showNewChatPlaceholder"
           :is-getting-public-key="isGettingPublicKey"
           :is-key-missing="isKeyMissing"
diff --git a/src/components/Chat/ChatPlaceholder.vue b/src/components/Chat/ChatPlaceholder.vue
index ba4cb2b5e..5244d2d82 100644
--- a/src/components/Chat/ChatPlaceholder.vue
+++ b/src/components/Chat/ChatPlaceholder.vue
@@ -1,7 +1,7 @@
 <template>
   <div v-if="showPlaceholder || isGettingPublicKey || isKeyMissing" :class="classes.root">
     <div v-if="showPlaceholder && !isKeyMissing" :class="classes.container">
-      <v-img :src="logo" :class="classes.logo" />
+      <img :src="logo" :class="classes.logo" alt="logo" />
       <p v-for="key in keys" :key="key" :class="classes.row">
         {{ t(`chats.placeholder.${key}`) }}
       </p>
@@ -57,20 +57,21 @@ function openLink() {
 <style lang="scss" scoped>
 @use 'sass:map';
 @use '@/assets/styles/settings/_colors.scss';
+@use '@/assets/styles/components/_chat.scss';
 @use 'vuetify/settings';
 
 .chat-placeholder {
   display: flex;
   flex-direction: column;
-  row-gap: 10px;
+  row-gap: 16px;
   width: 100%;
   margin-bottom: 16px;
 
   &__container {
     margin: auto;
     display: flex;
-    width: fit-content;
     flex-direction: column;
+    height: chat.$placeholder-height;
     justify-content: flex-start;
     align-items: center;
     row-gap: 5px;
@@ -79,6 +80,7 @@ function openLink() {
     border-radius: 8px;
 
     &_public-key {
+      height: auto;
       flex-direction: row;
       column-gap: 8px;
     }
@@ -96,6 +98,7 @@ function openLink() {
 
   &__logo {
     width: 100px;
+    height: 100px;
   }
 }
 

From 05711572574a44bdacc57c9dcdff1b4c899076f1 Mon Sep 17 00:00:00 2001
From: skranee <125743202+skranee@users.noreply.github.com>
Date: Wed, 30 Apr 2025 17:22:17 +0300
Subject: [PATCH 14/18] fix: autofocus in new chat and little styles
 corrections

---
 src/components/AChat/AChat.vue     |  4 ++--
 src/components/AChat/AChatForm.vue | 13 ++++++++++++-
 src/components/Chat/Chat.vue       |  1 +
 src/components/Chat/Chats.vue      | 13 +++++--------
 4 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/src/components/AChat/AChat.vue b/src/components/AChat/AChat.vue
index 5710b19d3..d7fdda3b6 100644
--- a/src/components/AChat/AChat.vue
+++ b/src/components/AChat/AChat.vue
@@ -147,7 +147,7 @@ const maintainScrollPosition = () => {
 }
 
 const scrollToBottom = () => {
-  if (messagesRef.value) {
+  if (messagesRef.value && messagesRef.value.scrollHeight) {
     messagesRef.value.scrollTop = messagesRef.value.scrollHeight
   }
 }
@@ -260,7 +260,7 @@ defineExpose({
     margin-top: 26px;
 
     &_no-messages {
-      margin-top: chat.$placeholder-height + 16px;
+      margin-top: chat.$placeholder-height + 42px;
     }
   }
 }
diff --git a/src/components/AChat/AChatForm.vue b/src/components/AChat/AChatForm.vue
index 7e6079243..10c46ee0e 100644
--- a/src/components/AChat/AChatForm.vue
+++ b/src/components/AChat/AChatForm.vue
@@ -44,7 +44,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import ChatEmojis from '@/components/Chat/ChatEmojis.vue'
 import { isMobile } from '@/lib/display-mobile'
 import { mdiSend } from '@mdi/js'
@@ -154,6 +154,17 @@ onBeforeUnmount(() => {
   destroyKeyCommandListener()
 })
 
+watch(
+  () => props.shouldDisableInput,
+  (newVal) => {
+    nextTick(() => {
+      if (!newVal && !isInputFocused.value) {
+        messageTextarea.value.focus()
+      }
+    })
+  }
+)
+
 const attachKeyCommandListener = () => {
   window.addEventListener('keydown', onKeyCommand)
 }
diff --git a/src/components/Chat/Chat.vue b/src/components/Chat/Chat.vue
index 5032cfd58..92db9af62 100644
--- a/src/components/Chat/Chat.vue
+++ b/src/components/Chat/Chat.vue
@@ -423,6 +423,7 @@ const chatPage = computed<number>(() => store.getters['chat/chatPage'](props.par
 const scrollPosition = computed<number | false>(() =>
   store.getters['chat/scrollPosition'](props.partnerId)
 )
+
 const numOfNewMessages = computed<number>(() =>
   store.getters['chat/numOfNewMessages'](props.partnerId)
 )
diff --git a/src/components/Chat/Chats.vue b/src/components/Chat/Chats.vue
index 12b6f652e..fa31ffc9b 100644
--- a/src/components/Chat/Chats.vue
+++ b/src/components/Chat/Chats.vue
@@ -293,15 +293,12 @@ const loadChatsPaged = () => {
   if (loading.value || noMoreChats.value) return
 
   loading.value = true
-  store
-    .dispatch('chat/loadChatsPaged')
-    .catch(() => {
+  store.dispatch('chat/loadChatsPaged').finally(() => {
+    if (store.state.chat.offset === -1) {
       noMoreChats.value = true
-    })
-    .finally(() => {
-      loading.value = false
-      onScroll() // update messages and remove loadingSeparator, if needed
-    })
+    }
+    loading.value = false
+  })
 }
 
 const messagesCount = (partnerId: string) => {

From fdd9855e7280a9a7185ce0de5bd9ff67f5d160a0 Mon Sep 17 00:00:00 2001
From: skranee <125743202+skranee@users.noreply.github.com>
Date: Thu, 1 May 2025 21:04:40 +0300
Subject: [PATCH 15/18] fix: floating bug with chats not loading

---
 src/components/Chat/Chats.vue   | 21 +++------------------
 src/store/modules/chat/index.js | 16 +++++++++-------
 2 files changed, 12 insertions(+), 25 deletions(-)

diff --git a/src/components/Chat/Chats.vue b/src/components/Chat/Chats.vue
index fa31ffc9b..4c76938cd 100644
--- a/src/components/Chat/Chats.vue
+++ b/src/components/Chat/Chats.vue
@@ -81,21 +81,13 @@ import NodesOfflineDialog from '@/components/NodesOfflineDialog.vue'
 import { getAdamantChatMeta, isAdamantChat, isStaticChat } from '@/lib/chat/meta/utils'
 import { mdiMessageOutline, mdiCheckAll } from '@mdi/js'
 import { useRoute, useRouter } from 'vue-router'
-import {
-  computed,
-  onActivated,
-  onBeforeMount,
-  onBeforeUnmount,
-  onDeactivated,
-  onMounted,
-  ref,
-  watch
-} from 'vue'
+import { computed, onActivated, onBeforeUnmount, onDeactivated, onMounted, ref, watch } from 'vue'
 import { useChatStateStore } from '@/stores/chat-state'
 import { storeToRefs } from 'pinia'
 import { useStore } from 'vuex'
 import { useI18n } from 'vue-i18n'
 import { useChatsSpinner } from '@/hooks/useChatsSpinner'
+import { computedEager } from '@vueuse/core'
 
 const scrollOffset = 64
 
@@ -131,9 +123,9 @@ const { setShowChatStartDialog } = chatStateStore
 const lastPartnerId = ref<string | null>(null)
 const savedRoute = ref(null)
 const loading = ref(false)
-const noMoreChats = ref(false)
 const loadingSeparator = ref<InstanceType<typeof ChatPreview>[]>([])
 
+const noMoreChats = computedEager(() => store.getters['chat/chatListOffset'] === -1)
 const chatPagePartnerId = computed(() => {
   // We assume partnerId to always be a string
   return route.params.partnerId as string
@@ -184,10 +176,6 @@ onDeactivated(() => {
   }
 })
 
-onBeforeMount(() => {
-  noMoreChats.value = store.getters['chat/chatListOffset'] === -1
-})
-
 onMounted(() => {
   document.addEventListener('keydown', onKeydownHandler)
   setShowChatStartDialog(props.showNewContact)
@@ -294,9 +282,6 @@ const loadChatsPaged = () => {
 
   loading.value = true
   store.dispatch('chat/loadChatsPaged').finally(() => {
-    if (store.state.chat.offset === -1) {
-      noMoreChats.value = true
-    }
     loading.value = false
   })
 }
diff --git a/src/store/modules/chat/index.js b/src/store/modules/chat/index.js
index 98a9fb0bb..bca2723cf 100644
--- a/src/store/modules/chat/index.js
+++ b/src/store/modules/chat/index.js
@@ -598,13 +598,15 @@ const actions = {
 
     return admApi
       .getChatRooms(rootState.address, { offset, limit: perPage })
-      .then(({ messages }) => {
-        dispatch('pushMessages', messages)
-
-        if (messages.length <= 0) {
-          commit('setOffset', -1)
-        } else {
-          commit('setOffset', offset + perPage)
+      .then(({ messages, count }) => {
+        if (count && Number(count) > 0) {
+          dispatch('pushMessages', messages)
+
+          if (messages.length <= 0) {
+            commit('setOffset', -1)
+          } else {
+            commit('setOffset', offset + perPage)
+          }
         }
       })
   },

From e9ed80b8635dddbf554cbc180730b4d5cf078901 Mon Sep 17 00:00:00 2001
From: skranee <125743202+skranee@users.noreply.github.com>
Date: Fri, 2 May 2025 11:10:46 +0300
Subject: [PATCH 16/18] fix: reset state when logout

---
 src/store/modules/chat/index.js | 20 +++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/src/store/modules/chat/index.js b/src/store/modules/chat/index.js
index bca2723cf..00bd614a4 100644
--- a/src/store/modules/chat/index.js
+++ b/src/store/modules/chat/index.js
@@ -552,6 +552,10 @@ const mutations = {
     state.chats = {}
     state.lastMessageHeight = 0
     state.isFulfilled = false
+    state.offset = 0
+    state.noActiveNodesDialog = undefined
+    state.newChats = {}
+    state.chatsActualUntil = 0
   }
 }
 
@@ -598,15 +602,13 @@ const actions = {
 
     return admApi
       .getChatRooms(rootState.address, { offset, limit: perPage })
-      .then(({ messages, count }) => {
-        if (count && Number(count) > 0) {
-          dispatch('pushMessages', messages)
-
-          if (messages.length <= 0) {
-            commit('setOffset', -1)
-          } else {
-            commit('setOffset', offset + perPage)
-          }
+      .then(({ messages }) => {
+        dispatch('pushMessages', messages)
+
+        if (messages.length <= 0) {
+          commit('setOffset', -1)
+        } else {
+          commit('setOffset', offset + perPage)
         }
       })
   },

From ddb6e94f9d5f22bcd154ff0c6b1c2db3f7a0794f Mon Sep 17 00:00:00 2001
From: skranee <125743202+skranee@users.noreply.github.com>
Date: Thu, 22 May 2025 16:36:08 +0300
Subject: [PATCH 17/18] minor refactor (add types, change to usetemplateref)

---
 src/components/AChat/AChat.vue     | 10 +++++++---
 src/components/AChat/AChatForm.vue | 21 +++++++++++++--------
 2 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/src/components/AChat/AChat.vue b/src/components/AChat/AChat.vue
index d7fdda3b6..4c8986fdb 100644
--- a/src/components/AChat/AChat.vue
+++ b/src/components/AChat/AChat.vue
@@ -46,7 +46,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted, onBeforeUnmount } from 'vue'
+import { ref, onMounted, onBeforeUnmount, useTemplateRef } from 'vue'
 import throttle from 'lodash/throttle'
 import scrollIntoView from 'scroll-into-view-if-needed'
 import Styler from 'stylefire'
@@ -82,9 +82,13 @@ const props = withDefaults(defineProps<Props>(), {
   locale: 'en'
 })
 
-const emit = defineEmits(['scroll', 'scroll:bottom', 'scroll:top'])
+const emit = defineEmits<{
+  (e: 'scroll', scrollPosition: number, isBottom: boolean): void
+  (e: 'scroll:bottom'): void
+  (e: 'scroll:top'): void
+}>()
 
-const messagesRef = ref<HTMLDivElement | null>(null)
+const messagesRef = useTemplateRef<HTMLDivElement | null>('messagesRef')
 const currentScrollHeight = ref(0)
 const currentScrollTop = ref(0)
 const currentClientHeight = ref(0)
diff --git a/src/components/AChat/AChatForm.vue b/src/components/AChat/AChatForm.vue
index 10c46ee0e..0b7c494d4 100644
--- a/src/components/AChat/AChatForm.vue
+++ b/src/components/AChat/AChatForm.vue
@@ -44,13 +44,18 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, useTemplateRef, watch } from 'vue'
 import ChatEmojis from '@/components/Chat/ChatEmojis.vue'
 import { isMobile } from '@/lib/display-mobile'
 import { mdiSend } from '@mdi/js'
 import { useChatStateStore } from '@/stores/chat-state'
 import { useStore } from 'vuex'
 import { useI18n } from 'vue-i18n'
+import { VTextarea } from 'vuetify/components'
+
+type Textarea = VTextarea & {
+  calculateInputHeight: () => void
+}
 
 const store = useStore()
 const chatStateStore = useChatStateStore()
@@ -89,7 +94,7 @@ const message = ref('')
 const botCommandIndex = ref<number | null>(null)
 const botCommandSelectionMode = ref(false)
 const isInputFocused = ref(false)
-const messageTextarea = ref()
+const messageTextarea = useTemplateRef<Textarea | null>('messageTextarea')
 
 const className = 'a-chat'
 const classes = [
@@ -159,7 +164,7 @@ watch(
   (newVal) => {
     nextTick(() => {
       if (!newVal && !isInputFocused.value) {
-        messageTextarea.value.focus()
+        messageTextarea.value?.focus()
       }
     })
   }
@@ -201,7 +206,7 @@ const onInput = () => {
 }
 
 const emojiPicture = (emoji: string) => {
-  const caretPosition = messageTextarea.value.selectionStart
+  const caretPosition = messageTextarea.value?.selectionStart || undefined
 
   let before = message.value.slice(0, caretPosition)
   const after = message.value.slice(caretPosition)
@@ -222,10 +227,10 @@ const emojiPicture = (emoji: string) => {
   closeElement()
 
   // Set the cursor position to after the newly inserted text
-  const newCaretPosition = caretPosition + emojiLength
+  const newCaretPosition = (caretPosition || 0) + emojiLength
   focus()
   nextTick(() => {
-    messageTextarea.value.setSelectionRange(newCaretPosition, newCaretPosition)
+    messageTextarea.value?.setSelectionRange(newCaretPosition, newCaretPosition)
   })
   onInput()
 }
@@ -264,7 +269,7 @@ const submitMessage = () => {
 }
 
 const calculateInputHeight = () => {
-  nextTick(messageTextarea.value.calculateInputHeight)
+  nextTick(messageTextarea.value?.calculateInputHeight)
 }
 
 const addLineFeed = () => {
@@ -272,7 +277,7 @@ const addLineFeed = () => {
 }
 
 const focus = () => {
-  messageTextarea.value.focus()
+  messageTextarea.value?.focus()
 }
 
 const selectCommand = (event: KeyboardEvent) => {

From f71ea49527247de55dc0d73ea178fb6307c667c3 Mon Sep 17 00:00:00 2001
From: skranee <125743202+skranee@users.noreply.github.com>
Date: Sat, 24 May 2025 14:00:53 +0300
Subject: [PATCH 18/18] refactor: remove computed and rename var

---
 src/components/AChat/AChat.vue     | 5 ++++-
 src/components/AChat/AChatForm.vue | 6 +++---
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/components/AChat/AChat.vue b/src/components/AChat/AChat.vue
index 4c8986fdb..63440de28 100644
--- a/src/components/AChat/AChat.vue
+++ b/src/components/AChat/AChat.vue
@@ -10,7 +10,10 @@
           <v-progress-circular
             v-show="loading"
             indeterminate
-            :class="[classes.spinner, !messages.length ? `${classes.spinner}_no-messages` : '']"
+            :class="{
+              [classes.spinner]: true,
+              [`${classes.spinner}_no-messages`]: !messages.length
+            }"
             :size="20"
             style="z-index: 100"
           />
diff --git a/src/components/AChat/AChatForm.vue b/src/components/AChat/AChatForm.vue
index 664928e8e..7ccf4d8ea 100644
--- a/src/components/AChat/AChatForm.vue
+++ b/src/components/AChat/AChatForm.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="classes">
+  <div :class="classList">
     <v-divider v-if="showDivider" class="a-chat__divider" />
 
     <slot name="reply-preview" />
@@ -97,7 +97,7 @@ const isInputFocused = ref(false)
 const messageTextarea = useTemplateRef<Textarea | null>('messageTextarea')
 
 const className = 'a-chat'
-const classes = [
+const classList = [
   `${className}__form`,
   {
     [`${className}__form--is-active`]: !!message.value
@@ -109,7 +109,7 @@ const isEmojiPickerOpen = computed({
   set: setEmojiPickerOpen
 })
 const placeholder = computed(() => props.label ?? t('chats.type_a_message'))
-const isDesktopDevice = computed(() => !isMobile())
+const isDesktopDevice = !isMobile()
 const listeners = computed(() => {
   return {
     keypress: (e: KeyboardEvent) => {