From a26cedbdd40141603d36d67385c4be0874f2a3d8 Mon Sep 17 00:00:00 2001
From: Shinigami <chrissi92@hotmail.de>
Date: Sun, 11 Dec 2022 16:43:23 +0100
Subject: [PATCH] feat: add bot label (#392)

---
 components/account/AccountBotIndicator.vue |  5 +++++
 components/account/AccountHeader.vue       | 13 ++++++++-----
 components/account/AccountInfo.vue         | 13 ++++++++-----
 components/status/StatusCard.vue           |  1 +
 4 files changed, 22 insertions(+), 10 deletions(-)
 create mode 100644 components/account/AccountBotIndicator.vue

diff --git a/components/account/AccountBotIndicator.vue b/components/account/AccountBotIndicator.vue
new file mode 100644
index 00000000..9f9c6aee
--- /dev/null
+++ b/components/account/AccountBotIndicator.vue
@@ -0,0 +1,5 @@
+<template>
+  <div flex="~" items-center border="~" rounded-md px-2 text-xs>
+    BOT
+  </div>
+</template>
diff --git a/components/account/AccountHeader.vue b/components/account/AccountHeader.vue
index 776b21cf..68e054b0 100644
--- a/components/account/AccountHeader.vue
+++ b/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>
diff --git a/components/account/AccountInfo.vue b/components/account/AccountInfo.vue
index 1b9f9679..7ed0e444 100644
--- a/components/account/AccountInfo.vue
+++ b/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>
diff --git a/components/status/StatusCard.vue b/components/status/StatusCard.vue
index 516d1282..1a9c011f 100644
--- a/components/status/StatusCard.vue
+++ b/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">