From dd46b28561b0885177d83c34cad6d4eaadccb120 Mon Sep 17 00:00:00 2001
From: styppo <mail@styp-rekowsky.de>
Date: Thu, 12 Jan 2023 19:35:35 +0000
Subject: [PATCH] Add follow button to user card

---
 src/components/User/UserCard.vue | 13 +++++++++++--
 src/pages/profile/Followers.vue  |  2 ++
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/components/User/UserCard.vue b/src/components/User/UserCard.vue
index 36be9f6..1559f1f 100644
--- a/src/components/User/UserCard.vue
+++ b/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>
diff --git a/src/pages/profile/Followers.vue b/src/pages/profile/Followers.vue
index dcf4c41..bd33fe1 100644
--- a/src/pages/profile/Followers.vue
+++ b/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>