combined messages restyling - next round (#15386)

* split component prepare new views / states

* extract empty and disabled state as components

* fix empty state mail icon

* first logic switching between modes, move page to /private-messages/index.vue

* extract autoCompleteHelper.js

* style header + start new message input

* style plus button + focus input

* state logic, types for sanity

* WIP PM new Message started

* add /members/username test

* first design changes to messageCard

* delete private message or chat - based on the mode

* copy as todo

* mention links to modal

* report chat or private message

* WIP likeButton

* likeButton styling

* hide like on private message cards

* fix unit test

* replace copy as todo - to just a copy to clipboard

* style changes

* menu position + like button width

* dropdown items background + like font

* fix like button padding

* move api endpoints and tests around to group inbox methods  + like for inbox private messages

* restyle system messages

* Dropdown Radius and Padding

* WIP system messages

* fix lint

* copy delta commit of allowing liking own private messages

* enable liking private messages

* fix menu non hovered item icon color

* fix import path

* ignore background on system messages

* requested changes + migration

* update migration to update the unique id to some messages and delete the duplicates

* migration based on users pagination

* fix(migration): use Promise.all

* change to bulkWrites per User, and all messages in one run (of a user)

* check for array

* use rest operator ...

* skip sorting to get the users

* remove migration, disable like for private messages without uniqueMessageId

* lean+bulkWrite for likes, add time checks for like and auth for further debugging

* add a limit 2 get the messages by uniqueId

* Adding a simple server start script

* remove pinned nodemon dep

* fix inbox controller/tests

* fix / requested style changes

* fix empty state padding /

* hide avatar weapons on messages - fix avatar spacing on messages

* Hourglass Simplification (#15323)

* begin removing obsolete tests

* begin refactoring

* update cron tests

* cleanup

* finish basic implementation of new logic

* add more subscription tests

* subscription test improvements

* return nextHourglassDate again

* fix gem limit

* fix(test): short circuit this.

* fix(admin): correct logic and style for shrimple subs

* WIP(frontend): draft of main subs page view

* fix hourglass count

* Fix hourglass logic for upgrades

* fix admin panel display

* WIP(subs): extant Stripe state

* fix admin panel strings

* fix missing transaction type

* add new field for cumulative subscription count

* show date for hourglass bonus if it was received

* fix test

* feat(subscription): max Gems progress readout

* fix(css): correct and refactor heights and selection states

* fix(subs): correct border-radius and redirect

* fix(stripe): correct redirect after success

* Admin panel display fixes

* don’t give additional HG for new sub if they already got one this month

* fix issue with promo hourglasses

* fix(subscription): update layout when gifting

* fix(subscriptions): more gift layout revisions

* fix(subscriptions): minor visual updates

* fix(subs): pass autoRenews through Stripe

* fix(subs): gifts DON't renew

* fix(lint): unnecessary ternary

* fix(lint): do negate object ig

* fix(subs): try again on gifts

* fix(subs): unhovery and un-12-monthy

* fix bug with incorrectly giving HG bonus

* remove only

* fix test

* fix test

* fix(subs): also redirect to subs after gift sub

* fix(subs): fix typeError

* fix(g1g1): don't try to find Gems promo during bogo

---------

Co-authored-by: Phillip Thelen <phillip@habitica.com>
Co-authored-by: Kalista Payne <sabe@habitica.com>

* chore(sprites): update subproject

* fix(layout): tighten cancellation note

* fix(subs): Google wording and HG escape

* chore(testing): fake g1g1 dates

* fix(subs): don't hide HG preview entirely

* fix(subs): center next hourglass message

* working validatedTextInput.vue within start-new-conversation-input-header.vue 🎉

* fix(git): remove changes from old develop

* Revert "fix(git): remove changes from old develop"

This reverts commit 0e30f7df00.

* fix(git): no actually just this file i guesss

* adding an empty loading state, hiding

* fought the avatar arch nemesis again

* fix chatMessages (party chat) message spacing

* move disabled text back to above the input area - re-enable input area

* show disabled private messages top panel

* fix font color

* fixing uiStates - removing disabled - moving the own user check to the last

* fix(lint): add missing prop defaults

* fix(lint): object default should be fn

* fix(chat): correct grammar in error

* remove weapon position relative

* revert most of avatar.vue changes, add back weapons in chat message UI

* show date tooltip above system / skill messages

* fix toggle disable icon position

* trivial CSS cleanup

* fix(typo): English syntax in test

* chore(test): small style cleanup

* chore(logging): revert debug function

* chore(debug): remove timers from inbox like

---------

Co-authored-by: SabreCat <sabe@habitica.com>
Co-authored-by: Kalista Payne <sabrecat@gmail.com>
Co-authored-by: Phillip Thelen <phillip@habitica.com>

website/client/src/components/messages/messageCard.vue

@@ -1,73 +1,157 @@
 <template>
-  <div class="card-body">
-    <user-link
-      :user-id="msg.uuid"
-      :name="msg.user"
-      :backer="msg.backer"
-      :contributor="msg.contributor"
-    />
-    <p class="time">
-      <span
-        v-if="msg.username"
-        class="mr-1"
-      >@{{ msg.username }}</span><span
-        v-if="msg.username"
-        class="mr-1"
-      >•</span>
-      <span
-        v-b-tooltip.hover="messageDate"
-      >{{ msg.timestamp | timeAgo }}&nbsp;</span>
-      <span v-if="msg.client && user.contributor.level >= 4"> ({{ msg.client }})</span>
-    </p>
+  <div
+    class="card"
+    :class="{
+      'system-message': isSystemMessage
+    }"
+  >
     <div
-      class="text markdown"
-      dir="auto"
-      v-html="parseMarkdown(msg.text)"
-    ></div>
-    <div
-      v-if="isMessageReported"
-      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"
+      v-b-tooltip.hover="messageDateForSystemMessage"
+      class="message-card"
+
+      :class="{
+        'user-sent-message': userSentMessage,
+        'user-received-message': !userSentMessage && !isSystemMessage,
+        'system-message': isSystemMessage
+      }"
     >
       <div
