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/ui/toggleSwitch.vue

@@ -2,14 +2,14 @@
   <div class="popover-box">
     <div
       :id="containerId"
-      class="clearfix"
+      class="clearfix toggle-switch-outer"
     >
       <div
         v-if="label"
         class="float-left toggle-switch-description"
         :class="hoverText ? 'hasPopOver' : ''"
       >
-        {{ label }}
+        <span>{{ label }}</span>
       </div>
       <div class="toggle-switch float-left">
         <input
@@ -53,9 +53,7 @@
   }
 
   .toggle-switch-description {
-    height: 20px;
-
-    &.hasPopOver {
+    &.hasPopOver span {
       border-bottom: 1px dashed $gray-200;
     }
   }