Add follow button to user card

src/components/User/UserCard.vue

@@ -1,17 +1,19 @@
 <template>
   <div class="user-card">
     <UserAvatar :pubkey="pubkey" :clickable="clickable" />
-    <UserName :pubkey="pubkey" :clickable="clickable" two-line />
+    <UserName :pubkey="pubkey" :clickable="clickable" class="username" two-line />
+    <FollowButton v-if="followButton" :pubkey="pubkey" />
   </div>
 </template>
 
 <script>
 import UserAvatar from 'components/User/UserAvatar.vue'
 import UserName from 'components/User/UserName.vue'
+import FollowButton from 'components/User/FollowButton.vue'
 
 export default {
   name: 'UserCard',
-  components: {UserName, UserAvatar},
+  components: {FollowButton, UserName, UserAvatar},
   props: {
     pubkey: {
       type: String,
@@ -20,6 +22,10 @@ export default {
     clickable: {
       type: Boolean,
       default: false,
+    },
+    followButton: {
+      type: Boolean,
+      default: false,
     }
   }
 }
@@ -32,5 +38,8 @@ export default {
   * + * {
     margin-left: 1rem;
   }
+  .username {
+    flex-grow: 1;
+  }
 }
 </style>

src/pages/profile/Followers.vue

@@ -24,6 +24,7 @@
           :key="contact.pubkey"
           :pubkey="contact.pubkey"
           clickable
+          follow-button
         />
       </q-tab-panel>
       <q-tab-panel name="followers" class="no-padding">
@@ -32,6 +33,7 @@
           :key="follower"
           :pubkey="follower"
           clickable
+          follow-button
         />
       </q-tab-panel>
     </q-tab-panels>