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/tasks/column.vue

@@ -348,6 +348,7 @@ import habitIcon from '@/assets/svg/habit.svg';
 import dailyIcon from '@/assets/svg/daily.svg';
 import todoIcon from '@/assets/svg/todo.svg';
 import rewardIcon from '@/assets/svg/reward.svg';
+import { EVENTS } from '@/libs/events';
 
 export default {
   components: {
@@ -500,7 +501,7 @@ export default {
     });
 
     if (this.type !== 'todo') return;
-    this.$root.$on('habitica::resync-completed', () => {
+    this.$root.$on(EVENTS.RESYNC_COMPLETED, () => {
       if (this.activeFilter.label !== 'complete2') return;
       this.loadCompletedTodos();
     });
@@ -508,7 +509,7 @@ export default {
   destroyed () {
     this.$root.$off('buyModal::boughtItem');
     if (this.type !== 'todo') return;
-    this.$root.$off('habitica::resync-requested');
+    this.$root.$off(EVENTS.RESYNC_COMPLETED);
   },
   methods: {
     ...mapActions({