refs #2088 Display status notification in notifications

src/config/locales/en/translation.json

@@ -491,6 +491,10 @@
     "reaction": {
       "title": "Reaction",
       "body": "{{username}} reacted your status"
+    },
+    "status": {
+      "title": "Status",
+      "body": "{{username}} just posted"
     }
   }
 }

src/renderer/components/organisms/Notification.vue

@@ -84,6 +84,18 @@
       @select="$emit('selectNotification')"
     >
     </reaction>
+    <status
+      v-else-if="message.type === 'status'"
+      :message="message"
+      :filter="filter"
+      :focused="focused"
+      :overlaid="overlaid"
+      @focusNext="$emit('focusNext')"
+      @focusPrev="$emit('focusPrev')"
+      @focusRight="$emit('focusRight')"
+      @select="$emit('selectNotification')"
+    >
+    </status>
   </div>
 </template>
 
@@ -95,6 +107,7 @@ import Mention from './Notification/Mention'
 import Quote from './Notification/Quote'
 import Reblog from './Notification/Reblog'
 import Reaction from './Notification/Reaction'
+import Status from './Notification/Status'
 
 export default {
   name: 'notification',
@@ -116,7 +129,7 @@ export default {
       default: false
     }
   },
-  components: { Favourite, Follow, FollowRequest, Mention, Quote, Reblog, Reaction },
+  components: { Favourite, Follow, FollowRequest, Mention, Quote, Reblog, Reaction, Status },
   methods: {
     updateToot(message) {
       return this.$emit('update', message)

src/renderer/components/organisms/Notification/Favourite.vue

@@ -9,9 +9,7 @@
     role="article"
     aria-label="favourited toot"
   >
-    <div v-show="filtered(message)" class="filtered">
-      Filtered
-    </div>
+    <div v-show="filtered(message)" class="filtered">Filtered</div>
     <div v-show="!filtered(message)" class="favourite">
       <div class="action">
         <div class="action-mark">

src/renderer/components/organisms/Notification/Status.vue

@@ -0,0 +1,122 @@
+<template>
+  <div class="notified-status">
+    <div class="action">
+      <div class="action-mark">
+        <icon name="home" scale="0.9"></icon>
+      </div>
+      <div class="action-detail">
+        <span class="bold" @click="openUser(message.account)"><bdi v-html="username(message.account)"></bdi></span
+        >{{ $t('notification.status.body') }}
+      </div>
+      <div class="action-icon" role="presentation">
+        <FailoverImg :src="message.account.avatar" :alt="`Avatar of ${message.account.username}`" />
+      </div>
+    </div>
+    <div class="clearfix"></div>
+    <toot
+      :message="message.status"
+      :filter="filter"
+      :focused="focused"
+      :overlaid="overlaid"
+      v-on:update="updateToot"
+      v-on:delete="deleteToot"
+      @focusNext="$emit('focusNext')"
+      @focusPrev="$emit('focusPrev')"
+      @focusRight="$emit('focusRight')"
+      @selectToot="$emit('select')"
+    >
+    </toot>
+  </div>
+</template>
+
+<script>
+import emojify from '~/src/renderer/utils/emojify'
+import Toot from '../Toot'
+
+export default {
+  name: 'mention',
+  props: {
+    message: {
+      type: Object,
+      default: {}
+    },
+    filter: {
+      type: String,
+      default: ''
+    },
+    focused: {
+      type: Boolean,
+      default: false
+    },
+    overlaid: {
+      type: Boolean,
+      default: false
+    }
+  },
+  components: { Toot },
+  methods: {
+    updateToot(message) {
+      return this.$emit('update', message)
+    },
+    deleteToot(message) {
+      return this.$emit('delete', message)
+    },
+    username(account) {
+      if (account.display_name !== '') {
+        return emojify(account.display_name, account.emojis)
+      } else {
+        return account.username
+      }
+    },
+    openUser(account) {
+      this.$store.dispatch('TimelineSpace/Contents/SideBar/openAccountComponent')
+      this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/changeAccount', account)
+      this.$store.commit('TimelineSpace/Contents/SideBar/changeOpenSideBar', true)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.bold {
+  font-weight: bold;
+}
+
+.action {
+  margin: 8px 0 0 16px;
+
+  .action-mark {
+    color: #409eff;
+    float: left;
+    width: 32px;
+    text-align: right;
+  }
+
+  .action-detail {
+    margin-left: 10px;
+    font-size: var(--base-font-size);
+    float: left;
+    max-width: 80%;
+
+    .bold /deep/ {
+      cursor: pointer;
+
+      .emojione {
+        max-width: 14px;
+        max-height: 14px;
+      }
+    }
+  }
+
+  .action-icon {
+    width: 100%;
+    text-align: right;
+
+    img {
+      width: 16px;
+      height: 16px;
+      border-radius: 2px;
+    }
+  }
+}
+</style>

src/renderer/store/TimelineSpace/Contents/Notifications.ts

@@ -152,9 +152,9 @@ const getters: GetterTree<NotificationsState, RootState> = {
         case NotificationType.Favourite:
         case NotificationType.Reblog:
         case NotificationType.Mention:
-        case NotificationType.Poll:
         case NotificationType.EmojiReaction:
         case NotificationType.FollowRequest:
+        case NotificationType.Status:
           return true
         default:
           return false