-        v-if="!isMessageReported"
-        class="action d-flex align-items-center"
-        @click="report(msg)"
+        v-if="isUserMentioned"
+        class="mentioned-icon"
+      ></div>
+      <div
+        v-if="userIsModerator && msg.flagCount"
+        class="message-hidden"
       >
-        <div
-          v-once
-          class="svg-icon"
-          v-html="icons.report"
-        ></div>
-        <div v-once>
-          {{ $t('report') }}
-        </div>
+        {{ flagCountDescription }}
       </div>
       <div
-        class="action d-flex align-items-center"
-        @click="remove()"
+        class="card-body"
       >
+        <user-link
+          v-if="!isSystemMessage"
+          :user-id="msg.uuid"
+          :name="msg.user"
+          :backer="msg.backer"
+          :contributor="msg.contributor"
+        />
+        <p
+          v-if="!isSystemMessage"
+          class="time"
+        >
+          <span
+            v-if="msg.username"
+            class="mr-1"
+          >@{{ msg.username }}</span><span
+            v-if="msg.username"
+            class="mr-1"
+          >•</span>
+          <span v-b-tooltip.hover="messageDate">{{ msg.timestamp | timeAgo }}&nbsp;</span>
+          <span v-if="msg.client && user.contributor.level >= 4">
+            ({{ msg.client }})
+          </span>
+        </p>
+
+        <b-dropdown
+          v-if="!isSystemMessage"
+          right="right"
+          variant="flat"
+          toggle-class="with-icon"
+          class="card-menu no-min-width"
+          :no-caret="true"
+        >
+          <template #button-content>
+            <span
+              v-once
+              class="svg-icon inline menuIcon color"
+              v-html="icons.menuIcon"
+            >
+            </span>
+          </template>
+          <b-dropdown-item
+            class="selectListItem"
+            @click="copy(msg)"
+          >
+            <span class="with-icon">
+              <span
+                v-once
+                class="svg-icon icon-16 color"
+                v-html="icons.copy"
+              ></span>
+              <span v-once>
+                {{ $t('copy') }}
+              </span>
+            </span>
+          </b-dropdown-item>
+          <b-dropdown-item
+            v-if="canReportMessage"
+            class="selectListItem custom-hover--red"
+            @click="report(msg)"
+          >
+            <span class="with-icon">
+              <span
+                v-once
+                class="svg-icon icon-16 color"
+                v-html="icons.report"
+              ></span>
+              <span v-once>
+                {{ $t('report') }}
+              </span>
+            </span>
+          </b-dropdown-item>
+          <b-dropdown-item
+            v-if="canDeleteMessage"
+            class="selectListItem custom-hover--red"
+            @click="remove()"
+          >
+            <span class="with-icon">
+              <span
+                v-once
+                class="svg-icon icon-16 color"
+                v-html="icons.delete"
+              ></span>
+              <span v-once>
+                {{ $t('delete') }}
+              </span>
+            </span>
+          </b-dropdown-item>
+        </b-dropdown>
+
         <div
