Feat(Timestamp): Add timestamp to Message Actions (AP-106) (#318)

* Feat(Timestamp): Add timestamp to Message Actions (AP-106)

* fix(chat reaction): Fix 'Emoji reactions will increase if user navigates to a different page and back to chat again' (#306)

* fix(chat reaction): Fix 'Emoji reactions will increase if user navigates to a different page and back to chat again'

* put space after if

* fix(message): update timestamp message every minute (#300)

* chore: rebase dev

* chore(message): changes in response to pr review

Co-authored-by: Samir Vimercati <samir.vimercati@knobs.it>

* implements lazy loading for glyphs - AP-101 (#311)

* (update)glyphs: add vuetify import

* update(lazy load glyphs): update implemintation of glyphs to allow lazy loading brought in from vuetify.

* Nuke old code

* nuke old code

* fix - Duplicate friends are being added when page is re-rendered - AP-64 (#308)

* fixed duplicated friends issue = AP-64

* Update actions.ts

Co-authored-by: Matt Wisniewski <retropronghorn@gmail.com>

* chore(readme): doc update (#319)

Updating readme
Adding .env.example file
Updated satellite-lucide-icons to not need ssh key uploaded to github

closes no tickets

* fix merge conflict

* Fix messageOwner in Action html

* fix(Timestamp): removed messageOwner in Action components

* fix(timestamp): add comma dangle

Co-authored-by: Eric Lee <eric.lee6174@gmail.com>
Co-authored-by: vimercati-samir <52865716+vimercati-samir@users.noreply.github.com>
Co-authored-by: Samir Vimercati <samir.vimercati@knobs.it>
Co-authored-by: Jeff Kristian <jekrimo@gmail.com>
Co-authored-by: David Chan <57536961+davidchan1219@users.noreply.github.com>
Co-authored-by: Matt Wisniewski <retropronghorn@gmail.com>
Co-authored-by: Chris Hogan <chris@hogan.io>

.vscode/settings.json

@@ -1,3 +1,6 @@
 {
-  "editor.defaultFormatter": "esbenp.prettier-vscode"
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "[vue]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  }
 }

components/tailored/messaging/message/Message.html

@@ -27,18 +27,10 @@
       :setReplyChatbarContent="setReplyChatbarContent"
       :emojiReaction="emojiReaction"
       :editMessage="editMessage"
-      :messageOwner="this.$props.message.from"
-    />
-    <VueMarkdown
-      v-if="!messageEdit && message.type === 'text'"
-      :source="message.payload"
-      class="markdown"
-    />
-    <UiImage
-      v-else-if="message.type === 'image'"
-      :source="message.payload.url"
-      alt=""
+      :message="message"
     />
+    <VueMarkdown v-if="!messageEdit && message.type === 'text'" :source="message.payload" class="markdown" />
+    <UiImage v-else-if="message.type === 'image'" :source="message.payload.url" alt="" />
     <!-- Only for video types we can't embed directly without doing something sketchy, like sending it to a server somewhere to extract the HTML5 video-->
     <UiEmbedsEmbeddedLinkContent
       v-if="message.type === 'text'"

components/tailored/messaging/message/actions/Actions.html

@@ -1,4 +1,5 @@
 <div class="message-actions">
+  <div class="reply-text">{{$dayjs(message.at).from()}}</div>
   <div
     class="reply-command has-tooltip has-tooltip-primary"
     :data-tooltip="$t('global.glyphs')"
@@ -26,7 +27,7 @@
   <div
     class="reply-command has-tooltip has-tooltip-primary"
     :data-tooltip="$t('global.edit')"
-    v-if="messageOwner === accounts.details.textilePubkey"
+    v-if="message.from === accounts.details.textilePubkey"
     @click="editMessage"
   >
     <edit-icon size="1x" :class="'control-icon'" />
@@ -37,4 +38,4 @@
   >
     <more-vertical-icon size="1x" :class="'control-icon'" />
   </div>
-</div>
+</div>

components/tailored/messaging/message/actions/Actions.less

@@ -10,6 +10,12 @@
   display: flex;
   box-sizing: border-box;
   height: 36px;
+  font-size: 14px;
+  align-items: center;
+  padding: 0 0.25rem;
+  .reply-text {
+    padding: 0 0.25rem;
+  }
   .reply-command {
     width: 35px;
     // height: 35px;
@@ -32,4 +38,4 @@
       color: @text;
     }
   }
-}
+}

components/tailored/messaging/message/actions/Actions.vue

@@ -37,9 +37,15 @@ export default Vue.extend({
       type: Function,
       default: () => () => {},
     },
-    messageOwner: {
-      type: String,
-      required: true,
+    message: {
+      type: Object as PropType<UIMessage>,
+      default: {
+        id: '0',
+        at: 1620515543000,
+        type: 'text',
+        from: 'group',
+        payload: 'Invalid Message',
+      },
     },
   },
   computed: {