fix(chatbar): replies style and focus on reply AP-155

components/tailored/core/chatbar/Chatbar.html

@@ -1,4 +1,4 @@
-<div id="chatbar" ref="chatbar" :class="$store.state.ui.replyChatbarContent.id ? 'has-reply' : ''">
+<div id="chatbar" ref="chatbar" :class="ui.replyChatbarContent.id ? 'has-reply' : ''">
   <div :class="`chatbar-wrap ${charlimit ? 'is-error' : 'is-normal'}`" ref="wrap" >
     <div class="control-wrap file-upload-wrap">
       <FileUpload type="quick" ref="file-upload" />
@@ -10,7 +10,7 @@
     >
       <terminal-icon size="1x" />
     </div>
-    <div contenteditable="true" autocapitalize="off"
+    <div v-focus="ui.replyChatbarContent" contenteditable="true" autocapitalize="off"
       :class="`messageuser hidden-scroll ${hasCommand ? 'has-command' : ''}`"
       ref="messageuser"
       :placeholder="$t('ui.talk')"

components/tailored/core/chatbar/Chatbar.vue

@@ -16,6 +16,7 @@ import {
   isArgsValid,
 } from '~/libraries/ui/Commands'
 import { Friend } from '~/types/ui/friends'
+import { text } from 'stream/consumers'
 
 declare module 'vue/types/vue' {
   interface Vue {
@@ -27,6 +28,7 @@ declare module 'vue/types/vue' {
     debounceTypingStop: Function
     typingNotifHandler: Function
     smartTypingStart: Function
+    handleChatBorderRadius: Function
   }
 }
 
@@ -48,6 +50,15 @@ export default Vue.extend({
       type: Object as PropType<Friend>,
     },
   },
+  directives: {
+    focus: {
+      update(el, { value, oldValue }) {
+        if (value.id !== oldValue.id) {
+          el.focus()
+        }
+      },
+    },
+  },
   computed: {
     ...mapState(['ui', 'friends']),
     activeFriend() {
@@ -122,16 +133,27 @@ export default Vue.extend({
     },
   },
   methods: {
+    /**
+     * @method handleChatBorderRadius
+     * @description Sets the correct chatbar border radius while typing or when switching between friends
+     * @example
+     */
+    handleChatBorderRadius() {
+      const wrap = this.$refs.wrap as HTMLElement
+      if (wrap.offsetHeight > 50 || this.ui.replyChatbarContent.id)
+        wrap.style.borderRadius = '4px'
+      else wrap.style.borderRadius = '41px'
+    },
     /**
      * @method typingNotifHandler
      * @description Wraps the event handler for dispatching typing notifications
      * TODO: Right now this is hard coded to the WebRTC Data method, in the future this should be
      * agnostic and the method should be passed to chatbar so we can support group, and direct messages.
      */
-    typingNotifHandler(
-      state: 'TYPING' | 'NOT_TYPING',
-    ) {
-      const activeFriend = this.$Hounddog.getActiveFriend(this.$store.state.friends)
+    typingNotifHandler(state: 'TYPING' | 'NOT_TYPING') {
+      const activeFriend = this.$Hounddog.getActiveFriend(
+        this.$store.state.friends,
+      )
       if (activeFriend) {
         const activePeer = this.$WebRTC.getPeer(activeFriend.address)
         activePeer?.send('TYPING_STATE', { state })
@@ -164,7 +186,6 @@ export default Vue.extend({
      */
     handleInputChange() {
       const messageBox = this.$refs.messageuser as HTMLElement
-      const wrap = this.$refs.wrap as HTMLElement
       // Delete extra character when it exceeds the charlimit
       if (
         messageBox.innerText &&
@@ -173,8 +194,7 @@ export default Vue.extend({
         messageBox.innerText = messageBox.innerText.slice(0, -1)
         this.updateText()
       }
-      if (wrap.offsetHeight > 50) wrap.style.borderRadius = '4px'
-      if (wrap.offsetHeight < 50) wrap.style.borderRadius = '41px'
+      this.handleChatBorderRadius()
       this.value = messageBox.innerText
     },
     /**
@@ -298,17 +318,30 @@ export default Vue.extend({
     },
   },
   watch: {
-    '$store.state.ui.chatbarContent': function () {
+    'ui.chatbarContent': function () {
       this.updateText()
     },
-    '$store.state.friends.all': {
-      handler () {
-        const activeFriend = this.$Hounddog.getActiveFriend(this.$store.state.friends)
+    'friends.all': {
+      handler() {
+        const activeFriend = this.$Hounddog.getActiveFriend(
+          this.$store.state.friends,
+        )
         if (activeFriend)
           this.$data.recipientTyping = activeFriend.typingState === 'TYPING'
       },
       deep: true,
     },
+    'ui.replyChatbarContent': function () {
+      this.handleChatBorderRadius()
+    },
+    recipient: function () {
+      this.$store.commit('ui/chatbarContent', '')
+      this.$store.commit('ui/setReplyChatbarContent', {
+        id: '',
+        payload: '',
+        from: '',
+      })
+    },
   },
 })
 </script>

layouts/chat.vue

@@ -59,7 +59,7 @@
         <TailoredMessagingEnhancers />
         <TailoredWalletMini v-if="ui.modals.walletMini" />
         <TailoredCommandsPreview :message="ui.chatbarContent" />
-        <TailoredCoreChatbarReply />
+        <TailoredCoreChatbarReply v-if="recipient" />
         <TailoredCoreChatbar v-if="recipient" :recipient="recipient" />
       </div>
       <TailoredCoreGroupAside
@@ -87,7 +87,7 @@ export default Vue.extend({
   data() {
     return {
       sidebar: true,
-      asidebar: !this.$device.isMobile
+      asidebar: !this.$device.isMobile,
     }
   },
   computed: {
@@ -120,7 +120,7 @@ export default Vue.extend({
     }
     window.addEventListener('resize', appHeight)
     appHeight()
-  }
+  },
 })
 </script>
 

plugins/thirdparty/persist.ts

@@ -14,6 +14,7 @@ const mutationsBlacklist = [
   'toggleIncomingCall',
   'ui/setMessages',
   'ui/sendMessage',
+  'ui/setReplyChatbarContent',
 ]
 
 // State properties path to blacklist saving to store
@@ -28,16 +29,13 @@ const propertiesBlacklist = [
   'prerequisites',
 ]
 
-const propertiesBlacklistWhenStorePin = [
-  'friends.all',
-  'prerequisites',
-]
+const propertiesBlacklistWhenStorePin = ['friends.all', 'prerequisites']
 
 export default ({ store }: { store: any }) => {
   new VuexPersistence({
     key: 'Satellite-Store',
     reducer: (state: any) => {
-      let blackList = propertiesBlacklist;
+      let blackList = propertiesBlacklist
       if (state.accounts.storePin && !state.accounts.locked) {
         blackList = propertiesBlacklistWhenStorePin
       }