Merge pull request #749 from Adamant-im/feat/chats-one-screen

Feat/chats one screen

Author: bludnic

src/App.vue

@@ -3,67 +3,78 @@
     <UploadAttachmentExitPrompt />
     <warning-on-addresses-dialog v-model="showWarningOnAddressesDialog" />
 
-    <component :is="layout">
+    <v-main>
       <router-view />
-    </component>
+    </v-main>
   </v-app>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue'
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, getCurrentInstance, ref } from 'vue'
 import dayjs from 'dayjs'
 import WarningOnAddressesDialog from '@/components/WarningOnAddressesDialog.vue'
 import UploadAttachmentExitPrompt from '@/components/UploadAttachmentExitPrompt.vue'
 import Notifications from '@/lib/notifications'
 import { ThemeName } from './plugins/vuetify'
+import { useStore } from 'vuex'
+import { useI18n } from 'vue-i18n'
 
-export default defineComponent({
-  components: {
-    WarningOnAddressesDialog,
-    UploadAttachmentExitPrompt
-  },
-  data: () => ({
-    showWarningOnAddressesDialog: false,
-    notifications: null as Notifications | null
-  }),
-  computed: {
-    layout() {
-      return this.$route.meta.layout || 'default'
-    },
-    isLogged() {
-      return this.$store.getters.isLogged
-    },
-    isLoginViaPassword() {
-      return this.$store.getters['options/isLoginViaPassword']
-    },
-    themeName() {
-      return this.$store.state.options.darkTheme ? ThemeName.Dark : ThemeName.Light
-    }
-  },
-  created() {
-    this.setLocale()
-  },
-  mounted() {
-    this.notifications = new Notifications(this)
-    this.notifications.start()
-  },
-  beforeUnmount() {
-    this.notifications?.stop()
-    this.$store.dispatch('stopInterval')
-  },
-  methods: {
-    setLocale() {
-      // Set language from `localStorage`.
-      //
-      // This is required only when initializing the application.
-      // Subsequent mutations of `language.currentLocale`
-      // will be synchronized with `i18n.locale`.
-      const localeFromStorage = this.$store.state.language.currentLocale
-      this.$i18n.locale = localeFromStorage
-      dayjs.locale(localeFromStorage)
+const store = useStore()
+const isSnackbarShowing = computed(() => store.state.snackbar.show)
+
+const showWarningOnAddressesDialog = ref(false)
+
+const notifications = ref<Notifications | null>(null)
+
+const themeName = computed(() => {
+  return store.state.options.darkTheme ? ThemeName.Dark : ThemeName.Light
+})
+
+const { locale } = useI18n()
+
+onMounted(() => {
+  const instance = getCurrentInstance()
+
+  if (instance) {
+    const notifications = new Notifications(instance.proxy)
+    notifications.start()
+  }
+})
+
+onBeforeUnmount(() => {
+  notifications.value?.stop()
+  store.dispatch('stopInterval')
+})
+
+const onKeydownHandler = (e: KeyboardEvent) => {
+  if (e.key === 'Escape') {
+    if (isSnackbarShowing.value) {
+      e.stopPropagation()
+      store.commit('snackbar/changeState', false)
     }
   }
+}
+
+const setLocale = () => {
+  // Set language from `localStorage`.
+  //
+  // This is required only when initializing the application.
+  // Subsequent mutations of `language.currentLocale`
+  // will be synchronized with `i18n.locale`.
+  const localeFromStorage = store.state.language.currentLocale
+  locale.value = localeFromStorage
+  dayjs.locale(localeFromStorage)
+}
+
+onMounted(() => {
+  window.addEventListener('keydown', onKeydownHandler, true)
 })
+
+onBeforeUnmount(() => {
+  window.removeEventListener('keydown', onKeydownHandler, true)
+})
+
+setLocale()
 </script>
 
 <style lang="scss" scoped>

src/assets/styles/components/_chat.scss

@@ -1,6 +1,8 @@
 @use 'sass:map';
 @use '../settings/_colors.scss';
 @use 'vuetify/settings';
+@use '@/assets/styles/themes/adamant/_mixins.scss';
+
 
 $chat-sender: (
   'font-size': 15px,
@@ -23,10 +25,10 @@ $scroll-bar-width: 4px;
   height: 100%; // <-- Fallback for Chrome < v108
   // Chrome supports `dvh, lvh...` units starting with v108.
   // See https://caniuse.com/viewport-unit-variants
-  height: 100dvh;
+  height: calc(100dvh - var(--v-layout-bottom));
   position: relative;
 
-  @media #{map.get(settings.$display-breakpoints, 'sm-and-down')} {
+  @media (max-width: 799px) {
     position: fixed;
     left: 0;
     right: 0;
@@ -42,7 +44,6 @@ $scroll-bar-width: 4px;
   &__body {
     position: relative;
     flex: 1;
-    background-color: inherit;
     color: inherit;
   }
 
@@ -390,6 +391,10 @@ $scroll-bar-width: 4px;
       color: map.get(settings.$shades, 'black');
     }
 
+    &__body {
+      @include mixins.linear-gradient-light-gray();
+    }
+
     &__message {
       background-color: #fff;
       box-shadow:
@@ -499,6 +504,10 @@ $scroll-bar-width: 4px;
       color: map.get(settings.$shades, 'white');
     }
 
+    &__body {
+      @include mixins.linear-gradient-dark-soft();
+    }
+
     &__message {
       background-color: map.get(colors.$adm-colors, 'black');
       box-shadow:

src/assets/styles/generic/_layout.scss

@@ -2,7 +2,3 @@
 html {
   overflow-y: auto;
 }
-
-.container--with-app-toolbar {
-  padding-top: var(--toolbar-height);
-}

src/assets/styles/themes/adamant/_mixins.scss

@@ -72,3 +72,11 @@
 @mixin linear-gradient-dark {
   background: repeating-linear-gradient(140deg, #191919, #191919 0.7px, #212121 0, #212121 5px);
 }
+
+@mixin linear-gradient-dark-soft {
+  background: repeating-linear-gradient(140deg, #252525, #252525 0.7px, #303030 0, #303030 5px);
+}
+
+@mixin linear-gradient-light-gray {
+  background: repeating-linear-gradient(140deg, #e6e6e6, #e6e6e6 0.7px, #f2f2f2 0, #f2f2f2 5px);
+}

src/components/AChat/AChatForm.vue

@@ -27,7 +27,7 @@
       <template #prepend-inner>
         <chat-emojis
           @keydown.capture.esc="closeElement"
-          :open="emojiPickerOpen"
+          :open="isEmojiPickerOpen"
           @onChange="onToggleEmojiPicker"
           @get-emoji-picture="emojiPicture"
         ></chat-emojis>
@@ -43,10 +43,11 @@
 </template>
 
 <script>
-import { nextTick } from 'vue'
+import { computed, nextTick } 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'
 
 export default {
   components: { ChatEmojis },
@@ -85,14 +86,22 @@ export default {
   },
   emits: ['message', 'esc', 'error'],
   setup() {
+    const chatStateStore = useChatStateStore()
+
+    const { setEmojiPickerOpen } = chatStateStore
+
+    const isEmojiPickerOpen = computed({
+      get: () => chatStateStore.isEmojiPickerOpen,
+      set: setEmojiPickerOpen
+    })
 
     return {
+      isEmojiPickerOpen,
       mdiSend
     }
   },
   data: () => ({
     message: '',
-    emojiPickerOpen: false,
     botCommandIndex: null,
     botCommandSelectionMode: false,
     isInputFocused: false
@@ -176,10 +185,10 @@ export default {
       }
     },
     openElement() {
-      this.emojiPickerOpen = true
+      this.isEmojiPickerOpen = true
     },
     closeElement() {
-      this.emojiPickerOpen = false
+      this.isEmojiPickerOpen = false
       setTimeout(() => this.focus(), 0)
     },
     onInput: function () {
@@ -221,7 +230,7 @@ export default {
     },
 
     onToggleEmojiPicker(state) {
-      this.emojiPickerOpen = state
+      this.isEmojiPickerOpen = state
 
       this.focus()
     },

src/components/AChat/AChatReactions/AChatReactions.vue

@@ -15,20 +15,20 @@
       :partner-id="partnerId"
     >
       <template #avatar v-if="reaction.senderId === partnerId">
-        <ChatAvatar :user-id="partnerId" :size="16" />
+        <chat-avatar :user-id="partnerId" :size="16" />
       </template>
     </a-chat-reaction>
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { usePartnerId } from '@/components/AChat/hooks/usePartnerId'
-import ChatAvatar from '@/components/Chat/ChatAvatar.vue'
 import { isEmptyReaction, NormalizedChatMessageTransaction } from '@/lib/chat/helpers'
-import { computed, defineComponent, PropType, watch } from 'vue'
+import { computed, PropType, watch } from 'vue'
 import { useStore } from 'vuex'
 import { vibrate } from '@/lib/vibrate'
 import AChatReaction from './AChatReaction.vue'
+import ChatAvatar from '@/components/Chat/ChatAvatar.vue'
 
 const className = 'a-chat-reactions'
 const classes = {
@@ -37,57 +37,44 @@ const classes = {
   reaction: `${className}__reaction`
 }
 
-export default defineComponent({
-  components: {
-    ChatAvatar,
-    AChatReaction
-  },
-  props: {
-    transaction: {
-      type: Object as PropType<NormalizedChatMessageTransaction>,
-      required: true
-    }
-  },
-  setup(props) {
-    const store = useStore()
-    const partnerId = usePartnerId(props.transaction)
-
-    const myReaction = computed(() =>
-      store.getters['chat/lastReaction'](props.transaction.id, partnerId.value, store.state.address)
-    )
-    const partnerReaction = computed(() =>
-      store.getters['chat/lastReaction'](props.transaction.id, partnerId.value, partnerId.value)
-    )
-
-    const displayMyReaction = computed(() => myReaction.value && !isEmptyReaction(myReaction.value))
-    const displayPartnerReaction = computed(
-      () => partnerReaction.value && !isEmptyReaction(partnerReaction.value)
-    )
-
-    const reactions = computed(() => {
-      const list = []
-
-      if (displayMyReaction.value) list.push(myReaction.value)
-      if (displayPartnerReaction.value) list.push(partnerReaction.value)
-
-      return list.sort((left, right) => left.timestamp - right.timestamp)
-    })
-
-    watch(
-      () => store.getters['chat/numOfNewMessages'](partnerId.value),
-      (numOfNewMessages) => {
-        if (numOfNewMessages > 0) vibrate.veryShort()
-      },
-      { immediate: true }
-    )
-
-    return {
-      classes,
-      partnerId,
-      reactions
-    }
+const props = defineProps({
+  transaction: {
+    type: Object as PropType<NormalizedChatMessageTransaction>,
+    required: true
   }
 })
+
+const store = useStore()
+const partnerId = usePartnerId(props.transaction)
+
+const myReaction = computed(() =>
+  store.getters['chat/lastReaction'](props.transaction.id, partnerId.value, store.state.address)
+)
+const partnerReaction = computed(() =>
+  store.getters['chat/lastReaction'](props.transaction.id, partnerId.value, partnerId.value)
+)
+
+const displayMyReaction = computed(() => myReaction.value && !isEmptyReaction(myReaction.value))
+const displayPartnerReaction = computed(
+  () => partnerReaction.value && !isEmptyReaction(partnerReaction.value)
+)
+
+const reactions = computed(() => {
+  const list = []
+
+  if (displayMyReaction.value) list.push(myReaction.value)
+  if (displayPartnerReaction.value) list.push(partnerReaction.value)
+
+  return list.sort((left, right) => left.timestamp - right.timestamp)
+})
+
+watch(
+  () => store.getters['chat/numOfNewMessages'](partnerId.value),
+  (numOfNewMessages) => {
+    if (numOfNewMessages > 0) vibrate.veryShort()
+  },
+  { immediate: true }
+)
 </script>
 
 <style lang="scss">