feat: add bot label (#392)

components/account/AccountBotIndicator.vue

@@ -0,0 +1,5 @@
+<template>
+  <div flex="~" items-center border="~" rounded-md px-2 text-xs>
+    BOT
+  </div>
+</template>

components/account/AccountHeader.vue

@@ -76,11 +76,14 @@ watchEffect(() => {
             <AccountAvatar :account="account" hover:opacity-90 transition-opacity />
           </button>
           <div flex flex-col>
-            <ContentRich
-              font-bold sm:text-2xl text-xl
-              :content="getDisplayName(account, { rich: true })"
-              :emojis="account.emojis"
-            />
+            <div flex justify-between>
+              <ContentRich
+                font-bold sm:text-2xl text-xl
+                :content="getDisplayName(account, { rich: true })"
+                :emojis="account.emojis"
+              />
+              <AccountBotIndicator v-if="account.bot" />
+            </div>
             <AccountHandle :account="account" />
           </div>
         </div>

components/account/AccountInfo.vue

@@ -20,11 +20,14 @@ defineOptions({
       <AccountAvatar :account="account" w-12 h-12 />
     </AccountHoverWrapper>
     <div flex="~ col" shrink overflow-hidden>
-      <ContentRich
-        font-bold line-clamp-1 ws-pre-wrap break-all
-        :content="getDisplayName(account, { rich: true })"
-        :emojis="account.emojis"
-      />
+      <div flex="~" gap-2>
+        <ContentRich
+          font-bold line-clamp-1 ws-pre-wrap break-all
+          :content="getDisplayName(account, { rich: true })"
+          :emojis="account.emojis"
+        />
+        <AccountBotIndicator v-if="account.bot" />
+      </div>
       <AccountHandle :account="account" text-sm text-secondary-light />
     </div>
   </component>

components/status/StatusCard.vue

@@ -85,6 +85,7 @@ const avatarOnAvatar = $(computedEager(() => useFeatureFlags().experimentalAvata
           </AccountHoverWrapper>
           <div flex-auto />
           <div v-if="!isZenMode" text-sm text-secondary flex="~ row nowrap" hover:underline>
+            <AccountBotIndicator v-if="status.account.bot" mr-2 />
             <CommonTooltip :content="createdAt">
               <a :title="status.createdAt" :href="getStatusRoute(status).href" @click.prevent="go($event)">
                 <time text-sm ws-nowrap hover:underline :datetime="status.createdAt">