From d5856b83c651ba3e336b2b023f2f1aa52d6b5d25 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90=20Kevin=20Deng?=
 <sxzz@sxzz.moe>
Date: Mon, 3 Jul 2023 01:55:18 +0800
Subject: [PATCH] feat: add locked for account

---
 components/account/AccountHeader.vue        |  3 ++-
 components/account/AccountInfo.vue          |  1 +
 components/account/AccountLockIndicator.vue | 21 ++++++++++++++++++
 components/search/SearchAccountInfo.vue     |  3 +++
 components/status/StatusCard.vue            |  1 +
 pages/settings/profile/appearance.vue       | 24 +++++++++++++++------
 6 files changed, 45 insertions(+), 8 deletions(-)
 create mode 100644 components/account/AccountLockIndicator.vue

diff --git a/components/account/AccountHeader.vue b/components/account/AccountHeader.vue
index f8922fd6..760dfc0e 100644
--- a/components/account/AccountHeader.vue
+++ b/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 />
diff --git a/components/account/AccountInfo.vue b/components/account/AccountInfo.vue
index 0e345705..cf69b579 100644
--- a/components/account/AccountInfo.vue
+++ b/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 />
diff --git a/components/account/AccountLockIndicator.vue b/components/account/AccountLockIndicator.vue
new file mode 100644
index 00000000..7384be53
--- /dev/null
+++ b/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>
diff --git a/components/search/SearchAccountInfo.vue b/components/search/SearchAccountInfo.vue
index eb6846d3..419ff8a3 100644
--- a/components/search/SearchAccountInfo.vue
+++ b/components/search/SearchAccountInfo.vue
@@ -6,12 +6,15 @@ defineProps<{
 }>()
 </script>
 
+<!-- TODO: reuse AccountInfo.vue -->
+
 <template>
   <div flex gap-2 items-center>
     <AccountAvatar w-10 h-10 :account="account" shrink-0 />
     <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 />
+        <AccountLockIndicator v-if="account.bot" text-xs />
         <AccountBotIndicator v-if="account.bot" text-xs />
       </div>
       <AccountHandle text-sm :account="account" text-secondary-light />
diff --git a/components/status/StatusCard.vue b/components/status/StatusCard.vue
index 34127c43..085c4241 100644
--- a/components/status/StatusCard.vue
+++ b/components/status/StatusCard.vue
@@ -155,6 +155,7 @@ const forceShow = ref(false)
             </AccountHoverWrapper>
             <div flex-auto />
             <div v-show="!getPreferences(userSettings, 'zenMode')" text-sm text-secondary flex="~ row nowrap" hover:underline whitespace-nowrap>
+              <AccountLockIndicator v-if="status.account.bot" me-2 />
               <AccountBotIndicator v-if="status.account.bot" me-2 />
               <div flex="~ gap1" items-center>
                 <StatusVisibilityIndicator v-if="status.visibility !== 'public'" :status="status" />
diff --git a/pages/settings/profile/appearance.vue b/pages/settings/profile/appearance.vue
index 95cd3cb9..09a33726 100644
--- a/pages/settings/profile/appearance.vue
+++ b/pages/settings/profile/appearance.vue
@@ -47,6 +47,7 @@ const { form, reset, submitter, isDirty, isError } = useForm({
       fieldsAttributes,
 
       bot: account?.bot ?? false,
+      locked: account?.locked ?? false,
 
       // These look more like account and privacy settings than appearance settings
       // discoverable: false,
@@ -143,13 +144,22 @@ onReactivated(refreshInfo)
               :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" cursor-pointer>
-                </template>
-              </AccountBotIndicator>
-            </label>
+            <div flex="~ row" items-center gap2>
+              <label>
+                <AccountLockIndicator show-label px2 py1>
+                  <template #prepend>
+                    <input v-model="form.locked" type="checkbox" cursor-pointer>
+                  </template>
+                </AccountLockIndicator>
+              </label>
+              <label>
+                <AccountBotIndicator show-label px2 py1>
+                  <template #prepend>
+                    <input v-model="form.bot" type="checkbox" cursor-pointer>
+                  </template>
+                </AccountBotIndicator>
+              </label>
+            </div>
           </div>
           <AccountHandle :account="account" />
         </div>