Merge remote-tracking branch 'upstream/develop' into emoji-selector-update

* upstream/develop: (469 commits)
  Feature/add sticker picker
  guard more secure routes
  guard secure routes by redirecting to root
  closest can returns itself as well
  find inside status-content div only
  try to use the closest a tag as target
  Update es.json
  Also apply keyword filter to subjects
  Remove files I accidentally pushed in
  fix issues caused by merges in usersearch on @
  Add user search at
  fix eslint warnings
  remove vue-popperjs
  fix moderation menu partially hidden by usercard boundary
  migrate popper css
  rewrite ModerationTools using v-tooltip
  make popover position for status action dropdow relative to parent node
  rewrite ExtraButtons using v-tooltip
  install v-tooltip
  i18n/Update pedantic Japanese translation
  ...

1 files changed, 101 insertions, 46 deletions

diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue
index d449eb85..4ea0a869 100644
--- a/src/components/user_profile/user_profile.vue
+++ b/src/components/user_profile/user_profile.vue
@@ -1,55 +1,110 @@
 <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="userId"
+  <div>
+    <div
+      v-if="user"
+      class="user-profile panel panel-default"
+    >
+      <UserCard
+        :user="user"
+        :switcher="true"
+        :selected="timeline.viewing"
+        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
+        ref="tabSwitcher"
+        :render-only-focused="true"
+      >
+        <div :label="$t('user_card.statuses')">
+          <div class="timeline">
+            <template v-for="statusId in user.pinnedStatuseIds">
+              <Conversation
+                v-if="timeline.statusesObject[statusId]"
+                :key="statusId"
+                class="status-fadein"
+                :statusoid="timeline.statusesObject[statusId]"
+                :collapsable="true"
+                :show-pinned="true"
+              />
+            </template>
+          </div>
+          <Timeline
+            :count="user.statuses_count"
+            :embedded="true"
+            :title="$t('user_profile.timeline_title')"
+            :timeline="timeline"
+            :timeline-name="'user'"
+            :user-id="userId"
+          />
+        </div>
+        <div
+          v-if="followsTabVisible"
+          :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"
+          :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
+          :label="$t('user_card.media')"
+          :disabled="!media.visibleStatuses.length"
+          :embedded="true"
+          :title="$t('user_card.media')"
+          timeline-name="media"
+          :timeline="media"
+          :user-id="userId"
+        />
+        <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>
       </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="userId"
-      />
-      <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>