From 50f0d216861bfce22c98caec7dd00bf8d9dc4a70 Mon Sep 17 00:00:00 2001
From: Edijs <iamedijs@hotmail.com>
Date: Thu, 14 Feb 2019 09:52:23 -0700
Subject: [PATCH 01/22] Use static height if gallery has single image

---
 src/components/gallery/gallery.js  | 4 +++-
 src/components/gallery/gallery.vue | 7 ++++++-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/components/gallery/gallery.js b/src/components/gallery/gallery.js
index 7f33a81b..c713ce07 100644
--- a/src/components/gallery/gallery.js
+++ b/src/components/gallery/gallery.js
@@ -34,7 +34,9 @@ const Gallery = {
       return rows
     },
     rowHeight () {
-      return itemsPerRow => ({ 'height': `${(this.width / (itemsPerRow + 0.6))}px` })
+      return itemsPerRow => ({
+        'height': this.attachments.length === 1 ? '260px' : `${(this.width / (itemsPerRow + 0.6))}px`
+      })
     },
     useContainFit () {
       return this.$store.state.config.useContainFit
diff --git a/src/components/gallery/gallery.vue b/src/components/gallery/gallery.vue
index 3f90caa9..90888c21 100644
--- a/src/components/gallery/gallery.vue
+++ b/src/components/gallery/gallery.vue
@@ -1,6 +1,11 @@
 <template>
   <div ref="galleryContainer" style="width: 100%;">
-    <div class="gallery-row" v-for="row in rows" :style="rowHeight(row.length)" :class="{ 'contain-fit': useContainFit, 'cover-fit': !useContainFit }">
+    <div
+      v-for="(row, row_num) in rows"
+      :key="row_num"
+      :style="rowHeight(row.length)"
+      :class="{ 'gallery-row': true, 'contain-fit': useContainFit, 'cover-fit': !useContainFit }"
+    >
       <attachment
         v-for="attachment in row"
         :setMedia="setMedia"

From 28660d698650d3a4fd8bda08b694444e88d7afda Mon Sep 17 00:00:00 2001
From: Edijs <iamedijs@hotmail.com>
Date: Thu, 14 Feb 2019 10:21:10 -0700
Subject: [PATCH 02/22] Issue #335 - place hide button on right hand

---
 src/components/attachment/attachment.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue
index 7e972026..a93c9014 100644
--- a/src/components/attachment/attachment.vue
+++ b/src/components/attachment/attachment.vue
@@ -160,6 +160,7 @@
 
   .hider {
     position: absolute;
+    right: 0;
     white-space: nowrap;
     margin: 10px;
     padding: 5px;

From 6c8ccf2733c780543a9afc5ffbe7942064ad2596 Mon Sep 17 00:00:00 2001
From: jasper <jasper92341@hotmail.com>
Date: Fri, 15 Feb 2019 07:52:34 -0800
Subject: [PATCH 03/22] Remove posts immediately by blocking

---
 .../user_card_content/user_card_content.js    | 36 ++++++++++++++++---
 1 file changed, 32 insertions(+), 4 deletions(-)

diff --git a/src/components/user_card_content/user_card_content.js b/src/components/user_card_content/user_card_content.js
index 7a7b89d4..41e4e817 100644
--- a/src/components/user_card_content/user_card_content.js
+++ b/src/components/user_card_content/user_card_content.js
@@ -93,27 +93,55 @@ export default {
   },
   methods: {
     followUser () {
+      const store = this.$store
       this.followRequestInProgress = true
-      requestFollow(this.user, this.$store).then(({sent}) => {
+      requestFollow(this.user, store).then(({sent}) => {
         this.followRequestInProgress = false
         this.followRequestSent = sent
+
+        store.dispatch('stopFetching', 'friends')
+        store.commit('clearTimeline', { timeline: 'friends' })
+        store.dispatch('startFetching', { timeline: 'friends' })
       })
     },
     unfollowUser () {
+      const store = this.$store
       this.followRequestInProgress = true
-      requestUnfollow(this.user, this.$store).then(() => {
+      requestUnfollow(this.user, store).then(() => {
         this.followRequestInProgress = false
+
+        store.dispatch('stopFetching', 'friends')
+        store.commit('clearTimeline', { timeline: 'friends' })
+        store.dispatch('startFetching', { timeline: 'friends' })
       })
     },
     blockUser () {
       const store = this.$store
       store.state.api.backendInteractor.blockUser(this.user.id)
-        .then((blockedUser) => store.commit('addNewUsers', [blockedUser]))
+        .then((blockedUser) => {
+          store.commit('addNewUsers', [blockedUser])
+
+          store.dispatch('stopFetching', 'friends')
+          store.commit('clearTimeline', { timeline: 'friends' })
+          store.dispatch('startFetching', { timeline: 'friends' })
+
+          store.commit('clearTimeline', { timeline: 'public' })
+          store.commit('clearTimeline', { timeline: 'publicAndExternal' })
+        })
     },
     unblockUser () {
       const store = this.$store
       store.state.api.backendInteractor.unblockUser(this.user.id)
-        .then((unblockedUser) => store.commit('addNewUsers', [unblockedUser]))
+        .then((unblockedUser) => {
+          store.commit('addNewUsers', [unblockedUser])
+
+          store.dispatch('stopFetching', 'friends')
+          store.commit('clearTimeline', { timeline: 'friends' })
+          store.dispatch('startFetching', { timeline: 'friends' })
+
+          store.commit('clearTimeline', { timeline: 'public' })
+          store.commit('clearTimeline', { timeline: 'publicAndExternal' })
+        })
     },
     toggleMute () {
       const store = this.$store

From 24d7f9917b1a4a147b92bd31ec65511c1d528c6f Mon Sep 17 00:00:00 2001
From: jasper <jasper92341@hotmail.com>
Date: Mon, 18 Feb 2019 11:39:35 -0800
Subject: [PATCH 04/22] Remove posts by blocking or following

---
 .../user_card_content/user_card_content.js    | 71 ++++++++++++++-----
 src/modules/statuses.js                       | 23 ++++++
 src/services/api/api.service.js               |  7 +-
 3 files changed, 80 insertions(+), 21 deletions(-)

diff --git a/src/components/user_card_content/user_card_content.js b/src/components/user_card_content/user_card_content.js
index 41e4e817..8bc01941 100644
--- a/src/components/user_card_content/user_card_content.js
+++ b/src/components/user_card_content/user_card_content.js
@@ -1,4 +1,5 @@
 import UserAvatar from '../user_avatar/user_avatar.vue'
+import apiService from '../../services/api/api.service.js'
 import { hex2rgb } from '../../services/color_convert/color_convert.js'
 import { requestFollow, requestUnfollow } from '../../services/follow_manipulate/follow_manipulate'
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
@@ -99,9 +100,24 @@ export default {
         this.followRequestInProgress = false
         this.followRequestSent = sent
 
-        store.dispatch('stopFetching', 'friends')
-        store.commit('clearTimeline', { timeline: 'friends' })
-        store.dispatch('startFetching', { timeline: 'friends' })
+        const rootState = store.rootState || store.state
+        const credentials = store.state.users.currentUser.credentials
+        const timelineData = rootState.statuses.timelines['friends']
+        apiService.fetchTimeline({
+          store,
+          credentials,
+          userId: this.user.id,
+          timeline: 'user',
+          between: true,
+          until: timelineData.maxId,
+          since: timelineData.minVisibleId
+        }).then((statuses) => {
+          store.dispatch('addNewStatuses', {
+            timeline: 'friends',
+            statuses,
+            showImmediately: true
+          })
+        }, () => store.dispatch('setError', { value: true }))
       })
     },
     unfollowUser () {
@@ -110,9 +126,7 @@ export default {
       requestUnfollow(this.user, store).then(() => {
         this.followRequestInProgress = false
 
-        store.dispatch('stopFetching', 'friends')
-        store.commit('clearTimeline', { timeline: 'friends' })
-        store.dispatch('startFetching', { timeline: 'friends' })
+        store.commit('removeStatus', { timeline: 'friends', userId: this.user.id })
       })
     },
     blockUser () {
@@ -121,12 +135,9 @@ export default {
         .then((blockedUser) => {
           store.commit('addNewUsers', [blockedUser])
 
-          store.dispatch('stopFetching', 'friends')
-          store.commit('clearTimeline', { timeline: 'friends' })
-          store.dispatch('startFetching', { timeline: 'friends' })
-
-          store.commit('clearTimeline', { timeline: 'public' })
-          store.commit('clearTimeline', { timeline: 'publicAndExternal' })
+          store.commit('removeStatus', { timeline: 'friends', userId: this.user.id })
+          store.commit('removeStatus', { timeline: 'public', userId: this.user.id })
+          store.commit('removeStatus', { timeline: 'publicAndExternal', userId: this.user.id })
         })
     },
     unblockUser () {
@@ -135,12 +146,36 @@ export default {
         .then((unblockedUser) => {
           store.commit('addNewUsers', [unblockedUser])
 
-          store.dispatch('stopFetching', 'friends')
-          store.commit('clearTimeline', { timeline: 'friends' })
-          store.dispatch('startFetching', { timeline: 'friends' })
-
-          store.commit('clearTimeline', { timeline: 'public' })
-          store.commit('clearTimeline', { timeline: 'publicAndExternal' })
+          const rootState = store.rootState || store.state
+          const credentials = store.state.users.currentUser.credentials
+          const timelineData = rootState.statuses.timelines['friends']
+          apiService.fetchTimeline({
+            store,
+            credentials,
+            userId: this.user.id,
+            timeline: 'user',
+            between: true,
+            until: timelineData.maxId,
+            since: timelineData.minVisibleId
+          }).then((statuses) => {
+            store.dispatch('addNewStatuses', {
+              timeline: 'public',
+              statuses,
+              showImmediately: true
+            })
+            store.dispatch('addNewStatuses', {
+              timeline: 'publicAndExternal',
+              statuses,
+              showImmediately: true
+            })
+            if (this.user.follows_you) {
+              store.dispatch('addNewStatuses', {
+                timeline: 'friends',
+                statuses,
+                showImmediately: true
+              })
+            }
+          }, () => store.dispatch('setError', { value: true }))
         })
     },
     toggleMute () {
diff --git a/src/modules/statuses.js b/src/modules/statuses.js
index 46117fd7..57095f37 100644
--- a/src/modules/statuses.js
+++ b/src/modules/statuses.js
@@ -307,9 +307,32 @@ const addNewNotifications = (state, { dispatch, notifications, older, visibleNot
   })
 }
 
+const removeStatus = (state, { timeline, userId }) => {
+  const timelineObject = state.timelines[timeline]
+  if (userId) {
+    remove(timelineObject.statuses, { user: { id: userId } })
+    remove(timelineObject.visibleStatuses, { user: { id: userId } })
+    const statusesObject = timelineObject.statusesObject
+    const visibleStatusesObject = timelineObject.visibleStatusesObject
+    each(statusesObject, (status, key) => {
+      if (status.user.id === userId) {
+        delete statusesObject[key]
+      }
+    })
+    each(visibleStatusesObject, (status, key) => {
+      if (status.user.id === userId) {
+        delete visibleStatusesObject[key]
+      }
+    })
+    timelineObject.minVisibleId = (last(timeline.visibleStatuses) || {}).id
+    timelineObject.maxId = statuses.length > 0 ? maxBy(statuses, 'id').id : 0
+  }
+}
+
 export const mutations = {
   addNewStatuses,
   addNewNotifications,
+  removeStatus,
   showNewStatuses (state, { timeline }) {
     const oldTimeline = (state.timelines[timeline])
 
diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js
index 92daa04e..d35c72b1 100644
--- a/src/services/api/api.service.js
+++ b/src/services/api/api.service.js
@@ -329,7 +329,7 @@ const setUserMute = ({id, credentials, muted = true}) => {
   })
 }
 
-const fetchTimeline = ({timeline, credentials, since = false, until = false, userId = false, tag = false}) => {
+const fetchTimeline = ({timeline, credentials, since = false, until = false, between = false, count = 20, userId = false, tag = false}) => {
   const timelineUrls = {
     public: PUBLIC_TIMELINE_URL,
     friends: FRIENDS_TIMELINE_URL,
@@ -362,8 +362,9 @@ const fetchTimeline = ({timeline, credentials, since = false, until = false, use
   if (timeline === 'media') {
     params.push(['only_media', 1])
   }
-
-  params.push(['count', 20])
+  if (!between) {
+    params.push(['count', count])
+  }
 
   const queryString = map(params, (param) => `${param[0]}=${param[1]}`).join('&')
   url += `?${queryString}`

From 66a105a519ee3a83a2a4354ed36f59355a45f970 Mon Sep 17 00:00:00 2001
From: Edijs <iamedijs@hotmail.com>
Date: Fri, 22 Feb 2019 13:53:43 -0700
Subject: [PATCH 05/22] Revert

---
 src/components/gallery/gallery.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/components/gallery/gallery.js b/src/components/gallery/gallery.js
index c713ce07..7f33a81b 100644
--- a/src/components/gallery/gallery.js
+++ b/src/components/gallery/gallery.js
@@ -34,9 +34,7 @@ const Gallery = {
       return rows
     },
     rowHeight () {
-      return itemsPerRow => ({
-        'height': this.attachments.length === 1 ? '260px' : `${(this.width / (itemsPerRow + 0.6))}px`
-      })
+      return itemsPerRow => ({ 'height': `${(this.width / (itemsPerRow + 0.6))}px` })
     },
     useContainFit () {
       return this.$store.state.config.useContainFit

From 4e79300232288fd9b7c4456e8b461f7c1cbac6fa Mon Sep 17 00:00:00 2001
From: jasper <jasper92341@hotmail.com>
Date: Mon, 25 Feb 2019 14:35:47 -0800
Subject: [PATCH 06/22] Remove posts by blocking or unfollowing

---
 .../user_card_content/user_card_content.js    | 51 -------------------
 src/modules/statuses.js                       | 18 ++-----
 src/services/api/api.service.js               |  6 +--
 3 files changed, 5 insertions(+), 70 deletions(-)

diff --git a/src/components/user_card_content/user_card_content.js b/src/components/user_card_content/user_card_content.js
index 8bc01941..d2a97a84 100644
--- a/src/components/user_card_content/user_card_content.js
+++ b/src/components/user_card_content/user_card_content.js
@@ -1,5 +1,4 @@
 import UserAvatar from '../user_avatar/user_avatar.vue'
-import apiService from '../../services/api/api.service.js'
 import { hex2rgb } from '../../services/color_convert/color_convert.js'
 import { requestFollow, requestUnfollow } from '../../services/follow_manipulate/follow_manipulate'
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
@@ -99,25 +98,6 @@ export default {
       requestFollow(this.user, store).then(({sent}) => {
         this.followRequestInProgress = false
         this.followRequestSent = sent
-
-        const rootState = store.rootState || store.state
-        const credentials = store.state.users.currentUser.credentials
-        const timelineData = rootState.statuses.timelines['friends']
-        apiService.fetchTimeline({
-          store,
-          credentials,
-          userId: this.user.id,
-          timeline: 'user',
-          between: true,
-          until: timelineData.maxId,
-          since: timelineData.minVisibleId
-        }).then((statuses) => {
-          store.dispatch('addNewStatuses', {
-            timeline: 'friends',
-            statuses,
-            showImmediately: true
-          })
-        }, () => store.dispatch('setError', { value: true }))
       })
     },
     unfollowUser () {
@@ -145,37 +125,6 @@ export default {
       store.state.api.backendInteractor.unblockUser(this.user.id)
         .then((unblockedUser) => {
           store.commit('addNewUsers', [unblockedUser])
-
-          const rootState = store.rootState || store.state
-          const credentials = store.state.users.currentUser.credentials
-          const timelineData = rootState.statuses.timelines['friends']
-          apiService.fetchTimeline({
-            store,
-            credentials,
-            userId: this.user.id,
-            timeline: 'user',
-            between: true,
-            until: timelineData.maxId,
-            since: timelineData.minVisibleId
-          }).then((statuses) => {
-            store.dispatch('addNewStatuses', {
-              timeline: 'public',
-              statuses,
-              showImmediately: true
-            })
-            store.dispatch('addNewStatuses', {
-              timeline: 'publicAndExternal',
-              statuses,
-              showImmediately: true
-            })
-            if (this.user.follows_you) {
-              store.dispatch('addNewStatuses', {
-                timeline: 'friends',
-                statuses,
-                showImmediately: true
-              })
-            }
-          }, () => store.dispatch('setError', { value: true }))
         })
     },
     toggleMute () {
diff --git a/src/modules/statuses.js b/src/modules/statuses.js
index 57095f37..d144702e 100644
--- a/src/modules/statuses.js
+++ b/src/modules/statuses.js
@@ -1,4 +1,4 @@
-import { remove, slice, each, find, maxBy, minBy, merge, last, isArray } from 'lodash'
+import { remove, slice, each, find, maxBy, minBy, merge, first, last, isArray } from 'lodash'
 import apiService from '../services/api/api.service.js'
 // import parse from '../services/status_parser/status_parser.js'
 
@@ -312,20 +312,8 @@ const removeStatus = (state, { timeline, userId }) => {
   if (userId) {
     remove(timelineObject.statuses, { user: { id: userId } })
     remove(timelineObject.visibleStatuses, { user: { id: userId } })
-    const statusesObject = timelineObject.statusesObject
-    const visibleStatusesObject = timelineObject.visibleStatusesObject
-    each(statusesObject, (status, key) => {
-      if (status.user.id === userId) {
-        delete statusesObject[key]
-      }
-    })
-    each(visibleStatusesObject, (status, key) => {
-      if (status.user.id === userId) {
-        delete visibleStatusesObject[key]
-      }
-    })
-    timelineObject.minVisibleId = (last(timeline.visibleStatuses) || {}).id
-    timelineObject.maxId = statuses.length > 0 ? maxBy(statuses, 'id').id : 0
+    timelineObject.minVisibleId = timelineObject.visibleStatuses.length > 0 ? last(timelineObject.visibleStatuses).id : 0
+    timelineObject.maxId = timelineObject.statuses.length > 0 ? first(timelineObject.statuses).id : 0
   }
 }
 
diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js
index d35c72b1..c5fdcb72 100644
--- a/src/services/api/api.service.js
+++ b/src/services/api/api.service.js
@@ -329,7 +329,7 @@ const setUserMute = ({id, credentials, muted = true}) => {
   })
 }
 
-const fetchTimeline = ({timeline, credentials, since = false, until = false, between = false, count = 20, userId = false, tag = false}) => {
+const fetchTimeline = ({timeline, credentials, since = false, until = false, userId = false, tag = false}) => {
   const timelineUrls = {
     public: PUBLIC_TIMELINE_URL,
     friends: FRIENDS_TIMELINE_URL,
@@ -362,9 +362,7 @@ const fetchTimeline = ({timeline, credentials, since = false, until = false, bet
   if (timeline === 'media') {
     params.push(['only_media', 1])
   }
-  if (!between) {
-    params.push(['count', count])
-  }
+  params.push(['count', 20])
 
   const queryString = map(params, (param) => `${param[0]}=${param[1]}`).join('&')
   url += `?${queryString}`

From 7698a6fb0dad962a15855adc2a9c4134abe13de7 Mon Sep 17 00:00:00 2001
From: jasper <jasper92341@hotmail.com>
Date: Tue, 26 Feb 2019 23:21:04 -0800
Subject: [PATCH 07/22] Remove posts by blocking or unfollowing

---
 src/components/user_card_content/user_card_content.js | 6 +-----
 src/services/api/api.service.js                       | 1 +
 2 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/components/user_card_content/user_card_content.js b/src/components/user_card_content/user_card_content.js
index d2a97a84..35139504 100644
--- a/src/components/user_card_content/user_card_content.js
+++ b/src/components/user_card_content/user_card_content.js
@@ -105,7 +105,6 @@ export default {
       this.followRequestInProgress = true
       requestUnfollow(this.user, store).then(() => {
         this.followRequestInProgress = false
-
         store.commit('removeStatus', { timeline: 'friends', userId: this.user.id })
       })
     },
@@ -114,7 +113,6 @@ export default {
       store.state.api.backendInteractor.blockUser(this.user.id)
         .then((blockedUser) => {
           store.commit('addNewUsers', [blockedUser])
-
           store.commit('removeStatus', { timeline: 'friends', userId: this.user.id })
           store.commit('removeStatus', { timeline: 'public', userId: this.user.id })
           store.commit('removeStatus', { timeline: 'publicAndExternal', userId: this.user.id })
@@ -123,9 +121,7 @@ export default {
     unblockUser () {
       const store = this.$store
       store.state.api.backendInteractor.unblockUser(this.user.id)
-        .then((unblockedUser) => {
-          store.commit('addNewUsers', [unblockedUser])
-        })
+        .then((unblockedUser) => store.commit('addNewUsers', [unblockedUser]))
     },
     toggleMute () {
       const store = this.$store
diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js
index c5fdcb72..92daa04e 100644
--- a/src/services/api/api.service.js
+++ b/src/services/api/api.service.js
@@ -362,6 +362,7 @@ const fetchTimeline = ({timeline, credentials, since = false, until = false, use
   if (timeline === 'media') {
     params.push(['only_media', 1])
   }
+
   params.push(['count', 20])
 
   const queryString = map(params, (param) => `${param[0]}=${param[1]}`).join('&')

From 882e0243313e8f08e5e8995a6374b79f886c91a6 Mon Sep 17 00:00:00 2001
From: Edijs <iamedijs@hotmail.com>
Date: Thu, 28 Feb 2019 11:16:16 +0800
Subject: [PATCH 08/22] Revert code

---
 src/components/gallery/gallery.vue | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/src/components/gallery/gallery.vue b/src/components/gallery/gallery.vue
index 90888c21..3f90caa9 100644
--- a/src/components/gallery/gallery.vue
+++ b/src/components/gallery/gallery.vue
@@ -1,11 +1,6 @@
 <template>
   <div ref="galleryContainer" style="width: 100%;">
-    <div
-      v-for="(row, row_num) in rows"
-      :key="row_num"
-      :style="rowHeight(row.length)"
-      :class="{ 'gallery-row': true, 'contain-fit': useContainFit, 'cover-fit': !useContainFit }"
-    >
+    <div class="gallery-row" v-for="row in rows" :style="rowHeight(row.length)" :class="{ 'contain-fit': useContainFit, 'cover-fit': !useContainFit }">
       <attachment
         v-for="attachment in row"
         :setMedia="setMedia"

From ba2e05bc63e0b36d5a126b422c9f87a7ace43305 Mon Sep 17 00:00:00 2001
From: dave <starpumadev@gmail.com>
Date: Thu, 28 Feb 2019 14:03:44 -0500
Subject: [PATCH 09/22] #392: stale data served to new user account

---
 src/components/notifications/notifications.js |  3 ++-
 src/modules/statuses.js                       | 15 ++++++++++++---
 src/modules/users.js                          |  4 ++++
 3 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/src/components/notifications/notifications.js b/src/components/notifications/notifications.js
index 5e95631a..9fc5e38a 100644
--- a/src/components/notifications/notifications.js
+++ b/src/components/notifications/notifications.js
@@ -11,7 +11,8 @@ const Notifications = {
     const store = this.$store
     const credentials = store.state.users.currentUser.credentials
 
-    notificationsFetcher.startFetching({ store, credentials })
+    const fetcherId = notificationsFetcher.startFetching({ store, credentials })
+    this.$store.commit('setNotificationFetcher', { fetcherId })
   },
   data () {
     return {
diff --git a/src/modules/statuses.js b/src/modules/statuses.js
index 826b544c..2d1313a5 100644
--- a/src/modules/statuses.js
+++ b/src/modules/statuses.js
@@ -1,4 +1,4 @@
-import { remove, slice, each, find, maxBy, minBy, merge, last, isArray } from 'lodash'
+import { remove, slice, each, find, maxBy, minBy, merge, last, isArray, cloneDeep } from 'lodash'
 import apiService from '../services/api/api.service.js'
 // import parse from '../services/status_parser/status_parser.js'
 
@@ -29,7 +29,8 @@ export const defaultState = {
     data: [],
     idStore: {},
     loading: false,
-    error: false
+    error: false,
+    fetcherId: null
   },
   favorites: new Set(),
   error: false,
@@ -321,6 +322,14 @@ export const mutations = {
     oldTimeline.visibleStatusesObject = {}
     each(oldTimeline.visibleStatuses, (status) => { oldTimeline.visibleStatusesObject[status.id] = status })
   },
+  setNotificationFetcher (state, { fetcherId }) {
+    state.notifications.fetcherId = fetcherId
+  },
+  resetStatuses (state) {
+    Object.keys(state).forEach(key => {
+      state[key] = cloneDeep(defaultState[key])
+    })
+  },
   clearTimeline (state, { timeline }) {
     state.timelines[timeline] = emptyTl(state.timelines[timeline].userId)
   },
@@ -371,7 +380,7 @@ export const mutations = {
 }
 
 const statuses = {
-  state: defaultState,
+  state: cloneDeep(defaultState),
   actions: {
     addNewStatuses ({ rootState, commit }, { statuses, showImmediately = false, timeline = false, noIdUpdate = false, userId }) {
       commit('addNewStatuses', { statuses, showImmediately, timeline, noIdUpdate, user: rootState.users.currentUser, userId })
diff --git a/src/modules/users.js b/src/modules/users.js
index 77df7168..84fe039b 100644
--- a/src/modules/users.js
+++ b/src/modules/users.js
@@ -290,6 +290,10 @@ const users = {
       store.commit('setToken', false)
       store.dispatch('stopFetching', 'friends')
       store.commit('setBackendInteractor', backendInteractorService())
+      if (store.rootState.statuses.notifications.fetcherId) {
+        window.clearInterval(store.rootState.statuses.notifications.fetcherId)
+      }
+      store.commit('resetStatuses')
     },
     loginUser (store, accessToken) {
       return new Promise((resolve, reject) => {

From f5adb62e2e6efdf6bd9a9c7a8c2677c618de53f9 Mon Sep 17 00:00:00 2001
From: dave <starpumadev@gmail.com>
Date: Thu, 28 Feb 2019 14:27:47 -0500
Subject: [PATCH 10/22] #392: update defaultState into a function

---
 src/modules/statuses.js                  | 11 +++++-----
 test/unit/specs/modules/statuses.spec.js | 27 ++++++++++++------------
 2 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/src/modules/statuses.js b/src/modules/statuses.js
index 2d1313a5..2af23a9d 100644
--- a/src/modules/statuses.js
+++ b/src/modules/statuses.js
@@ -1,4 +1,4 @@
-import { remove, slice, each, find, maxBy, minBy, merge, last, isArray, cloneDeep } from 'lodash'
+import { remove, slice, each, find, maxBy, minBy, merge, last, isArray } from 'lodash'
 import apiService from '../services/api/api.service.js'
 // import parse from '../services/status_parser/status_parser.js'
 
@@ -18,7 +18,7 @@ const emptyTl = (userId = 0) => ({
   flushMarker: 0
 })
 
-export const defaultState = {
+export const defaultState = () => ({
   allStatuses: [],
   allStatusesObject: {},
   maxId: 0,
@@ -45,7 +45,7 @@ export const defaultState = {
     tag: emptyTl(),
     dms: emptyTl()
   }
-}
+})
 
 export const prepareStatus = (status) => {
   // Set deleted flag
@@ -326,8 +326,9 @@ export const mutations = {
     state.notifications.fetcherId = fetcherId
   },
   resetStatuses (state) {
+    const emptyState = defaultState()
     Object.keys(state).forEach(key => {
-      state[key] = cloneDeep(defaultState[key])
+      state[key] = emptyState[key]
     })
   },
   clearTimeline (state, { timeline }) {
@@ -380,7 +381,7 @@ export const mutations = {
 }
 
 const statuses = {
-  state: cloneDeep(defaultState),
+  state: defaultState(),
   actions: {
     addNewStatuses ({ rootState, commit }, { statuses, showImmediately = false, timeline = false, noIdUpdate = false, userId }) {
       commit('addNewStatuses', { statuses, showImmediately, timeline, noIdUpdate, user: rootState.users.currentUser, userId })
diff --git a/test/unit/specs/modules/statuses.spec.js b/test/unit/specs/modules/statuses.spec.js
index 01d2ce06..864b798d 100644
--- a/test/unit/specs/modules/statuses.spec.js
+++ b/test/unit/specs/modules/statuses.spec.js
@@ -1,4 +1,3 @@
-import { cloneDeep } from 'lodash'
 import { defaultState, mutations, prepareStatus } from '../../../../src/modules/statuses.js'
 
 // eslint-disable-next-line camelcase
@@ -24,7 +23,7 @@ describe('Statuses.prepareStatus', () => {
 
 describe('The Statuses module', () => {
   it('adds the status to allStatuses and to the given timeline', () => {
-    const state = cloneDeep(defaultState)
+    const state = defaultState()
     const status = makeMockStatus({id: '1'})
 
     mutations.addNewStatuses(state, { statuses: [status], timeline: 'public' })
@@ -36,7 +35,7 @@ describe('The Statuses module', () => {
   })
 
   it('counts the status as new if it has not been seen on this timeline', () => {
-    const state = cloneDeep(defaultState)
+    const state = defaultState()
     const status = makeMockStatus({id: '1'})
 
     mutations.addNewStatuses(state, { statuses: [status], timeline: 'public' })
@@ -54,7 +53,7 @@ describe('The Statuses module', () => {
   })
 
   it('add the statuses to allStatuses if no timeline is given', () => {
-    const state = cloneDeep(defaultState)
+    const state = defaultState()
     const status = makeMockStatus({id: '1'})
 
     mutations.addNewStatuses(state, { statuses: [status] })
@@ -66,7 +65,7 @@ describe('The Statuses module', () => {
   })
 
   it('adds the status to allStatuses and to the given timeline, directly visible', () => {
-    const state = cloneDeep(defaultState)
+    const state = defaultState()
     const status = makeMockStatus({id: '1'})
 
     mutations.addNewStatuses(state, { statuses: [status], showImmediately: true, timeline: 'public' })
@@ -78,7 +77,7 @@ describe('The Statuses module', () => {
   })
 
   it('removes statuses by tag on deletion', () => {
-    const state = cloneDeep(defaultState)
+    const state = defaultState()
     const status = makeMockStatus({id: '1'})
     const otherStatus = makeMockStatus({id: '3'})
     status.uri = 'xxx'
@@ -96,7 +95,7 @@ describe('The Statuses module', () => {
   })
 
   it('does not update the maxId when the noIdUpdate flag is set', () => {
-    const state = cloneDeep(defaultState)
+    const state = defaultState()
     const status = makeMockStatus({id: '1'})
     const secondStatus = makeMockStatus({id: '2'})
 
@@ -110,7 +109,7 @@ describe('The Statuses module', () => {
   })
 
   it('keeps a descending by id order in timeline.visibleStatuses and timeline.statuses', () => {
-    const state = cloneDeep(defaultState)
+    const state = defaultState()
     const nonVisibleStatus = makeMockStatus({id: '1'})
     const status = makeMockStatus({id: '3'})
     const statusTwo = makeMockStatus({id: '2'})
@@ -130,7 +129,7 @@ describe('The Statuses module', () => {
   })
 
   it('splits retweets from their status and links them', () => {
-    const state = cloneDeep(defaultState)
+    const state = defaultState()
     const status = makeMockStatus({id: '1'})
     const retweet = makeMockStatus({id: '2', type: 'retweet'})
     const modStatus = makeMockStatus({id: '1', text: 'something else'})
@@ -155,7 +154,7 @@ describe('The Statuses module', () => {
   })
 
   it('replaces existing statuses with the same id', () => {
-    const state = cloneDeep(defaultState)
+    const state = defaultState()
     const status = makeMockStatus({id: '1'})
     const modStatus = makeMockStatus({id: '1', text: 'something else'})
 
@@ -172,7 +171,7 @@ describe('The Statuses module', () => {
   })
 
   it('replaces existing statuses with the same id, coming from a retweet', () => {
-    const state = cloneDeep(defaultState)
+    const state = defaultState()
     const status = makeMockStatus({id: '1'})
     const modStatus = makeMockStatus({id: '1', text: 'something else'})
     const retweet = makeMockStatus({id: '2', type: 'retweet'})
@@ -193,7 +192,7 @@ describe('The Statuses module', () => {
   })
 
   it('handles favorite actions', () => {
-    const state = cloneDeep(defaultState)
+    const state = defaultState()
     const status = makeMockStatus({id: '1'})
 
     const favorite = {
@@ -241,7 +240,7 @@ describe('The Statuses module', () => {
   })
 
   it('keeps userId when clearing user timeline', () => {
-    const state = cloneDeep(defaultState)
+    const state = defaultState()
     state.timelines.user.userId = 123
 
     mutations.clearTimeline(state, { timeline: 'user' })
@@ -252,7 +251,7 @@ describe('The Statuses module', () => {
   describe('notifications', () => {
     it('removes a notification when the notice gets removed', () => {
       const user = { id: '1' }
-      const state = cloneDeep(defaultState)
+      const state = defaultState()
       const status = makeMockStatus({id: '1'})
       const otherStatus = makeMockStatus({id: '3'})
       const mentionedStatus = makeMockStatus({id: '2'})

From bbe1821be7c098f3a23bd0dd54b4ec89a159e9c1 Mon Sep 17 00:00:00 2001
From: dave <starpumadev@gmail.com>
Date: Thu, 28 Feb 2019 14:44:43 -0500
Subject: [PATCH 11/22] #392: update object.entries

---
 src/modules/statuses.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/modules/statuses.js b/src/modules/statuses.js
index 2af23a9d..028053cf 100644
--- a/src/modules/statuses.js
+++ b/src/modules/statuses.js
@@ -327,8 +327,8 @@ export const mutations = {
   },
   resetStatuses (state) {
     const emptyState = defaultState()
-    Object.keys(state).forEach(key => {
-      state[key] = emptyState[key]
+    Object.entries(emptyState).forEach(([key, value]) => {
+      state[key] = value
     })
   },
   clearTimeline (state, { timeline }) {

From f3f9fbe3027bf5284adc05387e89d904884490b2 Mon Sep 17 00:00:00 2001
From: dave <starpumadev@gmail.com>
Date: Fri, 1 Mar 2019 11:59:50 -0500
Subject: [PATCH 12/22] #392: clean up notification stopping section

---
 src/modules/statuses.js | 6 ++++++
 src/modules/users.js    | 4 +---
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/modules/statuses.js b/src/modules/statuses.js
index 028053cf..77a8ec72 100644
--- a/src/modules/statuses.js
+++ b/src/modules/statuses.js
@@ -401,6 +401,12 @@ const statuses = {
     setNotificationsSilence ({ rootState, commit }, { value }) {
       commit('setNotificationsSilence', { value })
     },
+    stopFetchingNotifications ({ rootState, commit }) {
+      if (rootState.statuses.notifications.fetcherId) {
+        window.clearInterval(rootState.statuses.notifications.fetcherId)
+      }
+      commit('setNotificationFetcher', { fetcherId: null })
+    },
     deleteStatus ({ rootState, commit }, status) {
       commit('setDeleted', { status })
       apiService.deleteStatus({ id: status.id, credentials: rootState.users.currentUser.credentials })
diff --git a/src/modules/users.js b/src/modules/users.js
index 84fe039b..0e1dd166 100644
--- a/src/modules/users.js
+++ b/src/modules/users.js
@@ -290,9 +290,7 @@ const users = {
       store.commit('setToken', false)
       store.dispatch('stopFetching', 'friends')
       store.commit('setBackendInteractor', backendInteractorService())
-      if (store.rootState.statuses.notifications.fetcherId) {
-        window.clearInterval(store.rootState.statuses.notifications.fetcherId)
-      }
+      store.dispatch('stopFetchingNotifications')
       store.commit('resetStatuses')
     },
     loginUser (store, accessToken) {

From f91e4a5801b99084894c4921746f9c47566f30dd Mon Sep 17 00:00:00 2001
From: Edijs <iamedijs@hotmail.com>
Date: Mon, 4 Mar 2019 21:29:56 -0800
Subject: [PATCH 13/22] Load post status content type from instance config

---
 src/boot/after_store.js              |  2 ++
 src/components/settings/settings.js  |  3 +++
 src/components/settings/settings.vue | 14 +++-----------
 src/i18n/en.json                     |  5 +++++
 src/modules/instance.js              |  1 +
 5 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/src/boot/after_store.js b/src/boot/after_store.js
index 53ecc083..a8e2bf35 100644
--- a/src/boot/after_store.js
+++ b/src/boot/after_store.js
@@ -169,6 +169,8 @@ const afterStoreSetup = ({ store, i18n }) => {
       store.dispatch('setInstanceOption', { name: 'chatAvailable', value: features.includes('chat') })
       store.dispatch('setInstanceOption', { name: 'gopherAvailable', value: features.includes('gopher') })
 
+      store.dispatch('setInstanceOption', { name: 'postFormats', value: metadata.postFormats })
+
       store.dispatch('setInstanceOption', { name: 'restrictedNicknames', value: metadata.restrictedNicknames })
 
       const suggestions = metadata.suggestions
diff --git a/src/components/settings/settings.js b/src/components/settings/settings.js
index 6e2dff7b..979457a5 100644
--- a/src/components/settings/settings.js
+++ b/src/components/settings/settings.js
@@ -93,6 +93,9 @@ const settings = {
     currentSaveStateNotice () {
       return this.$store.state.interface.settings.currentSaveStateNotice
     },
+    postFormats () {
+      return this.$store.state.instance.postFormats || []
+    },
     instanceSpecificPanelPresent () { return this.$store.state.instance.showInstanceSpecificPanel }
   },
   watch: {
diff --git a/src/components/settings/settings.vue b/src/components/settings/settings.vue
index 5041b3a3..c0cfe1ab 100644
--- a/src/components/settings/settings.vue
+++ b/src/components/settings/settings.vue
@@ -105,17 +105,9 @@
                 {{$t('settings.post_status_content_type')}}
                 <label for="postContentType" class="select">
                   <select id="postContentType" v-model="postContentTypeLocal">
-                    <option value="text/plain">
-                      {{$t('settings.status_content_type_plain')}}
-                      {{postContentTypeDefault == 'text/plain' ? $t('settings.instance_default_simple') : ''}}
-                    </option>
-                    <option value="text/html">
-                      HTML
-                      {{postContentTypeDefault == 'text/html' ? $t('settings.instance_default_simple') : ''}}
-                    </option>
-                    <option value="text/markdown">
-                      Markdown
-                      {{postContentTypeDefault == 'text/markdown' ? $t('settings.instance_default_simple') : ''}}
+                    <option v-for="postFormat in postFormats" :key="postFormat" :value="postFormat">
+                      {{$t(`settings.post_formats["${postFormat}"]`)}}
+                      {{postContentTypeDefault === postFormat ? $t('settings.instance_default_simple') : ''}}
                     </option>
                   </select>
                   <i class="icon-down-open"/>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index c5a4a90d..e614fb6c 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -220,6 +220,11 @@
     "subject_line_email": "Like email: \"re: subject\"",
     "subject_line_mastodon": "Like mastodon: copy as is",
     "subject_line_noop": "Do not copy",
+    "post_formats": {
+      "text/plain": "Plain text",
+      "text/html": "HTML",
+      "text/markdown": "Markdown"
+    },
     "post_status_content_type": "Post status content type",
     "status_content_type_plain": "Plain text",
     "stop_gifs": "Play-on-hover GIFs",
diff --git a/src/modules/instance.js b/src/modules/instance.js
index c31d02b9..24c52f9c 100644
--- a/src/modules/instance.js
+++ b/src/modules/instance.js
@@ -37,6 +37,7 @@ const defaultState = {
   emoji: [],
   customEmoji: [],
   restrictedNicknames: [],
+  postFormats: [],
 
   // Feature-set, apparently, not everything here is reported...
   mediaProxyAvailable: false,

From e0a66b989d8f30f6475bc04064c8c36f9f876539 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Tue, 5 Mar 2019 02:32:23 -0500
Subject: [PATCH 14/22] Re-do UserCardContent css

---
 .../basic_user_card/basic_user_card.vue       | 21 +----
 src/components/notification/notification.vue  |  4 +-
 .../notifications/notifications.scss          |  4 -
 src/components/side_drawer/side_drawer.vue    | 11 +--
 src/components/status/status.vue              |  7 +-
 .../user_card_content/user_card_content.js    | 11 ++-
 .../user_card_content/user_card_content.vue   | 79 ++++++++++---------
 src/components/user_panel/user_panel.vue      | 12 +--
 src/components/user_profile/user_profile.vue  | 11 +--
 9 files changed, 58 insertions(+), 102 deletions(-)

diff --git a/src/components/basic_user_card/basic_user_card.vue b/src/components/basic_user_card/basic_user_card.vue
index 77fb0aa0..a358c971 100644
--- a/src/components/basic_user_card/basic_user_card.vue
+++ b/src/components/basic_user_card/basic_user_card.vue
@@ -4,7 +4,7 @@
       <UserAvatar class="avatar" @click.prevent.native="toggleUserExpanded" :src="user.profile_image_url"/>
     </router-link>
     <div class="user-card-expanded-content" v-if="userExpanded">
-      <user-card-content :user="user" :switcher="false"></user-card-content>
+      <UserCardContent :user="user" :rounded="true" :bordered="true"/>
     </div>
     <div class="user-card-collapsed-content" v-else>
       <div :title="user.name" class="user-card-user-name">
@@ -29,12 +29,12 @@
 .user-card {
   display: flex;
   flex: 1 0;
+  margin: 0;
   padding-top: 0.6em;
   padding-right: 1em;
   padding-bottom: 0.6em;
   padding-left: 1em;
   border-bottom: 1px solid;
-  margin: 0;
   border-bottom-color: $fallback--border;
   border-bottom-color: var(--border, $fallback--border);
 
@@ -57,23 +57,6 @@
   &-expanded-content {
     flex: 1;
     margin-left: 0.7em;
-    border-radius: $fallback--panelRadius;
-    border-radius: var(--panelRadius, $fallback--panelRadius);
-    border-style: solid;
-    border-color: $fallback--border;
-    border-color: var(--border, $fallback--border);
-    border-width: 1px;
-    overflow: hidden;
-
-    .panel-heading {
-      background: transparent;
-      flex-direction: column;
-      align-items: stretch;
-    }
-
-    p {
-      margin-bottom: 0;
-    }
   }
 }
 </style>
diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue
index 87925cfc..6583570e 100644
--- a/src/components/notification/notification.vue
+++ b/src/components/notification/notification.vue
@@ -5,9 +5,7 @@
       <UserAvatar :compact="true" :betterShadow="betterShadow" :src="notification.action.user.profile_image_url_original"/>
     </a>
     <div class='notification-right'>
-      <div class="usercard notification-usercard" v-if="userExpanded">
-        <user-card-content :user="notification.action.user" :switcher="false"></user-card-content>
-      </div>
+      <UserCardContent :user="notification.action.user" :rounded="true" :bordered="true" v-if="userExpanded"/>
       <span class="notification-details">
         <div class="name-and-action">
           <span class="username" v-if="!!notification.action.user.name_html" :title="'@'+notification.action.user.screen_name" v-html="notification.action.user.name_html"></span>
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index 2240c10a..c0b458cc 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -45,10 +45,6 @@
     }
   }
 
-  .notification-usercard {
-    margin: 0;
-  }
-
   .non-mention {
     display: flex;
     flex: 1;
diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue
index 6996380d..f346b440 100644
--- a/src/components/side_drawer/side_drawer.vue
+++ b/src/components/side_drawer/side_drawer.vue
@@ -8,7 +8,7 @@
       @touchmove="touchMove"
     >
       <div class="side-drawer-heading" @click="toggleDrawer">
-        <user-card-content :user="currentUser" :switcher="false" :hideBio="true" v-if="currentUser"/>
+        <UserCardContent :user="currentUser" :hideBio="true" v-if="currentUser"/>
         <div class="side-drawer-logo-wrapper" v-else>
           <img :src="logo"/>
           <span>{{sitename}}</span>
@@ -181,15 +181,6 @@
   display: flex;
   padding: 0;
   margin: 0;
-
-  .profile-panel-background {
-    border-radius: 0;
-    .panel-heading {
-      background: transparent;
-      flex-direction: column;
-      align-items: stretch;
-    }
-  }
 }
 
 .side-drawer ul {
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index ee6ef7da..0c110c90 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -31,9 +31,7 @@
           </router-link>
         </div>
         <div class="status-body">
-          <div class="usercard" v-if="userExpanded">
-            <user-card-content :user="status.user" :switcher="false"></user-card-content>
-          </div>
+          <UserCardContent :user="status.user" :rounded="true" :bordered="true" class="status-usercard-content" v-if="userExpanded"/>
           <div v-if="!noHeading" class="media-heading">
             <div class="heading-name-row">
               <div class="name-and-account-name">
@@ -248,8 +246,7 @@ $status-margin: 0.75em;
     padding: 0;
   }
 
-  .usercard {
-    margin: 0;
+  .status-usercard-content {
     margin-bottom: $status-margin;
   }
 
diff --git a/src/components/user_card_content/user_card_content.js b/src/components/user_card_content/user_card_content.js
index 7a7b89d4..78c7eb6b 100644
--- a/src/components/user_card_content/user_card_content.js
+++ b/src/components/user_card_content/user_card_content.js
@@ -4,7 +4,7 @@ import { requestFollow, requestUnfollow } from '../../services/follow_manipulate
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
 
 export default {
-  props: [ 'user', 'switcher', 'selected', 'hideBio' ],
+  props: [ 'user', 'switcher', 'selected', 'hideBio', 'rounded', 'bordered' ],
   data () {
     return {
       followRequestInProgress: false,
@@ -16,7 +16,14 @@ export default {
     }
   },
   computed: {
-    headingStyle () {
+    classes () {
+      return [{
+        'user-card-content-rounded': this.rounded === true,
+        'user-card-content-rounded-t': this.rounded === 'top',  // top only
+        'user-card-content-bordered': this.bordered
+      }]
+    },
+    style () {
       const color = this.$store.state.config.customTheme.colors
             ? this.$store.state.config.customTheme.colors.bg  // v2
             : this.$store.state.config.colors.bg // v1
diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue
index 702c3385..f06a0a45 100644
--- a/src/components/user_card_content/user_card_content.vue
+++ b/src/components/user_card_content/user_card_content.vue
@@ -1,6 +1,6 @@
 <template>
-<div id="heading" class="profile-panel-background" :style="headingStyle">
-  <div class="panel-heading text-center">
+<div class="user-card-content" :class="classes" :style="style">
+  <div class="panel-heading">
     <div class='user-info'>
       <div class='container'>
         <router-link :to="userProfileLink(user)">
@@ -108,7 +108,7 @@
       </div>
     </div>
   </div>
-  <div class="panel-body profile-panel-body" v-if="!hideBio">
+  <div class="panel-body" v-if="!hideBio">
     <div v-if="!hideUserStatsLocal && switcher" class="user-counts">
       <div class="user-count" v-on:click.prevent="setProfileView('statuses')">
         <h5>{{ $t('user_card.statuses') }}</h5>
@@ -123,8 +123,8 @@
         <span>{{user.followers_count}}</span>
       </div>
     </div>
-    <p @click.prevent="linkClicked" v-if="!hideBio && user.description_html" class="profile-bio" v-html="user.description_html"></p>
-    <p v-else-if="!hideBio" class="profile-bio">{{ user.description }}</p>
+    <p @click.prevent="linkClicked" v-if="!hideBio && user.description_html" class="user-card-content-bio" v-html="user.description_html"></p>
+    <p v-else-if="!hideBio" class="user-card-content-bio">{{ user.description }}</p>
   </div>
 </div>
 </template>
@@ -134,30 +134,54 @@
 <style lang="scss">
 @import '../../_variables.scss';
 
-.profile-panel-background {
+.user-card-content {
   background-size: cover;
-  border-radius: $fallback--panelRadius;
-  border-radius: var(--panelRadius, $fallback--panelRadius);
   overflow: hidden;
 
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-
   .panel-heading {
     padding: .5em 0;
     text-align: center;
     box-shadow: none;
+    background: transparent;
+    flex-direction: column;
+    align-items: stretch;
   }
-}
 
-.profile-panel-body {
-  word-wrap: break-word;
-  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), $fallback--bg 80%);
-  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--bg, $fallback--bg) 80%);
+  .panel-body {
+    word-wrap: break-word;
+    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), $fallback--bg 80%);
+    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--bg, $fallback--bg) 80%);
+  }
 
-  .profile-bio {
+  p {
+    margin-bottom: 0;
+  }
+
+  &-bio {
     text-align: center;
   }
+
+  //
+  // Modifiers
+
+  &-rounded {
+    border-radius: $fallback--panelRadius;
+    border-radius: var(--panelRadius, $fallback--panelRadius);
+  }
+
+  &-rounded-t {
+    border-radius: $fallback--panelRadius;
+    border-radius: var(--panelRadius, $fallback--panelRadius);
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  &-bordered {
+    border-width: 1px;
+    border-style: solid;
+    border-color: $fallback--border;
+    border-color: var(--border, $fallback--border);
+  }
 }
 
 .user-info {
@@ -393,25 +417,4 @@
     text-decoration: none;
   }
 }
-
-.usercard {
-  width: fill-available;
-  border-radius: $fallback--panelRadius;
-  border-radius: var(--panelRadius, $fallback--panelRadius);
-  border-style: solid;
-  border-color: $fallback--border;
-  border-color: var(--border, $fallback--border);
-  border-width: 1px;
-  overflow: hidden;
-
-  .panel-heading {
-    background: transparent;
-    flex-direction: column;
-    align-items: stretch;
-  }
-
-  p {
-    margin-bottom: 0;
-  }
-}
 </style>
diff --git a/src/components/user_panel/user_panel.vue b/src/components/user_panel/user_panel.vue
index 2d5cb500..4b3d8971 100644
--- a/src/components/user_panel/user_panel.vue
+++ b/src/components/user_panel/user_panel.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="user-panel">
     <div v-if='user' class="panel panel-default" style="overflow: visible;">
-      <user-card-content :user="user" :switcher="false" :hideBio="true"></user-card-content>
+      <UserCardContent :user="user" :hideBio="true" rounded="top"/>
       <div class="panel-footer">
         <post-status-form v-if='user'></post-status-form>
       </div>
@@ -11,13 +11,3 @@
 </template>
 
 <script src="./user_panel.js"></script>
-
-<style lang="scss">
-.user-panel {
-  .profile-panel-background .panel-heading {
-    background: transparent;
-    flex-direction: column;
-    align-items: stretch;
-  }
-}
-</style>
diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue
index 8090efa5..c57d3409 100644
--- a/src/components/user_profile/user_profile.vue
+++ b/src/components/user_profile/user_profile.vue
@@ -1,11 +1,7 @@
 <template>
 <div>
   <div v-if="user.id" class="user-profile panel panel-default">
-    <user-card-content
-      :user="user"
-      :switcher="true"
-      :selected="timeline.viewing"
-    />
+    <UserCardContent :user="user" :switcher="true" :selected="timeline.viewing" rounded="top"/>
     <tab-switcher :renderOnlyFocused="true" ref="tabSwitcher">
       <Timeline
         :label="$t('user_card.statuses')"
@@ -64,11 +60,6 @@
   flex: 2;
   flex-basis: 500px;
 
-  .profile-panel-background .panel-heading {
-    background: transparent;
-    flex-direction: column;
-    align-items: stretch;
-  }
   .userlist-placeholder {
     display: flex;
     justify-content: center;

From 43c52cb95054d3de43a3a7a5ab46836c84013d1b Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Tue, 5 Mar 2019 13:25:31 -0500
Subject: [PATCH 15/22] Update modifier class notation

---
 .../user_card_content/user_card_content.js     |  6 +++---
 .../user_card_content/user_card_content.vue    | 18 +++++++++---------
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/components/user_card_content/user_card_content.js b/src/components/user_card_content/user_card_content.js
index 78c7eb6b..96c6036c 100644
--- a/src/components/user_card_content/user_card_content.js
+++ b/src/components/user_card_content/user_card_content.js
@@ -18,9 +18,9 @@ export default {
   computed: {
     classes () {
       return [{
-        'user-card-content-rounded': this.rounded === true,
-        'user-card-content-rounded-t': this.rounded === 'top',  // top only
-        'user-card-content-bordered': this.bordered
+        'user-card-content-rt': this.rounded === 'top', // set border-top-left-radius and border-top-right-radius
+        'user-card-content-r': this.rounded === true,   // set border-radius for all sides
+        'user-card-content-b': this.bordered === true   // set border for all sides
       }]
     },
     style () {
diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue
index f06a0a45..e003e850 100644
--- a/src/components/user_card_content/user_card_content.vue
+++ b/src/components/user_card_content/user_card_content.vue
@@ -164,19 +164,19 @@
   //
   // Modifiers
 
-  &-rounded {
+  &-rt {
+    border-top-left-radius: $fallback--panelRadius;
+    border-top-left-radius: var(--panelRadius, $fallback--panelRadius);
+    border-top-right-radius: $fallback--panelRadius;
+    border-top-right-radius: var(--panelRadius, $fallback--panelRadius);
+  }
+
+  &-r {
     border-radius: $fallback--panelRadius;
     border-radius: var(--panelRadius, $fallback--panelRadius);
   }
 
-  &-rounded-t {
-    border-radius: $fallback--panelRadius;
-    border-radius: var(--panelRadius, $fallback--panelRadius);
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
-  }
-
-  &-bordered {
+  &-b {
     border-width: 1px;
     border-style: solid;
     border-color: $fallback--border;

From baf603a506529cfacdd4bf0b98f248cd3ed35b34 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Tue, 5 Mar 2019 13:54:49 -0500
Subject: [PATCH 16/22] Update block class name of BasicUserCard component

---
 src/components/basic_user_card/basic_user_card.vue | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/basic_user_card/basic_user_card.vue b/src/components/basic_user_card/basic_user_card.vue
index a358c971..f72620a3 100644
--- a/src/components/basic_user_card/basic_user_card.vue
+++ b/src/components/basic_user_card/basic_user_card.vue
@@ -1,18 +1,18 @@
 <template>
-  <div class="user-card">
+  <div class="basic-user-card">
     <router-link :to="userProfileLink(user)">
       <UserAvatar class="avatar" @click.prevent.native="toggleUserExpanded" :src="user.profile_image_url"/>
     </router-link>
-    <div class="user-card-expanded-content" v-if="userExpanded">
+    <div class="basic-user-card-expanded-content" v-if="userExpanded">
       <UserCardContent :user="user" :rounded="true" :bordered="true"/>
     </div>
-    <div class="user-card-collapsed-content" v-else>
-      <div :title="user.name" class="user-card-user-name">
+    <div class="basic-user-card-collapsed-content" v-else>
+      <div :title="user.name" class="basic-user-card-user-name">
         <span v-if="user.name_html" v-html="user.name_html"></span>
         <span v-else>{{ user.name }}</span>
       </div>
       <div>
-        <router-link class="user-card-screen-name" :to="userProfileLink(user)">
+        <router-link class="basic-user-card-screen-name" :to="userProfileLink(user)">
           @{{user.screen_name}}
         </router-link>
       </div>
@@ -26,7 +26,7 @@
 <style lang="scss">
 @import '../../_variables.scss';
 
-.user-card {
+.basic-user-card {
   display: flex;
   flex: 1 0;
   margin: 0;

From 7bceabb5bda1f7d0737f8f51e0aa07879b7ce72e Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Tue, 5 Mar 2019 14:01:49 -0500
Subject: [PATCH 17/22] Rename UserCardContent to UserCard

---
 src/components/basic_user_card/basic_user_card.js      |  4 ++--
 src/components/basic_user_card/basic_user_card.vue     |  2 +-
 src/components/notification/notification.js            |  4 ++--
 src/components/notification/notification.vue           |  2 +-
 src/components/side_drawer/side_drawer.js              |  4 ++--
 src/components/side_drawer/side_drawer.vue             |  2 +-
 src/components/status/status.js                        |  4 ++--
 src/components/status/status.vue                       |  2 +-
 .../user_card_content.js => user_card/user_card.js}    |  6 +++---
 .../user_card_content.vue => user_card/user_card.vue}  | 10 +++++-----
 src/components/user_panel/user_panel.js                |  4 ++--
 src/components/user_panel/user_panel.vue               |  2 +-
 src/components/user_profile/user_profile.js            |  4 ++--
 src/components/user_profile/user_profile.vue           |  2 +-
 14 files changed, 26 insertions(+), 26 deletions(-)
 rename src/components/{user_card_content/user_card_content.js => user_card/user_card.js} (94%)
 rename src/components/{user_card_content/user_card_content.vue => user_card/user_card.vue} (97%)

diff --git a/src/components/basic_user_card/basic_user_card.js b/src/components/basic_user_card/basic_user_card.js
index a8441446..87085a28 100644
--- a/src/components/basic_user_card/basic_user_card.js
+++ b/src/components/basic_user_card/basic_user_card.js
@@ -1,4 +1,4 @@
-import UserCardContent from '../user_card_content/user_card_content.vue'
+import UserCard from '../user_card/user_card.vue'
 import UserAvatar from '../user_avatar/user_avatar.vue'
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
 
@@ -12,7 +12,7 @@ const BasicUserCard = {
     }
   },
   components: {
-    UserCardContent,
+    UserCard,
     UserAvatar
   },
   methods: {
diff --git a/src/components/basic_user_card/basic_user_card.vue b/src/components/basic_user_card/basic_user_card.vue
index f72620a3..9b80c72b 100644
--- a/src/components/basic_user_card/basic_user_card.vue
+++ b/src/components/basic_user_card/basic_user_card.vue
@@ -4,7 +4,7 @@
       <UserAvatar class="avatar" @click.prevent.native="toggleUserExpanded" :src="user.profile_image_url"/>
     </router-link>
     <div class="basic-user-card-expanded-content" v-if="userExpanded">
-      <UserCardContent :user="user" :rounded="true" :bordered="true"/>
+      <UserCard :user="user" :rounded="true" :bordered="true"/>
     </div>
     <div class="basic-user-card-collapsed-content" v-else>
       <div :title="user.name" class="basic-user-card-user-name">
diff --git a/src/components/notification/notification.js b/src/components/notification/notification.js
index 7d9807de..fe5b7018 100644
--- a/src/components/notification/notification.js
+++ b/src/components/notification/notification.js
@@ -1,6 +1,6 @@
 import Status from '../status/status.vue'
 import UserAvatar from '../user_avatar/user_avatar.vue'
-import UserCardContent from '../user_card_content/user_card_content.vue'
+import UserCard from '../user_card/user_card.vue'
 import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
 
@@ -13,7 +13,7 @@ const Notification = {
   },
   props: [ 'notification' ],
   components: {
-    Status, UserAvatar, UserCardContent
+    Status, UserAvatar, UserCard
   },
   methods: {
     toggleUserExpanded () {
diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue
index 6583570e..5e9cef97 100644
--- a/src/components/notification/notification.vue
+++ b/src/components/notification/notification.vue
@@ -5,7 +5,7 @@
       <UserAvatar :compact="true" :betterShadow="betterShadow" :src="notification.action.user.profile_image_url_original"/>
     </a>
     <div class='notification-right'>
-      <UserCardContent :user="notification.action.user" :rounded="true" :bordered="true" v-if="userExpanded"/>
+      <UserCard :user="notification.action.user" :rounded="true" :bordered="true" v-if="userExpanded"/>
       <span class="notification-details">
         <div class="name-and-action">
           <span class="username" v-if="!!notification.action.user.name_html" :title="'@'+notification.action.user.screen_name" v-html="notification.action.user.name_html"></span>
diff --git a/src/components/side_drawer/side_drawer.js b/src/components/side_drawer/side_drawer.js
index b5c49059..ad3738d1 100644
--- a/src/components/side_drawer/side_drawer.js
+++ b/src/components/side_drawer/side_drawer.js
@@ -1,4 +1,4 @@
-import UserCardContent from '../user_card_content/user_card_content.vue'
+import UserCard from '../user_card/user_card.vue'
 import { unseenNotificationsFromStore } from '../../services/notification_utils/notification_utils'
 
 // TODO: separate touch gesture stuff into their own utils if more components want them
@@ -12,7 +12,7 @@ const SideDrawer = {
     closed: true,
     touchCoord: [0, 0]
   }),
-  components: { UserCardContent },
+  components: { UserCard },
   computed: {
     currentUser () {
       return this.$store.state.users.currentUser
diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue
index f346b440..b608b008 100644
--- a/src/components/side_drawer/side_drawer.vue
+++ b/src/components/side_drawer/side_drawer.vue
@@ -8,7 +8,7 @@
       @touchmove="touchMove"
     >
       <div class="side-drawer-heading" @click="toggleDrawer">
-        <UserCardContent :user="currentUser" :hideBio="true" v-if="currentUser"/>
+        <UserCard :user="currentUser" :hideBio="true" v-if="currentUser"/>
         <div class="side-drawer-logo-wrapper" v-else>
           <img :src="logo"/>
           <span>{{sitename}}</span>
diff --git a/src/components/status/status.js b/src/components/status/status.js
index fbbca6c4..9e18fe15 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -3,7 +3,7 @@ import FavoriteButton from '../favorite_button/favorite_button.vue'
 import RetweetButton from '../retweet_button/retweet_button.vue'
 import DeleteButton from '../delete_button/delete_button.vue'
 import PostStatusForm from '../post_status_form/post_status_form.vue'
-import UserCardContent from '../user_card_content/user_card_content.vue'
+import UserCard from '../user_card/user_card.vue'
 import UserAvatar from '../user_avatar/user_avatar.vue'
 import Gallery from '../gallery/gallery.vue'
 import LinkPreview from '../link-preview/link-preview.vue'
@@ -259,7 +259,7 @@ const Status = {
     RetweetButton,
     DeleteButton,
     PostStatusForm,
-    UserCardContent,
+    UserCard,
     UserAvatar,
     Gallery,
     LinkPreview
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 0c110c90..8fda68f5 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -31,7 +31,7 @@
           </router-link>
         </div>
         <div class="status-body">
-          <UserCardContent :user="status.user" :rounded="true" :bordered="true" class="status-usercard-content" v-if="userExpanded"/>
+          <UserCard :user="status.user" :rounded="true" :bordered="true" class="status-usercard-content" v-if="userExpanded"/>
           <div v-if="!noHeading" class="media-heading">
             <div class="heading-name-row">
               <div class="name-and-account-name">
diff --git a/src/components/user_card_content/user_card_content.js b/src/components/user_card/user_card.js
similarity index 94%
rename from src/components/user_card_content/user_card_content.js
rename to src/components/user_card/user_card.js
index 96c6036c..0cb616f4 100644
--- a/src/components/user_card_content/user_card_content.js
+++ b/src/components/user_card/user_card.js
@@ -18,9 +18,9 @@ export default {
   computed: {
     classes () {
       return [{
-        'user-card-content-rt': this.rounded === 'top', // set border-top-left-radius and border-top-right-radius
-        'user-card-content-r': this.rounded === true,   // set border-radius for all sides
-        'user-card-content-b': this.bordered === true   // set border for all sides
+        'user-card-rt': this.rounded === 'top', // set border-top-left-radius and border-top-right-radius
+        'user-card-r': this.rounded === true,   // set border-radius for all sides
+        'user-card-b': this.bordered === true   // set border for all sides
       }]
     },
     style () {
diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card/user_card.vue
similarity index 97%
rename from src/components/user_card_content/user_card_content.vue
rename to src/components/user_card/user_card.vue
index e003e850..b90f57a1 100644
--- a/src/components/user_card_content/user_card_content.vue
+++ b/src/components/user_card/user_card.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="user-card-content" :class="classes" :style="style">
+<div class="user-card" :class="classes" :style="style">
   <div class="panel-heading">
     <div class='user-info'>
       <div class='container'>
@@ -123,18 +123,18 @@
         <span>{{user.followers_count}}</span>
       </div>
     </div>
-    <p @click.prevent="linkClicked" v-if="!hideBio && user.description_html" class="user-card-content-bio" v-html="user.description_html"></p>
-    <p v-else-if="!hideBio" class="user-card-content-bio">{{ user.description }}</p>
+    <p @click.prevent="linkClicked" v-if="!hideBio && user.description_html" class="user-card-bio" v-html="user.description_html"></p>
+    <p v-else-if="!hideBio" class="user-card-bio">{{ user.description }}</p>
   </div>
 </div>
 </template>
 
-<script src="./user_card_content.js"></script>
+<script src="./user_card.js"></script>
 
 <style lang="scss">
 @import '../../_variables.scss';
 
-.user-card-content {
+.user-card {
   background-size: cover;
   overflow: hidden;
 
diff --git a/src/components/user_panel/user_panel.js b/src/components/user_panel/user_panel.js
index 15804b88..d4478290 100644
--- a/src/components/user_panel/user_panel.js
+++ b/src/components/user_panel/user_panel.js
@@ -1,6 +1,6 @@
 import LoginForm from '../login_form/login_form.vue'
 import PostStatusForm from '../post_status_form/post_status_form.vue'
-import UserCardContent from '../user_card_content/user_card_content.vue'
+import UserCard from '../user_card/user_card.vue'
 
 const UserPanel = {
   computed: {
@@ -9,7 +9,7 @@ const UserPanel = {
   components: {
     LoginForm,
     PostStatusForm,
-    UserCardContent
+    UserCard
   }
 }
 
diff --git a/src/components/user_panel/user_panel.vue b/src/components/user_panel/user_panel.vue
index 4b3d8971..8310f30e 100644
--- a/src/components/user_panel/user_panel.vue
+++ b/src/components/user_panel/user_panel.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="user-panel">
     <div v-if='user' class="panel panel-default" style="overflow: visible;">
-      <UserCardContent :user="user" :hideBio="true" rounded="top"/>
+      <UserCard :user="user" :hideBio="true" rounded="top"/>
       <div class="panel-footer">
         <post-status-form v-if='user'></post-status-form>
       </div>
diff --git a/src/components/user_profile/user_profile.js b/src/components/user_profile/user_profile.js
index cdf1cee9..54126514 100644
--- a/src/components/user_profile/user_profile.js
+++ b/src/components/user_profile/user_profile.js
@@ -1,6 +1,6 @@
 import { compose } from 'vue-compose'
 import get from 'lodash/get'
-import UserCardContent from '../user_card_content/user_card_content.vue'
+import UserCard from '../user_card/user_card.vue'
 import FollowCard from '../follow_card/follow_card.vue'
 import Timeline from '../timeline/timeline.vue'
 import withLoadMore from '../../hocs/with_load_more/with_load_more'
@@ -147,7 +147,7 @@ const UserProfile = {
     }
   },
   components: {
-    UserCardContent,
+    UserCard,
     Timeline,
     FollowerList,
     FriendList
diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue
index c57d3409..7d4a8b1f 100644
--- a/src/components/user_profile/user_profile.vue
+++ b/src/components/user_profile/user_profile.vue
@@ -1,7 +1,7 @@
 <template>
 <div>
   <div v-if="user.id" class="user-profile panel panel-default">
-    <UserCardContent :user="user" :switcher="true" :selected="timeline.viewing" rounded="top"/>
+    <UserCard :user="user" :switcher="true" :selected="timeline.viewing" rounded="top"/>
     <tab-switcher :renderOnlyFocused="true" ref="tabSwitcher">
       <Timeline
         :label="$t('user_card.statuses')"

From 7cb13df8adcd9ad24b017a3399137a53acb3eb4c Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Tue, 5 Mar 2019 14:13:22 -0500
Subject: [PATCH 18/22] Update tests

---
 test/unit/specs/boot/routes.spec.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/test/unit/specs/boot/routes.spec.js b/test/unit/specs/boot/routes.spec.js
index 383ba90f..a415aeaf 100644
--- a/test/unit/specs/boot/routes.spec.js
+++ b/test/unit/specs/boot/routes.spec.js
@@ -24,7 +24,7 @@ describe('routes', () => {
 
     const matchedComponents = router.getMatchedComponents()
 
-    expect(matchedComponents[0].components.hasOwnProperty('UserCardContent')).to.eql(true)
+    expect(matchedComponents[0].components.hasOwnProperty('UserCard')).to.eql(true)
   })
 
   it('user\'s profile at /users', () => {
@@ -32,6 +32,6 @@ describe('routes', () => {
 
     const matchedComponents = router.getMatchedComponents()
 
-    expect(matchedComponents[0].components.hasOwnProperty('UserCardContent')).to.eql(true)
+    expect(matchedComponents[0].components.hasOwnProperty('UserCard')).to.eql(true)
   })
 })

From 37acb51df416a2475f467c0402a5e18821c5934d Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Tue, 5 Mar 2019 21:48:07 -0500
Subject: [PATCH 19/22] Update classname

---
 src/components/status/status.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 8fda68f5..c234bc03 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -31,7 +31,7 @@
           </router-link>
         </div>
         <div class="status-body">
-          <UserCard :user="status.user" :rounded="true" :bordered="true" class="status-usercard-content" v-if="userExpanded"/>
+          <UserCard :user="status.user" :rounded="true" :bordered="true" class="status-usercard" v-if="userExpanded"/>
           <div v-if="!noHeading" class="media-heading">
             <div class="heading-name-row">
               <div class="name-and-account-name">
@@ -246,7 +246,7 @@ $status-margin: 0.75em;
     padding: 0;
   }
 
-  .status-usercard-content {
+  .status-usercard {
     margin-bottom: $status-margin;
   }
 

From 5f51fe897dcd7d32c46a67a8d31c8b4ffc8858b2 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Tue, 5 Mar 2019 21:52:04 -0500
Subject: [PATCH 20/22] Revert modifier class notation

---
 src/components/user_card/user_card.js  | 6 +++---
 src/components/user_card/user_card.vue | 7 +++----
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js
index 0cb616f4..81c938c0 100644
--- a/src/components/user_card/user_card.js
+++ b/src/components/user_card/user_card.js
@@ -18,9 +18,9 @@ export default {
   computed: {
     classes () {
       return [{
-        'user-card-rt': this.rounded === 'top', // set border-top-left-radius and border-top-right-radius
-        'user-card-r': this.rounded === true,   // set border-radius for all sides
-        'user-card-b': this.bordered === true   // set border for all sides
+        'user-card-rounded-t': this.rounded === 'top',  // set border-top-left-radius and border-top-right-radius
+        'user-card-rounded': this.rounded === true,     // set border-radius for all sides
+        'user-card-bordered': this.bordered === true    // set border for all sides
       }]
     },
     style () {
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index b90f57a1..cc2ce6b8 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -161,22 +161,21 @@
     text-align: center;
   }
 
-  //
   // Modifiers
 
-  &-rt {
+  &-rounded-t {
     border-top-left-radius: $fallback--panelRadius;
     border-top-left-radius: var(--panelRadius, $fallback--panelRadius);
     border-top-right-radius: $fallback--panelRadius;
     border-top-right-radius: var(--panelRadius, $fallback--panelRadius);
   }
 
-  &-r {
+  &-rounded {
     border-radius: $fallback--panelRadius;
     border-radius: var(--panelRadius, $fallback--panelRadius);
   }
 
-  &-b {
+  &-bordered {
     border-width: 1px;
     border-style: solid;
     border-color: $fallback--border;

From aca3b37134ef797f9c112f9584bf42dee1d9c87e Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Wed, 6 Mar 2019 12:03:42 -0500
Subject: [PATCH 21/22] Use a cross browser safe solution to get scroll top

---
 src/components/timeline/timeline.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js
index 655bfb3f..c45f8947 100644
--- a/src/components/timeline/timeline.js
+++ b/src/components/timeline/timeline.js
@@ -132,7 +132,9 @@ const Timeline = {
       }
       if (count > 0) {
         // only 'stream' them when you're scrolled to the top
-        if (window.pageYOffset < 15 &&
+        const doc = document.documentElement
+        const top = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0)
+        if (top < 15 &&
             !this.paused &&
             !(this.unfocused && this.$store.state.config.pauseOnUnfocused)
            ) {

From 292cdfb24b2d42d38728e8ff9ab16e2ad9e66410 Mon Sep 17 00:00:00 2001
From: Edijs <iamedijs@hotmail.com>
Date: Wed, 6 Mar 2019 20:13:04 -0800
Subject: [PATCH 22/22] Merge content types translations

---
 src/components/post_status_form/post_status_form.js  |  3 +++
 src/components/post_status_form/post_status_form.vue |  6 +++---
 src/components/settings/settings.vue                 |  2 +-
 src/i18n/en.json                                     | 10 +++-------
 src/i18n/eo.json                                     |  1 -
 src/i18n/es.json                                     |  1 -
 src/i18n/ja.json                                     |  1 -
 src/i18n/oc.json                                     |  1 -
 src/i18n/pt.json                                     |  1 -
 9 files changed, 10 insertions(+), 16 deletions(-)

diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
index c28c51bf..23a2c7e2 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@@ -171,6 +171,9 @@ const PostStatusForm = {
     },
     formattingOptionsEnabled () {
       return this.$store.state.instance.formattingOptionsEnabled
+    },
+    postFormats () {
+      return this.$store.state.instance.postFormats || []
     }
   },
   methods: {
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index 5085570b..93f78f65 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -36,9 +36,9 @@
         <span class="text-format" v-if="formattingOptionsEnabled">
           <label for="post-content-type" class="select">
             <select id="post-content-type" v-model="newStatus.contentType" class="form-control">
-              <option value="text/plain">{{$t('post_status.content_type.plain_text')}}</option>
-              <option value="text/html">HTML</option>
-              <option value="text/markdown">Markdown</option>
+              <option v-for="postFormat in postFormats" :key="postFormat" :value="postFormat">
+                {{$t(`post_status.content_type["${postFormat}"]`)}}
+              </option>
             </select>
             <i class="icon-down-open"></i>
           </label>
diff --git a/src/components/settings/settings.vue b/src/components/settings/settings.vue
index c0cfe1ab..d2346747 100644
--- a/src/components/settings/settings.vue
+++ b/src/components/settings/settings.vue
@@ -106,7 +106,7 @@
                 <label for="postContentType" class="select">
                   <select id="postContentType" v-model="postContentTypeLocal">
                     <option v-for="postFormat in postFormats" :key="postFormat" :value="postFormat">
-                      {{$t(`settings.post_formats["${postFormat}"]`)}}
+                      {{$t(`post_status.content_type["${postFormat}"]`)}}
                       {{postContentTypeDefault === postFormat ? $t('settings.instance_default_simple') : ''}}
                     </option>
                   </select>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index e614fb6c..01fe2fba 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -71,7 +71,9 @@
     "account_not_locked_warning_link": "locked",
     "attachments_sensitive": "Mark attachments as sensitive",
     "content_type": {
-      "plain_text": "Plain text"
+      "text/plain": "Plain text",
+      "text/html": "HTML",
+      "text/markdown": "Markdown"
     },
     "content_warning": "Subject (optional)",
     "default": "Just landed in L.A.",
@@ -220,13 +222,7 @@
     "subject_line_email": "Like email: \"re: subject\"",
     "subject_line_mastodon": "Like mastodon: copy as is",
     "subject_line_noop": "Do not copy",
-    "post_formats": {
-      "text/plain": "Plain text",
-      "text/html": "HTML",
-      "text/markdown": "Markdown"
-    },
     "post_status_content_type": "Post status content type",
-    "status_content_type_plain": "Plain text",
     "stop_gifs": "Play-on-hover GIFs",
     "streaming": "Enable automatic streaming of new posts when scrolled to the top",
     "text": "Text",
diff --git a/src/i18n/eo.json b/src/i18n/eo.json
index 2438b4d5..34851a44 100644
--- a/src/i18n/eo.json
+++ b/src/i18n/eo.json
@@ -221,7 +221,6 @@
     "subject_line_mastodon": "Kiel Mastodon: kopii senŝanĝe",
     "subject_line_noop": "Ne kopii",
     "post_status_content_type": "Afiŝi specon de la enhavo de la stato",
-    "status_content_type_plain": "Plata teksto",
     "stop_gifs": "Movi GIF-bildojn dum musa ŝvebo",
     "streaming": "Ŝalti memfaran fluigon de novaj afiŝoj ĉe la supro de la paĝo",
     "text": "Teksto",
diff --git a/src/i18n/es.json b/src/i18n/es.json
index 167e8c42..fe96dd08 100644
--- a/src/i18n/es.json
+++ b/src/i18n/es.json
@@ -202,7 +202,6 @@
     "subject_line_mastodon": "Tipo mastodon: copiar como es",
     "subject_line_noop": "No copiar",
     "post_status_content_type": "Formato de publicación",
-    "status_content_type_plain": "Texto plano",
     "stop_gifs": "Iniciar GIFs al pasar el ratón",
     "streaming": "Habilite la transmisión automática de nuevas publicaciones cuando se desplaza hacia la parte superior",
     "text": "Texto",
diff --git a/src/i18n/ja.json b/src/i18n/ja.json
index b51fa7fd..f39a5a7c 100644
--- a/src/i18n/ja.json
+++ b/src/i18n/ja.json
@@ -202,7 +202,6 @@
     "subject_line_mastodon": "マストドンふう: そのままコピー",
     "subject_line_noop": "コピーしない",
     "post_status_content_type": "とうこうのコンテントタイプ",
-    "status_content_type_plain": "プレーンテキスト",
     "stop_gifs": "カーソルをかさねたとき、GIFをうごかす",
     "streaming": "うえまでスクロールしたとき、じどうてきにストリーミングする",
     "text": "もじ",
diff --git a/src/i18n/oc.json b/src/i18n/oc.json
index ef32f83b..fd5ccc97 100644
--- a/src/i18n/oc.json
+++ b/src/i18n/oc.json
@@ -221,7 +221,6 @@
     "subject_line_mastodon": "Coma mastodon : copiar tal coma es",
     "subject_line_noop": "Copiar pas",
 "post_status_content_type": "Publicar lo tipe de contengut dels estatuts",
-    "status_content_type_plain": "Tèxte brut",
     "stop_gifs": "Lançar los GIFs al subrevòl",
     "streaming": "Activar lo cargament automatic dels novèls estatus en anar amont",
     "text": "Tèxt",
diff --git a/src/i18n/pt.json b/src/i18n/pt.json
index 39ff6c63..cbc2c9a3 100644
--- a/src/i18n/pt.json
+++ b/src/i18n/pt.json
@@ -221,7 +221,6 @@
     "subject_line_mastodon": "Como o Mastodon: copiar como está",
     "subject_line_noop": "Não copiar",
     "post_status_content_type": "Postar tipo de conteúdo do status",
-    "status_content_type_plain": "Texto puro",
     "stop_gifs": "Reproduzir GIFs ao passar o cursor em cima",
     "streaming": "Habilitar o fluxo automático de postagens quando ao topo da página",
     "text": "Texto",