Fixing layout issues for the private messages page (#11766)

* fix: first batch of layout issues for private messages + auto sizing textarea

* username second line - open profile on face-avatar/conversation name - fix textarea height

* refresh on sync

* new "you dont have any messages" style + changed min textarea height

* new conversationItem style / layout

* reset message unread on reload

* fix styles / textarea height

* list optOut / chatRevoked informations for each conversation + show why its disabled

* Block / Unblock - correct disabled states - $gray-200 instead of 300/400

* canReceive not checking chatRevoked

* fix: faceAvatar / userLink open the selected conversation user

* check if the target user is blocking the logged-in user

* check if blocks is undefined

* max-height instead of height

* fix "no messages" state + canReceive on a new conversation

* fixed conversations width (280px on max 768 width page)

* call autosize after message is sent

* only color the placeholder

* only load the current user avatar/settings/flags

* show only the current avatar on private messages

website/client/src/components/header/userDropdown.vue

@@ -133,13 +133,12 @@
 </style>
 
 <script>
-import axios from 'axios';
 import { mapState } from '@/libs/store';
 import * as Analytics from '@/libs/analytics';
 import userIcon from '@/assets/svg/user.svg';
 import MenuDropdown from '../ui/customMenuDropdown';
-import markPMSRead from '@/../../common/script/ops/markPMSRead';
 import MessageCount from './messageCount';
+import { EVENTS } from '@/libs/events';
 
 export default {
   components: {
@@ -164,11 +163,8 @@ export default {
       this.$root.$emit('bv::show::modal', 'avatar-modal');
     },
     showPrivateMessages () {
-      markPMSRead(this.user);
-      axios.post('/api/v4/user/mark-pms-read');
-
       if (this.$router.history.current.name === 'privateMessages') {
-        this.$root.$emit('pm::refresh');
+        this.$root.$emit(EVENTS.PM_REFRESH);
       } else {
         this.$router.push('/private-messages');
       }