-          v-once
-          class="svg-icon"
-          v-html="icons.delete"
-        ></div>
-        <div v-once>
-          {{ $t('delete') }}
+          v-if="isSystemMessage"
+          class="system-message-body"
+        >
+          {{ msg.unformattedText }}
         </div>
+        <div
+          v-else
+          ref="markdownContainer"
+          class="text markdown"
+          dir="auto"
+          v-html="parseMarkdown(msg.text)"
+        ></div>
+        <div
+          v-if="isMessageReported"
+          class="reported"
+        >
+          <span v-once>{{ $t('reportedMessage') }}</span><br>
+          <span v-once>{{ $t('canDeleteNow') }}</span>
+        </div>
+
+        <like-button
+          v-if="canLikeMessage"
+          class="mt-75"
+          :liked-by-current-user="msg.likes[user._id]"
+          :like-count="likeCount"
+          @toggle-like="like()"
+        />
       </div>
     </div>
   </div>
 </template>
 
 <style lang="scss">
+.message-card {
   .at-highlight {
     background-color: rgba(213, 200, 255, 0.32);
     padding: 0.1rem;
@@ -76,43 +160,76 @@
   .at-text {
     color: #6133b4;
   }
+
+  .card-menu button {
+    justify-content: center;
+    margin: 0;
+    padding: 0;
+    height: 1rem;
+    width: 1rem;
+  }
+
+  .markdown p:last-of-type {
+    margin-bottom: 0;
+  }
+}
+
 </style>
 
 <style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
-  @import '~@/assets/scss/tiers.scss';
+@import '~@/assets/scss/colors.scss';
+@import '~@/assets/scss/tiers.scss';
 
-  .action {
-    display: inline-block;
-    color: $gray-200;
-    margin-right: 1em;
-    font-size: 12px;
+.card {
+  background: transparent !important;
+  margin-bottom: 0 !important;
+}
 
-    :hover {
-      cursor: pointer;
-    }
+.message-card:not(.system-message) {
+  background: white;
+}
 
-    .svg-icon {
-      color: $gray-300;
-      margin-right: .2em;
-      width: 16px;
-    }
+.mentioned-icon {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background-color: $purple-500;
+  box-shadow: 0 1px 1px 0 rgba(26, 24, 29, 0.12);
+  position: absolute;
+  right: -.5em;
+  top: -.5em;
+}
+
+.message-hidden {
+  margin-left: 1.5em;
+  margin-top: 1em;
+  color: red;
+}
+
+.active {
+  color: $purple-300;
+
+  .svg-icon {
+    color: $purple-400;
   }
+}
 
-  .active {
-    color: $purple-300;
+.message-card {
+  border-radius: 7px;
+  margin: 0;
+  padding: 1rem 0.75rem 0.5rem 1rem;
 
-    .svg-icon {
-      color: $purple-400;
-    }
+  &.system-message {
+    padding-top: 0.5rem;
   }
 
   .card-body {
-    padding: 0.75rem 1.25rem 0.75rem 1.25rem;
+    position: relative;
+    padding: 0;
 
     .time {
       font-size: 12px;
-      color: $gray-200;
+      color: $gray-100;
       margin-bottom: 0.5rem;
     }
 
@@ -123,49 +240,173 @@
       min-height: 0rem;
     }
   }
+}
 
-  hr {
-    margin-bottom: 0.5rem;
-    margin-top: 0.5rem;
-  }
+.card-menu {
+  position: absolute;
+  top: 0;
+  right: 0;
 
-  .reported {
-    margin-top: 18px;
-    color: $red-50;
+  &:not(.show) {
+    display: none;
   }
+}
+
+.card-body:hover {
+  .card-menu {
+    display: block;
+  }
+}
+
+hr {
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+}
+
+.reported {
+  margin-top: 18px;
+  color: $red-50;
+}
+
+.selectListItem:not(:hover) .svg-icon.icon-16.color {
+  color: #{$gray-100}
+}
+
+.custom-hover--red {
+  --hover-color: #{$maroon-50};
+  --hover-background: #{rgba($red-500, 0.25)};
+}
+
+.user-sent-message {
+  border: 1px solid $purple-400;
+}
+
+.system-message {
+  border: 1px solid $purple-400;
+}
+
+.user-received-message {
+  border: 1px solid $gray-500;
+}
+
+.card-menu {
+  // icon-color is the menu icon itself
+  --icon-color: #{$gray-100};
+
+  --dropdown-item-hover-icon-color: #{$gray-100};
+
+  &:hover {
+    --icon-color: #{$purple-300};
+  }
+}
+
+.menuIcon {
+  width: 4px;
+  height: 1rem;
+  object-fit: contain;
+}
+
+.system-message-body {
+  line-height: 1.71;
+  text-align: center;
+  color: $purple-300;
+}
+
 </style>
 
 <script>
 import axios from 'axios';
 import moment from 'moment';
 
+import cloneDeep from 'lodash/cloneDeep';
+import escapeRegExp from 'lodash/escapeRegExp';
+import { CHAT_FLAG_FROM_SHADOW_MUTE, CHAT_FLAG_LIMIT_FOR_HIDING } from '@/../../common/script/constants';
 import externalLinks from '../../mixins/externalLinks';
 
+import { CopyToClipboardMixin } from '@/mixins/copyToClipboard';
+
 import renderWithMentions from '@/libs/renderWithMentions';
 import { mapState } from '@/libs/store';
 import userLink from '../userLink';
 
 import deleteIcon from '@/assets/svg/delete.svg';
 import reportIcon from '@/assets/svg/report.svg';
+import menuIcon from '@/assets/svg/menu.svg';
+import { userStateMixin } from '@/mixins/userState';
+import copyIcon from '@/assets/svg/copy.svg';
+import LikeButton from '@/components/messages/likeButton.vue';
+
+const LikeLogicMixin = {
+  computed: {
+    likeCount () {
+      const message = this.msg;
+      if (!message.likes) return 0;
+
+      let likeCount = 0;
+      for (const key of Object.keys(message.likes)) {
+        const like = message.likes[key];
+        if (like) likeCount += 1;
+      }
+      return likeCount;
+    },
+  },
+  methods: {
+
+    async like () {
+      const message = cloneDeep(this.msg);
+
+      await this.$store.dispatch('chat:like', {
+        groupId: this.groupId,
+        chatMessageId: this.privateMessageMode ? message.uniqueMessageId : message.id,
+      });
+
+      message.likes[this.user._id] = !message.likes[this.user._id];
+
+      this.$emit('message-liked', message);
+      this.$root.$emit('bv::hide::tooltip');
+    },
+  },
+};
 
 export default {
   components: {
+    LikeButton,
     userLink,
   },
   filters: {
     timeAgo (value) {
       return moment(value).fromNow();
     },
+    date (value) {
+      // @TODO: Vue doesn't support this so we cant user preference
+      return moment(value).toDate().toString();
+    },
   },
-  mixins: [externalLinks],
+  mixins: [
+    externalLinks, userStateMixin, LikeLogicMixin,
+    CopyToClipboardMixin,
+  ],
   props: {
-    msg: {},
+    msg: {
+      type: Object,
+    },
+    groupId: {
+      type: String,
+    },
+    privateMessageMode: {
+      type: Boolean,
+    },
+    userSentMessage: {
+      type: Boolean,
+    },
   },
   data () {
     return {
       icons: Object.freeze({
         delete: deleteIcon,
         report: reportIcon,
+        copy: copyIcon,
+        menuIcon,
       }),
       reported: false,
     };
@@ -175,19 +416,100 @@ export default {
     isMessageReported () {
       return (this.msg.flags && this.msg.flags[this.user.id]) || this.reported;
     },
+    messageDateForSystemMessage () {
+      return this.isSystemMessage ? this.messageDate : '';
+    },
     messageDate () {
       const date = moment(this.msg.timestamp).toDate();
       return date.toString();
     },
+    userIsModerator () {
+      return this.hasPermission(this.user, 'moderator');
+    },
+    isSystemMessage () {
+      return this.msg.uuid === 'system';
+    },
+    canLikeMessage () {
+      if (this.isSystemMessage) {
+        return false;
+      }
+
+      if (this.privateMessageMode) {
+        return Boolean(this.msg.uniqueMessageId);
+      }
+
+      return this.msg.id;
+    },
+    canDeleteMessage () {
+      return this.privateMessageMode
+        || this.msg.uuid === this.user._id
+        || this.userIsModerator;
+    },
+    canReportMessage () {
+      if (this.privateMessageMode) {
+        return !this.isMessageReported;
+      }
+      return (this.user.flags.communityGuidelinesAccepted && this.msg.uuid !== 'system')
+        && (!this.isMessageReported || this.userIsModerator);
+    },
+    isUserMentioned () {
+      const message = this.msg;
+
+      if (message.highlight) {
+        return true;
+      }
+
+      const { user } = this;
+      const displayName = user.profile.name;
+      const { username } = user.auth.local;
+      const pattern = `@(${escapeRegExp(displayName)}|${escapeRegExp(username)})(\\b)`;
+      message.highlight = new RegExp(pattern, 'i').test(message.text);
+
+      return message.highlight;
+    },
+    flagCountDescription () {
+      if (!this.msg.flagCount) {
+        return '';
+      }
+
+      if (this.msg.flagCount < CHAT_FLAG_LIMIT_FOR_HIDING) {
+        return 'Message flagged once, not hidden';
+      }
+
+      if (this.msg.flagCount < CHAT_FLAG_FROM_SHADOW_MUTE) {
+        return 'Message hidden';
+      }
+
+      return 'Message hidden (shadow-muted)';
+    },
   },
   mounted () {
     this.$emit('message-card-mounted');
     this.handleExternalLinks();
+    this.mapProfileLinksToModal();
   },
   updated () {
     this.handleExternalLinks();
+    this.mapProfileLinksToModal();
   },
   methods: {
+    mapProfileLinksToModal () {
+      const links = this.$refs.markdownContainer.getElementsByTagName('a');
+      for (let i = 0; i < links.length; i += 1) {
+        let link = links[i].pathname;
+
+        // Internet Explorer does not provide the leading slash character in the pathname
+        link = link.charAt(0) === '/' ? link : `/${link}`;
+
+        if (link.startsWith('/profile/')) {
+          links[i].onclick = ev => {
+            ev.preventDefault();
+            this.$router.push({ path: link });
+          };
+        }
+      }
+    },
+
     report () {
       this.$root.$on('habitica:report-result', data => {
         if (data.ok) {
@@ -199,16 +521,29 @@ export default {
 
       this.$root.$emit('habitica::report-chat', {
         message: this.msg,
-        groupId: 'privateMessage',
+        groupId: this.groupId,
       });
     },
     async remove () {
-      if (!window.confirm(this.$t('areYouSureDeleteMessage'))) return; // eslint-disable-line no-alert
+      // eslint-disable-next-line no-alert
+      if (!window.confirm(this.$t('areYouSureDeleteMessage'))) {
+        return;
+      }
 
       const message = this.msg;
       this.$emit('message-removed', message);
 
-      await axios.delete(`/api/v4/inbox/messages/${message.id}`);
+      if (this.privateMessageMode) {
+        await axios.delete(`/api/v4/inbox/messages/${message.id}`);
+      } else {
+        await this.$store.dispatch('chat:deleteChat', {
+          groupId: this.groupId,
+          chatId: message.id,
+        });
+      }
+    },
+    copy (message) {
+      this.mixinCopyToClipboard(message.text, this.$t('messageCopiedToClipboard'));
     },
     parseMarkdown (text) {
       return renderWithMentions(text, this.user);