Merge pull request #782 from Adamant-im/fix/chat-and-contacts-style

fix: layout fixes

Author: S-FrontendDev

src/components/AChat/AChatForm.vue

@@ -47,7 +47,7 @@ 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'
+import { useChatStateStore } from '@/stores/modal-state'
 
 export default {
   components: { ChatEmojis },

src/components/BuyTokensDialog.vue

@@ -1,8 +1,8 @@
 <template>
-  <v-dialog v-model="show" width="320" :class="className">
+  <v-dialog v-model="show" width="320">
     <v-card>
       <v-card-title class="a-text-header">
-        {{ $t('home.buy_tokens_btn') }}
+        {{ t('home.buy_tokens_btn') }}
       </v-card-title>
 
       <v-divider class="a-divider" />
@@ -14,15 +14,15 @@
               <icon><exchanger-icon /></icon>
             </template>
 
-            <v-list-item-title>{{ $t('home.buy_tokens_exchanger') }}</v-list-item-title>
+            <v-list-item-title>{{ t('home.buy_tokens_exchanger') }}</v-list-item-title>
           </v-list-item>
 
           <v-list-item avatar @click="openLink(admLink)">
             <template #prepend>
               <icon><adamant-icon /></icon>
             </template>
 
-            <v-list-item-title>{{ $t('home.buy_tokens_anonymously') }}</v-list-item-title>
+            <v-list-item-title>{{ t('home.buy_tokens_anonymously') }}</v-list-item-title>
           </v-list-item>
 
           <v-list-item
@@ -34,7 +34,7 @@
             </template>
 
             <v-list-item-title>{{
-              $t('home.exchanges_on', { aggregator: 'CoinMarketCap' })
+              t('home.exchanges_on', { aggregator: 'CoinMarketCap' })
             }}</v-list-item-title>
           </v-list-item>
 
@@ -47,7 +47,7 @@
             </template>
 
             <v-list-item-title>{{
-              $t('home.exchanges_on', { aggregator: 'CoinGecko' })
+              t('home.exchanges_on', { aggregator: 'CoinGecko' })
             }}</v-list-item-title>
           </v-list-item>
         </v-list>
@@ -56,64 +56,70 @@
   </v-dialog>
 </template>
 
-<script>
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRouter } from 'vue-router'
+
 import validateAddress from '@/lib/validateAddress'
+import { websiteUriToOnion } from '@/lib/uri'
+
 import AdamantIcon from '@/components/icons/common/Adamant.vue'
 import CoingeckoIcon from '@/components/icons/common/Coingecko.vue'
 import CoinmarketcapIcon from '@/components/icons/common/Coinmarketcap.vue'
 import ExchangerIcon from '@/components/icons/common/Exchanger.vue'
 import Icon from '@/components/icons/BaseIcon.vue'
-import { websiteUriToOnion } from '@/lib/uri'
 
