feat: add locked for account

components/account/AccountHeader.vue

@@ -165,8 +165,9 @@ const personalNoteMaxLength = 2000
           </div>
         </div>
         <div flex="~ col gap1" pt2>
-          <div flex justify-between>
+          <div flex gap2 items-center>
             <AccountDisplayName :account="account" font-bold sm:text-2xl text-xl />
+            <AccountLockIndicator v-if="account.locked" show-label />
             <AccountBotIndicator v-if="account.bot" show-label />
           </div>
           <AccountHandle :account="account" overflow-unset line-clamp-unset />

components/account/AccountInfo.vue

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

components/account/AccountLockIndicator.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+defineProps<{
+  showLabel?: boolean
+}>()
+</script>
+
+<template>
+  <div
+    flex="~ gap1" items-center
+    :class="{ 'border border-base rounded-md px-1': showLabel }"
+    text-secondary-light
+  >
+    <slot name="prepend" />
+    <CommonTooltip no-auto-focus content="Lock" :disabled="showLabel">
+      <div i-ri:lock-line />
+    </CommonTooltip>
+    <div v-if="showLabel">
+      Lock
+    </div>
+  </div>
+</template>