add label for bots (#479)

fixes #463

routes/_components/Label.html

@@ -0,0 +1,27 @@
+<div class="generic-label {className || ''}">
+  <span class="generic-label-span">
+    {label}
+  </span>
+</div>
+<style>
+  .generic-label {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .generic-label-span {
+    text-transform: uppercase;
+    padding: 3px 7px 2px;
+    background: var(--nav-bg);
+    color: var(--nav-text-color);
+    font-size: 0.8em;
+    border-radius: 4px;
+  }
+</style>
+<script>
+  export default {
+    data: () => ({
+      className: void 0
+    })
+  }
+</script>

routes/_components/profile/AccountProfile.html

@@ -24,11 +24,11 @@
 
   .account-profile-grid {
     display: grid;
-    grid-template-areas: "avatar     name        followed-by   follow"
+    grid-template-areas: "avatar     name        label     followed-by   follow"
-                         "avatar     username    username      follow"
+                         "avatar     username    username  username      follow"
-                         "avatar     note        note          follow"
+                         "avatar     note        note      note          follow"
-                         "details    details     details       details";
+                         "details    details     details   details       details";
-    grid-template-columns: min-content auto 1fr min-content;
+    grid-template-columns: min-content auto 1fr 1fr min-content;
     grid-column-gap: 10px;
     grid-row-gap: 5px;
     padding: 20px;
@@ -53,6 +53,7 @@
     .account-profile-grid {
       display: grid;
       grid-template-areas: "avatar     name          follow"
+                           "avatar     label         follow"
                            "avatar     username      follow"
                            "avatar     followed-by   follow"
                            "note       note          note"

routes/_components/profile/AccountProfileHeader.html

@@ -2,14 +2,18 @@
   <Avatar {account} size="big" />
 </div>
 <div class="account-profile-name">
-  <ExternalLink href={account.url}
+  <ExternalLink
+    className="account-profile-name-link"
+    href={account.url}
     showIcon="true"
     normalIconColor="true"
-                ariaLabel="{accessibleName} (opens in new window)"
+    ariaLabel="{accessibleName} (opens in new window)">
-  >
     <AccountDisplayName {account} />
   </ExternalLink>
 </div>
+{#if label}
+  <Label {label} className="account-profile-label" />
+{/if}
 <div class="account-profile-username">
   {'@' + account.acct}
 </div>
@@ -56,15 +60,22 @@
     text-overflow: ellipsis;
     min-width: 0;
   }
-  :global(.account-profile-name a) {
+
+  :global(.account-profile-name-link) {
     color: var(--body-text-color);
     text-decoration: none;
   }
-  :global(.account-profile-name a:hover) {
+
+  :global(.account-profile-name-link:hover) {
     color: var(--body-text-color);
     text-decoration: underline;
   }
 
+  :global(.account-profile-label) {
+    grid-area: label;
+    justify-content: left !important;
+  }
+
   @media (max-width: 767px) {
     .account-profile-name {
       font-size: 1.3em;
@@ -83,6 +94,7 @@
   import AccountDisplayName from '../profile/AccountDisplayName.html'
   import { removeEmoji } from '../../_utils/removeEmoji'
   import { store } from '../../_store/store'
+  import Label from '../Label.html'
 
   export default {
     store: () => store,
@@ -94,12 +106,15 @@
           return removeEmoji(displayName, emojis) || displayName
         }
         return displayName
-      }
+      },
+      bot: ({ account }) => !!account.bot,
+      label: ({ bot }) => bot ? 'bot' : ''
     },
     components: {
       Avatar,
       ExternalLink,
-      AccountDisplayName
+      AccountDisplayName,
+      Label
     }
   }
 </script>