1 files changed, 99 insertions, 46 deletions
diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue
index 7d4a8b1f..14082e83 100644
--- a/src/components/user_profile/user_profile.vue
+++ b/src/components/user_profile/user_profile.vue
@@ -1,55 +1,108 @@
 <template>
-<div>
-  <div v-if="user.id" class="user-profile panel panel-default">
-    <UserCard :user="user" :switcher="true" :selected="timeline.viewing" rounded="top"/>
-    <tab-switcher :renderOnlyFocused="true" ref="tabSwitcher">
-      <Timeline
-        :label="$t('user_card.statuses')"
-        :disabled="!user.statuses_count"
-        :count="user.statuses_count"
-        :embedded="true"
-        :title="$t('user_profile.timeline_title')"
-        :timeline="timeline"
-        :timeline-name="'user'"
-        :user-id="fetchBy"
+  <div>
+    <div
+      v-if="user"
+      class="user-profile panel panel-default"
+    >
+      <UserCard
+        :user="user"
+        :switcher="true"
+        :selected="timeline.viewing"
+        :allow-zooming-avatar="true"
+        rounded="top"
       />
-      <div :label="$t('user_card.followees')" v-if="followsTabVisible" :disabled="!user.friends_count">
-        <FriendList :userId="userId" />
-      </div>
-      <div :label="$t('user_card.followers')" v-if="followersTabVisible" :disabled="!user.followers_count">
-        <FollowerList :userId="userId" :entryProps="{noFollowsYou: isUs}" />
+      <tab-switcher
+        :active-tab="tab"
+        :render-only-focused="true"
+        :on-switch="onTabSwitch"
+      >
+        <Timeline
+          key="statuses"
+          :label="$t('user_card.statuses')"
+          :count="user.statuses_count"
+          :embedded="true"
+          :title="$t('user_profile.timeline_title')"
+          :timeline="timeline"
+          timeline-name="user"
+          :user-id="userId"
+          :pinned-status-ids="user.pinnedStatusIds"
+          :in-profile="true"
+        />
+        <div
+          v-if="followsTabVisible"
+          key="followees"
+          :label="$t('user_card.followees')"
+          :disabled="!user.friends_count"
+        >
+          <FriendList :user-id="userId">
+            <template
+              slot="item"
+              slot-scope="{item}"
+            >
+              <FollowCard :user="item" />
+            </template>
+          </FriendList>
+        </div>
+        <div
+          v-if="followersTabVisible"
+          key="followers"
+          :label="$t('user_card.followers')"
+          :disabled="!user.followers_count"
+        >
+          <FollowerList :user-id="userId">
+            <template
+              slot="item"
+              slot-scope="{item}"
+            >
+              <FollowCard
+                :user="item"
+                :no-follows-you="isUs"
+              />
+            </template>
+          </FollowerList>
+        </div>
+        <Timeline
+          key="media"
+          :label="$t('user_card.media')"
+          :disabled="!media.visibleStatuses.length"
+          :embedded="true"
+          :title="$t('user_card.media')"
+          timeline-name="media"
+          :timeline="media"
+          :user-id="userId"
+          :in-profile="true"
+        />
+        <Timeline
+          v-if="isUs"
+          key="favorites"
+          :label="$t('user_card.favorites')"
+          :disabled="!favorites.visibleStatuses.length"
+          :embedded="true"
+          :title="$t('user_card.favorites')"
+          timeline-name="favorites"
+          :timeline="favorites"
+          :in-profile="true"
+        />
+      </tab-switcher>
+    </div>
+    <div
+      v-else
+      class="panel user-profile-placeholder"
+    >
+      <div class="panel-heading">
+        <div class="title">
+          {{ $t('settings.profile_tab') }}
+        </div>
       </div>
-      <Timeline
-        :label="$t('user_card.media')"
-        :disabled="!media.visibleStatuses.length"
-        :embedded="true" :title="$t('user_card.media')"
-        timeline-name="media"
-        :timeline="media"
-        :user-id="fetchBy"
-      />
-      <Timeline
-        v-if="isUs"
-        :label="$t('user_card.favorites')"
-        :disabled="!favorites.visibleStatuses.length"
-        :embedded="true"
-        :title="$t('user_card.favorites')"
-        timeline-name="favorites"
-        :timeline="favorites"
-      />
-    </tab-switcher>
-  </div>
-  <div v-else class="panel user-profile-placeholder">
-    <div class="panel-heading">
-      <div class="title">
-        {{ $t('settings.profile_tab') }}
+      <div class="panel-body">
+        <span v-if="error">{{ error }}</span>
+        <i
+          v-else
+          class="icon-spin3 animate-spin"
+        />
       </div>
     </div>
-    <div class="panel-body">
-      <span v-if="error">{{ error }}</span>
-      <i class="icon-spin3 animate-spin" v-else></i>
-    </div>
   </div>
-</div>
 </template>
 
 <script src="./user_profile.js"></script>