From bbc1580010aa50fc9beb1b391f752019a44dada3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90?= <sxzz@sxzz.moe>
Date: Sat, 7 Jan 2023 21:53:09 +0800
Subject: [PATCH] refactor: add bot indicator icon

---
 components/account/AccountBotIndicator.vue | 19 +++++++++++++++++--
 components/account/AccountHeader.vue       |  2 +-
 2 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/components/account/AccountBotIndicator.vue b/components/account/AccountBotIndicator.vue
index 86a0e729..1a4cfa68 100644
--- a/components/account/AccountBotIndicator.vue
+++ b/components/account/AccountBotIndicator.vue
@@ -1,5 +1,20 @@
+<script setup lang="ts">
+defineProps<{
+  showLabel?: boolean
+}>()
+</script>
+
 <template>
-  <div flex="~" items-center border="~ base" text-secondary-light rounded-md px-1 text-xs my-auto>
-    {{ $t('account.bot') }}
+  <div
+    flex="~ gap1" items-center
+    :class="{ 'border border-base rounded-md px-1': showLabel }"
+    text-secondary-light text-xs
+  >
+    <CommonTooltip :content="$t('account.bot')" :disabled="showLabel">
+      <div i-ri:robot-line />
+    </CommonTooltip>
+    <div v-if="showLabel">
+      {{ $t('account.bot') }}
+    </div>
   </div>
 </template>
diff --git a/components/account/AccountHeader.vue b/components/account/AccountHeader.vue
index 870da89d..33870e7b 100644
--- a/components/account/AccountHeader.vue
+++ b/components/account/AccountHeader.vue
@@ -76,7 +76,7 @@ const isSelf = $computed(() => currentUser.value?.account.id === account.id)
           <div flex="~ col gap1">
             <div flex justify-between>
               <AccountDisplayName :account="account" font-bold sm:text-2xl text-xl />
-              <AccountBotIndicator v-if="account.bot" />
+              <AccountBotIndicator v-if="account.bot" show-label />
             </div>
             <AccountHandle :account="account" />
           </div>