feat: Add notes for Contacts (#3273)

Fixes #2275

app/javascript/dashboard/modules/notes/components/ContactNote.vue

@@ -1,26 +1,22 @@
 <template>
   <div class="card note-wrap">
-    <p class="note__content">
-      {{ note }}
-    </p>
-    <div class="footer">
+    <div class="header">
       <div class="meta">
-        <div :title="userName">
-          <thumbnail :src="thumbnail" :username="userName" size="16px" />
-        </div>
+        <thumbnail
+          :title="noteAuthorName"
+          :src="noteAuthor.thumbnail"
+          :username="noteAuthorName"
+          size="20px"
+        />
         <div class="date-wrap">
-          <span>{{ readableTime }}</span>
+          <span class="fw-medium"> {{ noteAuthorName }} </span>
+          <span> {{ $t('NOTES.LIST.LABEL') }} </span>
+          <span class="fw-medium"> {{ readableTime }} </span>
         </div>
       </div>
       <div class="actions">
         <woot-button
-          variant="smooth"
-          size="tiny"
-          icon="ion-compose"
-          color-scheme="secondary"
-          @click="onEdit"
-        />
-        <woot-button
+          v-tooltip="$t('NOTES.CONTENT_HEADER.DELETE')"
           variant="smooth"
           size="tiny"
           icon="ion-trash-b"
@@ -29,19 +25,21 @@
         />
       </div>
     </div>
+    <p class="note__content" v-html="formatMessage(note || '')" />
   </div>
 </template>
 
 <script>
 import Thumbnail from 'dashboard/components/widgets/Thumbnail';
 import timeMixin from 'dashboard/mixins/time';
+import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
 
 export default {
   components: {
     Thumbnail,
   },
 
-  mixins: [timeMixin],
+  mixins: [timeMixin, messageFormatterMixin],
 
   props: {
     id: {
@@ -52,30 +50,29 @@ export default {
       type: String,
       default: '',
     },
-    userName: {
-      type: String,
-      default: '',
+    user: {
+      type: Object,
+      default: () => {},
     },
-    timeStamp: {
+    createdAt: {
       type: Number,
       default: 0,
     },
-    thumbnail: {
-      type: String,
-      default: '',
-    },
   },
 
   computed: {
     readableTime() {
-      return this.dynamicTime(this.timeStamp);
+      return this.dynamicTime(this.createdAt);
+    },
+    noteAuthor() {
+      return this.user || {};
+    },
+    noteAuthorName() {
+      return this.noteAuthor.name || this.$t('APP_GLOBAL.DELETED_USER');
     },
   },
 
   methods: {
-    onEdit() {
-      this.$emit('edit', this.id);
-    },
     onDelete() {
       this.$emit('delete', this.id);
     },
@@ -85,24 +82,23 @@ export default {
 
 <style lang="scss" scoped>
 .note__content {
-  font-size: var(--font-size-mini);
-  margin-bottom: var(--space-smaller);
+  margin-top: var(--space-normal);
 }
 
-.footer {
+.header {
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
+  font-size: var(--font-size-mini);
 
   .meta {
     display: flex;
-    padding: var(--space-smaller) 0;
+    align-items: center;
 
     .date-wrap {
       margin-left: var(--space-smaller);
       padding: var(--space-micro);
       color: var(--color-body);
-      font-size: var(--font-size-micro);
     }
   }
   .actions {