Merge branch 'dev' into AP1747

.gitmodules

@@ -1,10 +0,0 @@
-[submodule "android"]
-	path = android
-	url = https://github.com/Satellite-im/android.git
-	ignore = all
-	branch = main
-[submodule "electron"]
-	path = electron
-	url = https://github.com/Satellite-im/electron.git
-	ignore = all
-	branch = master

.vscode/settings.json

@@ -4,5 +4,9 @@
   "[vue]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
-  "cSpell.words": ["Dexie", "minisearch"]
+  "cSpell.words": ["Dexie", "minisearch"],
+  "nuxt.isNuxtApp": true,
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  }
 }

components/ui/Chat/InfiniteScroll/InfiniteScroll.html

@@ -0,0 +1,8 @@
+<div ref="root">
+  <slot v-if="isIntersecting" name="placeholder">
+    <div>{{ $t('pages.chat.infinite_scroll.loading') }}</div>
+  </slot>
+  <slot v-if="isComplete" name="no-more">
+    <div>{{ $t('pages.chat.infinite_scroll.no_more') }}</div>
+  </slot>
+</div>

components/ui/Chat/InfiniteScroll/InfiniteScroll.vue

@@ -0,0 +1,67 @@
+<template src="./InfiniteScroll.html" />
+
+<script lang="ts">
+import { PropType } from 'vue'
+
+const defaultOptions = {
+  threshold: 0 as number | number[],
+  rootMargin: '0px',
+  root: null,
+}
+
+declare interface BaseComponentData {
+  scrollObserver: IntersectionObserver | null
+  isIntersecting: boolean
+  isComplete: boolean
+  debounceTimeout: ReturnType<typeof setTimeout> | null
+}
+
+export default {
+  name: 'InfiniteScroll',
+  props: {
+    options: {
+      type: Object as PropType<typeof defaultOptions>,
+      default: () => defaultOptions,
+      required: false,
+    },
+  },
+  emits: ['intersect'],
+  data(): BaseComponentData {
+    return {
+      scrollObserver: null,
+      isIntersecting: false,
+      isComplete: false,
+      debounceTimeout: null,
+    }
+  },
+  mounted() {
+    this.scrollObserver = new IntersectionObserver(([entry]) => {
+      clearTimeout(this.debounceTimeout)
+      if (entry && entry.isIntersecting && this.$refs.root) {
+        this.isIntersecting = true
+        this.scrollObserver.unobserve(this.$refs.root)
+        this.$emit('intersect', {
+          loaded: () => {
+            this.debounceTimeout = setTimeout(() => {
+              this.isIntersecting = false
+              this.scrollObserver.observe(this.$refs.root)
+            }, 100)
+          },
+          complete: () => {
+            this.scrollObserver?.disconnect()
+            this.isIntersecting = false
+            this.isComplete = true
+          },
+        })
+      }
+    }, this.options)
+
+    if (this.$refs.root) {
+      this.scrollObserver.observe(this.$refs.root)
+    }
+  },
+  beforeDestroy() {
+    if (this.scrollObserver) this.scrollObserver.disconnect()
+  },
+}
+</script>

components/ui/Chat/Scroll/Scroll.vue

@@ -6,8 +6,6 @@ import { mapState } from 'vuex'
 
 import { ChevronDownIcon } from 'satellite-lucide-icons'
 
