Implement join button on Group profile, a start

webapp/pages/group/_id/_slug.vue

@@ -7,7 +7,11 @@
           :class="{ 'disabled-content': group.disabled }"
           style="position: relative; height: auto; overflow: visible"
         >
-          <avatar-uploader v-if="isGroupOwner" :profile="group" :updateMutation="updateGroupMutation">
+          <avatar-uploader
+            v-if="isGroupOwner"
+            :profile="group"
+            :updateMutation="updateGroupMutation"
+          >
             <profile-avatar :profile="group" class="profile-page-avatar" size="large" />
           </avatar-uploader>
           <profile-avatar v-else :profile="group" class="profile-page-avatar" size="large" />
@@ -41,9 +45,6 @@
               {{ $t('profile.groupSince') }} {{ group.createdAt | date('MMMM yyyy') }}
             </ds-text>
           </ds-space>
-          <!-- Wolle: <ds-space v-if="user.badges && user.badges.length" margin="x-small">
-            <hc-badges :badges="user.badges" />
-          </ds-space> -->
           <ds-flex>
             <ds-flex-item>
               <!-- Wolle: <client-only>
@@ -64,13 +65,20 @@
               </client-only> -->
             </ds-flex-item>
           </ds-flex>
-          <!-- Wolle: <div v-if="!isGroupMember" class="action-buttons">
-            <base-button v-if="user.isBlocked" @click="unblockUser(user)">
+          <div v-if="!isGroupMember" class="action-buttons">
+            <!-- Wolle: <base-button v-if="user.isBlocked" @click="unblockUser(user)">
               {{ $t('settings.blocked-users.unblock') }}
             </base-button>
             <base-button v-if="user.isMuted" @click="unmuteUser(user)">
               {{ $t('settings.muted-users.unmute') }}
             </base-button>
+            <hc-follow-button
+              v-if="!user.isMuted && !user.isBlocked"
+              :follow-id="user.id"
+              :is-followed="user.followedByCurrentUser"
+              @optimistic="optimisticFollow"
+              @update="updateFollow"
+            /> -->
             <hc-follow-button
               v-if="!user.isMuted && !user.isBlocked"
               :follow-id="user.id"
@@ -78,7 +86,20 @@
               @optimistic="optimisticFollow"
               @update="updateFollow"
             />
-          </div> -->
+            <base-button
+              class="track-button"
+              :disabled="disabled || !followId"
+              :loading="loading"
+              :icon="icon"
+              :filled="isFollowed && !hovered"
+              :danger="isFollowed && hovered"
+              @mouseenter.native="onHover"
+              @mouseleave.native="hovered = false"
+              @click.prevent="toggle"
+            >
+              {{ label }}
+            </base-button>
+          </div>
           <template v-if="group.about">
             <hr />
             <ds-space margin-top="small" margin-bottom="small">