From cd09e0943125996f453085f6f9ef5a5e7f297c7b Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Wed, 29 Apr 2020 23:40:22 +0300
Subject: [PATCH 01/33] Create route for status show

---
 src/router/index.js | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/src/router/index.js b/src/router/index.js
index e8510bb8..40d4d7cd 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -172,5 +172,17 @@ export const asyncRouterMap = [
     ],
     hidden: true
   },
+  {
+    path: '/statuses/:id',
+    component: Layout,
+    children: [
+      {
+        path: '',
+        name: 'StatusShow',
+        component: () => import('@/views/statuses/show')
+      }
+    ],
+    hidden: true
+  },
   { path: '*', redirect: '/404', hidden: true }
 ]

From 9c0677615496c9ba5c75dc2e59ffd3848f289cb4 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Thu, 30 Apr 2020 20:32:37 +0300
Subject: [PATCH 02/33] Create action for fetching single status

---
 src/store/modules/status.js | 13 ++++++++++++-
 src/views/statuses/show.vue | 39 +++++++++++++++++++++++++++++++++++++
 2 files changed, 51 insertions(+), 1 deletion(-)
 create mode 100644 src/views/statuses/show.vue

diff --git a/src/store/modules/status.js b/src/store/modules/status.js
index 8847e8bf..78646b12 100644
--- a/src/store/modules/status.js
+++ b/src/store/modules/status.js
@@ -1,7 +1,8 @@
-import { changeStatusScope, deleteStatus, fetchStatuses, fetchStatusesCount, fetchStatusesByInstance } from '@/api/status'
+import { changeStatusScope, deleteStatus, fetchStatus, fetchStatuses, fetchStatusesCount, fetchStatusesByInstance } from '@/api/status'
 
 const status = {
   state: {
+    fetchedStatus: {},
     fetchedStatuses: [],
     loading: false,
     statusesByInstance: {
@@ -28,6 +29,9 @@ const status = {
     CHANGE_SELECTED_INSTANCE: (state, instance) => {
       state.statusesByInstance.selectedInstance = instance
     },
+    SET_STATUS: (state, status) => {
+      state.fetchedStatus = status
+    },
     SET_STATUSES_BY_INSTANCE: (state, statuses) => {
       state.fetchedStatuses = statuses
     },
@@ -68,6 +72,13 @@ const status = {
         dispatch('FetchStatusesByInstance')
       }
     },
+    async FetchStatus({ commit, getters }, id) {
+      commit('SET_LOADING', true)
+      const status = await fetchStatus(id, getters.authHost, getters.token)
+      console.log(status)
+      commit('SET_STATUS', status.data)
+      commit('SET_LOADING', false)
+    },
     async FetchStatusesCount({ commit, getters }) {
       commit('SET_LOADING', true)
       const { data } = await fetchStatusesCount(getters.authHost, getters.token)
diff --git a/src/views/statuses/show.vue b/src/views/statuses/show.vue
new file mode 100644
index 00000000..60a6cfe7
--- /dev/null
+++ b/src/views/statuses/show.vue
@@ -0,0 +1,39 @@
+<template>
+  <main>
+    {{ status }}
+    <!-- <status :status="status" :account="status.account" :show-checkbox="false" :godmode="showPrivate"/> -->
+  </main>
+</template>
+
+<script>
+import Status from '@/components/Status'
+
+export default {
+  name: 'UsersShow',
+  components: { Status },
+  data() {
+    return {
+      showPrivate: false
+    }
+  },
+  computed: {
+    isDesktop() {
+      return this.$store.state.app.device === 'desktop'
+    },
+    isMobile() {
+      return this.$store.state.app.device === 'mobile'
+    },
+    isTablet() {
+      return this.$store.state.app.device === 'tablet'
+    },
+    status() {
+      return this.$store.state.status.fetchedStatus
+    }
+  },
+  mounted: function() {
+    this.$store.dispatch('NeedReboot')
+    this.$store.dispatch('GetNodeInfo')
+    this.$store.dispatch('FetchStatus', this.$route.params.id)
+  }
+}
+</script>

From ca8df9e7263eb4c1f9fd3a12961e6654fa80f895 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Thu, 30 Apr 2020 23:56:44 +0300
Subject: [PATCH 03/33] Render status-card

---
 src/views/statuses/show.vue | 95 +++++++++++++++++++++++++++++++++++--
 1 file changed, 91 insertions(+), 4 deletions(-)

diff --git a/src/views/statuses/show.vue b/src/views/statuses/show.vue
index 60a6cfe7..4018c4e2 100644
--- a/src/views/statuses/show.vue
+++ b/src/views/statuses/show.vue
@@ -1,19 +1,49 @@
 <template>
   <main>
-    {{ status }}
-    <!-- <status :status="status" :account="status.account" :show-checkbox="false" :godmode="showPrivate"/> -->
+    <header v-if="isDesktop || isTablet" class="user-page-header">
+      <div class="avatar-name-container">
+        <el-avatar v-if="accountExists(user, 'avatar')" :src="user.avatar" size="large" />
+        <h1 v-if="accountExists(user, 'display_name')">{{ user.display_name }}</h1>
+      </div>
+      <div class="left-header-container">
+        <moderation-dropdown
+          :user="user"
+          :page="'userPage'"
+          @open-reset-token-dialog="openResetPasswordDialog"/>
+        <reboot-button/>
+      </div>
+    </header>
+    <div v-if="isMobile" class="user-page-header-container">
+      <header class="user-page-header">
+        <div class="avatar-name-container">
+          <el-avatar v-if="accountExists(user, 'avatar')" :src="user.avatar" size="large" />
+          <h1 v-if="accountExists(user, 'display_name')">{{ user.display_name }}</h1>
+        </div>
+        <reboot-button/>
+      </header>
+      <moderation-dropdown
+        :user="user"
+        :page="'userPage'"
+        @open-reset-token-dialog="openResetPasswordDialog"/>
+    </div>
+    <div class="status-container">
+      <status :status="status" :account="user" :show-checkbox="false" :godmode="showPrivate"/>
+    </div>
   </main>
 </template>
 
 <script>
 import Status from '@/components/Status'
+import ModerationDropdown from '../users/components/ModerationDropdown'
+import RebootButton from '@/components/RebootButton'
 
 export default {
   name: 'UsersShow',
-  components: { Status },
+  components: { ModerationDropdown, RebootButton, Status },
   data() {
     return {
-      showPrivate: false
+      showPrivate: true,
+      resetPasswordDialogOpen: false
     }
   },
   computed: {
@@ -28,12 +58,69 @@ export default {
     },
     status() {
       return this.$store.state.status.fetchedStatus
+    },
+    user() {
+      return this.$store.state.status.fetchedStatus.account
     }
   },
   mounted: function() {
     this.$store.dispatch('NeedReboot')
     this.$store.dispatch('GetNodeInfo')
     this.$store.dispatch('FetchStatus', this.$route.params.id)
+  },
+  methods: {
+    accountExists(account, key) {
+      return account[key]
+    },
+    openResetPasswordDialog() {
+      this.resetPasswordDialogOpen = true
+    }
   }
 }
 </script>
+
+<style rel='stylesheet/scss' lang='scss' scoped>
+.avatar-name-container {
+  display: flex;
+  align-items: center;
+}
+.status-container {
+  margin: 0 15px 0 20px;
+}
+.user-page-header {
+  display: flex;
+  justify-content: space-between;
+  margin: 22px 15px 22px 20px;
+  align-items: center;
+  h1 {
+    display: inline;
+    margin: 0 0 0 10px;
+  }
+}
+@media only screen and (max-width:480px) {
+  .avatar-name-container {
+    margin-bottom: 10px;
+  }
+  .left-header-container {
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+  }
+  .user-page-header {
+    padding: 0;
+    margin: 7px 15px 15px 10px;
+  }
+  .user-page-header-container {
+    .el-dropdown {
+      width: 95%;
+      margin: 0 15px 15px 10px;
+    }
+  }
+}
+@media only screen and (max-width:801px) and (min-width: 481px) {
+  .user-page-header {
+    padding: 0;
+    margin: 7px 15px 20px 20px;
+  }
+}
+</style>

From 005c8ff161b837e2e973bb551f7b0f056fcdbbe5 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Fri, 1 May 2020 00:52:32 +0300
Subject: [PATCH 04/33] Update initial values for users module state

---
 src/store/modules/users.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/store/modules/users.js b/src/store/modules/users.js
index 2a1540e3..b2822e86 100644
--- a/src/store/modules/users.js
+++ b/src/store/modules/users.js
@@ -24,6 +24,7 @@ const users = {
     searchQuery: '',
     totalUsersCount: 0,
     currentPage: 1,
+    pageSize: 50,
     filters: {
       local: false,
       external: false,
@@ -73,9 +74,6 @@ const users = {
     },
     SET_USERS_FILTERS: (state, filters) => {
       state.filters = filters
-    },
-    SET_USER_PROFILE: (state, user) => {
-      state.userProfile = user
     }
   },
   actions: {

From 0a4ddd3e6fd467a71d0a2b916deabd8f04f8545f Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Fri, 1 May 2020 01:24:43 +0300
Subject: [PATCH 05/33] Fix mounting component

---
 src/views/statuses/show.vue | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/views/statuses/show.vue b/src/views/statuses/show.vue
index 4018c4e2..1d29d2d6 100644
--- a/src/views/statuses/show.vue
+++ b/src/views/statuses/show.vue
@@ -1,5 +1,5 @@
 <template>
-  <main>
+  <div v-if="!loading">
     <header v-if="isDesktop || isTablet" class="user-page-header">
       <div class="avatar-name-container">
         <el-avatar v-if="accountExists(user, 'avatar')" :src="user.avatar" size="large" />
@@ -29,7 +29,7 @@
     <div class="status-container">
       <status :status="status" :account="user" :show-checkbox="false" :godmode="showPrivate"/>
     </div>
-  </main>
+  </div>
 </template>
 
 <script>
@@ -56,6 +56,9 @@ export default {
     isTablet() {
       return this.$store.state.app.device === 'tablet'
     },
+    loading() {
+      return this.$store.state.status.loading
+    },
     status() {
       return this.$store.state.status.fetchedStatus
     },
@@ -63,7 +66,7 @@ export default {
       return this.$store.state.status.fetchedStatus.account
     }
   },
-  mounted: function() {
+  beforeMount: function() {
     this.$store.dispatch('NeedReboot')
     this.$store.dispatch('GetNodeInfo')
     this.$store.dispatch('FetchStatus', this.$route.params.id)

From c20c2060e9645cb2df766ac72f74fd0e15094ac6 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Fri, 1 May 2020 23:43:38 +0300
Subject: [PATCH 06/33] Mock status data

---
 src/api/status.js | 111 ++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 111 insertions(+)

diff --git a/src/api/status.js b/src/api/status.js
index fcc820e0..45d5ccb7 100644
--- a/src/api/status.js
+++ b/src/api/status.js
@@ -21,6 +21,117 @@ export async function deleteStatus(id, authHost, token) {
   })
 }
 
+export async function fetchStatus({ godmode, localOnly, authHost, token, pageSize, page }) {
+  return {
+    data:
+      {
+        'account': {
+          'acct': 'leo',
+          'avatar': 'http://localhost:4000/images/avi.png',
+          'avatar_static': 'http://localhost:4000/images/avi.png',
+          'bot': false,
+          'created_at': '2019-10-24T17:19:12.000Z',
+          'display_name': 'leo',
+          'emojis': {},
+          'fields': {},
+          'followers_count': 0,
+          'following_count': 0,
+          'header': 'http://localhost:4000/images/banner.png',
+          'header_static': 'http://localhost:4000/images/banner.png',
+          'id': '9oG0YghgBi94EATI9I',
+          'locked': false,
+          'note': '.',
+          'pleroma': {
+            'background_image': null,
+            'confirmation_pending': false,
+            'hide_favorites': true,
+            'hide_followers': false,
+            'hide_followers_count': false,
+            'hide_follows': false,
+            'hide_follows_count': false,
+            'is_admin': true,
+            'is_moderator': true,
+            'relationship': {},
+            'skip_thread_containment': false,
+            'tags': [
+              'force_nsfw',
+              'strip_media'
+            ]
+          },
+          'source': {
+            'fields': {},
+            'note': '.',
+            'pleroma': {
+              'actor_type': 'Person',
+              'discoverable': false
+            },
+            'sensitive': false
+          },
+          'statuses_count': 2,
+          'url': 'http://localhost:4000/users/leo',
+          'username': 'leo',
+          'confirmation_pending': false,
+          'deactivated': false,
+          'local': true,
+          'nickname': 'leo',
+          'roles': {
+            'admin': true,
+            'moderator': true
+          },
+          'tags': [
+            'force_nsfw',
+            'strip_media'
+          ]
+        },
+        'application': {
+          'name': 'Web',
+          'website': null
+        },
+        'bookmarked': false,
+        'card': null,
+        'content': 'hungry and craving some milk tea',
+        'created_at': '2019-11-23T12:53:57.000Z',
+        'emojis': {},
+        'favourited': false,
+        'favourites_count': 0,
+        'id': '9pFoIeW6uCSMDyfk80',
+        'in_reply_to_account_id': null,
+        'in_reply_to_id': null,
+        'language': null,
+        'media_attachments': {},
+        'mentions': {},
+        'muted': false,
+        'pinned': false,
+        'pleroma': {
+          'content': {
+            'text/plain': 'hungry and craving some milk tea'
+          },
+          'conversation_id': 148,
+          'direct_conversation_id': null,
+          'emoji_reactions': {},
+          'expires_at': null,
+          'in_reply_to_account_acct': null,
+          'local': true,
+          'spoiler_text': {
+            'text/plain': ''
+          },
+          'thread_muted': false
+        },
+        'poll': null,
+        'reblog': null,
+        'reblogged': false,
+        'reblogs_count': 0,
+        'replies_count': 0,
+        'sensitive': false,
+        'spoiler_text': '',
+        'tags': {},
+        'uri': 'http://localhost:4000/objects/4c315900-ffaa-4ec8-b5e9-6bf89c3e5d0e',
+        'url': 'http://localhost:4000/notice/9pFoIeW6uCSMDyfk80',
+        'visibility': 'public'
+      }
+  }
+}
+
 export async function fetchStatuses({ godmode, localOnly, authHost, token, pageSize, page }) {
   return await request({
     baseURL: baseName(authHost),

From cfa85c1e04cd255f71f532ce83c3230e1f961a55 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Fri, 1 May 2020 23:44:06 +0300
Subject: [PATCH 07/33] Fix styles for reboot button

---
 src/views/statuses/show.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/views/statuses/show.vue b/src/views/statuses/show.vue
index 1d29d2d6..c1e6dd21 100644
--- a/src/views/statuses/show.vue
+++ b/src/views/statuses/show.vue
@@ -87,6 +87,10 @@ export default {
   display: flex;
   align-items: center;
 }
+.reboot-button {
+  padding: 10px;
+  margin-left: 6px;
+}
 .status-container {
   margin: 0 15px 0 20px;
 }

From 5fe5b38c13b3f4125d11e52b43b007538cece376 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Sat, 2 May 2020 16:35:13 +0300
Subject: [PATCH 08/33] Add router link to Status component

---
 src/components/Status/index.vue | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/Status/index.vue b/src/components/Status/index.vue
index 90058332..e6d39e82 100644
--- a/src/components/Status/index.vue
+++ b/src/components/Status/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <router-link :to="{ name: 'StatusShow', params: { id: status.id }}">
     <el-card v-if="!status.deleted" class="status-card">
       <div slot="header">
         <div class="status-header">
@@ -15,7 +15,6 @@
                 <h3 class="status-account-name deactivated"> (deactivated)</h3>
               </span>
             </div>
-
           </div>
           <div class="status-actions">
             <el-tag v-if="status.sensitive" type="warning" size="large">{{ $t('reports.sensitive') }}</el-tag>
@@ -116,7 +115,7 @@
         {{ parseTimestamp(status.created_at) }}
       </a>
     </el-card>
-  </div>
+  </router-link>
 </template>
 
 <script>

From 7cf2878eb87286b94335954a4d34499d1b45211f Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Sat, 2 May 2020 16:59:14 +0300
Subject: [PATCH 09/33] Render recent statuses on Status show page

---
 src/views/statuses/show.vue | 62 ++++++++++++++++++++++++++++++++++++-
 1 file changed, 61 insertions(+), 1 deletion(-)

diff --git a/src/views/statuses/show.vue b/src/views/statuses/show.vue
index c1e6dd21..8ba6b189 100644
--- a/src/views/statuses/show.vue
+++ b/src/views/statuses/show.vue
@@ -29,6 +29,18 @@
     <div class="status-container">
       <status :status="status" :account="user" :show-checkbox="false" :godmode="showPrivate"/>
     </div>
+    <div class="recent-statuses-container">
+      <h2 class="recent-statuses">{{ $t('userProfile.recentStatuses') }} by {{ user.display_name }}</h2>
+      <el-checkbox v-model="showPrivate" class="show-private-statuses" @change="onTogglePrivate">
+        {{ $t('statuses.showPrivateStatuses') }}
+      </el-checkbox>
+      <el-timeline v-if="!statusesLoading" class="statuses">
+        <el-timeline-item v-for="status in statuses" :key="status.id">
+          <status :status="status" :account="status.account" :show-checkbox="false" :user-id="user.id" :godmode="showPrivate"/>
+        </el-timeline-item>
+        <p v-if="statuses.length === 0" class="no-statuses">{{ $t('userProfile.noStatuses') }}</p>
+      </el-timeline>
+    </div>
   </div>
 </template>
 
@@ -42,7 +54,7 @@ export default {
   components: { ModerationDropdown, RebootButton, Status },
   data() {
     return {
-      showPrivate: true,
+      showPrivate: false,
       resetPasswordDialogOpen: false
     }
   },
@@ -62,6 +74,12 @@ export default {
     status() {
       return this.$store.state.status.fetchedStatus
     },
+    statuses() {
+      return this.$store.state.userProfile.statuses
+    },
+    statusesLoading() {
+      return this.$store.state.userProfile.statusesLoading
+    },
     user() {
       return this.$store.state.status.fetchedStatus.account
     }
@@ -70,11 +88,15 @@ export default {
     this.$store.dispatch('NeedReboot')
     this.$store.dispatch('GetNodeInfo')
     this.$store.dispatch('FetchStatus', this.$route.params.id)
+    this.$store.dispatch('FetchUserStatuses', { userId: this.user.id, godmode: this.showPrivate })
   },
   methods: {
     accountExists(account, key) {
       return account[key]
     },
+    onTogglePrivate() {
+      this.$store.dispatch('FetchUserStatuses', { userId: this.user.id, godmode: this.showPrivate })
+    },
     openResetPasswordDialog() {
       this.resetPasswordDialogOpen = true
     }
@@ -87,13 +109,31 @@ export default {
   display: flex;
   align-items: center;
 }
+.no-statuses {
+  margin-left: 28px;
+  color: #606266;
+}
 .reboot-button {
   padding: 10px;
   margin-left: 6px;
 }
+.recent-statuses {
+  margin-left: 28px;
+}
+.recent-statuses-container {
+  display: flex;
+  flex-direction: column;
+}
+.show-private-statuses {
+  margin-left: 28px;
+  margin-bottom: 20px;
+}
 .status-container {
   margin: 0 15px 0 20px;
 }
+.statuses {
+  padding: 0 20px 0 0;
+}
 .user-page-header {
   display: flex;
   justify-content: space-between;
@@ -113,6 +153,16 @@ export default {
     display: flex;
     justify-content: space-between;
   }
+  .recent-statuses {
+    margin: 20px 10px 15px 10px;
+  }
+  .recent-statuses-container {
+    width: 100%;
+    margin: 0 10px;
+  }
+  .show-private-statuses {
+    margin: 0 10px 20px 10px;
+  }
   .user-page-header {
     padding: 0;
     margin: 7px 15px 15px 10px;
@@ -125,6 +175,16 @@ export default {
   }
 }
 @media only screen and (max-width:801px) and (min-width: 481px) {
+  .recent-statuses {
+    margin: 20px 10px 15px 0;
+  }
+  .recent-statuses-container {
+    width: 97%;
+    margin: 0 20px;
+  }
+  .show-private-statuses {
+    margin: 0 10px 20px 0;
+  }
   .user-page-header {
     padding: 0;
     margin: 7px 15px 20px 20px;

From 558db9a1c75d6351cd645945b8e0e96bd040e728 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Sat, 2 May 2020 20:08:46 +0300
Subject: [PATCH 10/33] Fetch latest user statuses

---
 src/store/modules/status.js | 5 +++--
 src/views/statuses/show.vue | 1 -
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/store/modules/status.js b/src/store/modules/status.js
index 78646b12..780593bb 100644
--- a/src/store/modules/status.js
+++ b/src/store/modules/status.js
@@ -72,12 +72,13 @@ const status = {
         dispatch('FetchStatusesByInstance')
       }
     },
-    async FetchStatus({ commit, getters }, id) {
+    async FetchStatus({ commit, dispatch, getters, state }, id) {
       commit('SET_LOADING', true)
       const status = await fetchStatus(id, getters.authHost, getters.token)
-      console.log(status)
+
       commit('SET_STATUS', status.data)
       commit('SET_LOADING', false)
+      dispatch('FetchUserStatuses', { userId: state.fetchedStatus.account.id, godmode: false })
     },
     async FetchStatusesCount({ commit, getters }) {
       commit('SET_LOADING', true)
diff --git a/src/views/statuses/show.vue b/src/views/statuses/show.vue
index 8ba6b189..23962eae 100644
--- a/src/views/statuses/show.vue
+++ b/src/views/statuses/show.vue
@@ -88,7 +88,6 @@ export default {
     this.$store.dispatch('NeedReboot')
     this.$store.dispatch('GetNodeInfo')
     this.$store.dispatch('FetchStatus', this.$route.params.id)
-    this.$store.dispatch('FetchUserStatuses', { userId: this.user.id, godmode: this.showPrivate })
   },
   methods: {
     accountExists(account, key) {

From 9ecdddad168bceaac58c39782a558d8df27d7ccc Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Sat, 2 May 2020 20:56:00 +0300
Subject: [PATCH 11/33] Fix styles

---
 src/views/statuses/show.vue | 24 +++++++++++++++++++++---
 src/views/users/show.vue    | 14 ++++++++++++--
 2 files changed, 33 insertions(+), 5 deletions(-)

diff --git a/src/views/statuses/show.vue b/src/views/statuses/show.vue
index 23962eae..d0483d60 100644
--- a/src/views/statuses/show.vue
+++ b/src/views/statuses/show.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-if="!loading">
+  <div v-if="!loading" class="status-show-container">
     <header v-if="isDesktop || isTablet" class="user-page-header">
       <div class="avatar-name-container">
         <el-avatar v-if="accountExists(user, 'avatar')" :src="user.avatar" size="large" />
@@ -103,7 +103,7 @@ export default {
 }
 </script>
 
-<style rel='stylesheet/scss' lang='scss' scoped>
+<style rel='stylesheet/scss' lang='scss'>
 .avatar-name-container {
   display: flex;
   align-items: center;
@@ -143,10 +143,21 @@ export default {
     margin: 0 0 0 10px;
   }
 }
+
+@media only screen and (min-width: 1824px) {
+  .status-show-container {
+    max-width: 1824px;
+    margin: auto;
+  }
+}
+
 @media only screen and (max-width:480px) {
   .avatar-name-container {
     margin-bottom: 10px;
   }
+  .el-timeline-item__wrapper {
+    padding-left: 18px;
+  }
   .left-header-container {
     align-items: center;
     display: flex;
@@ -157,11 +168,18 @@ export default {
   }
   .recent-statuses-container {
     width: 100%;
-    margin: 0 10px;
+    margin: 0;
   }
   .show-private-statuses {
     margin: 0 10px 20px 10px;
   }
+  .status-container {
+    margin: 0 10px;
+  }
+  .statuses {
+    padding-right: 10px;
+    margin-left: 8px;
+  }
   .user-page-header {
     padding: 0;
     margin: 7px 15px 15px 10px;
diff --git a/src/views/users/show.vue b/src/views/users/show.vue
index a4ae844a..b97e1f12 100644
--- a/src/views/users/show.vue
+++ b/src/views/users/show.vue
@@ -187,7 +187,7 @@ export default {
 }
 </script>
 
-<style rel='stylesheet/scss' lang='scss' scoped>
+<style rel='stylesheet/scss' lang='scss'>
 header {
   align-items: center;
   display: flex;
@@ -291,16 +291,26 @@ table {
   .avatar-name-container {
     margin-bottom: 10px;
   }
+  .el-timeline-item__wrapper {
+    padding-left: 18px;
+  }
   .recent-statuses {
     margin: 20px 10px 15px 10px;
   }
   .recent-statuses-container {
     width: 100%;
-    margin: 0 10px;
+    margin: 0;
   }
   .show-private-statuses {
     margin: 0 10px 20px 10px;
   }
+  .status-container {
+    margin: 0 10px;
+  }
+  .statuses {
+    padding-right: 10px;
+    margin-left: 8px;
+  }
   .user-page-header {
     padding: 0;
     margin: 7px 15px 15px 10px;

From 2f0f424f913d6cfb99783109b901bbcd4a748258 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Fri, 8 May 2020 01:54:32 +0300
Subject: [PATCH 12/33] Add API for fetching a single status

---
 src/api/status.js | 116 +++-------------------------------------------
 1 file changed, 7 insertions(+), 109 deletions(-)

diff --git a/src/api/status.js b/src/api/status.js
index 45d5ccb7..032f26fb 100644
--- a/src/api/status.js
+++ b/src/api/status.js
@@ -21,115 +21,13 @@ export async function deleteStatus(id, authHost, token) {
   })
 }
 
-export async function fetchStatus({ godmode, localOnly, authHost, token, pageSize, page }) {
-  return {
-    data:
-      {
-        'account': {
-          'acct': 'leo',
-          'avatar': 'http://localhost:4000/images/avi.png',
-          'avatar_static': 'http://localhost:4000/images/avi.png',
-          'bot': false,
-          'created_at': '2019-10-24T17:19:12.000Z',
-          'display_name': 'leo',
-          'emojis': {},
-          'fields': {},
-          'followers_count': 0,
-          'following_count': 0,
-          'header': 'http://localhost:4000/images/banner.png',
-          'header_static': 'http://localhost:4000/images/banner.png',
-          'id': '9oG0YghgBi94EATI9I',
-          'locked': false,
-          'note': '.',
-          'pleroma': {
-            'background_image': null,
-            'confirmation_pending': false,
-            'hide_favorites': true,
-            'hide_followers': false,
-            'hide_followers_count': false,
-            'hide_follows': false,
-            'hide_follows_count': false,
-            'is_admin': true,
-            'is_moderator': true,
-            'relationship': {},
-            'skip_thread_containment': false,
-            'tags': [
-              'force_nsfw',
-              'strip_media'
-            ]
-          },
-          'source': {
-            'fields': {},
-            'note': '.',
-            'pleroma': {
-              'actor_type': 'Person',
-              'discoverable': false
-            },
-            'sensitive': false
-          },
-          'statuses_count': 2,
-          'url': 'http://localhost:4000/users/leo',
-          'username': 'leo',
-          'confirmation_pending': false,
-          'deactivated': false,
-          'local': true,
-          'nickname': 'leo',
-          'roles': {
-            'admin': true,
-            'moderator': true
-          },
-          'tags': [
-            'force_nsfw',
-            'strip_media'
-          ]
-        },
-        'application': {
-          'name': 'Web',
-          'website': null
-        },
-        'bookmarked': false,
-        'card': null,
-        'content': 'hungry and craving some milk tea',
-        'created_at': '2019-11-23T12:53:57.000Z',
-        'emojis': {},
-        'favourited': false,
-        'favourites_count': 0,
-        'id': '9pFoIeW6uCSMDyfk80',
-        'in_reply_to_account_id': null,
-        'in_reply_to_id': null,
-        'language': null,
-        'media_attachments': {},
-        'mentions': {},
-        'muted': false,
-        'pinned': false,
-        'pleroma': {
-          'content': {
-            'text/plain': 'hungry and craving some milk tea'
-          },
-          'conversation_id': 148,
-          'direct_conversation_id': null,
-          'emoji_reactions': {},
-          'expires_at': null,
-          'in_reply_to_account_acct': null,
-          'local': true,
-          'spoiler_text': {
-            'text/plain': ''
-          },
-          'thread_muted': false
-        },
-        'poll': null,
-        'reblog': null,
-        'reblogged': false,
-        'reblogs_count': 0,
-        'replies_count': 0,
-        'sensitive': false,
-        'spoiler_text': '',
-        'tags': {},
-        'uri': 'http://localhost:4000/objects/4c315900-ffaa-4ec8-b5e9-6bf89c3e5d0e',
-        'url': 'http://localhost:4000/notice/9pFoIeW6uCSMDyfk80',
-        'visibility': 'public'
-      }
-  }
+export async function fetchStatus(id, authHost, token) {
+  return await request({
+    baseURL: baseName(authHost),
+    url: `/api/pleroma/admin/statuses/${id}`,
+    method: 'get',
+    headers: authHeaders(token)
+  })
 }
 
 export async function fetchStatuses({ godmode, localOnly, authHost, token, pageSize, page }) {

From fd541818053d767d6542507f89b84761960b0ea9 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Tue, 19 May 2020 23:15:22 +0300
Subject: [PATCH 13/33] Save author of the status in state

---
 src/store/modules/status.js | 5 +++++
 src/views/statuses/show.vue | 5 +++--
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/store/modules/status.js b/src/store/modules/status.js
index 780593bb..e0eccb62 100644
--- a/src/store/modules/status.js
+++ b/src/store/modules/status.js
@@ -5,6 +5,7 @@ const status = {
     fetchedStatus: {},
     fetchedStatuses: [],
     loading: false,
+    statusAuthor: {},
     statusesByInstance: {
       selectedInstance: '',
       showLocal: false,
@@ -49,6 +50,9 @@ const status = {
     },
     SET_STATUS_VISIBILITY: (state, visibility) => {
       state.statusVisibility = visibility
+    },
+    SET_STATUS_AUTHOR: (state, user) => {
+      state.statusAuthor = user
     }
   },
   actions: {
@@ -77,6 +81,7 @@ const status = {
       const status = await fetchStatus(id, getters.authHost, getters.token)
 
       commit('SET_STATUS', status.data)
+      commit('SET_STATUS_AUTHOR', status.data.account)
       commit('SET_LOADING', false)
       dispatch('FetchUserStatuses', { userId: state.fetchedStatus.account.id, godmode: false })
     },
diff --git a/src/views/statuses/show.vue b/src/views/statuses/show.vue
index d0483d60..30aae947 100644
--- a/src/views/statuses/show.vue
+++ b/src/views/statuses/show.vue
@@ -8,7 +8,8 @@
       <div class="left-header-container">
         <moderation-dropdown
           :user="user"
-          :page="'userPage'"
+          :page="'statusPage'"
+          :status-id="status.id"
           @open-reset-token-dialog="openResetPasswordDialog"/>
         <reboot-button/>
       </div>
@@ -81,7 +82,7 @@ export default {
       return this.$store.state.userProfile.statusesLoading
     },
     user() {
-      return this.$store.state.status.fetchedStatus.account
+      return this.$store.state.status.statusAuthor
     }
   },
   beforeMount: function() {

From 1dfc0bacab445a44143553e5873657d09817ed03 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Tue, 19 May 2020 23:21:03 +0300
Subject: [PATCH 14/33] Fetch single status after user was moderated on the
 status view page

---
 src/store/modules/users.js                    | 39 ++++++++++---------
 .../users/components/ModerationDropdown.vue   | 22 ++++++-----
 2 files changed, 33 insertions(+), 28 deletions(-)

diff --git a/src/store/modules/users.js b/src/store/modules/users.js
index b2822e86..13d1e378 100644
--- a/src/store/modules/users.js
+++ b/src/store/modules/users.js
@@ -77,16 +77,16 @@ const users = {
     }
   },
   actions: {
-    async ActivateUsers({ dispatch, getters }, { users, _userId }) {
+    async ActivateUsers({ dispatch, getters }, { users, _userId, _statusId }) {
       const updatedUsers = users.map(user => {
         return { ...user, deactivated: false }
       })
       const nicknames = users.map(user => user.nickname)
       const callApiFn = async() => await activateUsers(nicknames, getters.authHost, getters.token)
 
-      dispatch('ApplyChanges', { updatedUsers, callApiFn, userId: _userId })
+      dispatch('ApplyChanges', { updatedUsers, callApiFn, userId: _userId, statusId: _statusId })
     },
-    async ApplyChanges({ commit, dispatch, state }, { updatedUsers, callApiFn, userId }) {
+    async ApplyChanges({ commit, dispatch, state }, { updatedUsers, callApiFn, userId, statusId }) {
       commit('SWAP_USERS', updatedUsers)
 
       try {
@@ -96,29 +96,30 @@ const users = {
       } finally {
         dispatch('SearchUsers', { query: state.searchQuery, page: state.currentPage })
       }
-
-      if (userId) {
+      if (statusId) {
+        dispatch('FetchStatus', statusId)
+      } else if (userId) {
         dispatch('FetchUserProfile', { userId, godmode: false })
       }
       dispatch('SuccessMessage')
     },
-    async AddRight({ dispatch, getters }, { users, right, _userId }) {
+    async AddRight({ dispatch, getters }, { users, right, _userId, _statusId }) {
       const updatedUsers = users.map(user => {
         return user.local ? { ...user, roles: { ...user.roles, [right]: true }} : user
       })
       const nicknames = users.map(user => user.nickname)
       const callApiFn = async() => await addRight(nicknames, right, getters.authHost, getters.token)
 
-      dispatch('ApplyChanges', { updatedUsers, callApiFn, userId: _userId })
+      dispatch('ApplyChanges', { updatedUsers, callApiFn, userId: _userId, statusId: _statusId })
     },
-    async AddTag({ dispatch, getters }, { users, tag, _userId }) {
+    async AddTag({ dispatch, getters }, { users, tag, _userId, _statusId }) {
       const updatedUsers = users.map(user => {
         return { ...user, tags: [...user.tags, tag] }
       })
       const nicknames = users.map(user => user.nickname)
       const callApiFn = async() => await tagUser(nicknames, [tag], getters.authHost, getters.token)
 
-      dispatch('ApplyChanges', { updatedUsers, callApiFn, userId: _userId })
+      dispatch('ApplyChanges', { updatedUsers, callApiFn, userId: _userId, statusId: _statusId })
     },
     async ClearFilters({ commit, dispatch, state }) {
       commit('CLEAR_USERS_FILTERS')
@@ -134,23 +135,23 @@ const users = {
       }
       dispatch('SuccessMessage')
     },
-    async DeactivateUsers({ dispatch, getters }, { users, _userId }) {
+    async DeactivateUsers({ dispatch, getters }, { users, _userId, _statusId }) {
       const updatedUsers = users.map(user => {
         return { ...user, deactivated: true }
       })
       const nicknames = users.map(user => user.nickname)
       const callApiFn = async() => await deactivateUsers(nicknames, getters.authHost, getters.token)
 
-      dispatch('ApplyChanges', { updatedUsers, callApiFn, userId: _userId })
+      dispatch('ApplyChanges', { updatedUsers, callApiFn, userId: _userId, statusId: _statusId })
     },
-    async ConfirmUsersEmail({ dispatch, getters }, { users, _userId }) {
+    async ConfirmUsersEmail({ dispatch, getters }, { users, _userId, _statusId }) {
       const updatedUsers = users.map(user => {
         return { ...user, confirmation_pending: false }
       })
       const nicknames = users.map(user => user.nickname)
       const callApiFn = async() => await confirmUserEmail(nicknames, getters.authHost, getters.token)
 
-      dispatch('ApplyChanges', { updatedUsers, callApiFn, userId: _userId })
+      dispatch('ApplyChanges', { updatedUsers, callApiFn, userId: _userId, statusId: _statusId })
     },
     async ResendConfirmationEmail({ dispatch, getters }, users) {
       const usersNicknames = users.map(user => user.nickname)
@@ -161,16 +162,16 @@ const users = {
       }
       dispatch('SuccessMessage')
     },
-    async DeleteRight({ dispatch, getters }, { users, right, _userId }) {
+    async DeleteRight({ dispatch, getters }, { users, right, _userId, _statusId }) {
       const updatedUsers = users.map(user => {
         return user.local ? { ...user, roles: { ...user.roles, [right]: false }} : user
       })
       const nicknames = users.map(user => user.nickname)
       const callApiFn = async() => await deleteRight(nicknames, right, getters.authHost, getters.token)
 
-      dispatch('ApplyChanges', { updatedUsers, callApiFn, userId: _userId })
+      dispatch('ApplyChanges', { updatedUsers, callApiFn, userId: _userId, statusId: _statusId })
     },
-    async DeleteUsers({ commit, dispatch, getters, state }, { users, _userId }) {
+    async DeleteUsers({ commit, dispatch, getters, state }, { users, _userId, _statusId }) {
       const usersNicknames = users.map(user => user.nickname)
       try {
         await deleteUsers(usersNicknames, getters.authHost, getters.token)
@@ -181,7 +182,7 @@ const users = {
       const updatedUsers = state.fetchedUsers.filter(user => !deletedUsersIds.includes(user.id))
       commit('SET_USERS', updatedUsers)
 
-      dispatch('FetchUserProfile', { userId: _userId, godmode: false })
+      dispatch('FetchUserProfile', { userId: _userId, statusId: _statusId, godmode: false })
       dispatch('SuccessMessage')
     },
     async FetchUsers({ commit, dispatch, getters, state }, { page }) {
@@ -198,14 +199,14 @@ const users = {
     RemovePasswordToken({ commit }) {
       commit('SET_PASSWORD_RESET_TOKEN', { link: '', token: '' })
     },
-    async RemoveTag({ dispatch, getters }, { users, tag, _userId }) {
+    async RemoveTag({ dispatch, getters }, { users, tag, _userId, _statusId }) {
       const updatedUsers = users.map(user => {
         return { ...user, tags: user.tags.filter(userTag => userTag !== tag) }
       })
       const nicknames = users.map(user => user.nickname)
       const callApiFn = async() => await untagUser(nicknames, [tag], getters.authHost, getters.token)
 
-      dispatch('ApplyChanges', { updatedUsers, callApiFn, userId: _userId })
+      dispatch('ApplyChanges', { updatedUsers, callApiFn, userId: _userId, statusId: _statusId })
     },
     async RequirePasswordReset({ dispatch, getters }, users) {
       const nicknames = users.map(user => user.nickname)
diff --git a/src/views/users/components/ModerationDropdown.vue b/src/views/users/components/ModerationDropdown.vue
index a893b5d5..33db5cf8 100644
--- a/src/views/users/components/ModerationDropdown.vue
+++ b/src/views/users/components/ModerationDropdown.vue
@@ -5,7 +5,7 @@
         {{ $t('users.moderation') }}
         <i v-if="isDesktop" class="el-icon-arrow-down el-icon--right"/>
       </span>
-      <el-button v-if="page === 'userPage'" class="moderate-user-button">
+      <el-button v-if="page === 'userPage' || page === 'statusPage'" class="moderate-user-button">
         <span class="moderate-user-button-container">
           <span>
             <i class="el-icon-edit" />
@@ -115,6 +115,10 @@ export default {
     page: {
       type: String,
       default: 'users'
+    },
+    statusId: {
+      type: String,
+      default: ''
     }
   },
   computed: {
@@ -131,10 +135,10 @@ export default {
       this.$store.dispatch('ResendConfirmationEmail', [user])
     },
     handleDeletion(user) {
-      this.$store.dispatch('DeleteUsers', { users: [user], _userId: user.id })
+      this.$store.dispatch('DeleteUsers', { users: [user], _userId: user.id, _statusId: this.statusId })
     },
     handleEmailConfirmation(user) {
-      this.$store.dispatch('ConfirmUsersEmail', { users: [user], _userId: user.id })
+      this.$store.dispatch('ConfirmUsersEmail', { users: [user], _userId: user.id, _statusId: this.statusId })
     },
     requirePasswordReset(user) {
       const mailerEnabled = this.$store.state.user.nodeInfo.metadata.mailerEnabled
@@ -152,18 +156,18 @@ export default {
     },
     toggleActivation(user) {
       user.deactivated
-        ? this.$store.dispatch('ActivateUsers', { users: [user], _userId: user.id })
-        : this.$store.dispatch('DeactivateUsers', { users: [user], _userId: user.id })
+        ? this.$store.dispatch('ActivateUsers', { users: [user], _userId: user.id, _statusId: this.statusId })
+        : this.$store.dispatch('DeactivateUsers', { users: [user], _userId: user.id, _statusId: this.statusId })
     },
     toggleTag(user, tag) {
       user.tags.includes(tag)
-        ? this.$store.dispatch('RemoveTag', { users: [user], tag, _userId: user.id })
-        : this.$store.dispatch('AddTag', { users: [user], tag, _userId: user.id })
+        ? this.$store.dispatch('RemoveTag', { users: [user], tag, _userId: user.id, _statusId: this.statusId })
+        : this.$store.dispatch('AddTag', { users: [user], tag, _userId: user.id, _statusId: this.statusId })
     },
     toggleUserRight(user, right) {
       user.roles[right]
-        ? this.$store.dispatch('DeleteRight', { users: [user], right, _userId: user.id })
-        : this.$store.dispatch('AddRight', { users: [user], right, _userId: user.id })
+        ? this.$store.dispatch('DeleteRight', { users: [user], right, _userId: user.id, _statusId: this.statusId })
+        : this.$store.dispatch('AddRight', { users: [user], right, _userId: user.id, _statusId: this.statusId })
     }
   }
 }

From 4b701ced5f00e819827e8a1bf66cb9fc633da8d4 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Tue, 19 May 2020 23:30:50 +0300
Subject: [PATCH 15/33] Remove ability to deactivate account from a status view
 page

---
 src/store/modules/users.js                        | 12 ++++++------
 src/views/users/components/ModerationDropdown.vue | 10 +++++-----
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/store/modules/users.js b/src/store/modules/users.js
index 13d1e378..e86bcd49 100644
--- a/src/store/modules/users.js
+++ b/src/store/modules/users.js
@@ -77,14 +77,14 @@ const users = {
     }
   },
   actions: {
-    async ActivateUsers({ dispatch, getters }, { users, _userId, _statusId }) {
+    async ActivateUsers({ dispatch, getters }, { users, _userId }) {
       const updatedUsers = users.map(user => {
         return { ...user, deactivated: false }
       })
       const nicknames = users.map(user => user.nickname)
       const callApiFn = async() => await activateUsers(nicknames, getters.authHost, getters.token)
 
-      dispatch('ApplyChanges', { updatedUsers, callApiFn, userId: _userId, statusId: _statusId })
+      dispatch('ApplyChanges', { updatedUsers, callApiFn, userId: _userId })
     },
     async ApplyChanges({ commit, dispatch, state }, { updatedUsers, callApiFn, userId, statusId }) {
       commit('SWAP_USERS', updatedUsers)
@@ -135,14 +135,14 @@ const users = {
       }
       dispatch('SuccessMessage')
     },
-    async DeactivateUsers({ dispatch, getters }, { users, _userId, _statusId }) {
+    async DeactivateUsers({ dispatch, getters }, { users, _userId }) {
       const updatedUsers = users.map(user => {
         return { ...user, deactivated: true }
       })
       const nicknames = users.map(user => user.nickname)
       const callApiFn = async() => await deactivateUsers(nicknames, getters.authHost, getters.token)
 
-      dispatch('ApplyChanges', { updatedUsers, callApiFn, userId: _userId, statusId: _statusId })
+      dispatch('ApplyChanges', { updatedUsers, callApiFn, userId: _userId })
     },
     async ConfirmUsersEmail({ dispatch, getters }, { users, _userId, _statusId }) {
       const updatedUsers = users.map(user => {
@@ -171,7 +171,7 @@ const users = {
 
       dispatch('ApplyChanges', { updatedUsers, callApiFn, userId: _userId, statusId: _statusId })
     },
-    async DeleteUsers({ commit, dispatch, getters, state }, { users, _userId, _statusId }) {
+    async DeleteUsers({ commit, dispatch, getters, state }, { users, _userId }) {
       const usersNicknames = users.map(user => user.nickname)
       try {
         await deleteUsers(usersNicknames, getters.authHost, getters.token)
@@ -182,7 +182,7 @@ const users = {
       const updatedUsers = state.fetchedUsers.filter(user => !deletedUsersIds.includes(user.id))
       commit('SET_USERS', updatedUsers)
 
-      dispatch('FetchUserProfile', { userId: _userId, statusId: _statusId, godmode: false })
+      dispatch('FetchUserProfile', { userId: _userId, godmode: false })
       dispatch('SuccessMessage')
     },
     async FetchUsers({ commit, dispatch, getters, state }, { page }) {
diff --git a/src/views/users/components/ModerationDropdown.vue b/src/views/users/components/ModerationDropdown.vue
index 33db5cf8..dc1b74f5 100644
--- a/src/views/users/components/ModerationDropdown.vue
+++ b/src/views/users/components/ModerationDropdown.vue
@@ -27,13 +27,13 @@
         {{ user.roles.moderator ? $t('users.revokeModerator') : $t('users.grantModerator') }}
       </el-dropdown-item>
       <el-dropdown-item
-        v-if="showDeactivatedButton(user.id)"
+        v-if="showDeactivatedButton(user.id) && page !== 'statusPage'"
         :divided="showAdminAction(user)"
         @click.native="toggleActivation(user)">
         {{ user.deactivated ? $t('users.activateAccount') : $t('users.deactivateAccount') }}
       </el-dropdown-item>
       <el-dropdown-item
-        v-if="showDeactivatedButton(user.id)"
+        v-if="showDeactivatedButton(user.id) && page !== 'statusPage'"
         @click.native="handleDeletion(user)">
         {{ $t('users.deleteAccount') }}
       </el-dropdown-item>
@@ -135,7 +135,7 @@ export default {
       this.$store.dispatch('ResendConfirmationEmail', [user])
     },
     handleDeletion(user) {
-      this.$store.dispatch('DeleteUsers', { users: [user], _userId: user.id, _statusId: this.statusId })
+      this.$store.dispatch('DeleteUsers', { users: [user], _userId: user.id })
     },
     handleEmailConfirmation(user) {
       this.$store.dispatch('ConfirmUsersEmail', { users: [user], _userId: user.id, _statusId: this.statusId })
@@ -156,8 +156,8 @@ export default {
     },
     toggleActivation(user) {
       user.deactivated
-        ? this.$store.dispatch('ActivateUsers', { users: [user], _userId: user.id, _statusId: this.statusId })
-        : this.$store.dispatch('DeactivateUsers', { users: [user], _userId: user.id, _statusId: this.statusId })
+        ? this.$store.dispatch('ActivateUsers', { users: [user], _userId: user.id })
+        : this.$store.dispatch('DeactivateUsers', { users: [user], _userId: user.id })
     },
     toggleTag(user, tag) {
       user.tags.includes(tag)

From 1d2ecc52559ca2c809fd89bc6f154fae76f7fa29 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Wed, 20 May 2020 22:40:25 +0300
Subject: [PATCH 16/33] Extract Reset Password Dialog into separate component

---
 .../users/components/ResetPasswordDialog.vue  | 58 +++++++++++++++++++
 src/views/users/index.vue                     | 30 ++--------
 src/views/users/show.vue                      | 25 ++------
 3 files changed, 68 insertions(+), 45 deletions(-)
 create mode 100644 src/views/users/components/ResetPasswordDialog.vue

diff --git a/src/views/users/components/ResetPasswordDialog.vue b/src/views/users/components/ResetPasswordDialog.vue
new file mode 100644
index 00000000..b1c9cebb
--- /dev/null
+++ b/src/views/users/components/ResetPasswordDialog.vue
@@ -0,0 +1,58 @@
+<template>
+  <el-dialog
+    v-loading="loading"
+    :visible="dialogOpen"
+    :title="$t('users.passwordResetTokenCreated')"
+    custom-class="password-reset-token-dialog"
+    @close="closeResetPasswordDialog">
+    <div>
+      <p class="password-reset-token">Password reset token was generated: {{ passwordResetToken }}</p>
+      <p>You can also use this link to reset password:
+        <a :href="passwordResetLink" target="_blank" class="reset-password-link">{{ passwordResetLink }}</a>
+      </p>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  name: 'ResetPasswordDialog',
+  props: {
+    resetPasswordDialogOpen: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    dialogOpen() {
+      return this.resetPasswordDialogOpen
+    },
+    loading() {
+      return this.$store.state.users.loading
+    },
+    passwordResetLink() {
+      return this.$store.state.users.passwordResetToken.link
+    },
+    passwordResetToken() {
+      return this.$store.state.users.passwordResetToken.token
+    }
+  },
+  methods: {
+    closeResetPasswordDialog() {
+      this.$emit('close-reset-token-dialog')
+    }
+  }
+}
+</script>
+
+<style rel='stylesheet/scss' lang='scss'>
+.password-reset-token-dialog {
+  width: 50%
+}
+
+@media only screen and (max-width:480px) {
+  .password-reset-token-dialog {
+    width: 85%
+  }
+}
+</style>
diff --git a/src/views/users/index.vue b/src/views/users/index.vue
index 6d6deb47..79a02d39 100644
--- a/src/views/users/index.vue
+++ b/src/views/users/index.vue
@@ -81,19 +81,9 @@
         </template>
       </el-table-column>
     </el-table>
-    <el-dialog
-      v-loading="loading"
-      :visible.sync="resetPasswordDialogOpen"
-      :title="$t('users.passwordResetTokenCreated')"
-      custom-class="password-reset-token-dialog"
-      @close="closeResetPasswordDialog">
-      <div>
-        <p class="password-reset-token">Password reset token was generated: {{ passwordResetToken }}</p>
-        <p>You can also use this link to reset password:
-          <a :href="passwordResetLink" target="_blank" class="reset-password-link">{{ passwordResetLink }}</a>
-        </p>
-      </div>
-    </el-dialog>
+    <reset-password-dialog
+      :reset-password-dialog-open="resetPasswordDialogOpen"
+      @close-reset-token-dialog="closeResetPasswordDialog"/>
     <div v-if="!loading" class="pagination">
       <el-pagination
         :total="usersCount"
@@ -115,6 +105,7 @@ import MultipleUsersMenu from './components/MultipleUsersMenu'
 import NewAccountDialog from './components/NewAccountDialog'
 import ModerationDropdown from './components/ModerationDropdown'
 import RebootButton from '@/components/RebootButton'
+import ResetPasswordDialog from './components/ResetPasswordDialog'
 
 export default {
   name: 'Users',
@@ -123,6 +114,7 @@ export default {
     ModerationDropdown,
     MultipleUsersMenu,
     RebootButton,
+    ResetPasswordDialog,
     UsersFilter
   },
   data() {
@@ -149,12 +141,6 @@ export default {
     pageSize() {
       return this.$store.state.users.pageSize
     },
-    passwordResetLink() {
-      return this.$store.state.users.passwordResetToken.link
-    },
-    passwordResetToken() {
-      return this.$store.state.users.passwordResetToken.token
-    },
     currentPage() {
       return this.$store.state.users.currentPage
     },
@@ -256,9 +242,6 @@ export default {
 .password-reset-token {
   margin: 0 0 14px 0;
 }
-.password-reset-token-dialog {
-  width: 50%
-}
 .reset-password-link {
   text-decoration: underline;
 }
@@ -295,9 +278,6 @@ export default {
 }
 
 @media only screen and (max-width:480px) {
-  .password-reset-token-dialog {
-    width: 85%
-  }
   .users-container {
     h1 {
       margin: 0;
diff --git a/src/views/users/show.vue b/src/views/users/show.vue
index b97e1f12..5bf7ac36 100644
--- a/src/views/users/show.vue
+++ b/src/views/users/show.vue
@@ -26,19 +26,9 @@
         :page="'userPage'"
         @open-reset-token-dialog="openResetPasswordDialog"/>
     </div>
-    <el-dialog
-      v-loading="loading"
-      :visible.sync="resetPasswordDialogOpen"
-      :title="$t('users.passwordResetTokenCreated')"
-      custom-class="password-reset-token-dialog"
-      @close="closeResetPasswordDialog">
-      <div>
-        <p class="password-reset-token">Password reset token was generated: {{ passwordResetToken }}</p>
-        <p>You can also use this link to reset password:
-          <a :href="passwordResetLink" target="_blank" class="reset-password-link">{{ passwordResetLink }}</a>
-        </p>
-      </div>
-    </el-dialog>
+    <reset-password-dialog
+      :reset-password-dialog-open="resetPasswordDialogOpen"
+      @close-reset-token-dialog="closeResetPasswordDialog"/>
     <div class="user-profile-container">
       <el-card class="user-profile-card">
         <div class="el-table el-table--fit el-table--enable-row-hover el-table--enable-row-transition el-table--medium">
@@ -121,10 +111,11 @@ import Status from '@/components/Status'
 import ModerationDropdown from './components/ModerationDropdown'
 import SecuritySettingsModal from './components/SecuritySettingsModal'
 import RebootButton from '@/components/RebootButton'
+import ResetPasswordDialog from './components/ResetPasswordDialog'
 
 export default {
   name: 'UsersShow',
-  components: { ModerationDropdown, RebootButton, Status, SecuritySettingsModal },
+  components: { ModerationDropdown, RebootButton, ResetPasswordDialog, Status, SecuritySettingsModal },
   data() {
     return {
       showPrivate: false,
@@ -145,12 +136,6 @@ export default {
     loading() {
       return this.$store.state.users.loading
     },
-    passwordResetLink() {
-      return this.$store.state.users.passwordResetToken.link
-    },
-    passwordResetToken() {
-      return this.$store.state.users.passwordResetToken.token
-    },
     statuses() {
       return this.$store.state.userProfile.statuses
     },

From 7aea244706ba2db50bd7cb535d40cd7a961b62be Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Wed, 20 May 2020 23:10:32 +0300
Subject: [PATCH 17/33] Render dialog window for resetting password on Status
 view page, fix styles

---
 src/views/statuses/show.vue                   | 22 ++++++++++++++++++-
 .../users/components/ResetPasswordDialog.vue  | 11 ----------
 src/views/users/index.vue                     | 18 ++++++++++-----
 src/views/users/show.vue                      | 13 ++++++++++-
 4 files changed, 45 insertions(+), 19 deletions(-)

diff --git a/src/views/statuses/show.vue b/src/views/statuses/show.vue
index 30aae947..96303040 100644
--- a/src/views/statuses/show.vue
+++ b/src/views/statuses/show.vue
@@ -27,6 +27,9 @@
         :page="'userPage'"
         @open-reset-token-dialog="openResetPasswordDialog"/>
     </div>
+    <reset-password-dialog
+      :reset-password-dialog-open="resetPasswordDialogOpen"
+      @close-reset-token-dialog="closeResetPasswordDialog"/>
     <div class="status-container">
       <status :status="status" :account="user" :show-checkbox="false" :godmode="showPrivate"/>
     </div>
@@ -49,10 +52,11 @@
 import Status from '@/components/Status'
 import ModerationDropdown from '../users/components/ModerationDropdown'
 import RebootButton from '@/components/RebootButton'
+import ResetPasswordDialog from '@/views/users/components/ResetPasswordDialog'
 
 export default {
   name: 'UsersShow',
-  components: { ModerationDropdown, RebootButton, Status },
+  components: { ModerationDropdown, RebootButton, ResetPasswordDialog, Status },
   data() {
     return {
       showPrivate: false,
@@ -94,6 +98,10 @@ export default {
     accountExists(account, key) {
       return account[key]
     },
+    closeResetPasswordDialog() {
+      this.resetPasswordDialogOpen = false
+      this.$store.dispatch('RemovePasswordToken')
+    },
     onTogglePrivate() {
       this.$store.dispatch('FetchUserStatuses', { userId: this.user.id, godmode: this.showPrivate })
     },
@@ -113,6 +121,12 @@ export default {
   margin-left: 28px;
   color: #606266;
 }
+.password-reset-token {
+  margin: 0 0 14px 0;
+}
+.password-reset-token-dialog {
+  width: 50%
+}
 .reboot-button {
   padding: 10px;
   margin-left: 6px;
@@ -124,6 +138,9 @@ export default {
   display: flex;
   flex-direction: column;
 }
+.reset-password-link {
+  text-decoration: underline;
+}
 .show-private-statuses {
   margin-left: 28px;
   margin-bottom: 20px;
@@ -164,6 +181,9 @@ export default {
     display: flex;
     justify-content: space-between;
   }
+  .password-reset-token-dialog {
+    width: 85%
+  }
   .recent-statuses {
     margin: 20px 10px 15px 10px;
   }
diff --git a/src/views/users/components/ResetPasswordDialog.vue b/src/views/users/components/ResetPasswordDialog.vue
index b1c9cebb..b70f289d 100644
--- a/src/views/users/components/ResetPasswordDialog.vue
+++ b/src/views/users/components/ResetPasswordDialog.vue
@@ -45,14 +45,3 @@ export default {
 }
 </script>
 
-<style rel='stylesheet/scss' lang='scss'>
-.password-reset-token-dialog {
-  width: 50%
-}
-
-@media only screen and (max-width:480px) {
-  .password-reset-token-dialog {
-    width: 85%
-  }
-}
-</style>
diff --git a/src/views/users/index.vue b/src/views/users/index.vue
index 79a02d39..4c28f9b8 100644
--- a/src/views/users/index.vue
+++ b/src/views/users/index.vue
@@ -234,17 +234,20 @@ export default {
 .create-account > .el-icon-plus {
   margin-right: 5px;
 }
+.password-reset-token {
+  margin: 0 0 14px 0;
+}
+.password-reset-token-dialog {
+  width: 50%
+}
+.reset-password-link {
+  text-decoration: underline;
+}
 .users-header-container {
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
-.password-reset-token {
-  margin: 0 0 14px 0;
-}
-.reset-password-link {
-  text-decoration: underline;
-}
 .users-container {
   h1 {
     margin: 10px 0 0 15px;
@@ -278,6 +281,9 @@ export default {
 }
 
 @media only screen and (max-width:480px) {
+  .password-reset-token-dialog {
+    width: 85%
+  }
   .users-container {
     h1 {
       margin: 0;
diff --git a/src/views/users/show.vue b/src/views/users/show.vue
index 5bf7ac36..91f36064 100644
--- a/src/views/users/show.vue
+++ b/src/views/users/show.vue
@@ -192,7 +192,6 @@ table {
   display: flex;
   align-items: center;
 }
-
 .el-table--border::after, .el-table--group::after, .el-table::before {
   background-color: transparent;
 }
@@ -211,6 +210,12 @@ table {
   margin-left: 28px;
   color: #606266;
 }
+.password-reset-token {
+  margin: 0 0 14px 0;
+}
+.password-reset-token-dialog {
+  width: 50%
+}
 .poll ul {
   list-style-type: none;
   padding: 0;
@@ -228,6 +233,9 @@ table {
 .recent-statuses-header {
   margin-top: 10px;
 }
+.reset-password-link {
+  text-decoration: underline;
+}
 .security-setting-button {
   margin-top: 20px;
   width: 100%;
@@ -279,6 +287,9 @@ table {
   .el-timeline-item__wrapper {
     padding-left: 18px;
   }
+  .password-reset-token-dialog {
+    width: 85%
+  }
   .recent-statuses {
     margin: 20px 10px 15px 10px;
   }

From 8d7ffcca893db2fd123bcd114c8659f0afc27d51 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Fri, 22 May 2020 21:02:20 +0300
Subject: [PATCH 18/33] Fix styles on Status show page

---
 src/views/statuses/show.vue | 28 ++++++++++++++++------------
 1 file changed, 16 insertions(+), 12 deletions(-)

diff --git a/src/views/statuses/show.vue b/src/views/statuses/show.vue
index 96303040..d641399a 100644
--- a/src/views/statuses/show.vue
+++ b/src/views/statuses/show.vue
@@ -33,7 +33,7 @@
     <div class="status-container">
       <status :status="status" :account="user" :show-checkbox="false" :godmode="showPrivate"/>
     </div>
-    <div class="recent-statuses-container">
+    <div class="recent-statuses-container-show">
       <h2 class="recent-statuses">{{ $t('userProfile.recentStatuses') }} by {{ user.display_name }}</h2>
       <el-checkbox v-model="showPrivate" class="show-private-statuses" @change="onTogglePrivate">
         {{ $t('statuses.showPrivateStatuses') }}
@@ -131,20 +131,24 @@ export default {
   padding: 10px;
   margin-left: 6px;
 }
-.recent-statuses {
-  margin-left: 28px;
-}
-.recent-statuses-container {
+
+.recent-statuses-container-show {
   display: flex;
   flex-direction: column;
+  .el-timeline-item {
+    margin-left: 20px;
+  }
+  .recent-statuses {
+    margin-left: 20px;
+  }
+  .show-private-statuses {
+    margin-left: 20px;
+    margin-bottom: 20px;
+  }
 }
 .reset-password-link {
   text-decoration: underline;
 }
-.show-private-statuses {
-  margin-left: 28px;
-  margin-bottom: 20px;
-}
 .status-container {
   margin: 0 15px 0 20px;
 }
@@ -187,9 +191,9 @@ export default {
   .recent-statuses {
     margin: 20px 10px 15px 10px;
   }
-  .recent-statuses-container {
+  .recent-statuses-container-show {
     width: 100%;
-    margin: 0;
+    margin: 0 0 0 15px;
   }
   .show-private-statuses {
     margin: 0 10px 20px 10px;
@@ -216,7 +220,7 @@ export default {
   .recent-statuses {
     margin: 20px 10px 15px 0;
   }
-  .recent-statuses-container {
+  .recent-statuses-container-show {
     width: 97%;
     margin: 0 20px;
   }

From 38c3c085332b0a2a3ff0bfc60d8c5e9dd932f544 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Fri, 22 May 2020 21:47:18 +0300
Subject: [PATCH 19/33] Fetch single status after its scope was updated

---
 src/store/modules/status.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/store/modules/status.js b/src/store/modules/status.js
index e0eccb62..af29f389 100644
--- a/src/store/modules/status.js
+++ b/src/store/modules/status.js
@@ -64,6 +64,8 @@ const status = {
         dispatch('FetchUserStatuses', { userId, godmode })
       } else if (fetchStatusesByInstance) { // called from Statuses by Instance
         dispatch('FetchStatusesByInstance')
+      } else { // called from Status show page
+        dispatch('FetchStatus', statusId)
       }
     },
     async DeleteStatus({ dispatch, getters }, { statusId, reportCurrentPage, userId, godmode, fetchStatusesByInstance }) {

From 7ca28c7c75473a235bd520a5ae6a720c7adc5942 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Sat, 23 May 2020 00:51:46 +0300
Subject: [PATCH 20/33] Add stop propagation event modifier

---
 src/components/Status/index.vue | 196 ++++++++++++++++----------------
 1 file changed, 99 insertions(+), 97 deletions(-)

diff --git a/src/components/Status/index.vue b/src/components/Status/index.vue
index e6d39e82..aa327af3 100644
--- a/src/components/Status/index.vue
+++ b/src/components/Status/index.vue
@@ -1,84 +1,68 @@
 <template>
-  <router-link :to="{ name: 'StatusShow', params: { id: status.id }}">
-    <el-card v-if="!status.deleted" class="status-card">
-      <div slot="header">
-        <div class="status-header">
-          <div class="status-account-container">
-            <div class="status-account">
-              <el-checkbox v-if="showCheckbox" class="status-checkbox" @change="handleStatusSelection(account)"/>
-              <img :src="account.avatar" class="status-avatar-img">
-              <a v-if="!account.deactivated" :href="account.url" target="_blank" class="account">
-                <h3 class="status-account-name">{{ account.display_name }}</h3>
-              </a>
-              <span v-else>
-                <h3 class="status-account-name">{{ account.display_name }}</h3>
-                <h3 class="status-account-name deactivated"> (deactivated)</h3>
-              </span>
-            </div>
-          </div>
-          <div class="status-actions">
-            <el-tag v-if="status.sensitive" type="warning" size="large">{{ $t('reports.sensitive') }}</el-tag>
-            <el-tag size="large">{{ capitalizeFirstLetter(status.visibility) }}</el-tag>
-            <el-dropdown trigger="click">
-              <el-button plain size="small" icon="el-icon-edit" class="status-actions-button">
-                {{ $t('reports.changeScope') }}<i class="el-icon-arrow-down el-icon--right"/>
-              </el-button>
-              <el-dropdown-menu slot="dropdown">
-                <el-dropdown-item
-                  v-if="!status.sensitive"
-                  @click.native="changeStatus(status.id, true, status.visibility)">
-                  {{ $t('reports.addSensitive') }}
-                </el-dropdown-item>
-                <el-dropdown-item
-                  v-if="status.sensitive"
-                  @click.native="changeStatus(status.id, false, status.visibility)">
-                  {{ $t('reports.removeSensitive') }}
-                </el-dropdown-item>
-                <el-dropdown-item
-                  v-if="status.visibility !== 'public'"
-                  @click.native="changeStatus(status.id, status.sensitive, 'public')">
-                  {{ $t('reports.public') }}
-                </el-dropdown-item>
-                <el-dropdown-item
-                  v-if="status.visibility !== 'private'"
-                  @click.native="changeStatus(status.id, status.sensitive, 'private')">
-                  {{ $t('reports.private') }}
-                </el-dropdown-item>
-                <el-dropdown-item
-                  v-if="status.visibility !== 'unlisted'"
-                  @click.native="changeStatus(status.id, status.sensitive, 'unlisted')">
-                  {{ $t('reports.unlisted') }}
-                </el-dropdown-item>
-                <el-dropdown-item
-                  @click.native="deleteStatus(status.id)">
-                  {{ $t('reports.deleteStatus') }}
-                </el-dropdown-item>
-              </el-dropdown-menu>
-            </el-dropdown>
+  <el-card v-if="!status.deleted" class="status-card" @click.native="handleRouteChange()">
+    <div slot="header">
+      <div class="status-header">
+        <div class="status-account-container">
+          <div class="status-account">
+            <el-checkbox v-if="showCheckbox" class="status-checkbox" @change="handleStatusSelection(account)"/>
+            <img :src="account.avatar" class="status-avatar-img">
+            <a v-if="!account.deactivated" :href="account.url" target="_blank" class="account">
+              <h3 class="status-account-name">{{ account.display_name }}</h3>
+            </a>
+            <span v-else>
+              <h3 class="status-account-name">{{ account.display_name }}</h3>
+              <h3 class="status-account-name deactivated"> (deactivated)</h3>
+            </span>
           </div>
         </div>
+        <div class="status-actions">
+          <el-tag v-if="status.sensitive" type="warning" size="large">{{ $t('reports.sensitive') }}</el-tag>
+          <el-tag size="large">{{ capitalizeFirstLetter(status.visibility) }}</el-tag>
+          <el-dropdown trigger="click" @click.native.stop>
+            <el-button plain size="small" icon="el-icon-edit" class="status-actions-button">
+              {{ $t('reports.changeScope') }}<i class="el-icon-arrow-down el-icon--right"/>
+            </el-button>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item
+                v-if="!status.sensitive"
+                @click.native="changeStatus(status.id, true, status.visibility)">
+                {{ $t('reports.addSensitive') }}
+              </el-dropdown-item>
+              <el-dropdown-item
+                v-if="status.sensitive"
+                @click.native="changeStatus(status.id, false, status.visibility)">
+                {{ $t('reports.removeSensitive') }}
+              </el-dropdown-item>
+              <el-dropdown-item
+                v-if="status.visibility !== 'public'"
+                @click.native="changeStatus(status.id, status.sensitive, 'public')">
+                {{ $t('reports.public') }}
+              </el-dropdown-item>
+              <el-dropdown-item
+                v-if="status.visibility !== 'private'"
+                @click.native="changeStatus(status.id, status.sensitive, 'private')">
+                {{ $t('reports.private') }}
+              </el-dropdown-item>
+              <el-dropdown-item
+                v-if="status.visibility !== 'unlisted'"
+                @click.native="changeStatus(status.id, status.sensitive, 'unlisted')">
+                {{ $t('reports.unlisted') }}
+              </el-dropdown-item>
+              <el-dropdown-item
+                @click.native="deleteStatus(status.id)">
+                {{ $t('reports.deleteStatus') }}
+              </el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+        </div>
       </div>
-      <div class="status-body">
-        <div v-if="status.spoiler_text">
-          <strong>{{ status.spoiler_text }}</strong>
-          <el-button v-if="!showHiddenStatus" size="mini" class="show-more-button" @click="showHiddenStatus = true">Show more</el-button>
-          <el-button v-if="showHiddenStatus" size="mini" class="show-more-button" @click="showHiddenStatus = false">Show less</el-button>
-          <div v-if="showHiddenStatus">
-            <span class="status-content" v-html="status.content"/>
-            <div v-if="status.poll" class="poll">
-              <ul>
-                <li v-for="(option, index) in status.poll.options" :key="index">
-                  {{ option.title }}
-                  <el-progress :percentage="optionPercent(status.poll, option)" />
-                </li>
-              </ul>
-            </div>
-            <div v-for="(attachment, index) in status.media_attachments" :key="index" class="image">
-              <img :src="attachment.preview_url">
-            </div>
-          </div>
-        </div>
-        <div v-if="!status.spoiler_text">
+    </div>
+    <div class="status-body">
+      <div v-if="status.spoiler_text">
+        <strong>{{ status.spoiler_text }}</strong>
+        <el-button v-if="!showHiddenStatus" size="mini" class="show-more-button" @click="showHiddenStatus = true">Show more</el-button>
+        <el-button v-if="showHiddenStatus" size="mini" class="show-more-button" @click="showHiddenStatus = false">Show less</el-button>
+        <div v-if="showHiddenStatus">
           <span class="status-content" v-html="status.content"/>
           <div v-if="status.poll" class="poll">
             <ul>
@@ -92,30 +76,44 @@
             <img :src="attachment.preview_url">
           </div>
         </div>
-        <a :href="status.url" target="_blank" class="account">
-          {{ parseTimestamp(status.created_at) }}
-        </a>
       </div>
-    </el-card>
-    <el-card v-else class="status-card">
-      <div slot="header">
-        <div class="status-header">
-          <div class="status-account-container">
-            <div class="status-account">
-              <h4 class="status-deleted">{{ $t('reports.statusDeleted') }}</h4>
-            </div>
+      <div v-if="!status.spoiler_text">
+        <span class="status-content" v-html="status.content"/>
+        <div v-if="status.poll" class="poll">
+          <ul>
+            <li v-for="(option, index) in status.poll.options" :key="index">
+              {{ option.title }}
+              <el-progress :percentage="optionPercent(status.poll, option)" />
+            </li>
+          </ul>
+        </div>
+        <div v-for="(attachment, index) in status.media_attachments" :key="index" class="image">
+          <img :src="attachment.preview_url">
+        </div>
+      </div>
+      <a :href="status.url" target="_blank" class="account" @click.stop>
+        {{ parseTimestamp(status.created_at) }}
+      </a>
+    </div>
+  </el-card>
+  <el-card v-else class="status-card">
+    <div slot="header">
+      <div class="status-header">
+        <div class="status-account-container">
+          <div class="status-account">
+            <h4 class="status-deleted">{{ $t('reports.statusDeleted') }}</h4>
           </div>
         </div>
       </div>
-      <div class="status-body">
-        <span v-if="status.content" class="status-content" v-html="status.content"/>
-        <span v-else class="status-without-content">no content</span>
-      </div>
-      <a v-if="status.created_at" :href="status.url" target="_blank" class="account">
-        {{ parseTimestamp(status.created_at) }}
-      </a>
-    </el-card>
-  </router-link>
+    </div>
+    <div class="status-body">
+      <span v-if="status.content" class="status-content" v-html="status.content"/>
+      <span v-else class="status-without-content">no content</span>
+    </div>
+    <a v-if="status.created_at" :href="status.url" target="_blank" class="account">
+      {{ parseTimestamp(status.created_at) }}
+    </a>
+  </el-card>
 </template>
 
 <script>
@@ -215,6 +213,9 @@ export default {
     },
     handleStatusSelection(account) {
       this.$emit('status-selection', account)
+    },
+    handleRouteChange() {
+      this.$router.push({ name: 'StatusShow', params: { id: this.status.id }})
     }
   }
 }
@@ -223,6 +224,7 @@ export default {
 <style rel='stylesheet/scss' lang='scss'>
 .status-card {
   margin-bottom: 10px;
+  cursor: pointer;
   .account {
     text-decoration: underline;
     line-height: 26px;

From 23ee4813f81150c44d931c578146570db2e97563 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Sat, 23 May 2020 22:16:18 +0300
Subject: [PATCH 21/33] Add links to see user and status in instance

---
 src/components/Status/index.vue | 34 ++++++++++++++++++++++++++-------
 src/views/statuses/show.vue     |  8 ++++++++
 2 files changed, 35 insertions(+), 7 deletions(-)

diff --git a/src/components/Status/index.vue b/src/components/Status/index.vue
index aa327af3..3bd2c656 100644
--- a/src/components/Status/index.vue
+++ b/src/components/Status/index.vue
@@ -91,9 +91,13 @@
           <img :src="attachment.preview_url">
         </div>
       </div>
-      <a :href="status.url" target="_blank" class="account" @click.stop>
-        {{ parseTimestamp(status.created_at) }}
-      </a>
+      <div class="status-footer">
+        <span class="status-created-at">{{ parseTimestamp(status.created_at) }}</span>
+        <a v-if="status.url" :href="status.url" target="_blank" class="account" @click.stop>
+          Open status in instance
+          <i class="el-icon-top-right"/>
+        </a>
+      </div>
     </div>
   </el-card>
   <el-card v-else class="status-card">
@@ -110,9 +114,13 @@
       <span v-if="status.content" class="status-content" v-html="status.content"/>
       <span v-else class="status-without-content">no content</span>
     </div>
-    <a v-if="status.created_at" :href="status.url" target="_blank" class="account">
-      {{ parseTimestamp(status.created_at) }}
-    </a>
+    <div class="status-footer">
+      <span v-if="status.created_at" class="status-created-at">{{ parseTimestamp(status.created_at) }}</span>
+      <a v-if="status.url" :href="status.url" target="_blank" class="account" @click.stop>
+        Open status in instance
+        <i class="el-icon-top-right"/>
+      </a>
+    </div>
   </el-card>
 </template>
 
@@ -226,9 +234,12 @@ export default {
   margin-bottom: 10px;
   cursor: pointer;
   .account {
-    text-decoration: underline;
     line-height: 26px;
     font-size: 13px;
+    color: #606266;
+  }
+  .account:hover {
+    text-decoration: underline;
   }
   .image {
     width: 20%;
@@ -265,10 +276,19 @@ export default {
     font-size: 15px;
     line-height: 26px;
   }
+  .status-created-at {
+    font-size: 14px;
+    color: #606266;
+  }
   .status-deleted {
     font-style: italic;
     margin-top: 3px;
   }
+  .status-footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
   .status-header {
     display: flex;
     justify-content: space-between;
diff --git a/src/views/statuses/show.vue b/src/views/statuses/show.vue
index d641399a..b481d86c 100644
--- a/src/views/statuses/show.vue
+++ b/src/views/statuses/show.vue
@@ -4,6 +4,9 @@
       <div class="avatar-name-container">
         <el-avatar v-if="accountExists(user, 'avatar')" :src="user.avatar" size="large" />
         <h1 v-if="accountExists(user, 'display_name')">{{ user.display_name }}</h1>
+        <a v-if="accountExists(user, 'url')" :href="user.url" target="_blank" class="account">
+          <i class="el-icon-top-right"/>
+        </a>
       </div>
       <div class="left-header-container">
         <moderation-dropdown
@@ -116,6 +119,11 @@ export default {
 .avatar-name-container {
   display: flex;
   align-items: center;
+  .el-icon-top-right {
+    font-size: 2em;
+    line-height: 36px;
+    color: #606266;
+  }
 }
 .no-statuses {
   margin-left: 28px;

From 3e4a3d2609e75b344bdfff7865c74d485f1975dc Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Sun, 24 May 2020 01:54:58 +0300
Subject: [PATCH 22/33] Add link to user's profile

---
 src/components/Status/index.vue | 17 ++++++++++++-----
 src/views/statuses/show.vue     | 15 ++++++++++++---
 2 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/src/components/Status/index.vue b/src/components/Status/index.vue
index 3bd2c656..3b19204b 100644
--- a/src/components/Status/index.vue
+++ b/src/components/Status/index.vue
@@ -5,10 +5,12 @@
         <div class="status-account-container">
           <div class="status-account">
             <el-checkbox v-if="showCheckbox" class="status-checkbox" @change="handleStatusSelection(account)"/>
-            <img :src="account.avatar" class="status-avatar-img">
-            <a v-if="!account.deactivated" :href="account.url" target="_blank" class="account">
-              <h3 class="status-account-name">{{ account.display_name }}</h3>
-            </a>
+            <router-link v-if="!account.deactivated && account.id" :to="{ name: 'UsersShow', params: { id: account.id }}" @click.native.stop>
+              <div class="status-card-header">
+                <img :src="account.avatar" class="status-avatar-img">
+                <h3 class="status-account-name">{{ account.display_name }}</h3>
+              </div>
+            </router-link>
             <span v-else>
               <h3 class="status-account-name">{{ account.display_name }}</h3>
               <h3 class="status-account-name deactivated"> (deactivated)</h3>
@@ -263,12 +265,16 @@ export default {
   .status-account-name {
     display: inline-block;
     margin: 0;
-    height: 22px;
+    font-size: 16px;
   }
   .status-body {
     display: flex;
     flex-direction: column;
   }
+  .status-card-header {
+    display: flex;
+    align-items: center;
+  }
   .status-checkbox {
     margin-right: 7px;
   }
@@ -292,6 +298,7 @@ export default {
   .status-header {
     display: flex;
     justify-content: space-between;
+    align-items: center;
   }
   .status-without-content {
     font-style: italic;
diff --git a/src/views/statuses/show.vue b/src/views/statuses/show.vue
index b481d86c..ea5a114a 100644
--- a/src/views/statuses/show.vue
+++ b/src/views/statuses/show.vue
@@ -2,10 +2,14 @@
   <div v-if="!loading" class="status-show-container">
     <header v-if="isDesktop || isTablet" class="user-page-header">
       <div class="avatar-name-container">
-        <el-avatar v-if="accountExists(user, 'avatar')" :src="user.avatar" size="large" />
-        <h1 v-if="accountExists(user, 'display_name')">{{ user.display_name }}</h1>
+        <router-link :to="{ name: 'UsersShow', params: { id: user.id }}">
+          <div class="avatar-name-header">
+            <el-avatar v-if="accountExists(user, 'avatar')" :src="user.avatar" size="large" />
+            <h1 v-if="accountExists(user, 'display_name')">{{ user.display_name }}</h1>
+          </div>
+        </router-link>
         <a v-if="accountExists(user, 'url')" :href="user.url" target="_blank" class="account">
-          <i class="el-icon-top-right"/>
+          <i class="el-icon-top-right" title="Open user in instance"/>
         </a>
       </div>
       <div class="left-header-container">
@@ -125,6 +129,11 @@ export default {
     color: #606266;
   }
 }
+.avatar-name-header {
+  display: flex;
+  height: 40px;
+  align-items: center;
+}
 .no-statuses {
   margin-left: 28px;
   color: #606266;

From a936dfb1e148fed421afcf731ca50ad3004daf43 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Sun, 24 May 2020 20:09:53 +0300
Subject: [PATCH 23/33] Fix status show component's name

---
 src/components/Status/index.vue | 12 ++++++------
 src/views/statuses/show.vue     |  2 +-
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/Status/index.vue b/src/components/Status/index.vue
index 3b19204b..2e918cc7 100644
--- a/src/components/Status/index.vue
+++ b/src/components/Status/index.vue
@@ -211,6 +211,12 @@ export default {
         })
       })
     },
+    handleStatusSelection(account) {
+      this.$emit('status-selection', account)
+    },
+    handleRouteChange() {
+      this.$router.push({ name: 'StatusShow', params: { id: this.status.id }})
+    },
     optionPercent(poll, pollOption) {
       const allVotes = poll.options.reduce((acc, option) => (acc + option.votes_count), 0)
       if (allVotes === 0) {
@@ -220,12 +226,6 @@ export default {
     },
     parseTimestamp(timestamp) {
       return moment(timestamp).format('YYYY-MM-DD HH:mm')
-    },
-    handleStatusSelection(account) {
-      this.$emit('status-selection', account)
-    },
-    handleRouteChange() {
-      this.$router.push({ name: 'StatusShow', params: { id: this.status.id }})
     }
   }
 }
diff --git a/src/views/statuses/show.vue b/src/views/statuses/show.vue
index ea5a114a..29845e69 100644
--- a/src/views/statuses/show.vue
+++ b/src/views/statuses/show.vue
@@ -62,7 +62,7 @@ import RebootButton from '@/components/RebootButton'
 import ResetPasswordDialog from '@/views/users/components/ResetPasswordDialog'
 
 export default {
-  name: 'UsersShow',
+  name: 'StatusShow',
   components: { ModerationDropdown, RebootButton, ResetPasswordDialog, Status },
   data() {
     return {

From 2621d7cb510c43a64e5537fa46e410e07007d34a Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Sun, 24 May 2020 21:14:58 +0300
Subject: [PATCH 24/33] First green test, fetches single status

---
 src/api/__mocks__/status.js                 | 23 ++++++++++
 test/views/statuses/show.test.js            | 50 +++++++++++++++++++++
 test/views/statuses/statusShowStore.conf.js | 21 +++++++++
 test/views/users/show.test.js               |  2 +-
 4 files changed, 95 insertions(+), 1 deletion(-)
 create mode 100644 test/views/statuses/show.test.js
 create mode 100644 test/views/statuses/statusShowStore.conf.js

diff --git a/src/api/__mocks__/status.js b/src/api/__mocks__/status.js
index c8f98545..232ba69a 100644
--- a/src/api/__mocks__/status.js
+++ b/src/api/__mocks__/status.js
@@ -6,6 +6,29 @@ export async function deleteStatus(id, authHost, token) {
   return Promise.resolve()
 }
 
+export async function fetchStatus(id, authHost, token) {
+  const data = {
+    account: {
+      id: '9n1bySks25olxWrku0',
+      avatar: 'http://localhost:4000/images/avi.png',
+      display_name: 'dolin',
+      tags: ['strip_media', 'sandbox', 'disable_any_subscription', 'force_nsfw'],
+      url: 'http://localhost:4000/users/dolin'
+    },
+    content: 'pizza makes everything better',
+    created_at: '2020-05-22T17:34:34.000Z',
+    id: '9vJOO3iFPyjNaEhJ5s',
+    media_attachments: [],
+    poll: null,
+    sensitive: false,
+    spoiler_text: '',
+    visibility: 'public',
+    url: 'http://localhost:4000/notice/9vJOO3iFPyjNaEhJ5s'
+  }
+
+  return Promise.resolve({ data })
+}
+
 export async function fetchStatusesByInstance({ instance, authHost, token, pageSize, page }) {
   let data
   if (pageSize === 1) {
diff --git a/test/views/statuses/show.test.js b/test/views/statuses/show.test.js
new file mode 100644
index 00000000..4aec7c69
--- /dev/null
+++ b/test/views/statuses/show.test.js
@@ -0,0 +1,50 @@
+import Vuex from 'vuex'
+import { mount, createLocalVue, config } from '@vue/test-utils'
+import flushPromises from 'flush-promises'
+import Element from 'element-ui'
+import StatusShow from '@/views/statuses/show'
+import storeConfig from './statusShowStore.conf'
+import { cloneDeep } from 'lodash'
+
+config.mocks["$t"] = () => {}
+
+const localVue = createLocalVue()
+localVue.use(Vuex)
+localVue.use(Element)
+
+const $route = {
+  params: {
+    id: '9vJOO3iFPyjNaEhJ5s'
+  }
+}
+
+jest.mock('@/api/app')
+jest.mock('@/api/status')
+jest.mock('@/api/peers')
+jest.mock('@/api/nodeInfo')
+
+describe('Status show page', () => {
+  let store
+
+  beforeEach(() => {
+    store = new Vuex.Store(cloneDeep(storeConfig))
+  })
+
+  it('fetches status', async (done) => {
+    const wrapper = mount(StatusShow, {
+      store,
+      localVue,
+      sync: false,
+      stubs: ['router-link'],
+      mocks: {
+        $route
+      }
+    })
+    await flushPromises()
+
+    expect(wrapper.find('.status-container').isVisible()).toBe(true)
+    expect(store.state.status.fetchedStatus.id).toBe('9vJOO3iFPyjNaEhJ5s')
+    expect(store.state.status.fetchedStatus.account.display_name).toBe('dolin')
+    done()
+  })
+})
diff --git a/test/views/statuses/statusShowStore.conf.js b/test/views/statuses/statusShowStore.conf.js
new file mode 100644
index 00000000..c83a8660
--- /dev/null
+++ b/test/views/statuses/statusShowStore.conf.js
@@ -0,0 +1,21 @@
+import app from '@/store/modules/app'
+import peers from '@/store/modules/peers'
+import user from '@/store/modules/user'
+import userProfile from '@/store/modules/userProfile'
+import users from '@/store/modules/users'
+import settings from '@/store/modules/settings'
+import status from '@/store/modules/status'
+import getters from '@/store/getters'
+
+export default {
+  modules: {
+    app,
+    peers,
+    settings,
+    status,
+    user,
+    userProfile,
+    users
+  },
+  getters
+}
diff --git a/test/views/users/show.test.js b/test/views/users/show.test.js
index b57501c5..2197d5f6 100644
--- a/test/views/users/show.test.js
+++ b/test/views/users/show.test.js
@@ -21,7 +21,7 @@ const $route = {
 jest.mock('@/api/nodeInfo')
 jest.mock('@/api/users')
 
-describe('Search and filter users', () => {
+describe('User profile', () => {
   let store
 
   beforeEach(() => {

From 3ded23dfe73f046a70e93fc8ff50aab0ae7fc61c Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Tue, 26 May 2020 22:38:03 +0300
Subject: [PATCH 25/33] Update test that fetches data on single status show
 page

---
 src/api/__mocks__/users.js       | 6 +++++-
 test/views/statuses/show.test.js | 4 +++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/api/__mocks__/users.js b/src/api/__mocks__/users.js
index 9a3afd41..bdcf404a 100644
--- a/src/api/__mocks__/users.js
+++ b/src/api/__mocks__/users.js
@@ -6,7 +6,11 @@ export let users = [
 
 const userProfile = { avatar: 'avatar.jpg', display_name: 'Allis', nickname: 'allis', id: '2', tags: [], roles: { admin: true, moderator: false }, local: true, external: false }
 
-const userStatuses = []
+const userStatuses = [
+  { account: { id: '9n1bySks25olxWrku0', display_name: 'dolin' }, content: 'pizza makes everything better', id: '9vJOO3iFPyjNaEhJ5s', created_at: '2020-05-22T17:34:34.000Z', visibility: 'public' },
+  { account: { id: '9n1bySks25olxWrku0', display_name: 'dolin' }, content: 'pizza time', id: '9vJPD5XKOdzQ0bvGLY', created_at: '2020-05-22T17:34:34.000Z', visibility: 'public' },
+  { account: { id: '9n1bySks25olxWrku0', display_name: 'dolin' }, content: 'what is yout favorite pizza?', id: '9jop82OBXeFPYulVjM', created_at: '2020-05-22T17:34:34.000Z', visibility: 'public' }
+]
 
 const filterUsers = (str) => {
   const filters = str.split(',').filter(item => item.length > 0)
diff --git a/test/views/statuses/show.test.js b/test/views/statuses/show.test.js
index 4aec7c69..f4a37a16 100644
--- a/test/views/statuses/show.test.js
+++ b/test/views/statuses/show.test.js
@@ -22,6 +22,7 @@ jest.mock('@/api/app')
 jest.mock('@/api/status')
 jest.mock('@/api/peers')
 jest.mock('@/api/nodeInfo')
+jest.mock('@/api/users')
 
 describe('Status show page', () => {
   let store
@@ -30,7 +31,7 @@ describe('Status show page', () => {
     store = new Vuex.Store(cloneDeep(storeConfig))
   })
 
-  it('fetches status', async (done) => {
+  it(`fetches single status and user's statuses`, async (done) => {
     const wrapper = mount(StatusShow, {
       store,
       localVue,
@@ -45,6 +46,7 @@ describe('Status show page', () => {
     expect(wrapper.find('.status-container').isVisible()).toBe(true)
     expect(store.state.status.fetchedStatus.id).toBe('9vJOO3iFPyjNaEhJ5s')
     expect(store.state.status.fetchedStatus.account.display_name).toBe('dolin')
+    expect(store.state.userProfile.statuses.length).toEqual(3)
     done()
   })
 })

From 3fc779c6fb4b049c90f2081fd1fdb0a5bd4fecf0 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Wed, 27 May 2020 01:44:26 +0300
Subject: [PATCH 26/33] Add tests for rendering moderation menu and status card

---
 test/views/statuses/show.test.js | 39 ++++++++++++++++++++++++++++++++
 1 file changed, 39 insertions(+)

diff --git a/test/views/statuses/show.test.js b/test/views/statuses/show.test.js
index f4a37a16..6bf4fdff 100644
--- a/test/views/statuses/show.test.js
+++ b/test/views/statuses/show.test.js
@@ -49,4 +49,43 @@ describe('Status show page', () => {
     expect(store.state.userProfile.statuses.length).toEqual(3)
     done()
   })
+
+  it(`renders links and user's moderation menu`, async (done) => {
+    const wrapper = mount(StatusShow, {
+      store,
+      localVue,
+      sync: false,
+      stubs: ['router-link'],
+      mocks: {
+        $route
+      }
+    })
+    await flushPromises()
+
+    expect(wrapper.find('router-link-stub h1').text()).toBe('dolin')
+    expect(wrapper.find('button.moderate-user-button').exists()).toBe(true)
+    expect(wrapper.find('.el-dropdown-menu').exists()).toBe(true)
+    done()
+  })
+
+  it(`renders status card`, async (done) => {
+    const wrapper = mount(StatusShow, {
+      store,
+      localVue,
+      sync: false,
+      stubs: ['router-link'],
+      mocks: {
+        $route
+      }
+    })
+    await flushPromises()
+
+    expect(wrapper.find('.status-card').exists()).toBe(true)
+    expect(wrapper.find('router-link-stub h3').text()).toBe('dolin')
+    expect(wrapper.find('span.el-tag').text()).not.toBe('Sensitive')
+    expect(wrapper.find('span.el-tag').text()).toBe('Public')
+    expect(wrapper.find('button.status-actions-button').exists()).toBe(true)
+    expect(wrapper.find('.status-body .status-content').text()).toBe('pizza makes everything better')
+    done()
+  })
 })

From 20251b75e522cc57294586a00972fd6d0a78b106 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Thu, 28 May 2020 00:06:33 +0300
Subject: [PATCH 27/33] Update Changelog

---
 CHANGELOG.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0f51d123..1a4344cb 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
 ## Unreleased
 
+### Added
+
+- Create `/statuses/:id` route that shows single status
+
 ### Changed
 
 - Statuses count changes when an instance is selected and shows the amount of statuses from an originating instance

From 03b5c1d76e2dbf38fb24405cbab0ec283b4d812a Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Thu, 28 May 2020 16:01:42 +0300
Subject: [PATCH 28/33] Fix tests

---
 src/store/modules/status.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/store/modules/status.js b/src/store/modules/status.js
index 74271afa..f8e52288 100644
--- a/src/store/modules/status.js
+++ b/src/store/modules/status.js
@@ -95,7 +95,7 @@ const status = {
       commit('SET_LOADING', false)
       dispatch('FetchUserStatuses', { userId: state.fetchedStatus.account.id, godmode: false })
     },
-    async FetchStatusesCount({ commit, getters }) {
+    async FetchStatusesCount({ commit, getters }, instance) {
       commit('SET_LOADING', true)
       const { data } = await fetchStatusesCount(instance, getters.authHost, getters.token)
       commit('SET_STATUS_VISIBILITY', data.status_visibility)

From 63ad2f4524fb5f984769275734e3be1beee4d400 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Thu, 28 May 2020 21:15:58 +0300
Subject: [PATCH 29/33] Fix reactivity flow for user moderation from status
 show page

---
 src/store/modules/status.js | 10 ++++++++++
 src/store/modules/users.js  |  2 +-
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/store/modules/status.js b/src/store/modules/status.js
index f8e52288..724a0dd0 100644
--- a/src/store/modules/status.js
+++ b/src/store/modules/status.js
@@ -95,6 +95,12 @@ const status = {
       commit('SET_LOADING', false)
       dispatch('FetchUserStatuses', { userId: state.fetchedStatus.account.id, godmode: false })
     },
+    FetchStatusAfterUserModeration({ commit, dispatch, getters, state }, id) {
+      commit('SET_LOADING', true)
+      fetchStatus(id, getters.authHost, getters.token)
+        .then((status) => dispatch('SetStatus', status.data))
+      commit('SET_LOADING', false)
+    },
     async FetchStatusesCount({ commit, getters }, instance) {
       commit('SET_LOADING', true)
       const { data } = await fetchStatusesCount(instance, getters.authHost, getters.token)
@@ -178,6 +184,10 @@ const status = {
     },
     HandlePageChange({ commit }, page) {
       commit('CHANGE_PAGE', page)
+    },
+    SetStatus({ commit }, status) {
+      commit('SET_STATUS', status)
+      commit('SET_STATUS_AUTHOR', status.account)
     }
   }
 }
diff --git a/src/store/modules/users.js b/src/store/modules/users.js
index e86bcd49..571f018a 100644
--- a/src/store/modules/users.js
+++ b/src/store/modules/users.js
@@ -97,7 +97,7 @@ const users = {
         dispatch('SearchUsers', { query: state.searchQuery, page: state.currentPage })
       }
       if (statusId) {
-        dispatch('FetchStatus', statusId)
+        dispatch('FetchStatusAfterUserModeration', statusId)
       } else if (userId) {
         dispatch('FetchUserProfile', { userId, godmode: false })
       }

From 372d37e3b35fe2a15d27f35f3f9dce853da347ad Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Thu, 28 May 2020 22:46:08 +0300
Subject: [PATCH 30/33] Update reactivity in action that fetches user statuses

---
 src/store/modules/status.js      | 4 ++--
 src/store/modules/userProfile.js | 9 ++++++---
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/store/modules/status.js b/src/store/modules/status.js
index 724a0dd0..5b908c3c 100644
--- a/src/store/modules/status.js
+++ b/src/store/modules/status.js
@@ -65,7 +65,7 @@ const status = {
       } else if (fetchStatusesByInstance) { // called from Statuses by Instance
         dispatch('FetchStatusesByInstance')
       } else { // called from Status show page
-        dispatch('FetchStatus', statusId)
+        dispatch('FetchStatusAfterUserModeration', statusId)
       }
     },
     ClearState({ commit }) {
@@ -98,7 +98,7 @@ const status = {
     FetchStatusAfterUserModeration({ commit, dispatch, getters, state }, id) {
       commit('SET_LOADING', true)
       fetchStatus(id, getters.authHost, getters.token)
-        .then((status) => dispatch('SetStatus', status.data))
+        .then(status => dispatch('SetStatus', status.data))
       commit('SET_LOADING', false)
     },
     async FetchStatusesCount({ commit, getters }, instance) {
diff --git a/src/store/modules/userProfile.js b/src/store/modules/userProfile.js
index af54072c..0cdc0df6 100644
--- a/src/store/modules/userProfile.js
+++ b/src/store/modules/userProfile.js
@@ -35,18 +35,21 @@ const userProfile = {
 
       dispatch('FetchUserStatuses', { userId, godmode })
     },
-    async FetchUserStatuses({ commit, getters }, { userId, godmode }) {
+    FetchUserStatuses({ commit, dispatch, getters }, { userId, godmode }) {
       commit('SET_STATUSES_LOADING', true)
 
-      const statuses = await fetchUserStatuses(userId, getters.authHost, godmode, getters.token)
+      fetchUserStatuses(userId, getters.authHost, godmode, getters.token)
+        .then(statuses => dispatch('SetStatuses', statuses.data))
 
-      commit('SET_STATUSES', statuses.data)
       commit('SET_STATUSES_LOADING', false)
     },
     async FetchUserCredentials({ commit, getters }, { nickname }) {
       const userResponse = await fetchUserCredentials(nickname, getters.authHost, getters.token)
       commit('SET_USER_CREDENTIALS', userResponse.data)
     },
+    SetStatuses({ commit }, statuses) {
+      commit('SET_STATUSES', statuses)
+    },
     async UpdateUserCredentials({ dispatch, getters }, { nickname, credentials }) {
       await updateUserCredentials(nickname, credentials, getters.authHost, getters.token)
       dispatch('FetchUserCredentials', { nickname })

From f22485cc2114fb50b27569223081441af95ecb0c Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Fri, 29 May 2020 00:48:58 +0300
Subject: [PATCH 31/33] Fix styles for Desktop, Mobile and Tablet

---
 src/components/Status/index.vue               | 21 +++++++--
 src/views/statuses/show.vue                   | 45 ++++++++++++++-----
 .../users/components/ModerationDropdown.vue   |  2 +-
 3 files changed, 51 insertions(+), 17 deletions(-)

diff --git a/src/components/Status/index.vue b/src/components/Status/index.vue
index 2e918cc7..ffb8f74c 100644
--- a/src/components/Status/index.vue
+++ b/src/components/Status/index.vue
@@ -18,8 +18,10 @@
           </div>
         </div>
         <div class="status-actions">
-          <el-tag v-if="status.sensitive" type="warning" size="large">{{ $t('reports.sensitive') }}</el-tag>
-          <el-tag size="large">{{ capitalizeFirstLetter(status.visibility) }}</el-tag>
+          <div class="status-tags">
+            <el-tag v-if="status.sensitive" type="warning" size="large">{{ $t('reports.sensitive') }}</el-tag>
+            <el-tag size="large">{{ capitalizeFirstLetter(status.visibility) }}</el-tag>
+          </div>
           <el-dropdown trigger="click" @click.native.stop>
             <el-button plain size="small" icon="el-icon-edit" class="status-actions-button">
               {{ $t('reports.changeScope') }}<i class="el-icon-arrow-down el-icon--right"/>
@@ -283,7 +285,7 @@ export default {
     line-height: 26px;
   }
   .status-created-at {
-    font-size: 14px;
+    font-size: 13px;
     color: #606266;
   }
   .status-deleted {
@@ -300,6 +302,9 @@ export default {
     justify-content: space-between;
     align-items: center;
   }
+  .status-tags {
+    display: inline;
+  }
   .status-without-content {
     font-style: italic;
   }
@@ -317,7 +322,7 @@ export default {
       padding: 10px 17px;
     }
     .el-tag {
-      margin: 3px 4px 3px 0;
+      margin: 3px 0;
     }
     .status-account-container {
       margin-bottom: 5px;
@@ -326,12 +331,20 @@ export default {
       margin: 3px 0 3px;
     }
     .status-actions {
+      width: 100%;
       display: flex;
       flex-wrap: wrap;
+      justify-content: space-between;
+    }
+    .status-footer {
+      flex-direction: column;
+      align-items: flex-start;
+      margin-top: 10px;
     }
     .status-header {
       display: flex;
       flex-direction: column;
+      align-items: flex-start;
     }
   }
 }
diff --git a/src/views/statuses/show.vue b/src/views/statuses/show.vue
index 29845e69..8ae05bcb 100644
--- a/src/views/statuses/show.vue
+++ b/src/views/statuses/show.vue
@@ -21,7 +21,7 @@
         <reboot-button/>
       </div>
     </header>
-    <div v-if="isMobile" class="user-page-header-container">
+    <div v-if="isMobile" class="status-page-header-container">
       <header class="user-page-header">
         <div class="avatar-name-container">
           <el-avatar v-if="accountExists(user, 'avatar')" :src="user.avatar" size="large" />
@@ -210,36 +210,57 @@ export default {
   }
   .recent-statuses-container-show {
     width: 100%;
-    margin: 0 0 0 15px;
+    margin: 0 0 0 10px;
+    .el-timeline-item {
+      margin-left: 0;
+    }
+    .recent-statuses {
+      margin-left: 0;
+    }
+    .show-private-statuses {
+      margin: 0 10px 20px 0;
+    }
   }
-  .show-private-statuses {
-    margin: 0 10px 20px 10px;
+  .status-card {
+    .el-card__body {
+      padding: 15px;
+    }
   }
   .status-container {
     margin: 0 10px;
   }
   .statuses {
     padding-right: 10px;
-    margin-left: 8px;
+    margin-left: 0;
+    .el-timeline-item__wrapper {
+      margin-right: 10px;
+    }
   }
   .user-page-header {
     padding: 0;
-    margin: 7px 15px 15px 10px;
+    margin: 7px 15px 5px 10px;
   }
-  .user-page-header-container {
+  .status-page-header-container {
+    width: 100%;
     .el-dropdown {
-      width: 95%;
-      margin: 0 15px 15px 10px;
+      width: stretch;
+      margin: 0 10px 15px 10px;
     }
   }
 }
 @media only screen and (max-width:801px) and (min-width: 481px) {
-  .recent-statuses {
-    margin: 20px 10px 15px 0;
-  }
   .recent-statuses-container-show {
     width: 97%;
     margin: 0 20px;
+    .el-timeline-item {
+      margin-left: 2px;
+    }
+    .recent-statuses {
+      margin: 20px 10px 15px 0;
+    }
+    .show-private-statuses {
+      margin: 0 10px 20px 0;
+    }
   }
   .show-private-statuses {
     margin: 0 10px 20px 0;
diff --git a/src/views/users/components/ModerationDropdown.vue b/src/views/users/components/ModerationDropdown.vue
index dc1b74f5..f8cf5ee6 100644
--- a/src/views/users/components/ModerationDropdown.vue
+++ b/src/views/users/components/ModerationDropdown.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-dropdown :hide-on-click="false" size="small" trigger="click">
+  <el-dropdown :hide-on-click="false" size="small" trigger="click" placement="top-start">
     <div>
       <span v-if="page === 'users'" class="el-dropdown-link">
         {{ $t('users.moderation') }}

From 0a92e71c44aaafe0db45016410a5c8fabaeac821 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Tue, 2 Jun 2020 23:42:57 +0300
Subject: [PATCH 32/33] Fix sorting users when there is a user without a
 nickname of ID

---
 src/store/modules/users.js | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/store/modules/users.js b/src/store/modules/users.js
index 571f018a..e0645784 100644
--- a/src/store/modules/users.js
+++ b/src/store/modules/users.js
@@ -52,9 +52,11 @@ const users = {
         return
       }
 
-      state.fetchedUsers = [...usersWithoutSwapped, ...users].sort((a, b) =>
-        a.nickname.localeCompare(b.nickname)
-      )
+      const updatedUsers = [...usersWithoutSwapped, ...users]
+      state.fetchedUsers = updatedUsers
+        .filter(user => user.nickname && user.id)
+        .sort((a, b) => a.nickname.localeCompare(b.nickname))
+        .concat(updatedUsers.filter(user => !user.nickname || !user.id))
     },
     SET_COUNT: (state, count) => {
       state.totalUsersCount = count

From 7fd8a81301069864cb48a3354aa09b7b1b3dcf6a Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Tue, 2 Jun 2020 23:46:54 +0300
Subject: [PATCH 33/33] Update Changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1a4344cb..c2ce8f40 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -20,6 +20,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 ### Fixed
 
 - Send `true` and `false` as booleans if they are values of single selects on the Settings page
+- Fix sorting users on Users page if there is an acount with missing nickname or ID
 
 ## [2.0.3] - 2020-04-29