feat(settings): add bot option for profile appearance

components/account/AccountBotIndicator.vue

@@ -8,8 +8,9 @@ defineProps<{
   <div
     flex="~ gap1" items-center
     :class="{ 'border border-base rounded-md px-1': showLabel }"
-    text-secondary-light text-xs
+    text-secondary-light
   >
+    <slot name="prepend" />
     <CommonTooltip :content="$t('account.bot')" :disabled="showLabel">
       <div i-ri:robot-line />
     </CommonTooltip>

components/account/AccountInfo.vue

@@ -23,7 +23,7 @@ defineOptions({
     <div flex="~ col" shrink pt-1 h-full overflow-hidden justify-center leading-none>
       <div flex="~" gap-2>
         <AccountDisplayName :account="account" font-bold line-clamp-1 ws-pre-wrap break-all text-lg />
-        <AccountBotIndicator v-if="account.bot" />
+        <AccountBotIndicator v-if="account.bot" text-xs />
       </div>
       <AccountHandle :account="account" text-secondary-light />
     </div>

components/search/SearchAccountInfo.vue

@@ -12,7 +12,7 @@ defineProps<{
     <div flex="~ col gap1" shrink h-full overflow-hidden leading-none>
       <div flex="~" gap-2>
         <AccountDisplayName :account="account" line-clamp-1 ws-pre-wrap break-all text-base />
-        <AccountBotIndicator v-if="account.bot" />
+        <AccountBotIndicator v-if="account.bot" text-xs />
       </div>
       <AccountHandle text-sm :account="account" text-secondary-light />
     </div>

pages/settings/profile/appearance.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import type { mastodon } from 'masto'
+import { satisfies } from 'semver'
 import { useForm } from 'slimeform'
 import { parse } from 'ultrahtml'
 
@@ -41,9 +42,10 @@ const { form, reset, submitter, dirtyFields, isError } = useForm({
 
       fieldsAttributes,
 
+      bot: account?.bot ?? false,
+
       // These look more like account and privacy settings than appearance settings
       // discoverable: false,
-      // bot: false,
       // locked: false,
     }
   },
@@ -114,10 +116,19 @@ onReactivated(refreshInfo)
         <CommonCropImage v-model="form.avatar" />
 
         <div px4>
-          <AccountDisplayName
-            :account="{ ...account, displayName: form.displayName }"
-            font-bold sm:text-2xl text-xl
-          />
+          <div flex justify-between>
+            <AccountDisplayName
+              :account="{ ...account, displayName: form.displayName }"
+              font-bold sm:text-2xl text-xl
+            />
+            <label>
+              <AccountBotIndicator show-label px2 py1>
+                <template #prepend>
+                  <input v-model="form.bot" type="checkbox">
+                </template>
+              </AccountBotIndicator>
+            </label>
+          </div>
           <AccountHandle :account="account" />
         </div>
       </div>