PMs rebuild (#11360)

* feat(messages): big PMs refactor

* add private messages route

* move to page

* WIP - header + begin with the sidebar

* extract userLabel + style sidebar + extract converstation item

* correct conversation item style

* toggle switch style

* add contributor / backer to conversation user-label

* fix shadows

* fix the conversations list (ignoring own sent)

* selected conversation label

* faceAvatar component

* fix message / avatar height

* fix message list / empty messages height

* new message padding/styles/functionality - finished sidebar conversation styling -

* fix loading messages + perfect-scrollbar

* fix load more line

* fix loading label

* open new conversation from outside

* if the user doesn't have avatar-data inside the conversation and does not exist anymore, just load/set the user name

* search bar new icon / style

* block using from conversation context-menu

* fix lint

* fix merge / lint

* fix merge

* first separate page

* fix tooltips + full width private message + card max width + more responsive

* separate conversations methods, to prevent circular deps

* update eslint config

* fix open new private message

* remove unneeded close icon + fix toggle-switch layout

* same content height on empty conversations - remove border / box-shadow

* canLoadMore = false

* remove inbox conditions on chat components

* hide footer / fix empty sidebar

* floating shadow

* remove tooltip on selected conversation user + pm always full-size

* show avatar on empty conversation

* disable face-avatar

* fix faceAvatar + story

* fix loading conversation messages while switching the conversation

* refresh private-messages page when you are already on it

* add countbadge knob to change the example

* fix lint

* fix hide tooltip + align header correctly

* disable perfect scroll

* load messages on refresh event

* fix header label + conversation actions not breaking layout on hover

* add gifting banner to the max height calculation

* correct chunk name

Co-authored-by: negue <negue@users.noreply.github.com>
Co-authored-by: Matteo Pagliazzi <matteopagliazzi@gmail.com>

website/client/src/components/chat/chatCard.vue

@@ -5,7 +5,7 @@
       class="mentioned-icon"
     ></div>
     <div
-      v-if="!inbox && user.contributor.admin && msg.flagCount"
+      v-if="user.contributor.admin && msg.flagCount"
       class="message-hidden"
     >
       {{ flagCountDescription }}
@@ -27,8 +27,7 @@
           class="mr-1"
         >•</span>
         <span
-          v-b-tooltip
-          :title="msg.timestamp | date"
+          v-b-tooltip.hover="messageDate"
         >{{ msg.timestamp | timeAgo }}&nbsp;</span>
         <span v-if="msg.client && user.contributor.level >= 4">({{ msg.client }})</span>
       </p>
@@ -37,21 +36,12 @@
         class="text"
         v-html="atHighlight(parseMarkdown(msg.text))"
       ></div>
-      <div
-        v-if="isMessageReported && (inbox === true)"
-        class="reported"
-      >
-        <span v-once>{{ $t('reportedMessage') }}</span>
-        <br>
-        <span v-once>{{ $t('canDeleteNow') }}</span>
-      </div>
       <hr>
       <div
         v-if="msg.id"
         class="d-flex"
       >
         <div
-          v-if="!inbox"
           class="action d-flex align-items-center"
           @click="copyAsTodo(msg)"
         >
@@ -62,7 +52,7 @@
           <div>{{ $t('copyAsTodo') }}</div>
         </div>
         <div
-          v-if="(inbox || (user.flags.communityGuidelinesAccepted && msg.uuid !== 'system'))
+          v-if="(user.flags.communityGuidelinesAccepted && msg.uuid !== 'system')
             && (!isMessageReported || user.contributor.admin)"
           class="action d-flex align-items-center"
           @click="report(msg)"
@@ -77,7 +67,7 @@
           </div>
         </div>
         <div
-          v-if="msg.uuid === user._id || inbox || user.contributor.admin"
+          v-if="msg.uuid === user._id || user.contributor.admin"
           class="action d-flex align-items-center"
           @click="remove()"
         >
@@ -91,7 +81,6 @@
           </div>
         </div>
         <div
-          v-if="!inbox"
           v-b-tooltip="{title: likeTooltip(msg.likes[user._id])}"
           class="ml-auto d-flex"
         >
@@ -121,7 +110,7 @@
             ></div>
           </div>
         </div>
-        <span v-if="!msg.likes[user._id] && !inbox">{{ $t('like') }}</span>
+        <span v-if="!msg.likes[user._id]">{{ $t('like') }}</span>
       </div>
     </div>
   </div>
@@ -205,15 +194,9 @@
       color: $purple-400;
     }
   }
-
-  .reported {
-    margin-top: 18px;
-    color: $red-50;
-  }
 </style>
 
 <script>
-import axios from 'axios';
 import moment from 'moment';
 import cloneDeep from 'lodash/cloneDeep';
 import escapeRegExp from 'lodash/escapeRegExp';
@@ -244,10 +227,6 @@ export default {
   },
   props: {
     msg: {},
-    inbox: {
-      type: Boolean,
-      default: false,
-    },
     groupId: {},
   },
   data () {
@@ -311,6 +290,10 @@ export default {
       if (this.msg.flagCount < CHAT_FLAG_FROM_SHADOW_MUTE) return 'Message hidden';
       return 'Message hidden (shadow-muted)';
     },
+    messageDate () {
+      const date = moment(this.msg.timestamp).toDate();
+      return date.toString();
+    },
   },
   mounted () {
     const links = this.$refs.markdownContainer.getElementsByTagName('a');
@@ -372,11 +355,6 @@ export default {
       const message = this.msg;
       this.$emit('message-removed', message);
 
-      if (this.inbox) {
-        await axios.delete(`/api/v4/inbox/messages/${message.id}`);
-        return;
-      }
-
       await this.$store.dispatch('chat:deleteChat', {
         groupId: this.groupId,
         chatId: message.id,