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

* upstream/develop: (116 commits)
  Password reset page
  add a comment
  force img updating immediately
  Fixed "sequimiento" to "seguimiento".
  Replace `/api/externalprofile/show.json` with a MastoAPI equialent
  Use mastodon api in follow requests
  "Optional" in lowercase.
  Update es.json
  fix pin/unpin status logic
  rename a mutation
  update
  fix user avatar fallback logic
  remove dead code
  Corrected "Media Proxy" translation.
  Update es.json
  make bio textarea resizable vertically only
  remove dead code
  Make image orientation consistent on FF, fix videos w/ modal
  remove dead code
  fix crazy watch logic in conversation
  ...

39 files changed, 455 insertions, 136 deletions

diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue
index ec326c45..af16e302 100644
--- a/src/components/attachment/attachment.vue
+++ b/src/components/attachment/attachment.vue
@@ -190,6 +190,7 @@
 
   .video {
     width: 100%;
+    height: 100%;
   }
 
   .play-icon {
@@ -286,7 +287,7 @@
     }
 
     img {
-      image-orientation: from-image;
+      image-orientation: from-image; // NOTE: only FF supports this
     }
   }
 }
diff --git a/src/components/basic_user_card/basic_user_card.vue b/src/components/basic_user_card/basic_user_card.vue
index 568e9359..8a02174e 100644
--- a/src/components/basic_user_card/basic_user_card.vue
+++ b/src/components/basic_user_card/basic_user_card.vue
@@ -87,6 +87,7 @@
   &-expanded-content {
     flex: 1;
     margin-left: 0.7em;
+    min-width: 0;
   }
 }
 </style>
diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js
index a2b3aeab..49fa8612 100644
--- a/src/components/conversation/conversation.js
+++ b/src/components/conversation/conversation.js
@@ -42,7 +42,7 @@ const conversation = {
     'statusoid',
     'collapsable',
     'isPage',
-    'showPinned'
+    'pinnedStatusIdsObject'
   ],
   created () {
     if (this.isPage) {
@@ -110,7 +110,7 @@ const conversation = {
     Status
   },
   watch: {
-    '$route': 'fetchConversation',
+    status: 'fetchConversation',
     expanded (value) {
       if (value) {
         this.fetchConversation()
@@ -149,9 +149,6 @@ const conversation = {
     },
     toggleExpanded () {
       this.expanded = !this.expanded
-      if (!this.expanded) {
-        this.setHighlight(null)
-      }
     }
   }
 }
diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
index 5a900607..f184c071 100644
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@@ -21,7 +21,7 @@
       :inline-expanded="collapsable && isExpanded"
       :statusoid="status"
       :expandable="!isExpanded"
-      :show-pinned="showPinned"
+      :show-pinned="pinnedStatusIdsObject && pinnedStatusIdsObject[status.id]"
       :focused="focused(status.id)"
       :in-conversation="isExpanded"
       :highlight="getHighlight()"
diff --git a/src/components/extra_buttons/extra_buttons.js b/src/components/extra_buttons/extra_buttons.js
index 2ec72729..5ac73e97 100644
--- a/src/components/extra_buttons/extra_buttons.js
+++ b/src/components/extra_buttons/extra_buttons.js
@@ -16,6 +16,16 @@ const ExtraButtons = {
       this.$store.dispatch('unpinStatus', this.status.id)
         .then(() => this.$emit('onSuccess'))
         .catch(err => this.$emit('onError', err.error.error))
+    },
+    muteConversation () {
+      this.$store.dispatch('muteConversation', this.status.id)
+        .then(() => this.$emit('onSuccess'))
+        .catch(err => this.$emit('onError', err.error.error))
+    },
+    unmuteConversation () {
+      this.$store.dispatch('unmuteConversation', this.status.id)
+        .then(() => this.$emit('onSuccess'))
+        .catch(err => this.$emit('onError', err.error.error))
     }
   },
   computed: {
@@ -31,8 +41,8 @@ const ExtraButtons = {
     canPin () {
       return this.ownStatus && (this.status.visibility === 'public' || this.status.visibility === 'unlisted')
     },
-    enabled () {
-      return this.canPin || this.canDelete
+    canMute () {
+      return !!this.currentUser
     }
   }
 }
diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue
index cdad1666..ed0f3aa4 100644
--- a/src/components/extra_buttons/extra_buttons.vue
+++ b/src/components/extra_buttons/extra_buttons.vue
@@ -1,6 +1,6 @@
 <template>
   <v-popover
-    v-if="enabled"
+    v-if="canDelete || canMute || canPin"
     trigger="click"
     placement="top"
     class="extra-button-popover"
@@ -10,6 +10,20 @@
     <div slot="popover">
       <div class="dropdown-menu">
         <button
+          v-if="canMute && !status.muted"
+          class="dropdown-item dropdown-item-icon"
+          @click.prevent="muteConversation"
+        >
+          <i class="icon-eye-off" /><span>{{ $t("status.mute_conversation") }}</span>
+        </button>
+        <button
+          v-if="canMute && status.muted"
+          class="dropdown-item dropdown-item-icon"
+          @click.prevent="unmuteConversation"
+        >
+          <i class="icon-eye-off" /><span>{{ $t("status.unmute_conversation") }}</span>
+        </button>
+        <button
           v-if="!status.pinned && canPin"
           v-close-popover
           class="dropdown-item dropdown-item-icon"
diff --git a/src/components/features_panel/features_panel.js b/src/components/features_panel/features_panel.js
index 5f0b7b25..5f80a079 100644
--- a/src/components/features_panel/features_panel.js
+++ b/src/components/features_panel/features_panel.js
@@ -1,8 +1,6 @@
 const FeaturesPanel = {
   computed: {
-    chat: function () {
-      return this.$store.state.instance.chatAvailable && (!this.$store.state.chatDisabled)
-    },
+    chat: function () { return this.$store.state.instance.chatAvailable },
     gopher: function () { return this.$store.state.instance.gopherAvailable },
     whoToFollow: function () { return this.$store.state.instance.suggestionsEnabled },
     mediaProxy: function () { return this.$store.state.instance.mediaProxyAvailable },
diff --git a/src/components/gallery/gallery.vue b/src/components/gallery/gallery.vue
index 6adfb76c..6169d294 100644
--- a/src/components/gallery/gallery.vue
+++ b/src/components/gallery/gallery.vue
@@ -61,13 +61,17 @@
   }
 
   &.contain-fit {
-    img, video {
+    img,
+    video,
+    canvas {
       object-fit: contain;
     }
   }
 
   &.cover-fit {
-    img, video {
+    img,
+    video,
+    canvas {
       object-fit: cover;
     }
   }
diff --git a/src/components/instance_specific_panel/instance_specific_panel.js b/src/components/instance_specific_panel/instance_specific_panel.js
index 9bb5e945..09e3d055 100644
--- a/src/components/instance_specific_panel/instance_specific_panel.js
+++ b/src/components/instance_specific_panel/instance_specific_panel.js
@@ -2,9 +2,6 @@ const InstanceSpecificPanel = {
   computed: {
     instanceSpecificPanelContent () {
       return this.$store.state.instance.instanceSpecificPanelContent
-    },
-    show () {
-      return !this.$store.state.config.hideISP
     }
   }
 }
diff --git a/src/components/instance_specific_panel/instance_specific_panel.vue b/src/components/instance_specific_panel/instance_specific_panel.vue
index a7cf6b48..7448ca06 100644
--- a/src/components/instance_specific_panel/instance_specific_panel.vue
+++ b/src/components/instance_specific_panel/instance_specific_panel.vue
@@ -1,8 +1,5 @@
 <template>
-  <div
-    v-if="show"
-    class="instance-specific-panel"
-  >
+  <div class="instance-specific-panel">
     <div class="panel panel-default">
       <div class="panel-body">
         <!-- eslint-disable vue/no-v-html -->
@@ -14,6 +11,3 @@
 </template>
 
 <script src="./instance_specific_panel.js" ></script>
-
-<style lang="scss">
-</style>
diff --git a/src/components/interactions/interactions.js b/src/components/interactions/interactions.js
index d4e3cc17..1f8a9de9 100644
--- a/src/components/interactions/interactions.js
+++ b/src/components/interactions/interactions.js
@@ -13,8 +13,8 @@ const Interactions = {
     }
   },
   methods: {
-    onModeSwitch (index, dataset) {
-      this.filterMode = tabModeDict[dataset.filter]
+    onModeSwitch (key) {
+      this.filterMode = tabModeDict[key]
     }
   },
   components: {
diff --git a/src/components/interactions/interactions.vue b/src/components/interactions/interactions.vue
index d71c99d5..08cee343 100644
--- a/src/components/interactions/interactions.vue
+++ b/src/components/interactions/interactions.vue
@@ -10,18 +10,15 @@
       :on-switch="onModeSwitch"
     >
       <span
-        data-tab-dummy
-        data-filter="mentions"
+        key="mentions"
         :label="$t('nav.mentions')"
       />
       <span
-        data-tab-dummy
-        data-filter="likes+repeats"
+        key="likes+repeats"
         :label="$t('interactions.favs_repeats')"
       />
       <span
-        data-tab-dummy
-        data-filter="follows"
+        key="follows"
         :label="$t('interactions.follows')"
       />
     </tab-switcher>
diff --git a/src/components/link-preview/link-preview.js b/src/components/link-preview/link-preview.js
index 2f6da55e..444aafbe 100644
--- a/src/components/link-preview/link-preview.js
+++ b/src/components/link-preview/link-preview.js
@@ -5,6 +5,11 @@ const LinkPreview = {
     'size',
     'nsfw'
   ],
+  data () {
+    return {
+      imageLoaded: false
+    }
+  },
   computed: {
     useImage () {
       // Currently BE shoudn't give cards if tagged NSFW, this is a bit paranoid
@@ -15,6 +20,15 @@ const LinkPreview = {
     useDescription () {
       return this.card.description && /\S/.test(this.card.description)
     }
+  },
+  created () {
+    if (this.useImage) {
+      const newImg = new Image()
+      newImg.onload = () => {
+        this.imageLoaded = true
+      }
+      newImg.src = this.card.image
+    }
   }
 }
 
diff --git a/src/components/link-preview/link-preview.vue b/src/components/link-preview/link-preview.vue
index 493774c2..69171977 100644
--- a/src/components/link-preview/link-preview.vue
+++ b/src/components/link-preview/link-preview.vue
@@ -7,7 +7,7 @@
       rel="noopener"
     >
       <div
-        v-if="useImage"
+        v-if="useImage && imageLoaded"
         class="card-image"
         :class="{ 'small-image': size === 'small' }"
       >
diff --git a/src/components/login_form/login_form.vue b/src/components/login_form/login_form.vue
index 3ec7fe0c..b4fdcefb 100644
--- a/src/components/login_form/login_form.vue
+++ b/src/components/login_form/login_form.vue
@@ -33,6 +33,11 @@
               type="password"
             >
           </div>
+          <div class="form-group">
+            <router-link :to="{name: 'password-reset'}">
+              {{ $t('password_reset.forgot_password') }}
+            </router-link>
+          </div>
         </template>
 
         <div
diff --git a/src/components/media_modal/media_modal.vue b/src/components/media_modal/media_modal.vue
index 0543e677..ab5a36a5 100644
--- a/src/components/media_modal/media_modal.vue
+++ b/src/components/media_modal/media_modal.vue
@@ -63,6 +63,7 @@
   max-width: 90%;
   max-height: 90%;
   box-shadow: 0px 5px 15px 0 rgba(0, 0, 0, 0.5);
+  image-orientation: from-image; // NOTE: only FF supports this
 }
 
 .modal-view-button-arrow {
diff --git a/src/components/mobile_nav/mobile_nav.js b/src/components/mobile_nav/mobile_nav.js
index 9b341a3b..c2bb76ee 100644
--- a/src/components/mobile_nav/mobile_nav.js
+++ b/src/components/mobile_nav/mobile_nav.js
@@ -1,14 +1,12 @@
 import SideDrawer from '../side_drawer/side_drawer.vue'
 import Notifications from '../notifications/notifications.vue'
-import MobilePostStatusModal from '../mobile_post_status_modal/mobile_post_status_modal.vue'
 import { unseenNotificationsFromStore } from '../../services/notification_utils/notification_utils'
 import GestureService from '../../services/gesture_service/gesture_service'
 
 const MobileNav = {
   components: {
     SideDrawer,
-    Notifications,
-    MobilePostStatusModal
+    Notifications
   },
   data: () => ({
     notificationsCloseGesture: undefined,
diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue
index f67b7ff8..d1c24e56 100644
--- a/src/components/mobile_nav/mobile_nav.vue
+++ b/src/components/mobile_nav/mobile_nav.vue
@@ -70,7 +70,6 @@
       ref="sideDrawer"
       :logout="logout"
     />
-    <MobilePostStatusModal />
   </div>
 </template>
 
diff --git a/src/components/mobile_post_status_modal/mobile_post_status_modal.vue b/src/components/mobile_post_status_modal/mobile_post_status_modal.vue
index 5db7584b..b6d7d3ba 100644
--- a/src/components/mobile_post_status_modal/mobile_post_status_modal.vue
+++ b/src/components/mobile_post_status_modal/mobile_post_status_modal.vue
@@ -34,14 +34,19 @@
 @import '../../_variables.scss';
 
 .post-form-modal-view {
-  max-height: 100%;
-  display: block;
+  align-items: flex-start;
 }
 
 .post-form-modal-panel {
   flex-shrink: 0;
-  margin: 25% 0 4em 0;
+  margin-top: 25%;
+  margin-bottom: 2em;
   width: 100%;
+  max-width: 700px;
+
+  @media (orientation: landscape) {
+    margin-top: 8%;
+  }
 }
 
 .new-status-button {
diff --git a/src/components/password_reset/password_reset.js b/src/components/password_reset/password_reset.js
new file mode 100644
index 00000000..fa71e07a
--- /dev/null
+++ b/src/components/password_reset/password_reset.js
@@ -0,0 +1,62 @@
+import { mapState } from 'vuex'
+import passwordResetApi from '../../services/new_api/password_reset.js'
+
+const passwordReset = {
+  data: () => ({
+    user: {
+      email: ''
+    },
+    isPending: false,
+    success: false,
+    throttled: false,
+    error: null
+  }),
+  computed: {
+    ...mapState({
+      signedIn: (state) => !!state.users.currentUser,
+      instance: state => state.instance
+    }),
+    mailerEnabled () {
+      return this.instance.mailerEnabled
+    }
+  },
+  created () {
+    if (this.signedIn) {
+      this.$router.push({ name: 'root' })
+    }
+  },
+  methods: {
+    dismissError () {
+      this.error = null
+    },
+    submit () {
+      this.isPending = true
+      const email = this.user.email
+      const instance = this.instance.server
+
+      passwordResetApi({ instance, email }).then(({ status }) => {
+        this.isPending = false
+        this.user.email = ''
+
+        if (status === 204) {
+          this.success = true
+          this.error = null
+        } else if (status === 404 || status === 400) {
+          this.error = this.$t('password_reset.not_found')
+          this.$nextTick(() => {
+            this.$refs.email.focus()
+          })
+        } else if (status === 429) {
+          this.throttled = true
+          this.error = this.$t('password_reset.too_many_requests')
+        }
+      }).catch(() => {
+        this.isPending = false
+        this.user.email = ''
+        this.error = this.$t('general.generic_error')
+      })
+    }
+  }
+}
+
+export default passwordReset
diff --git a/src/components/password_reset/password_reset.vue b/src/components/password_reset/password_reset.vue
new file mode 100644
index 00000000..00474e95
--- /dev/null
+++ b/src/components/password_reset/password_reset.vue
@@ -0,0 +1,116 @@
+<template>
+  <div class="settings panel panel-default">
+    <div class="panel-heading">
+      {{ $t('password_reset.password_reset') }}
+    </div>
+    <div class="panel-body">
+      <form
+        class="password-reset-form"
+        @submit.prevent="submit"
+      >
+        <div class="container">
+          <div v-if="!mailerEnabled">
+            <p>
+              {{ $t('password_reset.password_reset_disabled') }}
+            </p>
+          </div>
+          <div v-else-if="success || throttled">
+            <p v-if="success">
+              {{ $t('password_reset.check_email') }}
+            </p>
+            <div class="form-group text-center">
+              <router-link :to="{name: 'root'}">
+                {{ $t('password_reset.return_home') }}
+              </router-link>
+            </div>
+          </div>
+          <div v-else>
+            <p>
+              {{ $t('password_reset.instruction') }}
+            </p>
+            <div class="form-group">
+              <input
+                ref="email"
+                v-model="user.email"
+                :disabled="isPending"
+                :placeholder="$t('password_reset.placeholder')"
+                class="form-control"
+                type="input"
+              >
+            </div>
+            <div class="form-group">
+              <button
+                :disabled="isPending"
+                type="submit"
+                class="btn btn-default btn-block"
+              >
+                {{ $t('general.submit') }}
+              </button>
+            </div>
+          </div>
+          <p
+            v-if="error"
+            class="alert error notice-dismissible"
+          >
+            <span>{{ error }}</span>
+            <a
+              class="button-icon dismiss"
+              @click.prevent="dismissError()"
+            >
+              <i class="icon-cancel" />
+            </a>
+          </p>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script src="./password_reset.js"></script>
+<style lang="scss">
+@import '../../_variables.scss';
+
+.password-reset-form {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: 0.6em;
+
+  .container {
+    display: flex;
+    flex: 1 0;
+    flex-direction: column;
+    margin-top: 0.6em;
+    max-width: 18rem;
+  }
+
+  .form-group {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 1em;
+    padding: 0.3em 0.0em 0.3em;
+    line-height: 24px;
+  }
+
+  .error {
+    text-align: center;
+    animation-name: shakeError;
+    animation-duration: 0.4s;
+    animation-timing-function: ease-in-out;
+  }
+
+  .alert {
+    padding: 0.5em;
+    margin: 0.3em 0.0em 1em;
+  }
+
+  .notice-dismissible {
+    padding-right: 2rem;
+  }
+
+  .icon-cancel {
+    cursor: pointer;
+  }
+}
+
+</style>
diff --git a/src/components/registration/registration.vue b/src/components/registration/registration.vue
index e0fa214a..5bb06a4f 100644
--- a/src/components/registration/registration.vue
+++ b/src/components/registration/registration.vue
@@ -268,6 +268,7 @@ $validations-cRed: #f04124;
 
   textarea {
     min-height: 100px;
+    resize: vertical;
   }
 
   .form-group {
diff --git a/src/components/search/search.js b/src/components/search/search.js
index b434e127..8e903052 100644
--- a/src/components/search/search.js
+++ b/src/components/search/search.js
@@ -75,8 +75,8 @@ const Search = {
       const length = this[tabName].length
       return length === 0 ? '' : ` (${length})`
     },
-    onResultTabSwitch (_index, dataset) {
-      this.currenResultTab = dataset.filter
+    onResultTabSwitch (key) {
+      this.currenResultTab = key
     },
     getActiveTab () {
       if (this.visibleStatuses.length > 0) {
diff --git a/src/components/search/search.vue b/src/components/search/search.vue
index 4350e672..746bbaa2 100644
--- a/src/components/search/search.vue
+++ b/src/components/search/search.vue
@@ -31,21 +31,18 @@
         <tab-switcher
           ref="tabSwitcher"
           :on-switch="onResultTabSwitch"
-          :custom-active="currenResultTab"
+          :active-tab="currenResultTab"
         >
           <span
-            data-tab-dummy
-            data-filter="statuses"
+            key="statuses"
             :label="$t('user_card.statuses') + resultCount('visibleStatuses')"
           />
           <span
-            data-tab-dummy
-            data-filter="people"
+            key="people"
             :label="$t('search.people') + resultCount('users')"
           />
           <span
-            data-tab-dummy
-            data-filter="hashtags"
+            key="hashtags"
             :label="$t('search.hashtags') + resultCount('hashtags')"
           />
         </tab-switcher>
diff --git a/src/components/search_bar/search_bar.js b/src/components/search_bar/search_bar.js
index b8a792ee..d7d85676 100644
--- a/src/components/search_bar/search_bar.js
+++ b/src/components/search_bar/search_bar.js
@@ -20,6 +20,11 @@ const SearchBar = {
     toggleHidden () {
       this.hidden = !this.hidden
       this.$emit('toggled', this.hidden)
+      this.$nextTick(() => {
+        if (!this.hidden) {
+          this.$refs.searchInput.focus()
+        }
+      })
     }
   }
 }
diff --git a/src/components/status/status.js b/src/components/status/status.js
index 3c172e5b..502d9583 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -335,7 +335,7 @@ const Status = {
             return
           }
         }
-        if (target.className.match(/hashtag/)) {
+        if (target.rel.match(/(?:^|\s)tag(?:$|\s)/) || target.className.match(/hashtag/)) {
           // Extract tag name from link url
           const tag = extractTagFromUrl(target.href)
           if (tag) {
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index ab506632..64218f6e 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -32,7 +32,7 @@
     </template>
     <template v-else>
       <div
-        v-if="showPinned && statusoid.pinned"
+        v-if="showPinned"
         class="status-pin"
       >
         <i class="fa icon-pin faint" />
diff --git a/src/components/still-image/still-image.vue b/src/components/still-image/still-image.vue
index 3fff63f9..4137bd59 100644
--- a/src/components/still-image/still-image.vue
+++ b/src/components/still-image/still-image.vue
@@ -7,8 +7,10 @@
       v-if="animated"
       ref="canvas"
     />
+    <!-- NOTE: key is required to force to re-render img tag when src is changed -->
     <img
       ref="src"
+      :key="src"
       :src="src"
       :referrerpolicy="referrerpolicy"
       @load="onLoad"
diff --git a/src/components/tab_switcher/tab_switcher.js b/src/components/tab_switcher/tab_switcher.js
index 99428044..3ca316b9 100644
--- a/src/components/tab_switcher/tab_switcher.js
+++ b/src/components/tab_switcher/tab_switcher.js
@@ -14,7 +14,7 @@ export default Vue.component('tab-switcher', {
       required: false,
       type: Function
     },
-    customActive: {
+    activeTab: {
       required: false,
       type: String
     },
@@ -29,6 +29,16 @@ export default Vue.component('tab-switcher', {
       active: this.$slots.default.findIndex(_ => _.tag)
     }
   },
+  computed: {
+    activeIndex () {
+      // In case of controlled component
+      if (this.activeTab) {
+        return this.$slots.default.findIndex(slot => this.activeTab === slot.key)
+      } else {
+        return this.active
+      }
+    }
+  },
   beforeUpdate () {
     const currentSlot = this.$slots.default[this.active]
     if (!currentSlot.tag) {
@@ -36,22 +46,14 @@ export default Vue.component('tab-switcher', {
     }
   },
   methods: {
-    activateTab (index, dataset) {
+    activateTab (index) {
       return (e) => {
         e.preventDefault()
         if (typeof this.onSwitch === 'function') {
-          this.onSwitch.call(null, index, this.$slots.default[index].elm.dataset)
+          this.onSwitch.call(null, this.$slots.default[index].key)
         }
         this.active = index
       }
-    },
-    isActiveTab (index) {
-      const customActiveIndex = this.$slots.default.findIndex(slot => {
-        const dataFilter = slot.data && slot.data.attrs && slot.data.attrs['data-filter']
-        return this.customActive && this.customActive === dataFilter
-      })
-
-      return customActiveIndex > -1 ? customActiveIndex === index : index === this.active
     }
   },
   render (h) {
@@ -61,13 +63,13 @@ export default Vue.component('tab-switcher', {
         const classesTab = ['tab']
         const classesWrapper = ['tab-wrapper']
 
-        if (this.isActiveTab(index)) {
+        if (this.activeIndex === index) {
           classesTab.push('active')
           classesWrapper.push('active')
         }
         if (slot.data.attrs.image) {
           return (
-            <div class={ classesWrapper.join(' ')}>
+            <div class={classesWrapper.join(' ')}>
               <button
                 disabled={slot.data.attrs.disabled}
                 onClick={this.activateTab(index)}
@@ -79,7 +81,7 @@ export default Vue.component('tab-switcher', {
           )
         }
         return (
-          <div class={ classesWrapper.join(' ')}>
+          <div class={classesWrapper.join(' ')}>
             <button
               disabled={slot.data.attrs.disabled}
               onClick={this.activateTab(index)}
@@ -91,7 +93,7 @@ export default Vue.component('tab-switcher', {
 
     const contents = this.$slots.default.map((slot, index) => {
       if (!slot.tag) return
-      const active = index === this.active
+      const active = this.activeIndex === index
       if (this.renderOnlyFocused) {
         return active
           ? <div class="active">{slot}</div>
diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js
index 5e24bd15..8df48f7f 100644
--- a/src/components/timeline/timeline.js
+++ b/src/components/timeline/timeline.js
@@ -1,7 +1,20 @@
 import Status from '../status/status.vue'
 import timelineFetcher from '../../services/timeline_fetcher/timeline_fetcher.service.js'
 import Conversation from '../conversation/conversation.vue'
-import { throttle } from 'lodash'
+import { throttle, keyBy } from 'lodash'
+
+export const getExcludedStatusIdsByPinning = (statuses, pinnedStatusIds) => {
+  const ids = []
+  if (pinnedStatusIds && pinnedStatusIds.length > 0) {
+    for (let status of statuses) {
+      if (!pinnedStatusIds.includes(status.id)) {
+        break
+      }
+      ids.push(status.id)
+    }
+  }
+  return ids
+}
 
 const Timeline = {
   props: [
@@ -11,7 +24,8 @@ const Timeline = {
     'userId',
     'tag',
     'embedded',
-    'count'
+    'count',
+    'pinnedStatusIds'
   ],
   data () {
     return {
@@ -39,6 +53,15 @@ const Timeline = {
         body: ['timeline-body'].concat(!this.embedded ? ['panel-body'] : []),
         footer: ['timeline-footer'].concat(!this.embedded ? ['panel-footer'] : [])
       }
+    },
+    // id map of statuses which need to be hidden in the main list due to pinning logic
+    excludedStatusIdsObject () {
+      const ids = getExcludedStatusIdsByPinning(this.timeline.visibleStatuses, this.pinnedStatusIds)
+      // Convert id array to object
+      return keyBy(ids)
+    },
+    pinnedStatusIdsObject () {
+      return keyBy(this.pinnedStatusIds)
     }
   },
   components: {
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index 1fc52083..4ad51714 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -28,13 +28,25 @@
     </div>
     <div :class="classes.body">
       <div class="timeline">
-        <conversation
-          v-for="status in timeline.visibleStatuses"
-          :key="status.id"
-          class="status-fadein"
-          :statusoid="status"
-          :collapsable="true"
-        />
+        <template v-for="statusId in pinnedStatusIds">
+          <conversation
+            v-if="timeline.statusesObject[statusId]"
+            :key="statusId + '-pinned'"
+            class="status-fadein"
+            :statusoid="timeline.statusesObject[statusId]"
+            :collapsable="true"
+            :pinned-status-ids-object="pinnedStatusIdsObject"
+          />
+        </template>
+        <template v-for="status in timeline.visibleStatuses">
+          <conversation
+            v-if="!excludedStatusIdsObject[status.id]"
+            :key="status.id"
+            class="status-fadein"
+            :statusoid="status"
+            :collapsable="true"
+          />
+        </template>
       </div>
     </div>
     <div :class="classes.footer">
diff --git a/src/components/user_avatar/user_avatar.js b/src/components/user_avatar/user_avatar.js
index a42b9c71..4adf8211 100644
--- a/src/components/user_avatar/user_avatar.js
+++ b/src/components/user_avatar/user_avatar.js
@@ -16,7 +16,7 @@ const UserAvatar = {
   },
   computed: {
     imgSrc () {
-      return this.showPlaceholder ? '/images/avi.png' : this.src
+      return this.showPlaceholder ? '/images/avi.png' : this.user.profile_image_url_original
     }
   },
   methods: {
diff --git a/src/components/user_avatar/user_avatar.vue b/src/components/user_avatar/user_avatar.vue
index 811efd3c..9ffb28d8 100644
--- a/src/components/user_avatar/user_avatar.vue
+++ b/src/components/user_avatar/user_avatar.vue
@@ -3,7 +3,7 @@
     class="avatar"
     :alt="user.screen_name"
     :title="user.screen_name"
-    :src="user.profile_image_url_original"
+    :src="imgSrc"
     :class="{ 'avatar-compact': compact, 'better-shadow': betterShadow }"
     :image-load-error="imageLoadError"
   />
diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js
index e019ebbd..82d3b835 100644
--- a/src/components/user_card/user_card.js
+++ b/src/components/user_card/user_card.js
@@ -7,7 +7,7 @@ import { requestFollow, requestUnfollow } from '../../services/follow_manipulate
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
 
 export default {
-  props: [ 'user', 'switcher', 'selected', 'hideBio', 'rounded', 'bordered' ],
+  props: [ 'user', 'switcher', 'selected', 'hideBio', 'rounded', 'bordered', 'allowZoomingAvatar' ],
   data () {
     return {
       followRequestInProgress: false,
@@ -162,6 +162,14 @@ export default {
     },
     reportUser () {
       this.$store.dispatch('openUserReportingModal', this.user.id)
+    },
+    zoomAvatar () {
+      const attachment = {
+        url: this.user.profile_image_url_original,
+        mimetype: 'image'
+      }
+      this.$store.dispatch('setMedia', [attachment])
+      this.$store.dispatch('setCurrent', attachment)
     }
   }
 }
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 9e142480..fc18e240 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -7,7 +7,23 @@
     <div class="panel-heading">
       <div class="user-info">
         <div class="container">
-          <router-link :to="userProfileLink(user)">
+          <a
+            v-if="allowZoomingAvatar"
+            class="user-info-avatar-link"
+            @click="zoomAvatar"
+          >
+            <UserAvatar
+              :better-shadow="betterShadow"
+              :user="user"
+            />
+            <div class="user-info-avatar-link-overlay">
+              <i class="button-icon icon-zoom-in" />
+            </div>
+          </a>
+          <router-link
+            v-else
+            :to="userProfileLink(user)"
+          >
             <UserAvatar
               :better-shadow="betterShadow"
               :user="user"
@@ -351,6 +367,7 @@
   .container {
     padding: 16px 0 6px;
     display: flex;
+    align-items: flex-start;
     max-height: 56px;
 
     .avatar {
@@ -372,6 +389,35 @@
     }
   }
 
+  &-avatar-link {
+    position: relative;
+    cursor: pointer;
+
+    &-overlay {
+      position: absolute;
+      left: 0;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      background-color: rgba(0, 0, 0, 0.3);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      border-radius: $fallback--avatarRadius;
+      border-radius: var(--avatarRadius, $fallback--avatarRadius);
+      opacity: 0;
+      transition: opacity .2s ease;
+
+      i {
+        color: #FFF;
+      }
+    }
+
+    &:hover &-overlay {
+      opacity: 1;
+    }
+  }
+
   .usersettings {
     color: $fallback--lightText;
     color: var(--lightText, $fallback--lightText);
diff --git a/src/components/user_profile/user_profile.js b/src/components/user_profile/user_profile.js
index 39b99dac..00055707 100644
--- a/src/components/user_profile/user_profile.js
+++ b/src/components/user_profile/user_profile.js
@@ -22,21 +22,23 @@ const FriendList = withLoadMore({
   additionalPropNames: ['userId']
 })(List)
 
+const defaultTabKey = 'statuses'
+
 const UserProfile = {
   data () {
     return {
       error: false,
-      userId: null
+      userId: null,
+      tab: defaultTabKey
     }
   },
   created () {
-    // Make sure that timelines used in this page are empty
-    this.cleanUp()
     const routeParams = this.$route.params
     this.load(routeParams.name || routeParams.id)
+    this.tab = get(this.$route, 'query.tab', defaultTabKey)
   },
   destroyed () {
-    this.cleanUp()
+    this.stopFetching()
   },
   computed: {
     timeline () {
@@ -67,17 +69,36 @@ const UserProfile = {
   },
   methods: {
     load (userNameOrId) {
+      const startFetchingTimeline = (timeline, userId) => {
+        // Clear timeline only if load another user's profile
+        if (userId !== this.$store.state.statuses.timelines[timeline].userId) {
+          this.$store.commit('clearTimeline', { timeline })
+        }
+        this.$store.dispatch('startFetchingTimeline', { timeline, userId })
+      }
+
+      const loadById = (userId) => {
+        this.userId = userId
+        startFetchingTimeline('user', userId)
+        startFetchingTimeline('media', userId)
+        if (this.isUs) {
+          startFetchingTimeline('favorites', userId)
+        }
+        // Fetch all pinned statuses immediately
+        this.$store.dispatch('fetchPinnedStatuses', userId)
+      }
+
+      // Reset view
+      this.userId = null
+      this.error = false
+
       // Check if user data is already loaded in store
       const user = this.$store.getters.findUser(userNameOrId)
       if (user) {
-        this.userId = user.id
-        this.fetchTimelines()
+        loadById(user.id)
       } else {
         this.$store.dispatch('fetchUser', userNameOrId)
-          .then(({ id }) => {
-            this.userId = id
-            this.fetchTimelines()
-          })
+          .then(({ id }) => loadById(id))
           .catch((reason) => {
             const errorMessage = get(reason, 'error.error')
             if (errorMessage === 'No user with such user_id') { // Known error
@@ -90,40 +111,33 @@ const UserProfile = {
           })
       }
     },
-    fetchTimelines () {
-      const userId = this.userId
-      this.$store.dispatch('startFetchingTimeline', { timeline: 'user', userId })
-      this.$store.dispatch('startFetchingTimeline', { timeline: 'media', userId })
-      if (this.isUs) {
-        this.$store.dispatch('startFetchingTimeline', { timeline: 'favorites', userId })
-      }
-      // Fetch all pinned statuses immediately
-      this.$store.dispatch('fetchPinnedStatuses', userId)
-    },
-    cleanUp () {
+    stopFetching () {
       this.$store.dispatch('stopFetching', 'user')
       this.$store.dispatch('stopFetching', 'favorites')
       this.$store.dispatch('stopFetching', 'media')
-      this.$store.commit('clearTimeline', { timeline: 'user' })
-      this.$store.commit('clearTimeline', { timeline: 'favorites' })
-      this.$store.commit('clearTimeline', { timeline: 'media' })
+    },
+    switchUser (userNameOrId) {
+      this.stopFetching()
+      this.load(userNameOrId)
+    },
+    onTabSwitch (tab) {
+      this.tab = tab
+      this.$router.replace({ query: { tab } })
     }
   },
   watch: {
     '$route.params.id': function (newVal) {
       if (newVal) {
-        this.cleanUp()
-        this.load(newVal)
+        this.switchUser(newVal)
       }
     },
     '$route.params.name': function (newVal) {
       if (newVal) {
-        this.cleanUp()
-        this.load(newVal)
+        this.switchUser(newVal)
       }
     },
-    $route () {
-      this.$refs.tabSwitcher.activateTab(0)()
+    '$route.query': function (newVal) {
+      this.tab = newVal.tab || defaultTabKey
     }
   },
   components: {
diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue
index 4ea0a869..42516916 100644
--- a/src/components/user_profile/user_profile.vue
+++ b/src/components/user_profile/user_profile.vue
@@ -8,36 +8,28 @@
         :user="user"
         :switcher="true"
         :selected="timeline.viewing"
+        :allow-zooming-avatar="true"
         rounded="top"
       />
       <tab-switcher
-        ref="tabSwitcher"
+        :active-tab="tab"
         :render-only-focused="true"
+        :on-switch="onTabSwitch"
       >
-        <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>
+        <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"
+        />
         <div
           v-if="followsTabVisible"
+          key="followees"
           :label="$t('user_card.followees')"
           :disabled="!user.friends_count"
         >
@@ -52,6 +44,7 @@
         </div>
         <div
           v-if="followersTabVisible"
+          key="followers"
           :label="$t('user_card.followers')"
           :disabled="!user.followers_count"
         >
@@ -68,6 +61,7 @@
           </FollowerList>
         </div>
         <Timeline
+          key="media"
           :label="$t('user_card.media')"
           :disabled="!media.visibleStatuses.length"
           :embedded="true"
@@ -78,6 +72,7 @@
         />
         <Timeline
           v-if="isUs"
+          key="favorites"
           :label="$t('user_card.favorites')"
           :disabled="!favorites.visibleStatuses.length"
           :embedded="true"
diff --git a/src/components/who_to_follow/who_to_follow.js b/src/components/who_to_follow/who_to_follow.js
index f8100257..1aa3a4cd 100644
--- a/src/components/who_to_follow/who_to_follow.js
+++ b/src/components/who_to_follow/who_to_follow.js
@@ -21,11 +21,12 @@ const WhoToFollow = {
           name: i.display_name,
           screen_name: i.acct,
           profile_image_url: i.avatar || '/images/avi.png',
-          profile_image_url_original: i.avatar || '/images/avi.png'
+          profile_image_url_original: i.avatar || '/images/avi.png',
+          statusnet_profile_url: i.url
         }
         this.users.push(user)
 
-        this.$store.state.api.backendInteractor.externalProfile(user.screen_name)
+        this.$store.state.api.backendInteractor.fetchUser({ id: user.screen_name })
           .then((externalUser) => {
             if (!externalUser.error) {
               this.$store.commit('addNewUsers', [externalUser])
diff --git a/src/components/who_to_follow_panel/who_to_follow_panel.js b/src/components/who_to_follow_panel/who_to_follow_panel.js
index 7d01678b..dcb56106 100644
--- a/src/components/who_to_follow_panel/who_to_follow_panel.js
+++ b/src/components/who_to_follow_panel/who_to_follow_panel.js
@@ -13,7 +13,7 @@ function showWhoToFollow (panel, reply) {
     toFollow.img = img
     toFollow.name = name
 
-    panel.$store.state.api.backendInteractor.externalProfile(name)
+    panel.$store.state.api.backendInteractor.fetchUser({ id: name })
       .then((externalUser) => {
         if (!externalUser.error) {
           panel.$store.commit('addNewUsers', [externalUser])