Show username if display_name is blanked

src/renderer/components/TimelineSpace/Cards/Notification/Favourite.vue

@@ -5,7 +5,7 @@
         <icon name="star" scale="0.7"></icon>
       </div>
       <div class="action-detail">
-        <span class="bold">{{ message.account.display_name }}</span> favourited your status
+        <span class="bold">{{ username(message.account) }}</span> favourited your status
       </div>
       <div class="action-icon">
         <img :src="message.account.avatar" />
@@ -19,7 +19,7 @@
       <div class="detail">
         <div class="toot-header">
           <div class="user">
-            {{ message.status.account.display_name }}
+            {{ username(message.status.account) }}
           </div>
           <div class="timestamp">
             {{ parseDatetime(message.status.created_at) }}
@@ -40,6 +40,13 @@ export default {
   name: 'favourite',
   props: ['message'],
   methods: {
+    username (account) {
+      if (account.display_name !== '') {
+        return account.display_name
+      } else {
+        return account.username
+      }
+    },
     parseDatetime (datetime) {
       return moment(datetime).format('YYYY-MM-DD HH:mm:ss')
     }

src/renderer/components/TimelineSpace/Cards/Notification/Follow.vue

@@ -5,7 +5,7 @@
         <icon name="user-plus" scale="0.7"></icon>
       </div>
       <div class="action-detail">
-        <span class="bold">{{ message.account.display_name }}</span> is now following you
+        <span class="bold">{{ username(message.account) }}</span> is now following you
       </div>
       <div class="action-icon">
         <img :src="message.account.avatar" />
@@ -19,7 +19,16 @@
 <script>
 export default {
   name: 'follow',
-  props: ['message']
+  props: ['message'],
+  methods: {
+    username (account) {
+      if (account.display_name !== '') {
+        return account.display_name
+      } else {
+        return account.username
+      }
+    }
+  }
 }
 </script>
 

src/renderer/components/TimelineSpace/Cards/Notification/Reblog.vue

@@ -5,7 +5,7 @@
         <icon name="retweet" scala="0.7"></icon>
       </div>
       <div class="action-detail">
-        <span class="bold">{{ message.account.display_name }}</span> boosted your status
+        <span class="bold">{{ username(message.account) }}</span> boosted your status
       </div>
       <div class="action-icon">
         <img :src="message.account.avatar" />
@@ -19,7 +19,7 @@
       <div class="detail">
         <div class="toot-header">
           <div class="user">
-            {{ message.status.account.display_name }}
+            {{ username(message.status.account) }}
           </div>
           <div class="timestamp">
             {{ parseDatetime(message.status.created_at) }}
@@ -40,6 +40,13 @@ export default {
   name: 'reblog',
   props: ['message'],
   methods: {
+    username (account) {
+      if (account.display_name !== '') {
+        return account.display_name
+      } else {
+        return account.username
+      }
+    },
     parseDatetime (datetime) {
       return moment(datetime).format('YYYY-MM-DD HH:mm:ss')
     }

src/renderer/components/TimelineSpace/Cards/Toot.vue

@@ -6,7 +6,7 @@
     <div class="detail">
       <div class="toot-header">
         <div class="user">
-          {{ originalMessage(message).account.display_name }}
+          {{ username(originalMessage(message).account) }}
         </div>
         <div class="timestamp">
           {{ parseDatetime(message.created_at) }}
@@ -24,7 +24,7 @@
           <img :src="message.account.avatar" />
         </span>
         <span class="reblogger-name">
-          {{ message.account.display_name }}
+          {{ username(message.account) }}
         </span>
       </div>
       <div class="tool-box">
@@ -59,6 +59,13 @@ export default {
         return message
       }
     },
+    username (account) {
+      if (account.display_name !== '') {
+        return account.display_name
+      } else {
+        return account.username
+      }
+    },
     parseDatetime (datetime) {
       return moment(datetime).format('YYYY-MM-DD HH:mm:ss')
     },

src/renderer/store/TimelineSpace.js

@@ -214,11 +214,11 @@ function buildNotification (notification) {
   switch (notification.type) {
     case 'favourite':
       return new Notification('Favourite', {
-        body: `${notification.account.display_name} favourited your status`
+        body: `${username(notification.account)} favourited your status`
       })
     case 'follow':
       return new Notification('Follow', {
-        body: `${notification.account.display_name} is now following you`
+        body: `${username(notification.account)} is now following you`
       })
     case 'mention':
       return new Notification(`${notification.status.account.display_name}`, {
@@ -226,7 +226,15 @@ function buildNotification (notification) {
       })
     case 'reblog':
       return new Notification('Reblog', {
-        body: `${notification.account.display_name} boosted your status`
+        body: `${username(notification.account)} boosted your status`
       })
   }
 }
+
+function username (account) {
+  if (account.display_name !== '') {
+    return account.display_name
+  } else {
+    return account.username
+  }
+}