Show lock icon on follow button if the user manually approves followers

src/api/users.ts

@@ -31,6 +31,7 @@ export interface Profile {
   note: string | null;
   avatar: string | null;
   header: string | null;
+  locked: boolean;
   identity_proofs: ProfileField[];
   payment_options: ProfilePaymentOption[];
   fields: ProfileField[];
@@ -41,7 +42,7 @@ export interface Profile {
   statuses_count: number;
 }
 
-export function guest() {
+export function guest(): Profile {
   return {
     id: "",
     username: "",
@@ -51,6 +52,7 @@ export function guest() {
     note: null,
     avatar: null,
     header: null,
+    locked: false,
     identity_proofs: [],
     payment_options: [],
     fields: [],

src/assets/feather/lock.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-lock"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>

src/assets/forkawesome/lock.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="1536" height="1536" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="m488.73 698.18h558.55v-209.45c0-153.82-125.45-279.27-279.27-279.27s-279.27 125.45-279.27 279.27zm907.64 104.73v628.36c0 57.818-46.909 104.73-104.73 104.73h-1047.3c-57.818 0-104.73-46.909-104.73-104.73v-628.36c0-57.818 46.909-104.73 104.73-104.73h34.909v-209.45c0-268.36 220.36-488.73 488.73-488.73 268.36 0 488.73 220.36 488.73 488.73v209.45h34.909c57.818 0 104.73 46.909 104.73 104.73z" stroke-width="1.0909"/></svg>

src/components/Post.vue

@@ -621,7 +621,7 @@ async function onMintToken() {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
-  gap: 0.25em;
+  gap: $whitespace;
   padding: calc($block-inner-padding / 4) $block-inner-padding 0;
 
   a {

src/styles/_layout.scss

@@ -16,6 +16,7 @@ $wide-sidebar-width: 400px;
 
 $avatar-size: 42px;
 $icon-size: $block-inner-padding;
+$whitespace: 0.25em;
 
 $screen-breakpoint-medium: 1000px;
 $screen-breakpoint-small: 700px;

src/styles/_mixins.scss

@@ -48,7 +48,7 @@
   }
 
   a {
-    margin-right: 0.25em;  /* single space */
+    margin-right: $whitespace;
   }
 }
 
@@ -57,7 +57,7 @@
     align-items: center;
     color: $secondary-text-color;
     display: flex;
-    gap: 0.25em;
+    gap: $whitespace;
 
     img {
       filter: $secondary-text-colorizer;

src/views/Profile.vue

@@ -104,7 +104,14 @@
             >
               Edit profile
             </router-link>
-            <button v-if="canFollow()" class="follow btn" @click="onFollow()">Follow</button>
+            <button v-if="canFollow()" class="follow btn" @click="onFollow()">
+              <span>Follow</span>
+              <img
+                v-if="profile.locked"
+                title="Manually approves followers"
+                :src="require('@/assets/forkawesome/lock.svg')"
+              >
+            </button>
             <button v-if="canUnfollow()" class="unfollow btn" @click="onUnfollow()">
               <template v-if="isFollowRequestPending()">Cancel follow request</template>
               <template v-else>Unfollow</template>
@@ -683,6 +690,27 @@ $avatar-size: 170px;
   }
 }
 
+.follow {
+  align-items: center;
+  display: flex;
+  gap: $input-padding;
+
+  img {
+    $icon-size: 1em;
+
+    filter: $btn-text-colorizer;
+    height: $icon-size;
+    min-width: $icon-size;
+    width: $icon-size;
+  }
+
+  &:hover {
+    img {
+      filter: $text-colorizer;
+    }
+  }
+}
+
 .bio {
   padding: 0 $block-inner-padding $block-inner-padding;
   white-space: pre-line;