Add bot indication to user icon on statuses

src/components/settings_modal/tabs/filtering_tab.vue

@@ -47,6 +47,11 @@
             {{ $t('settings.hide_post_stats') }}
           </BooleanSetting>
         </li>
+        <li>
+          <BooleanSetting path="hideBotIndication">
+            {{ $t('settings.hide_bot_indication') }}
+          </BooleanSetting>
+        </li>
         <ChoiceSetting
           id="replyVisibility"
           path="replyVisibility"

src/components/status/status.js

@@ -169,6 +169,9 @@ const Status = {
     botStatus () {
       return this.status.user.bot
     },
+    botIndicator () {
+      return this.botStatus && !this.hideBotIndication
+    },
     mentionsLine () {
       if (!this.headTailLinks) return []
       const writtenSet = new Set(this.headTailLinks.writtenMentions.map(_ => _.url))
@@ -301,6 +304,9 @@ const Status = {
     muteBotStatuses () {
       return this.mergedConfig.muteBotStatuses
     },
+    hideBotIndication () {
+      return this.mergedConfig.hideBotIndication
+    },
     currentUser () {
       return this.$store.state.users.currentUser
     },

src/components/status/status.vue

@@ -77,6 +77,7 @@
         <UserAvatar
           v-if="retweet"
           class="left-side repeater-avatar"
+          :bot="botIndicator"
           :better-shadow="betterShadow"
           :user="statusoid.user"
         />
@@ -124,6 +125,7 @@
             @click.stop.prevent.capture.native="toggleUserExpanded"
           >
             <UserAvatar
+              :bot="botIndicator"
               :compact="compact"
               :better-shadow="betterShadow"
               :user="status.user"
@@ -407,7 +409,10 @@
         class="gravestone"
       >
         <div class="left-side">
-          <UserAvatar :compact="compact" />
+          <UserAvatar
+            :compact="compact"
+            :bot="botIndicator"
+          />
         </div>
         <div class="right-side">
           <div class="deleted-text">

src/components/still-image/still-image.vue

@@ -19,6 +19,7 @@
       @load="onLoad"
       @error="onError"
     >
+    <slot/>
   </div>
 </template>
 

src/components/user_avatar/user_avatar.js

@@ -1,10 +1,21 @@
 import StillImage from '../still-image/still-image.vue'
 
+import { library } from '@fortawesome/fontawesome-svg-core'
+
+import {
+  faRobot
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faRobot
+)
+
 const UserAvatar = {
   props: [
     'user',
     'betterShadow',
-    'compact'
+    'compact',
+    'bot'
   ],
   data () {
     return {

src/components/user_avatar/user_avatar.vue

@@ -7,7 +7,9 @@
     :src="imgSrc(user.profile_image_url_original)"
     :class="{ 'avatar-compact': compact, 'better-shadow': betterShadow }"
     :image-load-error="imageLoadError"
-  />
+  >
+    <FAIcon v-if="bot" icon="robot" class="bot-indicator" />
+  </StillImage>
   <div
     v-else
     class="Avatar -placeholder"
@@ -36,6 +38,12 @@
     height: 100%;
   }
 
+  & > .bot-indicator {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+  }
+
   &.better-shadow {
     box-shadow: var(--_avatarShadowInset);
     filter: var(--_avatarShadowFilter);