-import { User } from '~/types/ui/user'
-
 export default Vue.extend({
   name: 'Scroll',
   components: {
@@ -34,15 +32,6 @@ export default Vue.extend({
       default: false,
       required: false,
     },
-    user: {
-      type: Object as PropType<User>,
-      default: () => ({
-        name: '',
-        address: '',
-        status: '',
-      }),
-      required: true,
-    },
   },
   data() {
     return {
@@ -95,6 +84,7 @@ export default Vue.extend({
       if (this.$el && this.autoScroll) {
         this.$nextTick(() => {
           this.$el.scrollTop = this.$el.scrollHeight
+          this.$store.commit('ui/setIsScrollOver', false)
         })
       }
     },

components/ui/ComingSoon/ComingSoon.html

@@ -4,6 +4,7 @@
     class="coming-soon-container"
     :class="`${disabled ? 'disabled' : 'grayscaled'}`"
     v-tooltip="{content:tooltipText, placement:tooltipPosition}"
+    @click="toggleModal(ModalWindows.CALL_TO_ACTION)"
   >
     <div
       :class="`coming-soon ${horizontal ? 'horizontal' : ''}`"

components/ui/ComingSoon/ComingSoon.vue

@@ -2,6 +2,8 @@
 
 <script lang="ts">
 import Vue from 'vue'
+import { mapState } from 'vuex'
+import { ModalWindows } from '~/store/ui/types'
 
 declare module 'vue/types/vue' {
   interface Vue {
@@ -48,10 +50,20 @@ export default Vue.extend({
       required: false,
     },
   },
+  computed: {
+    ...mapState(['ui']),
+    ModalWindows: () => ModalWindows,
+  },
   methods: {
     preventClickthrough(event: Event) {
       event.stopPropagation()
     },
+    toggleModal(modalName: ModalWindows) {
+      this.$store.commit('ui/toggleModal', {
+        name: modalName,
+        state: !this.ui.modals[modalName],
+      })
+    },
   },
 })
 </script>

components/views/chat/conversation/Conversation.html

@@ -1,17 +1,59 @@
-<div id="conversation">
-  <UiLoadersMessage :count="3" v-if="loading" />
-  <div class="group" v-for="group in messages" v-else>
-    <div v-if="group.type === 'group'">
-      <Group :group="group" :key="group.id" :groupId="groupId" />
+<div id="conversation" class="conversation">
+  <UiChatScroll
+    ref="chatScroll"
+    :prevent-scroll-offset="10"
+    :older-messages-scroll-offset="300"
+    :class="{'media-open': isMediaOpen}"
+    enable-wrap
+  >
+    <div class="conversation-content">
+      <div
+        class="group"
+        v-for="group in currentChat.messages"
+        :id="group.id"
+        :key="group.id"
+      >
+        <div v-if="group.type === 'group'">
+          <Group :group="group" :groupId="groupId" />
+        </div>
+        <div v-else-if="group.type === 'caret_divider'">
+          <UiCaretDivider text="New Messages" />
+        </div>
+        <div v-else-if="group.type === 'divider'">
+          <TypographyHorizontalRuleText :value="group.at.toString()" />
+        </div>
+      </div>
+      <div
+        v-if="textile.messageLoading"
+        data-cy="loading-indicator"
+        class="zoop"
+      >
+        <UiLoadersLoadingBar />
+      </div>
     </div>
-    <div v-if="group.type === 'caret_divider'">
-      <UiCaretDivider text="New Messages" />
-    </div>
-    <div v-else-if="group.type === 'divider'">
-      <TypographyHorizontalRuleText :value="group.at.toString()" />
-    </div>
-  </div>
-  <div v-if="textile.messageLoading" data-cy="loading-indicator" class="zoop">
-    <UiLoadersLoadingBar />
-  </div>
+    <UiChatInfo
+      v-if="showOlderMessageInfo"
+      :caption="$t('pages.chat.older_messages')"
+      class="conversation-info"
+      type="primary"
+      @click="handleClick()"
+    >
+      <chevron-down-icon size="1.5x" />
+      {{ $t('pages.chat.recent_messages') }}
+    </UiChatInfo>
+    <UiChatInfiniteScroll
+      class="conversation-infiniteScroll"
+      :class="{ 'is-reversed': isReversedScroll }"
+      :options="options"
+      @intersect="handleIntersect"
+    >
+      <template #placeholder>
+        <div class="conversation-loader">
+          <UiLoadersSpinner class="conversation-loader-spinner" spinning />
+          {{ $t('pages.chat.infinite_scroll.loading') }}
+        </div>
+      </template>
+      <template #no-more> <UiChatEncrypted /> </template>
+    </UiChatInfiniteScroll>
+  </UiChatScroll>
 </div>

components/views/chat/conversation/Conversation.less

@@ -1,25 +1,59 @@
-#conversation {
-  padding: @normal-spacing;
+.conversation {
+  padding: 0 @normal-spacing;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
 
   .separator {
     margin: @normal-spacing 3rem;
   }
+
+  &-infiniteScroll.is-reversed {
+    order: -1;
+  }
+
+  &-info {
+    &:extend(.first-layer);
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+  }
+
+  &-loader {
+    &:extend(.background-semitransparent-light);
+    &:extend(.round-corners);
+    &:extend(.light-padding);
+    &:extend(.font-flair);
+    width: calc(@full - @light-spacing * 2);
+    font-size: 10pt;
+    margin: @light-spacing;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+
+    &-spinner {
+      margin-right: @light-spacing;
+    }
+  }
 }
 
 @media only screen and (max-width: @mobile-breakpoint) {
-  #conversation {
+  .conversation {
+    padding-left: 0;
+    padding-right: 0;
     overflow-x: hidden;
     &:extend(.light-padding);
+    &-loader {
+      min-width: 90vw;
+      margin: 16px 16px 0 16px;
+      overflow-x: hidden;
+      width: 90%;
+    }
   }
 }
 
 .loading-bar {
   margin-top: -10px !important;
 }
-
-@media only screen and (max-width: @mobile-breakpoint) {
-  #conversation {
-    padding-left: 0;
-    padding-right: 0;
-  }
-}