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/userLabel.vue

@@ -0,0 +1,115 @@
+<template>
+  <div
+    v-if="displayName"
+    v-b-tooltip.hover.top="tierTitle"
+    class="user-label"
+    :class="levelStyle()"
+  >
+    {{ displayName }}
+    <div
+      class="svg-icon"
+      v-html="tierIcon()"
+    ></div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+  @import '~@/assets/scss/colors.scss';
+
+  .user-label.no-tier {
+    color: $gray-50;
+  }
+
+  .user-label {
+    font-weight: bold;
+    margin-bottom: 0;
+    display: inline-block;
+    font-size: 16px;
+
+    .svg-icon {
+      width: 10px;
+      display: inline-block;
+      margin-left: .5em;
+    }
+  }
+</style>
+
+<script>
+import achievementsLib from '@/../../common/script/libs/achievements';
+
+import styleHelper from '@/mixins/styleHelper';
+
+import tier1 from '@/assets/svg/tier-1.svg';
+import tier2 from '@/assets/svg/tier-2.svg';
+import tier3 from '@/assets/svg/tier-3.svg';
+import tier4 from '@/assets/svg/tier-4.svg';
+import tier5 from '@/assets/svg/tier-5.svg';
+import tier6 from '@/assets/svg/tier-6.svg';
+import tier7 from '@/assets/svg/tier-7.svg';
+import tier8 from '@/assets/svg/tier-mod.svg';
+import tier9 from '@/assets/svg/tier-staff.svg';
+import tierNPC from '@/assets/svg/tier-npc.svg';
+
+export default {
+  mixins: [styleHelper],
+  props: ['user', 'name', 'backer', 'contributor', 'hideTooltip'],
+  data () {
+    return {
+      icons: Object.freeze({
+        tier1,
+        tier2,
+        tier3,
+        tier4,
+        tier5,
+        tier6,
+        tier7,
+        tier8,
+        tier9,
+        tierNPC,
+      }),
+    };
+  },
+  computed: {
+    displayName () {
+      if (this.name) {
+        return this.name;
+      }
+      if (this.user && this.user.profile) {
+        return this.user.profile.name;
+      }
+
+      return null;
+    },
+    level () {
+      if (this.contributor) {
+        return this.contributor.level;
+      } if (this.user && this.user.contributor) {
+        return this.user.contributor.level;
+      }
+      return 0;
+    },
+    isNPC () {
+      if (this.backer) {
+        return this.backer.level;
+      } if (this.user && this.user.backer) {
+        return this.user.backer.level;
+      }
+      return false;
+    },
+  },
+  methods: {
+    tierIcon () {
+      if (this.isNPC) {
+        return this.icons.tierNPC;
+      }
+      return this.icons[`tier${this.level}`];
+    },
+    tierTitle () {
+      return this.hideTooltip ? '' : achievementsLib.getContribText(this.contributor, this.isNPC) || '';
+    },
+    levelStyle () {
+      return this.userLevelStyleFromLevel(this.level, this.isNPC);
+    },
+  },
+};
+</script>