-export default {
-  components: {
-    AdamantIcon,
-    CoingeckoIcon,
-    CoinmarketcapIcon,
-    ExchangerIcon,
-    Icon
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    required: true
   },
-  props: {
-    modelValue: {
-      type: Boolean,
-      required: true
-    },
-    adamantAddress: {
-      type: String,
-      default: undefined,
-      validator: (v) => validateAddress('ADM', v)
-    }
-  },
-  emits: ['update:modelValue'],
-  computed: {
-    className: () => 'buy-tokens-dialog',
-    admLink() {
-      return websiteUriToOnion(
-        this.adamantAddress
-          ? `${this.$t('home.buy_tokens_btn_link')}?wallet=${this.adamantAddress}`
-          : `${this.$t('home.buy_tokens_btn_link')}`
-      )
-    },
-    show: {
-      get() {
-        return this.modelValue
-      },
-      set(value) {
-        this.$emit('update:modelValue', value)
-      }
-    }
+  adamantAddress: {
+    type: String,
+    default: undefined,
+    validator: (v: string) => validateAddress('ADM', v)
+  }
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: boolean): void
+}>()
+
+const { t } = useI18n()
+const router = useRouter()
+
+const show = computed({
+  get() {
+    return props.modelValue
   },
-  methods: {
-    openLink(link) {
-      if (link.startsWith('U')) {
-        this.$router.push({
-          name: 'Chat',
-          params: { partnerId: link }
-        })
-      } else {
-        window.open(link, '_blank', 'resizable,scrollbars,status,noopener')
-      }
-    }
+  set(value) {
+    emit('update:modelValue', value)
   }
+})
+
+const admLink = computed(() =>
+  websiteUriToOnion(
+    props.adamantAddress
+      ? `${t('home.buy_tokens_btn_link')}?wallet=${props.adamantAddress}`
+      : `${t('home.buy_tokens_btn_link')}`
+  )
+)
+
+const closeDialog = () => {
+  show.value = false
+}
+
+const openLink = (link: string) => {
+  if (link.startsWith('U')) {
+    router.push({
+      name: 'Chat',
+      params: { partnerId: link }
+    })
+  } else {
+    window.open(link, '_blank', 'resizable,scrollbars,status,noopener')
+  }
+
+  closeDialog()
 }
 </script>

src/components/Chat/Chat.vue

@@ -307,7 +307,7 @@ import { useRouter } from 'vue-router'
 import { useStore } from 'vuex'
 import { useChatsSpinner } from '@/hooks/useChatsSpinner'
 import ProgressIndicator from '@/components/ProgressIndicator.vue'
-import { useChatStateStore } from '@/stores/chat-state'
+import { useChatStateStore } from '@/stores/modal-state'
 
 const validationErrors = {
   emptyMessage: 'EMPTY_MESSAGE',

src/components/Chat/ChatMenu.vue

@@ -61,7 +61,7 @@ import CryptoIcon from '@/components/icons/CryptoIcon.vue'
 import IconBox from '@/components/icons/IconBox.vue'
 import UploadFile from '../UploadFile.vue'
 import { mdiFile, mdiImage, mdiPlusCircleOutline } from '@mdi/js'
-import { useChatStateStore } from '@/stores/chat-state'
+import { useChatStateStore } from '@/stores/modal-state'
 import type { FileData } from '@/lib/files'
 import { CoinSymbol } from '@/store/modules/wallets/types'
 

src/components/Chat/Chats.vue

@@ -91,8 +91,7 @@ import {
   ref,
   watch
 } from 'vue'
-import { useChatStateStore } from '@/stores/chat-state'
-import { storeToRefs } from 'pinia'
+import { useChatStateStore } from '@/stores/modal-state'
 import { useStore } from 'vuex'
 import { useI18n } from 'vue-i18n'
 import { useChatsSpinner } from '@/hooks/useChatsSpinner'
@@ -111,51 +110,30 @@ const props = withDefaults(
 )
 
 const store = useStore()
+const chatStateStore = useChatStateStore()
 const router = useRouter()
+const route = useRoute()
 const { t } = useI18n()
 const showSpinner = useChatsSpinner()
-const route = useRoute()
-const chatStateStore = useChatStateStore()
 
 const className = 'chats-view'
 
-const {
-  actionsDropdownMessageId,
-  isShowPartnerInfoDialog,
-  isShowFreeTokensDialog,
-  isChatMenuOpen,
-  isEmojiPickerOpen
-} = storeToRefs(chatStateStore)
 const { setShowChatStartDialog } = chatStateStore
 
+const isShowChatStartDialog = computed({
+  get: () => chatStateStore.isShowChatStartDialog,
+  set: (value) => setShowChatStartDialog(value)
+})
+
 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 chatPagePartnerId = computed(() => {
   // We assume partnerId to always be a string
   return route.params.partnerId as string
 })
-const isSnackbarShowing = computed(() => store.state.snackbar.show)
-const noActiveNodesDialog = computed(() => store.state.chat.noActiveNodesDialog)
-const isShowChatStartDialog = computed({
-  get: () => chatStateStore.isShowChatStartDialog,
-  set: (value) => setShowChatStartDialog(value)
-})
-const canPressEscape = computed(() => {
-  return (
-    !noActiveNodesDialog.value &&
-    !isShowChatStartDialog.value &&
-    !isShowFreeTokensDialog.value &&
-    !isSnackbarShowing.value &&
-    !isShowPartnerInfoDialog.value &&
-    !isChatMenuOpen.value &&
-    !isEmojiPickerOpen.value &&
-    actionsDropdownMessageId.value === -1
-  )
-})
 const isFulfilled = computed(() => store.state.chat.isFulfilled)
 const lastMessages = computed(() => store.getters['chat/lastMessages'])
 const separatorIndex = computed(() => {
@@ -189,13 +167,11 @@ onBeforeMount(() => {
 })
 
 onMounted(() => {
-  document.addEventListener('keydown', onKeydownHandler)
   setShowChatStartDialog(props.showNewContact)
   attachScrollListener()
 })
 
 onBeforeUnmount(() => {
-  document.removeEventListener('keydown', onKeydownHandler)
   destroyScrollListener()
 })
 
@@ -213,20 +189,6 @@ const checkIsActive = (contactId: string) => {
   return route.name !== 'Chats' && contactId === lastPartnerId.value
 }
 
-const onKeydownHandler = (e: KeyboardEvent) => {
-  if (canPressEscape.value) {
-    if (e.key === 'Escape') {
-      if (route.query.from?.includes('chats')) {
-        router.push(route.query.from as string)
-        return
-      }
-      router.push({
-        name: 'Chats'
-      })
-    }
-  }
-}
-
 const openChat = (partnerId: string, messageText?: string) => {
   router.push({
     name: 'Chat',